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

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

@@ -0,0 +1,308 @@
+export default {
+    content: ({ parent, props }) => ({
+        class: [
+            'flex',
+            {
+                'flex-col': props.fullScreen
+            },
+            {
+                'flex-col': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+                'flex-row': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    itemsContainer: ({ parent, props }) => ({
+        class: [
+            'group',
+            'flex relative',
+            {
+                'grow shrink w-0 justify-center': props.fullScreen
+            },
+            {
+                'flex-col': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'top',
+                'flex-row items-center': parent.props.indicatorsPosition === 'left' || parent.props.indicatorsPosition === 'right'
+            },
+            {
+                'order-2': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left',
+                'flex-row': parent.props.thumbnailsPosition === 'right'
+            }
+        ]
+    }),
+
+    items: ({ parent }) => ({
+        class: [
+            'flex h-full relative',
+            {
+                'order-1': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'right',
+                'order-2': parent.props.indicatorsPosition === 'top' || parent.props.indicatorsPosition === 'left'
+            }
+        ]
+    }),
+    item: {
+        class: [
+            // Flex
+            'flex justify-center items-center h-full w-full',
+
+            // Sizing
+            'h-full w-full'
+        ]
+    },
+    thumbnails: ({ parent }) => ({
+        class: [
+            // Flex
+            'flex flex-col shrink-0',
+
+            {
+                'order-1': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left'
+            },
+
+            // Misc
+            'overflow-auto'
+        ]
+    }),
+    thumbnailContent: ({ parent }) => ({
+        class: [
+            // Flex
+            'flex',
+
+            // Spacing
+            'p-4',
+
+            // Colors
+            'bg-black/90',
+
+            {
+                'flex-row': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+                'flex-col grow': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    thumbnailPrevButton: {
+        class: [
+            // Positioning
+            'self-center relative',
+
+            // Display & Flexbox
+            'flex shrink-0 justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effects
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    thumbnailsViewport: {
+        class: 'overflow-hidden w-full'
+    },
+    thumbnailItems: ({ parent }) => ({
+        class: [
+            'flex',
+            {
+                'flex-col h-full': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    thumbnailItem: ({ parent }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'grow shrink-0',
+
+            // Sizing
+            {
+                'w-full md:w-[25%] lg:w-[20%]': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom'
+            },
+
+            // Misc
+            'overflow-auto',
+            'cursor-pointer',
+            'opacity-50',
+
+            // States
+            '[&[data-p-active="true"]]:opacity-100',
+            'hover:opacity-100',
+
+            // Transitions
+            'transition-opacity duration-300'
+        ]
+    }),
+    thumbnailNextButton: {
+        class: [
+            // Positioning
+            'self-center relative',
+
+            // Display & Flexbox
+            'flex shrink-0 justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effects
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    indicatorList: ({ parent }) => ({
+        class: [
+            // flex
+            'flex items-center justify-center',
+
+            // Spacing
+            'p-4',
+
+            // Indicators Position
+            {
+                'order-2': parent.props.indicatorsPosition == 'bottom',
+                'order-1': parent.props.indicatorsPosition == 'top',
+                'order-1 flex-col': parent.props.indicatorsPosition == 'left',
+                'flex-col order-2': parent.props.indicatorsPosition == 'right'
+            },
+            {
+                'absolute z-10 bg-black/50': parent.props.showIndicatorsOnItem
+            },
+
+            {
+                'bottom-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'bottom' && parent.props.showIndicatorsOnItem,
+                'top-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'top' && parent.props.showIndicatorsOnItem,
+                'left-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'left' && parent.props.showIndicatorsOnItem,
+                'right-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'right' && parent.props.showIndicatorsOnItem
+            }
+        ]
+    }),
+    indicator: ({ parent }) => ({
+        class: [
+            {
+                'mr-2': parent.props.indicatorsPosition == 'bottom' || parent.props.indicatorsPosition == 'top',
+                'mb-2': parent.props.indicatorsPosition == 'left' || parent.props.indicatorsPosition == 'right'
+            }
+        ]
+    }),
+    indicatorButton: ({ context }) => ({
+        class: [
+            // Size
+            'w-4 h-4',
+
+            // Appearance
+            'rounded-full transition duration-200',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Conditional Appearance: Not Highlighted
+            { 'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted },
+
+            // Conditional Appearance: Highlighted
+            { 'bg-primary hover:bg-primary-emphasis': context.highlighted }
+        ]
+    }),
+    mask: {
+        class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black/90']
+    },
+    closeButton: {
+        class: [
+            // Positioning
+            '!absolute top-0 right-0',
+
+            // Display & Flexbox
+            'flex justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effect
+            'hover:text-white hover:bg-surface-0/10',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    closeIcon: {
+        class: 'w-6 h-6'
+    },
+    prevButton: ({ parent }) => ({
+        class: [
+            // Display & Flexbox
+            'inline-flex justify-center items-center overflow-hidden',
+
+            // Appearance
+            'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+            {
+                'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+            },
+
+            // Spacing
+            'mx-2',
+
+            // Positioning
+            'top-1/2 mt-[-0.5rem] left-0',
+            {
+                '!absolute': !parent.state.containerVisible && parent.props.showItemNavigators,
+                '!fixed': parent.state.containerVisible
+            },
+
+            // Hover Effect
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    }),
+    nextButton: ({ parent }) => ({
+        class: [
+            // Display & Flexbox
+            'inline-flex justify-center items-center overflow-hidden',
+
+            // Appearance
+            'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+            {
+                'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+            },
+
+            // Spacing
+            'mx-2',
+
+            // Positioning
+            'top-1/2 mt-[-0.5rem] right-0',
+            {
+                '!absolute': !parent.state.containerVisible && parent.props.showItemNavigators,
+                '!fixed': parent.state.containerVisible
+            },
+
+            // Hover Effect
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    }),
+    caption: {
+        class: [
+            // Positioning
+            'absolute bottom-0 left-0 w-full',
+
+            // Appearance
+            'bg-black/50 text-white p-4'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-all duration-150 ease-in-out',
+        leaveActiveClass: 'transition-all duration-150 ease-in',
+        leaveToClass: 'opacity-0 scale-75'
+    }
+};

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

@@ -0,0 +1,90 @@
+export default {
+    css: `
+    *[data-pd-ripple="true"]{
+        overflow: hidden;
+        position: relative;
+    }
+    span[data-p-ink-active="true"]{
+        animation: ripple 0.4s linear;
+    }
+    @keyframes ripple {
+        100% {
+            opacity: 0;
+            transform: scale(2.5);
+        }
+    }
+
+    .progress-spinner-circle {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: 0;
+        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    @keyframes p-progress-spinner-dash{
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -35px;
+        }
+        100% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -124px;
+        }
+    }
+    @keyframes p-progress-spinner-color {
+        100%, 0% {
+            stroke: #ff5757;
+        }
+        40% {
+            stroke: #696cff;
+        }
+        66% {
+            stroke: #1ea97c;
+        }
+        80%, 90% {
+            stroke: #cc8925;
+        }
+    }
+
+    .progressbar-value-animate::after {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    }
+    .progressbar-value-animate::before {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+    @keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    .p-fadein {
+        animation: p-fadein 250ms linear;
+    }
+
+    @keyframes p-fadein {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+`
+};

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

@@ -0,0 +1,27 @@
+export default {
+    root: {
+        class: [
+            'relative',
+
+            '[&>[data-pc-name=inputicon]]:absolute',
+            '[&>[data-pc-name=inputicon]]:top-1/2',
+            '[&>[data-pc-name=inputicon]]:-mt-2',
+            '[&>[data-pc-name=inputicon]]:text-surface-900/60 dark:[&>[data-pc-name=inputicon]]:text-white/60',
+
+            '[&>[data-pc-name=inputicon]:first-child]:left-3',
+            '[&>[data-pc-name=inputicon]:last-child]:right-3',
+
+            '[&>[data-pc-name=inputtext]:first-child]:pr-10',
+            '[&>[data-pc-name=inputtext]:last-child]:pl-10',
+
+            // filter
+            '[&>[data-pc-extend=inputicon]]:absolute',
+            '[&>[data-pc-extend=inputicon]]:top-1/2',
+            '[&>[data-pc-extend=inputicon]]:-mt-2',
+            '[&>[data-pc-extend=inputicon]]:text-surface-900/60 dark:[&>[data-pc-extend=inputicon]]:text-white/60',
+
+            '[&>[data-pc-extend=inputicon]:first-child]:left-3',
+            '[&>[data-pc-extend=inputicon]:last-child]:right-3'
+        ]
+    }
+};

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

@@ -0,0 +1,206 @@
+export default {
+    root: {
+        class: 'relative inline-block'
+    },
+    previewMask: {
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+
+            // Positioning
+            'absolute',
+
+            // Shape
+            'inset-0 opacity-0 transition-opacity duration-300',
+
+            // Color
+            'bg-transparent text-surface-100',
+
+            // States
+            'hover:opacity-100 hover:cursor-pointer hover:bg-black/50 hover:bg-opacity-50'
+        ]
+    },
+    mask: {
+        class: [
+            // Flexbox & Alignment
+            'flex items-center justify-center',
+
+            // Positioning
+            'fixed top-0 left-0',
+
+            // Sizing
+            'w-full h-full',
+
+            // Color
+            'bg-black/90'
+        ]
+    },
+    toolbar: {
+        class: [
+            // Flexbox
+            'flex',
+
+            // Positioning
+            'absolute top-0 right-0',
+
+            // Spacing
+            'p-4'
+        ]
+    },
+    rotateRightButton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    rotateRightIcon: {
+        class: 'w-6 h-6'
+    },
+    rotateLeftButton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    rotateLeftIcon: {
+        class: 'w-6 h-6'
+    },
+    zoomOutButton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    zoomOutIcon: {
+        class: 'w-6 h-6'
+    },
+    zoomInButton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    zoomInIcon: {
+        class: 'w-6 h-6'
+    },
+    closeButton: {
+        class: [
+            'z-20',
+
+            // Flexbox & Alignment
+            'flex justify-center items-center',
+
+            // Size
+            'w-12 h-12',
+
+            // Spacing
+            'mr-2',
+
+            // Shape
+            'rounded-full',
+
+            // Color
+            'text-white bg-transparent',
+
+            // States
+            'hover:text-white hover:bg-surface-0/10',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200 ease-in-out'
+        ]
+    },
+    closeIcon: {
+        class: 'w-6 h-6'
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-all duration-150 ease-in-out',
+        leaveActiveClass: 'transition-all duration-150 ease-in',
+        leaveToClass: 'opacity-0 scale-75'
+    }
+};