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

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

@@ -0,0 +1,117 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Sizing and Shape
+            'min-w-[12rem]',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid }
+        ]
+    }),
+    listContainer: 'overflow-auto',
+    list: {
+        class: 'py-3 list-none m-0 outline-none'
+    },
+    option: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'font-normal',
+            'leading-none',
+
+            // Flex
+            'flex items-center',
+
+            // Position
+            'relative',
+
+            // 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
+            'cursor-pointer',
+            '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',
+    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-600',
+
+            '[&_[data-pc-name=pcfilter]]:w-full'
+        ]
+    },
+    emptyMessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    }
+};

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

@@ -0,0 +1,198 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+
+            // Shape & Size
+            'rounded-md',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-700',
+            'border border-surface-200 dark:border-surface-700',
+            { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col sm:w-48 p-0 py-1': props.orientation !== 'horizontal' }
+        ]
+    }),
+    rootList: ({ props }) => ({
+        class: [
+            // Flexbox
+            'sm:flex',
+            'items-center',
+            'flex-wrap',
+            'flex-col sm:flex-row',
+            { hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+            // Position
+            'absolute sm:relative',
+            'top-full left-0',
+            'sm:top-auto sm:left-auto',
+
+            // Size
+            'w-full sm:w-auto',
+
+            // Spacing
+            'm-0',
+            'py-1 sm:py-0 sm:p-0',
+            'list-none',
+
+            // Shape
+            'shadow-md sm:shadow-none',
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700 sm:bg-transparent dark:sm:bg-transparent',
+
+            // Misc
+            'outline-none'
+        ]
+    }),
+    item: ({ props }) => ({
+        class: [
+            'sm:relative static',
+            {
+                'sm:w-auto w-full': props.horizontal,
+                'w-full': !props.horizontal
+            }
+        ]
+    }),
+    itemContent: ({ props, context }) => ({
+        class: [
+            // Shape
+            { 'rounded-md': props.level < 1 && props.horizontal },
+
+            //  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-all',
+            'duration-200'
+        ]
+    }),
+    itemLink: {
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Size
+            'py-3 pr-5 pl-9 sm:pl-5',
+            'leading-none',
+
+            // Misc
+            'select-none',
+            'cursor-pointer',
+            'no-underline ',
+            'overflow-hidden'
+        ]
+    },
+    itemIcon: {
+        class: 'mr-2'
+    },
+    submenuIcon: ({ props }) => ({
+        class: [
+            {
+                'ml-auto sm:ml-2': props.horizontal,
+                'ml-auto': !props.horizontal
+            }
+        ]
+    }),
+    overlay: ({ props }) => ({
+        class: [
+            // Size
+            'w-auto',
+
+            // Spacing
+            'py-1',
+            'm-0',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+            {
+                'sm:left-full top-0': !props.horizontal
+            }
+        ]
+    }),
+    grid: {
+        class: 'flex flex-wrap sm:flex-nowrap'
+    },
+    column: {
+        class: 'w-full sm:w-1/2'
+    },
+    submenu: {
+        class: ['m-0 list-none', 'py-1 px-2 w-full sm:min-w-[14rem]']
+    },
+    submenuLabel: {
+        class: [
+            'font-semibold',
+
+            // Spacing
+            'py-3 px-5',
+            'm-0',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    button: {
+        class: [
+            // Flexbox
+            'flex sm:hidden',
+            'items-center justify-center',
+
+            // Size
+            'w-8',
+            'h-8',
+
+            // Shape
+            'rounded-full',
+            // Color
+            'text-surface-500 dark:text-white/80',
+
+            // States
+            'hover:text-surface-600 dark:hover:text-white/60',
+            'hover:bg-surface-100 dark:hover:bg-surface-600/80',
+            'focus:outline-none focus:outline-offset-0',
+            'focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer',
+            'no-underline'
+        ]
+    },
+    end: {
+        class: 'ml-auto self-center'
+    }
+};

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

@@ -0,0 +1,96 @@
+export default {
+    root: {
+        class: [
+            // Sizing and Shape
+            'min-w-[12rem]',
+            'rounded-md',
+            // Spacing
+            'py-2',
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'text-surface-700 dark:text-white/80',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    list: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    itemContent: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-none',
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            {
+                'bg-surface-200 text-surface-700 dark:bg-surface-300/10 dark:text-white': context.focused
+            },
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:bg-surface-700 dark:hover:bg-surface-400/10'
+        ]
+    }),
+    itemLink: {
+        class: [
+            'relative',
+            // Flexbox
+
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    itemIcon: {
+        class: [
+            // Spacing
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    itemLabel: {
+        class: ['leading-none']
+    },
+    submenuLabel: {
+        class: [
+            // Font
+            'font-bold',
+            // Spacing
+            'm-0',
+            'py-3 px-5',
+            // Shape
+            'rounded-tl-none',
+            'rounded-tr-none',
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'text-surface-700 dark:text-white'
+        ]
+    },
+    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/menubar/index.js

@@ -0,0 +1,176 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'p-2',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-700',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    rootList: ({ props }) => ({
+        class: [
+            // Flexbox
+            'sm:flex',
+            'items-center',
+            'flex-wrap',
+            'flex-col sm:flex-row',
+            { hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+            // Position
+            'absolute sm:relative',
+            'top-full left-0',
+            'sm:top-auto sm:left-auto',
+
+            // Size
+            'w-full sm:w-auto',
+
+            // Spacing
+            'm-0',
+            'py-1 sm:py-0 sm:p-0',
+            'list-none',
+
+            // Shape
+            'shadow-md sm:shadow-none',
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700 sm:bg-transparent',
+
+            // Misc
+            'outline-none'
+        ]
+    }),
+    item: {
+        class: 'sm:relative sm:w-auto w-full static'
+    },
+    itemContent: ({ props, context }) => ({
+        class: [
+            // Shape
+            { 'rounded-md': props.root },
+
+            //  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-all',
+            'duration-200'
+        ]
+    }),
+    itemLink: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flexbox
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Size
+            {
+                'pl-9 sm:pl-5': context.level === 1,
+                'pl-14 sm:pl-5': context.level === 2
+            },
+            'leading-none',
+
+            // Misc
+            'select-none',
+            'cursor-pointer',
+            'no-underline ',
+            'overflow-hidden'
+        ]
+    }),
+    itemIcon: {
+        class: 'mr-2'
+    },
+    submenuIcon: ({ props }) => ({
+        class: [
+            {
+                'ml-auto sm:ml-2': props.root,
+                'ml-auto': !props.root
+            }
+        ]
+    }),
+    submenu: ({ props }) => ({
+        class: [
+            'flex flex-col',
+            // Size
+            'w-full sm:w-48',
+
+            // Spacing
+            'py-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border-0',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+            { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    }),
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    button: {
+        class: [
+            // Flexbox
+            'flex sm:hidden',
+            'items-center justify-center',
+
+            // Size
+            'w-8',
+            'h-8',
+
+            // Shape
+            'rounded-full',
+            // Color
+            'text-surface-500 dark:text-white/80',
+
+            // States
+            'hover:text-surface-600 dark:hover:text-white/60',
+            'hover:bg-surface-100 dark:hover:bg-surface-600/80',
+            'focus:outline-none focus:outline-offset-0',
+            'focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer',
+            'no-underline'
+        ]
+    },
+    end: {
+        class: 'ml-auto self-center'
+    }
+};

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

@@ -0,0 +1,92 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Spacing and Shape
+            'rounded-md',
+            'outline-solid outline-0 outline-l-[6px]',
+
+            // Colors
+            {
+                'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
+                'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
+                'bg-surface-100/70 dark:bg-surface-500/20': props.severity == 'secondary',
+                'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
+                'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
+                'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast'
+            },
+            {
+                'outline-blue-500 dark:outline-blue-400': props.severity == 'info',
+                'outline-green-500 dark:outline-green-400': props.severity == 'success',
+                'outline-surface-500 dark:outline-surface-400': props.severity == 'secondary',
+                'outline-orange-500 dark:outline-orange-400': props.severity == 'warn',
+                'outline-red-500 dark:outline-red-400': props.severity == 'error',
+                'outline-surface-950 dark:outline-surface-0': props.severity == 'contrast'
+            },
+            {
+                'text-blue-700 dark:text-blue-300': props.severity == 'info',
+                'text-green-700 dark:text-green-300': props.severity == 'success',
+                'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
+                'text-orange-700 dark:text-orange-300': props.severity == 'warn',
+                'text-red-700 dark:text-red-300': props.severity == 'error',
+                'text-surface-0 dark:text-surface-950': props.severity == 'contrast'
+            }
+        ]
+    }),
+    content: {
+        class: [
+            // Flexbox
+            'flex items-center h-full',
+
+            // Spacing
+            'py-3 px-5 gap-2'
+        ]
+    },
+    icon: {
+        class: [
+            // Sizing and Spacing
+            'w-6 h-6',
+            'text-lg leading-none shrink-0'
+        ]
+    },
+    text: {
+        class: [
+            // Font and Text
+            'text-base leading-none',
+            'font-medium'
+        ]
+    },
+    closeButton: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Size
+            'w-8 h-8',
+
+            // Spacing and Misc
+            'ml-auto  relative',
+
+            // Shape
+            'rounded-full',
+
+            // Colors
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:bg-surface-0/50 dark:hover:bg-surface-0/10',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-300',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
+        leaveToClass: 'max-h-0 opacity-0 !m-0'
+    }
+};