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

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

@@ -0,0 +1,121 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md',
+
+            // Size
+            'min-w-[12rem]',
+            'py-1',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    rootList: {
+        class: [
+            // Spacings and Shape
+            'flex flex-col',
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    item: {
+        class: [
+            // Position
+            'relative'
+        ]
+    },
+    itemContent: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-none',
+
+            //  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'
+        ]
+    }),
+    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']
+    },
+    submenuIcon: {
+        class: [
+            // Position
+            'ml-auto'
+        ]
+    },
+    submenu: {
+        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',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    }
+};

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

@@ -0,0 +1,81 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'flex grow',
+            {
+                'flex-col': props.layout === 'vertical',
+                'flex-row flex-1': props.layout === 'horizontal'
+            }
+        ]
+    }),
+    event: ({ props, context }) => ({
+        class: [
+            'flex relative min-h-[70px]',
+            {
+                'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
+                'flex-col flex-1': props.layout === 'horizontal',
+                'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
+            }
+        ]
+    }),
+    eventOpposite: ({ props, context }) => ({
+        class: [
+            'flex-1',
+            {
+                'px-4': props.layout === 'vertical',
+                'py-4': props.layout === 'horizontal'
+            },
+            {
+                'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+            }
+        ]
+    }),
+    eventSeparator: ({ props }) => ({
+        class: [
+            'flex items-center flex-initial',
+            {
+                'flex-col': props.layout === 'vertical',
+                'flex-row': props.layout === 'horizontal'
+            }
+        ]
+    }),
+    eventMarker: {
+        class: [
+            // Display & Flexbox
+            'flex self-baseline',
+
+            // Size
+            'w-4 h-4',
+
+            // Appearance
+            'rounded-full border-2 border-primary bg-surface-0 dark:bg-surface-900/40'
+        ]
+    },
+    eventConnector: ({ props }) => ({
+        class: [
+            'grow bg-surface-300 dark:bg-surface-700',
+            {
+                'w-[2px]': props.layout === 'vertical',
+                'w-full h-[2px]': props.layout === 'horizontal'
+            }
+        ]
+    }),
+    eventContent: ({ props, context }) => ({
+        class: [
+            'flex-1',
+            {
+                'px-4': props.layout === 'vertical',
+                'py-4': props.layout === 'horizontal'
+            },
+            {
+                'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+            },
+            {
+                'min-h-0': props.layout === 'vertical' && context.index === context.count - 1,
+                'grow-0': props.layout === 'horizontal' && context.index === context.count - 1
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,102 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            //Size and Shape
+            'w-96 rounded-md',
+
+            // Positioning
+            { '-translate-x-2/4': props.position == 'top-center' || props.position == 'bottom-center' }
+        ]
+    }),
+    message: ({ props }) => ({
+        class: [
+            'my-4 rounded-md w-full',
+            'border-solid border-0 border-l-[6px]',
+            'backdrop-blur-[10px] shadow-md',
+
+            // Colors
+            {
+                'bg-blue-100/70 dark:bg-blue-500/20': props.message.severity == 'info',
+                'bg-green-100/70 dark:bg-green-500/20': props.message.severity == 'success',
+                'bg-orange-100/70 dark:bg-orange-500/20': props.message.severity == 'warn',
+                'bg-red-100/70 dark:bg-red-500/20': props.message.severity == 'error'
+            },
+            {
+                'border-blue-500 dark:border-blue-400': props.message.severity == 'info',
+                'border-green-500 dark:border-green-400': props.message.severity == 'success',
+                'border-orange-500 dark:border-orange-400': props.message.severity == 'warn',
+                'border-red-500 dark:border-red-400': props.message.severity == 'error'
+            },
+            {
+                'text-blue-700 dark:text-blue-300': props.message.severity == 'info',
+                'text-green-700 dark:text-green-300': props.message.severity == 'success',
+                'text-orange-700 dark:text-orange-300': props.message.severity == 'warn',
+                'text-red-700 dark:text-red-300': props.message.severity == 'error'
+            }
+        ]
+    }),
+    messageContent: ({ props }) => ({
+        class: [
+            'flex p-4',
+            {
+                'items-start': props.message.summary,
+                'items-center': !props.message.summary
+            }
+        ]
+    }),
+    messageIcon: {
+        class: [
+            // Sizing and Spacing
+            'w-6 h-6',
+            'text-lg leading-none mr-2 shrink-0'
+        ]
+    },
+    messageText: {
+        class: [
+            // Font and Text
+            'text-base leading-none',
+            'ml-2',
+            'flex-1'
+        ]
+    },
+    summary: {
+        class: 'font-bold block'
+    },
+    detail: ({ props }) => ({
+        class: ['block', { 'mt-2': props.message.summary }]
+    }),
+    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 translate-y-2/4',
+        enterActiveClass: 'transition-[transform,opacity] duration-300',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: '!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
+        leaveToClass: 'max-h-0 opacity-0 mb-0'
+    }
+};

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

@@ -0,0 +1,45 @@
+export default {
+    root: ({ props, context }) => ({
+        class: [
+            'relative',
+
+            // Alignment
+            'flex items-center justify-center',
+            'px-3 py-2',
+            'rounded-md border',
+
+            //Color
+            {
+                'bg-surface-0 dark:bg-surface-900 ': !props.modelValue,
+                'border-surface-200 dark:border-surface-700 ': !props.modelValue && !props.invalid,
+                'text-surface-700 dark:text-white/80': !props.modelValue,
+                'bg-primary border-primary text-primary-contrast': props.modelValue
+            },
+
+            // States
+            {
+                'hover:text-surface-800 dark:hover:text-white/80': !props.disabled && !props.modelValue,
+                'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400': !props.disabled
+            },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // Before
+            'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
+
+            // Transitions
+            'transition-all duration-200',
+
+            // Misc
+            { 'cursor-pointer': !props.disabled, 'opacity-60 select-none pointer-events-none cursor-default': props.disabled },
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    }),
+    content: 'relative items-center inline-flex justify-center gap-2',
+    label: 'font-bold text-center w-full z-10 relative',
+    icon: 'relative z-10 mr-2'
+};

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

@@ -0,0 +1,80 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'inline-block relative',
+            'w-12 h-7',
+            'rounded-2xl',
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    slider: ({ props }) => ({
+        class: [
+            // Position
+            'absolute top-0 left-0 right-0 bottom-0',
+            { 'before:transform before:translate-x-5': props.modelValue == props.trueValue },
+
+            // Shape
+            'rounded-2xl',
+
+            // Before:
+            'before:absolute before:top-1/2 before:left-1',
+            'before:-mt-2.5',
+            'before:h-5 before:w-5',
+            'before:rounded-full',
+            'before:duration-200',
+            'before:bg-surface-0 before:dark:bg-surface-900',
+
+            // Colors
+            'border',
+            {
+                'bg-surface-200 dark:bg-surface-700': !(props.modelValue == props.trueValue),
+                'bg-primary': props.modelValue == props.trueValue
+            },
+
+            { 'border-transparent': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            { 'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 ': !(props.modelValue == props.trueValue) && !props.disabled },
+            { 'peer-hover:bg-primary-hover ': props.modelValue == props.trueValue && !props.disabled },
+            'peer-focus-visible:ring peer-focus-visible:ring-primary-400/50 dark:peer-focus-visible:ring-primary-300/50',
+
+            // Transition
+            'transition-colors duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-[2.5rem]',
+            'outline-none',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    }
+};

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

@@ -0,0 +1,28 @@
+export default {
+    root: {
+        class: [
+            // Flex & Alignment
+            'flex items-center justify-between flex-wrap',
+            'gap-2',
+
+            // Spacing
+            'p-5',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-800',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    start: {
+        class: 'flex items-center'
+    },
+    center: {
+        class: 'flex items-center'
+    },
+    end: {
+        class: 'flex items-center'
+    }
+};

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

@@ -0,0 +1,46 @@
+export default {
+    root: ({ context, props }) => ({
+        class: [
+            // Position and Shadows
+            'absolute',
+            'shadow-md',
+            'p-fadein',
+            // Spacing
+            {
+                'py-0 px-1': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+                'py-1 px-0': context?.top || context?.bottom
+            }
+        ]
+    }),
+    arrow: ({ context, props }) => ({
+        class: [
+            // Position
+
+            'absolute',
+
+            // Size
+            'w-0',
+            'h-0',
+
+            // Shape
+            'border-transparent',
+            'border-solid',
+            {
+                'border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-surface-600': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+                'border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-surface-600': context?.left,
+                'border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-surface-600': context?.top,
+                'border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-surface-600': context?.bottom
+            },
+
+            // Spacing
+            {
+                '-mt-1 ': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+                '-mt-1': context?.left,
+                '-ml-1': context?.top || context?.bottom
+            }
+        ]
+    }),
+    text: {
+        class: ['p-3', 'bg-surface-600 dark:bg-surface-700', 'text-white', 'leading-none', 'rounded-md', 'whitespace-pre-line', 'break-words']
+    }
+};

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

@@ -0,0 +1,101 @@
+export default {
+    root: {
+        class: [
+            // Space
+            'p-5',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+            'border border-solid border-surface-200 dark:border-surface-700',
+            '[&_[data-pc-name=pcfilter]]:w-full'
+        ]
+    },
+    wrapper: {
+        class: ['overflow-auto']
+    },
+    container: {
+        class: [
+            // Spacing
+            'm-0 p-0',
+
+            // Misc
+            'list-none overflow-auto'
+        ]
+    },
+    node: {
+        class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50']
+    },
+    nodeContent: ({ context, props }) => ({
+        class: [
+            // Flex and Alignment
+            'flex items-center',
+
+            // Shape
+            'rounded-md',
+
+            // Spacing
+            'p-2 gap-2',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            { 'bg-highlight': context.selected },
+
+            // States
+            { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected },
+
+            // Transition
+            'transition-shadow duration-200',
+
+            { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+        ]
+    }),
+    nodeToggleButton: ({ context }) => ({
+        class: [
+            // Flex and Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Size
+            'w-8 h-8',
+
+            // Colors
+            'bg-transparent',
+            {
+                'text-surface-500 dark:text-white': !context.selected,
+                'text-primary-600 dark:text-white': context.selected,
+                invisible: context.leaf
+            },
+
+            // States
+            'hover:bg-surface-200/20 dark:hover:bg-surface-500/20',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none'
+        ]
+    }),
+    nodeIcon: {
+        class: [
+            // Space
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    nodeChildren: {
+        class: ['m-0 list-none p-0 pl-2 mt-1']
+    },
+    loadingIcon: {
+        class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin']
+    }
+};