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

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

@@ -0,0 +1,18 @@
+export default {
+    root: ({ props, context }) => ({
+        class: [
+            'flex flex-col border-none',
+            {
+                '[&>[data-pc-name=accordionheader]]:select-none [&>[data-pc-name=accordionheader]]:pointer-events-none [&>[data-pc-name=accordionheader]]:cursor-default [&>[data-pc-name=accordionheader]]:opacity-60': props?.disabled,
+                '[&>[data-pc-name=accordionheader]]:text-surface-600 dark:[&>[data-pc-name=accordionheader]]:text-surface-0 hover:[&>[data-pc-name=accordionheader]]:text-surface-100 dark:hover:[&>[data-pc-name=accordionheader]]:text-surface-0':
+                    !props.disabled && context.active,
+                '[&>[data-pc-section=toggleicon]]:text-surface-600 dark:[&>[data-pc-section=toggleicon]]:text-surface-0 hover:[&>[data-pc-section=toggleicon]]:text-surface-100 dark:hover:[&>[data-pc-section=toggleicon]]:text-surface-0':
+                    !props.disabled && context.active,
+                '[&:last-child>[data-pc-name=accordioncontent]>[data-pc-section=content]]:rounded-b-md': !props.disabled && context.active,
+                '[&:last-child>[data-pc-name=accordionheader]]:rounded-b-md': !props.disabled && !context.active
+            },
+            '[&:nth-child(n+2)>[data-pc-name=accordionheader]]:border-t-0',
+            '[&:first-child>[data-pc-name=accordionheader]]:rounded-t-md'
+        ]
+    })
+};

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

