@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

package/ui/components/molecules/vc-input-group/vc-input-group.test.ts

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { mount } from "@vue/test-utils";
-import VcInputGroup from "@ui/components/molecules/vc-input-group/vc-input-group.vue";
-
-describe("VcInputGroup", () => {
-  it("renders semantic fieldset with legend", () => {
-    const wrapper = mount(VcInputGroup as any, {
-      props: {
-        label: "Delivery",
-      },
-      slots: {
-        default: '<input type="checkbox" value="courier" />',
-      },
-    });
-
-    expect(wrapper.find("fieldset").exists()).toBe(true);
-    expect(wrapper.find("legend").text()).toContain("Delivery");
-  });
-
-  it("links error message through aria-describedby", () => {
-    const wrapper = mount(VcInputGroup as any, {
-      props: {
-        label: "Channels",
-        error: true,
-        errorMessage: "Select at least one",
-      },
-      slots: {
-        default: '<input type="checkbox" value="email" />',
-      },
-    });
-
-    const fieldset = wrapper.find("fieldset");
-    const describedBy = fieldset.attributes("aria-describedby");
-
-    expect(fieldset.attributes("aria-invalid")).toBe("true");
-    expect(describedBy).toBeTruthy();
-    expect(wrapper.find(`#${describedBy}`).exists()).toBe(true);
-  });
-});

package/ui/components/molecules/vc-input-group/vc-input-group.vue

@@ -1,173 +0,0 @@
-<template>
-  <fieldset
-    class="vc-input-group"
-    :class="[
-      {
-        'vc-input-group--horizontal': orientation === 'horizontal',
-        'vc-input-group--vertical': orientation === 'vertical',
-        'vc-input-group--error': invalid,
-        'vc-input-group--disabled': disabled,
-      },
-    ]"
-    :disabled="disabled"
-    :role="role"
-    :aria-invalid="invalid || undefined"
-    :aria-describedby="describedBy"
-    :aria-labelledby="ariaLabelledBy"
-    :aria-label="ariaLabel"
-  >
-    <legend
-      v-if="label"
-      :id="labelId"
-      class="vc-input-group__legend"
-    >
-      <VcLabel
-        :required="required"
-        :error="invalid"
-      >
-        <span>{{ label }}</span>
-        <template
-          v-if="tooltip"
-          #tooltip
-          >{{ tooltip }}</template
-        >
-      </VcLabel>
-    </legend>
-
-    <div class="vc-input-group__controls">
-      <slot />
-    </div>
-
-    <Transition
-      name="slide-up"
-      mode="out-in"
-    >
-      <div v-if="invalid && errorMessage">
-        <slot name="error">
-          <VcHint
-            :id="errorId"
-            class="vc-input-group__error"
-            :error="true"
-          >
-            {{ errorMessage }}
-          </VcHint>
-        </slot>
-      </div>
-      <div v-else-if="hint">
-        <slot name="hint">
-          <VcHint
-            :id="hintId"
-            class="vc-input-group__hint"
-          >
-            {{ hint }}
-          </VcHint>
-        </slot>
-      </div>
-    </Transition>
-  </fieldset>
-</template>
-
-<script lang="ts" setup>
-import { computed, provide, toRef, useId } from "vue";
-import { VcHint } from "@ui/components/atoms/vc-hint";
-import { VcLabel } from "@ui/components/atoms/vc-label";
-import { InputGroupContextKey } from "@ui/components/molecules/vc-input-group/context";
-
-export interface Props {
-  label?: string;
-  tooltip?: string;
-  hint?: string;
-  error?: boolean;
-  errorMessage?: string;
-  required?: boolean;
-  disabled?: boolean;
-  orientation?: "vertical" | "horizontal";
-  role?: "group" | "radiogroup";
-  name?: string;
-  ariaLabel?: string;
-  ariaLabelledby?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  orientation: "vertical",
-  role: "group",
-});
-
-const uid = useId();
-const labelId = computed(() => `vc-input-group-${uid}-label`);
-const hintId = computed(() => `vc-input-group-${uid}-hint`);
-const errorId = computed(() => `vc-input-group-${uid}-error`);
-
-const invalid = computed(() => !!props.error || !!props.errorMessage);
-
-const describedBy = computed(() => {
-  if (invalid.value && props.errorMessage) {
-    return errorId.value;
-  }
-
-  if (props.hint) {
-    return hintId.value;
-  }
-
-  return undefined;
-});
-
-const ariaLabelledBy = computed(() => {
-  if (props.label) {
-    return labelId.value;
-  }
-
-  return props.ariaLabelledby;
-});
-
-provide(InputGroupContextKey, {
-  name: toRef(props, "name"),
-  disabled: computed(() => !!props.disabled),
-  invalid,
-  describedBy,
-});
-</script>
-
-<style lang="scss">
-:root {
-  --input-group-gap: 0.5rem;
-  --input-group-horizontal-gap: 1rem;
-  --input-group-legend-spacing: 0.375rem;
-}
-
-.vc-input-group {
-  @apply tw-flex tw-flex-col tw-gap-[var(--input-group-gap)] tw-min-w-0;
-
-  border: 0;
-  margin: 0;
-  padding: 0;
-
-  &__legend {
-    @apply tw-p-0 tw-m-0 tw-mb-[var(--input-group-legend-spacing)];
-  }
-
-  &__controls {
-    @apply tw-flex tw-flex-col tw-gap-[var(--input-group-gap)];
-  }
-
-  &__hint,
-  &__error {
-    @apply tw-mt-1;
-  }
-
-  &__error {
-    @apply [--hint-error-color:var(--danger-500)];
-  }
-
-  &--horizontal {
-    .vc-input-group__controls {
-      @apply tw-flex-row tw-flex-wrap tw-items-start tw-gap-[var(--input-group-horizontal-gap)];
-    }
-  }
-
-  &--disabled {
-    @apply tw-opacity-50;
-  }
-
-}
-</style>

