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

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

@@ -0,0 +1,86 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Positioning
+            'absolute z-1',
+            {
+                'left-0 bottom-0 w-full': props.position == 'bottom',
+                'left-0 top-0 w-full': props.position == 'top',
+                'left-0 top-0 h-full': props.position == 'left',
+                'right-0 top-0 h-full': props.position == 'right'
+            },
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Interactivity
+            'pointer-events-none'
+        ]
+    }),
+    listContainer: {
+        class: [
+            // Flexbox
+            'flex',
+
+            // Shape & Border
+            'rounded-md',
+
+            // Color
+            'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
+            'backdrop-blur-sm',
+
+            // Spacing
+            'p-2',
+
+            // Misc
+            'pointer-events-auto'
+        ]
+    },
+    list: ({ props }) => ({
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+            {
+                'flex-col': props.position == 'left' || props.position == 'right'
+            },
+
+            // List Style
+            'm-0 p-0 list-none',
+
+            // Shape
+            'outline-none'
+        ]
+    }),
+    item: ({ props, context, instance }) => ({
+        class: [
+            // Spacing & Shape
+            'p-2 rounded-md',
+
+            // Positioning & Hover States
+            {
+                'origin-bottom': props.position == 'bottom',
+                'origin-top': props.position == 'top',
+                'origin-left': props.position == 'left',
+                'origin-right': props.position == 'right'
+            },
+
+            // Transitions & Transform
+            'transition-all duration-200 ease-cubic-bezier-will-change-transform transform'
+        ]
+    }),
+    itemLink: {
+        class: [
+            // Flexbox & Alignment
+            'flex flex-col items-center justify-center',
+
+            // Position
+            'relative',
+
+            // Size
+            'w-16 h-16',
+
+            // Misc
+            'cursor-default overflow-hidden'
+        ]
+    }
+};

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

