@simitgroup/simpleapp-generator 1.6.6-i-alpha → 1.6.6-k-alpha

package/templates/nuxt/presets/lara/panel/index.js

@@ -0,0 +1,91 @@
+export default {
+    header: ({ props }) => ({
+        class: [
+            // Flex
+            'flex items-center justify-between',
+
+            // Colors
+            'text-surface-700 dark:text-surface-0/80',
+            'bg-surface-50 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700',
+
+            //Shape
+            'rounded-tl-lg rounded-tr-lg',
+
+            // Conditional Spacing
+            { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable }
+        ]
+    }),
+    title: {
+        class: 'leading-none font-bold'
+    },
+    toggler: {
+        class: [
+            // Alignments
+            'inline-flex items-center justify-center',
+            'relative',
+
+            // Sized
+            'w-8 h-8',
+            'm-0 p-0',
+
+            //Shape
+            'border-0 rounded-full',
+
+            //Color
+            'bg-transparent',
+            'text-surface-600 dark:text-surface-0/80',
+
+            // States
+            'hover:text-surface-800 dark:hover:text-surface-0/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+            'focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 focus-visible:ring-inset dark:focus-visible:ring-primary-300/50',
+
+            // Transitions
+            'transition-all duration-200 ease-in-out',
+
+            // Misc
+            'overflow-hidden no-underline',
+            'cursor-pointer'
+        ]
+    },
+    togglerIcon: {
+        class: 'inline-block'
+    },
+    content: {
+        class: [
+            // Spacing
+            'p-5',
+
+            // Shape
+            'border border-t-0 last:rounded-br-lg last:rounded-bl-lg',
+
+            //Color
+            'border-surface-200 dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    footer: {
+        class: [
+            // Spacing
+            'py-3 p-5',
+
+            // Shape
+            'border border-t-0 rounded-br-lg rounded-bl-lg',
+
+            //Color
+            'border-surface-200 dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+};

package/templates/nuxt/presets/lara/panelmenu/index.js

@@ -0,0 +1,127 @@
+export default {
+    panel: {
+        class: 'mb-1'
+    },
+    header: {
+        class: ['rounded-md', 'outline-none', 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50']
+    },
+    headerContent: ({ context, instance }) => ({
+        class: [
+            // Shape
+            'rounded-t-md',
+            { 'rounded-br-md rounded-bl-md': !context.active || instance.activeItem?.items === undefined, 'rounded-br-0 rounded-bl-0': context.active && instance.activeItem?.items !== undefined },
+
+            // Color
+            'border border-surface-200 dark:border-surface-700',
+            'bg-surface-50 dark:bg-surface-800',
+            'text-surface-600 dark:text-surface-0/80',
+            { 'text-surface-900': context.active },
+
+            // States
+            'hover:bg-surface-100 dark:hover:bg-surface-700',
+            'hover:text-surface-900',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+            'transition-shadow duration-200'
+        ]
+    }),
+    headerLink: {
+        class: [
+            'relative',
+
+            // Font
+            'font-bold',
+            'leading-none',
+
+            // Flex & Alignments
+            'flex items-center',
+
+            // Spacing
+            'p-5',
+
+            // Misc
+            'select-none cursor-pointer no-underline'
+        ]
+    },
+    headerLabel: {
+        class: 'leading-none'
+    },
+    headerIcon: {
+        class: 'mr-2'
+    },
+    submenuIcon: {
+        class: 'mr-2'
+    },
+    content: {
+        class: [
+            // Spacing
+            'py-2',
+
+            // Shape
+            'border border-t-0',
+            'rounded-t-none rounded-br-md rounded-bl-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700'
+        ]
+    },
+    rootList: {
+        class: ['outline-none', 'm-0 p-0 list-none']
+    },
+    itemContent: {
+        class: [
+            // Shape
+            'border-none rounded-none',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Transition
+            'transition-shadow duration-200'
+        ]
+    },
+    itemLink: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Flex & Alignments
+            'flex items-center',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // States
+            'hover:bg-surface-100 dark:hover:bg-surface-700/80 hover:text-surface-700 dark:hover:text-white/80',
+            {
+                'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-600/90': context.focused
+            },
+
+            // Misc
+            'cursor-pointer no-underline',
+            'select-none overflow-hidden'
+        ]
+    }),
+    itemIcon: {
+        class: 'mr-2'
+    },
+    submenu: {
+        class: 'p-0 pl-4 m-0 list-none'
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+};

package/templates/nuxt/presets/lara/password/index.js

@@ -0,0 +1,72 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+            { 'flex [&>input]:w-full': props.fluid, 'inline-flex': !props.fluid },
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            },
+            { '[&>input]:pr-10': props.toggleMask }
+        ]
+    }),
+    overlay: {
+        class: [
+            // Spacing
+            'p-5',
+
+            // Shape
+            'border-0 dark:border',
+            'shadow-md rounded-md',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    meter: {
+        class: [
+            // Position and Overflow
+            'overflow-hidden',
+            'relative',
+
+            // Shape and Size
+            'border-0',
+            'h-3',
+
+            // Spacing
+            'mb-2',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700'
+        ]
+    },
+    meterLabel: ({ instance }) => ({
+        class: [
+            // Size
+            'h-full',
+
+            // Colors
+            {
+                'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak',
+                'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium',
+                'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong'
+            },
+
+            // Transitions
+            'transition-all duration-1000 ease-in-out'
+        ]
+    }),
+    maskIcon: {
+        class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+    },
+    unmaskIcon: {
+        class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};

package/templates/nuxt/presets/lara/picklist/index.js

@@ -0,0 +1,52 @@
+export default {
+    root: 'flex [&_[data-pc-name=pclist]]:h-full',
+    sourceControls: {
+        class: [
+            // Flexbox & Alignment
+            'flex lg:flex-col justify-center gap-2',
+
+            // Spacing
+            'p-5'
+        ]
+    },
+    sourceListContainer: {
+        class: [
+            // Flexbox
+            'grow shrink basis-2/4',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700',
+            'outline-none'
+        ]
+    },
+    transferControls: {
+        class: 'flex lg:flex-col justify-center gap-2 p-5'
+    },
+    targetListContainer: {
+        class: [
+            // Flexbox
+            'grow shrink basis-2/4',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-200 dark:border-surface-700',
+            'outline-none'
+        ]
+    },
+    targetControls: {
+        class: 'flex lg:flex-col justify-center gap-2 p-5'
+    },
+    transition: {
+        enterFromClass: '!transition-none',
+        enterActiveClass: '!transition-none',
+        leaveActiveClass: '!transition-none',
+        leaveToClass: '!transition-none'
+    }
+};

package/templates/nuxt/presets/lara/popover/index.js

@@ -0,0 +1,31 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md shadow-lg',
+            'border-0 dark:border',
+
+            // Position
+            'absolute left-0 top-0 mt-2',
+            'z-40 transform origin-center',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80',
+            'dark:border-surface-700',
+
+            // Before: Arrow
+            'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[10px] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-300/10 dark:before:border-b-surface-700',
+            'after:absolute after:w-0 after:-top-[0.54rem] after:left-[4px] after:h-0 after:border-transparent after:border-solid after:ml-[8px] after:border-x-[8px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-800'
+        ]
+    },
+    content: {
+        class: 'p-5 items-center flex'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};