package/ui/components/molecules/vc-multivalue/_internal/MultivalueDropdown.vue

@@ -1,216 +0,0 @@
-<template>
-  <teleport :to="teleportTarget">
-    <Transition name="multivalue-dropdown">
-      <div
-        v-if="isOpened"
-        :id="listboxId"
-        ref="dropdownElRef"
-        v-on-click-outside="[() => emit('clickOutside'), { ignore: [dropdownToggleRef] }]"
-        class="vc-multivalue__dropdown"
-        role="listbox"
-        :aria-label="ariaLabel"
-        :style="dropdownStyle"
-        @wheel="onDropdownWheel"
-      >
-        <input
-          ref="searchInputRef"
-          class="vc-multivalue__search"
-          tabindex="0"
-          aria-label="Search options"
-          autocomplete="off"
-          @input="emit('search', $event)"
-          @keydown.space.stop
-          @keydown.enter.stop
-        />
-
-        <!-- Scroll up button -->
-        <div
-          class="vc-multivalue__scroll-button"
-          :class="{ 'tw-opacity-0 tw-pointer-events-none': !canScrollUp }"
-          aria-hidden="true"
-          @pointerenter="startScroll('up')"
-          @pointerleave="stopScroll"
-        >
-          <VcIcon
-            icon="lucide-chevron-up"
-            size="xs"
-          />
-        </div>
-
-        <!-- Scrollable viewport -->
-        <div
-          ref="viewportRef"
-          class="vc-multivalue__viewport"
-          @scroll="updateScrollState"
-        >
-          <div
-            v-for="(item, i) in availableOptions"
-            :key="i"
-            class="vc-multivalue__item"
-            tabindex="0"
-            role="option"
-            :data-index="i"
-            @click="emit('select', item)"
-          >
-            <slot
-              name="option"
-              :item="item"
-              :index="i"
-            >
-              {{ item[optionLabel as keyof typeof item] }}
-            </slot>
-          </div>
-
-          <!-- No options message -->
-          <div
-            v-if="availableOptions.length === 0"
-            class="vc-multivalue__no-options"
-          >
-            {{ $t("COMPONENTS.MOLECULES.VC_SELECT.NO_OPTIONS") }}
-          </div>
-        </div>
-
-        <!-- Scroll down button -->
-        <div
-          class="vc-multivalue__scroll-button"
-          :class="{ 'tw-opacity-0 tw-pointer-events-none': !canScrollDown }"
-          aria-hidden="true"
-          @pointerenter="startScroll('down')"
-          @pointerleave="stopScroll"
-        >
-          <VcIcon
-            icon="lucide-chevron-down"
-            size="xs"
-          />
-        </div>
-      </div>
-    </Transition>
-  </teleport>
-</template>
-
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { ref, watch, onBeforeUnmount, nextTick } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { useTeleportTarget } from "@ui/composables";
-
-const props = defineProps<{
-  isOpened: boolean;
-  dropdownStyle: Record<string, string | undefined>;
-  availableOptions: any[];
-  optionLabel: string;
-  ariaLabel: string;
-  listboxId?: string;
-  dropdownToggleRef: HTMLElement | null;
-}>();
-
-const emit = defineEmits<{
-  select: [item: any];
-  search: [event: Event];
-  clickOutside: [];
-}>();
-
-defineSlots<{
-  option: (scope: { item: any; index: number }) => any;
-}>();
-
-const dropdownElRef = ref<HTMLElement | null>(null);
-const searchInputRef = ref<HTMLInputElement | null>(null);
-const viewportRef = ref<HTMLElement | null>(null);
-const { teleportTarget } = useTeleportTarget();
-
-// --- Scroll arrow state ---
-const canScrollUp = ref(false);
-const canScrollDown = ref(false);
-let scrollAnimationId: number | null = null;
-
-function updateScrollState() {
-  const el = viewportRef.value;
-  if (!el) {
-    canScrollUp.value = false;
-    canScrollDown.value = false;
-    return;
-  }
-  canScrollUp.value = el.scrollTop > 0;
-  canScrollDown.value = Math.ceil(el.scrollTop) < el.scrollHeight - el.clientHeight;
-}
-
-function startScroll(direction: "up" | "down") {
-  stopScroll();
-  const el = viewportRef.value;
-  if (!el) return;
-
-  const speed = 2; // px per frame (~120px/s at 60fps) — smooth
-  function tick() {
-    if (!el) return;
-    el.scrollTop += direction === "up" ? -speed : speed;
-    updateScrollState();
-    scrollAnimationId = requestAnimationFrame(tick);
-  }
-  scrollAnimationId = requestAnimationFrame(tick);
-}
-
-function stopScroll() {
-  if (scrollAnimationId !== null) {
-    cancelAnimationFrame(scrollAnimationId);
-    scrollAnimationId = null;
-  }
-}
-
-function onDropdownWheel(event: WheelEvent) {
-  const el = viewportRef.value;
-  if (!el) return;
-
-  const isInViewport = el.contains(event.target as Node);
-
-  if (isInViewport) {
-    // Native scroll handles viewport scrolling.
-    // Only prevent page scroll at boundaries.
-    const atTop = el.scrollTop <= 0 && event.deltaY < 0;
-    const atBottom =
-      Math.ceil(el.scrollTop) >= el.scrollHeight - el.clientHeight && event.deltaY > 0;
-    if (atTop || atBottom) {
-      event.preventDefault();
-    }
-  } else {
-    // Cursor is on scroll buttons, search, or other non-viewport area —
-    // forward the wheel event to the viewport manually.
-    event.preventDefault();
-    el.scrollTop += event.deltaY;
-  }
-  updateScrollState();
-}
-
-watch(
-  () => props.isOpened,
-  (opened) => {
-    if (opened) {
-      nextTick(updateScrollState);
-    } else {
-      stopScroll();
-      canScrollUp.value = false;
-      canScrollDown.value = false;
-    }
-  },
-);
-
-watch(
-  () => props.availableOptions.length,
-  () => {
-    if (props.isOpened) {
-      nextTick(updateScrollState);
-    }
-  },
-);
-
-onBeforeUnmount(() => {
-  stopScroll();
-});
-
-defineExpose({
-  dropdownElRef,
-  searchInputRef,
-  viewportRef,
-});
-</script>

