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

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

@@ -0,0 +1,104 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+
+            // Size
+            'w-6',
+            'h-6',
+
+            // Misc
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    box: ({ props, context }) => ({
+        class: [
+            // Alignment
+            'flex',
+            'items-center',
+            'justify-center',
+
+            // Size
+            'w-6',
+            'h-6',
+
+            // Shape
+            'rounded-md',
+            'border-2',
+
+            // Colors
+            {
+                'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked && !props.invalid,
+                'border-primary bg-primary': context.checked
+            },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:border-primary': !props.disabled && !context.checked && !props.invalid,
+                'peer-hover:bg-primary-emphasis peer-hover:border-primary-emphasis': !props.disabled && context.checked,
+                'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                'cursor-default opacity-60': props.disabled
+            },
+
+            // Transitions
+            'transition-colors',
+            'duration-200'
+        ]
+    }),
+    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-md',
+            'outline-none',
+            'border-2 border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    icon: ({ state, context }) => ({
+        class: [
+            // Font
+            'text-base leading-none',
+
+            // Size
+            'w-4',
+            'h-4',
+
+            // Colors
+            {
+                'text-white dark:text-surface-900': context.checked,
+                'text-primary': state.d_indeterminate
+            },
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    })
+};

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

@@ -0,0 +1,42 @@
+export default {
+    root: {
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+
+            // Spacing
+            'px-3 gap-2',
+
+            // Shape
+            'rounded-[16px]',
+
+            // Colors
+            'text-surface-700 dark:text-white/70',
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    },
+    label: {
+        class: 'leading-6 my-1.5 mx-0'
+    },
+    icon: {
+        class: 'leading-6 mr-2'
+    },
+    image: {
+        class: ['w-9 h-9 -ml-3 mr-2', 'rounded-full']
+    },
+    removeIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+
+            // Size
+            'w-4 h-4',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }
+};

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

@@ -0,0 +1,123 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Display
+            'inline-block',
+
+            // Misc
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    preview: {
+        class: [
+            // Font
+            'text-base ',
+
+            // Spacing
+            'm-0',
+            'p-3',
+
+            // Size & Shape
+            'rounded-lg w-8 h-8',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'border border-surface-300 dark:border-surface-700',
+
+            // States
+            'hover:border-primary',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition-colors duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    },
+    panel: ({ props }) => ({
+        class: [
+            // Position & Size
+            {
+                'relative h-[166px] w-[193px]': props.inline,
+                'absolute h-[166px] w-[193px]': !props.inline
+            },
+
+            // Shape
+            'shadow-md border',
+
+            // Colors
+            'bg-surface-800 border-surface-900 dark:border-surface-600'
+        ]
+    }),
+    colorSelector: {
+        class: [
+            // Position
+            'absolute top-[8px] left-[8px]',
+
+            // Size
+            'h-[150px] w-[150px]'
+        ]
+    },
+    color: {
+        class: [
+            // Size
+            'h-[150px] w-[150px]'
+        ],
+        style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)'
+    },
+    colorHandle: {
+        class: [
+            'absolute',
+
+            // Shape
+            'rounded-full border border-solid',
+
+            // Size
+            'h-[10px] w-[10px]',
+
+            // Spacing
+            '-ml-[5px] -mt-[5px]',
+
+            // Colors
+            'border-white',
+
+            // Misc
+            'cursor-pointer opacity-85'
+        ]
+    },
+    hue: {
+        class: [
+            // Position
+            'absolute top-[8px] left-[167px]',
+
+            // Size
+            'h-[150px] w-[17px]',
+
+            // Opacity
+            'opacity-85'
+        ],
+        style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
+    },
+    hueHandle: {
+        class: [
+            // Position
+            'absolute left-0 -ml-[2px] -mt-[5px]',
+
+            // Size
+            'h-[10px] w-[21px]',
+
+            // Shape
+            'border-solid border-2',
+
+            // Misc
+            'cursor-pointer opacity-85'
+        ]
+    },
+    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/confirmdialog/index.js

@@ -0,0 +1,3 @@
+export default {
+    icon: 'w-8 h-8 text-[2rem] mr-2'
+};

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

@@ -0,0 +1,56 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-lg',
+            'shadow-lg',
+            'border-0',
+
+            // Positioning
+            'z-40 transform origin-center',
+            'mt-3 absolute left-0 top-0',
+
+            // Color
+            'dark:border',
+            'dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80',
+
+            // Before: Arrow
+            'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-surface-0 dark:before:border-b-surface-800'
+        ]
+    },
+    content: {
+        class: 'p-5 items-center flex'
+    },
+    icon: {
+        class: 'text-2xl mr-4'
+    },
+    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'
+        ]
+    },
+    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/contextmenu/index.js

@@ -0,0 +1,126 @@
+export default {
+    root: {
+        class: [
+            // Sizing and Shape
+            'min-w-[12rem]',
+            'rounded-md',
+            'shadow-md',
+
+            // Spacing
+            'py-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'text-surface-700 dark:text-white/80',
+            'dark:border dark:border-surface-700'
+        ]
+    },
+    rootList: {
+        class: [
+            // Spacings and Shape
+            'flex flex-col',
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    item: {
+        class: 'relative'
+    },
+    itemContent: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-none',
+            // Colors
+            'text-surface-700 dark:text-white/80',
+            {
+                '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)
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active,
+                'hover:bg-highlight-emphasis': context.active
+            },
+
+            // Disabled
+            { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+        ]
+    }),
+    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']
+    },
+    submenu: ({ props }) => ({
+        class: [
+            'flex flex-col',
+            // Size
+            'w-full sm:w-48',
+
+            // Spacing
+            'py-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-md',
+            'rounded-md',
+            'dark:border dark:border-surface-700',
+
+            // 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'
+        ]
+    }),
+    submenuIcon: {
+        class: ['ml-auto']
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    },
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-250'
+    }
+};