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

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

@@ -0,0 +1,62 @@
+export default {
+    root: ({ context }) => ({
+        class: ['relative flex flex-auto items-center gap-2 p-2 last-of-type:flex-[initial]', { 'cursor-default pointer-events-none select-none opacity-60': context.disabled }, '[&_[data-pc-section=separator]]:has-[~[data-p-active=true]]:bg-primary']
+    }),
+    header: ({ props, context }) => ({
+        class: [
+            'inline-flex items-center border-0 cursor-pointer rounded-md outline-transparent bg-transparent p-0 gap-2',
+            'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+            { '!cursor-default': context.active },
+            { 'cursor-auto': props.linear }
+        ]
+    }),
+    number: ({ context }) => ({
+        class: [
+            // Flexbox
+            'flex',
+            'items-center',
+            'justify-center',
+
+            //Colors
+            'border-solid border-2 dark:border-surface-700',
+
+            // Colors (Conditional)
+            context.active ? 'bg-primary text-primary-contrast border-primary' : 'border-surface-200 dark:border-surface-700 text-surface-900 dark:text-surface-0', // Adjust colors as needed
+
+            // Size and Shape
+            'min-w-9',
+            'h-9',
+            'line-height-[2rem]',
+            'rounded-full',
+
+            // Text
+            'text-lg',
+
+            // Transitions
+            'transition',
+            'transition-colors',
+            'transition-shadow',
+            'duration-200'
+        ]
+    }),
+    title: ({ context }) => ({
+        class: [
+            // Layout
+            'block',
+            'whitespace-nowrap',
+            'overflow-hidden',
+            'text-ellipsis',
+            'max-w-full',
+
+            // Text
+            context.active ? 'text-surface-900 dark:text-surface-0' : 'text-surface-700 dark:text-surface-0/80',
+            'font-bold',
+
+            // Transitions
+            'transition',
+            'transition-colors',
+            'transition-shadow',
+            'duration-200'
+        ]
+    })
+};

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

@@ -0,0 +1,11 @@
+export default {
+    root: ({ state }) => ({
+        class: [
+            'flex flex-col flex-[initial] has-[[data-pc-name=steppanels]]:px-2 has-[[data-pc-name=steppanels]]:pt-3.5 has-[[data-pc-name=steppanels]]:pb-[1.125rem]',
+            { 'flex-auto': state.isActive },
+            '[&>[data-pc-name=step]]:flex-[initial]',
+            '[&>[data-pc-name=steppanel]]:flex [&>[data-pc-name=steppanel]]:flex-auto [&>[data-pc-name=steppanel]>[data-pc-section=content]]:w-full [&>[data-pc-name=steppanel]>[data-pc-section=content]]:pl-4 [&:last-child>[data-pc-name=steppanel]>[data-pc-section=content]]:ps-8',
+            '[&>[data-pc-name=steppanel]>[data-pc-section=separator]]:relative [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:!flex-initial [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:shrink-0 [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:w-[2px] [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:h-auto [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:m-2 [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:left-[-2px] [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:ml-[1.625rem]'
+        ]
+    })
+};

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

@@ -0,0 +1,3 @@
+export default {
+    root: 'relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto'
+};

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

@@ -0,0 +1,3 @@
+export default {
+    root: 'px-2 pt-4 pb-[1.125rem]'
+};

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