package/templates/nuxt/presets/lara/progressbar/index.js

@@ -0,0 +1,55 @@
+export default {
+    root: {
+        class: [
+            // Position and Overflow
+            'overflow-hidden',
+            'relative',
+
+            // Shape and Size
+            'border-0',
+            'h-6',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700'
+        ]
+    },
+    value: ({ props }) => ({
+        class: [
+            // Flexbox & Overflow & Position
+            { 'absolute flex items-center justify-center overflow-hidden': props.mode !== 'indeterminate' },
+
+            // Colors
+            'bg-primary',
+
+            // Spacing & Sizing
+            'm-0',
+            { 'h-full w-0': props.mode !== 'indeterminate' },
+
+            // Shape
+            'border-0',
+
+            // Transitions
+            {
+                'transition-width duration-1000 ease-in-out': props.mode !== 'indeterminate',
+                'progressbar-value-animate': props.mode == 'indeterminate'
+            },
+
+            // Before & After (indeterminate)
+            {
+                'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': props.mode == 'indeterminate',
+                'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
+            }
+        ]
+    }),
+    label: {
+        class: [
+            // Flexbox
+            'inline-flex',
+
+            // Font and Text
+            'text-white dark:text-surface-900',
+            'leading-6'
+        ]
+    }
+};

