@allsrvsonline/vue-component-library 0.1.1 → 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/dist/index.d.ts
CHANGED
|
@@ -22,6 +22,15 @@ elevated: boolean;
|
|
|
22
22
|
padding: boolean;
|
|
23
23
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
24
24
|
|
|
25
|
+
declare const __VLS_component_3: DefineComponent<CollapsibleCardProps_2, {
|
|
26
|
+
toggle: () => void;
|
|
27
|
+
isCollapsed: Ref<boolean, boolean>;
|
|
28
|
+
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CollapsibleCardProps_2> & Readonly<{}>, {
|
|
29
|
+
elevated: boolean;
|
|
30
|
+
padding: boolean;
|
|
31
|
+
initiallyCollapsed: boolean;
|
|
32
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
33
|
+
|
|
25
34
|
/**
|
|
26
35
|
* BaseButton - A versatile button component with multiple variants and sizes
|
|
27
36
|
*
|
|
@@ -56,10 +65,23 @@ declare function __VLS_template_2(): {
|
|
|
56
65
|
rootEl: HTMLDivElement;
|
|
57
66
|
};
|
|
58
67
|
|
|
68
|
+
declare function __VLS_template_3(): {
|
|
69
|
+
attrs: Partial<{}>;
|
|
70
|
+
slots: {
|
|
71
|
+
header?(_: {}): any;
|
|
72
|
+
default?(_: {}): any;
|
|
73
|
+
footer?(_: {}): any;
|
|
74
|
+
};
|
|
75
|
+
refs: {};
|
|
76
|
+
rootEl: HTMLDivElement;
|
|
77
|
+
};
|
|
78
|
+
|
|
59
79
|
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
60
80
|
|
|
61
81
|
declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
|
|
62
82
|
|
|
83
|
+
declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
|
|
84
|
+
|
|
63
85
|
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
64
86
|
new (): {
|
|
65
87
|
$slots: S;
|
|
@@ -72,6 +94,12 @@ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
|
|
|
72
94
|
};
|
|
73
95
|
};
|
|
74
96
|
|
|
97
|
+
declare type __VLS_WithTemplateSlots_3<T, S> = T & {
|
|
98
|
+
new (): {
|
|
99
|
+
$slots: S;
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
|
|
75
103
|
export declare const BaseButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
76
104
|
|
|
77
105
|
/**
|
|
@@ -247,6 +275,65 @@ export declare type ButtonVariant = 'primary' | 'secondary' | 'success' | 'dange
|
|
|
247
275
|
*/
|
|
248
276
|
export declare function cn(...classes: (string | false | null | undefined)[]): string;
|
|
249
277
|
|
|
278
|
+
export declare const CollapsibleCard: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
|
|
279
|
+
|
|
280
|
+
/**
|
|
281
|
+
* Props for CollapsibleCard component
|
|
282
|
+
*/
|
|
283
|
+
export declare interface CollapsibleCardProps {
|
|
284
|
+
/**
|
|
285
|
+
* Card title
|
|
286
|
+
*/
|
|
287
|
+
title?: string;
|
|
288
|
+
/**
|
|
289
|
+
* Whether the card has elevated shadow
|
|
290
|
+
* @default false
|
|
291
|
+
*/
|
|
292
|
+
elevated?: boolean;
|
|
293
|
+
/**
|
|
294
|
+
* Whether the card has padding
|
|
295
|
+
* @default true
|
|
296
|
+
*/
|
|
297
|
+
padding?: boolean;
|
|
298
|
+
/**
|
|
299
|
+
* Initial collapsed state
|
|
300
|
+
* @default true
|
|
301
|
+
*/
|
|
302
|
+
initiallyCollapsed?: boolean;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/**
|
|
306
|
+
* CollapsibleCard - A card component that can be collapsed and expanded
|
|
307
|
+
*
|
|
308
|
+
* @example
|
|
309
|
+
* ```vue
|
|
310
|
+
* <CollapsibleCard title="Click to expand" :initiallyCollapsed="false">
|
|
311
|
+
* <p>This content can be toggled</p>
|
|
312
|
+
* </CollapsibleCard>
|
|
313
|
+
* ```
|
|
314
|
+
*/
|
|
315
|
+
declare interface CollapsibleCardProps_2 {
|
|
316
|
+
/**
|
|
317
|
+
* Card title
|
|
318
|
+
*/
|
|
319
|
+
title?: string;
|
|
320
|
+
/**
|
|
321
|
+
* Whether the card has elevated shadow
|
|
322
|
+
* @default false
|
|
323
|
+
*/
|
|
324
|
+
elevated?: boolean;
|
|
325
|
+
/**
|
|
326
|
+
* Whether the card has padding
|
|
327
|
+
* @default true
|
|
328
|
+
*/
|
|
329
|
+
padding?: boolean;
|
|
330
|
+
/**
|
|
331
|
+
* Initial collapsed state
|
|
332
|
+
* @default true
|
|
333
|
+
*/
|
|
334
|
+
initiallyCollapsed?: boolean;
|
|
335
|
+
}
|
|
336
|
+
|
|
250
337
|
/**
|
|
251
338
|
* Debounces a function call
|
|
252
339
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--base-button-primary-bg: #3b82f6;--base-button-primary-bg-hover: #2563eb;--base-button-primary-text: white;--base-button-secondary-bg: #6b7280;--base-button-secondary-bg-hover: #4b5563;--base-button-secondary-text: white;--base-button-success-bg: #10b981;--base-button-success-bg-hover: #059669;--base-button-success-text: white;--base-button-danger-bg: #ef4444;--base-button-danger-bg-hover: #dc2626;--base-button-danger-text: white;--base-button-warning-bg: #f59e0b;--base-button-warning-bg-hover: #d97706;--base-button-warning-text: white;--base-button-disabled-opacity: .6;--base-button-loading-opacity: .7}.base-button[data-v-a4a5350a]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:.375rem;font-weight:500;cursor:pointer;transition:all .2s ease-in-out;font-family:inherit;position:relative}.base-button[data-v-a4a5350a]:focus-visible{outline:2px solid currentColor;outline-offset:2px}.base-button--small[data-v-a4a5350a]{padding:.375rem .75rem;font-size:.875rem}.base-button--medium[data-v-a4a5350a]{padding:.5rem 1rem;font-size:1rem}.base-button--large[data-v-a4a5350a]{padding:.75rem 1.5rem;font-size:1.125rem}.base-button--primary[data-v-a4a5350a]{background-color:var(--base-button-primary-bg);color:var(--base-button-primary-text)}.base-button--primary[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-primary-bg-hover)}.base-button--secondary[data-v-a4a5350a]{background-color:var(--base-button-secondary-bg);color:var(--base-button-secondary-text)}.base-button--secondary[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-secondary-bg-hover)}.base-button--success[data-v-a4a5350a]{background-color:var(--base-button-success-bg);color:var(--base-button-success-text)}.base-button--success[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-success-bg-hover)}.base-button--danger[data-v-a4a5350a]{background-color:var(--base-button-danger-bg);color:var(--base-button-danger-text)}.base-button--danger[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-danger-bg-hover)}.base-button--warning[data-v-a4a5350a]{background-color:var(--base-button-warning-bg);color:var(--base-button-warning-text)}.base-button--warning[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-warning-bg-hover)}.base-button--full-width[data-v-a4a5350a]{width:100%}.base-button--disabled[data-v-a4a5350a],.base-button[data-v-a4a5350a]:disabled{opacity:var(--base-button-disabled-opacity);cursor:not-allowed}.base-button--loading[data-v-a4a5350a]{cursor:wait}.base-button__spinner[data-v-a4a5350a]{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin-a4a5350a .6s linear infinite}.base-button__content--loading[data-v-a4a5350a]{opacity:var(--base-button-loading-opacity)}@keyframes spin-a4a5350a{to{transform:rotate(360deg)}}:root{--base-input-label-color: #374151;--base-input-required-color: #ef4444;--base-input-border: #d1d5db;--base-input-border-focus: #3b82f6;--base-input-border-error: #ef4444;--base-input-bg-disabled: #f3f4f6;--base-input-placeholder-color: #9ca3af;--base-input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, .1);--base-input-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, .1);--base-input-error-color: #ef4444;--base-input-disabled-opacity: .6}.base-input[data-v-52f8a6e5]{display:flex;flex-direction:column;gap:.375rem}.base-input__label[data-v-52f8a6e5]{font-size:.875rem;font-weight:500;color:var(--base-input-label-color)}.base-input__required[data-v-52f8a6e5]{color:var(--base-input-required-color)}.base-input__field[data-v-52f8a6e5]{padding:.5rem .75rem;font-size:1rem;border:1px solid var(--base-input-border);border-radius:.375rem;transition:all .2s ease-in-out;font-family:inherit}.base-input__field[data-v-52f8a6e5]:focus{outline:none;border-color:var(--base-input-border-focus);box-shadow:var(--base-input-focus-shadow)}.base-input__field[data-v-52f8a6e5]::placeholder{color:var(--base-input-placeholder-color)}.base-input__field--error[data-v-52f8a6e5]{border-color:var(--base-input-border-error)}.base-input__field--error[data-v-52f8a6e5]:focus{border-color:var(--base-input-border-error);box-shadow:var(--base-input-error-focus-shadow)}.base-input__field--disabled[data-v-52f8a6e5],.base-input__field[data-v-52f8a6e5]:disabled{background-color:var(--base-input-bg-disabled);cursor:not-allowed;opacity:var(--base-input-disabled-opacity)}.base-input__error[data-v-52f8a6e5]{font-size:.875rem;color:var(--base-input-error-color)}:root{--base-card-bg: white;--base-card-footer-bg: #f9fafb;--base-card-border: #e5e7eb;--base-card-title-color: #111827;--base-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)}.base-card[data-v-80b8fdda]{background-color:var(--base-card-bg);border-radius:.5rem;border:1px solid var(--base-card-border);overflow:hidden}.base-card--elevated[data-v-80b8fdda]{box-shadow:var(--base-card-shadow);border:none}.base-card__header[data-v-80b8fdda]{padding:1rem 1.5rem;border-bottom:1px solid var(--base-card-border)}.base-card__title[data-v-80b8fdda]{margin:0;font-size:1.125rem;font-weight:600;color:var(--base-card-title-color)}.base-card__body[data-v-80b8fdda]{padding:1.5rem}.base-card--no-padding .base-card__body[data-v-80b8fdda]{padding:0}.base-card__footer[data-v-80b8fdda]{padding:1rem 1.5rem;border-top:1px solid var(--base-card-border);background-color:var(--base-card-footer-bg)}
|
|
1
|
+
:root{--base-button-primary-bg: #3b82f6;--base-button-primary-bg-hover: #2563eb;--base-button-primary-text: white;--base-button-secondary-bg: #6b7280;--base-button-secondary-bg-hover: #4b5563;--base-button-secondary-text: white;--base-button-success-bg: #10b981;--base-button-success-bg-hover: #059669;--base-button-success-text: white;--base-button-danger-bg: #ef4444;--base-button-danger-bg-hover: #dc2626;--base-button-danger-text: white;--base-button-warning-bg: #f59e0b;--base-button-warning-bg-hover: #d97706;--base-button-warning-text: white;--base-button-disabled-opacity: .6;--base-button-loading-opacity: .7}.base-button[data-v-a4a5350a]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:.375rem;font-weight:500;cursor:pointer;transition:all .2s ease-in-out;font-family:inherit;position:relative}.base-button[data-v-a4a5350a]:focus-visible{outline:2px solid currentColor;outline-offset:2px}.base-button--small[data-v-a4a5350a]{padding:.375rem .75rem;font-size:.875rem}.base-button--medium[data-v-a4a5350a]{padding:.5rem 1rem;font-size:1rem}.base-button--large[data-v-a4a5350a]{padding:.75rem 1.5rem;font-size:1.125rem}.base-button--primary[data-v-a4a5350a]{background-color:var(--base-button-primary-bg);color:var(--base-button-primary-text)}.base-button--primary[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-primary-bg-hover)}.base-button--secondary[data-v-a4a5350a]{background-color:var(--base-button-secondary-bg);color:var(--base-button-secondary-text)}.base-button--secondary[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-secondary-bg-hover)}.base-button--success[data-v-a4a5350a]{background-color:var(--base-button-success-bg);color:var(--base-button-success-text)}.base-button--success[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-success-bg-hover)}.base-button--danger[data-v-a4a5350a]{background-color:var(--base-button-danger-bg);color:var(--base-button-danger-text)}.base-button--danger[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-danger-bg-hover)}.base-button--warning[data-v-a4a5350a]{background-color:var(--base-button-warning-bg);color:var(--base-button-warning-text)}.base-button--warning[data-v-a4a5350a]:hover:not(:disabled){background-color:var(--base-button-warning-bg-hover)}.base-button--full-width[data-v-a4a5350a]{width:100%}.base-button--disabled[data-v-a4a5350a],.base-button[data-v-a4a5350a]:disabled{opacity:var(--base-button-disabled-opacity);cursor:not-allowed}.base-button--loading[data-v-a4a5350a]{cursor:wait}.base-button__spinner[data-v-a4a5350a]{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin-a4a5350a .6s linear infinite}.base-button__content--loading[data-v-a4a5350a]{opacity:var(--base-button-loading-opacity)}@keyframes spin-a4a5350a{to{transform:rotate(360deg)}}:root{--base-input-label-color: #374151;--base-input-required-color: #ef4444;--base-input-border: #d1d5db;--base-input-border-focus: #3b82f6;--base-input-border-error: #ef4444;--base-input-bg-disabled: #f3f4f6;--base-input-placeholder-color: #9ca3af;--base-input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, .1);--base-input-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, .1);--base-input-error-color: #ef4444;--base-input-disabled-opacity: .6}.base-input[data-v-52f8a6e5]{display:flex;flex-direction:column;gap:.375rem}.base-input__label[data-v-52f8a6e5]{font-size:.875rem;font-weight:500;color:var(--base-input-label-color)}.base-input__required[data-v-52f8a6e5]{color:var(--base-input-required-color)}.base-input__field[data-v-52f8a6e5]{padding:.5rem .75rem;font-size:1rem;border:1px solid var(--base-input-border);border-radius:.375rem;transition:all .2s ease-in-out;font-family:inherit}.base-input__field[data-v-52f8a6e5]:focus{outline:none;border-color:var(--base-input-border-focus);box-shadow:var(--base-input-focus-shadow)}.base-input__field[data-v-52f8a6e5]::placeholder{color:var(--base-input-placeholder-color)}.base-input__field--error[data-v-52f8a6e5]{border-color:var(--base-input-border-error)}.base-input__field--error[data-v-52f8a6e5]:focus{border-color:var(--base-input-border-error);box-shadow:var(--base-input-error-focus-shadow)}.base-input__field--disabled[data-v-52f8a6e5],.base-input__field[data-v-52f8a6e5]:disabled{background-color:var(--base-input-bg-disabled);cursor:not-allowed;opacity:var(--base-input-disabled-opacity)}.base-input__error[data-v-52f8a6e5]{font-size:.875rem;color:var(--base-input-error-color)}:root{--base-card-bg: white;--base-card-footer-bg: #f9fafb;--base-card-border: #e5e7eb;--base-card-title-color: #111827;--base-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)}.base-card[data-v-80b8fdda]{background-color:var(--base-card-bg);border-radius:.5rem;border:1px solid var(--base-card-border);overflow:hidden}.base-card--elevated[data-v-80b8fdda]{box-shadow:var(--base-card-shadow);border:none}.base-card__header[data-v-80b8fdda]{padding:1rem 1.5rem;border-bottom:1px solid var(--base-card-border)}.base-card__title[data-v-80b8fdda]{margin:0;font-size:1.125rem;font-weight:600;color:var(--base-card-title-color)}.base-card__body[data-v-80b8fdda]{padding:1.5rem}.base-card--no-padding .base-card__body[data-v-80b8fdda]{padding:0}.base-card__footer[data-v-80b8fdda]{padding:1rem 1.5rem;border-top:1px solid var(--base-card-border);background-color:var(--base-card-footer-bg)}:root{--collapsible-card-bg: white;--collapsible-card-footer-bg: #f9fafb;--collapsible-card-header-hover-bg: #f9fafb;--collapsible-card-toggle-hover-bg: #e5e7eb;--collapsible-card-border: #e5e7eb;--collapsible-card-title-color: #111827;--collapsible-card-icon-color: #6b7280;--collapsible-card-focus-ring: #3b82f6;--collapsible-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)}.collapsible-card[data-v-489edb19]{background-color:var(--collapsible-card-bg);border-radius:.5rem;border:1px solid var(--collapsible-card-border);overflow:hidden}.collapsible-card--elevated[data-v-489edb19]{box-shadow:var(--collapsible-card-shadow);border:none}.collapsible-card__header[data-v-489edb19]{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--collapsible-card-border);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.collapsible-card__header[data-v-489edb19]:hover{background-color:var(--collapsible-card-header-hover-bg)}.collapsible-card__header-content[data-v-489edb19]{flex:1}.collapsible-card__title[data-v-489edb19]{margin:0;font-size:1.125rem;font-weight:600;color:var(--collapsible-card-title-color)}.collapsible-card__toggle[data-v-489edb19]{background:none;border:none;padding:.25rem;cursor:pointer;color:var(--collapsible-card-icon-color);display:flex;align-items:center;justify-content:center;border-radius:.25rem;transition:background-color .2s ease}.collapsible-card__toggle[data-v-489edb19]:hover{background-color:var(--collapsible-card-toggle-hover-bg)}.collapsible-card__toggle[data-v-489edb19]:focus{outline:2px solid var(--collapsible-card-focus-ring);outline-offset:2px}.collapsible-card__icon[data-v-489edb19]{transition:transform .2s ease}.collapsible-card__icon--collapsed[data-v-489edb19]{transform:rotate(-90deg)}.collapsible-card__body[data-v-489edb19]{padding:1.5rem}.collapsible-card--no-padding .collapsible-card__body[data-v-489edb19]{padding:0}.collapsible-card__footer[data-v-489edb19]{padding:1rem 1.5rem;border-top:1px solid var(--collapsible-card-border);background-color:var(--collapsible-card-footer-bg)}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
function
|
|
1
|
+
import { defineComponent as h, computed as v, createElementBlock as o, openBlock as d, normalizeClass as p, createCommentVNode as c, createElementVNode as i, renderSlot as r, unref as B, createTextVNode as k, toDisplayString as _, ref as $, withDirectives as I, vShow as V, onMounted as q, onUnmounted as w } from "vue";
|
|
2
|
+
function m(...e) {
|
|
3
3
|
return e.filter(Boolean).join(" ");
|
|
4
4
|
}
|
|
5
|
-
function
|
|
6
|
-
let
|
|
7
|
-
return function(...
|
|
8
|
-
clearTimeout(
|
|
5
|
+
function Y(e, l) {
|
|
6
|
+
let a;
|
|
7
|
+
return function(...t) {
|
|
8
|
+
clearTimeout(a), a = setTimeout(() => e.apply(this, t), l);
|
|
9
9
|
};
|
|
10
10
|
}
|
|
11
|
-
function
|
|
11
|
+
function E(e = "id") {
|
|
12
12
|
return `${e}-${Math.random().toString(36).substr(2, 9)}`;
|
|
13
13
|
}
|
|
14
|
-
const
|
|
14
|
+
const z = ["disabled", "type"], S = {
|
|
15
15
|
key: 0,
|
|
16
16
|
class: "base-button__spinner"
|
|
17
|
-
},
|
|
17
|
+
}, x = /* @__PURE__ */ h({
|
|
18
18
|
__name: "BaseButton",
|
|
19
19
|
props: {
|
|
20
20
|
variant: { default: "primary" },
|
|
@@ -25,45 +25,45 @@ const E = ["disabled", "type"], z = {
|
|
|
25
25
|
type: { default: "button" }
|
|
26
26
|
},
|
|
27
27
|
emits: ["click"],
|
|
28
|
-
setup(e, { emit:
|
|
29
|
-
const
|
|
30
|
-
() =>
|
|
28
|
+
setup(e, { emit: l }) {
|
|
29
|
+
const a = e, t = l, s = v(
|
|
30
|
+
() => m(
|
|
31
31
|
"base-button",
|
|
32
|
-
`base-button--${
|
|
33
|
-
`base-button--${
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
`base-button--${a.variant}`,
|
|
33
|
+
`base-button--${a.size}`,
|
|
34
|
+
a.fullWidth && "base-button--full-width",
|
|
35
|
+
a.loading && "base-button--loading",
|
|
36
|
+
a.disabled && "base-button--disabled"
|
|
37
37
|
)
|
|
38
|
-
),
|
|
39
|
-
!
|
|
38
|
+
), u = (n) => {
|
|
39
|
+
!a.disabled && !a.loading && t("click", n);
|
|
40
40
|
};
|
|
41
|
-
return (
|
|
42
|
-
class:
|
|
41
|
+
return (n, f) => (d(), o("button", {
|
|
42
|
+
class: p(s.value),
|
|
43
43
|
disabled: e.disabled || e.loading,
|
|
44
44
|
type: e.type,
|
|
45
|
-
onClick:
|
|
45
|
+
onClick: u
|
|
46
46
|
}, [
|
|
47
|
-
e.loading ? (
|
|
48
|
-
|
|
49
|
-
class:
|
|
47
|
+
e.loading ? (d(), o("span", S)) : c("", !0),
|
|
48
|
+
i("span", {
|
|
49
|
+
class: p({ "base-button__content--loading": e.loading })
|
|
50
50
|
}, [
|
|
51
|
-
|
|
51
|
+
r(n.$slots, "default", {}, void 0, !0)
|
|
52
52
|
], 2)
|
|
53
|
-
], 10,
|
|
53
|
+
], 10, z));
|
|
54
54
|
}
|
|
55
|
-
}),
|
|
56
|
-
const
|
|
57
|
-
for (const [
|
|
58
|
-
t
|
|
59
|
-
return
|
|
60
|
-
},
|
|
55
|
+
}), y = (e, l) => {
|
|
56
|
+
const a = e.__vccOpts || e;
|
|
57
|
+
for (const [t, s] of l)
|
|
58
|
+
a[t] = s;
|
|
59
|
+
return a;
|
|
60
|
+
}, Z = /* @__PURE__ */ y(x, [["__scopeId", "data-v-a4a5350a"]]), L = { class: "base-input" }, M = ["for"], N = {
|
|
61
61
|
key: 0,
|
|
62
62
|
class: "base-input__required"
|
|
63
|
-
},
|
|
63
|
+
}, T = ["id", "value", "type", "placeholder", "disabled", "required"], D = {
|
|
64
64
|
key: 1,
|
|
65
65
|
class: "base-input__error"
|
|
66
|
-
},
|
|
66
|
+
}, F = /* @__PURE__ */ h({
|
|
67
67
|
__name: "BaseInput",
|
|
68
68
|
props: {
|
|
69
69
|
modelValue: { default: "" },
|
|
@@ -75,52 +75,52 @@ const E = ["disabled", "type"], z = {
|
|
|
75
75
|
error: {}
|
|
76
76
|
},
|
|
77
77
|
emits: ["update:modelValue", "focus", "blur"],
|
|
78
|
-
setup(e, { emit:
|
|
79
|
-
const
|
|
80
|
-
() =>
|
|
78
|
+
setup(e, { emit: l }) {
|
|
79
|
+
const a = e, t = l, s = E("base-input"), u = v(
|
|
80
|
+
() => m(
|
|
81
81
|
"base-input__field",
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
a.error && "base-input__field--error",
|
|
83
|
+
a.disabled && "base-input__field--disabled"
|
|
84
84
|
)
|
|
85
|
-
),
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
},
|
|
89
|
-
|
|
90
|
-
},
|
|
91
|
-
|
|
85
|
+
), n = (b) => {
|
|
86
|
+
const g = b.target;
|
|
87
|
+
t("update:modelValue", g.value);
|
|
88
|
+
}, f = (b) => {
|
|
89
|
+
t("focus", b);
|
|
90
|
+
}, C = (b) => {
|
|
91
|
+
t("blur", b);
|
|
92
92
|
};
|
|
93
|
-
return (
|
|
94
|
-
e.label ? (
|
|
93
|
+
return (b, g) => (d(), o("div", L, [
|
|
94
|
+
e.label ? (d(), o("label", {
|
|
95
95
|
key: 0,
|
|
96
|
-
for:
|
|
96
|
+
for: B(s),
|
|
97
97
|
class: "base-input__label"
|
|
98
98
|
}, [
|
|
99
|
-
|
|
100
|
-
e.required ? (
|
|
101
|
-
], 8,
|
|
102
|
-
|
|
103
|
-
id:
|
|
99
|
+
k(_(e.label) + " ", 1),
|
|
100
|
+
e.required ? (d(), o("span", N, "*")) : c("", !0)
|
|
101
|
+
], 8, M)) : c("", !0),
|
|
102
|
+
i("input", {
|
|
103
|
+
id: B(s),
|
|
104
104
|
value: e.modelValue,
|
|
105
105
|
type: e.type,
|
|
106
106
|
placeholder: e.placeholder,
|
|
107
107
|
disabled: e.disabled,
|
|
108
108
|
required: e.required,
|
|
109
|
-
class:
|
|
110
|
-
onInput:
|
|
111
|
-
onFocus:
|
|
112
|
-
onBlur:
|
|
113
|
-
}, null, 42,
|
|
114
|
-
e.error ? (
|
|
109
|
+
class: p(u.value),
|
|
110
|
+
onInput: n,
|
|
111
|
+
onFocus: f,
|
|
112
|
+
onBlur: C
|
|
113
|
+
}, null, 42, T),
|
|
114
|
+
e.error ? (d(), o("span", D, _(e.error), 1)) : c("", !0)
|
|
115
115
|
]));
|
|
116
116
|
}
|
|
117
|
-
}),
|
|
117
|
+
}), R = /* @__PURE__ */ y(F, [["__scopeId", "data-v-52f8a6e5"]]), O = {
|
|
118
118
|
key: 0,
|
|
119
119
|
class: "base-card__header"
|
|
120
|
-
},
|
|
120
|
+
}, W = { class: "base-card__title" }, j = { class: "base-card__body" }, U = {
|
|
121
121
|
key: 1,
|
|
122
122
|
class: "base-card__footer"
|
|
123
|
-
},
|
|
123
|
+
}, A = /* @__PURE__ */ h({
|
|
124
124
|
__name: "BaseCard",
|
|
125
125
|
props: {
|
|
126
126
|
title: {},
|
|
@@ -128,55 +128,122 @@ const E = ["disabled", "type"], z = {
|
|
|
128
128
|
padding: { type: Boolean, default: !0 }
|
|
129
129
|
},
|
|
130
130
|
setup(e) {
|
|
131
|
-
const
|
|
132
|
-
() =>
|
|
131
|
+
const l = e, a = v(
|
|
132
|
+
() => m(l.elevated && "base-card--elevated", !l.padding && "base-card--no-padding")
|
|
133
133
|
);
|
|
134
|
-
return (
|
|
135
|
-
class:
|
|
134
|
+
return (t, s) => (d(), o("div", {
|
|
135
|
+
class: p(["base-card", a.value])
|
|
136
136
|
}, [
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
137
|
+
t.$slots.header || e.title ? (d(), o("div", O, [
|
|
138
|
+
r(t.$slots, "header", {}, () => [
|
|
139
|
+
i("h3", W, _(e.title), 1)
|
|
140
140
|
], !0)
|
|
141
|
-
])) :
|
|
142
|
-
|
|
143
|
-
|
|
141
|
+
])) : c("", !0),
|
|
142
|
+
i("div", j, [
|
|
143
|
+
r(t.$slots, "default", {}, void 0, !0)
|
|
144
144
|
]),
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
])) :
|
|
145
|
+
t.$slots.footer ? (d(), o("div", U, [
|
|
146
|
+
r(t.$slots, "footer", {}, void 0, !0)
|
|
147
|
+
])) : c("", !0)
|
|
148
148
|
], 2));
|
|
149
149
|
}
|
|
150
|
-
}),
|
|
151
|
-
|
|
152
|
-
|
|
150
|
+
}), ee = /* @__PURE__ */ y(A, [["__scopeId", "data-v-80b8fdda"]]), G = { class: "collapsible-card__header-content" }, H = { class: "collapsible-card__title" }, J = ["aria-label", "aria-expanded"], K = { class: "collapsible-card__body" }, P = {
|
|
151
|
+
key: 0,
|
|
152
|
+
class: "collapsible-card__footer"
|
|
153
|
+
}, Q = /* @__PURE__ */ h({
|
|
154
|
+
__name: "CollapsibleCard",
|
|
155
|
+
props: {
|
|
156
|
+
title: {},
|
|
157
|
+
elevated: { type: Boolean, default: !1 },
|
|
158
|
+
padding: { type: Boolean, default: !0 },
|
|
159
|
+
initiallyCollapsed: { type: Boolean, default: !0 }
|
|
160
|
+
},
|
|
161
|
+
setup(e, { expose: l }) {
|
|
162
|
+
const a = e, t = $(a.initiallyCollapsed), s = () => {
|
|
163
|
+
t.value = !t.value;
|
|
164
|
+
}, u = v(
|
|
165
|
+
() => m(
|
|
166
|
+
a.elevated && "collapsible-card--elevated",
|
|
167
|
+
!a.padding && "collapsible-card--no-padding"
|
|
168
|
+
)
|
|
169
|
+
);
|
|
170
|
+
return l({
|
|
171
|
+
toggle: s,
|
|
172
|
+
isCollapsed: t
|
|
173
|
+
}), (n, f) => (d(), o("div", {
|
|
174
|
+
class: p(["collapsible-card", u.value])
|
|
175
|
+
}, [
|
|
176
|
+
i("div", {
|
|
177
|
+
class: "collapsible-card__header",
|
|
178
|
+
onClick: s
|
|
179
|
+
}, [
|
|
180
|
+
i("div", G, [
|
|
181
|
+
r(n.$slots, "header", {}, () => [
|
|
182
|
+
i("h3", H, _(e.title), 1)
|
|
183
|
+
], !0)
|
|
184
|
+
]),
|
|
185
|
+
i("button", {
|
|
186
|
+
type: "button",
|
|
187
|
+
class: "collapsible-card__toggle",
|
|
188
|
+
"aria-label": t.value ? "Expand" : "Collapse",
|
|
189
|
+
"aria-expanded": !t.value
|
|
190
|
+
}, [
|
|
191
|
+
(d(), o("svg", {
|
|
192
|
+
class: p(["collapsible-card__icon", { "collapsible-card__icon--collapsed": t.value }]),
|
|
193
|
+
width: "20",
|
|
194
|
+
height: "20",
|
|
195
|
+
viewBox: "0 0 20 20",
|
|
196
|
+
fill: "currentColor"
|
|
197
|
+
}, [...f[0] || (f[0] = [
|
|
198
|
+
i("path", {
|
|
199
|
+
"fill-rule": "evenodd",
|
|
200
|
+
d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
|
|
201
|
+
"clip-rule": "evenodd"
|
|
202
|
+
}, null, -1)
|
|
203
|
+
])], 2))
|
|
204
|
+
], 8, J)
|
|
205
|
+
]),
|
|
206
|
+
I(i("div", K, [
|
|
207
|
+
r(n.$slots, "default", {}, void 0, !0)
|
|
208
|
+
], 512), [
|
|
209
|
+
[V, !t.value]
|
|
210
|
+
]),
|
|
211
|
+
n.$slots.footer && !t.value ? (d(), o("div", P, [
|
|
212
|
+
r(n.$slots, "footer", {}, void 0, !0)
|
|
213
|
+
])) : c("", !0)
|
|
214
|
+
], 2));
|
|
215
|
+
}
|
|
216
|
+
}), te = /* @__PURE__ */ y(Q, [["__scopeId", "data-v-489edb19"]]);
|
|
217
|
+
function ae(e, l) {
|
|
218
|
+
const a = $(e), t = $(null), s = v(() => t.value === null);
|
|
153
219
|
return {
|
|
154
|
-
value:
|
|
155
|
-
error:
|
|
156
|
-
isValid:
|
|
157
|
-
validate: () => (
|
|
220
|
+
value: a,
|
|
221
|
+
error: t,
|
|
222
|
+
isValid: s,
|
|
223
|
+
validate: () => (t.value = l(a.value), s.value),
|
|
158
224
|
reset: () => {
|
|
159
|
-
|
|
225
|
+
a.value = e, t.value = null;
|
|
160
226
|
}
|
|
161
227
|
};
|
|
162
228
|
}
|
|
163
|
-
function
|
|
164
|
-
const
|
|
165
|
-
e.value && !e.value.contains(
|
|
229
|
+
function le(e, l) {
|
|
230
|
+
const a = (t) => {
|
|
231
|
+
e.value && !e.value.contains(t.target) && l();
|
|
166
232
|
};
|
|
167
|
-
|
|
168
|
-
document.addEventListener("click",
|
|
169
|
-
}),
|
|
170
|
-
document.removeEventListener("click",
|
|
233
|
+
q(() => {
|
|
234
|
+
document.addEventListener("click", a);
|
|
235
|
+
}), w(() => {
|
|
236
|
+
document.removeEventListener("click", a);
|
|
171
237
|
});
|
|
172
238
|
}
|
|
173
239
|
export {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
240
|
+
Z as BaseButton,
|
|
241
|
+
ee as BaseCard,
|
|
242
|
+
R as BaseInput,
|
|
243
|
+
te as CollapsibleCard,
|
|
244
|
+
m as cn,
|
|
245
|
+
Y as debounce,
|
|
246
|
+
E as generateId,
|
|
247
|
+
le as useClickOutside,
|
|
248
|
+
ae as useValidation
|
|
182
249
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.VueComponentLibrary={},n.Vue))})(this,(function(n,e){"use strict";function r(...t){return t.filter(Boolean).join(" ")}function b(t,o){let a;return function(...l){clearTimeout(a),a=setTimeout(()=>t.apply(this,l),o)}}function m(t="id"){return`${t}-${Math.random().toString(36).substr(2,9)}`}const _=["disabled","type"],B={key:0,class:"base-button__spinner"},h=e.defineComponent({__name:"BaseButton",props:{variant:{default:"primary"},size:{default:"medium"},disabled:{type:Boolean,default:!1},fullWidth:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},type:{default:"button"}},emits:["click"],setup(t,{emit:o}){const a=t,l=o,s=e.computed(()=>r("base-button",`base-button--${a.variant}`,`base-button--${a.size}`,a.fullWidth&&"base-button--full-width",a.loading&&"base-button--loading",a.disabled&&"base-button--disabled")),c=d=>{!a.disabled&&!a.loading&&l("click",d)};return(d,u)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(s.value),disabled:t.disabled||t.loading,type:t.type,onClick:c},[t.loading?(e.openBlock(),e.createElementBlock("span",B)):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass({"base-button__content--loading":t.loading})},[e.renderSlot(d.$slots,"default",{},void 0,!0)],2)],10,_))}}),p=(t,o)=>{const a=t.__vccOpts||t;for(const[l,s]of o)a[l]=s;return a},k=p(h,[["__scopeId","data-v-a4a5350a"]]),y={class:"base-input"},C=["for"],g={key:0,class:"base-input__required"},$=["id","value","type","placeholder","disabled","required"],V={key:1,class:"base-input__error"},E=p(e.defineComponent({__name:"BaseInput",props:{modelValue:{default:""},type:{default:"text"},placeholder:{},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},label:{},error:{}},emits:["update:modelValue","focus","blur"],setup(t,{emit:o}){const a=t,l=o,s=m("base-input"),c=e.computed(()=>r("base-input__field",a.error&&"base-input__field--error",a.disabled&&"base-input__field--disabled")),d=i=>{const f=i.target;l("update:modelValue",f.value)},u=i=>{l("focus",i)},W=i=>{l("blur",i)};return(i,f)=>(e.openBlock(),e.createElementBlock("div",y,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(s),class:"base-input__label"},[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.required?(e.openBlock(),e.createElementBlock("span",g,"*")):e.createCommentVNode("",!0)],8,C)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:e.unref(s),value:t.modelValue,type:t.type,placeholder:t.placeholder,disabled:t.disabled,required:t.required,class:e.normalizeClass(c.value),onInput:d,onFocus:u,onBlur:W},null,42,$),t.error?(e.openBlock(),e.createElementBlock("span",V,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-52f8a6e5"]]),N={key:0,class:"base-card__header"},S={class:"base-card__title"},I={class:"base-card__body"},z={key:1,class:"base-card__footer"},q=p(e.defineComponent({__name:"BaseCard",props:{title:{},elevated:{type:Boolean,default:!1},padding:{type:Boolean,default:!0}},setup(t){const o=t,a=e.computed(()=>r(o.elevated&&"base-card--elevated",!o.padding&&"base-card--no-padding"));return(l,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["base-card",a.value])},[l.$slots.header||t.title?(e.openBlock(),e.createElementBlock("div",N,[e.renderSlot(l.$slots,"header",{},()=>[e.createElementVNode("h3",S,e.toDisplayString(t.title),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",I,[e.renderSlot(l.$slots,"default",{},void 0,!0)]),l.$slots.footer?(e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(l.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-80b8fdda"]]),T={class:"collapsible-card__header-content"},w={class:"collapsible-card__title"},D=["aria-label","aria-expanded"],L={class:"collapsible-card__body"},M={key:0,class:"collapsible-card__footer"},O=p(e.defineComponent({__name:"CollapsibleCard",props:{title:{},elevated:{type:Boolean,default:!1},padding:{type:Boolean,default:!0},initiallyCollapsed:{type:Boolean,default:!0}},setup(t,{expose:o}){const a=t,l=e.ref(a.initiallyCollapsed),s=()=>{l.value=!l.value},c=e.computed(()=>r(a.elevated&&"collapsible-card--elevated",!a.padding&&"collapsible-card--no-padding"));return o({toggle:s,isCollapsed:l}),(d,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["collapsible-card",c.value])},[e.createElementVNode("div",{class:"collapsible-card__header",onClick:s},[e.createElementVNode("div",T,[e.renderSlot(d.$slots,"header",{},()=>[e.createElementVNode("h3",w,e.toDisplayString(t.title),1)],!0)]),e.createElementVNode("button",{type:"button",class:"collapsible-card__toggle","aria-label":l.value?"Expand":"Collapse","aria-expanded":!l.value},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["collapsible-card__icon",{"collapsible-card__icon--collapsed":l.value}]),width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor"},[...u[0]||(u[0]=[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z","clip-rule":"evenodd"},null,-1)])],2))],8,D)]),e.withDirectives(e.createElementVNode("div",L,[e.renderSlot(d.$slots,"default",{},void 0,!0)],512),[[e.vShow,!l.value]]),d.$slots.footer&&!l.value?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(d.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-489edb19"]]);function j(t,o){const a=e.ref(t),l=e.ref(null),s=e.computed(()=>l.value===null);return{value:a,error:l,isValid:s,validate:()=>(l.value=o(a.value),s.value),reset:()=>{a.value=t,l.value=null}}}function F(t,o){const a=l=>{t.value&&!t.value.contains(l.target)&&o()};e.onMounted(()=>{document.addEventListener("click",a)}),e.onUnmounted(()=>{document.removeEventListener("click",a)})}n.BaseButton=k,n.BaseCard=q,n.BaseInput=E,n.CollapsibleCard=O,n.cn=r,n.debounce=b,n.generateId=m,n.useClickOutside=F,n.useValidation=j,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@allsrvsonline/vue-component-library",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/vue-component-library.umd.js",
|
|
6
6
|
"module": "./dist/vue-component-library.es.js",
|
|
@@ -11,7 +11,12 @@
|
|
|
11
11
|
"import": "./dist/vue-component-library.es.js",
|
|
12
12
|
"require": "./dist/vue-component-library.umd.js"
|
|
13
13
|
},
|
|
14
|
-
"./style.css":
|
|
14
|
+
"./style.css": {
|
|
15
|
+
"import": "./dist/vue-component-library.css",
|
|
16
|
+
"require": "./dist/vue-component-library.css",
|
|
17
|
+
"default": "./dist/vue-component-library.css"
|
|
18
|
+
},
|
|
19
|
+
"./dist/vue-component-library.css": "./dist/vue-component-library.css"
|
|
15
20
|
},
|
|
16
21
|
"files": [
|
|
17
22
|
"dist"
|