@@ -0,0 +1,13 @@
+export default {
+    root: 'has-[[data-pc-name=stepitem]]:flex has-[[data-pc-name=stepitem]]:flex-col',
+    separator: 'flex-1 w-full h-[2px] bg-surface-200 dark:bg-surface-700 transition-shadow duration-200',
+    transition: {
+        class: ['flex flex-1', 'bg-surface-0 dark:bg-surface-800', 'text-surface-900 dark:text-surface-0'],
+        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/steps/index.js

@@ -0,0 +1,111 @@
+export default {
+    root: {
+        class: 'relative'
+    },
+    menu: {
+        class: 'p-0 m-0 list-none flex'
+    },
+    menuitem: {
+        class: [
+            // Flexbox and Position
+            'relative',
+            'flex',
+            'justify-center',
+            'flex-1',
+            'overflow-hidden',
+
+            // Before
+            'before:border-t',
+            'before:border-surface-200',
+            'before:dark:border-surface-700',
+            'before:w-full',
+            'before:absolute',
+            'before:top-1/2',
+            'before:left-0',
+            'before:transform',
+            'before:-mt-4'
+        ]
+    },
+    action: ({ props }) => ({
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+            'flex-col',
+
+            // Transitions and Shape
+            'transition-shadow',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-0',
+            'dark:bg-transparent',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'overflow-hidden',
+            { 'cursor-pointer': !props.readonly }
+        ]
+    }),
+    step: ({ context, props }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Position
+            'z-20',
+
+            // Shape
+            'rounded-full',
+            'border',
+
+            // Size
+            'w-[2rem]',
+            'h-[2rem]',
+            'text-sm',
+            'leading-[2rem]',
+
+            // Colors
+            {
+                'text-surface-400 dark:text-white/60': !context.active,
+                'border-surface-100 dark:border-surface-700': !context.active,
+                'bg-surface-0 dark:bg-surface-800': !context.active,
+                'bg-primary': context.active,
+                'border-primary': context.active,
+                'text-primary-contrast': context.active
+            },
+
+            // States
+            {
+                'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly
+            },
+
+            // Transition
+            'transition-colors duration-200 ease-in-out'
+        ]
+    }),
+    label: ({ context }) => ({
+        class: [
+            // Font
+            'leading-[normal]',
+            { 'font-bold': context.active },
+
+            // Display
+            'block',
+
+            // Spacing
+            'mt-2',
+
+            // Colors
+            { 'text-surface-400 dark:text-white/60': !context.active, 'text-surface-800 dark:text-white/80': context.active },
+
+            // Text and Overflow
+            'whitespace-nowrap',
+            'overflow-hidden',
+            'overflow-ellipsis',
+            'max-w-full'
+        ]
+    })
+};

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