package/templates/nuxt/presets/lara/progressspinner/index.js

@@ -0,0 +1,51 @@
+export default {
+    root: {
+        class: [
+            // Position
+            'relative',
+            'mx-auto',
+
+            // Sizing
+            'w-28',
+            'h-28',
+
+            // Flexbox
+            'inline-block',
+
+            // Pseudo-Elements
+            'before:block',
+            'before:pt-full'
+        ]
+    },
+    spinner: {
+        class: [
+            // Position
+            'absolute',
+            'top-0',
+            'bottom-0',
+            'left-0',
+            'right-0',
+            'm-auto',
+
+            // Sizing
+            'w-full',
+            'h-full',
+
+            // Transformations
+            'transform',
+            'origin-center',
+
+            // Animations
+            'animate-spin'
+        ]
+    },
+    circle: {
+        class: [
+            // Colors
+            'text-red-500',
+
+            // Misc
+            'progress-spinner-circle'
+        ]
+    }
+};

package/templates/nuxt/presets/lara/radiobutton/index.js

@@ -0,0 +1,104 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Flexbox & Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Size
+            'w-[1.571rem] h-[1.571rem]',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    box: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex justify-center items-center',
+
+            // Size
+            'w-[1.571rem] h-[1.571rem]',
+
+            // Shape
+            'border-2',
+            'rounded-full',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined,
+                'bg-surface-0 dark:bg-surface-900': props.value !== props.modelValue && props.value !== undefined,
+                'border-surface-100 dark:border-surface-700': props.value !== props.modelValue && props.value !== undefined && !props.invalid,
+                'border-primary': props.value == props.modelValue && props.value !== undefined,
+                'bg-primary': props.value == props.modelValue && props.value !== undefined
+            },
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:border-primary dark:peer-hover:border-primary': !props.disabled && !props.invalid,
+                'peer-hover:border-primary-emphasis peer-hover:bg-primary-emphasis': !props.disabled && props.value == props.modelValue && props.value !== undefined,
+                'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                'opacity-60 cursor-default': props.disabled
+            }
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-md',
+            'outline-none',
+            'border-2 border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    icon: ({ props }) => ({
+        class: [
+            'block',
+
+            // Shape
+            'rounded-full',
+
+            // Size
+            'w-[0.857rem] h-[0.857rem]',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+
+            // Conditions
+            {
+                'backface-hidden scale-10 invisible': props.value !== props.modelValue,
+                'transform visible scale-[1.1]': props.value == props.modelValue
+            },
+
+            // Transition
+            'transition duration-200'
+        ]
+    })
+};

package/templates/nuxt/presets/lara/rating/index.js

@@ -0,0 +1,63 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'flex items-center',
+            'gap-2',
+
+            // Misc
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    option: ({ props, context }) => ({
+        class: [
+            // Flex & Alignment
+            'inline-flex items-center',
+
+            // State
+            {
+                'outline-none ring ring-primary-500/50 dark:ring-primary-400/50': context.focused
+            },
+
+            // Misc
+            {
+                'cursor-pointer': !props.readonly,
+                'cursor-default': props.readonly
+            }
+        ]
+    }),
+    offIcon: ({ props }) => ({
+        class: [
+            // Size
+            'w-5 h-5',
+
+            // Color
+            'text-surface-700 dark:text-surface-0/80',
+
+            // State
+            { 'hover:text-primary-500 dark:hover:text-primary-400': !props.readonly },
+
+            // Transition
+            'transition duration-200 ease-in'
+        ]
+    }),
+    onIcon: ({ props }) => ({
+        class: [
+            // Size
+            'w-5 h-5',
+
+            // Color
+            'text-primary',
+
+            // State
+            { 'hover:text-primary-600 dark:hover:text-primary-300': !props.readonly },
+
+            // Transition
+            'transition duration-200 ease-in'
+        ]
+    })
+};

package/templates/nuxt/presets/lara/ripple/index.js

@@ -0,0 +1,6 @@
+export default {
+    root: {
+        class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
+        style: 'transform: scale(0)'
+    }
+};