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

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

@@ -0,0 +1,96 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex gap-4',
+
+            { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' }
+        ]
+    }),
+    meters: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex',
+
+            { 'flex-col': props.orientation === 'vertical' },
+
+            // Sizing
+            { 'w-2 h-full': props.orientation === 'vertical' },
+            { 'h-2': props.orientation === 'horizontal' },
+
+            // Colors
+            'bg-gray-200 dark:bg-gray-700',
+
+            // Border Radius
+            'rounded-lg'
+        ]
+    }),
+    meter: ({ props }) => ({
+        class: [
+            // Shape
+            'border-0',
+
+            // Rounded Corners - Horizontal
+            {
+                'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
+            },
+
+            // Rounded Corners - Vertical
+            {
+                'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
+            },
+
+            // Colors
+            'bg-primary'
+        ]
+    }),
+    labelList: ({ props }) => ({
+        class: [
+            // Display & Flexbox
+            'flex flex-wrap',
+
+            { 'gap-4': props.labelOrientation === 'horizontal' },
+
+            { 'gap-2': props.labelOrientation === 'vertical' },
+
+            { 'flex-col': props.labelOrientation === 'vertical' },
+
+            // Conditional Alignment - Horizontal
+            {
+                'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
+                'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
+            },
+
+            // Conditional Alignment - Vertical
+            {
+                'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
+            },
+
+            // List Styling
+            'm-0 p-0 list-none'
+        ]
+    }),
+    label: {
+        class: [
+            // Flexbox
+            'inline-flex',
+            'items-center',
+            'gap-2'
+        ]
+    },
+    labelMarker: {
+        class: [
+            // Display
+            'inline-flex',
+
+            // Background Color
+            'bg-primary',
+
+            // Size
+            'w-2 h-2',
+
+            // Rounded Shape
+            'rounded-full'
+        ]
+    }
+};

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

