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

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

@@ -0,0 +1,435 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Display and Position
+            {
+                flex: props.fluid,
+                'inline-flex': !props.fluid
+            },
+            'max-w-full',
+            'relative',
+
+            // Misc
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    pcInput: ({ props, parent }) => ({
+        root: {
+            class: [
+                // Display
+                'flex-auto w-[1%]',
+
+                // Font
+                'leading-none',
+
+                // Colors
+                'text-surface-600 dark:text-surface-200',
+                '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 },
+
+                // Spacing
+                'm-0 p-3',
+
+                // Shape
+                'appearance-none',
+                { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' },
+                { 'rounded-l-md  flex-1 pr-9': props.showIcon && props.iconDisplay !== 'input' },
+                { 'rounded-md flex-1 pr-9': props.showIcon && props.iconDisplay === 'input' },
+
+                // Transitions
+                'transition-colors',
+                'duration-200',
+
+                // States
+                { 'hover:border-primary-emphasis': !props.invalid },
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50',
+
+                // Filled State *for FloatLabel
+                { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null }
+            ]
+        }
+    }),
+    dropdownIcon: {
+        class: ['absolute top-[50%] -mt-2', 'text-surface-600 dark:text-surface-200', 'right-[.75rem]']
+    },
+    dropdown: {
+        class: [
+            'relative w-10',
+
+            // Alignments
+            'items-center inline-flex text-center align-bottom justify-center',
+
+            // Shape
+            'rounded-r-md',
+
+            // Size
+            'px-4 py-3 leading-none',
+
+            // Colors
+            'text-primary-inverse',
+            'bg-primary',
+            'border border-primary',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+            'hover:bg-primary-hover hover:border-primary-hover',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    inputIconContainer: 'absolute cursor-pointer top-1/2 right-3 -mt-3',
+    inputIcon: 'inline-block text-base',
+    panel: ({ props }) => ({
+        class: [
+            // Display & Position
+            {
+                absolute: !props.inline,
+                'inline-block': props.inline
+            },
+
+            // Size
+            { 'w-auto p-2 ': !props.inline },
+            { 'min-w-[80vw] w-auto p-2 ': props.touchUI },
+            { 'p-2 min-w-full': props.inline },
+
+            // Shape
+            'border rounded-lg',
+            {
+                'shadow-md': !props.inline
+            },
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700',
+
+            //misc
+            { 'overflow-x-auto': props.inline }
+        ]
+    }),
+    header: {
+        class: [
+            //Font
+            'font-semibold',
+
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+
+            // Spacing
+            'p-2',
+            'm-0',
+
+            // Shape
+            'border-b',
+            'rounded-t-md',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700'
+        ]
+    },
+    title: {
+        class: [
+            // Text
+            'leading-8',
+            'mx-auto my-0'
+        ]
+    },
+    selectMonth: {
+        class: [
+            // Font
+            'text-base leading-[normal]',
+            'font-semibold',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+
+            // Transitions
+            'transition duration-200',
+
+            // Spacing
+            'p-2',
+            'm-0 mr-2',
+
+            // States
+            'hover:text-primary-500 dark:hover:text-primary-400',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    selectYear: {
+        class: [
+            // Font
+            'text-base leading-[normal]',
+            'font-semibold',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+
+            // Transitions
+            'transition duration-200',
+
+            // Spacing
+            'p-2',
+            'm-0',
+
+            // States
+            'hover:text-primary-500 dark:hover:text-primary-400',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    table: {
+        class: [
+            // Font
+            'text-base leading-none',
+            // Size & Shape
+            'border-collapse',
+            'w-full',
+
+            // Spacing
+            'm-0 my-2'
+        ]
+    },
+    tableHeaderCell: {
+        class: [
+            // Spacing
+            'p-0 md:p-2'
+        ]
+    },
+    weekHeader: {
+        class: ['leading-[normal]', 'text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
+    },
+    weekNumber: {
+        class: ['text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
+    },
+    weekday: {
+        class: [
+            // Colors
+            'text-surface-500 dark:text-white/60'
+        ]
+    },
+    dayCell: {
+        class: [
+            // Spacing
+            'p-0 md:p-2'
+        ]
+    },
+    weekLabelContainer: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+            'mx-auto',
+
+            // Shape & Size
+            'w-10 h-10',
+            'rounded-full',
+            'border-transparent border',
+
+            // Colors
+            'opacity-60 cursor-default'
+        ]
+    },
+    dayView: 'w-full',
+    day: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+            'mx-auto',
+
+            // Shape & Size
+            'w-10 h-10',
+            'rounded-full',
+            'border-transparent border',
+
+            // Colors
+            {
+                'text-primary': context.date.today,
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled && !context.date.today,
+                'bg-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled,
+                'hover:bg-primary-highlight-hover': context.selected && !context.disabled
+            },
+            {
+                'opacity-60 cursor-default': context.disabled,
+                'cursor-pointer': !context.disabled
+            }
+        ]
+    }),
+    monthView: {
+        class: [
+            // Spacing
+            'my-2'
+        ]
+    },
+    month: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-1/3',
+            'p-2',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            {
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+                'bg-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled,
+                'hover:bg-primary-highlight-hover': context.selected && !context.disabled
+            },
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    yearView: {
+        class: [
+            // Spacing
+            'my-2'
+        ]
+    },
+    year: ({ context }) => ({
+        class: [
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+
+            // Size
+            'w-1/3',
+            'p-2',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            {
+                'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+                'bg-highlight': context.selected && !context.disabled
+            },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.selected && !context.disabled,
+                'hover:bg-primary-highlight-hover': context.selected && !context.disabled
+            },
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    timePicker: {
+        class: [
+            // Flexbox
+            'flex',
+            'justify-center items-center',
+
+            // Borders
+            'border-t-1',
+            'border-solid border-surface-200',
+
+            // Spacing
+            'p-2'
+        ]
+    },
+    separatorContainer: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    separator: {
+        class: [
+            // Text
+            'text-xl'
+        ]
+    },
+    hourPicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    minutePicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    secondPicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    ampmPicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+
+            // Spacing
+            'px-2'
+        ]
+    },
+    calendarContainer: 'flex',
+    calendar: 'flex-auto border-l first:border-l-0 border-surface-200',
+    buttonbar: {
+        class: [
+            // Flexbox
+            'flex justify-between items-center',
+
+            // Spacing
+            'py-3 px-0',
+
+            // Shape
+            'border-t border-surface-200 dark:border-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'
+    }
+};

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

@@ -0,0 +1,3 @@
+export default {
+    root: {}
+};

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

@@ -0,0 +1,148 @@
+export default {
+    root: ({ state }) => ({
+        class: [
+            // Shape
+            'rounded-lg',
+            'shadow-lg',
+            'border-0',
+
+            // Size
+            'max-h-[90vh]',
+            'm-0',
+
+            // Color
+            'dark:border',
+            'dark:border-surface-700',
+
+            // Transitions
+            'transform',
+            'scale-100',
+
+            // Maximized State
+            {
+                'transition-none': state.maximized,
+                'transform-none': state.maximized,
+                '!w-screen': state.maximized,
+                '!h-screen': state.maximized,
+                '!max-h-full': state.maximized,
+                '!top-0': state.maximized,
+                '!left-0': state.maximized
+            }
+        ]
+    }),
+    header: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+            'shrink-0',
+
+            // Spacing
+            'p-6',
+
+            // Shape
+            'border-t-0',
+            'rounded-tl-lg',
+            'rounded-tr-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    title: {
+        class: ['font-bold text-lg']
+    },
+    headerActions: {
+        class: ['flex items-center']
+    },
+    content: ({ state, instance }) => ({
+        class: [
+            // Spacing
+            'px-6',
+            'pb-8',
+            'pt-0',
+
+            // Shape
+            {
+                grow: state.maximized,
+                'rounded-bl-lg': !instance.$slots.footer,
+                'rounded-br-lg': !instance.$slots.footer
+            },
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80',
+
+            // Misc
+            'overflow-y-auto'
+        ]
+    }),
+    footer: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-end',
+            'shrink-0',
+            'text-right',
+            'gap-2',
+
+            // Spacing
+            'px-6',
+            'pb-6',
+
+            // Shape
+            'border-t-0',
+            'rounded-b-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    mask: ({ props }) => ({
+        class: [
+            // Transitions
+            'transition-all',
+            'duration-300',
+            { 'p-5': !props.position == 'full' },
+
+            // Background and Effects
+            { 'has-[.mask-active]:bg-transparent bg-black/40': props.modal, 'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal }
+        ]
+    }),
+    transition: ({ props }) => {
+        return props.position === 'top'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'bottom'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
+            ? {
+                  enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : {
+                  enterFromClass: 'opacity-0 scale-75 mask-active',
+                  enterActiveClass: 'transition-all duration-200 ease-out',
+                  leaveActiveClass: 'transition-all duration-200 ease-out',
+                  leaveToClass: 'opacity-0 scale-75 mask-active'
+              };
+    }
+};

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

@@ -0,0 +1,67 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flex and Position
+            'flex relative',
+            { 'justify-center': props.layout == 'vertical' },
+            { 'items-center': props.layout == 'vertical' },
+            {
+                'justify-start': props?.align == 'left' && props.layout == 'horizontal',
+                'justify-center': props?.align == 'center' && props.layout == 'horizontal',
+                'justify-end': props?.align == 'right' && props.layout == 'horizontal',
+                'items-center': props?.align == 'top' && props.layout == 'vertical',
+                'items-start': props?.align == 'center' && props.layout == 'vertical',
+                'items-end': props?.align == 'bottom' && props.layout == 'vertical'
+            },
+
+            // Spacing
+            {
+                'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
+                'mx-4 md:mx-5 py-5': props.layout == 'vertical'
+            },
+
+            // Size
+            {
+                'w-full': props.layout == 'horizontal',
+                'min-h-full': props.layout == 'vertical'
+            },
+
+            // Before: Line
+            'before:block',
+
+            // Position
+            {
+                'before:absolute before:left-0 before:top-1/2': props.layout == 'horizontal',
+                'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': props.layout == 'vertical'
+            },
+
+            // Size
+            {
+                'before:w-full': props.layout == 'horizontal',
+                'before:min-h-full': props.layout == 'vertical'
+            },
+
+            // Shape
+            {
+                'before:border-solid': props.type == 'solid',
+                'before:border-dotted': props.type == 'dotted',
+                'before:border-dashed': props.type == 'dashed'
+            },
+
+            // Color
+            {
+                'before:border-t before:border-surface-200 before:dark:border-surface-600': props.layout == 'horizontal',
+                'before:border-l before:border-surface-200 before:dark:border-surface-600': props.layout == 'vertical'
+            }
+        ]
+    }),
+    content: {
+        class: [
+            // Space and Position
+            'px-1 z-10',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800'
+        ]
+    }
+};