@allsrvsonline/vue-component-library 0.2.0 → 0.3.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/dist/index.d.ts +93 -4
  2. package/dist/vue-component-library.css +1 -1
  3. package/dist/vue-component-library.es.js +203 -123
  4. package/dist/vue-component-library.umd.js +1 -1
  5. package/package.json +11 -2
package/dist/index.d.ts CHANGED
@@ -105,12 +105,12 @@ export declare const BaseButton: __VLS_WithTemplateSlots<typeof __VLS_component,
105
105
  /**
106
106
  * Events emitted by BaseButton
107
107
  */
108
- export declare interface BaseButtonEmits {
108
+ export declare type BaseButtonEmits = {
109
109
  /**
110
110
  * Emitted when button is clicked
111
111
  */
112
112
  (e: 'click', event: MouseEvent): void;
113
- }
113
+ };
114
114
 
115
115
  /**
116
116
  * Props for BaseButton component
@@ -193,7 +193,7 @@ required: boolean;
193
193
  /**
194
194
  * Events emitted by BaseInput
195
195
  */
196
- export declare interface BaseInputEmits {
196
+ export declare type BaseInputEmits = {
197
197
  /**
198
198
  * Emitted when value changes (v-model)
199
199
  */
@@ -206,7 +206,7 @@ export declare interface BaseInputEmits {
206
206
  * Emitted when input loses focus
207
207
  */
208
208
  (e: 'blur', event: FocusEvent): void;
209
- }
209
+ };
210
210
 
211
211
  /**
212
212
  * Props for BaseInput component
@@ -245,6 +245,87 @@ export declare interface BaseInputProps {
245
245
  error?: string;
246
246
  }
247
247
 
248
+ export declare const BaseSelect: DefineComponent<BaseSelectProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
249
+ "update:modelValue": (value: string) => any;
250
+ focus: (event: FocusEvent) => any;
251
+ blur: (event: FocusEvent) => any;
252
+ }, string, PublicProps, Readonly<BaseSelectProps> & Readonly<{
253
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
254
+ onFocus?: ((event: FocusEvent) => any) | undefined;
255
+ onBlur?: ((event: FocusEvent) => any) | undefined;
256
+ }>, {
257
+ disabled: boolean;
258
+ modelValue: string | number;
259
+ required: boolean;
260
+ options: SelectOption[];
261
+ labelField: string;
262
+ valueField: string;
263
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
264
+
265
+ /**
266
+ * Events emitted by BaseSelect
267
+ */
268
+ export declare type BaseSelectEmits = {
269
+ /**
270
+ * Emitted when value changes (v-model)
271
+ */
272
+ (e: 'update:modelValue', value: string): void;
273
+ /**
274
+ * Emitted when select is focused
275
+ */
276
+ (e: 'focus', event: FocusEvent): void;
277
+ /**
278
+ * Emitted when select loses focus
279
+ */
280
+ (e: 'blur', event: FocusEvent): void;
281
+ };
282
+
283
+ /**
284
+ * Props for BaseSelect component
285
+ */
286
+ export declare interface BaseSelectProps {
287
+ /**
288
+ * The select value (v-model)
289
+ */
290
+ modelValue?: string | number;
291
+ /**
292
+ * Array of options to display
293
+ */
294
+ options?: SelectOption[];
295
+ /**
296
+ * Placeholder text
297
+ */
298
+ placeholder?: string;
299
+ /**
300
+ * Whether the select is disabled
301
+ * @default false
302
+ */
303
+ disabled?: boolean;
304
+ /**
305
+ * Whether the select is required
306
+ * @default false
307
+ */
308
+ required?: boolean;
309
+ /**
310
+ * Select label
311
+ */
312
+ label?: string;
313
+ /**
314
+ * Error message to display
315
+ */
316
+ error?: string;
317
+ /**
318
+ * Field name to use as the label when options are objects
319
+ * @default 'label'
320
+ */
321
+ labelField?: string;
322
+ /**
323
+ * Field name to use as the value when options are objects
324
+ * @default 'value'
325
+ */
326
+ valueField?: string;
327
+ }
328
+
248
329
  /**
249
330
  * Button size types
250
331
  */
@@ -351,6 +432,14 @@ export declare function debounce<T extends (...args: unknown[]) => void>(fn: T,
351
432
  */
352
433
  export declare function generateId(prefix?: string): string;
353
434
 
435
+ /**
436
+ * Select option type - can be a simple value or an object with value and label
437
+ */
438
+ export declare type SelectOption = string | number | {
439
+ value: string | number;
440
+ label: string;
441
+ } | Record<string, unknown>;
442
+
354
443
  /**
355
444
  * Composable for detecting clicks outside an element
356
445
  *
package/dist/vue-component-library.css CHANGED
@@ -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)}: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
+ :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-select-label-color: #374151;--base-select-required-color: #ef4444;--base-select-border: #d1d5db;--base-select-border-focus: #3b82f6;--base-select-border-error: #ef4444;--base-select-bg: #ffffff;--base-select-bg-disabled: #f3f4f6;--base-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");--base-select-focus-shadow: 0 0 0 3px rgba(59, 130, 246, .1);--base-select-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, .1);--base-select-error-color: #ef4444;--base-select-disabled-opacity: .6}.base-select[data-v-4d5c982a]{display:flex;flex-direction:column;gap:.375rem}.base-select__label[data-v-4d5c982a]{font-size:.875rem;font-weight:500;color:var(--base-select-label-color)}.base-select__required[data-v-4d5c982a]{color:var(--base-select-required-color)}.base-select__field[data-v-4d5c982a]{padding:.5rem 2rem .5rem .75rem;font-size:1rem;border:1px solid var(--base-select-border);border-radius:.375rem;transition:all .2s ease-in-out;font-family:inherit;background-color:var(--base-select-bg);background-image:var(--base-select-arrow);background-position:right .5rem center;background-repeat:no-repeat;background-size:1.25rem;appearance:none;cursor:pointer}.base-select__field[data-v-4d5c982a]:focus{outline:none;border-color:var(--base-select-border-focus);box-shadow:var(--base-select-focus-shadow)}.base-select__field--error[data-v-4d5c982a]{border-color:var(--base-select-border-error)}.base-select__field--error[data-v-4d5c982a]:focus{border-color:var(--base-select-border-error);box-shadow:var(--base-select-error-focus-shadow)}.base-select__field--disabled[data-v-4d5c982a],.base-select__field[data-v-4d5c982a]:disabled{background-color:var(--base-select-bg-disabled);cursor:not-allowed;opacity:var(--base-select-disabled-opacity)}.base-select__error[data-v-4d5c982a]{font-size:.875rem;color:var(--base-select-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-14982384]{background-color:var(--collapsible-card-bg);border-radius:.5rem;border:1px solid var(--collapsible-card-border);overflow:hidden}.collapsible-card--elevated[data-v-14982384]{box-shadow:var(--collapsible-card-shadow);border:none}.collapsible-card__header[data-v-14982384]{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-14982384]:hover{background-color:var(--collapsible-card-header-hover-bg)}.collapsible-card__header-content[data-v-14982384]{flex:1}.collapsible-card__title[data-v-14982384]{margin:0;font-size:1.125rem;font-weight:600;color:var(--collapsible-card-title-color)}.collapsible-card__toggle[data-v-14982384]{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-14982384]:hover{background-color:var(--collapsible-card-toggle-hover-bg)}.collapsible-card__toggle[data-v-14982384]:focus{outline:2px solid var(--collapsible-card-focus-ring);outline-offset:2px}.collapsible-card__icon[data-v-14982384]{transition:transform .2s ease}.collapsible-card__icon--collapsed[data-v-14982384]{transform:rotate(-90deg)}.collapsible-card__body[data-v-14982384]{padding:1.5rem}.collapsible-card--no-padding .collapsible-card__body[data-v-14982384]{padding:0}.collapsible-card__footer[data-v-14982384]{padding:1rem 1.5rem;border-top:1px solid var(--collapsible-card-border);background-color:var(--collapsible-card-footer-bg)}
package/dist/vue-component-library.es.js CHANGED
@@ -1,20 +1,20 @@
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) {
1
+ import { defineComponent as $, computed as y, createElementBlock as a, openBlock as s, normalizeClass as h, createCommentVNode as c, createElementVNode as r, renderSlot as p, unref as V, createTextVNode as F, toDisplayString as v, Fragment as L, renderList as j, ref as q, withDirectives as w, vShow as E, onMounted as x, onUnmounted as z } from "vue";
2
+ function B(...e) {
3
3
  return e.filter(Boolean).join(" ");
4
4
  }
5
- function Y(e, l) {
6
- let a;
5
+ function ue(e, o) {
6
+ let l;
7
7
  return function(...t) {
8
- clearTimeout(a), a = setTimeout(() => e.apply(this, t), l);
8
+ clearTimeout(l), l = setTimeout(() => e.apply(this, t), o);
9
9
  };
10
10
  }
11
- function E(e = "id") {
11
+ function S(e = "id") {
12
12
  return `${e}-${Math.random().toString(36).substr(2, 9)}`;
13
13
  }
14
- const z = ["disabled", "type"], S = {
14
+ const O = ["disabled", "type"], M = {
15
15
  key: 0,
16
16
  class: "base-button__spinner"
17
- }, x = /* @__PURE__ */ h({
17
+ }, N = /* @__PURE__ */ $({
18
18
  __name: "BaseButton",
19
19
  props: {
20
20
  variant: { default: "primary" },
@@ -25,45 +25,45 @@ const z = ["disabled", "type"], S = {
25
25
  type: { default: "button" }
26
26
  },
27
27
  emits: ["click"],
28
- setup(e, { emit: l }) {
29
- const a = e, t = l, s = v(
30
- () => m(
28
+ setup(e, { emit: o }) {
29
+ const l = e, t = o, d = y(
30
+ () => B(
31
31
  "base-button",
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"
32
+ `base-button--${l.variant}`,
33
+ `base-button--${l.size}`,
34
+ l.fullWidth && "base-button--full-width",
35
+ l.loading && "base-button--loading",
36
+ l.disabled && "base-button--disabled"
37
37
  )
38
- ), u = (n) => {
39
- !a.disabled && !a.loading && t("click", n);
38
+ ), b = (n) => {
39
+ !l.disabled && !l.loading && t("click", n);
40
40
  };
41
- return (n, f) => (d(), o("button", {
42
- class: p(s.value),
41
+ return (n, _) => (s(), a("button", {
42
+ class: h(d.value),
43
43
  disabled: e.disabled || e.loading,
44
44
  type: e.type,
45
- onClick: u
45
+ onClick: b
46
46
  }, [
47
- e.loading ? (d(), o("span", S)) : c("", !0),
48
- i("span", {
49
- class: p({ "base-button__content--loading": e.loading })
47
+ e.loading ? (s(), a("span", M)) : c("", !0),
48
+ r("span", {
49
+ class: h({ "base-button__content--loading": e.loading })
50
50
  }, [
51
- r(n.$slots, "default", {}, void 0, !0)
51
+ p(n.$slots, "default", {}, void 0, !0)
52
52
  ], 2)
53
- ], 10, z));
53
+ ], 10, O));
54
54
  }
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 = {
55
+ }), C = (e, o) => {
56
+ const l = e.__vccOpts || e;
57
+ for (const [t, d] of o)
58
+ l[t] = d;
59
+ return l;
60
+ }, be = /* @__PURE__ */ C(N, [["__scopeId", "data-v-a4a5350a"]]), T = { class: "base-input" }, D = ["for"], W = {
61
61
  key: 0,
62
62
  class: "base-input__required"
63
- }, T = ["id", "value", "type", "placeholder", "disabled", "required"], D = {
63
+ }, U = ["id", "value", "type", "placeholder", "disabled", "required"], A = {
64
64
  key: 1,
65
65
  class: "base-input__error"
66
- }, F = /* @__PURE__ */ h({
66
+ }, G = /* @__PURE__ */ $({
67
67
  __name: "BaseInput",
68
68
  props: {
69
69
  modelValue: { default: "" },
@@ -75,52 +75,131 @@ const z = ["disabled", "type"], S = {
75
75
  error: {}
76
76
  },
77
77
  emits: ["update:modelValue", "focus", "blur"],
78
- setup(e, { emit: l }) {
79
- const a = e, t = l, s = E("base-input"), u = v(
80
- () => m(
78
+ setup(e, { emit: o }) {
79
+ const l = e, t = o, d = S("base-input"), b = y(
80
+ () => B(
81
81
  "base-input__field",
82
- a.error && "base-input__field--error",
83
- a.disabled && "base-input__field--disabled"
82
+ l.error && "base-input__field--error",
83
+ l.disabled && "base-input__field--disabled"
84
84
  )
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);
85
+ ), n = (f) => {
86
+ const k = f.target;
87
+ t("update:modelValue", k.value);
88
+ }, _ = (f) => {
89
+ t("focus", f);
90
+ }, I = (f) => {
91
+ t("blur", f);
92
92
  };
93
- return (b, g) => (d(), o("div", L, [
94
- e.label ? (d(), o("label", {
93
+ return (f, k) => (s(), a("div", T, [
94
+ e.label ? (s(), a("label", {
95
95
  key: 0,
96
- for: B(s),
96
+ for: V(d),
97
97
  class: "base-input__label"
98
98
  }, [
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),
99
+ F(v(e.label) + " ", 1),
100
+ e.required ? (s(), a("span", W, "*")) : c("", !0)
101
+ ], 8, D)) : c("", !0),
102
+ r("input", {
103
+ id: V(d),
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: p(u.value),
109
+ class: h(b.value),
110
110
  onInput: n,
111
+ onFocus: _,
112
+ onBlur: I
113
+ }, null, 42, U),
114
+ e.error ? (s(), a("span", A, v(e.error), 1)) : c("", !0)
115
+ ]));
116
+ }
117
+ }), fe = /* @__PURE__ */ C(G, [["__scopeId", "data-v-52f8a6e5"]]), H = { class: "base-select" }, J = ["for"], K = {
118
+ key: 0,
119
+ class: "base-select__required"
120
+ }, P = ["id", "value", "disabled", "required"], Q = {
121
+ key: 0,
122
+ value: "",
123
+ disabled: ""
124
+ }, X = ["value"], Y = {
125
+ key: 1,
126
+ class: "base-select__error"
127
+ }, Z = /* @__PURE__ */ $({
128
+ __name: "BaseSelect",
129
+ props: {
130
+ modelValue: { default: "" },
131
+ options: { default: () => [] },
132
+ placeholder: {},
133
+ disabled: { type: Boolean, default: !1 },
134
+ required: { type: Boolean, default: !1 },
135
+ label: {},
136
+ error: {},
137
+ labelField: { default: "label" },
138
+ valueField: { default: "value" }
139
+ },
140
+ emits: ["update:modelValue", "focus", "blur"],
141
+ setup(e, { emit: o }) {
142
+ const l = e, t = o, d = S("base-select"), b = y(
143
+ () => B(
144
+ "base-select__field",
145
+ l.error && "base-select__field--error",
146
+ l.disabled && "base-select__field--disabled"
147
+ )
148
+ ), n = (i) => {
149
+ if (typeof i == "object") {
150
+ const m = l.valueField || "value", u = i, g = u[m];
151
+ return g !== void 0 ? g : u.value ?? "";
152
+ }
153
+ return i;
154
+ }, _ = (i) => {
155
+ if (typeof i == "object") {
156
+ const m = l.labelField || "label", u = i, g = u[m];
157
+ return String(g !== void 0 ? g : u.label ?? "");
158
+ }
159
+ return String(i);
160
+ }, I = (i) => {
161
+ const m = i.target;
162
+ t("update:modelValue", m.value);
163
+ }, f = (i) => {
164
+ t("focus", i);
165
+ }, k = (i) => {
166
+ t("blur", i);
167
+ };
168
+ return (i, m) => (s(), a("div", H, [
169
+ e.label ? (s(), a("label", {
170
+ key: 0,
171
+ for: V(d),
172
+ class: "base-select__label"
173
+ }, [
174
+ F(v(e.label) + " ", 1),
175
+ e.required ? (s(), a("span", K, "*")) : c("", !0)
176
+ ], 8, J)) : c("", !0),
177
+ r("select", {
178
+ id: V(d),
179
+ value: e.modelValue,
180
+ disabled: e.disabled,
181
+ required: e.required,
182
+ class: h(b.value),
183
+ onChange: I,
111
184
  onFocus: f,
112
- onBlur: C
113
- }, null, 42, T),
114
- e.error ? (d(), o("span", D, _(e.error), 1)) : c("", !0)
185
+ onBlur: k
186
+ }, [
187
+ e.placeholder ? (s(), a("option", Q, v(e.placeholder), 1)) : c("", !0),
188
+ (s(!0), a(L, null, j(e.options, (u) => (s(), a("option", {
189
+ key: n(u),
190
+ value: n(u)
191
+ }, v(_(u)), 9, X))), 128))
192
+ ], 42, P),
193
+ e.error ? (s(), a("span", Y, v(e.error), 1)) : c("", !0)
115
194
  ]));
116
195
  }
117
- }), R = /* @__PURE__ */ y(F, [["__scopeId", "data-v-52f8a6e5"]]), O = {
196
+ }), ve = /* @__PURE__ */ C(Z, [["__scopeId", "data-v-4d5c982a"]]), R = {
118
197
  key: 0,
119
198
  class: "base-card__header"
120
- }, W = { class: "base-card__title" }, j = { class: "base-card__body" }, U = {
199
+ }, ee = { class: "base-card__title" }, te = { class: "base-card__body" }, le = {
121
200
  key: 1,
122
201
  class: "base-card__footer"
123
- }, A = /* @__PURE__ */ h({
202
+ }, ae = /* @__PURE__ */ $({
124
203
  __name: "BaseCard",
125
204
  props: {
126
205
  title: {},
@@ -128,29 +207,29 @@ const z = ["disabled", "type"], S = {
128
207
  padding: { type: Boolean, default: !0 }
129
208
  },
130
209
  setup(e) {
131
- const l = e, a = v(
132
- () => m(l.elevated && "base-card--elevated", !l.padding && "base-card--no-padding")
210
+ const o = e, l = y(
211
+ () => B(o.elevated && "base-card--elevated", !o.padding && "base-card--no-padding")
133
212
  );
134
- return (t, s) => (d(), o("div", {
135
- class: p(["base-card", a.value])
213
+ return (t, d) => (s(), a("div", {
214
+ class: h(["base-card", l.value])
136
215
  }, [
137
- t.$slots.header || e.title ? (d(), o("div", O, [
138
- r(t.$slots, "header", {}, () => [
139
- i("h3", W, _(e.title), 1)
216
+ t.$slots.header || e.title ? (s(), a("div", R, [
217
+ p(t.$slots, "header", {}, () => [
218
+ r("h3", ee, v(e.title), 1)
140
219
  ], !0)
141
220
  ])) : c("", !0),
142
- i("div", j, [
143
- r(t.$slots, "default", {}, void 0, !0)
221
+ r("div", te, [
222
+ p(t.$slots, "default", {}, void 0, !0)
144
223
  ]),
145
- t.$slots.footer ? (d(), o("div", U, [
146
- r(t.$slots, "footer", {}, void 0, !0)
224
+ t.$slots.footer ? (s(), a("div", le, [
225
+ p(t.$slots, "footer", {}, void 0, !0)
147
226
  ])) : c("", !0)
148
227
  ], 2));
149
228
  }
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 = {
229
+ }), _e = /* @__PURE__ */ C(ae, [["__scopeId", "data-v-80b8fdda"]]), se = { class: "collapsible-card__header-content" }, oe = { class: "collapsible-card__title" }, de = ["aria-label", "aria-expanded"], ne = { class: "collapsible-card__body" }, ie = {
151
230
  key: 0,
152
231
  class: "collapsible-card__footer"
153
- }, Q = /* @__PURE__ */ h({
232
+ }, re = /* @__PURE__ */ $({
154
233
  __name: "CollapsibleCard",
155
234
  props: {
156
235
  title: {},
@@ -158,92 +237,93 @@ const z = ["disabled", "type"], S = {
158
237
  padding: { type: Boolean, default: !0 },
159
238
  initiallyCollapsed: { type: Boolean, default: !0 }
160
239
  },
161
- setup(e, { expose: l }) {
162
- const a = e, t = $(a.initiallyCollapsed), s = () => {
240
+ setup(e, { expose: o }) {
241
+ const l = e, t = q(l.initiallyCollapsed), d = () => {
163
242
  t.value = !t.value;
164
- }, u = v(
165
- () => m(
166
- a.elevated && "collapsible-card--elevated",
167
- !a.padding && "collapsible-card--no-padding"
243
+ }, b = y(
244
+ () => B(
245
+ l.elevated && "collapsible-card--elevated",
246
+ !l.padding && "collapsible-card--no-padding"
168
247
  )
169
248
  );
170
- return l({
171
- toggle: s,
249
+ return o({
250
+ toggle: d,
172
251
  isCollapsed: t
173
- }), (n, f) => (d(), o("div", {
174
- class: p(["collapsible-card", u.value])
252
+ }), (n, _) => (s(), a("div", {
253
+ class: h(["collapsible-card", b.value])
175
254
  }, [
176
- i("div", {
255
+ r("div", {
177
256
  class: "collapsible-card__header",
178
- onClick: s
257
+ onClick: d
179
258
  }, [
180
- i("div", G, [
181
- r(n.$slots, "header", {}, () => [
182
- i("h3", H, _(e.title), 1)
259
+ r("div", se, [
260
+ p(n.$slots, "header", {}, () => [
261
+ r("h3", oe, v(e.title), 1)
183
262
  ], !0)
184
263
  ]),
185
- i("button", {
264
+ r("button", {
186
265
  type: "button",
187
266
  class: "collapsible-card__toggle",
188
267
  "aria-label": t.value ? "Expand" : "Collapse",
189
268
  "aria-expanded": !t.value
190
269
  }, [
191
- (d(), o("svg", {
192
- class: p(["collapsible-card__icon", { "collapsible-card__icon--collapsed": t.value }]),
270
+ (s(), a("svg", {
271
+ class: h(["collapsible-card__icon", { "collapsible-card__icon--collapsed": t.value }]),
193
272
  width: "20",
194
273
  height: "20",
195
274
  viewBox: "0 0 20 20",
196
275
  fill: "currentColor"
197
- }, [...f[0] || (f[0] = [
198
- i("path", {
276
+ }, [..._[0] || (_[0] = [
277
+ r("path", {
199
278
  "fill-rule": "evenodd",
200
279
  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
280
  "clip-rule": "evenodd"
202
281
  }, null, -1)
203
282
  ])], 2))
204
- ], 8, J)
283
+ ], 8, de)
205
284
  ]),
206
- I(i("div", K, [
207
- r(n.$slots, "default", {}, void 0, !0)
285
+ w(r("div", ne, [
286
+ p(n.$slots, "default", {}, void 0, !0)
208
287
  ], 512), [
209
- [V, !t.value]
288
+ [E, !t.value]
210
289
  ]),
211
- n.$slots.footer && !t.value ? (d(), o("div", P, [
212
- r(n.$slots, "footer", {}, void 0, !0)
290
+ n.$slots.footer && !t.value ? (s(), a("div", ie, [
291
+ p(n.$slots, "footer", {}, void 0, !0)
213
292
  ])) : c("", !0)
214
293
  ], 2));
215
294
  }
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);
295
+ }), pe = /* @__PURE__ */ C(re, [["__scopeId", "data-v-14982384"]]);
296
+ function he(e, o) {
297
+ const l = q(e), t = q(null), d = y(() => t.value === null);
219
298
  return {
220
- value: a,
299
+ value: l,
221
300
  error: t,
222
- isValid: s,
223
- validate: () => (t.value = l(a.value), s.value),
301
+ isValid: d,
302
+ validate: () => (t.value = o(l.value), d.value),
224
303
  reset: () => {
225
- a.value = e, t.value = null;
304
+ l.value = e, t.value = null;
226
305
  }
227
306
  };
228
307
  }
229
- function le(e, l) {
230
- const a = (t) => {
231
- e.value && !e.value.contains(t.target) && l();
308
+ function me(e, o) {
309
+ const l = (t) => {
310
+ e.value && !e.value.contains(t.target) && o();
232
311
  };
233
- q(() => {
234
- document.addEventListener("click", a);
235
- }), w(() => {
236
- document.removeEventListener("click", a);
312
+ x(() => {
313
+ document.addEventListener("click", l);
314
+ }), z(() => {
315
+ document.removeEventListener("click", l);
237
316
  });
238
317
  }
239
318
  export {
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
319
+ be as BaseButton,
320
+ _e as BaseCard,
321
+ fe as BaseInput,
322
+ ve as BaseSelect,
323
+ pe as CollapsibleCard,
324
+ B as cn,
325
+ ue as debounce,
326
+ S as generateId,
327
+ me as useClickOutside,
328
+ he as useValidation
249
329
  };
package/dist/vue-component-library.umd.js CHANGED
@@ -1 +1 @@
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"})}));
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 b(...t){return t.filter(Boolean).join(" ")}function y(t,o){let a;return function(...l){clearTimeout(a),a=setTimeout(()=>t.apply(this,l),o)}}function h(t="id"){return`${t}-${Math.random().toString(36).substr(2,9)}`}const C=["disabled","type"],g={key:0,class:"base-button__spinner"},V=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(()=>b("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")),i=d=>{!a.disabled&&!a.loading&&l("click",d)};return(d,m)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(s.value),disabled:t.disabled||t.loading,type:t.type,onClick:i},[t.loading?(e.openBlock(),e.createElementBlock("span",g)):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,C))}}),p=(t,o)=>{const a=t.__vccOpts||t;for(const[l,s]of o)a[l]=s;return a},$=p(V,[["__scopeId","data-v-a4a5350a"]]),E={class:"base-input"},S=["for"],N={key:0,class:"base-input__required"},I=["id","value","type","placeholder","disabled","required"],q={key:1,class:"base-input__error"},F=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=h("base-input"),i=e.computed(()=>b("base-input__field",a.error&&"base-input__field--error",a.disabled&&"base-input__field--disabled")),d=u=>{const B=u.target;l("update:modelValue",B.value)},m=u=>{l("focus",u)},k=u=>{l("blur",u)};return(u,B)=>(e.openBlock(),e.createElementBlock("div",E,[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",N,"*")):e.createCommentVNode("",!0)],8,S)):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(i.value),onInput:d,onFocus:m,onBlur:k},null,42,I),t.error?(e.openBlock(),e.createElementBlock("span",q,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-52f8a6e5"]]),z={class:"base-select"},D=["for"],j={key:0,class:"base-select__required"},L=["id","value","disabled","required"],T={key:0,value:"",disabled:""},O=["value"],w={key:1,class:"base-select__error"},M=p(e.defineComponent({__name:"BaseSelect",props:{modelValue:{default:""},options:{default:()=>[]},placeholder:{},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},label:{},error:{},labelField:{default:"label"},valueField:{default:"value"}},emits:["update:modelValue","focus","blur"],setup(t,{emit:o}){const a=t,l=o,s=h("base-select"),i=e.computed(()=>b("base-select__field",a.error&&"base-select__field--error",a.disabled&&"base-select__field--disabled")),d=c=>{if(typeof c=="object"){const f=a.valueField||"value",r=c,_=r[f];return _!==void 0?_:r.value??""}return c},m=c=>{if(typeof c=="object"){const f=a.labelField||"label",r=c,_=r[f];return String(_!==void 0?_:r.label??"")}return String(c)},k=c=>{const f=c.target;l("update:modelValue",f.value)},u=c=>{l("focus",c)},B=c=>{l("blur",c)};return(c,f)=>(e.openBlock(),e.createElementBlock("div",z,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(s),class:"base-select__label"},[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.required?(e.openBlock(),e.createElementBlock("span",j,"*")):e.createCommentVNode("",!0)],8,D)):e.createCommentVNode("",!0),e.createElementVNode("select",{id:e.unref(s),value:t.modelValue,disabled:t.disabled,required:t.required,class:e.normalizeClass(i.value),onChange:k,onFocus:u,onBlur:B},[t.placeholder?(e.openBlock(),e.createElementBlock("option",T,e.toDisplayString(t.placeholder),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,r=>(e.openBlock(),e.createElementBlock("option",{key:d(r),value:d(r)},e.toDisplayString(m(r)),9,O))),128))],42,L),t.error?(e.openBlock(),e.createElementBlock("span",w,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-4d5c982a"]]),W={key:0,class:"base-card__header"},P={class:"base-card__title"},U={class:"base-card__body"},A={key:1,class:"base-card__footer"},G=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(()=>b(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",W,[e.renderSlot(l.$slots,"header",{},()=>[e.createElementVNode("h3",P,e.toDisplayString(t.title),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",U,[e.renderSlot(l.$slots,"default",{},void 0,!0)]),l.$slots.footer?(e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(l.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-80b8fdda"]]),H={class:"collapsible-card__header-content"},J={class:"collapsible-card__title"},K=["aria-label","aria-expanded"],Q={class:"collapsible-card__body"},X={key:0,class:"collapsible-card__footer"},Y=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},i=e.computed(()=>b(a.elevated&&"collapsible-card--elevated",!a.padding&&"collapsible-card--no-padding"));return o({toggle:s,isCollapsed:l}),(d,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["collapsible-card",i.value])},[e.createElementVNode("div",{class:"collapsible-card__header",onClick:s},[e.createElementVNode("div",H,[e.renderSlot(d.$slots,"header",{},()=>[e.createElementVNode("h3",J,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"},[...m[0]||(m[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,K)]),e.withDirectives(e.createElementVNode("div",Q,[e.renderSlot(d.$slots,"default",{},void 0,!0)],512),[[e.vShow,!l.value]]),d.$slots.footer&&!l.value?(e.openBlock(),e.createElementBlock("div",X,[e.renderSlot(d.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-14982384"]]);function Z(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 R(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=$,n.BaseCard=G,n.BaseInput=F,n.BaseSelect=M,n.CollapsibleCard=Y,n.cn=b,n.debounce=y,n.generateId=h,n.useClickOutside=R,n.useValidation=Z,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.2.0",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "main": "./dist/vue-component-library.umd.js",
6
6
  "module": "./dist/vue-component-library.es.js",
@@ -30,12 +30,20 @@
30
30
  "format": "prettier --write \"src/**/*.{ts,tsx,vue,json}\"",
31
31
  "test": "vitest",
32
32
  "test:ui": "vitest --ui",
33
- "type-check": "vue-tsc --noEmit"
33
+ "type-check": "vue-tsc --noEmit",
34
+ "tag": "git tag v%npm_package_version% && git push origin v%npm_package_version%",
35
+ "release": "standard-version",
36
+ "release:patch": "standard-version --release-as patch",
37
+ "release:minor": "standard-version --release-as minor",
38
+ "release:major": "standard-version --release-as major",
39
+ "release:dry-run": "standard-version --dry-run"
34
40
  },
35
41
  "dependencies": {
36
42
  "vue": "^3.5.24"
37
43
  },
38
44
  "devDependencies": {
45
+ "@commitlint/cli": "^20.3.0",
46
+ "@commitlint/config-conventional": "^20.3.0",
39
47
  "@types/node": "^24.10.1",
40
48
  "@typescript-eslint/eslint-plugin": "^8.51.0",
41
49
  "@typescript-eslint/parser": "^8.51.0",
@@ -48,6 +56,7 @@
48
56
  "eslint-plugin-vue": "^10.6.2",
49
57
  "happy-dom": "^20.0.11",
50
58
  "prettier": "^3.7.4",
59
+ "standard-version": "^9.5.0",
51
60
  "typescript": "~5.9.3",
52
61
  "vite": "^7.2.4",
53
62
  "vite-plugin-dts": "^4.5.4",