@allsrvsonline/vue-component-library 0.2.0 → 0.3.2

package/README.md

@@ -233,10 +233,66 @@ MIT
 
 ## Publishing
 
-To publish to npm:
+This project uses automated releases with conventional commits and GitHub Actions.
 
-1. Update version in `package.json`
-2. Build the library: `npm run build:lib`
-3. Publish: `npm publish --access public`
+### Prerequisites
+
+Before publishing, ensure these GitHub repository variables are configured:
+
+1. **NPM_TOKEN** - npm authentication token
+   - Go to npmjs.com → Account Settings → Access Tokens → Generate New Token (Automation)
+   - Add as repository variable: `NPM_TOKEN` (in Settings → Variables)
+
+2. **GITHUB_TOKEN** - Automatically provided by GitHub Actions (no setup needed)
+
+3. **GITHUB_TOKEN** - Automatically provided by GitHub Actions (no setup needed)
+
+### Release Process
+
+Create releases using these npm scripts:
+
+```bash
+# Patch release (0.3.1 → 0.3.2)
+npm run release:patch
+
+# Minor release (0.3.1 → 0.4.0)
+npm run release:minor
+
+# Major release (0.3.1 → 1.0.0)
+npm run release:major
+
+# Preview what would happen
+npm run release:dry-run
+```
+
+The release process automatically:
+
+- ✅ Analyzes conventional commits
+- ✅ Bumps version in package.json
+- ✅ Updates CHANGELOG.md
+- ✅ Creates git commit and tag
+- ✅ Pushes to GitHub (triggers publish workflow)
+- ✅ Publishes to npm
+- ✅ Creates GitHub Release
+
+### Conventional Commits
+
+Use these commit message formats:
+
+```bash
+feat: add new component          # → Minor version bump
+fix: resolve button bug          # → Patch version bump
+docs: update README              # → No version bump
+BREAKING CHANGE: api change      # → Major version bump
+```
+
+### Manual Publishing
+
+If needed, you can still publish manually:
+
+```bash
+npm run build:lib
+npm publish --access public
+```
 
 Make sure to update `@your-org/vue-component-library` in package.json with your actual organization/package name.

package/dist/index.d.ts

@@ -105,12 +105,12 @@ export declare const BaseButton: __VLS_WithTemplateSlots<typeof __VLS_component,
 /**
  * Events emitted by BaseButton
  */
-export declare interface BaseButtonEmits {
+export declare type BaseButtonEmits = {
     /**
      * Emitted when button is clicked
      */
     (e: 'click', event: MouseEvent): void;
-}
+};
 
 /**
  * Props for BaseButton component
@@ -193,7 +193,7 @@ required: boolean;
 /**
  * Events emitted by BaseInput
  */
