import { computed , Computed , State } from 'easy-peasy' ; import flatten from 'lodash.flatten' ; import { storeStateProject } from '../../utils/store-assest' ; import type { StoreModel } from '../index' ; import { Property , AlreadyVariants } from './controlles' ; export const MixBlendValues = [ 'mix-blend-normal' , 'mix-blend-multiply' , 'mix-blend-screen' , 'mix-blend-overlay' , 'mix-blend-darken' , 'mix-blend-lighten' , 'mix-blend-color-dodge' , 'mix-blend-color-burn' , 'mix-blend-hard-light' , 'mix-blend-soft-light' , 'mix-blend-difference' , 'mix-blend-exclusion' , 'mix-blend-hue' , 'mix-blend-saturation' , 'mix-blend-color' , 'mix-blend-luminosity' , ] ; export const BackgroundBlendValues = [ 'bg-blend-normal' , 'bg-blend-multiply' , 'bg-blend-screen' , 'bg-blend-overlay' , 'bg-blend-darken' , 'bg-blend-lighten' , 'bg-blend-color-dodge' , 'bg-blend-color-burn' , 'bg-blend-hard-light' , 'bg-blend-soft-light' , 'bg-blend-difference' , 'bg-blend-exclusion' , 'bg-blend-hue' , 'bg-blend-saturation' , 'bg-blend-color' , 'bg-blend-luminosity' , ] ; export const TransformValues = [ 'transform' , 'transform-gpu' , 'transform-none' ] ; export interface EffectsModel { boxShadowValues : Computed < EffectsModel , Array < string > , StoreModel > ; boxShadowPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; opacityValues : Computed < EffectsModel , Array < string > , StoreModel > ; opacityPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; transitionValues : Computed < EffectsModel , Array < string > , StoreModel > ; transitionPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; durationValues : Computed < EffectsModel , Array < string > , StoreModel > ; durationPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; easeValues : Computed < EffectsModel , Array < string > , StoreModel > ; easePropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; delayValues : Computed < EffectsModel , Array < string > , StoreModel > ; delayPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; animateValues : Computed < EffectsModel , Array < string > , StoreModel > ; animatePropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; transformPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; originValues : Computed < EffectsModel , Array < string > , StoreModel > ; originPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; scaleValues : Computed < EffectsModel , Array < string > , StoreModel > ; scalePropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; rotateValues : Computed < EffectsModel , Array < string > , StoreModel > ; rotatePropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; translateSuffix : Computed < EffectsModel , Array < string > , StoreModel > ; translateYValues : Computed < EffectsModel , Array < string > , StoreModel > ; translateYPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; translateXValues : Computed < EffectsModel , Array < string > , StoreModel > ; translateXPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; skewSuffix : Computed < EffectsModel , Array < string > , StoreModel > ; skewYValues : Computed < EffectsModel , Array < string > , StoreModel > ; skewYPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; skewXValues : Computed < EffectsModel , Array < string > , StoreModel > ; skewXPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; mixBlendPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; backgroundBlendPropertys : Computed < EffectsModel , Array < Property > , StoreModel > ; alreadyVariants : Computed < EffectsModel , AlreadyVariants , StoreModel > ; } const effectsModel = { boxShadowValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . boxShadow ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . boxShadow ) . map ( ( v ) => ( v === 'DEFAULT' ? 'shadow' : `shadow-${ v }` ) ) ; } ) , boxShadowPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . boxShadowValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , opacityValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . opacity ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . opacity ) . map ( ( v ) => `opacity-${ v }` ) ; } ) , opacityPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . opacityValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , transitionValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . transitionProperty ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . transitionProperty ) . map ( ( v ) => v === 'DEFAULT' ? 'transition' : `transition-${ v }` ) ; } ) , transitionPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . transitionValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , durationValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . transitionDuration ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . transitionDuration ) . map ( ( v ) => `duration-${ v }` ) ; } ) , durationPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . durationValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , easeValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . transitionTimingFunction ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . transitionTimingFunction ) . map ( ( v ) => `ease-${ v }` ) ; } ) , easePropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . easeValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , delayValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . transitionDelay ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . transitionDelay ) . map ( ( v ) => `delay-${ v }` ) ; } ) , delayPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . delayValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , animateValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . animation ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . animation ) . map ( ( v ) => `animate-${ v }` ) ; } ) , animatePropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . animateValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , transformPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys ] , ( propertys ) => propertys . filter ( ( { classname } ) => TransformValues . includes ( classname ) ) ) , originValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . transformOrigin ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . transformOrigin ) . map ( ( v ) => `origin-${ v }` ) ; } ) , originPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . originValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , scaleValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . scale ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . scale ) . map ( ( v ) => `scale-${ v }` ) ; } ) , scalePropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . scaleValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , rotateValues : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . scale ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . scale ) . map ( ( v ) => v . startsWith ( '-' ) ? `-rotate-${ v . slice ( 1 ) }` : `rotate-${ v }` ) ; } ) , rotatePropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . rotateValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , translateSuffix : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . translate ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . translate ) ; } ) , translateYValues : computed ( [ ( state ) => state . translateSuffix ] , ( suffix ) => suffix . map ( ( v ) => ( v . startsWith ( '-' ) ? `-translate-y-${ v . slice ( 1 ) }` : `translate-y-${ v }` ) ) ) , translateYPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . translateYValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , translateXValues : computed ( [ ( state ) => state . translateSuffix ] , ( suffix ) => suffix . map ( ( v ) => ( v . startsWith ( '-' ) ? `-translate-x-${ v . slice ( 1 ) }` : `translate-x-${ v }` ) ) ) , translateXPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . translateXValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , skewSuffix : computed ( [ storeStateProject ] , ( project ) => { if ( ! project ?. tailwindConfig ?. theme . skew ) return [ ] ; return Object . keys ( project . tailwindConfig . theme . skew ) ; } ) , skewYValues : computed ( [ ( state ) => state . skewSuffix ] , ( suffix ) => suffix . map ( ( v ) => ( v . startsWith ( '-' ) ? `-skew-y-${ v . slice ( 1 ) }` : `skew-y-${ v }` ) ) ) , skewYPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . skewYValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , skewXValues : computed ( [ ( state ) => state . skewSuffix ] , ( suffix ) => suffix . map ( ( v ) => ( v . startsWith ( '-' ) ? `-skew-x-${ v . slice ( 1 ) }` : `skew-x-${ v }` ) ) ) , skewXPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys , ( state ) => state . skewXValues ] , ( propertys , values ) => propertys . filter ( ( { classname } ) => values . includes ( classname ) ) ) , mixBlendPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys ] , ( propertys ) => propertys . filter ( ( { classname } ) => MixBlendValues . includes ( classname ) ) ) , backgroundBlendPropertys : computed ( [ ( state , storeState ) => storeState . element . selectedElementPropertys ] , ( propertys ) => propertys . filter ( ( { classname } ) => BackgroundBlendValues . includes ( classname ) ) ) , alreadyVariants : computed ( [ ( state ) => state . boxShadowPropertys , ( state ) => state . opacityPropertys , ( state ) => state . transitionPropertys , ( state ) => state . durationPropertys , ( state ) => state . easePropertys , ( state ) => state . delayPropertys , ( state ) => state . animatePropertys , ( state ) => state . transformPropertys , ( state ) => state . originPropertys , ( state ) => state . scalePropertys , ( state ) => state . rotatePropertys , ( state ) => state . translateYPropertys , ( state ) => state . translateXPropertys , ( state ) => state . skewYPropertys , ( state ) => state . skewXPropertys , ( state ) => state . mixBlendPropertys , ( state ) => state . backgroundBlendPropertys , ] as any , ( ... propertys ) => { const allPropertys = flatten ( propertys ) ; const screens = allPropertys . filter ( ( property ) => property . screen ) . map ( ( property ) => property . screen as string ) ; const states = allPropertys . filter ( ( property ) => property . state ) . map ( ( property ) => property . state as string ) ; const lists = allPropertys . filter ( ( property ) => property . list ) . map ( ( property ) => property . list as string ) ; const customs = allPropertys . filter ( ( property ) => property . custom ) . map ( ( property ) => property . custom as string ) ; return { screens : [ ... new Set ( screens ) ] , states : [ ... new Set ( states ) ] , lists : [ ... new Set ( lists ) ] , customs : [ ... new Set ( customs ) ] , hasDark : allPropertys . some ( ( property ) => property . dark ) , hasNone : allPropertys . some ( ( property ) => ! property . screen && ! property . state && ! property . list && ! property . custom && ! property . dark ) , } ; } ) , } ; export default effectsModel ;