@@ -0,0 +1,201 @@
+export default {
+    root: ({ props, state }) => ({
+        class: [
+            // Display and Position
+            'inline-flex',
+            'relative',
+
+            // Shape
+            'rounded-md',
+
+            // Color and Background
+            '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 },
+
+            // Transitions
+            'transition-all',
+            'duration-200',
+
+            // States
+            { 'hover:border-primary': !props.invalid },
+            { 'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': state.focused },
+
+            // Misc
+            'cursor-pointer',
+            'select-none',
+            { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
+        ]
+    }),
+    labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
+    label: ({ props }) => ({
+        class: [
+            'leading-[normal]',
+            'block ',
+
+            // Spacing
+            {
+                'p-3': props.display !== 'chip',
+                'py-3 px-3': props.display === 'chip' && !props?.modelValue?.length,
+                'py-[0.375rem] px-3': props.display === 'chip' && props?.modelValue?.length > 0
+            },
+
+            // Color
+            { 'text-surface-800 dark:text-white/80': props.modelValue?.length, 'text-surface-400 dark:text-surface-500': !props.modelValue?.length },
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
+        ]
+    }),
+    dropdown: {
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+
+            // Size
+            'w-12',
+
+            // Shape
+            'rounded-tr-md',
+            'rounded-br-md'
+        ]
+    },
+    overlay: {
+        class: [
+            // Position
+
+            // Shape
+            'border-0 dark:border',
+            'rounded-md',
+            'shadow-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-800 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    header: {
+        class: [
+            'flex items-center justify-between',
+            // Spacing
+            'py-3 px-5 gap-2',
+            'm-0',
+
+            //Shape
+            'border-b',
+            'rounded-tl-md',
+            'rounded-tr-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-100 dark:bg-surface-800',
+            'border-surface-300 dark:border-surface-700',
+
+            '[&_[data-pc-name=pcfiltercontainer]]:!flex-auto',
+            '[&_[data-pc-name=pcfilter]]:w-full'
+        ]
+    },
+    listContainer: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+
+            // Misc
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'py-3 list-none m-0'
+    },
+    option: ({ context }) => ({
+        class: [
+            // Font
+            'font-normal',
+            'leading-none',
+
+            // Flexbox
+            'flex items-center',
+
+            // Position
+            'relative',
+
+            // Shape
+            'border-0',
+            'rounded-none',
+
+            // Spacing
+            'm-0',
+            'py-3 px-5 gap-2',
+
+            // Color
+            { 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
+            { 'bg-surface-200 dark:bg-surface-600/60 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:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80': context.focused && !context.selected },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200',
+
+            // Misc
+            'cursor-pointer',
+            'overflow-hidden',
+            'whitespace-nowrap'
+        ]
+    }),
+    optionGroup: {
+        class: [
+            //Font
+            'font-bold',
+
+            // Spacing
+            'm-0',
+            'p-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-600/80',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    emptyMessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    loadingIcon: {
+        class: 'text-surface-400 dark:text-surface-500 animate-spin'
+    },
+    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/orderlist/index.js

@@ -0,0 +1,13 @@
+export default {
+    root: 'flex',
+    controls: {
+        class: [
+            // Flexbox & Alignment
+            'flex flex-col justify-center gap-2',
+
+            // Spacing
+            'p-5'
+        ]
+    },
+    container: 'flex-auto'
+};

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

@@ -0,0 +1,137 @@
+export default {
+    table: {
+        class: [
+            // Spacing & Position
+            'mx-auto my-0',
+
+            // Table Style
+            'border-spacing-0 border-separate'
+        ]
+    },
+    cell: {
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3'
+        ]
+    },
+    node: ({ context }) => ({
+        class: [
+            'relative inline-block',
+
+            // Spacing
+            'p-5',
+
+            // Shape
+            'border',
+
+            // Color
+            {
+                'text-surface-600 dark:text-white/80': !context?.selected,
+                'bg-surface-0 dark:bg-surface-800': !context?.selected,
+                'border-surface-200 dark:border-surface-700': !context?.selected,
+                'bg-highlight': context?.selected,
+                'border-primary-200 dark:border-primary-600': context?.selected
+            },
+
+            // States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-700': context?.selectable && !context?.selected,
+                'hover:bg-highlight-emphasis': context?.selectable && context?.selected
+            },
+
+            { 'cursor-pointer': context?.selectable }
+        ]
+    }),
+    lineCell: {
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3'
+        ]
+    },
+    connectorDown: {
+        class: [
+            // Spacing
+            'mx-auto my-0',
+
+            // Size
+            'w-px h-[20px]',
+
+            // Color
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    },
+    connectorLeft: ({ context }) => ({
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3',
+
+            // Shape
+            'rounded-none border-r',
+            { 'border-t': context.lineTop },
+
+            // Color
+            'border-surface-200 dark:border-surface-700'
+        ]
+    }),
+    connectorRight: ({ context }) => ({
+        class: [
+            // Alignment
+            'text-center align-top',
+
+            // Spacing
+            'py-0 px-3',
+
+            // Shape
+            'rounded-none',
+
+            // Color
+            { 'border-t border-surface-200 dark:border-surface-700': context.lineTop }
+        ]
+    }),
+    nodeCell: {
+        class: 'text-center align-top py-0 px-3'
+    },
+    nodeToggleButton: {
+        class: [
+            // Position
+            'absolute bottom-[-0.75rem] left-2/4 -ml-3',
+            'z-20',
+
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Size
+            'w-6 h-6',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'bg-inherit text-inherit',
+
+            // Focus
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'cursor-pointer no-underline select-none'
+        ]
+    },
+    nodeToggleButtonIcon: {
+        class: [
+            // Position
+            'relative inline-block',
+
+            // Size
+            'w-4 h-4'
+        ]
+    }
+};

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

@@ -0,0 +1,18 @@
+export default {
+    root: {
+        class: [
+            'relative',
+            '[&>[data-pc-name=pcbadge]]:absolute',
+            '[&>[data-pc-name=pcbadge]]:top-0',
+            '[&>[data-pc-name=pcbadge]]:right-0',
+            '[&>[data-pc-name=pcbadge]]:translate-x-1/2',
+            '[&>[data-pc-name=pcbadge]]:-translate-y-1/2',
+            '[&>[data-pc-name=pcbadge]]:m-0',
+            '[&>[data-pc-name=pcbadge]]:origin-[100%_0]',
+            '[&>[data-pc-name=pcbadge]]:outline',
+            '[&>[data-pc-name=pcbadge]]:outline-[2px]',
+            '[&>[data-pc-name=pcbadge]]:outline-surface-0',
+            'dark:[&>[data-pc-name=pcbadge]]:outline-surface-900'
+        ]
+    }
+};

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

@@ -0,0 +1,178 @@
+export default {
+    root: {
+        class: [
+            // Flex & Alignment
+            'flex items-center justify-center flex-wrap',
+
+            // Spacing
+            'px-4 py-2',
+
+            // Shape
+            'border-0',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-500 dark:text-white/60'
+        ]
+    },
+    first: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    prev: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    next: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    last: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/60',
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    page: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Flex & Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full dark:rounded-md',
+
+            // Size
+            'min-w-[3rem] h-12 m-[0.143rem]',
+            'leading-none',
+
+            // Color
+            'text-surface-500 dark:text-white/80',
+            {
+                'bg-highlight': context.active
+            },
+
+            // State
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/70': !context.disabled && !context.active,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50': !context.disabled
+            },
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'user-none overflow-hidden',
+            { 'cursor-default pointer-events-none opacity-60': context.disabled }
+        ]
+    }),
+    contentStart: 'mr-auto',
+    contentEnd: 'ml-auto'
+};