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

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

@@ -0,0 +1,234 @@
+import accordion from './accordion';
+import accordioncontent from './accordioncontent';
+import accordionheader from './accordionheader';
+import accordionpanel from './accordionpanel';
+import autocomplete from './autocomplete';
+import avatar from './avatar';
+import avatargroup from './avatargroup';
+import badge from './badge';
+import badgedirective from './badgedirective';
+import blockui from './blockui';
+import breadcrumb from './breadcrumb';
+import button from './button';
+import buttongroup from './buttongroup';
+import card from './card';
+import carousel from './carousel';
+import cascadeselect from './cascadeselect';
+import checkbox from './checkbox';
+import chip from './chip';
+import colorpicker from './colorpicker';
+import confirmdialog from './confirmdialog';
+import confirmpopup from './confirmpopup';
+import contextmenu from './contextmenu';
+import datatable from './datatable';
+import dataview from './dataview';
+import datepicker from './datepicker';
+import deferred from './deferred';
+import dialog from './dialog';
+import divider from './divider';
+import dock from './dock';
+import drawer from './drawer';
+import fieldset from './fieldset';
+import fileupload from './fileupload';
+import floatlabel from './floatlabel';
+import galleria from './galleria';
+import global from './global';
+import iconfield from './iconfield';
+import image from './image';
+import inplace from './inplace';
+import inputgroup from './inputgroup';
+import inputgroupaddon from './inputgroupaddon';
+import inputmask from './inputmask';
+import inputnumber from './inputnumber';
+import inputotp from './inputotp';
+import inputtext from './inputtext';
+import knob from './knob';
+import listbox from './listbox';
+import megamenu from './megamenu';
+import menu from './menu';
+import menubar from './menubar';
+import message from './message';
+import metergroup from './metergroup';
+import multiselect from './multiselect';
+import orderlist from './orderlist';
+import organizationchart from './organizationchart';
+import overlaybadge from './overlaybadge';
+import paginator from './paginator';
+import panel from './panel';
+import panelmenu from './panelmenu';
+import password from './password';
+import picklist from './picklist';
+import popover from './popover';
+import progressbar from './progressbar';
+import progressspinner from './progressspinner';
+import radiobutton from './radiobutton';
+import rating from './rating';
+import ripple from './ripple';
+import scrollpanel from './scrollpanel';
+import scrolltop from './scrolltop';
+import select from './select';
+import selectbutton from './selectbutton';
+import skeleton from './skeleton';
+import slider from './slider';
+import speeddial from './speeddial';
+import splitbutton from './splitbutton';
+import splitter from './splitter';
+import splitterpanel from './splitterpanel';
+import step from './step';
+import stepitem from './stepitem';
+import steplist from './steplist';
+import steppanels from './steppanels';
+import stepper from './stepper';
+import steps from './steps';
+import tab from './tab';
+import tablist from './tablist';
+import tabmenu from './tabmenu';
+import tabpanel from './tabpanel';
+import tabpanels from './tabpanels';
+import tabs from './tabs';
+import tabview from './tabview';
+import tag from './tag';
+import terminal from './terminal';
+import textarea from './textarea';
+import tieredmenu from './tieredmenu';
+import timeline from './timeline';
+import toast from './toast';
+import togglebutton from './togglebutton';
+import toggleswitch from './toggleswitch';
+import toolbar from './toolbar';
+import tooltip from './tooltip';
+import tree from './tree';
+import treeselect from './treeselect';
+import treetable from './treetable';
+
+export default {
+    global,
+    directives: {
+        badge: badgedirective,
+        ripple,
+        tooltip
+    },
+
+    //forms
+    autocomplete,
+    select,
+    dropdown: select,
+    inputnumber,
+    inputtext,
+    datepicker,
+    calendar: datepicker,
+    checkbox,
+    radiobutton,
+    toggleswitch,
+    inputswitch: toggleswitch,
+    selectbutton,
+    slider,
+    rating,
+    multiselect,
+    togglebutton,
+    cascadeselect,
+    listbox,
+    colorpicker,
+    inputgroup,
+    inputgroupaddon,
+    inputmask,
+    knob,
+    treeselect,
+    textarea,
+    password,
+    iconfield,
+    floatlabel,
+    inputotp,
+
+    //buttons
+    button,
+    buttongroup,
+    splitbutton,
+    speeddial,
+
+    //data
+    paginator,
+    datatable,
+    tree,
+    dataview,
+    organizationchart,
+    orderlist,
+    picklist,
+    treetable,
+    timeline,
+
+    //panels
+    accordion,
+    accordionpanel,
+    accordionheader,
+    accordioncontent,
+    panel,
+    fieldset,
+    card,
+    tabview,
+    divider,
+    toolbar,
+    scrollpanel,
+    splitter,
+    splitterpanel,
+    stepper,
+    steplist,
+    step,
+    stepitem,
+    steppanels,
+    deferred,
+    tab,
+    tabs,
+    tablist,
+    tabpanels,
+    tabpanel,
+
+    //file
+    fileupload,
+
+    //menu
+    contextmenu,
+    menu,
+    menubar,
+    steps,
+    tieredmenu,
+    breadcrumb,
+    panelmenu,
+    megamenu,
+    dock,
+    tabmenu,
+
+    //overlays
+    dialog,
+    popover,
+    sidebar: popover,
+    drawer,
+    overlaypanel: drawer,
+    confirmpopup,
+    confirmdialog,
+
+    //messages
+    message,
+    toast,
+
+    //media
+    carousel,
+    galleria,
+    image,
+
+    //misc
+    badge,
+    overlaybadge,
+    avatar,
+    avatargroup,
+    tag,
+    chip,
+    progressbar,
+    skeleton,
+    scrolltop,
+    terminal,
+    blockui,
+    metergroup,
+    inplace,
+    progressspinner
+};

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