package/ui/components/molecules/vc-multivalue/_internal/MultivalueTrigger.vue

@@ -1,207 +0,0 @@
-<template>
-  <div
-    ref="triggerRef"
-    class="vc-multivalue__field-wrapper"
-    :role="isDictionaryMode ? 'combobox' : undefined"
-    :tabindex="isDictionaryMode ? 0 : undefined"
-    :aria-expanded="isDictionaryMode ? isOpened : undefined"
-    :aria-haspopup="isDictionaryMode ? 'listbox' : undefined"
-    :aria-controls="isDictionaryMode && isOpened ? listboxId : undefined"
-    :aria-labelledby="labelId"
-    :aria-describedby="ariaDescribedBy"
-    :aria-required="ariaRequired"
-    :aria-invalid="error || undefined"
-  >
-    <div
-      v-if="$slots['prepend']"
-      class="vc-multivalue__prepend"
-    >
-      <slot name="prepend" />
-    </div>
-
-    <div class="vc-multivalue__control">
-      <div class="vc-multivalue__content">
-        <!-- Selected chips -->
-        <div
-          v-for="(item, i) in modelValue"
-          :key="item?.[optionValue as keyof typeof item] ?? i"
-          class="vc-multivalue__chip-wrapper"
-        >
-          <div
-            v-if="item"
-            class="vc-multivalue__chip"
-          >
-            <!-- Color square for color type -->
-            <div
-              v-if="type === 'color'"
-              class="vc-multivalue__color-square"
-              :style="{ backgroundColor: (item as any).colorCode || '#cccccc' }"
-              @click="emit('openColorPicker', i)"
-            >
-              <input
-                :ref="(el) => emit('setColorPickerRef', el as HTMLInputElement, i)"
-                type="color"
-                class="vc-multivalue__color-picker-hidden"
-                :value="(item as any).colorCode || '#000000'"
-                @change="(e) => emit('colorChange', e, i)"
-              />
-            </div>
-
-            <slot
-              name="selected-item"
-              :value="formatValue(item)"
-              :item="item"
-              :index="i"
-              :remove="() => emit('remove', i)"
-            >
-              <span class="vc-multivalue__chip-label">{{ formatValue(item) }}</span>
-            </slot>
-            <VcIcon
-              v-if="!disabled"
-              class="vc-multivalue__chip-remove"
-              icon="lucide-x"
-              size="xs"
-              tabindex="0"
-              role="button"
-              aria-label="Delete item"
-              @click="emit('remove', i)"
-              @keydown.enter="emit('remove', i)"
-              @keydown.space="emit('remove', i)"
-            />
-          </div>
-        </div>
-
-        <!-- Dictionary mode: Add button -->
-        <template v-if="isDictionaryMode">
-          <button
-            class="vc-multivalue__add-button"
-            :disabled="disabled"
-            tabindex="0"
-            type="button"
-            @click.stop="emit('toggleDropdown')"
-          >
-            <VcIcon
-              icon="lucide-plus"
-              size="xs"
-            />
-            <span>{{ $t("COMPONENTS.MOLECULES.VC_MULTIVALUE.ADD") }}</span>
-          </button>
-        </template>
-
-        <!-- Input mode: text input -->
-        <template v-else>
-          <input
-            :value="inputValue"
-            class="vc-multivalue__input"
-            :placeholder="placeholder"
-            :type="htmlInputType"
-            :disabled="disabled"
-            :aria-invalid="error || undefined"
-            :aria-required="ariaRequired"
-            :aria-labelledby="labelId"
-            :aria-describedby="ariaDescribedBy"
-            tabindex="0"
-            @input="emit('inputChange', ($event.target as HTMLInputElement).value)"
-            @keypress.enter.stop.prevent="emit('inputSubmit', $event)"
-            @blur="onInputBlur"
-            @keydown="emit('keyDown', $event)"
-            @focus="emit('focus')"
-          />
-        </template>
-      </div>
-
-      <!-- Clearable button -->
-      <div
-        v-if="clearable && modelValue && modelValue.length > 0 && !disabled"
-        class="vc-multivalue__clear"
-        role="button"
-        aria-label="Clear all"
-        tabindex="0"
-        @click="emit('clearAll')"
-        @keydown.enter="emit('clearAll')"
-        @keydown.space="emit('clearAll')"
-      >
-        <VcIcon
-          size="xs"
-          icon="lucide-x"
-        />
-      </div>
-
-      <!-- Loading -->
-      <div
-        v-if="loading"
-        class="vc-multivalue__loading"
-      >
-        <VcIcon
-          icon="lucide-loader-2"
-          class="tw-animate-spin"
-          size="m"
-        />
-      </div>
-    </div>
-
-    <div
-      v-if="$slots['append']"
-      class="vc-multivalue__append"
-    >
-      <slot name="append" />
-    </div>
-  </div>
-</template>
-
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { ref } from "vue";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-
-defineProps<{
-  modelValue?: any[];
-  isDictionaryMode: boolean;
-  type: string;
-  htmlInputType: string;
-  placeholder?: string;
-  disabled?: boolean;
-  error?: boolean;
-  loading?: boolean;
-  clearable?: boolean;
-  optionValue: string;
-  inputValue?: string;
-  formatValue: (item: any) => any;
-  isOpened?: boolean;
-  labelId?: string;
-  listboxId?: string;
-  ariaDescribedBy?: string;
-  ariaRequired?: boolean | undefined;
-}>();
-
-const emit = defineEmits<{
-  remove: [index: number];
-  toggleDropdown: [];
-  inputSubmit: [event: KeyboardEvent | FocusEvent];
-  inputChange: [value: string];
-  keyDown: [event: KeyboardEvent];
-  focus: [];
-  blur: [];
-  clearAll: [];
-  openColorPicker: [index: number];
-  setColorPickerRef: [el: HTMLInputElement, index: number];
-  colorChange: [event: Event, index: number];
-}>();
-
-defineSlots<{
-  "selected-item": (scope: { value: any; item: any; index: number; remove: () => void }) => any;
-  prepend: (props: any) => any;
-  append: (props: any) => any;
-}>();
-
-const triggerRef = ref<HTMLElement | null>(null);
-
-function onInputBlur(e: FocusEvent) {
-  emit("inputSubmit", e);
-  emit("blur");
-}
-
-defineExpose({
-  triggerRef,
-});
-</script>

