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

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

@@ -0,0 +1,77 @@
+export default {
+    contentContainer: {
+        class: [
+            // Size & Position
+            'h-full w-full',
+
+            // Layering
+            'z-[1]',
+
+            // Spacing
+            'overflow-hidden',
+
+            // Misc
+            'relative float-left'
+        ]
+    },
+    content: {
+        class: [
+            // Size & Spacing
+            'h-[calc(100%+18px)] w-[calc(100%+18px)] pr-[18px] pb-[18px] pl-0 pt-0',
+
+            // Overflow & Scrollbar
+            'overflow-scroll scrollbar-none',
+
+            // Box Model
+            'box-border',
+
+            // Position
+            'relative',
+
+            // Webkit Specific
+            '[&::-webkit-scrollbar]:hidden'
+        ]
+    },
+    barX: {
+        class: [
+            // Size & Position
+            'h-[9px] bottom-0',
+
+            // Appearance
+            'bg-surface-50 dark:bg-surface-700 rounded',
+
+            // Interactivity
+            'cursor-pointer',
+
+            // Visibility & Layering
+            'invisible z-20',
+
+            // Transition
+            'transition duration-[250ms] ease-linear',
+
+            // Misc
+            'relative'
+        ]
+    },
+    barY: {
+        class: [
+            // Size & Position
+            'w-[9px] top-0',
+
+            // Appearance
+            'bg-surface-50 dark:bg-surface-700 rounded',
+
+            // Interactivity
+            'cursor-pointer',
+
+            // Visibility & Layering
+            'z-20',
+
+            // Transition
+            'transition duration-[250ms] ease-linear',
+
+            // Misc
+            'relative'
+        ]
+    }
+};

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

@@ -0,0 +1,26 @@
+export default {
+    button: ({ props }) => ({
+        root: {
+            class: [
+                // Flex & Alignment
+                'flex items-center justify-center',
+
+                // Positioning
+                {
+                    '!sticky flex ml-auto': props.target === 'parent',
+                    '!fixed': props.target === 'window'
+                },
+                'bottom-[20px] right-[20px]',
+                'h-12 w-12 rounded-full shadow-md',
+                'text-white dark:text-surface-900 bg-surface-500 dark:bg-surface-400',
+                'hover:bg-surface-600 dark:hover:bg-surface-300'
+            ]
+        }
+    }),
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-150',
+        leaveActiveClass: 'transition-opacity duration-150',
+        leaveToClass: 'opacity-0'
+    }
+};

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