@@ -0,0 +1,149 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex flex-col',
+
+            // Position
+            'relative',
+            { '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full' },
+
+            // Size
+            {
+                'h-full w-80': props.position == 'left' || props.position == 'right',
+                'h-auto w-full': props.position == 'top' || props.position == 'bottom'
+            },
+
+            // Shape
+            'border-0 dark:border',
+            'shadow-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+            'dark:border-surface-700',
+
+            // Transitions
+            'transition-transform',
+            'duration-300',
+
+            // Misc
+            'pointer-events-auto'
+        ]
+    }),
+    header: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+            'shrink-0',
+
+            // Spacing
+            'p-5',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    title: {
+        class: ['font-bold text-lg']
+    },
+    icons: {
+        class: ['flex items-center']
+    },
+    closeButton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-8 h-8',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    closeButtonIcon: {
+        class: [
+            // Display
+            'inline-block',
+
+            // Size
+            'w-4',
+            'h-4'
+        ]
+    },
+    content: {
+        class: [
+            // Spacing and Size
+            'p-5',
+            'pt-0',
+            'h-full',
+            'w-full',
+
+            // Growth and Overflow
+            'grow',
+            'overflow-y-auto'
+        ]
+    },
+    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: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'bottom'
+            ? {
+                  enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'left'
+            ? {
+                  enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
+                  leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : props.position === 'right'
+            ? {
+                  enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : {
+                  enterFromClass: 'opacity-0 mask-active',
+                  enterActiveClass: 'transition-opacity duration-400 ease-in',
+                  leaveActiveClass: 'transition-opacity duration-400 ease-in',
+                  leaveToClass: 'opacity-0 mask-active'
+              };
+    }
+};

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

@@ -0,0 +1,84 @@
+export default {
+    root: {
+        class: [
+            'block',
+
+            // Spacing
+            'px-4 pt-2 py-3',
+            'inline-size-min',
+
+            // Shape
+            'rounded-md',
+            // Color
+            'border border-surface-200 dark:border-surface-700',
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    legend: ({ props }) => ({
+        class: [
+            // Font
+            'font-bold',
+            'leading-none',
+
+            //Spacing
+            { 'p-0': props.toggleable, 'p-5': !props.toggleable },
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'text-surface-700 dark:text-surface-0/80',
+            'border border-surface-200 dark:border-surface-700',
+            'bg-surface-50 dark:bg-surface-900',
+
+            // Transition
+            'transition-none',
+
+            // States
+            { 'hover:bg-surface-100 hover:border-surface-200 hover:text-surface-900 dark:hover:text-surface-0/80 dark:hover:bg-surface-800/80': props.toggleable }
+        ]
+    }),
+    toggleButton: ({ props }) => ({
+        class: [
+            // Alignments
+            'flex items-center justify-center',
+            'relative',
+
+            //Spacing
+            { 'p-5': props.toggleable },
+
+            // Shape
+            { 'rounded-md': props.toggleable },
+
+            // Color
+            { 'text-surface-700 dark:text-surface-200 hover:text-surface-900': props.toggleable },
+
+            // States
+            { 'hover:text-surface-900 dark:hover:text-surface-100': props.toggleable },
+            { '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': props.toggleable },
+
+            // Misc
+            {
+                'transition-none cursor-pointer overflow-hidden select-none': props.toggleable
+            }
+        ]
+    }),
+    toggleIcon: {
+        class: 'mr-2 inline-block'
+    },
+    legendLabel: {
+        class: 'flex items-center justify-center leading-none'
+    },
+    content: {
+        class: 'p-5'
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+};

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

@@ -0,0 +1,95 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            {
+                'flex flex-wrap items-center justify-center gap-2': props.mode === 'basic'
+            }
+        ]
+    }),
+    input: {
+        class: 'hidden'
+    },
+    header: {
+        class: [
+            // Flexbox
+            'flex',
+            'flex-wrap',
+
+            // Colors
+            'bg-surface-50',
+            'dark:bg-surface-800',
+            'text-surface-700',
+            'dark:text-white/80',
+
+            // Spacing
+            'p-5',
+            'gap-2',
+
+            // Borders
+            'border',
+            'border-solid',
+            'border-surface-200',
+            'dark:border-surface-700',
+            'border-b-0',
+
+            // Shape
+            'rounded-tr-lg',
+            'rounded-tl-lg'
+        ]
+    },
+    content: {
+        class: [
+            // Position
+            'relative',
+
+            // Colors
+            'bg-surface-0',
+            'dark:bg-surface-900',
+            'text-surface-700',
+            'dark:text-white/80',
+
+            // Spacing
+            'p-8',
+
+            // Borders
+            'border',
+            'border-surface-200',
+            'dark:border-surface-700',
+
+            // Shape
+            'rounded-b-lg',
+
+            //ProgressBar
+            '[&>[data-pc-name=pcprogressbar]]:absolute',
+            '[&>[data-pc-name=pcprogressbar]]:w-full',
+            '[&>[data-pc-name=pcprogressbar]]:top-0',
+            '[&>[data-pc-name=pcprogressbar]]:left-0',
+            '[&>[data-pc-name=pcprogressbar]]:h-1'
+        ]
+    },
+    file: {
+        class: [
+            // Flexbox
+            'flex',
+            'items-center',
+            'flex-wrap',
+
+            // Spacing
+            'p-4',
+            'mb-2',
+            'last:mb-0',
+
+            // Borders
+            'border',
+            'border-surface-200',
+            'dark:border-surface-700',
+            'gap-2',
+
+            // Shape
+            'rounded'
+        ]
+    },
+    fileThumbnail: 'shrink-0',
+    fileName: 'mb-2 break-all',
+    fileSize: 'mr-2'
+};

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

@@ -0,0 +1,26 @@
+export default {
+    root: {
+        class: [
+            'block relative',
+
+            // Base Label Appearance
+            '[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
+            '[&>*:last-child]:absolute',
+            '[&>*:last-child]:top-1/2',
+            '[&>*:last-child]:-translate-y-1/2',
+            '[&>*:last-child]:left-3',
+            '[&>*:last-child]:pointer-events-none',
+            '[&>*:last-child]:transition-all',
+            '[&>*:last-child]:duration-200',
+            '[&>*:last-child]:ease',
+
+            // Focus Label Appearance
+            '[&>*:last-child]:has-[:focus]:-top-3',
+            '[&>*:last-child]:has-[:focus]:text-sm',
+
+            // Filled Input Label Appearance
+            '[&>*:last-child]:has-[.filled]:-top-3',
+            '[&>*:last-child]:has-[.filled]:text-sm'
+        ]
+    }
+};