package/ui/components/molecules/vc-multivalue/composables/index.ts

@@ -1,6 +0,0 @@
-export { useMultivalueMode, type MultivalueType } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueMode";
-export { useMultivalueValues } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueValues";
-export { useMultivalueInput } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueInput";
-export { useMultivalueColor } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueColor";
-export { useMultivalueDropdown } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueDropdown";
-export { useMultivalueOptions } from "@ui/components/molecules/vc-multivalue/composables/useMultivalueOptions";

package/ui/components/molecules/vc-multivalue/composables/useMultivalueColor.ts

@@ -1,50 +0,0 @@
-import { ref } from "vue";
-
-interface UseMultivalueColorOptions<T> {
-  modelValue: () => T[];
-  emit: {
-    updateModelValue: (val: T[]) => void;
-  };
-}
-
-/**
- * Manages color picker logic for color-type multivalue:
- * - Stores refs to hidden <input type="color"> elements
- * - Opens native color picker on color square click
- * - Updates colorCode on color change
- */
-export function useMultivalueColor<T>(options: UseMultivalueColorOptions<T>) {
-  const colorPickerRefs = ref<Map<number, HTMLInputElement>>(new Map());
-
-  function setColorPickerRef(el: HTMLInputElement | null, index: number) {
-    if (el) {
-      colorPickerRefs.value.set(index, el);
-    } else {
-      colorPickerRefs.value.delete(index);
-    }
-  }
-
-  function openColorPicker(index: number) {
-    const picker = colorPickerRefs.value.get(index);
-    picker?.click();
-  }
-
-  function handleColorChange(event: Event, index: number) {
-    const target = event.target as HTMLInputElement;
-    if (target?.value) {
-      const updatedValues = [...options.modelValue()];
-      updatedValues[index] = {
-        ...updatedValues[index],
-        colorCode: target.value,
-      };
-      options.emit.updateModelValue(updatedValues);
-    }
-  }
-
-  return {
-    colorPickerRefs,
-    setColorPickerRef,
-    openColorPicker,
-    handleColorChange,
-  };
-}