@xleddyl/443-components-vue 0.8.1 → 0.8.3

package/dist/components/data/Badge.vue.d.ts

@@ -406,8 +406,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
-    tone: Tone;
     size: BadgeSize;
+    tone: Tone;
     variant: BadgeVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/data/DescriptionList.vue.d.ts

@@ -410,8 +410,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     columns: number;
-    items: DescriptionItem[];
     layout: DescriptionLayout;
+    items: DescriptionItem[];
     divided: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/data/FilterPills.vue

@@ -34,6 +34,7 @@
 <script setup>
 import { computed, h, nextTick, ref, useTemplateRef, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import { translateOr } from "../../locale";
 import { hasFocusWithin } from "../../internal/core/focus";
 import Button from "../core/Button.vue";
 import DropdownMenu from "../overlays/DropdownMenu.vue";
@@ -46,10 +47,12 @@ const props = defineProps({
   size: { type: String, required: false, default: "md" },
   clearable: { type: Boolean, required: false },
   clearLabel: { type: String, required: false },
+  removeLabel: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   required: { type: null, required: false }
 });
-const { t } = useLocale();
+const emit = defineEmits(["select", "remove"]);
+const { t, locale } = useLocale();
 const groupLabel = computed(() => props.label ?? t("filterPills.label"));
 const clearText = computed(() => props.clearLabel ?? t("common.clear"));
 const slots = defineSlots();
@@ -82,10 +85,10 @@ function toggle(value) {
   setModel(active ? null : value);
 }
 const root = useTemplateRef("root");
-async function clear() {
+async function keepFocus(change) {
   const group = root.value;
   const hadFocus = hasFocusWithin(group);
-  setModel(props.multiple ? [] : null);
+  change();
   if (!hadFocus || !group) return;
   await nextTick();
   if (hasFocusWithin(group)) return;
@@ -98,6 +101,35 @@ async function clear() {
     group.focus({ preventScroll: true });
   }
 }
+function clear() {
+  return keepFocus(() => setModel(props.multiple ? [] : null));
+}
+function remove(value) {
+  return keepFocus(() => {
+    const rest = activeValues.value.filter((item) => item !== value);
+    if (isActive(value) && !(props.required && rest.length === 0))
+      setModel(props.multiple ? rest : null);
+    emit("remove", value);
+  });
+}
+function removable(pill, option, disabled) {
+  return h("span", { class: "k-filter-pill-group" }, [
+    pill,
+    h(Button, {
+      class: "k-filter-pill-remove",
+      variant: "ghost",
+      tone: "neutral",
+      size: "xs",
+      icon: "x-mark",
+      square: true,
+      disabled,
+      "aria-label": translateOr(locale.value, props.removeLabel, "filterPills.remove", {
+        label: option.valueLabel ? `${option.label} ${option.valueLabel}` : option.label
+      }),
+      onClick: () => remove(option.value)
+    })
+  ]);
+}
 function setPanel(value, open) {
   if (open) openPanel.value = value;
   else if (openPanel.value === value) openPanel.value = null;
@@ -113,7 +145,12 @@ function renderPill(value) {
     size: props.size,
     disabled: Boolean(props.disabled || option.disabled)
   };
-  const active = option.active ?? isActive(value);
+  const active = option.active ?? (option.removable ? true : isActive(value));
+  const pill = renderTrigger(option, base, active);
+  return option.removable ? removable(pill, option, base.disabled) : pill;
+}
+function renderTrigger(option, base, active) {
+  const value = option.value;
   if (option.menu)
     return h(
       DropdownMenu,
@@ -140,6 +177,8 @@ function renderPill(value) {
       }
     );
   }
+  if (option.removable)
+    return h(FilterPill, { ...base, active, onClick: () => emit("select", value) });
   return h(FilterPill, { ...base, pressed: isActive(value), onClick: () => toggle(value) });
 }
 const defaultPills = /* @__PURE__ */ new Map();

package/dist/components/data/FilterPills.vue.d.ts

@@ -8,11 +8,14 @@ declare const __VLS_export: <T extends FilterPillValue, M extends boolean = fals
         size?: "sm" | "md";
         clearable?: boolean;
         clearLabel?: string;
+        removeLabel?: string;
         disabled?: boolean;
         required?: R;
     } & {
         modelValue?: M extends true ? T[] : R extends true ? T : T | null;
     }) & {
+        onRemove?: ((value: T) => any) | undefined;
+        onSelect?: ((value: T) => any) | undefined;
         "onUpdate:modelValue"?: ((value: M extends true ? T[] : R extends true ? T : T | null) => any) | undefined;
     } & Partial<import("vue").HTMLAttributes & import("vue").ReservedProps>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -36,7 +39,7 @@ declare const __VLS_export: <T extends FilterPillValue, M extends boolean = fals
             close: () => void;
         }) => unknown) | undefined;
     };
