@gluhar/theme 2.0.0-dev.0

package/dist/runtime/presets/lara/treetable/index.js

@@ -0,0 +1,434 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+            {
+                'flex flex-col h-full': props.scrollHeight === 'flex'
+            }
+        ]
+    }),
+    loadingoverlay: {
+        class: [
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Flex & Alignment
+            'flex items-center justify-center',
+
+            // Size
+            'w-full h-full',
+
+            // Color
+            'bg-surface-100/40 dark:bg-surface-800/40',
+
+            // Transition
+            'transition duration-200'
+        ]
+    },
+    loadingicon: {
+        class: 'w-8 h-8 animate-spin'
+    },
+    wrapper: ({ props }) => ({
+        class: [
+            // Overflow
+            {
+                'relative overflow-auto': props.scrollable,
+                'overflow-x-auto': props.resizableColumns
+            }
+        ]
+    }),
+    header: ({ props }) => ({
+        class: [
+            'font-bold',
+
+            // Shape
+            props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0',
+
+            // Spacing
+            'p-4',
+
+            // Color
+            'bg-surface-50 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700',
+            'text-surface-700 dark:text-white/80'
+        ]
+    }),
+    footer: {
+        class: [
+            // Background, Border & Text
+            'bg-slate-50 text-slate-700',
+            'border border-x-0 border-t-0 border-surface-50',
+            // Padding & Font
+            'p-4 font-bold',
+            // Dark Mode
+            'dark:bg-surface-900 dark:text-white/70 dark:border-surface-700'
+        ]
+    },
+    table: {
+        class: [
+            // Table & Width
+            'border-collapse table-fixed w-full '
+        ]
+    },
+    thead: ({ props }) => ({
+        class: [
+            // Position & Z-index
+            {
+                'top-0 z-40 sticky': props.scrollable
+            }
+        ]
+    }),
+    tbody: ({ props }) => ({
+        class: [
+            // Block Display
+            {
+                block: props.scrollable
+            }
+        ]
+    }),
+    tfoot: ({ props }) => ({
+        class: [
+            // Block Display
+            {
+                block: props.scrollable
+            }
+        ]
+    }),
+    headerrow: ({ props }) => ({
+        class: [
+            // Flexbox & Width
+            {
+                'flex flex-nowrap w-full': props.scrollable
+            }
+        ]
+    }),
+    row: ({ context, props }) => ({
+        class: [
+            // Flex
+            { 'flex flex-nowrap w-full': context.scrollable },
+
+            // Color
+            'dark:text-white/80',
+            { 'bg-primary-50 text-primary-700 dark:bg-primary-400/30': context.selected },
+            { 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected },
+
+            // Hover & Flexbox
+            {
+                'hover:bg-surface-300/20 hover:text-surface-600': context.selectable && !context.selected
+            },
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 ring-inset dark:focus:ring-primary-300/50',
+
+            // Transition
+            { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }
+        ]
+    }),
+    headercell: ({ context, props }) => ({
+        class: [
+            'font-bold',
+
+            // Position
+            { 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
+
+            // Flex & Alignment
+            {
+                'flex flex-1 items-center': context.scrollable,
+                'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+            },
+            'text-left',
+
+            // Shape
+            { 'first:border-l border-y border-r': context?.showGridlines },
+            'border-0 border-b border-solid',
+
+            // Spacing
+            context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+            // Color
+            (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-50 text-primary-700' : 'bg-surface-50 text-surface-700',
+            (props.sortable === '' || props.sortable) && context.sorted ? 'dark:text-white dark:bg-primary-400/30' : 'dark:text-white/80 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700',
+
+            // States
+            { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted },
+            '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',
+
+            // Transition
+            { 'transition duration-200': props.sortable === '' || props.sortable },
+
+            // Misc
+            {
+                'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+            }
+        ]
+    }),
+    column: {
+        headercell: ({ context, props }) => ({
+            class: [
+                'font-bold',
+
+                // Position
+                { 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
+
+                // Flex & Alignment
+                {
+                    'flex flex-1 items-center': context.scrollable,
+                    'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+                },
+                'text-left',
+
+                // Shape
+                { 'first:border-l border-y border-r': context?.showGridlines },
+                'border-0 border-b border-solid',
+
+                // Spacing
+                context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+                // Color
+                (props.sortable === '' || props.sortable) && context.sorted ? 'bg-primary-50 text-primary-700' : 'bg-surface-50 text-surface-700',
+                (props.sortable === '' || props.sortable) && context.sorted ? 'dark:text-white dark:bg-primary-400/30' : 'dark:text-white/80 dark:bg-surface-800',
+                'border-surface-200 dark:border-surface-700',
+
+                // States
+                { 'hover:bg-surface-100 dark:hover:bg-surface-400/30': (props.sortable === '' || props.sortable) && !context?.sorted },
+                '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',
+
+                // Transition
+                { 'transition duration-200': props.sortable === '' || props.sortable },
+
+                // Misc
+                {
+                    'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+                }
+            ]
+        }),
+        bodycell: ({ context }) => ({
+            class: [
+                // Position
+                {
+                    sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen
+                },
+
+                // Flex & Alignment
+                {
+                    'flex flex-1 items-center': context.scrollable,
+                    'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+                },
+                'text-left',
+
+                // Shape
+                'border-0 border-b border-solid',
+                'border-surface-200 dark:border-surface-700',
+                {
+                    'border-x-0 border-l-0': !context.showGridlines
+                },
+                { 'first:border-l border-r border-b': context?.showGridlines },
+
+                // Color
+                'bg-surface-0 dark:bg-surface-800',
+
+                // Spacing
+                context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+                // Misc
+                'dark:border-surface-700',
+                {
+                    'cursor-pointer': context.selectable,
+                    sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen,
+                    'border-x-0 border-l-0': !context.showGridlines
+                }
+            ]
+        }),
+        rowtoggler: {
+            class: [
+                'relative',
+
+                // Flex & Alignment
+                'inline-flex items-center justify-center',
+                'text-left align-middle',
+
+                // Spacing
+                'm-0 mr-2 p-0',
+
+                // Size
+                'w-8 h-8',
+
+                // Shape
+                'border-0 rounded-full',
+
+                // Color
+                'text-surface-500 dark:text-white/70',
+                'bg-transparent',
+
+                // States
+                'hover:bg-surface-50 dark:hover:bg-surface-700',
+                'focus-visible:outline-none focus-visible:outline-offset-0',
+                'focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+
+                // Transition
+                'transition duration-200',
+
+                // Misc
+                'overflow-hidden',
+                'cursor-pointer select-none'
+            ]
+        },
+        sorticon: ({ context }) => ({
+            class: ['ml-2 inline-block', context.sorted ? 'fill-primary-700 dark:fill-white/80' : 'fill-surface-700 dark:fill-white/70']
+        }),
+        sortbadge: {
+            class: [
+                // Flex & Alignment
+                'inline-flex items-center justify-center align-middle',
+
+                // Shape
+                'rounded-full',
+
+                // Size
+                'w-[1.143rem] leading-[1.143rem]',
+
+                // Spacing
+                'ml-2',
+
+                // Color
+                'text-primary-700 dark:text-white',
+                'bg-primary-50 dark:bg-primary-400/30'
+            ]
+        },
+        columnresizer: {
+            class: [
+                'block',
+
+                // Position
+                'absolute top-0 right-0',
+
+                // Sizing
+                'w-2 h-full',
+
+                // Spacing
+                'm-0 p-0',
+
+                // Color
+                'border border-transparent',
+
+                // Misc
+                'cursor-col-resize'
+            ]
+        },
+        rowCheckbox: ({ props, context, instance }) => ({
+            root: {
+                class: [
+                    'relative',
+
+                    // Alignment
+                    'inline-flex',
+                    'align-middle',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Spacing
+                    'mr-2',
+
+                    // Misc
+                    'cursor-pointer',
+                    'select-none'
+                ]
+            },
+            box: {
+                class: [
+                    // Alignment
+                    'flex',
+                    'items-center',
+                    'justify-center',
+
+                    // Size
+                    'w-6',
+                    'h-6',
+
+                    // Shape
+                    'rounded-md',
+                    'border-2',
+
+                    // Colors
+                    {
+                        'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                        'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked
+                    },
+
+                    // States
+                    {
+                        'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked,
+                        'peer-hover:bg-primary-700 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked,
+                        'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                        'cursor-default opacity-60': props.disabled
+                    },
+
+                    // Transitions
+                    'transition-colors',
+                    'duration-200'
+                ]
+            },
+            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-md',
+                    'outline-none',
+                    'border-2 border-surface-200 dark:border-surface-700',
+
+                    // Misc
+                    'appearance-none',
+                    'cursor-pointer'
+                ]
+            },
+            icon: {
+                class: [
+                    // Font
+                    'text-base leading-none',
+
+                    // Size
+                    'w-4',
+                    'h-4',
+
+                    // Colors
+                    {
+                        'text-white dark:text-surface-900': !instance.partialChecked,
+                        'text-gray dark:text-white': instance.partialChecked
+                    },
+
+                    // Transitions
+                    'transition-all',
+                    'duration-200'
+                ]
+            }
+        }),
+
+        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'
+        }
+    },
+    resizehelper: {
+        class: 'absolute hidden w-[2px] z-20 bg-primary-500 dark:bg-primary-400'
+    }
+};

package/dist/runtime/presets/lara/tristatecheckbox/index.d.ts

@@ -0,0 +1,49 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace input {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    function box({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: (string | {
+            'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': boolean;
+            'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': any;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'peer-hover:border-primary-500 dark:peer-hover:border-primary-400'?: undefined;
+            'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300'?: undefined;
+            'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20'?: undefined;
+            'cursor-default opacity-60'?: undefined;
+        } | {
+            'border-red-500 dark:border-red-400': any;
+            'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900'?: undefined;
+            'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'?: undefined;
+            'peer-hover:border-primary-500 dark:peer-hover:border-primary-400'?: undefined;
+            'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300'?: undefined;
+            'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20'?: undefined;
+            'cursor-default opacity-60'?: undefined;
+        } | {
+            'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': boolean;
+            'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': any;
+            'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': boolean;
+            'cursor-default opacity-60': any;
+            'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900'?: undefined;
+            'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+        })[];
+    };
+    namespace checkicon {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace uncheckicon {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+}
+export default _default;

package/dist/runtime/presets/lara/tristatecheckbox/index.js

@@ -0,0 +1,104 @@
+export default {
+    root: {
+        class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+    },
+    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-md',
+            'outline-none',
+            'border-2 border-surface-200 dark:border-surface-700',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    },
+    box: ({ props, context }) => ({
+        class: [
+            // Alignment
+            'flex',
+            'items-center',
+            'justify-center',
+
+            // Size
+            'w-6',
+            'h-6',
+
+            // Shape
+            'rounded-md',
+            'border-2',
+
+            // Colors
+            {
+                'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.active && !props.invalid,
+                'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.active
+            },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.active && !props.invalid,
+                'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.active,
+                'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                'cursor-default opacity-60': props.disabled
+            },
+
+            // Transitions
+            'transition-colors',
+            'duration-200'
+        ]
+    }),
+    checkicon: {
+        class: [
+            // Font
+            'text-base leading-none',
+
+            // Size
+            'w-4',
+            'h-4',
+
+            // Colors
+            'text-white dark:text-surface-900',
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    },
+    uncheckicon: {
+        class: [
+            // Font
+            'text-base leading-none',
+
+            // Size
+            'w-4',
+            'h-4',
+
+            // Colors
+            'text-white dark:text-surface-900',
+
+            // Transitions
+            'transition-all',
+            'duration-200'
+        ]
+    }
+};

package/dist/runtime/styles/core.css

@@ -0,0 +1,27 @@
+@tailwind base
+@tailwind components
+@tailwind utilities
+:root
+  --primary-50: 236 253 245
+  --primary-100: 209 250 229
+  --primary-200: 167 243 208
+  --primary-300: 110 231 183
+  --primary-400: 52 211 153
+  --primary-500: 58 58 58
+  --primary-600: 5 150 105
+  --primary-700: 4 120 87
+  --primary-800: 6 95 70
+  --primary-900: 4 78 56
+  --primary-950: 2 44 34
+  --surface-0: 255 255 255
+  --surface-50: 248 250 252
+  --surface-100: 241 245 249
+  --surface-200: 226 232 240
+  --surface-300: 203 213 225
+  --surface-400: 148 163 184
+  --surface-500: 100 116 139
+  --surface-600: 71 85 105
+  --surface-700: 45 55 72
+  --surface-800: 30 41 59
+  --surface-900: 15 23 42
+  --surface-950: 3 6 23;

package/dist/runtime/tailwind/gluharTheme.d.ts

@@ -0,0 +1,3 @@
+import type { Config as TailwindConfig } from "tailwindcss/types/config.d";
+declare const gluharTheme: TailwindConfig["theme"];
+export default gluharTheme;

package/dist/runtime/tailwind/gluharTheme.js

@@ -0,0 +1,52 @@
+import defaultTheme from "tailwindcss/defaultTheme.js";
+const gluharTheme = {
+  // Overrides
+  fontFamily: {
+    sans: ["Object Sans", ...defaultTheme.fontFamily.sans]
+  },
+  // Extends
+  extend: {
+    // Colors
+    colors: {
+      primary: {
+        // PrimeVue colors
+        "50": "rgb(var(--primary-50))",
+        "100": "rgb(var(--primary-100))",
+        "200": "rgb(var(--primary-200))",
+        "300": "rgb(var(--primary-300))",
+        "400": "rgb(var(--primary-400))",
+        "500": "rgb(var(--primary-500))",
+        "600": "rgb(var(--primary-600))",
+        "700": "rgb(var(--primary-700))",
+        "800": "rgb(var(--primary-800))",
+        "900": "rgb(var(--primary-900))",
+        "950": "rgb(var(--primary-950))"
+      },
+      secondary: {
+        base: "#F9F9F9"
+      },
+      accent: {
+        base: "#ffaaff"
+      },
+      white: {
+        base: "#fff"
+      },
+      // PrimeVue colors
+      surface: {
+        "0": "rgb(var(--surface-0))",
+        "50": "rgb(var(--surface-50))",
+        "100": "rgb(var(--surface-100))",
+        "200": "rgb(var(--surface-200))",
+        "300": "rgb(var(--surface-300))",
+        "400": "rgb(var(--surface-400))",
+        "500": "rgb(var(--surface-500))",
+        "600": "rgb(var(--surface-600))",
+        "700": "rgb(var(--surface-700))",
+        "800": "rgb(var(--surface-800))",
+        "900": "rgb(var(--surface-900))",
+        "950": "rgb(var(--surface-950))"
+      }
+    }
+  }
+};
+export default gluharTheme;

package/dist/runtime/tailwind/handleTailwind.d.ts

@@ -0,0 +1,3 @@
+import type { Nuxt } from "@nuxt/schema";
+import type { GluharThemeOptions } from "~/src/module";
+export declare const handleTailwind: (options: GluharThemeOptions, nuxt: Nuxt) => void;