@@ -0,0 +1,42 @@
+export default {
+    root: ({ props, context }) => ({
+        class: [
+            'relative shrink-0',
+            // Transitions
+            'transition-all duration-200',
+
+            // Misc
+            'cursor-pointer select-none whitespace-nowrap',
+            'user-select-none',
+
+            // Shape
+            'border-t-2',
+            'rounded-b-md',
+
+            // Spacing
+            'py-4 px-[1.125rem]',
+            '-mb-px',
+
+            // Colors and Conditions
+            'outline-transparent',
+            {
+                'border-transparent': !context.active,
+                'bg-surface-50 dark:bg-surface-900': !context.active,
+                'text-surface-700 dark:text-surface-0/80': !context.active,
+
+                'bg-surface-0 dark:bg-surface-900': context.active,
+                'border-primary': context.active,
+                'text-primary': context.active,
+
+                'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
+            },
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset',
+            'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-800/80': !context.active,
+                'hover:text-surface-900 dark:hover:text-surface-0': !context.active
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,8 @@
+export default {
+    root: 'relative flex',
+    content: 'overflow-x-auto overflow-y-hidden scroll-smooth overscroll-x-contain overscroll-y-auto [&::-webkit-scrollbar]:hidden grow',
+    tabList: 'relative flex border-solid border-none',
+    nextButton: '!absolute top-0 right-0 z-20 h-full w-10 flex items-center justify-center text-surface-700 dark:text-surface-0/80 bg-surface-0 dark:bg-surface-900 outline-transparent cursor-pointer  shrink-0',
+    prevButton: '!absolute top-0 left-0 z-20 h-full w-10 flex items-center justify-center text-surface-700 dark:text-surface-0/80 bg-surface-0 dark:bg-surface-900 outline-transparent cursor-pointer shrink-0',
+    activeBar: 'z-10 block absolute h-0 bottom-0'
+};

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

@@ -0,0 +1,73 @@
+export default {
+    root: {
+        class: 'overflow-x-auto'
+    },
+    menu: {
+        class: [
+            // Flexbox
+            'flex flex-1',
+
+            // Spacing
+            'list-none',
+            'p-0 m-0',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'border-b-2 border-surface-200 dark:border-surface-700',
+            'text-surface-900 dark:text-surface-0/80'
+        ]
+    },
+    menuitem: {
+        class: 'mr-0'
+    },
+    action: ({ context, state }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'font-bold',
+
+            // Flexbox and Alignment
+            'flex items-center',
+
+            // Spacing
+            'p-5',
+            '-mb-[2px]',
+
+            // Shape
+            'border-b-2',
+            'rounded-t-md',
+
+            // Colors and Conditions
+            {
+                'border-surface-200 dark:border-surface-700': state.d_activeIndex !== context.index,
+                'bg-surface-0 dark:bg-surface-800': state.d_activeIndex !== context.index,
+                'text-surface-700 dark:text-surface-0/80': state.d_activeIndex !== context.index,
+
+                'bg-surface-0 dark:bg-surface-800': state.d_activeIndex === context.index,
+                'border-primary': state.d_activeIndex === context.index,
+                'text-primary': state.d_activeIndex === context.index
+            },
+
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset',
+            'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+            {
+                'hover:bg-surface-0 dark:hover:bg-surface-800/80': state.d_activeIndex !== context.index,
+                'hover:border-surface-400 dark:hover:border-primary-400': state.d_activeIndex !== context.index,
+                'hover:text-surface-900 dark:hover:text-surface-0': state.d_activeIndex !== context.index
+            },
+
+            // Transitions
+            'transition-all duration-200',
+
+            // Misc
+            'cursor-pointer select-none text-decoration-none',
+            'overflow-hidden',
+            'user-select-none'
+        ]
+    }),
+    icon: {
+        class: 'mr-2'
+    }
+};

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

@@ -0,0 +1,3 @@
+export default {
+    root: 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300'
+};

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

@@ -0,0 +1,3 @@
+export default {
+    root: 'bg-surface-0 dark:bg-surface-900 text-surface-900 dark:text-surface-0/80 outline-0 p-[1.125rem] pt-[0.875rem]'
+};

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

@@ -0,0 +1,5 @@
+export default {
+    root: ({ props }) => ({
+        class: ['flex flex-col', { '[&>[data-pc-name=tablist]]:overflow-hidden': props.scrollable }]
+    })
+};

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

@@ -0,0 +1,156 @@
+export default {
+    navContainer: ({ props }) => ({
+        class: [
+            // Position
+            'relative',
+
+            // Misc
+            { 'overflow-hidden': props.scrollable }
+        ]
+    }),
+    navContent: {
+        class: [
+            // Overflow and Scrolling
+            'overflow-y-hidden overscroll-contain',
+            'overscroll-auto',
+            'scroll-smooth',
+            '[&::-webkit-scrollbar]:hidden'
+        ]
+    },
+    previousButton: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Position
+            '!absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Size and Shape
+            'h-full w-12',
+            'rounded-none',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-primary',
+            'shadow-md'
+        ]
+    },
+    nextButton: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Position
+            '!absolute',
+            'top-0 right-0',
+            'z-20',
+
+            // Size and Shape
+            'h-full w-12',
+            'rounded-none',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-primary',
+            'shadow-md'
+        ]
+    },
+    nav: {
+        class: [
+            // Flexbox
+            'flex flex-1',
+
+            // Spacing
+            'list-none',
+            'p-0 m-0',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'border-b-2 border-surface-200 dark:border-surface-700',
+            'text-surface-900 dark:text-surface-0/80'
+        ]
+    },
+    tabpanel: {
+        header: ({ props }) => ({
+            class: [
+                // Spacing
+                'mr-0',
+
+                // Misc
+                {
+                    'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
+                }
+            ]
+        }),
+        headerAction: ({ parent, context }) => ({
+            class: [
+                'relative',
+
+                // Font
+                'font-bold',
+
+                // Flexbox and Alignment
+                'flex items-center',
+
+                // Spacing
+                'p-5',
+                '-mb-[2px]',
+
+                // Shape
+                'border-b-2',
+                'rounded-t-md',
+
+                // Colors and Conditions
+                {
+                    'border-surface-200 dark:border-surface-700': parent.state.d_activeIndex !== context.index,
+                    'bg-surface-0 dark:bg-surface-800': parent.state.d_activeIndex !== context.index,
+                    'text-surface-700 dark:text-surface-0/80': parent.state.d_activeIndex !== context.index,
+
+                    'bg-surface-0 dark:bg-surface-800': parent.state.d_activeIndex === context.index,
+                    'border-primary': parent.state.d_activeIndex === context.index,
+                    'text-primary': parent.state.d_activeIndex === context.index
+                },
+
+                // States
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset',
+                'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+                {
+                    'hover:bg-surface-0 dark:hover:bg-surface-800/80': parent.state.d_activeIndex !== context.index,
+                    'hover:border-surface-400 dark:hover:border-primary-400': parent.state.d_activeIndex !== context.index,
+                    'hover:text-surface-900 dark:hover:text-surface-0': parent.state.d_activeIndex !== context.index
+                },
+
+                // Transitions
+                'transition-all duration-200',
+
+                // Misc
+                'cursor-pointer select-none text-decoration-none',
+                'overflow-hidden',
+                'user-select-none'
+            ]
+        }),
+        headerTitle: {
+            class: [
+                // Text
+                'leading-none',
+                'whitespace-nowrap'
+            ]
+        },
+        content: {
+            class: [
+                // Spacing
+                'p-5',
+
+                // Shape
+                'rounded-b-md',
+
+                // Colors
+                'bg-surface-0 dark:bg-surface-800',
+                'text-surface-700 dark:text-surface-0/80',
+                'border-0'
+            ]
+        }
+    }
+};

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