-export declare interface BaseInputEmits {
+export declare type BaseInputEmits = {
     /**
      * Emitted when value changes (v-model)
      */
@@ -206,7 +206,7 @@ export declare interface BaseInputEmits {
      * Emitted when input loses focus
      */
     (e: 'blur', event: FocusEvent): void;
-}
+};
 
 /**
  * Props for BaseInput component
@@ -245,6 +245,87 @@ export declare interface BaseInputProps {
     error?: string;
 }
 
+export declare const BaseSelect: DefineComponent<BaseSelectProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: string) => any;
+focus: (event: FocusEvent) => any;
+blur: (event: FocusEvent) => any;
+}, string, PublicProps, Readonly<BaseSelectProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
+onFocus?: ((event: FocusEvent) => any) | undefined;
+onBlur?: ((event: FocusEvent) => any) | undefined;
+}>, {
+disabled: boolean;
+modelValue: string | number;
+required: boolean;
+options: SelectOption[];
+labelField: string;
+valueField: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+/**
+ * Events emitted by BaseSelect
+ */
+export declare type BaseSelectEmits = {
+    /**
+     * Emitted when value changes (v-model)
+     */
+    (e: 'update:modelValue', value: string): void;
+    /**
+     * Emitted when select is focused
+     */
+    (e: 'focus', event: FocusEvent): void;
+    /**
+     * Emitted when select loses focus
+     */
+    (e: 'blur', event: FocusEvent): void;
+};
+
+/**
+ * Props for BaseSelect component
+ */
+export declare interface BaseSelectProps {
+    /**
+     * The select value (v-model)
+     */
+    modelValue?: string | number;
+    /**
+     * Array of options to display
+     */
+    options?: SelectOption[];
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the select is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the select is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Select label
+     */
+    label?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Field name to use as the label when options are objects
+     * @default 'label'
+     */
+    labelField?: string;
+    /**
+     * Field name to use as the value when options are objects
+     * @default 'value'
+     */
+    valueField?: string;
+}
+
 /**
  * Button size types
  */
@@ -351,6 +432,14 @@ export declare function debounce<T extends (...args: unknown[]) => void>(fn: T,
  */
 export declare function generateId(prefix?: string): string;
 
+/**
+ * Select option type - can be a simple value or an object with value and label
+ */
+export declare type SelectOption = string | number | {
+    value: string | number;
+    label: string;
+} | Record<string, unknown>;
+
 /**
  * Composable for detecting clicks outside an element
  *

package/dist/vue-component-library.css

@@ -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)}
+: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

@@ -1,20 +1,20 @@
-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";
-function m(...e) {
+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";
+function B(...e) {
   return e.filter(Boolean).join(" ");
 }
-function Y(e, l) {
-  let a;
+function ue(e, o) {
+  let l;
   return function(...t) {
-    clearTimeout(a), a = setTimeout(() => e.apply(this, t), l);
+    clearTimeout(l), l = setTimeout(() => e.apply(this, t), o);
   };
 }
-function E(e = "id") {
+function S(e = "id") {
   return `${e}-${Math.random().toString(36).substr(2, 9)}`;
 }
-const z = ["disabled", "type"], S = {
+const O = ["disabled", "type"], M = {
   key: 0,
   class: "base-button__spinner"
-}, x = /* @__PURE__ */ h({
+}, N = /* @__PURE__ */ $({
   __name: "BaseButton",
   props: {
     variant: { default: "primary" },
@@ -25,45 +25,45 @@ const z = ["disabled", "type"], S = {
     type: { default: "button" }
   },
   emits: ["click"],
-  setup(e, { emit: l }) {
-    const a = e, t = l, s = v(
-      () => m(
+  setup(e, { emit: o }) {
+    const l = e, t = o, d = y(
+      () => 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"
+        `base-button--${l.variant}`,
+        `base-button--${l.size}`,
+        l.fullWidth && "base-button--full-width",
+        l.loading && "base-button--loading",
+        l.disabled && "base-button--disabled"
       )
-    ), u = (n) => {
-      !a.disabled && !a.loading && t("click", n);
+    ), b = (n) => {
+      !l.disabled && !l.loading && t("click", n);
     };
-    return (n, f) => (d(), o("button", {
-      class: p(s.value),
+    return (n, _) => (s(), a("button", {
+      class: h(d.value),
       disabled: e.disabled || e.loading,
       type: e.type,
-      onClick: u
+      onClick: b
     }, [
-      e.loading ? (d(), o("span", S)) : c("", !0),
-      i("span", {
-        class: p({ "base-button__content--loading": e.loading })
+      e.loading ? (s(), a("span", M)) : c("", !0),
+      r("span", {
+        class: h({ "base-button__content--loading": e.loading })
       }, [
-        r(n.$slots, "default", {}, void 0, !0)
+        p(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 10, z));
+    ], 10, O));
   }
-}), y = (e, l) => {
-  const a = e.__vccOpts || e;
-  for (const [t, s] of l)
-    a[t] = s;
-  return a;
-}, Z = /* @__PURE__ */ y(x, [["__scopeId", "data-v-a4a5350a"]]), L = { class: "base-input" }, M = ["for"], N = {
+}), C = (e, o) => {
+  const l = e.__vccOpts || e;
+  for (const [t, d] of o)
+    l[t] = d;
+  return l;
+}, be = /* @__PURE__ */ C(N, [["__scopeId", "data-v-a4a5350a"]]), T = { class: "base-input" }, D = ["for"], W = {
   key: 0,
   class: "base-input__required"
-}, T = ["id", "value", "type", "placeholder", "disabled", "required"], D = {
+}, U = ["id", "value", "type", "placeholder", "disabled", "required"], A = {
   key: 1,
   class: "base-input__error"
-}, F = /* @__PURE__ */ h({
+}, G = /* @__PURE__ */ $({
   __name: "BaseInput",
   props: {
     modelValue: { default: "" },
@@ -75,52 +75,131 @@ const z = ["disabled", "type"], S = {
     error: {}
   },
   emits: ["update:modelValue", "focus", "blur"],
-  setup(e, { emit: l }) {
-    const a = e, t = l, s = E("base-input"), u = v(
-      () => m(
+  setup(e, { emit: o }) {
+    const l = e, t = o, d = S("base-input"), b = y(
+      () => B(
         "base-input__field",
-        a.error && "base-input__field--error",
-        a.disabled && "base-input__field--disabled"
+        l.error && "base-input__field--error",
+        l.disabled && "base-input__field--disabled"
       )
-    ), n = (b) => {
-      const g = b.target;
-      t("update:modelValue", g.value);
-    }, f = (b) => {
-      t("focus", b);
-    }, C = (b) => {
-      t("blur", b);
+    ), n = (f) => {
+      const k = f.target;
+      t("update:modelValue", k.value);
+    }, _ = (f) => {
+      t("focus", f);
+    }, I = (f) => {
+      t("blur", f);
     };
-    return (b, g) => (d(), o("div", L, [
-      e.label ? (d(), o("label", {
+    return (f, k) => (s(), a("div", T, [
+      e.label ? (s(), a("label", {
         key: 0,
-        for: B(s),
+        for: V(d),
         class: "base-input__label"
       }, [
-        k(_(e.label) + " ", 1),
-        e.required ? (d(), o("span", N, "*")) : c("", !0)
-      ], 8, M)) : c("", !0),
-      i("input", {
-        id: B(s),
+        F(v(e.label) + " ", 1),
+        e.required ? (s(), a("span", W, "*")) : c("", !0)
+      ], 8, D)) : c("", !0),
+      r("input", {
+        id: V(d),
         value: e.modelValue,
         type: e.type,
         placeholder: e.placeholder,
         disabled: e.disabled,
         required: e.required,
-        class: p(u.value),
+        class: h(b.value),
         onInput: n,
+        onFocus: _,
+        onBlur: I
+      }, null, 42, U),
+      e.error ? (s(), a("span", A, v(e.error), 1)) : c("", !0)
+    ]));
+  }
+}), fe = /* @__PURE__ */ C(G, [["__scopeId", "data-v-52f8a6e5"]]), H = { class: "base-select" }, J = ["for"], K = {
+  key: 0,
+  class: "base-select__required"
+}, P = ["id", "value", "disabled", "required"], Q = {
+  key: 0,
+  value: "",
+  disabled: ""
+}, X = ["value"], Y = {
+  key: 1,
+  class: "base-select__error"
+}, Z = /* @__PURE__ */ $({
+  __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(e, { emit: o }) {
+    const l = e, t = o, d = S("base-select"), b = y(
+      () => B(
+        "base-select__field",
+        l.error && "base-select__field--error",
+        l.disabled && "base-select__field--disabled"
+      )
+    ), n = (i) => {
+      if (typeof i == "object") {
+        const m = l.valueField || "value", u = i, g = u[m];
+        return g !== void 0 ? g : u.value ?? "";
+      }
+      return i;
+    }, _ = (i) => {
+      if (typeof i == "object") {
+        const m = l.labelField || "label", u = i, g = u[m];
+        return String(g !== void 0 ? g : u.label ?? "");
+      }
+      return String(i);
+    }, I = (i) => {
+      const m = i.target;
+      t("update:modelValue", m.value);
+    }, f = (i) => {
+      t("focus", i);
+    }, k = (i) => {
+      t("blur", i);
+    };
+    return (i, m) => (s(), a("div", H, [
+      e.label ? (s(), a("label", {
+        key: 0,
+        for: V(d),
+        class: "base-select__label"
+      }, [
+        F(v(e.label) + " ", 1),
+        e.required ? (s(), a("span", K, "*")) : c("", !0)
+      ], 8, J)) : c("", !0),
+      r("select", {
+        id: V(d),
+        value: e.modelValue,
+        disabled: e.disabled,
+        required: e.required,
+        class: h(b.value),
+        onChange: I,
         onFocus: f,
-        onBlur: C
-      }, null, 42, T),
-      e.error ? (d(), o("span", D, _(e.error), 1)) : c("", !0)
+        onBlur: k
+      }, [
+        e.placeholder ? (s(), a("option", Q, v(e.placeholder), 1)) : c("", !0),
+        (s(!0), a(L, null, j(e.options, (u) => (s(), a("option", {
+          key: n(u),
+          value: n(u)
+        }, v(_(u)), 9, X))), 128))
+      ], 42, P),
+      e.error ? (s(), a("span", Y, v(e.error), 1)) : c("", !0)
     ]));
   }
-}), R = /* @__PURE__ */ y(F, [["__scopeId", "data-v-52f8a6e5"]]), O = {
+}), ve = /* @__PURE__ */ C(Z, [["__scopeId", "data-v-4d5c982a"]]), R = {
   key: 0,
   class: "base-card__header"
-}, W = { class: "base-card__title" }, j = { class: "base-card__body" }, U = {
+}, ee = { class: "base-card__title" }, te = { class: "base-card__body" }, le = {
   key: 1,
   class: "base-card__footer"
-}, A = /* @__PURE__ */ h({
+}, ae = /* @__PURE__ */ $({
   __name: "BaseCard",
   props: {
     title: {},
@@ -128,29 +207,29 @@ const z = ["disabled", "type"], S = {
     padding: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const l = e, a = v(
-      () => m(l.elevated && "base-card--elevated", !l.padding && "base-card--no-padding")
+    const o = e, l = y(
+      () => B(o.elevated && "base-card--elevated", !o.padding && "base-card--no-padding")
     );
-    return (t, s) => (d(), o("div", {
-      class: p(["base-card", a.value])
+    return (t, d) => (s(), a("div", {
+      class: h(["base-card", l.value])
     }, [
-      t.$slots.header || e.title ? (d(), o("div", O, [
-        r(t.$slots, "header", {}, () => [
-          i("h3", W, _(e.title), 1)
+      t.$slots.header || e.title ? (s(), a("div", R, [
+        p(t.$slots, "header", {}, () => [
+          r("h3", ee, v(e.title), 1)
         ], !0)
       ])) : c("", !0),
-      i("div", j, [
-        r(t.$slots, "default", {}, void 0, !0)
+      r("div", te, [
+        p(t.$slots, "default", {}, void 0, !0)
       ]),
-      t.$slots.footer ? (d(), o("div", U, [
-        r(t.$slots, "footer", {}, void 0, !0)
+      t.$slots.footer ? (s(), a("div", le, [
+        p(t.$slots, "footer", {}, void 0, !0)
       ])) : c("", !0)
     ], 2));
   }
-}), 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 = {
+}), _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 = {
   key: 0,
   class: "collapsible-card__footer"
-}, Q = /* @__PURE__ */ h({
+}, re = /* @__PURE__ */ $({
   __name: "CollapsibleCard",
   props: {
     title: {},
@@ -158,92 +237,93 @@ const z = ["disabled", "type"], S = {
     padding: { type: Boolean, default: !0 },
     initiallyCollapsed: { type: Boolean, default: !0 }
   },
-  setup(e, { expose: l }) {
-    const a = e, t = $(a.initiallyCollapsed), s = () => {
+  setup(e, { expose: o }) {
+    const l = e, t = q(l.initiallyCollapsed), d = () => {
       t.value = !t.value;
-    }, u = v(
-      () => m(
-        a.elevated && "collapsible-card--elevated",
-        !a.padding && "collapsible-card--no-padding"
+    }, b = y(
+      () => B(
+        l.elevated && "collapsible-card--elevated",
+        !l.padding && "collapsible-card--no-padding"
       )
     );
-    return l({
-      toggle: s,
+    return o({
+      toggle: d,
       isCollapsed: t
-    }), (n, f) => (d(), o("div", {
-      class: p(["collapsible-card", u.value])
+    }), (n, _) => (s(), a("div", {
+      class: h(["collapsible-card", b.value])
     }, [
-      i("div", {
+      r("div", {
         class: "collapsible-card__header",
-        onClick: s
+        onClick: d
       }, [
-        i("div", G, [
-          r(n.$slots, "header", {}, () => [
-            i("h3", H, _(e.title), 1)
+        r("div", se, [
+          p(n.$slots, "header", {}, () => [
+            r("h3", oe, v(e.title), 1)
           ], !0)
         ]),
-        i("button", {
+        r("button", {
           type: "button",
           class: "collapsible-card__toggle",
           "aria-label": t.value ? "Expand" : "Collapse",
           "aria-expanded": !t.value
         }, [
-          (d(), o("svg", {
-            class: p(["collapsible-card__icon", { "collapsible-card__icon--collapsed": t.value }]),
+          (s(), a("svg", {
+            class: h(["collapsible-card__icon", { "collapsible-card__icon--collapsed": t.value }]),
             width: "20",
             height: "20",
             viewBox: "0 0 20 20",
             fill: "currentColor"
-          }, [...f[0] || (f[0] = [
-            i("path", {
+          }, [..._[0] || (_[0] = [
+            r("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, J)
+        ], 8, de)
       ]),
-      I(i("div", K, [
-        r(n.$slots, "default", {}, void 0, !0)
+      w(r("div", ne, [
+        p(n.$slots, "default", {}, void 0, !0)
       ], 512), [
-        [V, !t.value]
+        [E, !t.value]
       ]),
-      n.$slots.footer && !t.value ? (d(), o("div", P, [
-        r(n.$slots, "footer", {}, void 0, !0)
+      n.$slots.footer && !t.value ? (s(), a("div", ie, [
+        p(n.$slots, "footer", {}, void 0, !0)
       ])) : c("", !0)
     ], 2));
   }
-}), te = /* @__PURE__ */ y(Q, [["__scopeId", "data-v-489edb19"]]);
-function ae(e, l) {
-  const a = $(e), t = $(null), s = v(() => t.value === null);
+}), pe = /* @__PURE__ */ C(re, [["__scopeId", "data-v-14982384"]]);
+function he(e, o) {
+  const l = q(e), t = q(null), d = y(() => t.value === null);
   return {
-    value: a,
+    value: l,
     error: t,
-    isValid: s,
-    validate: () => (t.value = l(a.value), s.value),
+    isValid: d,
+    validate: () => (t.value = o(l.value), d.value),
     reset: () => {
-      a.value = e, t.value = null;
+      l.value = e, t.value = null;
     }
   };
 }
-function le(e, l) {
-  const a = (t) => {
-    e.value && !e.value.contains(t.target) && l();
+function me(e, o) {
+  const l = (t) => {
+    e.value && !e.value.contains(t.target) && o();
   };
-  q(() => {
-    document.addEventListener("click", a);
-  }), w(() => {
-    document.removeEventListener("click", a);
+  x(() => {
+    document.addEventListener("click", l);
+  }), z(() => {
+    document.removeEventListener("click", l);
   });
 }
 export {
-  Z as BaseButton,
-  ee as BaseCard,
-  R as BaseInput,
-  te as CollapsibleCard,
-  m as cn,
-  Y as debounce,
-  E as generateId,
-  le as useClickOutside,
-  ae as useValidation
+  be as BaseButton,
+  _e as BaseCard,
+  fe as BaseInput,
+  ve as BaseSelect,
+  pe as CollapsibleCard,
+  B as cn,
+  ue as debounce,
+  S as generateId,
+  me as useClickOutside,
+  he as useValidation
 };

package/dist/vue-component-library.umd.js

@@ -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"})}));
+(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

@@ -1,6 +1,6 @@
 {
   "name": "@allsrvsonline/vue-component-library",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "type": "module",
   "main": "./dist/vue-component-library.umd.js",
   "module": "./dist/vue-component-library.es.js",
@@ -30,12 +30,20 @@
     "format": "prettier --write \"src/**/*.{ts,tsx,vue,json}\"",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "tag": "git tag v%npm_package_version% && git push origin v%npm_package_version%",
+    "release": "standard-version",
+    "release:patch": "standard-version --release-as patch",
+    "release:minor": "standard-version --release-as minor",
+    "release:major": "standard-version --release-as major",
+    "release:dry-run": "standard-version --dry-run"
   },
   "dependencies": {
     "vue": "^3.5.24"
   },
   "devDependencies": {
+    "@commitlint/cli": "^20.3.0",
+    "@commitlint/config-conventional": "^20.3.0",
     "@types/node": "^24.10.1",
     "@typescript-eslint/eslint-plugin": "^8.51.0",
     "@typescript-eslint/parser": "^8.51.0",
@@ -48,6 +56,7 @@
     "eslint-plugin-vue": "^10.6.2",
     "happy-dom": "^20.0.11",
     "prettier": "^3.7.4",
+    "standard-version": "^9.5.0",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",