@sewadah/selaras 0.7.1 → 0.8.0

package/dist/runtime/internal/ListboxBase.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxRoot, ListboxVirtualizer, useFilter } from "reka-ui";
+import { computed, ref, toRaw, useId } from "vue";
+import Checkbox from "../components/Checkbox.vue";
+import Icon from "../components/Icon.vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { listboxTheme } from "../theme/listbox";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps } from "../utils/ui";
+import { isOptionGroup, useComboboxSelect } from "./combobox-select";
+import { useListSelection } from "./list-selection";
+import ListboxOption from "./ListboxOption.vue";
+import ListSelectionForm from "./ListSelectionForm.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: null, required: true },
+  valueKey: { type: String, required: false },
+  labelKey: { type: String, required: false },
+  descriptionKey: { type: String, required: false },
+  multiple: { type: Boolean, required: false },
+  modelValue: { type: [String, Number, Object, Array], required: false },
+  defaultValue: { type: [String, Number, Object, Array], required: false },
+  formField: { type: Boolean, required: false, default: true },
+  label: { type: String, required: false },
+  selectionBehavior: { type: String, required: false },
+  checkbox: { type: Boolean, required: false },
+  selectAll: { type: Boolean, required: false },
+  ui: { type: Object, required: false },
+  searchable: { type: Boolean, required: false },
+  searchTerm: { type: String, required: false },
+  virtualize: { type: [Boolean, Object], required: false },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  form: { type: String, required: false },
+  required: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:searchTerm"]);
+const slots = defineSlots();
+const parentField = useFormField();
+const field = props.formField === false ? void 0 : parentField;
+const icons = useIcons();
+const messages = useMessages();
+const { selection, values, update, reset } = useListSelection(props, (value) => emit("update:modelValue", value));
+const { flatOptions } = useComboboxSelect({
+  get items() {
+    return props.items;
+  },
+  get valueKey() {
+    return props.valueKey;
+  },
+  get labelKey() {
+    return props.labelKey;
+  },
+  get modelValue() {
+    return selection.value;
+  }
+}, (_, value) => update(value));
+const localSearch = ref(props.searchTerm ?? "");
+const search = computed({
+  get: () => props.searchTerm ?? localSearch.value,
+  set: (value) => {
+    localSearch.value = value;
+    emit("update:searchTerm", value);
+  }
+});
+const { contains } = useFilter({ sensitivity: "base" });
+function matches(option) {
+  return !props.searchable || contains(option.label, search.value);
+}
+const visible = computed(() => flatOptions.value.filter(matches));
+const visibleValues = computed(() => visible.value.map((option) => option.value));
+const optionsByValue = computed(() => new Map(flatOptions.value.map((option) => [option.value, option])));
+const indices = computed(() => new Map(flatOptions.value.map((option, index) => [option, index])));
+const groups = computed(() => {
+  let offset = 0;
+  return props.items.map((entry) => {
+    const group = isOptionGroup(entry) ? entry : void 0;
+    const count = group ? group.items.length : 1;
+    const options = flatOptions.value.slice(offset, offset + count).map((option, index) => ({ option, index: offset + index })).filter(({ option }) => matches(option));
+    offset += count;
+    return { group, options };
+  }).filter((group) => group.options.length);
+});
+const eligible = computed(() => visible.value.filter((option) => !option.disabled).map((option) => option.value));
+const allChecked = computed(() => eligible.value.length > 0 && eligible.value.every((value) => values.value.includes(value)));
+const someChecked = computed(() => eligible.value.some((value) => values.value.includes(value)));
+function selectVisible(checked) {
+  update(checked === true ? [...values.value, ...eligible.value.filter((value) => !values.value.includes(value))] : values.value.filter((value) => !eligible.value.includes(value)));
+}
+function onListKeydown(event) {
+  if (props.multiple && (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
+    event.preventDefault();
+    event.stopPropagation();
+    selectVisible(true);
+  }
+}
+function updateSelection(value) {
+  update(Array.isArray(value) ? value.filter((item) => !optionsByValue.value.get(item)?.disabled || values.value.includes(item)) : value);
+}
+const generatedId = useId();
+const id = computed(() => props.id ?? field?.id ?? `selaras-listbox-${generatedId}`);
+const content = ref();
+defineExpose({ focus: () => content.value?.$el.focus() });
+const size = computed(() => props.size ?? field?.size ?? "md");
+const invalid = computed(() => props.invalid || field?.invalid.value || false);
+const color = computed(() => resolveRegisteredColorRole(invalid.value ? "danger" : props.color ?? "primary", "primary"));
+const theme = useComponentTheme("listbox", listboxTheme);
+const ui = computed(() => theme.value({ size: size.value, color: color.value, invalid: invalid.value }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: (key) => key.startsWith("aria-") });
+const a11yAttrs = useFallthroughAttrs((key) => key.startsWith("aria-"));
+const parts = computed(() => Object.fromEntries(Object.keys(listboxTheme.slots).map((key) => [key, resolveSlot(ui.value[key], props.ui?.[key])])));
+const virtual = computed(() => typeof props.virtualize === "object" ? { estimateSize: 40, overscan: 8, ...props.virtualize } : { estimateSize: 40, overscan: 8 });
+const rowProps = computed(() => ({ parts: parts.value, disabled: props.disabled, checkbox: !!props.multiple && props.checkbox, descriptionKey: props.descriptionKey ?? "description", color: color.value, size: size.value }));
+function sameValue(a, b) {
+  return toRaw(a) === toRaw(b);
+}
+function resetForm() {
+  reset();
+  search.value = "";
+}
+</script>
+
+<template>
+  <ListboxRoot :model-value="selection ?? (multiple ? [] : null)" :multiple="multiple" :disabled="disabled" :selection-behavior="selectionBehavior ?? 'toggle'" :by="sameValue" highlight-on-hover :data-selaras-color="color" v-bind="rootProps" @update:model-value="updateSelection($event)">
+    <div v-if="slots.header || multiple && selectAll || loading" v-bind="parts.header">
+      <slot name="header" />
+      <Checkbox v-if="multiple && selectAll" :id="`${generatedId}-select-all`" name="" :model-value="allChecked ? true : someChecked ? 'indeterminate' : false" :disabled="disabled || !eligible.length" :color="color" :size="size" :label="messages.selectAll" @update:model-value="selectVisible" />
+      <Icon v-if="loading" :name="icons.loading" :aria-label="messages.loading" class="animate-spin" v-bind="parts.icon" />
+    </div>
+    <div v-if="searchable" v-bind="parts.searchWrapper">
+      <Icon :name="icons.search" v-bind="parts.icon" />
+      <ListboxFilter v-model="search" :disabled="disabled" :placeholder="messages.search" :aria-label="messages.search" role="combobox" aria-autocomplete="list" :aria-expanded="true" :aria-controls="id" v-bind="parts.searchInput" />
+    </div>
+    <ListboxContent :id="id" ref="content" :aria-label="label ?? (field?.labelId ? void 0 : messages.select)" :aria-labelledby="field?.labelId" :aria-describedby="field?.describedBy.value" :aria-invalid="invalid || void 0" :aria-busy="loading || void 0" v-bind="{ ...parts.content, ...a11yAttrs }" @keydown.capture="onListKeydown">
+      <div v-if="!visible.length" v-bind="parts.empty">
+        <slot v-if="!flatOptions.length" name="empty">
+          {{ messages.noOptions }}
+        </slot>
+        <slot v-else name="empty-filter">
+          {{ messages.noResultsFound }}
+        </slot>
+      </div>
+      <ListboxVirtualizer v-else-if="virtualize" v-slot="{ option: value, virtualItem }" :options="visibleValues" :text-content="(value2) => optionsByValue.get(value2).label" v-bind="virtual">
+        <ListboxOption :option="optionsByValue.get(value)" :index="indices.get(optionsByValue.get(value)) ?? virtualItem.index" :selected="values.includes(value)" v-bind="rowProps">
+          <template v-if="slots.item" #default="data">
+            <slot name="item" v-bind="data" />
+          </template>
+        </ListboxOption>
+      </ListboxVirtualizer>
+      <template v-else>
+        <ListboxGroup v-for="(group, groupIndex) in groups" :key="groupIndex" v-bind="parts.group">
+          <ListboxGroupLabel v-if="group.group" v-bind="parts.groupLabel">
+            <slot name="group" :group="group.group">
+              {{ group.group.label }}
+            </slot>
+          </ListboxGroupLabel>
+          <ListboxOption v-for="{ option, index } in group.options" :key="option.key" :option="option" :index="index" :selected="values.includes(option.value)" v-bind="rowProps">
+            <template v-if="slots.item" #default="data">
+              <slot name="item" v-bind="data" />
+            </template>
+          </ListboxOption>
+        </ListboxGroup>
+      </template>
+    </ListboxContent>
+    <div v-if="slots.footer" v-bind="parts.footer">
+      <slot name="footer" />
+    </div>
+    <ListSelectionForm v-if="formField !== false" :values="values" :name="name ?? field?.name" :form="form" :required="required" :disabled="disabled" @reset="resetForm" />
+  </ListboxRoot>
+</template>

package/dist/runtime/internal/ListboxBase.vue.d.ts

@@ -0,0 +1,49 @@
+import type { ListboxProps } from '../utils/listbox-contracts.js';
+import type { SelectModelValue } from '../utils/select-contracts.js';
+import type { SelectItems } from './combobox-select.js';
+export interface ListboxBaseProps extends Omit<ListboxProps, 'items' | 'valueKey' | 'labelKey' | 'descriptionKey' | 'multiple' | 'modelValue' | 'defaultValue'> {
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    descriptionKey?: string;
+    multiple?: boolean;
+    modelValue?: SelectModelValue | SelectModelValue[];
+    defaultValue?: SelectModelValue | SelectModelValue[];
+    /** Composite panels must not inherit or submit their parent's form value. */
+    formField?: boolean;
+}
+type __VLS_Slots = {
+    'item'?: (props: {
+        item: SelectModelValue;
+        index: number;
+        selected: boolean;
+        disabled: boolean;
+    }) => any;
+    'group'?: (props: {
+        group: {
+            label: string;
+            items: readonly SelectModelValue[];
+        };
+    }) => any;
+    'header'?: () => any;
+    'footer'?: () => any;
+    'empty'?: () => any;
+    'empty-filter'?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ListboxBaseProps, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ListboxBaseProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SelectModelValue | SelectModelValue[] | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/internal/ListboxOption.d.vue.ts

@@ -0,0 +1,31 @@
+import type { ListboxThemeSlots } from '../theme/listbox.js';
+import type { ResolvedItemOption } from './combobox-select.js';
+type __VLS_Props = {
+    option: ResolvedItemOption;
+    index: number;
+    selected: boolean;
+    disabled?: boolean;
+    checkbox?: boolean;
+    descriptionKey: string;
+    color: string;
+    size?: 'sm' | 'md' | 'lg';
+    parts: Record<ListboxThemeSlots, Record<string, unknown>>;
+};
+declare var __VLS_13: {
+    item: import("../utils/select-contracts.js").SelectModelValue | import("./combobox-select.js").SelectOption<import("../utils/select-contracts.js").SelectModelValue>;
+    index: number;
+    selected: boolean;
+    disabled: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/internal/ListboxOption.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ListboxItem, ListboxItemIndicator } from "reka-ui";
+import { computed } from "vue";
+import Icon from "../components/Icon.vue";
+import { useIcons } from "../composables/use-icons";
+const props = defineProps({
+  option: { type: Object, required: true },
+  index: { type: Number, required: true },
+  selected: { type: Boolean, required: true },
+  disabled: { type: Boolean, required: false },
+  checkbox: { type: Boolean, required: false },
+  descriptionKey: { type: String, required: true },
+  color: { type: String, required: true },
+  size: { type: String, required: false },
+  parts: { type: Object, required: true }
+});
+const icons = useIcons();
+const record = computed(() => typeof props.option.raw === "object" ? props.option.raw : void 0);
+const description = computed(() => record.value?.[props.descriptionKey]);
+const icon = computed(() => typeof record.value?.icon === "string" ? record.value.icon : void 0);
+</script>
+
+<template>
+  <ListboxItem :value="option.value" :text-value="option.label" :disabled="disabled || option.disabled" v-bind="parts.item">
+    <span v-if="checkbox" aria-hidden="true" :data-state="selected ? 'checked' : 'unchecked'" v-bind="parts.checkbox"><Icon v-if="selected" :name="icons.check" class="size-3" /></span>
+    <slot :item="option.raw" :index="index" :selected="selected" :disabled="!!(disabled || option.disabled)">
+      <Icon v-if="icon" :name="icon" v-bind="parts.icon" />
+      <span v-bind="parts.itemContent">
+        <span v-bind="parts.label">{{ option.label }}</span>
+        <span v-if="description" v-bind="parts.description">{{ description }}</span>
+      </span>
+    </slot>
+    <ListboxItemIndicator v-if="!checkbox" v-bind="parts.indicator">
+      <Icon :name="icons.check" v-bind="parts.icon" />
+    </ListboxItemIndicator>
+  </ListboxItem>
+</template>

package/dist/runtime/internal/ListboxOption.vue.d.ts

@@ -0,0 +1,31 @@
+import type { ListboxThemeSlots } from '../theme/listbox.js';
+import type { ResolvedItemOption } from './combobox-select.js';
+type __VLS_Props = {
+    option: ResolvedItemOption;
+    index: number;
+    selected: boolean;
+    disabled?: boolean;
+    checkbox?: boolean;
+    descriptionKey: string;
+    color: string;
+    size?: 'sm' | 'md' | 'lg';
+    parts: Record<ListboxThemeSlots, Record<string, unknown>>;
+};
+declare var __VLS_13: {
+    item: import("../utils/select-contracts.js").SelectModelValue | import("./combobox-select.js").SelectOption<import("../utils/select-contracts.js").SelectModelValue>;
+    index: number;
+    selected: boolean;
+    disabled: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/internal/TransferListBase.d.vue.ts

@@ -0,0 +1,63 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
+import type { TransferListProps, TransferSide } from '../utils/transfer-list-contracts.js';
+import type { SelectItems } from './combobox-select.js';
+export interface TransferListBaseProps extends Omit<TransferListProps, 'items' | 'valueKey' | 'labelKey' | 'descriptionKey'> {
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    descriptionKey?: string;
+}
+declare var __VLS_2: "source-header" | "target-header", __VLS_3: {
+    count: number;
+    checkedCount: number;
+}, __VLS_15: {
+    side: TransferSide;
+    item: SelectModelValue;
+    index: number;
+    selected: boolean;
+    disabled: boolean;
+}, __VLS_18: {
+    side: TransferSide;
+}, __VLS_21: {
+    side: TransferSide;
+}, __VLS_25: "source-footer" | "target-footer", __VLS_26: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+} & {
+    [K in NonNullable<typeof __VLS_25>]?: (props: typeof __VLS_26) => any;
+} & {
+    item?: (props: typeof __VLS_15) => any;
+} & {
+    empty?: (props: typeof __VLS_18) => any;
+} & {
+    'empty-filter'?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TransferListBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SelectModelValue[]) => any;
+    "update:checked": (value: SelectModelValue[]) => any;
+    "update:sourceSearchTerm": (value: string) => any;
+    "update:targetSearchTerm": (value: string) => any;
+    transfer: (payload: {
+        direction: "to-target" | "to-source";
+        items: SelectModelValue[];
+        values: SelectModelValue[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<TransferListBaseProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SelectModelValue[]) => any) | undefined;
+    "onUpdate:checked"?: ((value: SelectModelValue[]) => any) | undefined;
+    "onUpdate:sourceSearchTerm"?: ((value: string) => any) | undefined;
+    "onUpdate:targetSearchTerm"?: ((value: string) => any) | undefined;
+    onTransfer?: ((payload: {
+        direction: "to-target" | "to-source";
+        items: SelectModelValue[];
+        values: SelectModelValue[];
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/internal/TransferListBase.vue

@@ -0,0 +1,206 @@
+<script setup>
+import { computed, getCurrentInstance, nextTick, ref, useSlots } from "vue";
+import Button from "../components/Button.vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { transferListTheme } from "../theme/transfer-list";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import { isOptionGroup, useComboboxSelect } from "./combobox-select";
+import { assertUniqueSelection, useListSelection } from "./list-selection";
+import ListboxBase from "./ListboxBase.vue";
+import ListSelectionForm from "./ListSelectionForm.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: null, required: true },
+  valueKey: { type: String, required: false },
+  labelKey: { type: String, required: false },
+  descriptionKey: { type: String, required: false },
+  checked: { type: null, required: false },
+  sourceLabel: { type: String, required: false },
+  targetLabel: { type: String, required: false },
+  sourceSearchTerm: { type: String, required: false },
+  targetSearchTerm: { type: String, required: false },
+  showSelectAll: { type: Boolean, required: false },
+  layout: { type: String, required: false },
+  ui: { type: Object, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  searchable: { type: Boolean, required: false },
+  virtualize: { type: [Boolean, Object], required: false },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  form: { type: String, required: false },
+  required: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:checked", "update:sourceSearchTerm", "update:targetSearchTerm", "transfer"]);
+const slots = useSlots();
+const field = useFormField();
+const messages = useMessages();
+const icons = useIcons();
+const { values, update, reset } = useListSelection({
+  get modelValue() {
+    return props.modelValue;
+  },
+  get defaultValue() {
+    return props.defaultValue;
+  },
+  get disabled() {
+    return props.disabled;
+  },
+  multiple: true
+}, (value) => emit("update:modelValue", value));
+const { flatOptions, toOption } = useComboboxSelect(props, (_, value) => update(value));
+const instance = getCurrentInstance();
+const localChecked = ref([]);
+const checked = computed(() => {
+  const value = Object.hasOwn(instance.vnode.props ?? {}, "checked") ? props.checked ?? [] : localChecked.value;
+  if (!Array.isArray(value))
+    throw new TypeError("[selaras] TransferList checked must be an array.");
+  assertUniqueSelection(value);
+  return value;
+});
+function setChecked(value) {
+  if (props.disabled)
+    return;
+  if (!Object.hasOwn(instance.vnode.props ?? {}, "checked"))
+    localChecked.value = value;
+  emit("update:checked", value);
+}
+const sides = ["source", "target"];
+const panelRefs = {};
+const localSearch = ref({ source: "", target: "" });
+function query(side) {
+  return (side === "source" ? props.sourceSearchTerm : props.targetSearchTerm) ?? localSearch.value[side];
+}
+function setQuery(side, value) {
+  localSearch.value[side] = value;
+  if (side === "source")
+    emit("update:sourceSearchTerm", value);
+  else
+    emit("update:targetSearchTerm", value);
+}
+function onSide(value, side) {
+  return values.value.includes(value) === (side === "target");
+}
+function panelItems(side) {
+  return props.items.flatMap((entry) => {
+    if (isOptionGroup(entry)) {
+      const items = entry.items.filter((item) => onSide(toOption(item).value, side));
+      return items.length ? [{ ...entry, items }] : [];
+    }
+    return onSide(toOption(entry).value, side) ? [entry] : [];
+  });
+}
+const panels = computed(() => Object.fromEntries(sides.map((side) => [side, {
+  items: panelItems(side),
+  options: flatOptions.value.filter((option) => onSide(option.value, side))
+}])));
+function panelChecked(side) {
+  return checked.value.filter((value) => onSide(value, side));
+}
+function updatePanelChecked(side, next) {
+  setChecked([...checked.value.filter((value) => !onSide(value, side)), ...Array.isArray(next) ? next : []]);
+}
+function movable(side) {
+  return panels.value[side].options.filter((option) => !option.disabled && checked.value.includes(option.value));
+}
+const announcement = ref("");
+const sourceLabel = computed(() => props.sourceLabel ?? messages.value.transferSource);
+const targetLabel = computed(() => props.targetLabel ?? messages.value.transferTarget);
+function transfer(side) {
+  if (props.disabled)
+    return;
+  const options = movable(side);
+  if (!options.length)
+    return;
+  const moved = options.map((option) => option.value);
+  update(side === "source" ? [...values.value, ...moved] : values.value.filter((value) => !moved.includes(value)));
+  setChecked(checked.value.filter((value) => !moved.includes(value)));
+  emit("transfer", { direction: side === "source" ? "to-target" : "to-source", items: options.map((option) => option.raw), values: moved });
+  announcement.value = "";
+  void nextTick(() => {
+    const destination = side === "source" ? "target" : "source";
+    if (moved.every((value) => onSide(value, destination))) {
+      announcement.value = messages.value.transferItems(moved.length, destination === "target" ? targetLabel.value : sourceLabel.value);
+      panelRefs[destination]?.focus();
+    }
+  });
+}
+const theme = useComponentTheme("transferList", transferListTheme);
+const ui = computed(() => theme.value({ layout: props.layout }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const parts = computed(() => Object.fromEntries(Object.keys(transferListTheme.slots).map((key) => [key, resolveSlot(ui.value[key], props.ui?.[key])])));
+function resetForm() {
+  reset();
+  localChecked.value = [];
+  emit("update:checked", []);
+  setQuery("source", "");
+  setQuery("target", "");
+  announcement.value = "";
+}
+</script>
+
+<template>
+  <div :id="id ?? field?.id" :aria-invalid="invalid || field?.invalid.value || void 0" :aria-describedby="field?.describedBy.value" v-bind="rootProps">
+    <template v-for="side in sides" :key="side">
+      <div v-bind="parts.panel">
+        <div v-bind="parts.header">
+          <slot :name="`${side}-header`" :count="panels[side].options.length" :checked-count="panelChecked(side).length">
+            <span>{{ side === "source" ? sourceLabel : targetLabel }}</span>
+            <span v-bind="parts.count">{{ messages.listSelectionCount(panelChecked(side).length, panels[side].options.length) }}</span>
+          </slot>
+        </div>
+        <ListboxBase
+          :ref="(element) => {
+  panelRefs[side] = element;
+}"
+          :items="panels[side].items"
+          :model-value="panelChecked(side)"
+          :value-key="valueKey"
+          :label-key="labelKey"
+          :description-key="descriptionKey"
+          :label="side === 'source' ? sourceLabel : targetLabel"
+          :search-term="query(side)"
+          :select-all="showSelectAll ?? true"
+          :searchable="searchable"
+          :virtualize="virtualize"
+          :disabled="disabled"
+          :loading="loading"
+          :invalid="invalid || field?.invalid.value"
+          :size="size ?? field?.size"
+          :color="color"
+          :form-field="false"
+          multiple checkbox
+          v-bind="parts.listbox"
+          @update:model-value="updatePanelChecked(side, $event)"
+          @update:search-term="setQuery(side, $event)"
+        >
+          <template v-if="slots.item" #item="data">
+            <slot name="item" v-bind="data" :side="side" />
+          </template>
+          <template v-if="slots.empty" #empty>
+            <slot name="empty" :side="side" />
+          </template>
+          <template v-if="slots['empty-filter']" #empty-filter>
+            <slot name="empty-filter" :side="side" />
+          </template>
+          <template v-if="slots[`${side}-footer`]" #footer>
+            <slot :name="`${side}-footer`" />
+          </template>
+        </ListboxBase>
+      </div>
+      <div v-if="side === 'source'" v-bind="parts.actions">
+        <Button :icon="icons.chevronRight" :aria-label="messages.moveToTarget" :title="messages.moveToTarget" :disabled="disabled || !movable('source').length" :size="size ?? field?.size" :color="color" variant="outline" square v-bind="parts.action" @click="transfer('source')" />
+        <Button :icon="icons.chevronLeft" :aria-label="messages.moveToSource" :title="messages.moveToSource" :disabled="disabled || !movable('target').length" :size="size ?? field?.size" :color="color" variant="outline" square v-bind="parts.action" @click="transfer('target')" />
+      </div>
+    </template>
+    <span role="status" aria-live="polite" aria-atomic="true" v-bind="parts.announcement">{{ announcement }}</span>
+    <ListSelectionForm :values="values" :name="name ?? field?.name" :form="form" :required="required" :disabled="disabled" @reset="resetForm" />
+  </div>
+</template>

package/dist/runtime/internal/TransferListBase.vue.d.ts

@@ -0,0 +1,63 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
+import type { TransferListProps, TransferSide } from '../utils/transfer-list-contracts.js';
+import type { SelectItems } from './combobox-select.js';
+export interface TransferListBaseProps extends Omit<TransferListProps, 'items' | 'valueKey' | 'labelKey' | 'descriptionKey'> {
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    descriptionKey?: string;
+}
+declare var __VLS_2: "source-header" | "target-header", __VLS_3: {
+    count: number;
+    checkedCount: number;
+}, __VLS_15: {
+    side: TransferSide;
+    item: SelectModelValue;
+    index: number;
+    selected: boolean;
+    disabled: boolean;
+}, __VLS_18: {
+    side: TransferSide;
+}, __VLS_21: {
+    side: TransferSide;
+}, __VLS_25: "source-footer" | "target-footer", __VLS_26: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+} & {
+    [K in NonNullable<typeof __VLS_25>]?: (props: typeof __VLS_26) => any;
+} & {
+    item?: (props: typeof __VLS_15) => any;
+} & {
+    empty?: (props: typeof __VLS_18) => any;
+} & {
+    'empty-filter'?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TransferListBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SelectModelValue[]) => any;
+    "update:checked": (value: SelectModelValue[]) => any;
+    "update:sourceSearchTerm": (value: string) => any;
+    "update:targetSearchTerm": (value: string) => any;
+    transfer: (payload: {
+        direction: "to-target" | "to-source";
+        items: SelectModelValue[];
+        values: SelectModelValue[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<TransferListBaseProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SelectModelValue[]) => any) | undefined;
+    "onUpdate:checked"?: ((value: SelectModelValue[]) => any) | undefined;
+    "onUpdate:sourceSearchTerm"?: ((value: string) => any) | undefined;
+    "onUpdate:targetSearchTerm"?: ((value: string) => any) | undefined;
+    onTransfer?: ((payload: {
+        direction: "to-target" | "to-source";
+        items: SelectModelValue[];
+        values: SelectModelValue[];
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};