dashforge-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +136 -0
  2. package/dist/dashforge-ui.css +1 -0
  3. package/dist/index.es.js +746 -0
  4. package/dist/index.umd.js +2 -0
  5. package/package.json +48 -0
package/README.md ADDED
@@ -0,0 +1,136 @@
1
+ # Dashforge UI — Framework Skeleton
2
+
3
+ This repository contains a production-ready skeleton for a Vue 3 UI framework focused on dashboard applications. It provides:
4
+
5
+ - Plugin-based core (`createDashboardUI`)
6
+ - Theme engine with Light & Dark themes and runtime switching
7
+ - SCSS design tokens and CSS variable generation
8
+ - A typed `useTheme` composable and TypeScript theme types
9
+ - One initial component: `VButton`
10
+ - Vite library build configuration and playground app
11
+ - Vitest test setup
12
+
13
+ See `playground` for a demo app. Build the library with `npm run build:lib` and run the playground with `npm run play`.
14
+
15
+ Scalability notes: keep components small, rely on token-driven styling, expose plugin hooks, use per-component entry points for tree-shaking.
16
+
17
+ ## Public exports
18
+
19
+ The package exposes the following API from `src/index.ts`:
20
+
21
+ - `createDashboardUI(options?)`: Plugin factory to install the framework into a Vue app. Accepts `DashboardUIOptions` (see types).
22
+ - `DashboardUIKey`: Symbol used for provide/inject to access the dashboard UI context.
23
+ - `useDashboardUI()`: Composable to access the plugin state after installing `createDashboardUI`.
24
+ - `useTheme()`: Composable to read/change the active theme at runtime.
25
+ - Theme types: exported TypeScript types are available from the root (e.g. `Theme`, `PartialTheme`).
26
+ - `VButton`: Example component (default export) with an install method for global registration.
27
+
28
+ Example usage:
29
+
30
+ ```ts
31
+ import { createApp } from 'vue'
32
+ import App from './App.vue'
33
+ import { createDashboardUI, useTheme, VButton } from 'dashforge-ui'
34
+
35
+ const app = createApp(App)
36
+ app.use(createDashboardUI({ theme: 'light' }))
37
+ app.component('VButton', VButton)
38
+ app.mount('#app')
39
+
40
+ // inside components
41
+ // const theme = useTheme()
42
+ // theme.setTheme('dark')
43
+ ```
44
+
45
+ ## 🎨 Theme Customization
46
+
47
+ Create custom themes using TypeScript helpers:
48
+
49
+ ```ts
50
+ import { createTheme, createDarkTheme, applyTheme } from 'dashforge-ui'
51
+
52
+ // Create a custom light theme
53
+ const myTheme = createTheme({
54
+ name: 'my-brand',
55
+ colors: {
56
+ primary: '#ff6b35',
57
+ 'on-primary': '#ffffff',
58
+ 'primary-container': '#ffd4c4',
59
+ 'on-primary-container': '#4a0000',
60
+ // ... more colors
61
+ }
62
+ })
63
+
64
+ // Create a custom dark theme
65
+ const myDarkTheme = createDarkTheme({
66
+ name: 'my-dark-brand',
67
+ colors: {
68
+ primary: '#ffa366',
69
+ // ... dark mode colors
70
+ }
71
+ })
72
+
73
+ // Apply theme at runtime
74
+ applyTheme(myTheme)
75
+
76
+ // With dynamic utility classes for new colors
77
+ applyTheme(myTheme, { generateUtilities: true })
78
+ // Now .bg-*, .text-*, .border-* classes work with your custom colors
79
+ ```
80
+
81
+ ### Utility Classes
82
+
83
+ Pre-built utility classes use CSS variables and automatically adapt to theme changes:
84
+ - `.bg-primary`, `.text-primary`, `.border-primary`
85
+ - Works for all base token colors
86
+
87
+ For **new custom colors**, enable dynamic generation:
88
+ ```ts
89
+ app.use(createDashboardUI({
90
+ theme: myTheme,
91
+ generateUtilities: true // Creates utilities for ALL colors
92
+ }))
93
+ ```
94
+
95
+ See **[CUSTOM-THEMES.md](./docs/CUSTOM-THEMES.md)** for complete guide and examples.
96
+
97
+ ## 📚 Documentation
98
+
99
+ ### Getting Started
100
+ - **[QUICK-START.md](./docs/QUICK-START.md)** - Complete guide: install, create themes, generate utility classes
101
+
102
+ ### Architecture & Patterns
103
+ - **[TOKEN-ARCHITECTURE.md](./TOKEN-ARCHITECTURE.md)** - Sistema de tokens y arquitectura de temas
104
+ - **[COMPONENT-GUIDELINES.md](./COMPONENT-GUIDELINES.md)** - Guía de diseño de componentes (union types, CSS variables, mejores prácticas)
105
+ - **[DESIGN-SYSTEM.md](./DESIGN-SYSTEM.md)** - Token structure and design system overview
106
+ - **[CUSTOM-THEMES.md](./docs/CUSTOM-THEMES.md)** - Create and customize themes with TypeScript
107
+
108
+ ### Components
109
+ - **[VButton Color System](./src/components/VButton/COLOR-SYSTEM.md)** - Sistema de colores dinámicos con CSS variables
110
+
111
+ ### Scripts
112
+ - `npm run gen:utils` - Regenera archivos SCSS desde `tokens.ts` (ejecutar después de modificar tokens)
113
+ - `npm run typecheck` - Validación TypeScript
114
+ - `npm run test` - Tests con Vitest
115
+ - `npm run build:lib` - Build de la librería
116
+ - `npm run play` - Playground de desarrollo
117
+
118
+ ## 🎨 Design Principles
119
+
120
+ 1. **Single Source of Truth**: Todos los valores de diseño en `src/theme/tokens.ts`
121
+ 2. **CSS Variables**: Runtime customization sin recompilar
122
+ 3. **Type-Safe Props**: Union types sobre props booleanas múltiples
123
+ 4. **Token-Driven**: Componentes consumen valores desde tokens via CSS variables
124
+ 5. **Dark Mode**: Automático via `@media (prefers-color-scheme: dark)`
125
+
126
+ ## 🚀 Creating New Components
127
+
128
+ Sigue la guía en [COMPONENT-GUIDELINES.md](./COMPONENT-GUIDELINES.md):
129
+
130
+ 1. Define props con union types (`size?: 'small' | 'default' | 'large'`)
131
+ 2. Agrega tokens necesarios a `tokens.ts` y ejecuta `npm run gen:utils`
132
+ 3. Inyecta CSS variables en `computed style()`
133
+ 4. Usa `var(--df-*)` en SCSS con fallbacks
134
+ 5. Exporta types en `src/types/` y component en `src/index.ts`
135
+
136
+ **Ejemplo de referencia:** [VButton](./src/components/VButton/VButton.vue)
package/dist/dashforge-ui.css ADDED
@@ -0,0 +1 @@
1
+ .v-icon{overflow:hidden;align-items:center;display:inline-flex;font-feature-settings:"liga";justify-content:center;letter-spacing:normal;line-height:1;position:relative;text-indent:0;transition:.3s cubic-bezier(.25,.8,.5,1),visibility 0s;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;opacity:1}.v-icon--size-x-small{font-size:var(--df-icon-font-size-x-small)}.v-icon--size-x-small .v-icon__svg{height:var(--df-icon-font-size-x-small);width:var(--df-icon-font-size-x-small)}.v-icon--size-small{font-size:var(--df-icon-font-size-small)}.v-icon--size-small .v-icon__svg{height:var(--df-icon-font-size-small);width:var(--df-icon-font-size-small)}.v-icon--size-default{font-size:var(--df-icon-font-size-default)}.v-icon--size-default .v-icon__svg{height:var(--df-icon-font-size-default);width:var(--df-icon-font-size-default)}.v-icon--size-large{font-size:var(--df-icon-font-size-large)}.v-icon--size-large .v-icon__svg{height:var(--df-icon-font-size-large);width:var(--df-icon-font-size-large)}.v-icon--size-x-large{font-size:var(--df-icon-font-size-x-large)}.v-icon--size-x-large .v-icon__svg{height:var(--df-icon-font-size-x-large);width:var(--df-icon-font-size-x-large)}.v-icon--disabled{pointer-events:none}.v-btn{border:none;align-items:center;display:inline-flex;flex:0 0 auto;justify-content:center;outline:0;cursor:pointer;position:relative;padding:0 1em;min-width:4em;box-shadow:var(--df-btn-shadow, 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12));height:var(--df-btn-height, var(--df-btn-height-default, unset));font-size:var(--df-btn-font-size, var(--df-btn-font-size-default, inherit));font-weight:var(--df-btn-font-weight);letter-spacing:var(--df-btn-letter-spacing);text-transform:var(--df-btn-text-transform);transition-duration:var(--df-btn-transition-duration);border-radius:var(--df-btn-border-radius);font-family:var(--df-font-family);background-color:var(--df-btn-bg-color);color:var(--df-btn-text-color);border-color:var(--df-btn-border-color)}.v-btn .v-icon__svg{fill:currentColor}.v-btn__content{line-height:initial;flex-direction:column}.v-btn{-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none;transition-property:box-shadow,transform,opacity,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);vertical-align:middle;white-space:nowrap}.v-btn:before{content:"";background-color:currentColor;border-radius:inherit;opacity:0;inset:0;color:inherit;pointer-events:none;position:absolute;transition:opacity .2s cubic-bezier(.4,0,.6,1)}.v-btn:focus,.v-btn:active{text-decoration:none}.v-btn:active:not(.v-btn--text):not(.v-btn--depressed):not(.v-btn--disabled){transform:translateY(1px);box-shadow:var(--df-btn-shadow-active, 0 1px 2px 0 rgba(0, 0, 0, .18))}.v-btn.v-btn--icon,.v-btn.v-btn--fab{padding:0;min-width:0;border-radius:50%}.v-btn--depressed,.v-btn--disabled,.v-btn--text{box-shadow:none}.v-btn--block:not(.v-btn--fab):not(.v-btn--icon){display:flex;flex:1 0 auto;min-width:100%!important}.v-btn--outlined{border:1px solid var(--df-btn-bg-color, var(--df-color-primary));color:var(--df-btn-bg-color, var(--df-color-primary));background-color:transparent}.v-btn--text{background-color:transparent;color:var(--df-btn-bg-color, var(--df-color-primary));box-shadow:none}.v-btn--stacked{flex-direction:column}.v-btn--stacked .v-btn__prepend{margin:0 0 .25rem}.v-btn--stacked .v-btn__append{margin:.25rem 0 0}.v-btn--icon{background-color:transparent;padding:0}.v-btn--fab{border-radius:100%}.v-btn--fab .v-btn__content,.v-btn--icon .v-btn__content{display:flex;justify-content:center;align-items:center}.v-btn--loading{pointer-events:none}.v-btn--loading .v-btn__content,.v-btn--loading .v-btn__append,.v-btn--loading .v-btn__prepend{opacity:0}.v-btn--disabled{pointer-events:none;cursor:not-allowed}.v-btn__loader{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.v-btn:focus:before{opacity:var(--df-btn-state-focus, .1)}.v-btn:hover:before{opacity:var(--df-btn-state-hover, .1)}.v-btn:active:before{opacity:var(--df-btn-state-active, .1)}.v-btn--size-x-small{height:var(--df-btn-height, var(--df-btn-height-x-small));font-size:var(--df-btn-font-size, var(--df-btn-font-size-x-small))}.v-btn--size-x-small.v-btn--fab{height:var(--df-btn-height, var(--df-fab-height-x-small));width:var(--df-btn-height, var(--df-fab-height-x-small));font-size:var(--df-btn-font-size, var(--df-fab-font-sizes-x-small))}.v-btn--size-x-small.v-btn--icon{width:var(--df-btn-height, var(--df-btn-height-x-small))}.v-btn--size-x-small.v-btn--stacked{height:var(--df-btn-height, var(--df-stacked-height-x-small))}.v-btn--size-small{height:var(--df-btn-height, var(--df-btn-height-small));font-size:var(--df-btn-font-size, var(--df-btn-font-size-small))}.v-btn--size-small.v-btn--fab{height:var(--df-btn-height, var(--df-fab-height-small));width:var(--df-btn-height, var(--df-fab-height-small));font-size:var(--df-btn-font-size, var(--df-fab-font-sizes-small))}.v-btn--size-small.v-btn--icon{width:var(--df-btn-height, var(--df-btn-height-small))}.v-btn--size-small.v-btn--stacked{height:var(--df-btn-height, var(--df-stacked-height-small))}.v-btn--size-default{height:var(--df-btn-height, var(--df-btn-height-default));font-size:var(--df-btn-font-size, var(--df-btn-font-size-default))}.v-btn--size-default.v-btn--fab{height:var(--df-btn-height, var(--df-fab-height-default));width:var(--df-btn-height, var(--df-fab-height-default));font-size:var(--df-btn-font-size, var(--df-fab-font-sizes-default))}.v-btn--size-default.v-btn--icon{width:var(--df-btn-height, var(--df-btn-height-default))}.v-btn--size-default.v-btn--stacked{height:var(--df-btn-height, var(--df-stacked-height-default))}.v-btn--size-large{height:var(--df-btn-height, var(--df-btn-height-large));font-size:var(--df-btn-font-size, var(--df-btn-font-size-large))}.v-btn--size-large.v-btn--fab{height:var(--df-btn-height, var(--df-fab-height-large));width:var(--df-btn-height, var(--df-fab-height-large));font-size:var(--df-btn-font-size, var(--df-fab-font-sizes-large))}.v-btn--size-large.v-btn--icon{width:var(--df-btn-height, var(--df-btn-height-large))}.v-btn--size-large.v-btn--stacked{height:var(--df-btn-height, var(--df-stacked-height-large))}.v-btn--size-x-large{height:var(--df-btn-height, var(--df-btn-height-x-large));font-size:var(--df-btn-font-size, var(--df-btn-font-size-x-large))}.v-btn--size-x-large.v-btn--fab{height:var(--df-btn-height, var(--df-fab-height-x-large));width:var(--df-btn-height, var(--df-fab-height-x-large));font-size:var(--df-btn-font-size, var(--df-fab-font-sizes-x-large))}.v-btn--size-x-large.v-btn--icon{width:var(--df-btn-height, var(--df-btn-height-x-large))}.v-btn--size-x-large.v-btn--stacked{height:var(--df-btn-height, var(--df-stacked-height-x-large))}.v-btn__prepend{margin-right:var(--df-btn-icon-spacing, .5rem)}.v-btn__append{margin-left:var(--df-btn-icon-spacing, .5rem)}
package/dist/index.es.js ADDED
@@ -0,0 +1,746 @@
1
+ import { reactive as N, provide as Z, inject as V, computed as p, defineComponent as j, ref as E, useAttrs as D, onMounted as K, openBlock as b, createElementBlock as h, normalizeClass as F, renderSlot as L, Fragment as X, renderList as Y, mergeProps as m, createCommentVNode as _, useSlots as q, watchEffect as G, withDirectives as B, createBlock as I, resolveDynamicComponent as J, withCtx as Q, createElementVNode as k, vShow as ee, createVNode as W } from "vue";
2
+ let d = null;
3
+ function C(e, n) {
4
+ return n ? {
5
+ name: n.name ?? e.name,
6
+ colors: {
7
+ ...e.colors,
8
+ ...n.colors || {}
9
+ },
10
+ spacing: e.spacing && n.spacing ? { ...e.spacing, ...n.spacing } : n.spacing || e.spacing,
11
+ typography: e.typography && n.typography ? { ...e.typography, ...n.typography } : n.typography || e.typography,
12
+ shape: e.shape && n.shape ? { ...e.shape, ...n.shape } : n.shape || e.shape,
13
+ elevation: e.elevation && n.elevation ? { ...e.elevation, ...n.elevation } : n.elevation || e.elevation,
14
+ tokens: {
15
+ ...e.tokens,
16
+ ...n.tokens || {}
17
+ }
18
+ } : e;
19
+ }
20
+ function ne(e) {
21
+ const n = {};
22
+ return e.colors && Object.entries(e.colors).forEach(([t, o]) => {
23
+ n[`--df-color-${t}`] = o;
24
+ }), e.spacing && Object.entries(e.spacing).forEach(([t, o]) => {
25
+ n[`--df-spacing-${t}`] = o;
26
+ }), e.typography && Object.entries(e.typography).forEach(([t, o]) => {
27
+ n[`--df-font-size-${t}`] = o.fontSize, n[`--df-font-weight-${t}`] = String(o.fontWeight), n[`--df-line-height-${t}`] = o.lineHeight, n[`--df-letter-spacing-${t}`] = o.letterSpacing;
28
+ }), e.shape && Object.entries(e.shape).forEach(([t, o]) => {
29
+ n[`--df-${t}`] = o;
30
+ }), e.elevation && Object.entries(e.elevation).forEach(([t, o]) => {
31
+ n[`--df-${t}`] = o;
32
+ }), e.tokens && Object.entries(e.tokens).forEach(([t, o]) => {
33
+ n[`--df-${t}`] = o;
34
+ }), n;
35
+ }
36
+ function te(e, n = {}) {
37
+ if (typeof document > "u") return;
38
+ (!(d && document.head.contains(d)) || n.replace) && (d && document.head.contains(d) && d.remove(), d = document.createElement("style"), d.setAttribute("data-dashforge-utilities", "true"), d.setAttribute("type", "text/css"), document.head.appendChild(d));
39
+ const o = [];
40
+ e.colors && Object.entries(e.colors).forEach(([r, i]) => {
41
+ o.push(`.bg-${r}{background-color:var(--df-color-${r},${i})!important}`), o.push(`.text-${r}{color:var(--df-color-${r},${i})!important}`), o.push(`.border-${r}{border-color:var(--df-color-${r},${i})!important}`);
42
+ }), d && (d.textContent = o.join(`
43
+ `));
44
+ }
45
+ function M(e, n = {}) {
46
+ if (typeof document > "u") return;
47
+ const t = ne(e), o = document.documentElement;
48
+ for (const r in t)
49
+ o.style.setProperty(r, t[r]);
50
+ n.generateUtilities && te(e, { replace: !0 });
51
+ }
52
+ function A(e) {
53
+ const n = Object.keys(e).filter(
54
+ (t) => !t.startsWith("on-") && !t.includes("-container")
55
+ );
56
+ for (const t of n) {
57
+ const o = `on-${t}` in e, r = `${t}-container` in e, i = `on-${t}-container` in e;
58
+ o || console.warn(`ColorPalette: Color "${t}" falta "on-${t}"`), r || console.warn(`ColorPalette: Color "${t}" falta "${t}-container"`), i || console.warn(`ColorPalette: Color "${t}" falta "on-${t}-container"`);
59
+ }
60
+ return e;
61
+ }
62
+ const oe = A({
63
+ primary: "#00af67",
64
+ "on-primary": "#ffffff",
65
+ "primary-container": "#b1f5db",
66
+ "on-primary-container": "#00291b",
67
+ secondary: "#625b71",
68
+ "on-secondary": "#ffffff",
69
+ "secondary-container": "#e8def8",
70
+ "on-secondary-container": "#1d192b",
71
+ success: "#4caf50",
72
+ "on-success": "#ffffff",
73
+ "success-container": "#c8e6c9",
74
+ "on-success-container": "#1b5e20",
75
+ warning: "#ffb300",
76
+ "on-warning": "#000000",
77
+ "warning-container": "#ffe082",
78
+ "on-warning-container": "#ff6f00",
79
+ error: "#b3261e",
80
+ "on-error": "#ffffff",
81
+ "error-container": "#f9dedc",
82
+ "on-error-container": "#410e0b",
83
+ info: "#2196f3",
84
+ "on-info": "#ffffff",
85
+ "info-container": "#bbdefb",
86
+ "on-info-container": "#0d47a1",
87
+ input: "#eaddff",
88
+ "on-input": "#000000",
89
+ "input-container": "#fffbfe",
90
+ "on-input-container": "#1c1b1f",
91
+ grey: "#79747e",
92
+ "on-grey": "#ffffff",
93
+ "grey-container": "#cac7d0",
94
+ "on-grey-container": "#1c1b1f",
95
+ disabled: "#e0e0e0",
96
+ "on-disabled": "#9e9e9e",
97
+ "disabled-container": "#ded8e1",
98
+ "on-disabled-container": "#1c1b1f",
99
+ neutral: "#1c1b1f",
100
+ "on-neutral": "#ffffff",
101
+ "neutral-container": "#fffbfe",
102
+ "on-neutral-container": "#1c1b1f",
103
+ "neutral-variant": "#49454e",
104
+ "on-neutral-variant": "#ffffff",
105
+ "neutral-variant-container": "#cac7d0",
106
+ "on-neutral-variant-container": "#1c1b1f",
107
+ background: "#fffbfe",
108
+ "on-background": "#1c1b1f",
109
+ "background-container": "#fffbfe",
110
+ "on-background-container": "#1c1b1f",
111
+ surface: "#fffbfe",
112
+ "on-surface": "#1c1b1f",
113
+ "surface-container": "#fffbfe",
114
+ "on-surface-container": "#1c1b1f",
115
+ "surface-dim": "#ded8e1",
116
+ "on-surface-dim": "#1c1b1f",
117
+ "surface-dim-container": "#ded8e1",
118
+ "on-surface-dim-container": "#1c1b1f",
119
+ "surface-bright": "#fffbfe",
120
+ "on-surface-bright": "#1c1b1f",
121
+ "surface-bright-container": "#fffbfe",
122
+ "on-surface-bright-container": "#1c1b1f",
123
+ "on-surface-variant": "#49454e",
124
+ text: "#1c1b1f",
125
+ "on-text": "#fffbfe",
126
+ "text-container": "#fffbfe",
127
+ "on-text-container": "#1c1b1f",
128
+ "text-secondary": "#49454e",
129
+ "on-text-secondary": "#fffbfe",
130
+ "text-secondary-container": "#fffbfe",
131
+ "on-text-secondary-container": "#1c1b1f",
132
+ "text-tertiary": "#79747e",
133
+ "on-text-tertiary": "#fffbfe",
134
+ "text-tertiary-container": "#fffbfe",
135
+ "on-text-tertiary-container": "#1c1b1f",
136
+ outline: "#79747e",
137
+ "on-outline": "#1c1b1f",
138
+ "outline-container": "#ded8e1",
139
+ "on-outline-container": "#1c1b1f",
140
+ "outline-variant": "#cac7d0",
141
+ "on-outline-variant": "#1c1b1f",
142
+ "outline-variant-container": "#ded8e1",
143
+ "on-outline-variant-container": "#1c1b1f",
144
+ white: "#ffffff",
145
+ "on-white": "#000000",
146
+ "white-container": "#fffbfe",
147
+ "on-white-container": "#1c1b1f",
148
+ black: "#000000",
149
+ "on-black": "#ffffff",
150
+ "black-container": "#1c1b1f",
151
+ "on-black-container": "#ffffff"
152
+ }), re = A({
153
+ primary: "#7dffad",
154
+ "on-primary": "#004d32",
155
+ "primary-container": "#007348",
156
+ "on-primary-container": "#b1f5db",
157
+ secondary: "#ccc7d8",
158
+ "on-secondary": "#312e42",
159
+ "secondary-container": "#4a4458",
160
+ "on-secondary-container": "#e8def8",
161
+ success: "#81c784",
162
+ "on-success": "#1b5e20",
163
+ "success-container": "#388e3c",
164
+ "on-success-container": "#c8e6c9",
165
+ warning: "#ffb300",
166
+ "on-warning": "#ff6f00",
167
+ "warning-container": "#ff8f00",
168
+ "on-warning-container": "#ffe082",
169
+ error: "#f2b8b5",
170
+ "on-error": "#601410",
171
+ "error-container": "#8c1d18",
172
+ "on-error-container": "#f9dedc",
173
+ info: "#64b5f6",
174
+ "on-info": "#0d47a1",
175
+ "info-container": "#1976d2",
176
+ "on-info-container": "#bbdefb",
177
+ input: "#523f7f",
178
+ "on-input": "#eaddff",
179
+ "input-container": "#1c1b1f",
180
+ "on-input-container": "#e6e1e5",
181
+ grey: "#cac7d0",
182
+ "on-grey": "#313033",
183
+ "grey-container": "#49454e",
184
+ "on-grey-container": "#e6e1e5",
185
+ disabled: "#616161",
186
+ "on-disabled": "#757575",
187
+ "disabled-container": "#0f0d13",
188
+ "on-disabled-container": "#e6e1e5",
189
+ neutral: "#e6e1e5",
190
+ "on-neutral": "#313033",
191
+ "neutral-container": "#1c1b1f",
192
+ "on-neutral-container": "#e6e1e5",
193
+ "neutral-variant": "#cac7d0",
194
+ "on-neutral-variant": "#49454e",
195
+ "neutral-variant-container": "#49454e",
196
+ "on-neutral-variant-container": "#e6e1e5",
197
+ background: "#1c1b1f",
198
+ "on-background": "#e6e1e5",
199
+ "background-container": "#1c1b1f",
200
+ "on-background-container": "#e6e1e5",
201
+ surface: "#1c1b1f",
202
+ "on-surface": "#e6e1e5",
203
+ "surface-container": "#36343b",
204
+ "on-surface-container": "#e6e1e5",
205
+ "surface-dim": "#0f0d13",
206
+ "on-surface-dim": "#e6e1e5",
207
+ "surface-dim-container": "#0f0d13",
208
+ "on-surface-dim-container": "#e6e1e5",
209
+ "surface-bright": "#36343b",
210
+ "on-surface-bright": "#e6e1e5",
211
+ "surface-bright-container": "#36343b",
212
+ "on-surface-bright-container": "#e6e1e5",
213
+ "on-surface-variant": "#cac7d0",
214
+ text: "#e6e1e5",
215
+ "on-text": "#1c1b1f",
216
+ "text-container": "#1c1b1f",
217
+ "on-text-container": "#e6e1e5",
218
+ "text-secondary": "#cac7d0",
219
+ "on-text-secondary": "#1c1b1f",
220
+ "text-secondary-container": "#1c1b1f",
221
+ "on-text-secondary-container": "#e6e1e5",
222
+ "text-tertiary": "#b0adb8",
223
+ "on-text-tertiary": "#1c1b1f",
224
+ "text-tertiary-container": "#1c1b1f",
225
+ "on-text-tertiary-container": "#e6e1e5",
226
+ outline: "#938f99",
227
+ "on-outline": "#e6e1e5",
228
+ "outline-container": "#36343b",
229
+ "on-outline-container": "#e6e1e5",
230
+ "outline-variant": "#49454e",
231
+ "on-outline-variant": "#e6e1e5",
232
+ "outline-variant-container": "#36343b",
233
+ "on-outline-variant-container": "#e6e1e5",
234
+ white: "#ffffff",
235
+ "on-white": "#000000",
236
+ "white-container": "#1c1b1f",
237
+ "on-white-container": "#e6e1e5",
238
+ black: "#000000",
239
+ "on-black": "#ffffff",
240
+ "black-container": "#1c1b1f",
241
+ "on-black-container": "#ffffff"
242
+ }), ae = {
243
+ xs: "4px",
244
+ sm: "8px",
245
+ md: "16px",
246
+ lg: "24px",
247
+ xl: "32px",
248
+ "2xl": "48px"
249
+ }, ie = {
250
+ "display-large": {
251
+ fontSize: "57px",
252
+ fontWeight: 400,
253
+ lineHeight: "64px",
254
+ letterSpacing: "0px"
255
+ },
256
+ "display-medium": {
257
+ fontSize: "45px",
258
+ fontWeight: 400,
259
+ lineHeight: "52px",
260
+ letterSpacing: "0px"
261
+ },
262
+ "display-small": {
263
+ fontSize: "36px",
264
+ fontWeight: 400,
265
+ lineHeight: "44px",
266
+ letterSpacing: "0px"
267
+ },
268
+ "headline-large": {
269
+ fontSize: "32px",
270
+ fontWeight: 400,
271
+ lineHeight: "40px",
272
+ letterSpacing: "0px"
273
+ },
274
+ "headline-medium": {
275
+ fontSize: "28px",
276
+ fontWeight: 400,
277
+ lineHeight: "36px",
278
+ letterSpacing: "0px"
279
+ },
280
+ "headline-small": {
281
+ fontSize: "24px",
282
+ fontWeight: 400,
283
+ lineHeight: "32px",
284
+ letterSpacing: "0px"
285
+ },
286
+ "title-large": {
287
+ fontSize: "22px",
288
+ fontWeight: 500,
289
+ lineHeight: "28px",
290
+ letterSpacing: "0px"
291
+ },
292
+ "title-medium": {
293
+ fontSize: "16px",
294
+ fontWeight: 500,
295
+ lineHeight: "24px",
296
+ letterSpacing: "0.15px"
297
+ },
298
+ "title-small": {
299
+ fontSize: "14px",
300
+ fontWeight: 500,
301
+ lineHeight: "20px",
302
+ letterSpacing: "0.1px"
303
+ },
304
+ "body-large": {
305
+ fontSize: "16px",
306
+ fontWeight: 400,
307
+ lineHeight: "24px",
308
+ letterSpacing: "0.5px"
309
+ },
310
+ "body-medium": {
311
+ fontSize: "14px",
312
+ fontWeight: 400,
313
+ lineHeight: "20px",
314
+ letterSpacing: "0.25px"
315
+ },
316
+ "body-small": {
317
+ fontSize: "12px",
318
+ fontWeight: 400,
319
+ lineHeight: "16px",
320
+ letterSpacing: "0.4px"
321
+ },
322
+ "label-large": {
323
+ fontSize: "14px",
324
+ fontWeight: 500,
325
+ lineHeight: "20px",
326
+ letterSpacing: "0.1px"
327
+ },
328
+ "label-medium": {
329
+ fontSize: "12px",
330
+ fontWeight: 500,
331
+ lineHeight: "16px",
332
+ letterSpacing: "0.5px"
333
+ },
334
+ "label-small": {
335
+ fontSize: "11px",
336
+ fontWeight: 500,
337
+ lineHeight: "16px",
338
+ letterSpacing: "0.5px"
339
+ }
340
+ }, ce = {
341
+ "corner-none": "0px",
342
+ "corner-extra-small": "4px",
343
+ "corner-small": "8px",
344
+ "corner-medium": "12px",
345
+ "corner-large": "16px",
346
+ "corner-extra-large": "28px",
347
+ "corner-full": "9999px"
348
+ }, se = {
349
+ "level-0": "none",
350
+ "level-1": "0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24)",
351
+ "level-2": "0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23)",
352
+ "level-3": "0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23)",
353
+ "level-4": "0px 15px 25px rgba(0, 0, 0, 0.15), 0px 10px 10px rgba(0, 0, 0, 0.05)",
354
+ "level-5": "0px 20px 40px rgba(0, 0, 0, 0.2)"
355
+ }, le = {
356
+ states: {
357
+ focus: 0.12,
358
+ hover: 0.08,
359
+ active: 0.12
360
+ },
361
+ fontSizes: {
362
+ "x-small": "0.6875rem",
363
+ small: "0.75rem",
364
+ default: "0.875rem",
365
+ large: "1rem",
366
+ "x-large": "1.125rem"
367
+ },
368
+ height: {
369
+ "x-small": "2rem",
370
+ small: "2.25rem",
371
+ default: "2.5rem",
372
+ large: "3rem",
373
+ "x-large": "3.5rem"
374
+ },
375
+ // Button styles (Border & Shape)
376
+ borderRadius: "4px",
377
+ roundedBorderRadius: "28px",
378
+ borderStyle: "solid",
379
+ borderWidth: "1px",
380
+ // Typography
381
+ fontWeight: 500,
382
+ letterSpacing: "0.1em",
383
+ textTransform: "uppercase",
384
+ // Transition
385
+ transitionDuration: "0.28s"
386
+ }, fe = {
387
+ class: "df-icon",
388
+ prefix: "df-icon-",
389
+ fontSizes: {
390
+ "x-small": "1rem",
391
+ small: "1.125rem",
392
+ default: "1.5rem",
393
+ large: "2rem",
394
+ "x-large": "3rem"
395
+ }
396
+ }, s = {
397
+ light: oe,
398
+ dark: re,
399
+ spacing: ae,
400
+ typography: ie,
401
+ shape: ce,
402
+ elevation: se,
403
+ btn: le,
404
+ icon: fe,
405
+ fontFamily: {
406
+ body: 'Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif'
407
+ }
408
+ }, v = {
409
+ name: "light",
410
+ colors: s.light,
411
+ spacing: s.spacing,
412
+ typography: s.typography,
413
+ shape: s.shape,
414
+ elevation: s.elevation
415
+ }, H = {
416
+ name: "dark",
417
+ colors: s.dark,
418
+ spacing: s.spacing,
419
+ typography: s.typography,
420
+ shape: s.shape,
421
+ elevation: s.elevation
422
+ }, z = /* @__PURE__ */ Symbol("DashboardUI");
423
+ function ke(e = {}) {
424
+ const n = typeof e.theme == "string" ? e.theme === "dark" ? H : v : C(v, e.theme || {}), t = N({
425
+ theme: n,
426
+ generateUtilities: e.generateUtilities ?? !1
427
+ });
428
+ return M(t.theme, { generateUtilities: t.generateUtilities }), {
429
+ install(o) {
430
+ Z(z, t), o.config.globalProperties.$dashboardUI = t;
431
+ }
432
+ };
433
+ }
434
+ function Se() {
435
+ const e = V(z);
436
+ if (!e) throw new Error("createDashboardUI plugin is not installed");
437
+ return e;
438
+ }
439
+ function $e() {
440
+ const e = V(z, null);
441
+ function n(o) {
442
+ let r;
443
+ o === "light" ? r = v : o === "dark" ? r = H : (o.colors, r = C(v, o));
444
+ const i = e?.generateUtilities ?? !1;
445
+ return M(r, { generateUtilities: i }), e && (e.theme = r), r;
446
+ }
447
+ return {
448
+ current: p(() => e ? e.theme : null),
449
+ setTheme: n
450
+ };
451
+ }
452
+ const U = {
453
+ disabled: "v-btn--disabled",
454
+ icon: "v-btn--icon",
455
+ depressed: "v-btn--depressed",
456
+ text: "v-btn--text",
457
+ fab: "v-btn--fab",
458
+ block: "v-btn--block",
459
+ loading: "v-btn--loading",
460
+ outlined: "v-btn--outlined",
461
+ rounded: "v-btn--rounded",
462
+ stacked: "v-btn--stacked"
463
+ };
464
+ function de(e, n = v) {
465
+ return {
466
+ name: e.name ?? n.name,
467
+ colors: {
468
+ ...n.colors,
469
+ ...e.colors || {}
470
+ },
471
+ spacing: e.spacing ?? n.spacing ?? s.spacing,
472
+ typography: e.typography ?? n.typography ?? s.typography,
473
+ shape: e.shape ?? n.shape ?? s.shape,
474
+ elevation: e.elevation ?? n.elevation ?? s.elevation,
475
+ tokens: {
476
+ ...n.tokens || {},
477
+ ...e.tokens || {}
478
+ }
479
+ };
480
+ }
481
+ function Le(e) {
482
+ return de(e, H);
483
+ }
484
+ const Ce = {
485
+ arrowLeft: {
486
+ d: "M14,7L9,12L14,17V7Z"
487
+ },
488
+ arrowRight: {
489
+ d: "M10,17L15,12L10,7V17Z"
490
+ },
491
+ arrowDown: {
492
+ d: "M7,10L12,15L17,10H7Z"
493
+ },
494
+ arrowUp: {
495
+ d: "M7,15L12,10L17,15H7Z"
496
+ },
497
+ chevronDown: {
498
+ d: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
499
+ },
500
+ clear: {
501
+ d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
502
+ }
503
+ }, O = (e, n) => (t) => {
504
+ if (n?.value?.disabled || t instanceof KeyboardEvent && t.key !== "Enter" && t.key !== " " && t.key !== "Spacebar")
505
+ return;
506
+ e.classList.contains("v-ripple-element") || e.classList.add("v-ripple-element");
507
+ const o = document.createElement("span");
508
+ o.classList.add("v-ripple"), e.appendChild(o);
509
+ const r = e.getBoundingClientRect(), i = Math.max(r.width, r.height), u = i / 2, x = n?.value?.color || getComputedStyle(e).color || "rgb(255, 255, 255)", c = !!n?.value?.center, l = n?.value?.duration || 500;
510
+ o.style.width = o.style.height = `${i}px`, o.style.backgroundColor = x, o.style.animationDuration = `${l}ms`, o.style.position = "absolute", o.style.borderRadius = "50%", o.style.pointerEvents = "none", o.style.left = c ? `${(r.width - i) / 2}px` : t instanceof MouseEvent ? `${t.clientX - r.left - u}px` : `${r.width / 2 - u}px`, o.style.top = c ? `${(r.height - i) / 2}px` : t instanceof MouseEvent ? `${t.clientY - r.top - u}px` : `${r.height / 2 - u}px`, setTimeout(() => {
511
+ o.parentElement && o.parentElement.removeChild(o);
512
+ }, l);
513
+ }, pe = {
514
+ mounted(e, n) {
515
+ if (n?.value?.disabled) return;
516
+ e.classList.contains("v-ripple-element") || e.classList.add("v-ripple-element"), e.__rippleHandler__ = O(e, n);
517
+ const t = n?.value?.event || "pointerdown";
518
+ e.addEventListener(t, e.__rippleHandler__), t !== "keydown" && e.addEventListener("keydown", e.__rippleHandler__);
519
+ },
520
+ updated(e, n) {
521
+ const t = n?.value?.event || "pointerdown";
522
+ n?.value?.disabled && e.__rippleHandler__ ? (e.removeEventListener(t, e.__rippleHandler__), e.removeEventListener("keydown", e.__rippleHandler__), e.classList.remove("v-ripple-element"), delete e.__rippleHandler__) : !n?.value?.disabled && !e.__rippleHandler__ && (e.__rippleHandler__ = O(e, n), e.addEventListener(t, e.__rippleHandler__), t !== "keydown" && e.addEventListener("keydown", e.__rippleHandler__), e.classList.contains("v-ripple-element") || e.classList.add("v-ripple-element"));
523
+ },
524
+ unmounted(e, n) {
525
+ const t = n.event || "pointerdown";
526
+ e.__rippleHandler__ && (e.removeEventListener(t, e.__rippleHandler__), e.removeEventListener("keydown", e.__rippleHandler__), delete e.__rippleHandler__), e.classList.remove("v-ripple-element");
527
+ }
528
+ }, ue = ["viewBox"], be = {
529
+ name: "VIcon"
530
+ }, w = /* @__PURE__ */ j({
531
+ ...be,
532
+ props: {
533
+ color: {},
534
+ disabled: { type: Boolean },
535
+ preffix: {},
536
+ viewBox: { default: "0 0 24 24" },
537
+ icon: {},
538
+ size: { default: "default" }
539
+ },
540
+ setup(e) {
541
+ const n = E(!1), t = D(), o = e, r = E({ iconClass: "icon", iconPreffix: "icon-" }), i = p(() => typeof o.icon != "string"), u = p(() => i.value ? typeof o.icon == "object" && !Array.isArray(o.icon) ? [o.icon] : o.icon : []), g = (c) => {
542
+ const l = { d: c.d };
543
+ return c.fill && (l.class = `${c.fill}--text`), l;
544
+ }, x = p(() => {
545
+ const c = t.class ? `${t.class}` : "", l = ["v-icon", r.value.iconClass, c], y = o.size || "default";
546
+ return l.push(`v-icon--size-${y}`), i.value || l.push(
547
+ `${(o.preffix || r.value.iconPreffix).trim()}${o.icon.trim()}`
548
+ ), o.color && l.push(`${o.color}--text`), l;
549
+ });
550
+ return K(() => {
551
+ if (typeof window < "u") {
552
+ const c = window.getComputedStyle(document.documentElement);
553
+ r.value.iconClass = c.getPropertyValue("--icon-class") || "icon", r.value.iconPreffix = c.getPropertyValue("--icon-prefix") || "icon-";
554
+ }
555
+ n.value = !0;
556
+ }), (c, l) => n.value ? (b(), h("i", {
557
+ key: 0,
558
+ "aria-hidden": "true",
559
+ class: F(x.value)
560
+ }, [
561
+ L(c.$slots, "default", {}, () => [
562
+ i.value ? (b(), h("svg", {
563
+ key: 0,
564
+ xmlns: "http://www.w3.org/2000/svg",
565
+ viewBox: e.viewBox,
566
+ class: "v-icon__svg"
567
+ }, [
568
+ (b(!0), h(X, null, Y(u.value, (y, S) => (b(), h("path", m({ key: S }, { ref_for: !0 }, g(y)), null, 16))), 128))
569
+ ], 8, ue)) : _("", !0)
570
+ ])
571
+ ], 2)) : _("", !0);
572
+ }
573
+ }), ge = {
574
+ class: "v-btn__loader",
575
+ "aria-live": "polite",
576
+ "aria-atomic": "true"
577
+ }, he = {
578
+ role: "progressbar",
579
+ "aria-valuemin": "0",
580
+ "aria-valuemax": "100",
581
+ class: "e-progress-circular e-progress-circular--visible e-progress-circular--indeterminate",
582
+ style: { height: "23px", width: "23px" }
583
+ }, ve = {
584
+ xmlns: "http://www.w3.org/2000/svg",
585
+ viewBox: "21.904761904761905 21.904761904761905 43.80952380952381 43.80952380952381",
586
+ style: { transform: "rotate(0deg)" }
587
+ }, xe = {
588
+ key: 0,
589
+ class: "v-btn__prepend"
590
+ }, ye = { class: "v-btn__content" }, me = {
591
+ key: 1,
592
+ class: "v-btn__append"
593
+ }, P = /* @__PURE__ */ j({
594
+ __name: "VButton",
595
+ props: {
596
+ disabled: { type: Boolean },
597
+ link: { type: Boolean },
598
+ appendIcon: {},
599
+ prependIcon: {},
600
+ ripple: { type: Boolean, default: !0 },
601
+ loading: { type: Boolean },
602
+ color: {},
603
+ fab: { type: Boolean },
604
+ depressed: { type: Boolean },
605
+ text: { type: Boolean },
606
+ outlined: { type: Boolean },
607
+ block: { type: Boolean },
608
+ size: {},
609
+ type: {},
610
+ rounded: { type: Boolean },
611
+ stacked: { type: Boolean },
612
+ icon: {},
613
+ height: {},
614
+ width: {}
615
+ },
616
+ setup(e) {
617
+ const n = { ...pe }, t = D(), o = q(), r = e, i = p(
618
+ () => r.ripple === !1 ? { disabled: !0 } : void 0
619
+ ), u = p(() => ({
620
+ ...r.size ? { size: r.size } : {}
621
+ })), g = p(() => {
622
+ if (r.link) return "a";
623
+ const { to: a } = t;
624
+ return typeof a == "string" && a.startsWith("http") ? "a" : a ? "router-link" : "button";
625
+ }), x = p(() => {
626
+ const { to: a, target: f } = t;
627
+ return typeof a == "string" && a.startsWith("http") ? {
628
+ href: a,
629
+ target: f,
630
+ rel: f === "_blank" ? "noopener noreferrer" : void 0
631
+ } : {};
632
+ }), c = p(
633
+ () => o.default ? o.default().length > 0 : !1
634
+ ), l = p(
635
+ () => !!(r.icon || r.fab) && !r.prependIcon && !r.appendIcon && !c.value
636
+ ), y = p(() => {
637
+ const a = t["aria-label"];
638
+ if (typeof a == "string" && a.trim().length) return a;
639
+ if (l.value && typeof r.icon == "string") return r.icon;
640
+ });
641
+ G(() => {
642
+ });
643
+ const S = () => {
644
+ const a = ["v-btn"], f = r.size || "default";
645
+ a.push(`v-btn--size-${f}`);
646
+ const T = Object.keys(
647
+ U
648
+ ).filter(($) => !!r[$]).map(($) => U[$]);
649
+ return r.ripple !== !1 && a.push("v-ripple-element"), [...a, ...T];
650
+ }, R = () => {
651
+ const a = {};
652
+ if (r.color) {
653
+ const f = r.color;
654
+ a["--df-btn-bg-color"] = `var(--df-color-${f}, var(--df-color-primary))`, a["--df-btn-text-color"] = `var(--df-color-on-${f}, var(--df-color-on-primary))`, a["--df-btn-border-color"] = `var(--df-color-${f}, var(--df-color-primary))`;
655
+ }
656
+ return r.height && (a["--df-btn-height"] = `${r.height}px`), r.width && (a.width = `${r.width}px`), a;
657
+ };
658
+ return (a, f) => B((b(), I(J(g.value), m(x.value, {
659
+ class: S(),
660
+ type: g.value === "button" ? e.type || "button" : void 0,
661
+ disabled: g.value === "button" ? r.disabled : void 0,
662
+ "aria-disabled": r.disabled ? "true" : void 0,
663
+ "aria-busy": r.loading ? "true" : void 0,
664
+ "aria-label": y.value,
665
+ tabindex: r.disabled && g.value !== "button" ? -1 : void 0,
666
+ style: R()
667
+ }), {
668
+ default: Q(() => [
669
+ B(k("span", ge, [
670
+ L(a.$slots, "loading", {}, () => [
671
+ k("span", he, [
672
+ (b(), h("svg", ve, [...f[0] || (f[0] = [
673
+ k("circle", {
674
+ fill: "transparent",
675
+ cx: "43.80952380952381",
676
+ cy: "43.80952380952381",
677
+ r: "20",
678
+ "stroke-width": "3.8095238095238093",
679
+ "stroke-dasharray": "125.664",
680
+ "stroke-dashoffset": "125.66370614359172px",
681
+ class: "e-progress-circular__overlay"
682
+ }, null, -1)
683
+ ])]))
684
+ ])
685
+ ])
686
+ ], 512), [
687
+ [ee, r.loading]
688
+ ]),
689
+ e.prependIcon ? (b(), h("span", xe, [
690
+ W(w, m(u.value, { icon: e.prependIcon }), null, 16, ["icon"])
691
+ ])) : _("", !0),
692
+ k("span", ye, [
693
+ L(a.$slots, "default", {}, () => [
694
+ e.icon || e.fab ? (b(), I(w, m({ key: 0 }, u.value, { icon: e.icon }), null, 16, ["icon"])) : _("", !0)
695
+ ])
696
+ ]),
697
+ e.appendIcon ? (b(), h("span", me, [
698
+ W(w, m(u.value, { icon: e.appendIcon }), null, 16, ["icon"])
699
+ ])) : _("", !0)
700
+ ]),
701
+ _: 3
702
+ }, 16, ["class", "type", "disabled", "aria-disabled", "aria-busy", "aria-label", "tabindex", "style"])), [
703
+ [n, i.value]
704
+ ]);
705
+ }
706
+ });
707
+ P.install = (e) => {
708
+ e.component("VButton", P);
709
+ };
710
+ w.install = (e) => {
711
+ e.component("VIcon", w);
712
+ };
713
+ function He() {
714
+ return {
715
+ isObject: (n) => typeof n == "object" && !Array.isArray(n) && n !== null
716
+ };
717
+ }
718
+ export {
719
+ U as BUTTON_CLASS_MAP,
720
+ z as DashboardUIKey,
721
+ P as VButton,
722
+ w as VIcon,
723
+ M as applyTheme,
724
+ le as btn,
725
+ A as createColorPalette,
726
+ Le as createDarkTheme,
727
+ ke as createDashboardUI,
728
+ de as createTheme,
729
+ re as darkColors,
730
+ H as darkTheme,
731
+ se as elevation,
732
+ ne as generateCSSVars,
733
+ te as generateUtilityClasses,
734
+ fe as icon,
735
+ Ce as iconFactory,
736
+ oe as lightColors,
737
+ v as lightTheme,
738
+ s as materialTokens,
739
+ C as mergeThemes,
740
+ ce as shape,
741
+ ae as spacing,
742
+ ie as typography,
743
+ Se as useDashboardUI,
744
+ $e as useTheme,
745
+ He as useUtils
746
+ };
package/dist/index.umd.js ADDED
@@ -0,0 +1,2 @@
1
+ (function(i,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(i=typeof globalThis<"u"?globalThis:i||self,n(i.DashforgeUI={},i.Vue))})(this,(function(i,n){"use strict";let p=null;function v(e,t){return t?{name:t.name??e.name,colors:{...e.colors,...t.colors||{}},spacing:e.spacing&&t.spacing?{...e.spacing,...t.spacing}:t.spacing||e.spacing,typography:e.typography&&t.typography?{...e.typography,...t.typography}:t.typography||e.typography,shape:e.shape&&t.shape?{...e.shape,...t.shape}:t.shape||e.shape,elevation:e.elevation&&t.elevation?{...e.elevation,...t.elevation}:t.elevation||e.elevation,tokens:{...e.tokens,...t.tokens||{}}}:e}function E(e){const t={};return e.colors&&Object.entries(e.colors).forEach(([o,r])=>{t[`--df-color-${o}`]=r}),e.spacing&&Object.entries(e.spacing).forEach(([o,r])=>{t[`--df-spacing-${o}`]=r}),e.typography&&Object.entries(e.typography).forEach(([o,r])=>{t[`--df-font-size-${o}`]=r.fontSize,t[`--df-font-weight-${o}`]=String(r.fontWeight),t[`--df-line-height-${o}`]=r.lineHeight,t[`--df-letter-spacing-${o}`]=r.letterSpacing}),e.shape&&Object.entries(e.shape).forEach(([o,r])=>{t[`--df-${o}`]=r}),e.elevation&&Object.entries(e.elevation).forEach(([o,r])=>{t[`--df-${o}`]=r}),e.tokens&&Object.entries(e.tokens).forEach(([o,r])=>{t[`--df-${o}`]=r}),t}function H(e,t={}){if(typeof document>"u")return;(!(p&&document.head.contains(p))||t.replace)&&(p&&document.head.contains(p)&&p.remove(),p=document.createElement("style"),p.setAttribute("data-dashforge-utilities","true"),p.setAttribute("type","text/css"),document.head.appendChild(p));const r=[];e.colors&&Object.entries(e.colors).forEach(([a,l])=>{r.push(`.bg-${a}{background-color:var(--df-color-${a},${l})!important}`),r.push(`.text-${a}{color:var(--df-color-${a},${l})!important}`),r.push(`.border-${a}{border-color:var(--df-color-${a},${l})!important}`)}),p&&(p.textContent=r.join(`
2
+ `))}function w(e,t={}){if(typeof document>"u")return;const o=E(e),r=document.documentElement;for(const a in o)r.style.setProperty(a,o[a]);t.generateUtilities&&H(e,{replace:!0})}function S(e){const t=Object.keys(e).filter(o=>!o.startsWith("on-")&&!o.includes("-container"));for(const o of t){const r=`on-${o}`in e,a=`${o}-container`in e,l=`on-${o}-container`in e;r||console.warn(`ColorPalette: Color "${o}" falta "on-${o}"`),a||console.warn(`ColorPalette: Color "${o}" falta "${o}-container"`),l||console.warn(`ColorPalette: Color "${o}" falta "on-${o}-container"`)}return e}const z=S({primary:"#00af67","on-primary":"#ffffff","primary-container":"#b1f5db","on-primary-container":"#00291b",secondary:"#625b71","on-secondary":"#ffffff","secondary-container":"#e8def8","on-secondary-container":"#1d192b",success:"#4caf50","on-success":"#ffffff","success-container":"#c8e6c9","on-success-container":"#1b5e20",warning:"#ffb300","on-warning":"#000000","warning-container":"#ffe082","on-warning-container":"#ff6f00",error:"#b3261e","on-error":"#ffffff","error-container":"#f9dedc","on-error-container":"#410e0b",info:"#2196f3","on-info":"#ffffff","info-container":"#bbdefb","on-info-container":"#0d47a1",input:"#eaddff","on-input":"#000000","input-container":"#fffbfe","on-input-container":"#1c1b1f",grey:"#79747e","on-grey":"#ffffff","grey-container":"#cac7d0","on-grey-container":"#1c1b1f",disabled:"#e0e0e0","on-disabled":"#9e9e9e","disabled-container":"#ded8e1","on-disabled-container":"#1c1b1f",neutral:"#1c1b1f","on-neutral":"#ffffff","neutral-container":"#fffbfe","on-neutral-container":"#1c1b1f","neutral-variant":"#49454e","on-neutral-variant":"#ffffff","neutral-variant-container":"#cac7d0","on-neutral-variant-container":"#1c1b1f",background:"#fffbfe","on-background":"#1c1b1f","background-container":"#fffbfe","on-background-container":"#1c1b1f",surface:"#fffbfe","on-surface":"#1c1b1f","surface-container":"#fffbfe","on-surface-container":"#1c1b1f","surface-dim":"#ded8e1","on-surface-dim":"#1c1b1f","surface-dim-container":"#ded8e1","on-surface-dim-container":"#1c1b1f","surface-bright":"#fffbfe","on-surface-bright":"#1c1b1f","surface-bright-container":"#fffbfe","on-surface-bright-container":"#1c1b1f","on-surface-variant":"#49454e",text:"#1c1b1f","on-text":"#fffbfe","text-container":"#fffbfe","on-text-container":"#1c1b1f","text-secondary":"#49454e","on-text-secondary":"#fffbfe","text-secondary-container":"#fffbfe","on-text-secondary-container":"#1c1b1f","text-tertiary":"#79747e","on-text-tertiary":"#fffbfe","text-tertiary-container":"#fffbfe","on-text-tertiary-container":"#1c1b1f",outline:"#79747e","on-outline":"#1c1b1f","outline-container":"#ded8e1","on-outline-container":"#1c1b1f","outline-variant":"#cac7d0","on-outline-variant":"#1c1b1f","outline-variant-container":"#ded8e1","on-outline-variant-container":"#1c1b1f",white:"#ffffff","on-white":"#000000","white-container":"#fffbfe","on-white-container":"#1c1b1f",black:"#000000","on-black":"#ffffff","black-container":"#1c1b1f","on-black-container":"#ffffff"}),V=S({primary:"#7dffad","on-primary":"#004d32","primary-container":"#007348","on-primary-container":"#b1f5db",secondary:"#ccc7d8","on-secondary":"#312e42","secondary-container":"#4a4458","on-secondary-container":"#e8def8",success:"#81c784","on-success":"#1b5e20","success-container":"#388e3c","on-success-container":"#c8e6c9",warning:"#ffb300","on-warning":"#ff6f00","warning-container":"#ff8f00","on-warning-container":"#ffe082",error:"#f2b8b5","on-error":"#601410","error-container":"#8c1d18","on-error-container":"#f9dedc",info:"#64b5f6","on-info":"#0d47a1","info-container":"#1976d2","on-info-container":"#bbdefb",input:"#523f7f","on-input":"#eaddff","input-container":"#1c1b1f","on-input-container":"#e6e1e5",grey:"#cac7d0","on-grey":"#313033","grey-container":"#49454e","on-grey-container":"#e6e1e5",disabled:"#616161","on-disabled":"#757575","disabled-container":"#0f0d13","on-disabled-container":"#e6e1e5",neutral:"#e6e1e5","on-neutral":"#313033","neutral-container":"#1c1b1f","on-neutral-container":"#e6e1e5","neutral-variant":"#cac7d0","on-neutral-variant":"#49454e","neutral-variant-container":"#49454e","on-neutral-variant-container":"#e6e1e5",background:"#1c1b1f","on-background":"#e6e1e5","background-container":"#1c1b1f","on-background-container":"#e6e1e5",surface:"#1c1b1f","on-surface":"#e6e1e5","surface-container":"#36343b","on-surface-container":"#e6e1e5","surface-dim":"#0f0d13","on-surface-dim":"#e6e1e5","surface-dim-container":"#0f0d13","on-surface-dim-container":"#e6e1e5","surface-bright":"#36343b","on-surface-bright":"#e6e1e5","surface-bright-container":"#36343b","on-surface-bright-container":"#e6e1e5","on-surface-variant":"#cac7d0",text:"#e6e1e5","on-text":"#1c1b1f","text-container":"#1c1b1f","on-text-container":"#e6e1e5","text-secondary":"#cac7d0","on-text-secondary":"#1c1b1f","text-secondary-container":"#1c1b1f","on-text-secondary-container":"#e6e1e5","text-tertiary":"#b0adb8","on-text-tertiary":"#1c1b1f","text-tertiary-container":"#1c1b1f","on-text-tertiary-container":"#e6e1e5",outline:"#938f99","on-outline":"#e6e1e5","outline-container":"#36343b","on-outline-container":"#e6e1e5","outline-variant":"#49454e","on-outline-variant":"#e6e1e5","outline-variant-container":"#36343b","on-outline-variant-container":"#e6e1e5",white:"#ffffff","on-white":"#000000","white-container":"#1c1b1f","on-white-container":"#e6e1e5",black:"#000000","on-black":"#ffffff","black-container":"#1c1b1f","on-black-container":"#ffffff"}),I={xs:"4px",sm:"8px",md:"16px",lg:"24px",xl:"32px","2xl":"48px"},U={"display-large":{fontSize:"57px",fontWeight:400,lineHeight:"64px",letterSpacing:"0px"},"display-medium":{fontSize:"45px",fontWeight:400,lineHeight:"52px",letterSpacing:"0px"},"display-small":{fontSize:"36px",fontWeight:400,lineHeight:"44px",letterSpacing:"0px"},"headline-large":{fontSize:"32px",fontWeight:400,lineHeight:"40px",letterSpacing:"0px"},"headline-medium":{fontSize:"28px",fontWeight:400,lineHeight:"36px",letterSpacing:"0px"},"headline-small":{fontSize:"24px",fontWeight:400,lineHeight:"32px",letterSpacing:"0px"},"title-large":{fontSize:"22px",fontWeight:500,lineHeight:"28px",letterSpacing:"0px"},"title-medium":{fontSize:"16px",fontWeight:500,lineHeight:"24px",letterSpacing:"0.15px"},"title-small":{fontSize:"14px",fontWeight:500,lineHeight:"20px",letterSpacing:"0.1px"},"body-large":{fontSize:"16px",fontWeight:400,lineHeight:"24px",letterSpacing:"0.5px"},"body-medium":{fontSize:"14px",fontWeight:400,lineHeight:"20px",letterSpacing:"0.25px"},"body-small":{fontSize:"12px",fontWeight:400,lineHeight:"16px",letterSpacing:"0.4px"},"label-large":{fontSize:"14px",fontWeight:500,lineHeight:"20px",letterSpacing:"0.1px"},"label-medium":{fontSize:"12px",fontWeight:500,lineHeight:"16px",letterSpacing:"0.5px"},"label-small":{fontSize:"11px",fontWeight:500,lineHeight:"16px",letterSpacing:"0.5px"}},P={"corner-none":"0px","corner-extra-small":"4px","corner-small":"8px","corner-medium":"12px","corner-large":"16px","corner-extra-large":"28px","corner-full":"9999px"},T={"level-0":"none","level-1":"0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24)","level-2":"0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23)","level-3":"0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23)","level-4":"0px 15px 25px rgba(0, 0, 0, 0.15), 0px 10px 10px rgba(0, 0, 0, 0.05)","level-5":"0px 20px 40px rgba(0, 0, 0, 0.2)"},D={states:{focus:.12,hover:.08,active:.12},fontSizes:{"x-small":"0.6875rem",small:"0.75rem",default:"0.875rem",large:"1rem","x-large":"1.125rem"},height:{"x-small":"2rem",small:"2.25rem",default:"2.5rem",large:"3rem","x-large":"3.5rem"},borderRadius:"4px",roundedBorderRadius:"28px",borderStyle:"solid",borderWidth:"1px",fontWeight:500,letterSpacing:"0.1em",textTransform:"uppercase",transitionDuration:"0.28s"},W={class:"df-icon",prefix:"df-icon-",fontSizes:{"x-small":"1rem",small:"1.125rem",default:"1.5rem",large:"2rem","x-large":"3rem"}},f={light:z,dark:V,spacing:I,typography:U,shape:P,elevation:T,btn:D,icon:W,fontFamily:{body:'Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif'}},b={name:"light",colors:f.light,spacing:f.spacing,typography:f.typography,shape:f.shape,elevation:f.elevation},_={name:"dark",colors:f.dark,spacing:f.spacing,typography:f.typography,shape:f.shape,elevation:f.elevation},k=Symbol("DashboardUI");function N(e={}){const t=typeof e.theme=="string"?e.theme==="dark"?_:b:v(b,e.theme||{}),o=n.reactive({theme:t,generateUtilities:e.generateUtilities??!1});return w(o.theme,{generateUtilities:o.generateUtilities}),{install(r){n.provide(k,o),r.config.globalProperties.$dashboardUI=o}}}function A(){const e=n.inject(k);if(!e)throw new Error("createDashboardUI plugin is not installed");return e}function M(){const e=n.inject(k,null);function t(r){let a;r==="light"?a=b:r==="dark"?a=_:(r.colors,a=v(b,r));const l=e?.generateUtilities??!1;return w(a,{generateUtilities:l}),e&&(e.theme=a),a}return{current:n.computed(()=>e?e.theme:null),setTheme:t}}const $={disabled:"v-btn--disabled",icon:"v-btn--icon",depressed:"v-btn--depressed",text:"v-btn--text",fab:"v-btn--fab",block:"v-btn--block",loading:"v-btn--loading",outlined:"v-btn--outlined",rounded:"v-btn--rounded",stacked:"v-btn--stacked"};function O(e,t=b){return{name:e.name??t.name,colors:{...t.colors,...e.colors||{}},spacing:e.spacing??t.spacing??f.spacing,typography:e.typography??t.typography??f.typography,shape:e.shape??t.shape??f.shape,elevation:e.elevation??t.elevation??f.elevation,tokens:{...t.tokens||{},...e.tokens||{}}}}function R(e){return O(e,_)}const Z={arrowLeft:{d:"M14,7L9,12L14,17V7Z"},arrowRight:{d:"M10,17L15,12L10,7V17Z"},arrowDown:{d:"M7,10L12,15L17,10H7Z"},arrowUp:{d:"M7,15L12,10L17,15H7Z"},chevronDown:{d:"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"},clear:{d:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"}},j=(e,t)=>o=>{if(t?.value?.disabled||o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "&&o.key!=="Spacebar")return;e.classList.contains("v-ripple-element")||e.classList.add("v-ripple-element");const r=document.createElement("span");r.classList.add("v-ripple"),e.appendChild(r);const a=e.getBoundingClientRect(),l=Math.max(a.width,a.height),g=l/2,y=t?.value?.color||getComputedStyle(e).color||"rgb(255, 255, 255)",s=!!t?.value?.center,d=t?.value?.duration||500;r.style.width=r.style.height=`${l}px`,r.style.backgroundColor=y,r.style.animationDuration=`${d}ms`,r.style.position="absolute",r.style.borderRadius="50%",r.style.pointerEvents="none",r.style.left=s?`${(a.width-l)/2}px`:o instanceof MouseEvent?`${o.clientX-a.left-g}px`:`${a.width/2-g}px`,r.style.top=s?`${(a.height-l)/2}px`:o instanceof MouseEvent?`${o.clientY-a.top-g}px`:`${a.height/2-g}px`,setTimeout(()=>{r.parentElement&&r.parentElement.removeChild(r)},d)},K={mounted(e,t){if(t?.value?.disabled)return;e.classList.contains("v-ripple-element")||e.classList.add("v-ripple-element"),e.__rippleHandler__=j(e,t);const o=t?.value?.event||"pointerdown";e.addEventListener(o,e.__rippleHandler__),o!=="keydown"&&e.addEventListener("keydown",e.__rippleHandler__)},updated(e,t){const o=t?.value?.event||"pointerdown";t?.value?.disabled&&e.__rippleHandler__?(e.removeEventListener(o,e.__rippleHandler__),e.removeEventListener("keydown",e.__rippleHandler__),e.classList.remove("v-ripple-element"),delete e.__rippleHandler__):!t?.value?.disabled&&!e.__rippleHandler__&&(e.__rippleHandler__=j(e,t),e.addEventListener(o,e.__rippleHandler__),o!=="keydown"&&e.addEventListener("keydown",e.__rippleHandler__),e.classList.contains("v-ripple-element")||e.classList.add("v-ripple-element"))},unmounted(e,t){const o=t.event||"pointerdown";e.__rippleHandler__&&(e.removeEventListener(o,e.__rippleHandler__),e.removeEventListener("keydown",e.__rippleHandler__),delete e.__rippleHandler__),e.classList.remove("v-ripple-element")}},F=["viewBox"],q={name:"VIcon"},m=n.defineComponent({...q,props:{color:{},disabled:{type:Boolean},preffix:{},viewBox:{default:"0 0 24 24"},icon:{},size:{default:"default"}},setup(e){const t=n.ref(!1),o=n.useAttrs(),r=e,a=n.ref({iconClass:"icon",iconPreffix:"icon-"}),l=n.computed(()=>typeof r.icon!="string"),g=n.computed(()=>l.value?typeof r.icon=="object"&&!Array.isArray(r.icon)?[r.icon]:r.icon:[]),h=s=>{const d={d:s.d};return s.fill&&(d.class=`${s.fill}--text`),d},y=n.computed(()=>{const s=o.class?`${o.class}`:"",d=["v-icon",a.value.iconClass,s],x=r.size||"default";return d.push(`v-icon--size-${x}`),l.value||d.push(`${(r.preffix||a.value.iconPreffix).trim()}${r.icon.trim()}`),r.color&&d.push(`${r.color}--text`),d});return n.onMounted(()=>{if(typeof window<"u"){const s=window.getComputedStyle(document.documentElement);a.value.iconClass=s.getPropertyValue("--icon-class")||"icon",a.value.iconPreffix=s.getPropertyValue("--icon-prefix")||"icon-"}t.value=!0}),(s,d)=>t.value?(n.openBlock(),n.createElementBlock("i",{key:0,"aria-hidden":"true",class:n.normalizeClass(y.value)},[n.renderSlot(s.$slots,"default",{},()=>[l.value?(n.openBlock(),n.createElementBlock("svg",{key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:e.viewBox,class:"v-icon__svg"},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(g.value,(x,C)=>(n.openBlock(),n.createElementBlock("path",n.mergeProps({key:C},{ref_for:!0},h(x)),null,16))),128))],8,F)):n.createCommentVNode("",!0)])],2)):n.createCommentVNode("",!0)}}),X={class:"v-btn__loader","aria-live":"polite","aria-atomic":"true"},Y={role:"progressbar","aria-valuemin":"0","aria-valuemax":"100",class:"e-progress-circular e-progress-circular--visible e-progress-circular--indeterminate",style:{height:"23px",width:"23px"}},G={xmlns:"http://www.w3.org/2000/svg",viewBox:"21.904761904761905 21.904761904761905 43.80952380952381 43.80952380952381",style:{transform:"rotate(0deg)"}},J={key:0,class:"v-btn__prepend"},Q={class:"v-btn__content"},ee={key:1,class:"v-btn__append"},L=n.defineComponent({__name:"VButton",props:{disabled:{type:Boolean},link:{type:Boolean},appendIcon:{},prependIcon:{},ripple:{type:Boolean,default:!0},loading:{type:Boolean},color:{},fab:{type:Boolean},depressed:{type:Boolean},text:{type:Boolean},outlined:{type:Boolean},block:{type:Boolean},size:{},type:{},rounded:{type:Boolean},stacked:{type:Boolean},icon:{},height:{},width:{}},setup(e){const t={...K},o=n.useAttrs(),r=n.useSlots(),a=e,l=n.computed(()=>a.ripple===!1?{disabled:!0}:void 0),g=n.computed(()=>({...a.size?{size:a.size}:{}})),h=n.computed(()=>{if(a.link)return"a";const{to:c}=o;return typeof c=="string"&&c.startsWith("http")?"a":c?"router-link":"button"}),y=n.computed(()=>{const{to:c,target:u}=o;return typeof c=="string"&&c.startsWith("http")?{href:c,target:u,rel:u==="_blank"?"noopener noreferrer":void 0}:{}}),s=n.computed(()=>r.default?r.default().length>0:!1),d=n.computed(()=>!!(a.icon||a.fab)&&!a.prependIcon&&!a.appendIcon&&!s.value),x=n.computed(()=>{const c=o["aria-label"];if(typeof c=="string"&&c.trim().length)return c;if(d.value&&typeof a.icon=="string")return a.icon});n.watchEffect(()=>{});const C=()=>{const c=["v-btn"],u=a.size||"default";c.push(`v-btn--size-${u}`);const oe=Object.keys($).filter(B=>!!a[B]).map(B=>$[B]);return a.ripple!==!1&&c.push("v-ripple-element"),[...c,...oe]},te=()=>{const c={};if(a.color){const u=a.color;c["--df-btn-bg-color"]=`var(--df-color-${u}, var(--df-color-primary))`,c["--df-btn-text-color"]=`var(--df-color-on-${u}, var(--df-color-on-primary))`,c["--df-btn-border-color"]=`var(--df-color-${u}, var(--df-color-primary))`}return a.height&&(c["--df-btn-height"]=`${a.height}px`),a.width&&(c.width=`${a.width}px`),c};return(c,u)=>n.withDirectives((n.openBlock(),n.createBlock(n.resolveDynamicComponent(h.value),n.mergeProps(y.value,{class:C(),type:h.value==="button"?e.type||"button":void 0,disabled:h.value==="button"?a.disabled:void 0,"aria-disabled":a.disabled?"true":void 0,"aria-busy":a.loading?"true":void 0,"aria-label":x.value,tabindex:a.disabled&&h.value!=="button"?-1:void 0,style:te()}),{default:n.withCtx(()=>[n.withDirectives(n.createElementVNode("span",X,[n.renderSlot(c.$slots,"loading",{},()=>[n.createElementVNode("span",Y,[(n.openBlock(),n.createElementBlock("svg",G,[...u[0]||(u[0]=[n.createElementVNode("circle",{fill:"transparent",cx:"43.80952380952381",cy:"43.80952380952381",r:"20","stroke-width":"3.8095238095238093","stroke-dasharray":"125.664","stroke-dashoffset":"125.66370614359172px",class:"e-progress-circular__overlay"},null,-1)])]))])])],512),[[n.vShow,a.loading]]),e.prependIcon?(n.openBlock(),n.createElementBlock("span",J,[n.createVNode(m,n.mergeProps(g.value,{icon:e.prependIcon}),null,16,["icon"])])):n.createCommentVNode("",!0),n.createElementVNode("span",Q,[n.renderSlot(c.$slots,"default",{},()=>[e.icon||e.fab?(n.openBlock(),n.createBlock(m,n.mergeProps({key:0},g.value,{icon:e.icon}),null,16,["icon"])):n.createCommentVNode("",!0)])]),e.appendIcon?(n.openBlock(),n.createElementBlock("span",ee,[n.createVNode(m,n.mergeProps(g.value,{icon:e.appendIcon}),null,16,["icon"])])):n.createCommentVNode("",!0)]),_:3},16,["class","type","disabled","aria-disabled","aria-busy","aria-label","tabindex","style"])),[[t,l.value]])}});L.install=e=>{e.component("VButton",L)},m.install=e=>{e.component("VIcon",m)};function ne(){return{isObject:t=>typeof t=="object"&&!Array.isArray(t)&&t!==null}}i.BUTTON_CLASS_MAP=$,i.DashboardUIKey=k,i.VButton=L,i.VIcon=m,i.applyTheme=w,i.btn=D,i.createColorPalette=S,i.createDarkTheme=R,i.createDashboardUI=N,i.createTheme=O,i.darkColors=V,i.darkTheme=_,i.elevation=T,i.generateCSSVars=E,i.generateUtilityClasses=H,i.icon=W,i.iconFactory=Z,i.lightColors=z,i.lightTheme=b,i.materialTokens=f,i.mergeThemes=v,i.shape=P,i.spacing=I,i.typography=U,i.useDashboardUI=A,i.useTheme=M,i.useUtils=ne,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
package/package.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "name": "dashforge-ui",
3
+ "version": "0.1.0",
4
+ "private": false,
5
+ "description": "Dashboard-focused Vue 3 UI framework skeleton (TypeScript, Vite, SCSS, theming)",
6
+ "main": "dist/index.umd.js",
7
+ "module": "dist/index.es.js",
8
+ "types": "dist/index.d.ts",
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "scripts": {
13
+ "dev": "vite",
14
+ "build:lib": "vite build",
15
+ "play": "vite --config playground/vite.config.ts",
16
+ "typecheck": "vue-tsc --noEmit",
17
+ "test": "vitest",
18
+ "test:run": "vitest --run",
19
+ "gen:docs": "node scripts/generate-docs.mjs",
20
+ "gen:utils": "node scripts/generate-utility-classes.mjs"
21
+ },
22
+ "keywords": [
23
+ "vue",
24
+ "ui",
25
+ "dashboard",
26
+ "theme",
27
+ "vite",
28
+ "typescript"
29
+ ],
30
+ "author": "",
31
+ "license": "MIT",
32
+ "devDependencies": {
33
+ "@types/node": "^20.0.0",
34
+ "@vitejs/plugin-vue": "^6.0.4",
35
+ "@vue/test-utils": "^2.4.6",
36
+ "jsdom": "^28.1.0",
37
+ "sass": "^1.97.3",
38
+ "typescript": "^5.5.4",
39
+ "vite": "^7.3.1",
40
+ "vitest": "^1.3.0",
41
+ "vue": "^3.4.0",
42
+ "vue-tsc": "^2.1.10"
43
+ },
44
+ "peerDependencies": {
45
+ "vue": "^3.2.0"
46
+ },
47
+ "type": "module"
48
+ }