@quidgest/ui 0.1.0 → 0.2.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.
- package/README.md +1 -1
- package/dist/ui.esm.js +633 -546
- package/dist/ui.esm.js.map +1 -1
- package/dist/ui.js +4 -3
- package/dist/ui.js.map +1 -1
- package/dist/ui.min.js +141 -119
- package/dist/ui.min.js.map +1 -1
- package/lib/components/QButton/QButton.vue.d.ts +4 -4
- package/lib/components/QButton/QButton.vue.d.ts.map +1 -1
- package/lib/composables/{defaults/index.d.ts → defaults.d.ts} +1 -1
- package/lib/composables/defaults.d.ts.map +1 -0
- package/lib/composables/{overlay/index.d.ts → overlay.d.ts} +1 -1
- package/lib/composables/overlay.d.ts.map +1 -0
- package/lib/composables/theme.d.ts +26 -0
- package/lib/composables/theme.d.ts.map +1 -0
- package/lib/styles/ui.css +25 -9
- package/lib/styles/ui.min.css +1 -1
- package/lib/styles/ui.scss +27 -12
- package/lib/templates/index.d.ts +2 -0
- package/lib/templates/index.d.ts.map +1 -0
- package/lib/templates/theme.d.ts +4 -0
- package/lib/templates/theme.d.ts.map +1 -0
- package/lib/utils/color.d.ts +82 -0
- package/lib/utils/color.d.ts.map +1 -0
- package/package.json +1 -1
- package/lib/composables/defaults/index.d.ts.map +0 -1
- package/lib/composables/overlay/index.d.ts.map +0 -1
- package/lib/composables/theme/index.d.ts +0 -55
- package/lib/composables/theme/index.d.ts.map +0 -1
|
@@ -6,7 +6,7 @@ export type QButtonProps = {
|
|
|
6
6
|
/**
|
|
7
7
|
* The style of the button.
|
|
8
8
|
*/
|
|
9
|
-
bStyle?: 'primary' | 'secondary' | '
|
|
9
|
+
bStyle?: 'primary' | 'secondary' | 'tertiary' | 'danger';
|
|
10
10
|
/**
|
|
11
11
|
* The label of the button.
|
|
12
12
|
*/
|
|
@@ -53,7 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
53
53
|
type: import("vue").PropType<boolean>;
|
|
54
54
|
};
|
|
55
55
|
bStyle: {
|
|
56
|
-
type: import("vue").PropType<"
|
|
56
|
+
type: import("vue").PropType<"primary" | "secondary" | "tertiary" | "danger">;
|
|
57
57
|
default: string;
|
|
58
58
|
};
|
|
59
59
|
disabled: {
|
|
@@ -89,7 +89,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
89
89
|
type: import("vue").PropType<boolean>;
|
|
90
90
|
};
|
|
91
91
|
bStyle: {
|
|
92
|
-
type: import("vue").PropType<"
|
|
92
|
+
type: import("vue").PropType<"primary" | "secondary" | "tertiary" | "danger">;
|
|
93
93
|
default: string;
|
|
94
94
|
};
|
|
95
95
|
disabled: {
|
|
@@ -115,7 +115,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
115
115
|
}, {
|
|
116
116
|
size: "small" | "regular";
|
|
117
117
|
label: string;
|
|
118
|
-
bStyle: "
|
|
118
|
+
bStyle: "primary" | "secondary" | "tertiary" | "danger";
|
|
119
119
|
}, {}>, {
|
|
120
120
|
default?(_: {}): any;
|
|
121
121
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/QButton.vue.ts"],"names":[],"mappings":"AAQC,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,
|
|
1
|
+
{"version":3,"file":"QButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/QButton.vue.ts"],"names":[],"mappings":"AAQC,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAA;IAExD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;CAC1B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKF,wBAAwG;AAWxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|
|
@@ -4,4 +4,4 @@ export type ComponentDefaults = Record<string | symbol, unknown>;
|
|
|
4
4
|
export declare function useDefaults(): ComponentDefaults;
|
|
5
5
|
export declare function provideDefaults(defaults: Defaults): void;
|
|
6
6
|
export declare function injectDefaults(): Defaults;
|
|
7
|
-
//# sourceMappingURL=
|
|
7
|
+
//# sourceMappingURL=defaults.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/composables/defaults.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,eAAe,CAAA;AAE3C,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,iBAAiB,CAAC,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,CAAA;AAEhE,wBAAgB,WAAW,sBAW1B;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,QAAQ,QAKjD;AAED,wBAAgB,cAAc,aAM7B"}
|
|
@@ -10,4 +10,4 @@ export type Position = {
|
|
|
10
10
|
* Reposition the overlay based on its size and the position of its anchor.
|
|
11
11
|
*/
|
|
12
12
|
export declare function computePosition(anchor: Element, overlay: Element, tentativePlacement?: Placement): Position;
|
|
13
|
-
//# sourceMappingURL=
|
|
13
|
+
//# sourceMappingURL=overlay.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/composables/overlay.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,CAAA;AAC/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC3D,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAA;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACtB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,SAAS,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC9B,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,OAAO,EAChB,kBAAkB,GAAE,SAAmB,GACrC,QAAQ,CAuCV"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ColorScheme } from '@/utils/color';
|
|
2
|
+
import { App, Ref } from 'vue';
|
|
3
|
+
export declare const THEME_SYMBOL = "q-theme";
|
|
4
|
+
export type ThemeMode = 'light' | 'dark';
|
|
5
|
+
export interface AppThemes {
|
|
6
|
+
defaultTheme: string;
|
|
7
|
+
themes: Array<{
|
|
8
|
+
name: string;
|
|
9
|
+
mode: ThemeMode;
|
|
10
|
+
colors?: Partial<ColorScheme>;
|
|
11
|
+
}>;
|
|
12
|
+
}
|
|
13
|
+
export interface ThemeDefinition {
|
|
14
|
+
name: string;
|
|
15
|
+
mode: ThemeMode;
|
|
16
|
+
colors: ColorScheme;
|
|
17
|
+
}
|
|
18
|
+
export interface ThemeConfiguration {
|
|
19
|
+
activeTheme: string;
|
|
20
|
+
themes: ThemeDefinition[];
|
|
21
|
+
}
|
|
22
|
+
export declare function useTheme(): Ref<ThemeConfiguration>;
|
|
23
|
+
export declare function installThemes(app: App, config?: AppThemes): void;
|
|
24
|
+
export declare function generateRootStyle(colors: Partial<ColorScheme>): void;
|
|
25
|
+
export declare function toProperty(color: string): string;
|
|
26
|
+
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/composables/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAS,WAAW,EAA2C,MAAM,eAAe,CAAA;AAE3F,OAAO,EAAE,GAAG,EAAE,GAAG,EAAsB,MAAM,KAAK,CAAA;AAElD,eAAO,MAAM,YAAY,YAAY,CAAA;AAErC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,WAAW,SAAS;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,MAAM,EAAE,KAAK,CAAC;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,EAAE,SAAS,CAAA;QACf,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;KAC7B,CAAC,CAAA;CACF;AAED,MAAM,WAAW,eAAe;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,WAAW,CAAA;CACnB;AAED,MAAM,WAAW,kBAAkB;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,eAAe,EAAE,CAAA;CACzB;AAED,wBAAgB,QAAQ,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAMlD;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,SAAS,QA6EzD;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,QA+B7D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAOvC"}
|
package/lib/styles/ui.css
CHANGED
|
@@ -327,6 +327,7 @@ template {
|
|
|
327
327
|
|
|
328
328
|
/* Components */
|
|
329
329
|
.q-btn {
|
|
330
|
+
--outline-color: var(--q-theme-primary);
|
|
330
331
|
position: relative;
|
|
331
332
|
display: flex;
|
|
332
333
|
flex-direction: row;
|
|
@@ -341,11 +342,20 @@ template {
|
|
|
341
342
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
342
343
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
343
344
|
transition-duration: 0.15s;
|
|
345
|
+
outline-offset: 1px;
|
|
344
346
|
line-height: 15px;
|
|
345
347
|
}
|
|
346
348
|
.q-btn:hover:not(:disabled) {
|
|
347
349
|
cursor: pointer;
|
|
348
350
|
}
|
|
351
|
+
.q-btn:focus {
|
|
352
|
+
outline: 2px solid var(--outline-color);
|
|
353
|
+
z-index: 3;
|
|
354
|
+
}
|
|
355
|
+
.q-btn:focus:not(:focus-visible) {
|
|
356
|
+
outline: 0;
|
|
357
|
+
box-shadow: none;
|
|
358
|
+
}
|
|
349
359
|
.q-btn__content {
|
|
350
360
|
position: relative;
|
|
351
361
|
display: flex;
|
|
@@ -376,6 +386,9 @@ template {
|
|
|
376
386
|
.q-btn:disabled {
|
|
377
387
|
opacity: 0.6;
|
|
378
388
|
}
|
|
389
|
+
.q-btn--loading {
|
|
390
|
+
cursor: progress;
|
|
391
|
+
}
|
|
379
392
|
.q-btn--loading span {
|
|
380
393
|
visibility: hidden;
|
|
381
394
|
}
|
|
@@ -397,7 +410,16 @@ template {
|
|
|
397
410
|
border-color: var(--q-theme-primary-dark);
|
|
398
411
|
color: var(--q-theme-on-primary);
|
|
399
412
|
}
|
|
413
|
+
.q-btn--tertiary {
|
|
414
|
+
background-color: transparent;
|
|
415
|
+
border-color: transparent;
|
|
416
|
+
color: var(--q-theme-primary);
|
|
417
|
+
}
|
|
418
|
+
.q-btn--tertiary:hover:not(:disabled), .q-btn--tertiary:focus:not(:disabled) {
|
|
419
|
+
color: var(--q-theme-primary-dark);
|
|
420
|
+
}
|
|
400
421
|
.q-btn--danger {
|
|
422
|
+
--outline-color: var(--q-theme-danger-light);
|
|
401
423
|
background-color: var(--q-theme-danger);
|
|
402
424
|
border-color: var(--q-theme-danger);
|
|
403
425
|
color: var(--q-theme-on-danger);
|
|
@@ -406,14 +428,6 @@ template {
|
|
|
406
428
|
background-color: var(--q-theme-danger-dark);
|
|
407
429
|
border-color: var(--q-theme-danger-dark);
|
|
408
430
|
}
|
|
409
|
-
.q-btn--link {
|
|
410
|
-
background-color: transparent;
|
|
411
|
-
border-color: transparent;
|
|
412
|
-
color: var(--q-theme-primary);
|
|
413
|
-
}
|
|
414
|
-
.q-btn--link:hover:not(:disabled), .q-btn--link:focus:not(:disabled) {
|
|
415
|
-
color: var(--q-theme-primary-dark);
|
|
416
|
-
}
|
|
417
431
|
.q-btn--small {
|
|
418
432
|
padding: 0.25rem;
|
|
419
433
|
line-height: 14px;
|
|
@@ -507,7 +521,7 @@ template {
|
|
|
507
521
|
.q-overlay {
|
|
508
522
|
--q-overlay-bg: var(--q-theme-background);
|
|
509
523
|
--q-overlay-color: var(--q-theme-on-background);
|
|
510
|
-
--q-overlay-border-color: var(--q-theme-
|
|
524
|
+
--q-overlay-border-color: rgb(var(--q-theme-on-background-rgb) / 0.1);
|
|
511
525
|
position: absolute;
|
|
512
526
|
}
|
|
513
527
|
.q-overlay__content {
|
|
@@ -626,6 +640,8 @@ template {
|
|
|
626
640
|
font-size: 0.9rem;
|
|
627
641
|
background-color: color-mix(in srgb, var(--q-overlay-color) 4%, var(--q-overlay-bg));
|
|
628
642
|
border-bottom: 1px solid var(--q-overlay-border-color);
|
|
643
|
+
border-top-left-radius: inherit;
|
|
644
|
+
border-top-right-radius: inherit;
|
|
629
645
|
}
|
|
630
646
|
.q-popover__body {
|
|
631
647
|
padding: 1rem;
|
package/lib/styles/ui.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.fade-enter-from,.fade-leave-to{opacity:0}.fade-enter-to,.fade-leave-from{opacity:1}.fade-enter-active,.fade-leave-active{transition:opacity 0.15s ease-in-out}.q-btn{position:relative;display:flex;flex-direction:row;align-items:center;padding:0.4rem;border:thin solid;background-color:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;border-radius:0.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:0.15s;line-height:15px}.q-btn:hover:not(:disabled){cursor:pointer}.q-btn__content{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:0.9rem;white-space:nowrap;gap:0.25rem;pointer-events:none;line-height:15px;min-width:15px}.q-btn .e-icon__svg{padding:0;margin:0;fill:currentColor;width:15px;height:15px}.q-btn .q-spinner-loader{color:currentColor}.q-btn--active{z-index:2;background-color:var(--q-theme-primary-light)}.q-btn:disabled{opacity:0.6}.q-btn--loading span{visibility:hidden}.q-btn--primary{background-color:var(--q-theme-primary);border-color:var(--q-theme-primary);color:var(--q-theme-on-primary)}.q-btn--primary:hover:not(:disabled){background-color:var(--q-theme-primary-dark);border-color:var(--q-theme-primary-dark)}.q-btn--secondary{border-color:currentColor;color:var(--q-theme-primary)}.q-btn--secondary:hover:not(:disabled){background-color:var(--q-theme-primary-dark);border-color:var(--q-theme-primary-dark);color:var(--q-theme-on-primary)}.q-btn--
|
|
1
|
+
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.fade-enter-from,.fade-leave-to{opacity:0}.fade-enter-to,.fade-leave-from{opacity:1}.fade-enter-active,.fade-leave-active{transition:opacity 0.15s ease-in-out}.q-btn{--outline-color:var(--q-theme-primary);position:relative;display:flex;flex-direction:row;align-items:center;padding:0.4rem;border:thin solid;background-color:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;border-radius:0.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:0.15s;outline-offset:1px;line-height:15px}.q-btn:hover:not(:disabled){cursor:pointer}.q-btn:focus{outline:2px solid var(--outline-color);z-index:3}.q-btn:focus:not(:focus-visible){outline:0;box-shadow:none}.q-btn__content{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:0.9rem;white-space:nowrap;gap:0.25rem;pointer-events:none;line-height:15px;min-width:15px}.q-btn .e-icon__svg{padding:0;margin:0;fill:currentColor;width:15px;height:15px}.q-btn .q-spinner-loader{color:currentColor}.q-btn--active{z-index:2;background-color:var(--q-theme-primary-light)}.q-btn:disabled{opacity:0.6}.q-btn--loading{cursor:progress}.q-btn--loading span{visibility:hidden}.q-btn--primary{background-color:var(--q-theme-primary);border-color:var(--q-theme-primary);color:var(--q-theme-on-primary)}.q-btn--primary:hover:not(:disabled){background-color:var(--q-theme-primary-dark);border-color:var(--q-theme-primary-dark)}.q-btn--secondary{border-color:currentColor;color:var(--q-theme-primary)}.q-btn--secondary:hover:not(:disabled){background-color:var(--q-theme-primary-dark);border-color:var(--q-theme-primary-dark);color:var(--q-theme-on-primary)}.q-btn--tertiary{background-color:transparent;border-color:transparent;color:var(--q-theme-primary)}.q-btn--tertiary:focus:not(:disabled),.q-btn--tertiary:hover:not(:disabled){color:var(--q-theme-primary-dark)}.q-btn--danger{--outline-color:var(--q-theme-danger-light);background-color:var(--q-theme-danger);border-color:var(--q-theme-danger);color:var(--q-theme-on-danger)}.q-btn--danger:hover:not(:disabled){background-color:var(--q-theme-danger-dark);border-color:var(--q-theme-danger-dark)}.q-btn--small{padding:0.25rem;line-height:14px}.q-btn--small span{font-size:0.75rem;line-height:14px}.q-btn--small .e-icon__svg{width:14px;height:14px}.q-btn--borderless{border-color:transparent!important}.q-btn--elevated{box-shadow:0px 2px 4px -1px rgba(0,0,0,.2),0px 4px 5px 0px rgba(0,0,0,.14),0px 1px 10px 0px rgba(0,0,0,.12)}.q-btn--block{display:block;width:100%;padding:0.5rem}.q-btn--block span{gap:0.5rem}.q-btn--block+.q-btn--block{margin-top:0.5rem}.q-btn__spinner{position:absolute;left:50%;transform:translateX(-50%)}.q-btn-group{position:relative;display:inline-flex;border-radius:0.25rem}.q-btn-group--elevated{box-shadow:0px 2px 4px -1px rgba(0,0,0,.2),0px 4px 5px 0px rgba(0,0,0,.14),0px 1px 10px 0px rgba(0,0,0,.12)}.q-btn-group>.q-btn{position:relative;flex:0 1 auto}.q-btn-group>.q-btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.q-btn-group>.q-btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.q-btn-group>.q-btn:hover{z-index:3}.q-line-loader{width:100%;height:2px;display:inline-block;position:relative;background:transparent;overflow:hidden}.q-line-loader:after{content:"";min-width:33%;height:2px;background:linear-gradient(to right,#edebe9 0%,var(--q-theme-primary) 50%,#edebe9 100%);position:absolute;top:0;left:0;box-sizing:border-box;animation:q-move 2s linear infinite}@keyframes q-move{0%{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(0%)}}.q-overlay{--q-overlay-bg:var(--q-theme-background);--q-overlay-color:var(--q-theme-on-background);--q-overlay-border-color:rgb(var(--q-theme-on-background-rgb)/0.1);position:absolute}.q-overlay__content{display:block;position:relative;transform:translateX(-50%);width:-moz-max-content;width:max-content;z-index:1070;background-color:var(--q-overlay-bg);color:var(--q-overlay-color);background-clip:padding-box;border:1px solid var(--q-overlay-border-color);border-radius:0.25rem;box-shadow:0 0 transparent,0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.q-overlay__arrow{position:absolute;display:block;width:1rem;height:0.5rem}.q-overlay__arrow:after,.q-overlay__arrow:before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.q-overlay--top .q-overlay__arrow{left:calc(50% - 0.5rem);bottom:calc(-0.5rem - 1px)}.q-overlay--top .q-overlay__arrow:after,.q-overlay--top .q-overlay__arrow:before{border-width:0.5rem 0.5rem 0}.q-overlay--top .q-overlay__arrow:before{bottom:0;border-top-color:var(--q-overlay-border-color)}.q-overlay--top .q-overlay__arrow:after{bottom:1px;border-top-color:var(--q-overlay-bg)}.q-overlay--bottom .q-overlay__arrow{top:calc(-0.5rem - 1px);left:calc(50% - 0.5rem)}.q-overlay--bottom .q-overlay__arrow:after,.q-overlay--bottom .q-overlay__arrow:before{border-width:0 0.5rem 0.5rem}.q-overlay--bottom .q-overlay__arrow:before{top:0;border-bottom-color:var(--q-overlay-border-color)}.q-overlay--bottom .q-overlay__arrow:after{top:1px;border-bottom-color:var(--q-overlay-bg)}.q-overlay--left .q-overlay__arrow{top:calc(50% - 0.5rem);right:-0.5rem;width:0.5rem;height:1rem}.q-overlay--left .q-overlay__arrow:after,.q-overlay--left .q-overlay__arrow:before{border-width:0.5rem 0 0.5rem 0.5rem}.q-overlay--left .q-overlay__arrow:before{right:0;border-left-color:var(--q-overlay-border-color)}.q-overlay--left .q-overlay__arrow:after{right:1px;border-left-color:var(--q-overlay-bg)}.q-overlay--right .q-overlay__arrow{top:calc(50% - 0.5rem);left:-0.5rem;width:0.5rem;height:1rem}.q-overlay--right .q-overlay__arrow:after,.q-overlay--right .q-overlay__arrow:before{border-width:0.5rem 0.5rem 0.5rem 0}.q-overlay--right .q-overlay__arrow:before{left:0;border-right-color:var(--q-overlay-border-color)}.q-overlay--right .q-overlay__arrow:after{left:1px;border-right-color:var(--q-overlay-bg)}.q-overlay--inverted{--q-overlay-bg:var(--q-theme-on-background);--q-overlay-color:var(--q-theme-background);--q-overlay-border-color:transparent}.q-popover .q-overlay__content{z-index:1070;position:relative;max-width:276px;line-height:1.5;word-break:normal;word-spacing:normal;word-wrap:break-word;white-space:normal;line-break:auto;font-size:0.7875rem}.q-popover__header{padding:0.5rem 1rem;margin:0;font-size:0.9rem;background-color:color-mix(in srgb,var(--q-overlay-color) 4%,var(--q-overlay-bg));border-bottom:1px solid var(--q-overlay-border-color);border-top-left-radius:inherit;border-top-right-radius:inherit}.q-popover__body{padding:1rem}.q-popover.q-overlay--bottom .q-overlay__arrow:after{border-bottom-color:color-mix(in srgb,var(--q-overlay-color) 4%,var(--q-overlay-bg))}.q-spinner-loader{display:flex;position:relative;width:1em;height:1em;font-size:48px;line-height:1;align-items:center;justify-content:center;color:var(--q-theme-primary)}.q-spinner-loader svg{width:100%;height:100%;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;animation:q-spin 2s linear infinite;transform-origin:center center}.q-spinner-loader .path{stroke-dasharray:1,250;stroke-dashoffset:0;animation:q-md-dash 1.5s ease-in-out infinite}@keyframes q-spin{0%{transform:rotate3d(0,0,1,0)}25%{transform:rotate3d(0,0,1,90deg)}50%{transform:rotate3d(0,0,1,180deg)}75%{transform:rotate3d(0,0,1,270deg)}to{transform:rotate3d(0,0,1,359deg)}}@keyframes q-md-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.q-tooltip .q-overlay__content{padding:0.5rem;text-align:center;font-style:normal;font-size:0.7875rem;font-weight:400;text-decoration:none;text-shadow:none;text-transform:none;line-height:1.5;line-break:auto;word-wrap:break-word;word-break:normal;word-spacing:normal;white-space:normal;letter-spacing:normal;max-width:200px}
|
package/lib/styles/ui.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Quid UI Framework v0.
|
|
2
|
+
* Quid UI Framework v0.2.0
|
|
3
3
|
* (c) 2023 Quidgest - Consultores de Gestão, SA
|
|
4
4
|
*/
|
|
5
5
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
@@ -249,13 +249,15 @@ $btn-color-primary: var(--q-theme-on-primary);
|
|
|
249
249
|
$btn-hover-bg-primary: var(--q-theme-primary-dark);
|
|
250
250
|
$btn-bg-secondary: var(--q-theme-secondary);
|
|
251
251
|
$btn-color-secondary: var(--q-theme-primary);
|
|
252
|
+
$btn-color-tertiary: var(--q-theme-primary);
|
|
252
253
|
$btn-bg-danger: var(--q-theme-danger);
|
|
253
254
|
$btn-color-danger: var(--q-theme-on-danger);
|
|
254
255
|
$btn-hover-bg-danger: var(--q-theme-danger-dark);
|
|
255
|
-
$btn-color-link: var(--q-theme-primary);
|
|
256
256
|
$btn-bg-active: var(--q-theme-primary-light);
|
|
257
|
+
$btn-outline: var(--q-theme-primary-light);
|
|
257
258
|
.q-btn {
|
|
258
259
|
$this: &;
|
|
260
|
+
--outline-color: var(--q-theme-primary);
|
|
259
261
|
position: relative;
|
|
260
262
|
display: flex;
|
|
261
263
|
flex-direction: row;
|
|
@@ -270,6 +272,7 @@ $btn-bg-active: var(--q-theme-primary-light);
|
|
|
270
272
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
271
273
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
272
274
|
transition-duration: 0.15s;
|
|
275
|
+
outline-offset: 1px;
|
|
273
276
|
@if $compact {
|
|
274
277
|
line-height: 15px;
|
|
275
278
|
} @else {
|
|
@@ -278,6 +281,14 @@ $btn-bg-active: var(--q-theme-primary-light);
|
|
|
278
281
|
&:hover:not(:disabled) {
|
|
279
282
|
cursor: pointer;
|
|
280
283
|
}
|
|
284
|
+
&:focus {
|
|
285
|
+
outline: 2px solid var(--outline-color);
|
|
286
|
+
z-index: 3;
|
|
287
|
+
&:not(:focus-visible) {
|
|
288
|
+
outline: 0;
|
|
289
|
+
box-shadow: none;
|
|
290
|
+
}
|
|
291
|
+
}
|
|
281
292
|
&__content {
|
|
282
293
|
position: relative;
|
|
283
294
|
display: flex;
|
|
@@ -320,6 +331,7 @@ $btn-bg-active: var(--q-theme-primary-light);
|
|
|
320
331
|
opacity: 0.6;
|
|
321
332
|
}
|
|
322
333
|
&--loading {
|
|
334
|
+
cursor: progress;
|
|
323
335
|
span {
|
|
324
336
|
visibility: hidden;
|
|
325
337
|
}
|
|
@@ -343,7 +355,17 @@ $btn-bg-active: var(--q-theme-primary-light);
|
|
|
343
355
|
color: $btn-color-primary;
|
|
344
356
|
}
|
|
345
357
|
}
|
|
358
|
+
&--tertiary {
|
|
359
|
+
background-color: transparent;
|
|
360
|
+
border-color: transparent;
|
|
361
|
+
color: $btn-color-tertiary;
|
|
362
|
+
&:hover:not(:disabled),
|
|
363
|
+
&:focus:not(:disabled) {
|
|
364
|
+
color: $btn-hover-bg-primary;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
346
367
|
&--danger {
|
|
368
|
+
--outline-color: var(--q-theme-danger-light);
|
|
347
369
|
background-color: $btn-bg-danger;
|
|
348
370
|
border-color: $btn-bg-danger;
|
|
349
371
|
color: $btn-color-danger;
|
|
@@ -352,15 +374,6 @@ $btn-bg-active: var(--q-theme-primary-light);
|
|
|
352
374
|
border-color: $btn-hover-bg-danger;
|
|
353
375
|
}
|
|
354
376
|
}
|
|
355
|
-
&--link {
|
|
356
|
-
background-color: transparent;
|
|
357
|
-
border-color: transparent;
|
|
358
|
-
color: $btn-color-link;
|
|
359
|
-
&:hover:not(:disabled),
|
|
360
|
-
&:focus:not(:disabled) {
|
|
361
|
-
color: $btn-hover-bg-primary;
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
377
|
|
|
365
378
|
&--small {
|
|
366
379
|
padding: 0.25rem;
|
|
@@ -476,7 +489,7 @@ $overlay-arrow-height: 0.5rem;
|
|
|
476
489
|
$this: &;
|
|
477
490
|
--q-overlay-bg: var(--q-theme-background);
|
|
478
491
|
--q-overlay-color: var(--q-theme-on-background);
|
|
479
|
-
--q-overlay-border-color: var(--q-theme-
|
|
492
|
+
--q-overlay-border-color: rgb(var(--q-theme-on-background-rgb) / 0.1);
|
|
480
493
|
position: absolute;
|
|
481
494
|
&__content {
|
|
482
495
|
display: block;
|
|
@@ -617,6 +630,8 @@ $popover-header-bg: color-mix(in srgb, var(--q-overlay-color) 4%, var(--q-overla
|
|
|
617
630
|
font-size: $font-size-base;
|
|
618
631
|
background-color: $popover-header-bg;
|
|
619
632
|
border-bottom: 1px solid var(--q-overlay-border-color);
|
|
633
|
+
border-top-left-radius: inherit;
|
|
634
|
+
border-top-right-radius: inherit;
|
|
620
635
|
}
|
|
621
636
|
&__body {
|
|
622
637
|
padding: 1rem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/templates/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,eAAO,MAAM,uBAAuB,EAAE,WA8BrC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,WA8BpC,CAAA"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
export interface ColorScheme {
|
|
2
|
+
primary: string;
|
|
3
|
+
primaryLight: string;
|
|
4
|
+
primaryDark: string;
|
|
5
|
+
onPrimary: string;
|
|
6
|
+
secondary: string;
|
|
7
|
+
secondaryLight: string;
|
|
8
|
+
secondaryDark: string;
|
|
9
|
+
onSecondary: string;
|
|
10
|
+
highlight: string;
|
|
11
|
+
onHighlight: string;
|
|
12
|
+
background: string;
|
|
13
|
+
onBackground: string;
|
|
14
|
+
container: string;
|
|
15
|
+
info: string;
|
|
16
|
+
infoLight: string;
|
|
17
|
+
infoDark: string;
|
|
18
|
+
onInfo: string;
|
|
19
|
+
success: string;
|
|
20
|
+
successLight: string;
|
|
21
|
+
successDark: string;
|
|
22
|
+
onSuccess: string;
|
|
23
|
+
warning: string;
|
|
24
|
+
warningLight: string;
|
|
25
|
+
warningDark: string;
|
|
26
|
+
onWarning: string;
|
|
27
|
+
danger: string;
|
|
28
|
+
dangerLight: string;
|
|
29
|
+
dangerDark: string;
|
|
30
|
+
onDanger: string;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Represents a color in RGB space.
|
|
34
|
+
*/
|
|
35
|
+
export declare class Color {
|
|
36
|
+
/**
|
|
37
|
+
* Red component of the color, in the range [0, 255].
|
|
38
|
+
*/
|
|
39
|
+
r: number;
|
|
40
|
+
/**
|
|
41
|
+
* Green component of the color, in the range [0, 255].
|
|
42
|
+
*/
|
|
43
|
+
g: number;
|
|
44
|
+
/**
|
|
45
|
+
* Blue component of the color, in the range [0, 255].
|
|
46
|
+
*/
|
|
47
|
+
b: number;
|
|
48
|
+
/**
|
|
49
|
+
* Constructs a new color with the specified red, green, and blue components.
|
|
50
|
+
* @param r Red component of the color, in the range [0, 255].
|
|
51
|
+
* @param g Green component of the color, in the range [0, 255].
|
|
52
|
+
* @param b Blue component of the color, in the range [0, 255].
|
|
53
|
+
*/
|
|
54
|
+
constructor(r: number, g: number, b: number);
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Parses a color from a hex string.
|
|
58
|
+
* @param color A hex string representing the color, e.g., "#aabbcc".
|
|
59
|
+
* @returns A `Color` object representing the parsed color.
|
|
60
|
+
*/
|
|
61
|
+
export declare function parseColor(color: string): Color;
|
|
62
|
+
/**
|
|
63
|
+
* Converts a `Color` object to a hex string.
|
|
64
|
+
* @param color The color to convert.
|
|
65
|
+
* @returns A hex string representing the color.
|
|
66
|
+
*/
|
|
67
|
+
export declare function colorToHex(color: Color): string;
|
|
68
|
+
/**
|
|
69
|
+
* Lightens a color by a specified amount.
|
|
70
|
+
* @param color The color to lighten.
|
|
71
|
+
* @param amount The amount to lighten the color by, in the range [0, 100].
|
|
72
|
+
* @returns The lightened color.
|
|
73
|
+
*/
|
|
74
|
+
export declare function lighten(color: Color, amount: number): Color;
|
|
75
|
+
/**
|
|
76
|
+
* Darkens a color by a specified amount.
|
|
77
|
+
* @param color The color to darken.
|
|
78
|
+
* @param amount The amount to darken the color by, in the range [0, 100].
|
|
79
|
+
* @returns The darkened color.
|
|
80
|
+
*/
|
|
81
|
+
export declare function darken(color: Color, amount: number): Color;
|
|
82
|
+
//# sourceMappingURL=color.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAE3B,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IAEnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAGnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IAEpB,SAAS,EAAE,MAAM,CAAA;IAGjB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IAEd,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CAChB;AAED;;GAEG;AACH,qBAAa,KAAK;IACjB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IAET;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IAET;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IAET;;;;;OAKG;gBACS,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;CAK3C;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,CAe/C;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAM/C;AAWD;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAG,KAAK,CAK3D;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAG,KAAK,CAK1D"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/defaults/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,eAAe,CAAA;AAE3C,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,iBAAiB,CAAC,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,CAAA;AAEhE,wBAAgB,WAAW,sBAW1B;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,QAAQ,QAKjD;AAED,wBAAgB,cAAc,aAM7B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/overlay/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,CAAA;AAC/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC3D,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAA;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACtB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,SAAS,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC9B,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,OAAO,EAChB,kBAAkB,GAAE,SAAmB,GACrC,QAAQ,CAuCV"}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { App, Ref } from 'vue';
|
|
2
|
-
export declare const THEME_SYMBOL = "q-theme";
|
|
3
|
-
export type ThemeMode = 'light' | 'dark';
|
|
4
|
-
export interface AppThemes {
|
|
5
|
-
defaultTheme: string;
|
|
6
|
-
themes: Array<{
|
|
7
|
-
name: string;
|
|
8
|
-
mode: ThemeMode;
|
|
9
|
-
colors?: Partial<ColorScheme>;
|
|
10
|
-
}>;
|
|
11
|
-
}
|
|
12
|
-
export interface ThemeDefinition {
|
|
13
|
-
name: string;
|
|
14
|
-
mode: ThemeMode;
|
|
15
|
-
colors: ColorScheme;
|
|
16
|
-
}
|
|
17
|
-
export interface ThemeConfiguration {
|
|
18
|
-
activeTheme: string;
|
|
19
|
-
themes: ThemeDefinition[];
|
|
20
|
-
}
|
|
21
|
-
export interface ColorScheme {
|
|
22
|
-
primary: string;
|
|
23
|
-
primaryLight: string;
|
|
24
|
-
primaryDark: string;
|
|
25
|
-
secondary: string;
|
|
26
|
-
secondaryLight: string;
|
|
27
|
-
secondaryDark: string;
|
|
28
|
-
highlight: string;
|
|
29
|
-
background: string;
|
|
30
|
-
container: string;
|
|
31
|
-
border: string;
|
|
32
|
-
borderLight: string;
|
|
33
|
-
success: string;
|
|
34
|
-
warning: string;
|
|
35
|
-
danger: string;
|
|
36
|
-
dangerLight: string;
|
|
37
|
-
dangerDark: string;
|
|
38
|
-
info: string;
|
|
39
|
-
onPrimary: string;
|
|
40
|
-
onSecondary: string;
|
|
41
|
-
onHighlight: string;
|
|
42
|
-
onBackground: string;
|
|
43
|
-
onContainer: string;
|
|
44
|
-
onSuccess: string;
|
|
45
|
-
onWarning: string;
|
|
46
|
-
onDanger: string;
|
|
47
|
-
onInfo: string;
|
|
48
|
-
}
|
|
49
|
-
export declare const defaultLightColorScheme: ColorScheme;
|
|
50
|
-
export declare const defaultDarkColorScheme: ColorScheme;
|
|
51
|
-
export declare function useTheme(): Ref<ThemeConfiguration>;
|
|
52
|
-
export declare function installThemes(app: App, config?: AppThemes): void;
|
|
53
|
-
export declare function generateRootStyle(colors: Partial<ColorScheme>): void;
|
|
54
|
-
export declare function toProperty(color: string): string;
|
|
55
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/theme/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAsB,MAAM,KAAK,CAAA;AAElD,eAAO,MAAM,YAAY,YAAY,CAAA;AAErC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,WAAW,SAAS;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,MAAM,EAAE,KAAK,CAAC;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,EAAE,SAAS,CAAA;QACf,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;KAC7B,CAAC,CAAA;CACF;AAED,MAAM,WAAW,eAAe;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,WAAW,CAAA;CACnB;AAED,MAAM,WAAW,kBAAkB;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,eAAe,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,WAAW;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,uBAAuB,EAAE,WA2BrC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,WA2BpC,CAAA;AAED,wBAAgB,QAAQ,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAMlD;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,SAAS,QAuDzD;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,QAuB7D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAOvC"}
|