@@ -0,0 +1,240 @@
+export default {
+    root: ({ props, state, parent }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+            { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+            { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            // Color and Background
+            'bg-surface-0 dark:bg-surface-900',
+
+            'border border-surface-300',
+            { 'dark:border-surface-700': parent.instance.$name != 'InputGroup' },
+            { 'dark:border-surface-600': parent.instance.$name == 'InputGroup' },
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-primary': !props.invalid },
+            { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
+        ]
+    }),
+    label: ({ props, parent }) => ({
+        class: [
+            //Font
+            'leading-[normal]',
+
+            // Display
+            'block',
+            'flex-auto',
+
+            // Color and Background
+            'bg-transparent',
+            'border-0',
+            { 'text-surface-800 dark:text-white/80': props.modelValue != undefined, 'text-surface-400 dark:text-surface-500': props.modelValue == undefined },
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Sizing and Spacing
+            'w-[1%]',
+            'p-3',
+            { 'pr-7': props.showClear },
+
+            //Shape
+            'rounded-none',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'focus:outline-none focus:shadow-none',
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null },
+
+            // Misc
+            'relative',
+            'cursor-pointer',
+            'overflow-hidden overflow-ellipsis',
+            'whitespace-nowrap',
+            'appearance-none'
+        ]
+    }),
+    dropdown: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-tr-md',
+            'rounded-br-md'
+        ]
+    },
+    overlay: {
+        class: [
+            // Position
+            'absolute top-0 left-0',
+
+            // Shape
+            'border-0 dark:border',
+            'rounded-md',
+            'shadow-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-800 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    listContainer: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'py-3 list-none m-0'
+    },
+    option: ({ context }) => ({
+        class: [
+            // Font
+            'font-normal',
+            'leading-none',
+
+            // Position
+            'relative',
+            'flex items-center',
+
+            // Shape
+            'border-0',
+            'rounded-none',
+
+            // Spacing
+            'm-0',
+            'py-3 px-5',
+
+            // Colors
+            {
+                'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+                'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+                'bg-highlight': context.selected
+            },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.focused && !context.selected },
+            { 'hover:bg-highlight-emphasis': context.selected },
+            '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',
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // Misc
+            { 'pointer-events-none cursor-default': context.disabled },
+            { 'cursor-pointer': !context.disabled },
+            'overflow-hidden',
+            'whitespace-nowrap'
+        ]
+    }),
+    optionGroup: {
+        class: [
+            //Font
+            'font-bold',
+
+            // Spacing
+            'm-0',
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-600/80',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    optionCheckIcon: 'relative -ms-1.5 me-1.5 text-surface-700 dark:text-white/80 w-4 h-4',
+    optionBlankIcon: 'w-4 h-4',
+    emptyMessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    header: {
+        class: [
+            // Spacing
+            'py-3 px-5',
+            'm-0',
+
+            //Shape
+            'border-b',
+            'rounded-tl-md',
+            'rounded-tr-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-100 dark:bg-surface-800',
+            'border-surface-300 dark:border-surface-700'
+        ]
+    },
+    clearIcon: {
+        class: [
+            // Color
+            'text-surface-500',
+
+            // Position
+            'absolute',
+            'top-1/2',
+            'right-12',
+
+            // Spacing
+            '-mt-2'
+        ]
+    },
+    loadingIcon: {
+        class: 'text-surface-400 dark:text-surface-500 animate-spin'
+    },
+    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/selectbutton/index.js

@@ -0,0 +1,16 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'inline-flex select-none align-bottom outline-transparent',
+            'border border-transparent rounded-md [&>button]:rounded-none',
+            '[&>button:first-child]:border-r-none [&>button:first-child]:rounded-r-none [&>button:first-child]:rounded-tl-md [&>button:first-child]:rounded-bl-md',
+            '[&>button:last-child]:border-l-none [&>button:first-child]:rounded-l-none [&>button:last-child]:rounded-tr-md [&>button:last-child]:rounded-br-md',
+
+            // Invalid State
+            {
+                'border-red-500 dark:border-red-400': props.invalid,
+                'border-surface-100 dark:border-surface-950': !props.invalid
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,16 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'overflow-hidden',
+            {
+                'animate-pulse': props.animation !== 'none'
+            },
+
+            // Round
+            { 'rounded-full': props.shape === 'circle', 'rounded-md': props.shape !== 'circle' },
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    })
+};

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

