Move to primevue-tailwind

* Add Aura tailwind passthrough

* convert to typescript

* Rename export to Classic

* Use v4 preset

* Fix card style

* Fix menubar style

* Fix select style

* Fix toggleswitch style

* Fix tab style

* Fix toggle button style

* Fix button--info style

* Fix button--primary style

* Fix datatable style

* Fix checkbox style

* Additional fixes

* Fix contextmenu style

* Fix input styles

* Move to primevue tailwind presets

packages/primevue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caido/primevue",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Primevue themes for Caido",
   "main": "dist/primevue.mjs",
   "types": "dist/types/index.d.ts",
@@ -18,8 +18,5 @@
   "devDependencies": {
     "typescript": "5.5.4",
     "vite": "5.4.0"
-  },
-  "dependencies": {
-    "@primevue/themes": "^4.0.4"
   }
 }

packages/primevue/src/classic/accordion/index.ts

@@ -0,0 +1,74 @@
+export default {
+    // For PrimeVue version 3
+    accordiontab: {
+        root: {
+            class: ['mb-0', 'border-b border-surface-200 dark:border-surface-700']
+        },
+        header: ({ props }) => ({
+            class: [
+                // State
+                { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
+            ]
+        }),
+        headerAction: {
+            class: [
+                //Font
+                'font-semibold',
+                'leading-none',
+
+                // Alignments
+                'flex justify-between items-center',
+                'flex-row-reverse',
+                'relative',
+
+                // Sizing
+                'p-[1.125rem]',
+
+                // Shape
+                'rounded-md',
+                'border-0',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-600 dark:text-surface-0/80',
+
+                // Transition
+                'transition duration-200 ease-in-out',
+                'transition-shadow duration-200',
+
+                // States
+                'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300', // Focus
+
+                // Misc
+                'cursor-pointer no-underline select-none'
+            ]
+        },
+        headerIcon: ({ context }) => ({
+            class: ['inline-block ml-2', { 'text-surface-900 dark:text-surface-0': context.active }]
+        }),
+        headerTitle: {
+            class: 'leading-none'
+        },
+        content: {
+            class: [
+                // Spacing
+                'p-[1.125rem] pt-0',
+
+                //Shape
+                'border-0 rounded-none',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-900',
+                'text-surface-600 dark:text-surface-0/70'
+            ]
+        },
+        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'
+        }
+    }
+};

packages/primevue/src/classic/accordioncontent/index.ts

@@ -0,0 +1,3 @@
+export default {
+    content: 'p-5 pt-0 bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-surface-0/70'
+};

packages/primevue/src/classic/accordionheader/index.ts

@@ -0,0 +1,14 @@
+export default {
+    root: ({ context }) => ({
+        class: [
+            'flex items-center justify-between bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-surface-0/70 p-[1.125rem] font-semibold outline-transparent',
+            {
+                'focus-visible:outline-offset-2 focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400': !context.disabled
+            },
+            {
+                'hover:text-surface-700 dark:hover:text-surface-0': !context.disabled
+            }
+        ]
+    }),
+    toggleIcon: 'inline-block text-surface-900 dark:text-surface-0 w-4 h-4'
+};

packages/primevue/src/classic/accordionpanel/index.ts

@@ -0,0 +1,18 @@
+export default {
+    root: ({ props, context }) => ({
+        class: [
+            'flex flex-col border-b border-surface-200 dark:border-surface-700',
+            {
+                '[&>[data-pc-name=accordionheader]]:select-none [&>[data-pc-name=accordionheader]]:pointer-events-none [&>[data-pc-name=accordionheader]]:cursor-default [&>[data-pc-name=accordionheader]]:opacity-60': props?.disabled,
+                '[&>[data-pc-name=accordionheader]]:text-surface-700 dark:[&>[data-pc-name=accordionheader]]:text-surface-100 hover:[&>[data-pc-name=accordionheader]]:text-surface-800 dark:hover:[&>[data-pc-name=accordionheader]]:text-surface-0':
+                    !props.disabled && context.active,
+                '[&>[data-pc-section=toggleicon]]:text-surface-700 dark:[&>[data-pc-section=toggleicon]]:text-surface-100 hover:[&>[data-pc-section=toggleicon]]:text-surface-800 dark:hover:[&>[data-pc-section=toggleicon]]:text-surface-0':
+                    !props.disabled && context.active,
+                '[&:last-child>[data-pc-name=accordioncontent]>[data-pc-section=content]]:rounded-b-md': !props.disabled && context.active,
+                '[&:last-child>[data-pc-name=accordionheader]]:rounded-b-md': !props.disabled && !context.active
+            },
+            '[&:nth-child(n+2)>[data-pc-name=accordionheader]]:border-t-0',
+            '[&:first-child>[data-pc-name=accordionheader]]:rounded-t-md'
+        ]
+    })
+};