@@ -0,0 +1,38 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            //Font
+            'text-xs font-bold',
+
+            //Alignments
+            'inline-flex items-center justify-center',
+
+            //Spacing
+            'px-2 py-1',
+
+            //Shape
+            {
+                'rounded-md': !props.rounded,
+                'rounded-full': props.rounded
+            },
+
+            //Colors
+            'text-primary-contrast',
+            {
+                'bg-primary dark:bg-primary': props.severity == null || props.severity === 'primary',
+                'text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-500/20': props.severity === 'secondary',
+                'bg-green-500 dark:bg-green-400': props.severity === 'success',
+                'bg-blue-500 dark:bg-blue-400': props.severity === 'info',
+                'bg-orange-500 dark:bg-orange-400': props.severity === 'warn',
+                'bg-red-500 dark:bg-red-400': props.severity === 'danger',
+                'text-surface-0 dark:text-surface-900 bg-surface-900 dark:bg-surface-0': props.severity === 'contrast'
+            }
+        ]
+    }),
+    value: {
+        class: 'leading-normal'
+    },
+    icon: {
+        class: 'mr-1 text-sm'
+    }
+};

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

@@ -0,0 +1,60 @@
+export default {
+    root: {
+        class: [
+            // Spacing
+            'p-5',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-900 text-white',
+            'border border-surface-700',
+
+            // Sizing & Overflow
+            'h-72 overflow-auto'
+        ]
+    },
+    container: {
+        class: [
+            // Flexbox
+            'flex items-center'
+        ]
+    },
+    prompt: {
+        class: [
+            // Color
+            'text-surface-400'
+        ]
+    },
+    response: {
+        class: [
+            // Color
+            'text-primary-400'
+        ]
+    },
+    command: {
+        class: [
+            // Color
+            'text-primary-400'
+        ]
+    },
+    commandtext: {
+        class: [
+            // Flexbox
+            'flex-1 shrink grow-0',
+
+            // Shape
+            'border-0',
+
+            // Spacing
+            'p-0',
+
+            // Color
+            'bg-transparent text-inherit',
+
+            // Outline
+            'outline-none'
+        ]
+    }
+};

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

@@ -0,0 +1,39 @@
+export default {
+    root: ({ context, props, parent }) => ({
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Spacing
+            'm-0',
+            'p-3',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-600 dark:text-surface-200',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-primary': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled,
+                'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+            // Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};