@@ -0,0 +1,137 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Size
+            { 'h-1 w-60': props.orientation == 'horizontal', 'w-1 h-56': props.orientation == 'vertical' },
+
+            // Shape
+            'border-0',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700',
+
+            // States
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    range: ({ props }) => ({
+        class: [
+            // Position
+            'block absolute',
+            {
+                'top-0 left-0': props.orientation == 'horizontal',
+                'bottom-0 left-0': props.orientation == 'vertical'
+            },
+
+            //Size
+            {
+                'h-full': props.orientation == 'horizontal',
+                'w-full': props.orientation == 'vertical'
+            },
+
+            // Colors
+            'bg-primary'
+        ]
+    }),
+    handle: ({ props }) => ({
+        class: [
+            'block',
+
+            // Size
+            'h-[1.143rem]',
+            'w-[1.143rem]',
+            {
+                'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                'left-[50%] mb-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-600',
+            'border-primary',
+
+            // States
+            'hover:bg-primary-emphasis',
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring',
+            'ring-primary-400/50 dark:ring-primary-300/50',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    }),
+    startHandler: ({ props }) => ({
+        class: [
+            'block',
+
+            // Size
+            'h-[1.143rem]',
+            'w-[1.143rem]',
+            {
+                'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-600',
+            'border-primary',
+
+            // States
+            'hover:bg-primary-emphasis',
+            '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',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    }),
+    endHandler: ({ props }) => ({
+        class: [
+            'block',
+
+            // Size
+            'h-[1.143rem]',
+            'w-[1.143rem]',
+            {
+                'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-600',
+            'border-primary',
+
+            // States
+            'hover:bg-primary-emphasis',
+            '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',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    })
+};

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

@@ -0,0 +1,57 @@
+export default {
+    root: ({ state }) => ({
+        class: [
+            'static flex gap-2',
+            {
+                '[&_[data-pc-name=pcbutton]]:rotate-45': state.d_visible,
+                '[&_[data-pc-name=pcbutton]]:rotate-0': !state.d_visible
+            }
+        ]
+    }),
+    list: {
+        class: [
+            // Spacing
+            'm-0 p-0',
+
+            // Layout & Flexbox
+            'list-none flex items-center justify-center',
+
+            // Transitions
+            'transition delay-200',
+
+            // Z-Index (Positioning)
+            'z-20'
+        ]
+    },
+    item: ({ props, context }) => ({
+        class: [
+            'transform transition-transform duration-200 ease-out transition-opacity duration-800',
+
+            // Conditional Appearance
+            context.hidden ? 'opacity-0 scale-0' : 'opacity-100 scale-100',
+
+            // Conditional Spacing
+            {
+                'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
+                'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
+                'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
+                'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
+            },
+
+            // Conditional Positioning
+            { absolute: props.type !== 'linear' }
+        ]
+    }),
+    mask: ({ state }) => ({
+        class: [
+            // Base Styles
+            'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0',
+
+            // Conditional Appearance
+            {
+                'opacity-0 pointer-events-none': !state.d_visible,
+                'opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,19 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+            { 'shadow-lg': props.raised },
+
+            '[&>[data-pc-name=pcbutton]]:rounded-tr-none',
+            '[&>[data-pc-name=pcbutton]]:rounded-br-none',
+            '[&>[data-pc-name=pcdropdown]]:rounded-tl-none',
+            '[&>[data-pc-name=pcdropdown]]:rounded-bl-none',
+            '[&>[data-pc-name=pcmenu]]:min-w-full'
+        ]
+    })
+};

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

@@ -0,0 +1,61 @@
+export default {
+    root: ({ context }) => ({
+        class: [
+            // Colors
+            'bg-surface-0',
+            'dark:bg-surface-900',
+            'text-surface-700',
+            'dark:text-surface-0/80',
+
+            // Shape
+            'rounded-lg',
+
+            // Borders (Conditional)
+            { 'border border-solid border-surface-50 dark:border-surface-700': !context.nested },
+
+            // Nested
+            { 'flex grow border-0': context.nested }
+        ]
+    }),
+
+    gutter: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+            'items-center',
+            'justify-center',
+            'shrink-0',
+
+            // Colors
+            'bg-surface-50',
+            'dark:bg-surface-800',
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // Misc
+            {
+                'cursor-col-resize': props.layout == 'horizontal',
+                'cursor-row-resize': props.layout !== 'horizontal'
+            }
+        ]
+    }),
+    gutterhandler: ({ props }) => ({
+        class: [
+            // Colors
+            'bg-surface-100',
+            'dark:bg-surface-600',
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // Sizing (Conditional)
+            {
+                'h-7': props.layout == 'horizontal',
+                'w-7 h-2': props.layout !== 'horizontal'
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,5 @@
+export default {
+    root: ({ context }) => ({
+        class: ['grow', { flex: context.nested }]
+    })
+};