@gcsa/console-vue 0.1.0

package/src/components/GcsaTabs.vue

@@ -0,0 +1,55 @@
+<template>
+  <Tabs.Root
+    class="gcsa-tabs gcsa-ui-surface"
+    :class="variantClass"
+    :model-value="value"
+    @update:model-value="onChange"
+  >
+    <Tabs.List class="gcsa-tabs__list">
+      <Tabs.Trigger
+        v-for="tab in items"
+        :key="tab.key"
+        :value="tab.key"
+        :disabled="tab.disabled"
+        class="gcsa-tabs__trigger gcsa-focus-ring"
+      >
+        {{ tab.label }}
+      </Tabs.Trigger>
+      <Tabs.Indicator v-if="variant === 'line'" class="gcsa-tabs__indicator" />
+    </Tabs.List>
+    <Tabs.Content
+      v-for="tab in items"
+      :key="tab.key"
+      :value="tab.key"
+      class="gcsa-tabs__content"
+    >
+      <slot :name="tab.key" />
+    </Tabs.Content>
+  </Tabs.Root>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Tabs } from '@ark-ui/vue/tabs';
+
+import type { GcsaTabsProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaTabs' });
+
+const props = withDefaults(
+  defineProps<GcsaTabsProps>(),
+  {
+    variant: 'line'
+  }
+);
+
+const emit = defineEmits<{
+  'update:value': [value: string];
+}>();
+
+const variantClass = computed(() => `gcsa-tabs--${props.variant}`);
+
+function onChange(value: string) {
+  emit('update:value', value);
+}
+</script>

package/src/components/GcsaTag.vue

@@ -0,0 +1,13 @@
+<template>
+  <span class="gcsa-tag" :class="tone ? `gcsa-tag--${tone}` : undefined">
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { GcsaTagProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaTag' });
+
+defineProps<GcsaTagProps>();
+</script>

package/src/components/GcsaTextarea.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    class="gcsa-text-control gcsa-text-control--textarea"
+    :class="[
+      sizeClass,
+      { 'gcsa-text-control--count': showCounter }
+    ]"
+  >
+    <textarea
+      class="gcsa-textarea"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :rows="rows"
+      :disabled="disabled"
+      :maxlength="maxLength"
+      :data-invalid="invalid || undefined"
+      :aria-describedby="showCounter ? countId : undefined"
+      @input="onInput"
+      @blur="onBlur"
+    />
+    <span
+      v-if="showCounter"
+      :id="countId"
+      class="gcsa-text-control__count"
+      :class="{ 'gcsa-text-control__count--near': isNearLimit }"
+      aria-live="polite"
+    >
+      {{ countText }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue';
+import { gcsaControlSizeClass } from '@gcsa/console-core';
+import type { GcsaTextareaProps } from '../types/componentProps';
+import { useGcsaTextCount } from '../composables/useGcsaTextCount';
+import { useGcsaComponentSize } from '../composables/useGcsaComponentSize';
+
+defineOptions({ name: 'GcsaTextarea' });
+
+const props = withDefaults(defineProps<GcsaTextareaProps>(), {
+  modelValue: '',
+  placeholder: '',
+  rows: 4,
+  disabled: false,
+  invalid: false,
+  maxLength: undefined,
+  showCount: undefined,
+  countFormatter: undefined
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  blur: [event: FocusEvent];
+}>();
+
+const resolvedSize = useGcsaComponentSize(() => props.size);
+const sizeClass = computed(() => gcsaControlSizeClass('gcsa-text-control', resolvedSize.value));
+const countId = useId();
+
+const { showCounter, countText, isNearLimit } = useGcsaTextCount({
+  modelValue: () => props.modelValue,
+  maxLength: () => props.maxLength,
+  showCount: () => props.showCount,
+  formatter: props.countFormatter
+});
+
+function onInput(event: Event) {
+  emit('update:modelValue', (event.target as HTMLTextAreaElement).value);
+}
+
+function onBlur(event: FocusEvent) {
+  emit('blur', event);
+  props.onBlur?.();
+}
+</script>

package/src/components/GcsaTimePicker.vue

@@ -0,0 +1,306 @@
+<template>
+  <div ref="root" class="gcsa-time-picker__root">
+    <div
+      class="gcsa-time-picker__control gcsa-focus-ring"
+      :data-invalid="invalid || undefined"
+      @click="openPicker"
+    >
+      <input
+        ref="inputRef"
+        class="gcsa-time-picker__input"
+        type="text"
+        inputmode="numeric"
+        readonly
+        :value="modelValue"
+        :placeholder="resolvedPlaceholder"
+        :disabled="disabled"
+        :aria-invalid="invalid || undefined"
+        aria-haspopup="dialog"
+        :aria-expanded="open"
+        autocomplete="off"
+        @focus="openPicker"
+        @keydown="onKeydown"
+      />
+      <button
+        type="button"
+        class="gcsa-time-picker__trigger gcsa-focus-ring"
+        :disabled="disabled"
+        :aria-label="messages.timePickerOpen"
+        @mousedown.prevent
+        @click.stop="openPicker"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <circle cx="8" cy="8" r="5.75" stroke="currentColor" stroke-width="1.2" />
+          <path d="M8 4.75V8l2.25 1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
+        </svg>
+      </button>
+    </div>
+    <button
+      v-if="allowClear && modelValue && !disabled"
+      type="button"
+      class="gcsa-time-picker__clear"
+      :aria-label="messages.timePickerClear"
+      @mousedown.prevent
+      @click.stop="clearValue"
+    >
+      ×
+    </button>
+    <Transition name="gcsa-time-picker-panel">
+      <div
+        v-if="open && !disabled"
+        ref="panelRef"
+        class="gcsa-time-picker__panel gcsa-ui-surface"
+        :class="{ 'gcsa-time-picker__panel--align-end': alignPanelEnd }"
+        role="dialog"
+        :aria-label="messages.timePickerSelect"
+      >
+      <div class="gcsa-time-picker__spinner">
+        <div
+          ref="hourColumn"
+          class="gcsa-time-picker__column"
+          role="listbox"
+          :aria-label="messages.timeHour"
+          @scroll="onColumnScroll('hour', $event)"
+        >
+          <button
+            v-for="hour in hours"
+            :key="hour"
+            type="button"
+            class="gcsa-time-picker__cell"
+            :class="{ 'gcsa-time-picker__cell--selected': hour === draftHour }"
+            role="option"
+            :aria-selected="hour === draftHour"
+            @mousedown.prevent
+            @click="selectHour(hour)"
+          >
+            {{ hour }}
+          </button>
+        </div>
+        <div
+          ref="minuteColumn"
+          class="gcsa-time-picker__column"
+          role="listbox"
+          :aria-label="messages.timeMinute"
+          @scroll="onColumnScroll('minute', $event)"
+        >
+          <button
+            v-for="minute in minutes"
+            :key="minute"
+            type="button"
+            class="gcsa-time-picker__cell"
+            :class="{ 'gcsa-time-picker__cell--selected': minute === draftMinute }"
+            role="option"
+            :aria-selected="minute === draftMinute"
+            @mousedown.prevent
+            @click="selectMinute(minute)"
+          >
+            {{ minute }}
+          </button>
+        </div>
+        <div class="gcsa-time-picker__selection" aria-hidden="true" />
+      </div>
+      <div class="gcsa-time-picker__footer">
+        <button
+          type="button"
+          class="gcsa-time-picker__link"
+          :disabled="!nowOption"
+          @mousedown.prevent
+          @click="selectNow"
+        >
+          此刻
+        </button>
+        <div class="gcsa-time-picker__actions">
+          <button type="button" class="gcsa-time-picker__link" @mousedown.prevent @click="cancel">取消</button>
+          <button type="button" class="gcsa-time-picker__confirm" @mousedown.prevent @click="confirm">确定</button>
+        </div>
+      </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  gcsaBuildTimeOptions,
+  gcsaCurrentTimeOption,
+  gcsaResolveTimeDraft,
+  gcsaTimePickerHours,
+  gcsaTimePickerMinutes,
+  gcsaTimePickerScrollIndex,
+  gcsaTimePickerScrollTop
+} from '@gcsa/console-core';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import type { GcsaTimePickerProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+
+defineOptions({ name: 'GcsaTimePicker' });
+
+const messages = useGcsaLocaleMessages();
+
+const props = withDefaults(
+  defineProps<GcsaTimePickerProps>(),
+  {
+    modelValue: '',
+    step: 60,
+    allowClear: true
+  }
+);
+
+const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.timePickerPlaceholder);
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
+
+const root = ref<HTMLElement | null>(null);
+const panelRef = ref<HTMLElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+const hourColumn = ref<HTMLElement | null>(null);
+const minuteColumn = ref<HTMLElement | null>(null);
+const open = ref(false);
+const alignPanelEnd = ref(false);
+const draftHour = ref('00');
+const draftMinute = ref('00');
+
+let hourTimer: number | undefined;
+let minuteTimer: number | undefined;
+
+const options = computed(() =>
+  gcsaBuildTimeOptions({
+    min: props.min,
+    max: props.max,
+    step: props.step
+  })
+);
+const hours = computed(() => gcsaTimePickerHours(options.value));
+const minutes = computed(() => gcsaTimePickerMinutes(options.value, draftHour.value));
+const draftValue = computed(() => `${draftHour.value}:${draftMinute.value}`);
+const nowOption = computed(() => gcsaCurrentTimeOption(options.value));
+
+function applyDraft(value: string) {
+  [draftHour.value, draftMinute.value] = value.split(':');
+}
+
+function syncDraft(value = props.modelValue ?? '') {
+  applyDraft(gcsaResolveTimeDraft(value, options.value));
+}
+
+function scrollColumns() {
+  nextTick(() => {
+    if (hourColumn.value) {
+      hourColumn.value.scrollTop = gcsaTimePickerScrollTop(hours.value.indexOf(draftHour.value));
+    }
+    if (minuteColumn.value) {
+      minuteColumn.value.scrollTop = gcsaTimePickerScrollTop(minutes.value.indexOf(draftMinute.value));
+    }
+  });
+}
+
+function syncPanelAlignment() {
+  nextTick(() => {
+    if (!root.value) return;
+    const rect = root.value.getBoundingClientRect();
+    const panelWidth = panelRef.value?.offsetWidth ?? 220;
+    const padding = 8;
+    alignPanelEnd.value = rect.left + panelWidth > window.innerWidth - padding;
+  });
+}
+
+function openPicker() {
+  if (props.disabled || open.value) return;
+  syncDraft();
+  open.value = true;
+  syncPanelAlignment();
+  scrollColumns();
+}
+
+function selectHour(hour: string) {
+  draftHour.value = hour;
+  if (!minutes.value.includes(draftMinute.value)) {
+    draftMinute.value = minutes.value[0] ?? '00';
+  }
+  scrollColumns();
+}
+
+function selectMinute(minute: string) {
+  draftMinute.value = minute;
+  scrollColumns();
+}
+
+function onColumnScroll(type: 'hour' | 'minute', event: Event) {
+  const element = event.currentTarget as HTMLElement;
+  const timer = type === 'hour' ? hourTimer : minuteTimer;
+  window.clearTimeout(timer);
+  const nextTimer = window.setTimeout(() => {
+    const values = type === 'hour' ? hours.value : minutes.value;
+    const index = gcsaTimePickerScrollIndex(element.scrollTop, values.length);
+    const value = values[index];
+    if (type === 'hour' && value) selectHour(value);
+    if (type === 'minute' && value) draftMinute.value = value;
+  }, 80);
+  if (type === 'hour') hourTimer = nextTimer;
+  else minuteTimer = nextTimer;
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    cancel();
+    return;
+  }
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    if (open.value) confirm();
+    else openPicker();
+    return;
+  }
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    event.preventDefault();
+    openPicker();
+    const index = options.value.indexOf(draftValue.value);
+    const delta = event.key === 'ArrowDown' ? 1 : -1;
+    syncDraft(options.value[Math.max(0, Math.min(options.value.length - 1, index + delta))]);
+    scrollColumns();
+  }
+}
+
+function confirm() {
+  emit('update:modelValue', draftValue.value);
+  open.value = false;
+}
+
+function cancel() {
+  open.value = false;
+  syncDraft();
+}
+
+function selectNow() {
+  if (!nowOption.value) return;
+  syncDraft(nowOption.value);
+  scrollColumns();
+}
+
+function clearValue() {
+  emit('update:modelValue', '');
+  open.value = false;
+}
+
+function onDocumentPointerDown(event: PointerEvent) {
+  if (!root.value?.contains(event.target as Node)) cancel();
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (!open.value) syncDraft();
+  }
+);
+
+watch(options, () => {
+  if (!open.value) syncDraft();
+});
+
+onMounted(() => document.addEventListener('pointerdown', onDocumentPointerDown));
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onDocumentPointerDown);
+  window.clearTimeout(hourTimer);
+  window.clearTimeout(minuteTimer);
+});
+</script>