@@ -0,0 +1,208 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flex
+            {
+                flex: props.fluid,
+                'inline-flex': !props.fluid
+            },
+
+            // Size
+            { 'w-full': props.multiple },
+
+            // Color
+            'text-surface-900 dark:text-surface-0',
+
+            //States
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    inputMultiple: ({ props, state }) => ({
+        class: [
+            // Font
+            'text-base leading-[normal]',
+
+            // Flex
+            'flex items-center flex-wrap',
+            'gap-2',
+
+            // Spacing
+            'm-0 list-none',
+            'px-3 py-1.5',
+
+            // Size
+            'w-full',
+            'min-h-[2.877rem]',
+
+            // Shape
+            'appearance-none rounded-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            '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': !props.invalid },
+            'focus:outline-none focus:outline-offset-0',
+            { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+            { 'ring ring-primary-400/50 dark:ring-primary-300/50': state.hovered },
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-text overflow-hidden'
+        ]
+    }),
+    inputToken: {
+        class: ['py-1.5 px-0', 'inline-flex flex-auto']
+    },
+    inputChip: {
+        class: 'flex-auto inline-flex pt-1 pb-1'
+    },
+    input: {
+        class: 'border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full'
+    },
+    chipItem: {
+        root: {
+            class: [
+                // Flex
+                'inline-flex items-center',
+
+                // Spacings
+                'py-1.5 px-3',
+
+                // Shape
+                'rounded-[1.14rem]',
+
+                // Colors
+                'bg-surface-200 dark:bg-surface-700',
+                'text-surface-700 dark:text-white/70',
+
+                // Misc
+                'cursor-default'
+            ]
+        }
+    },
+    dropdown: {
+        class: [
+            'relative',
+
+            // Alignments
+            'items-center inline-flex text-center align-bottom',
+
+            // Shape
+            'rounded-r-md',
+
+            // Size
+            'px-4 py-3 leading-[normal]',
+
+            // Colors
+            'text-primary-contrast',
+            'bg-primary',
+            'border border-primary',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+            'hover:bg-primary-emphasis hover:border-primary-emphasis',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    loader: {
+        class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin']
+    },
+    overlay: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+
+            // Shape
+            'border-0',
+            'rounded-md',
+            'shadow-md',
+
+            // Size
+            'max-h-[200px] overflow-auto'
+        ]
+    },
+    list: {
+        class: 'py-3 px-0 list-none m-0'
+    },
+    option: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'font-normal text-base leading-[normal]',
+
+            // Spacing
+            'm-0 px-5 py-3',
+
+            // Shape
+            'border-0 rounded-none',
+
+            // 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',
+
+            // Transition
+            'transition-shadow duration-200',
+
+            // Misc
+            'cursor-pointer overflow-hidden whitespace-nowrap'
+        ]
+    }),
+    optionGroup: {
+        class: [
+            'font-bold',
+
+            // Spacing
+            'm-0 p-3',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'text-surface-800 dark:text-white/80',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    emptyMessage: {
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    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/avatar/index.js

@@ -0,0 +1,43 @@
+export default {
+    root: ({ props, parent }) => ({
+        class: [
+            // Font
+            {
+                'text-xl': props.size == 'large',
+                'text-2xl': props.size == 'xlarge'
+            },
+
+            // Alignments
+            'inline-flex items-center justify-center',
+            'relative',
+
+            // Sizes
+            {
+                'h-8 w-8': props.size == null || props.size == 'normal',
+                'w-12 h-12': props.size == 'large',
+                'w-16 h-16': props.size == 'xlarge'
+            },
+            { '-ml-4': parent.instance.$style?.name == 'avatargroup' },
+
+            // Shapes
+            {
+                'rounded-lg': props.shape == 'square',
+                'rounded-full': props.shape == 'circle'
+            },
+            { 'border-2': parent.instance.$style?.name == 'avatargroup' },
+
+            // Colors
+            'bg-surface-300 dark:bg-surface-700',
+            { 'border-white dark:border-surface-800': parent.instance.$style?.name == 'avatargroup' }
+        ]
+    }),
+    image: ({ props }) => ({
+        class: [
+            'h-full w-full',
+            {
+                'rounded-lg': props.shape == 'square',
+                'rounded-full': props.shape == 'circle'
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,5 @@
+export default {
+    root: {
+        class: 'flex items-center'
+    }
+};

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

@@ -0,0 +1,47 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Font
+            'font-bold',
+
+            {
+                'text-xs leading-[1.5rem]': props.size === null,
+                'text-[0.625rem] leading-[1.25rem]': props.size === 'small',
+                'text-lg leading-[2.25rem]': props.size === 'large',
+                'text-2xl leading-[3rem]': props.size === 'xlarge'
+            },
+
+            // Alignment
+            'text-center inline-block',
+
+            // Size
+            'p-0 px-1',
+            {
+                'w-2 h-2': props.value === null,
+                'min-w-[1.5rem] h-[1.5rem]': props.value !== null && props.size === null,
+                'min-w-[1.25rem] h-[1.25rem]': props.size === 'small',
+                'min-w-[2.25rem] h-[2.25rem]': props.size === 'large',
+                'min-w-[3rem] h-[3rem]': props.size === 'xlarge'
+            },
+
+            // Shape
+            {
+                'rounded-full': props.value?.length === 1,
+                'rounded-[0.71rem]': props.value?.length !== 1
+            },
+
+            // Color
+            'text-primary-contrast',
+            {
+                'bg-primary': props.severity === null || props.severity === 'primary',
+                'bg-surface-500 dark:bg-surface-400': 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-purple-500 dark:bg-purple-400': props.severity === 'help',
+                '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'
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,43 @@
+export default {
+    root: ({ context }) => ({
+        class: [
+            // Font
+            'font-bold',
+            'text-xs leading-[normal]',
+
+            // Alignment
+            'flex items-center justify-center',
+            'text-center',
+
+            // Position
+            'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right',
+
+            // Size
+            'm-0',
+            {
+                'p-0': context.nogutter || context.dot,
+                'px-2': !context.nogutter && !context.dot,
+                'min-w-[0.5rem] w-2 h-2': context.dot,
+                'min-w-[1.5rem] h-6': !context.dot
+            },
+
+            // Shape
+            {
+                'rounded-full': context.nogutter || context.dot,
+                'rounded-[10px]': !context.nogutter && !context.dot
+            },
+
+            // Color
+            'text-primary-contrast',
+            {
+                'bg-primary': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary,
+                'bg-surface-500 dark:bg-surface-400': context.secondary,
+                'bg-green-500 dark:bg-green-400': context.success,
+                'bg-blue-500 dark:bg-blue-400': context.info,
+                'bg-orange-500 dark:bg-orange-400': context.warning,
+                'bg-purple-500 dark:bg-purple-400': context.help,
+                'bg-red-500 dark:bg-red-400': context.danger
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,4 @@
+export default {
+    root: 'relative',
+    mask: 'bg-black/40 rounded-md'
+};

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

@@ -0,0 +1,64 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700',
+            'border border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'overflow-x-auto'
+        ]
+    },
+    list: {
+        class: [
+            // Flex & Alignment
+            'flex items-center flex-nowrap',
+
+            // Spacing
+            'm-0 p-0 list-none leading-none'
+        ]
+    },
+    itemLink: {
+        class: [
+            // Flex & Alignment
+            'flex items-center gap-2',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'text-surface-600 dark:text-white/70',
+
+            // States
+            '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-shadow duration-200',
+
+            // Misc
+            'text-decoration-none'
+        ]
+    },
+    itemIcon: {
+        class: 'text-surface-600 dark:text-white/70'
+    },
+    separator: {
+        class: [
+            // Flex & Alignment
+            'flex items-center',
+
+            // Spacing
+            ' mx-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    }
+};