packages/primevue/src/classic/autocomplete/index.ts

@@ -0,0 +1,188 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Flex
+            {
+                flex: props.fluid,
+                'inline-flex': !props.fluid
+            },
+
+            // Size
+            { 'w-full': props.multiple },
+            { '[&>input]:!rounded-r-none': props.dropdown },
+
+            // Color
+            'text-surface-900 dark:text-surface-0',
+
+            //States
+            {
+                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    inputMultiple: ({ props, state }) => ({
+        class: [
+            // Font
+            'leading-none',
+
+            // Flex
+            'flex items-center flex-wrap',
+            'gap-2',
+
+            // Spacing
+            'm-0 list-none',
+            'py-1 px-1',
+
+            // Size
+            'w-full',
+
+            // Shape
+            'appearance-none rounded-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+            'border',
+            { 'border-surface-300 dark:border-surface-700': !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-surface-400 dark:hover:border-surface-700': !props.invalid },
+            { 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
+
+            // Transition
+            'transition duration-200 ease-in-out',
+
+            // Misc
+            'cursor-text overflow-hidden'
+        ]
+    }),
+    inputToken: {
+        class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
+    },
+    inputChip: {
+        class: 'flex-auto inline-flex pt-1 pb-1'
+    },
+    input: {
+        class: 'border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full'
+    },
+    dropdown: {
+        class: [
+            'relative',
+
+            // Alignments
+            'items-center inline-flex justify-center text-center align-bottom',
+
+            // Shape
+            'rounded-r-md',
+
+            // Size
+            'py-2 leading-none',
+            'w-10',
+
+            // Colors
+            'text-primary-contrast',
+            'bg-primary',
+            'border border-primary',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 ',
+            'hover:bg-primary-emphasis hover:border-primary-emphasis',
+            'focus:ring-primary-500 dark:focus:ring-primary-400'
+        ]
+    },
+    loader: {
+        class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin']
+    },
+    overlay: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+
+            // Shape
+            'border border-surface-300 dark:border-surface-700',
+            'rounded-md',
+            'shadow-md',
+
+            // Size
+            'overflow-auto'
+        ]
+    },
+    list: {
+        class: 'p-1 list-none m-0'
+    },
+    option: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Spacing
+            'm-0 px-3 py-2',
+            'first:mt-0 mt-[2px]',
+
+            // Shape
+            'border-0 rounded',
+
+            // Colors
+            {
+                'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+                'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+                'bg-highlight': context.selected
+            },
+
+            //States
+            { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+            { 'hover:bg-highlight-emphasis': context.selected },
+            { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+            // Transition
+            'transition-shadow duration-200',
+
+            // Misc
+            'cursor-pointer overflow-hidden whitespace-nowrap'
+        ]
+    }),
+    optionGroup: {
+        class: [
+            'font-semibold',
+
+            // Spacing
+            'm-0 py-2 px-3',
+
+            // Colors
+            'text-surface-400 dark:text-surface-500',
+
+            // Misc
+            'cursor-auto'
+        ]
+    },
+    emptyMessage: {
+        class: [
+            // Font
+            'leading-none',
+
+            // Spacing
+            'py-2 px-3',
+
+            // Color
+            'text-surface-800 dark:text-white/80',
+            'bg-transparent'
+        ]
+    },
+    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'
+    }
+};

packages/primevue/src/classic/avatar/index.ts

@@ -0,0 +1,43 @@
+export default {
+    root: ({ props, parent }) => ({
+        class: [
+            // Font
+            {
+                'text-xl': props.size == 'large',
+                'text-2xl': props.size == 'xlarge'
+            },
+
+            // Alignments
+            'inline-flex items-center justify-center',
+            'relative',
+
+            // Sizes
+            {
+                'h-8 w-8': props.size == null || props.size == 'normal',
+                'w-12 h-12': props.size == 'large',
+                'w-16 h-16': props.size == 'xlarge'
+            },
+            { '-ml-4': parent.instance.$style?.name == 'avatargroup' },
+
+            // Shapes
+            {
+                'rounded-lg': props.shape == 'square',
+                'rounded-full': props.shape == 'circle'
+            },
+            { 'border-2': parent.instance.$style?.name == 'avatargroup' },
+
+            // Colors
+            'bg-surface-300 dark:bg-surface-700',
+            { 'border-white dark:border-surface-800': parent.instance.$style?.name == 'avatargroup' }
+        ]
+    }),
+    image: ({ props }) => ({
+        class: [
+            'h-full w-full',
+            {
+                'rounded-lg': props.shape == 'square',
+                'rounded-full': props.shape == 'circle'
+            }
+        ]
+    })
+};

packages/primevue/src/classic/avatargroup/index.ts

@@ -0,0 +1,5 @@
+export default {
+    root: {
+        class: 'flex items-center'
+    }
+};