@@ -0,0 +1,27 @@
+export default {
+    display: {
+        class: [
+            // Display
+            'inline',
+
+            // Spacing
+            'p-3',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-700 dark:text-white/80',
+
+            // States
+            'hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-700/80 dark:hover:text-white/80',
+
+            // Transitions
+            'transition',
+            'duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }
+};

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

@@ -0,0 +1,5 @@
+export default {
+    root: {
+        class: ['flex items-stretch', 'w-full']
+    }
+};

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

@@ -0,0 +1,28 @@
+export default {
+    root: {
+        class: [
+            // Flex
+            'flex items-center justify-center',
+
+            // Shape
+            'first:rounded-l-md',
+            'last:rounded-r-md',
+            'border-y',
+
+            'last:border-r',
+            'border-l',
+            'border-r-0',
+
+            // Space
+            'p-3',
+
+            // Size
+            'min-w-[3rem]',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-800',
+            'text-surface-600 dark:text-surface-400',
+            'border-surface-300 dark:border-surface-600'
+        ]
+    }
+};

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

@@ -0,0 +1,39 @@
+export default {
+    root: ({ context, props, parent }) => ({
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Spacing
+            'm-0 p-3',
+
+            // 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
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-primary': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled,
+                'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+            // Misc
+            'rounded-md',
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};

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

@@ -0,0 +1,167 @@
+export default {
+    root: ({ props, parent }) => ({
+        class: [
+            // Flex
+            'inline-flex',
+            'relative',
+            { 'flex-col': props.showButtons && props.buttonLayout == 'vertical' },
+            { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+            { 'w-full': props.fluid },
+
+            // Shape
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' && !props.showButtons },
+            { 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' && !props.showButtons },
+            { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            //Sizing
+            { '!w-16': props.showButtons && props.buttonLayout == 'vertical' }
+        ]
+    }),
+    pcInput: {
+        root: ({ parent, context }) => ({
+            class: [
+                // Font
+                // 'text-base leading-none',
+                // 'leading-[normal]',
+
+                // Display
+                'flex-auto',
+                { 'w-[1%]': parent.props.fluid },
+
+                //Text
+                { 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Spacing
+                'py-2 px-3',
+                'm-0',
+
+                // Shape
+                'rounded-md',
+                { 'rounded-l-none rounded-r-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                { 'border-0': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons },
+
+                // Colors
+                'text-surface-800 dark:text-white/80',
+                'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+                { 'bg-surface-0 dark:bg-surface-900': !context.disabled },
+                'border',
+                { 'border-surface-300 dark:border-surface-700': !parent.props.invalid },
+
+                // Invalid State
+                'invalid:focus:ring-red-200',
+                'invalid:hover:border-red-500',
+                { 'border-red-500 dark:border-red-400': parent.props.invalid },
+
+                // States
+                { 'hover:border-primary': !parent.props.invalid },
+                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10',
+                { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
+
+                // Filled State *for FloatLabel
+                { filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.state.d_modelValue !== null },
+
+                //Position
+                { 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout == 'vertical' }
+            ]
+        })
+    },
+    buttonGroup: ({ props }) => ({
+        class: [
+            'absolute',
+
+            // Flex
+            'flex',
+            'flex-col',
+
+            'top-px right-px',
+
+            { 'h-[calc(100%-2px)]': props.showButtons && props.buttonLayout === 'stacked' }
+        ]
+    }),
+    incrementButton: ({ props }) => ({
+        class: [
+            // Display
+            { 'flex flex-initial shrink-0': props.showButtons && props.buttonLayout === 'horizontal' },
+            { 'flex flex-auto': props.showButtons && props.buttonLayout === 'stacked' },
+
+            // Alignment
+            'items-center',
+            'justify-center',
+            'text-center align-bottom',
+
+            //Position
+            'relative',
+            { 'order-3': props.showButtons && props.buttonLayout === 'horizontal' },
+            { 'order-1': props.showButtons && props.buttonLayout === 'vertical' },
+
+            //Color
+            'text-primary-contrast',
+            'bg-primary',
+            'border-primary',
+
+            // Sizing
+            'w-[3rem]',
+            { 'px-4 py-3': props.showButtons && props.buttonLayout !== 'stacked' },
+            { 'p-0': props.showButtons && props.buttonLayout === 'stacked' },
+            { 'w-full': props.showButtons && props.buttonLayout === 'vertical' },
+
+            // Shape
+            'rounded-md',
+            { 'rounded-tl-none rounded-br-none rounded-bl-none': props.showButtons && props.buttonLayout == 'stacked' },
+            { 'rounded-bl-none rounded-tl-none': props.showButtons && props.buttonLayout == 'horizontal' },
+            { 'rounded-bl-none rounded-br-none': props.showButtons && props.buttonLayout == 'vertical' },
+
+            //States
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+            'hover:bg-primary-emphasis hover:border-primary-emphasis',
+
+            //Misc
+            'cursor-pointer overflow-hidden select-none'
+        ]
+    }),
+    incrementIcon: 'inline-block w-4 h-4',
+    decrementButton: ({ props }) => ({
+        class: [
+            // Display
+            { 'flex flex-initial shrink-0': props.showButtons && props.buttonLayout === 'horizontal' },
+            { 'flex flex-auto': props.showButtons && props.buttonLayout === 'stacked' },
+
+            // Alignment
+            'items-center',
+            'justify-center',
+            'text-center align-bottom',
+
+            //Position
+            'relative',
+            { 'order-1': props.showButtons && props.buttonLayout == 'horizontal' },
+            { 'order-3': props.showButtons && props.buttonLayout == 'vertical' },
+
+            //Color
+            'text-primary-contrast',
+            'bg-primary',
+            'border-primary',
+
+            // Sizing
+            'w-[3rem]',
+            { 'px-4 py-3': props.showButtons && props.buttonLayout !== 'stacked' },
+            { 'p-0': props.showButtons && props.buttonLayout == 'stacked' },
+            { 'w-full': props.showButtons && props.buttonLayout == 'vertical' },
+
+            // Shape
+            'rounded-md',
+            { 'rounded-tr-none rounded-tl-none rounded-bl-none': props.showButtons && props.buttonLayout == 'stacked' },
+            { 'rounded-tr-none rounded-br-none ': props.showButtons && props.buttonLayout == 'horizontal' },
+            { 'rounded-tr-none rounded-tl-none ': props.showButtons && props.buttonLayout == 'vertical' },
+
+            //States
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+            'hover:bg-primary-emphasis hover:border-primary-emphasis',
+
+            //Misc
+            'cursor-pointer overflow-hidden select-none'
+        ]
+    }),
+    decrementIcon: 'inline-block w-4 h-4'
+};

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

@@ -0,0 +1,10 @@
+export default {
+    root: {
+        class: [
+            // Alignment
+            'flex items-center',
+            'gap-2',
+            '[&_[data-pc-name=pcinput]]:w-10'
+        ]
+    }
+};

package/templates/nuxt/presets/lara/inputswitch/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-emphasis ': 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/inputtext/index.js

@@ -0,0 +1,54 @@
+export default {
+    root: ({ props, context, parent }) => ({
+        class: [
+            // Font
+            'leading-[normal]',
+
+            // Flex
+            { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+            // Spacing
+            'm-0',
+            { 'w-full': props.fluid },
+
+            // Size
+            {
+                'px-4 py-4': props.size == 'large',
+                'px-2 py-2': props.size == 'small',
+                'p-3': props.size == null
+            },
+
+            // Shape
+            { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+            { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+            { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            // Colors
+            'text-surface-800 dark:text-white/80',
+            '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
+            'invalid:focus:ring-red-200',
+            'invalid:hover:border-red-500',
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-primary': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled,
+                'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Filled State *for FloatLabel
+            { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+
+            // Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};

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

@@ -0,0 +1,44 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Misc
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    range: {
+        class: [
+            // Stroke
+            'stroke-current',
+
+            // Color
+            'stroke-surface-200 dark:stroke-surface-700',
+
+            // Fill
+            'fill-none',
+
+            // Transition
+            'transition duration-100 ease-in'
+        ]
+    },
+    value: {
+        class: [
+            // Animation
+            'animate-dash-frame',
+
+            // Color
+            'stroke-primary',
+
+            // Fill
+            'fill-none'
+        ]
+    },
+    text: {
+        class: [
+            // Text Style
+            'text-center text-xl',
+
+            // Color
+            'fill-surface-600 dark:fill-surface-200'
+        ]
+    }
+};