-    emit: (event: "update:modelValue", value: M extends true ? T[] : R extends true ? T : T | null) => void;
+    emit: (((evt: "remove", value: T) => void) & ((evt: "select", value: T) => void)) & ((event: "update:modelValue", value: M extends true ? T[] : R extends true ? T : T | null) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/data/Pagination.vue

@@ -1,5 +1,9 @@
 <template>
-   <div class="k-pagination" :class="`k-pagination-${size}`">
+   <div
+      class="k-pagination"
+      :class="[`k-pagination-${size}`, { 'is-loading': loading }]"
+      :aria-busy="loading ? 'true' : void 0"
+   >
       <p v-if="showSummary" class="k-pagination-summary" aria-live="polite">
          <slot name="summary" :start="range.start" :end="range.end" :total="total">
             <template v-if="total > 0">
@@ -28,6 +32,18 @@
          </span>
       </div>
       <nav class="k-pagination-nav" :aria-label="navLabel">
+         <button
+            v-if="showEdges"
+            type="button"
+            class="k-btn k-btn-neutral k-btn-ghost is-icon"
+            :class="`k-btn-${buttonSize}`"
+            :disabled="disabled"
+            :aria-disabled="!disabled && page <= 1 ? 'true' : void 0"
+            :aria-label="firstText"
+            @click="go(1)"
+         >
+            <Icon name="chevron-double-left" />
+         </button>
          <button
             type="button"
             class="k-btn k-btn-neutral k-btn-ghost is-icon"
@@ -73,7 +89,35 @@
          >
             <Icon name="chevron-right" />
          </button>
+         <button
+            v-if="showEdges"
+            type="button"
+            class="k-btn k-btn-neutral k-btn-ghost is-icon"
+            :class="`k-btn-${buttonSize}`"
+            :disabled="disabled"
+            :aria-disabled="!disabled && page >= pageCount ? 'true' : void 0"
+            :aria-label="lastText"
+            @click="go(pageCount)"
+         >
+            <Icon name="chevron-double-right" />
+         </button>
       </nav>
+      <div v-if="showJump" class="k-pagination-jump">
+         <label :for="jumpId" class="k-pagination-size-label">{{ jumpText }}</label>
+         <input
+            :id="jumpId"
+            class="k-field k-field-sm k-pagination-jump-input"
+            type="number"
+            inputmode="numeric"
+            min="1"
+            :max="pageCount"
+            :value="page"
+            :disabled="disabled"
+            @change="onJump"
+            @keydown.enter.prevent="onJump"
+         />
+         <span class="k-pagination-jump-total" aria-hidden="true">/ {{ pageCount }}</span>
+      </div>
    </div>
 </template>
 
@@ -90,11 +134,17 @@ const props = defineProps({
   size: { type: String, required: false, default: "md" },
   compact: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
   showSummary: { type: Boolean, required: false, default: true },
+  showEdges: { type: Boolean, required: false },
+  showJump: { type: Boolean, required: false },
   label: { type: String, required: false },
   pageLabel: { type: String, required: false },
   previousLabel: { type: String, required: false },
   nextLabel: { type: String, required: false },
+  firstLabel: { type: String, required: false },
+  lastLabel: { type: String, required: false },
+  jumpLabel: { type: String, required: false },
   pageSizeLabel: { type: String, required: false },
   ofText: { type: String, required: false },
   emptyText: { type: String, required: false }
@@ -106,12 +156,16 @@ function pageText(value) {
 }
 const previousText = computed(() => props.previousLabel ?? t("pagination.previous"));
 const nextText = computed(() => props.nextLabel ?? t("pagination.next"));
+const firstText = computed(() => props.firstLabel ?? t("pagination.first"));
+const lastText = computed(() => props.lastLabel ?? t("pagination.last"));
+const jumpText = computed(() => props.jumpLabel ?? t("pagination.jump"));
 const pageSizeText = computed(() => props.pageSizeLabel ?? t("pagination.pageSize"));
 const ofLabel = computed(() => props.ofText ?? t("pagination.of"));
 const emptyLabel = computed(() => props.emptyText ?? t("common.noResults"));
 const page = defineModel("page", { type: Number, ...{ default: 1 } });
 const pageSize = defineModel("pageSize", { type: Number, ...{ default: 20 } });
 const sizeId = useId();
+const jumpId = useId();
 const buttonSize = computed(() => props.size === "sm" ? "xs" : "sm");
 const pageCount = computed(() => Math.max(1, Math.ceil(props.total / pageSize.value)));
 const items = computed(() => paginationItems(page.value, pageCount.value, props.siblings));
@@ -119,13 +173,20 @@ const range = computed(() => ({
   start: props.total === 0 ? 0 : (page.value - 1) * pageSize.value + 1,
   end: Math.min(page.value * pageSize.value, props.total)
 }));
-watch(pageCount, (count) => {
+watch([pageCount, () => props.total, () => props.loading], ([count, total, loading]) => {
+  if (loading || total <= 0) return;
   if (page.value > count) page.value = count;
 });
 function go(target) {
   const next = Math.min(Math.max(target, 1), pageCount.value);
   if (next !== page.value) page.value = next;
 }
+function onJump(event) {
+  const input = event.target;
+  const target = Math.trunc(Number(input.value));
+  if (Number.isFinite(target) && input.value !== "") go(target);
+  input.value = String(page.value);
+}
 function onSizeChange(event) {
   const firstItem = (page.value - 1) * pageSize.value;
   pageSize.value = Number(event.target.value);

package/dist/components/data/Pagination.vue.d.ts

@@ -13,11 +13,17 @@ declare const __VLS_base: import("vue").DefineComponent<{
     size?: "sm" | "md";
     compact?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     showSummary?: boolean;
+    showEdges?: boolean;
+    showJump?: boolean;
     label?: string;
     pageLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
+    firstLabel?: string;
+    lastLabel?: string;
+    jumpLabel?: string;
     pageSizeLabel?: string;
     ofText?: string;
     emptyText?: string;
@@ -225,11 +231,17 @@ declare const __VLS_base: import("vue").DefineComponent<{
     size?: "sm" | "md";
     compact?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     showSummary?: boolean;
+    showEdges?: boolean;
+    showJump?: boolean;
     label?: string;
     pageLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
+    firstLabel?: string;
+    lastLabel?: string;
+    jumpLabel?: string;
     pageSizeLabel?: string;
     ofText?: string;
     emptyText?: string;

package/dist/components/data/Tag.vue.d.ts

@@ -410,8 +410,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{
     onRemove?: (() => any) | undefined;
 }>, {
-    tone: Tone;
     size: BadgeSize;
+    tone: Tone;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/data/Tree.vue.d.ts

@@ -441,8 +441,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     "onUpdate:selected"?: ((value: TreeNodeId | null) => any) | undefined;
     "onUpdate:expanded"?: ((value: TreeNodeId[]) => any) | undefined;
 }>, {
-    invalid: boolean;
     size: TreeSize;
+    invalid: boolean;
     selectable: boolean;
     bordered: boolean;
     descriptionVariant: TreeDescriptionVariant;

package/dist/components/data/types.d.ts

@@ -91,5 +91,6 @@ export interface FilterPillOption<T extends FilterPillValue = FilterPillValue> {
     panel?: boolean;
     panelLabel?: string;
     active?: boolean;
+    removable?: boolean;
 }
 export type SelectionBarPlacement = 'inline' | 'sticky' | 'floating';

package/dist/components/feedback/Meter.vue.d.ts

@@ -407,9 +407,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
+    size: "sm" | "md";
     min: number;
     max: number;
-    size: "sm" | "md";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/feedback/Progress.vue.d.ts

@@ -408,9 +408,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     value: number | null;
+    size: ProgressSize;
     tone: Tone;
     max: number;
-    size: ProgressSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/feedback/ProgressRing.vue.d.ts

@@ -410,9 +410,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     value: number | null;
+    size: number | "sm" | "md" | "lg";
     tone: Tone;
     max: number;
-    size: number | "sm" | "md" | "lg";
     thickness: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/forms/Calendar.vue

@@ -1,7 +1,12 @@
 <template>
    <div
       class="k-calendar"
-      :class="{ 'is-range': range, 'is-disabled': disabled, 'is-readonly': readonly }"
+      :class="{
+  'is-range': range,
+  'is-disabled': disabled,
+  'is-readonly': readonly,
+  'has-day-text': Boolean(dayText || $slots.day)
+}"
    >
       <div class="k-calendar-header">
          <button
@@ -77,7 +82,22 @@
                   @mouseenter="hoverDate = day.iso"
                   @focus="focusedDate = day.iso"
                >
-                  <span class="k-calendar-day-number">{{ day.number }}</span>
+                  <span class="k-calendar-day-number">
+                     <slot
+                        name="day"
+                        :date="day.iso"
+                        :number="day.number"
+                        :text="day.text"
+                        :selected="day.selected"
+                        :unavailable="day.unavailable"
+                        :in-month="day.inMonth"
+                     >
+                        {{ day.number }}
+                        <span v-if="day.text" class="k-calendar-day-text" aria-hidden="true">{{
+                           day.text
+                        }}</span>
+                     </slot>
+                  </span>
                </td>
             </tr>
          </tbody>
@@ -118,7 +138,8 @@ const props = defineProps({
   nextLabel: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
-  level: { type: Number, required: false, default: 2 }
+  level: { type: Number, required: false, default: 2 },
+  dayText: { type: Function, required: false }
 });
 const { locale: appLocale, t } = useLocale();
 const resolvedLocale = computed(() => props.locale ?? appLocale.value.code);
@@ -176,10 +197,12 @@ function dayLabel(iso, start, end) {
     month: "long",
     day: "numeric"
   });
-  if (!props.range || !start) return label;
-  if (iso === start) return `${label}, ${t("calendar.rangeStart")}`;
-  if (iso === end) return `${label}, ${t("calendar.rangeEnd")}`;
-  return label;
+  const extra = props.dayText?.(iso);
+  const described = extra ? `${label}, ${extra}` : label;
+  if (!props.range || !start) return described;
+  if (iso === start) return `${described}, ${t("calendar.rangeStart")}`;
+  if (iso === end) return `${described}, ${t("calendar.rangeEnd")}`;
+  return described;
 }
 const weeks = computed(() => {
   const currentMonth = monthKey(focusedDate.value);
@@ -195,6 +218,7 @@ const weeks = computed(() => {
       iso,
       inMonth,
       number: Number(iso.slice(8)),
+      text: props.dayText?.(iso),
       label: dayLabel(iso, start, end),
       unavailable: isUnavailable(iso),
       selected: selected || Boolean(props.range && start && end && iso > start && iso < end),

package/dist/components/forms/Calendar.vue.d.ts

@@ -1,7 +1,16 @@
 import type { CalendarDateDisabled, CalendarRange } from './types';
-declare var __VLS_25: {};
+declare var __VLS_25: {
+    date: string;
+    number: number;
+    text: string | undefined;
+    selected: boolean;
+    unavailable: boolean;
+    inMonth: boolean;
+}, __VLS_27: {};
 type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_25) => any;
+    day?: (props: typeof __VLS_25) => any;
+} & {
+    footer?: (props: typeof __VLS_27) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     range?: boolean;
@@ -15,6 +24,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     disabled?: boolean;
     readonly?: boolean;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
+    dayText?: (iso: string) => string | undefined;
     modelValue?: string | CalendarRange | null | undefined;
     month?: string | undefined;
     key?: PropertyKey | undefined;
@@ -227,6 +237,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     disabled?: boolean;
     readonly?: boolean;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
+    dayText?: (iso: string) => string | undefined;
     modelValue?: string | CalendarRange | null | undefined;
     month?: string | undefined;
     key?: PropertyKey | undefined;

package/dist/components/forms/CheckboxGroup.vue

@@ -9,8 +9,13 @@
       class="k-choice-group k-checkbox-group"
       :class="[
   `k-choice-group-${orientation}`,
-  { 'is-invalid': control.invalid.value, 'is-disabled': control.disabled.value }
+  {
+    'is-invalid': control.invalid.value,
+    'is-disabled': control.disabled.value,
+    'has-columns': Boolean(columns)
+  }
 ]"
+      :style="columns ? { '--k-choice-columns': String(columns) } : void 0"
    >
       <legend v-if="hasLegend" class="k-choice-group-legend">
          <slot name="legend">{{ legendText }}</slot>
@@ -43,6 +48,7 @@ const props = defineProps({
   label: { type: String, required: false },
   legend: { type: String, required: false },
   orientation: { type: String, required: false, default: "vertical" },
+  columns: { type: Number, required: false },
   size: { type: String, required: false, default: "md" },
   name: { type: String, required: false },
   invalid: { type: Boolean, required: false, default: void 0 },

package/dist/components/forms/CheckboxGroup.vue.d.ts

@@ -6,6 +6,7 @@ declare const __VLS_export: <T extends ChoiceValue>(__VLS_props: NonNullable<Awa
         label?: string;
         legend?: string;
         orientation?: ChoiceOrientation;
+        columns?: number;
         size?: FieldSize;
         name?: string;
         invalid?: boolean;

package/dist/components/forms/ColorInput.vue.d.ts

@@ -225,13 +225,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }, {
@@ -464,22 +464,22 @@ declare const __VLS_export: import("vue").DefineComponent<{
     popovertarget?: string | undefined;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
     crossorigin?: string | undefined | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
+    size: FieldSize;
     invalid: boolean;
     swatches: ColorSwatch[];
     placeholder: string;
-    size: FieldSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/forms/Combobox.vue

@@ -28,7 +28,7 @@
          @mousedown="onControlMousedown"
       >
          <span v-if="icon" class="k-combobox-lead" aria-hidden="true"><Icon :name="icon" /></span>
-         <template v-if="multiple">
+         <template v-if="multiple && !hideTags">
             <span v-for="value in selectedValues" :key="keyOf(value)" class="k-combobox-tag">
                <span class="k-combobox-tag-label">{{ labelFor(value) }}</span>
                <button
@@ -211,6 +211,7 @@ const props = defineProps({
   search: { type: Function, required: false },
   filter: { type: Function, required: false },
   multiple: { type: Boolean, required: false },
+  hideTags: { type: Boolean, required: false },
   creatable: { type: [Boolean, Function], required: false },
   debounce: { type: Number, required: false, default: 250 },
   minQueryLength: { type: Number, required: false, default: 0 },
@@ -316,7 +317,7 @@ const inputValue = computed(() => {
   return selectedLabel.value;
 });
 const inputPlaceholder = computed(
-  () => props.multiple && selectedValues.value.length ? void 0 : props.placeholder
+  () => props.multiple && !props.hideTags && selectedValues.value.length ? void 0 : props.placeholder
 );
 const showClear = computed(
   () => props.clearable && interactive.value && selectedValues.value.length > 0
@@ -517,7 +518,7 @@ function onKeydown(event) {
       }
       break;
     case "Backspace":
-      if (props.multiple && !query.value && selectedValues.value.length) {
+      if (props.multiple && !props.hideTags && !query.value && selectedValues.value.length) {
         event.preventDefault();
         remove(selectedValues.value[selectedValues.value.length - 1]);
       }

package/dist/components/forms/Combobox.vue.d.ts

@@ -8,6 +8,7 @@ declare const __VLS_export: <T extends string | number, M extends T | T[] | null
         search?: ComboboxSearch<T>;
         filter?: (option: ComboboxOption<T>, query: string) => boolean;
         multiple?: boolean;
+        hideTags?: boolean;
         creatable?: boolean | ComboboxCreate<T>;
         debounce?: number;
         minQueryLength?: number;

package/dist/components/forms/DateInput.vue.d.ts

@@ -131,6 +131,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     lang?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
+    transform?: (value: string) => string;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
@@ -229,16 +230,17 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
     clearLabel?: string;
     noAutofill?: boolean;
+    counter?: boolean;
     onClear?: (() => any) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     crossorigin?: string | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
@@ -376,6 +378,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     lang?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
+    transform?: (value: string) => string;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
@@ -474,25 +477,26 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
+    maxlength?: (string | number) | undefined;
     clearLabel?: string;
     noAutofill?: boolean;
+    counter?: boolean;
     onClear?: (() => any) | undefined;
+    multiple?: (boolean | "true" | "false") | undefined;
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     crossorigin?: string | undefined;
-    maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
-    multiple?: (boolean | "true" | "false") | undefined;
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
-    invalid: boolean;
     size: FieldSize;
-    type: "date" | "datetime-local" | "month" | "week";
+    invalid: boolean;
+    type: "month" | "week" | "date" | "datetime-local";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;