package/src/components/GcsaTimeline.vue

@@ -0,0 +1,17 @@
+<template>
+  <ol class="gcsa-timeline" :aria-label="messages.timelineLabel">
+    <li v-for="item in items" :key="item.key" class="gcsa-timeline__item">
+      <span class="gcsa-timeline__rail" aria-hidden="true"><span class="gcsa-timeline__dot" :class="`gcsa-timeline__dot--${item.tone ?? 'primary'}`" /></span>
+      <div class="gcsa-timeline__body"><div class="gcsa-timeline__meta"><strong v-if="item.label">{{ item.label }}</strong><time v-if="item.time">{{ item.time }}</time></div><p>{{ item.content }}</p></div>
+    </li>
+  </ol>
+</template>
+
+<script setup lang="ts">
+import type { GcsaTimelineProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+
+defineOptions({ name: 'GcsaTimeline' });
+const messages = useGcsaLocaleMessages();
+defineProps<GcsaTimelineProps>();
+</script>

package/src/components/GcsaToastStack.vue

@@ -0,0 +1,45 @@
+<template>
+  <TransitionGroup
+    name="gcsa-toast"
+    tag="div"
+    class="gcsa-toast-region"
+    :style="regionStyle"
+    aria-live="polite"
+  >
+    <div
+      v-for="toast in toasts"
+      :key="toast.id"
+      class="gcsa-toast"
+      :class="`gcsa-toast--${toast.type}`"
+      role="status"
+    >
+      <span class="gcsa-toast__icon" aria-hidden="true">
+        <svg v-if="toast.type === 'success'" width="14" height="14" viewBox="0 0 24 24" fill="none">
+          <path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        <svg v-else-if="toast.type === 'error'" width="14" height="14" viewBox="0 0 24 24" fill="none">
+          <path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.75" />
+        </svg>
+        <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none">
+          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.75" />
+          <path d="M12 10v6M12 8h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        </svg>
+      </span>
+      <span class="gcsa-toast__content">{{ toast.message }}</span>
+    </div>
+  </TransitionGroup>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { GcsaToastStackProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaToastStack' });
+
+const props = defineProps<GcsaToastStackProps>();
+
+const regionStyle = computed(() =>
+  props.zIndex == null ? undefined : { zIndex: props.zIndex }
+);
+</script>

package/src/components/GcsaTooltip.vue

@@ -0,0 +1,79 @@
+<template>
+  <Tooltip.Root
+    :disabled="disabled || !hasContent"
+    :open-delay="openDelay"
+    :close-delay="closeDelay"
+    :positioning="positioningOptions"
+    @open-change="(details) => onPopupOpenChange(details.open)"
+  >
+    <Tooltip.Trigger v-if="hasTriggerSlot" as-child>
+      <slot name="trigger" />
+    </Tooltip.Trigger>
+    <Tooltip.Trigger v-else>
+      <GcsaButton variant="secondary">{{ resolvedTriggerLabel }}</GcsaButton>
+    </Tooltip.Trigger>
+    <GcsaPortal :portalled="portalled">
+      <Tooltip.Positioner :style="positionerStyle">
+        <Tooltip.Content class="gcsa-tooltip gcsa-ui-surface" :style="contentStyle">
+          <span class="gcsa-tooltip__text">
+            <slot>{{ content }}</slot>
+          </span>
+          <Tooltip.Arrow v-if="arrow" class="gcsa-tooltip__arrow">
+            <Tooltip.ArrowTip class="gcsa-tooltip__arrow-tip" />
+          </Tooltip.Arrow>
+        </Tooltip.Content>
+      </Tooltip.Positioner>
+    </GcsaPortal>
+  </Tooltip.Root>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { Tooltip } from '@ark-ui/vue/tooltip';
+import { createGcsaPopupPositioning } from '@gcsa/console-core';
+import type { GcsaTooltipProps } from '../types/componentProps';
+import GcsaButton from './GcsaButton.vue';
+import GcsaPortal from './GcsaPortal.vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import { useGcsaPopupZIndex } from '../composables/useGcsaPopupZIndex';
+
+defineOptions({ name: 'GcsaTooltip' });
+
+const props = withDefaults(
+  defineProps<GcsaTooltipProps>(),
+  {
+    content: '',
+    placement: 'top',
+    disabled: false,
+    openDelay: 200,
+    closeDelay: 100,
+    arrow: true,
+    portalled: true,
+    gutter: 8
+  }
+);
+
+const messages = useGcsaLocaleMessages();
+const { zIndex: popupZIndex, onOpenChange: onPopupOpenChange } = useGcsaPopupZIndex();
+const resolvedTriggerLabel = computed(() => props.triggerLabel ?? messages.value.hoverToView);
+
+const positionerStyle = computed(() =>
+  popupZIndex.value == null ? undefined : { zIndex: popupZIndex.value }
+);
+
+const contentStyle = computed(() =>
+  popupZIndex.value == null ? undefined : { zIndex: popupZIndex.value }
+);
+
+const slots: ReturnType<typeof useSlots> = useSlots();
+
+const hasTriggerSlot = computed<boolean>(() => Boolean(slots.trigger));
+const hasContent = computed<boolean>(() => Boolean(props.content || slots.default));
+
+const positioningOptions = computed(() =>
+  createGcsaPopupPositioning({
+    placement: props.placement,
+    gutter: props.gutter
+  })
+);
+</script>

package/src/components/GcsaTransfer.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="gcsa-transfer" :class="{ 'gcsa-transfer--disabled': disabled }">
+    <section class="gcsa-transfer__panel" :aria-label="resolvedSourceTitle">
+      <header class="gcsa-transfer__header"><span>{{ resolvedSourceTitle }}</span><span>{{ availableItems.length }}</span></header>
+      <div class="gcsa-transfer__search"><GcsaInput v-model="sourceQuery" :placeholder="messages.searchPlaceholder" :disabled="disabled" /></div>
+      <div class="gcsa-transfer__list" role="listbox" aria-multiselectable="true">
+        <button v-for="item in availableItems" :key="item.value" type="button" class="gcsa-transfer__item gcsa-focus-ring" :class="{ 'gcsa-transfer__item--selected': sourceSelected.includes(item.value) }" :disabled="disabled || item.disabled" role="option" :aria-selected="sourceSelected.includes(item.value)" @click="toggleSelected(item.value, 'source')"><span class="gcsa-transfer__check" aria-hidden="true">{{ sourceSelected.includes(item.value) ? '✓' : '' }}</span><span>{{ item.label }}</span></button>
+        <span v-if="!availableItems.length" class="gcsa-transfer__empty">{{ messages.noOptions }}</span>
+      </div>
+    </section>
+    <div class="gcsa-transfer__actions"><button type="button" class="gcsa-transfer__action gcsa-focus-ring" :disabled="disabled || !sourceSelected.length" :aria-label="messages.transferMoveRight" @click="moveRight">›</button><button type="button" class="gcsa-transfer__action gcsa-focus-ring" :disabled="disabled || !targetSelected.length" :aria-label="messages.transferMoveLeft" @click="moveLeft">‹</button></div>
+    <section class="gcsa-transfer__panel" :aria-label="resolvedTargetTitle">
+      <header class="gcsa-transfer__header"><span>{{ resolvedTargetTitle }}</span><span>{{ targetItems.length }}</span></header>
+      <div class="gcsa-transfer__search"><GcsaInput v-model="targetQuery" :placeholder="messages.searchPlaceholder" :disabled="disabled" /></div>
+      <div class="gcsa-transfer__list" role="listbox" aria-multiselectable="true">
+        <button v-for="item in filteredTargetItems" :key="item.value" type="button" class="gcsa-transfer__item gcsa-focus-ring" :class="{ 'gcsa-transfer__item--selected': targetSelected.includes(item.value) }" :disabled="disabled || item.disabled" role="option" :aria-selected="targetSelected.includes(item.value)" @click="toggleSelected(item.value, 'target')"><span class="gcsa-transfer__check" aria-hidden="true">{{ targetSelected.includes(item.value) ? '✓' : '' }}</span><span>{{ item.label }}</span></button>
+        <span v-if="!filteredTargetItems.length" class="gcsa-transfer__empty">{{ messages.noOptions }}</span>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { GcsaTransferProps } from '../types/componentProps';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+import GcsaInput from './GcsaInput.vue';
+
+defineOptions({ name: 'GcsaTransfer' });
+
+const messages = useGcsaLocaleMessages();
+
+const props = withDefaults(defineProps<GcsaTransferProps>(), { modelValue: () => [], disabled: false });
+
+const resolvedSourceTitle = computed(() => props.sourceTitle ?? messages.value.transferSourceTitle);
+const resolvedTargetTitle = computed(() => props.targetTitle ?? messages.value.transferTargetTitle);
+
+const emit = defineEmits<{ 'update:modelValue': [keys: string[]]; change: [keys: string[]] }>();
+const sourceSelected = ref<string[]>([]);
+const targetSelected = ref<string[]>([]);
+const sourceQuery = ref('');
+const targetQuery = ref('');
+const targetItems = computed(() => props.options.filter(item => props.modelValue.includes(item.value)));
+const availableItems = computed(() => props.options.filter(item => !props.modelValue.includes(item.value) && item.label.toLowerCase().includes(sourceQuery.value.trim().toLowerCase())));
+const filteredTargetItems = computed(() => targetItems.value.filter(item => item.label.toLowerCase().includes(targetQuery.value.trim().toLowerCase())));
+function toggleSelected(value: string, side: 'source' | 'target') { const selected = side === 'source' ? sourceSelected : targetSelected; const next = selected.value.includes(value) ? selected.value.filter(item => item !== value) : [...selected.value, value]; selected.value = next; }
+function update(next: string[]) { emit('update:modelValue', next); emit('change', next); sourceSelected.value = []; targetSelected.value = []; }
+function moveRight() { update([...props.modelValue, ...sourceSelected.value.filter(value => !props.modelValue.includes(value))]); }
+function moveLeft() { update(props.modelValue.filter(value => !targetSelected.value.includes(value))); }
+</script>