@simitgroup/simpleapp-generator 1.6.6-h-alpha → 1.6.6-j-alpha

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

@@ -0,0 +1,238 @@
+export default {
+    root: ({ props, context, parent }) => ({
+        class: [
+            'relative',
+
+            // Alignments
+            'items-center inline-flex text-center align-bottom justify-center',
+            { 'flex-col': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label },
+
+            // Sizes & Spacing
+            'leading-[normal]',
+            {
+                'px-4 py-[0.625rem]': props.size === null,
+                'text-sm py-2 px-3': props.size === 'small',
+                'text-xl py-3 px-4': props.size === 'large'
+            },
+            { 'gap-2': props.label !== null },
+            {
+                'w-12 px-0 py-3': props.label == null && props.icon !== null
+            },
+
+            // Shapes
+            { 'shadow-lg': props.raised },
+            { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
+            { 'rounded-none first:rounded-l-md last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+
+            // Link Button
+            { 'text-primary-600 bg-transparent border-transparent': props.link },
+
+            // Plain Button
+            { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
+            // Plain Text Button
+            { 'text-surface-500': props.plain && props.text },
+            // Plain Outlined Button
+            { 'text-surface-500 border border-gray-500': props.plain && props.outlined },
+
+            // Text Button
+            { 'bg-transparent border-transparent': props.text && !props.plain },
+
+            // Outlined Button
+            { 'bg-transparent border': props.outlined && !props.plain },
+
+            // --- Severity Buttons ---
+
+            // Primary Button
+            {
+                'text-primary-contrast': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
+            },
+            // Primary Text Button
+            { 'text-primary': props.text && props.severity === null && !props.plain },
+            // Primary Outlined Button
+            { 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
+
+            // Secondary Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                'border border-surface-500 dark:border-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
+            },
+            // Secondary Text Button
+            { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
+            // Secondary Outlined Button
+            { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/20': props.outlined && props.severity === 'secondary' && !props.plain },
+
+            // Success Button
+            {
+                'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
+            },
+            // Success Text Button
+            { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
+            // Success Outlined Button
+            { 'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain },
+
+            // Info Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
+            },
+            // Info Text Button
+            { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
+            // Info Outlined Button
+            { 'text-blue-500 border border-blue-500 hover:bg-blue-300/20 ': props.outlined && props.severity === 'info' && !props.plain },
+
+            // Warning Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'warn' && !props.text && !props.outlined && !props.plain,
+                'bg-orange-500 dark:bg-orange-400': props.severity === 'warn' && !props.text && !props.outlined && !props.plain,
+                'border border-orange-500 dark:border-orange-400': props.severity === 'warn' && !props.text && !props.outlined && !props.plain
+            },
+            // Warning Text Button
+            { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warn' && !props.plain },
+            // Warning Outlined Button
+            { 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warn' && !props.plain },
+
+            // Help Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
+            },
+            // Help Text Button
+            { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
+            // Help Outlined Button
+            { 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain },
+
+            // Danger Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+            },
+            // Danger Text Button
+            { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
+            // Danger Outlined Button
+            { 'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain },
+            // Contrast Button
+            {
+                'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+                'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
+            },
+            // Contrast Text Button
+            { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
+            // Contrast Outlined Button
+            { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
+
+            // --- Severity Button States ---
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+
+            // Link
+            { 'focus:ring-primary': props.link },
+
+            // Plain
+            { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
+            // Text & Outlined Button
+            { 'hover:bg-surface-300/20': props.plain && (props.text || props.outlined) },
+
+            // Primary
+            { 'hover:bg-primary-emphasis hover:border-primary-emphasis': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-primary': props.severity === null },
+            // Text & Outlined Button
+            { 'hover:bg-primary-300/20': (props.text || props.outlined) && props.severity === null && !props.plain },
+
+            // Secondary
+            { 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-surface-400/50 dark:focus:ring-surface-300/50': props.severity === 'secondary' },
+            // Text & Outlined Button
+            { 'hover:bg-surface-300/20': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
+
+            // Success
+            { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-green-400/50 dark:focus:ring-green-300/50': props.severity === 'success' },
+            // Text & Outlined Button
+            { 'hover:bg-green-300/20': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
+
+            // Info
+            { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-blue-400/50 dark:focus:ring-blue-300/50': props.severity === 'info' },
+            // Text & Outlined Button
+            { 'hover:bg-blue-300/20': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
+
+            // Warning
+            { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warn' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-orange-400/50 dark:focus:ring-orange-300/50': props.severity === 'warn' },
+            // Text & Outlined Button
+            { 'hover:bg-orange-300/20': (props.text || props.outlined) && props.severity === 'warn' && !props.plain },
+
+            // Help
+            { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-purple-400/50 dark:focus:ring-purple-300/50': props.severity === 'help' },
+            // Text & Outlined Button
+            { 'hover:bg-purple-300/20': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
+
+            // Danger
+            { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-red-400/50 dark:focus:ring-red-300/50': props.severity === 'danger' },
+            // Text & Outlined Button
+            { 'hover:bg-red-300/20': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
+            // Contrast
+            { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
+            { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
+            // Text & Outlined Button
+            { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
+            // Disabled
+            { 'opacity-60 pointer-events-none cursor-default': context.disabled },
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer overflow-hidden select-none',
+
+            // Badge
+            '[&>[data-pc-name=badge]]:min-w-4 [&>[data-pc-name=badge]]:h-4 [&>[data-pc-name=badge]]:leading-4'
+        ]
+    }),
+    label: ({ props }) => ({
+        class: [
+            'duration-200',
+            'font-bold',
+            {
+                'hover:underline': props.link
+            },
+            { 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
+        ]
+    }),
+    icon: ({ props }) => ({
+        class: [
+            'mx-0',
+            {
+                'mr-2': props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                'order-2': props.iconPos == 'bottom' && props.label != null
+            }
+        ]
+    }),
+    loadingIcon: ({ props }) => ({
+        class: [
+            'h-4 w-4',
+            'mx-0',
+            {
+                'mr-2': props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                'mb-2': props.iconPos == 'top' && props.label != null,
+                'mt-2': props.iconPos == 'bottom' && props.label != null
+            },
+            'animate-spin'
+        ]
+    }),
+    badge: ({ props }) => ({
+        class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
+    })
+};

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

@@ -0,0 +1,12 @@
+export default {
+    root: {
+        class: [
+            '[&>[data-pc-name=button]]:m-0',
+            '[&>[data-pc-name=button]]:border-r-none',
+            '[&>[data-pc-name=button]:nth-last-child(n+2)]:rounded-tr-none',
+            '[&>[data-pc-name=button]:nth-last-child(n+2)]:rounded-br-none',
+            '[&>[data-pc-name=button]:nth-child(n+2)]:rounded-tl-none',
+            '[&>[data-pc-name=button]:nth-child(n+2)]:rounded-bl-none'
+        ]
+    }
+};

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

@@ -0,0 +1,37 @@
+export default {
+    root: {
+        class: [
+            //Shape
+            'rounded-md',
+            'shadow-md',
+
+            //Color
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0'
+        ]
+    },
+    body: {
+        class: 'p-5'
+    },
+    title: {
+        class: 'text-2xl font-bold mb-2'
+    },
+    subtitle: {
+        class: [
+            //Font
+            'font-normal',
+
+            //Spacing
+            'mb-2',
+
+            //Color
+            'text-surface-600 dark:text-surface-0/60'
+        ]
+    },
+    content: {
+        class: 'py-5' // Vertical padding.
+    },
+    footer: {
+        class: 'pt-5' // Top padding.
+    }
+};

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

@@ -0,0 +1,103 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'flex flex-col'
+        ]
+    },
+    contentContainer: {
+        class: [
+            // Flexbox & Overflow
+            'flex flex-col overflow-auto'
+        ]
+    },
+    content: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+
+            // Orientation
+            {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col': props.orientation == 'vertical'
+            },
+            ,
+            '[&>[data-pc-extend=button]]:self-center'
+        ]
+    }),
+    viewport: {
+        class: [
+            // Overflow & Width
+            'overflow-hidden w-full'
+        ]
+    },
+    itemList: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+
+            // Orientation & Sizing
+            {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col h-full': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    item: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex shrink-0 grow ',
+
+            // Size
+            {
+                'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
+
+                'w-full h-full': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    itemClone: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex shrink-0 grow',
+            'unvisible',
+
+            // Size
+            {
+                'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
+
+                'w-full h-full': props.orientation == 'vertical'
+            }
+        ]
+    }),
+    indicatorList: {
+        class: [
+            // Flexbox & Alignment
+            'flex flex-row justify-center flex-wrap'
+        ]
+    },
+    indicator: {
+        class: [
+            // Spacing
+            'mr-2 mb-2'
+        ]
+    },
+    indicatorButton: ({ context }) => ({
+        class: [
+            // Sizing & Shape
+            'w-8 h-2 rounded-0',
+
+            // Transitions
+            'transition duration-200',
+
+            // Focus Styles
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Color & Background
+            {
+                'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted,
+                'bg-primary hover:bg-primary-emphasis': context.highlighted
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,199 @@
+export default {
+    root: ({ props, state }) => ({
+        class: [
+            'relative',
+
+            // Flex
+            {
+                flex: props.fluid,
+                'inline-flex': !props.fluid
+            },
+
+            // Shape
+            'rounded-md',
+
+            // Color and Background
+            '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 },
+
+            // 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 }) => ({
+        class: [
+            //Font
+            'leading-[normal]',
+
+            // Flex & Alignment
+            ' flex flex-auto',
+
+            // Sizing and Spacing
+            'w-[1%]',
+            'p-3',
+
+            //Shape
+            'rounded-none',
+
+            // Color and Background
+            'bg-transparent',
+            'border-0',
+            { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // States
+            'focus:outline-none focus:shadow-none',
+
+            // 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-700',
+            'text-surface-800 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    list: {
+        class: 'flex flex-col list-none p-0 m-0 gap-[2px] min-w-full'
+    },
+    option: ({ context }) => ({
+        class: [
+            // Font
+            'font-normal',
+            'leading-none',
+
+            // Shape
+            'border-0',
+            'rounded-none',
+
+            // Spacing
+            'm-0',
+
+            //  Colors
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active,
+                'bg-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+            },
+
+            // Hover States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active,
+                'hover:bg-highlight-emphasis': context.active
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // Misc
+            'cursor-pointer',
+            'overflow-hidden',
+            'whitespace-nowrap'
+        ]
+    }),
+    optionContent: {
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    groupIcon: {
+        class: [
+            // Alignment
+            'ml-auto'
+        ]
+    },
+    optionList: {
+        class: [
+            // Size
+            'min-w-full',
+
+            // Spacing
+            'py-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border-0',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    },
+    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'
+    }
+};