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

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

@@ -1,103 +0,0 @@
-<template>
-  <VcInputGroup
-    class="vc-checkbox-group"
-    :label="label"
-    :tooltip="tooltip"
-    :hint="hint"
-    :error="error"
-    :error-message="errorMessage"
-    :required="required"
-    :disabled="disabled"
-    :orientation="orientation"
-    role="group"
-    :name="resolvedName"
-  >
-    <slot v-if="$slots.default" />
-
-    <template v-else>
-      <VcCheckbox
-        v-for="(option, index) in options"
-        :key="getOptionKey(option, index)"
-        :model-value="normalizedModelValue"
-        :value="option.value"
-        :disabled="option.disabled"
-        :name="resolvedName"
-        :size="size"
-        @update:model-value="onUpdate"
-      >
-        {{ option.label }}
-      </VcCheckbox>
-    </template>
-  </VcInputGroup>
-</template>
-
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { computed, useId } from "vue";
-import { VcCheckbox } from "@ui/components/molecules/vc-checkbox";
-import { VcInputGroup } from "@ui/components/molecules/vc-input-group";
-
-export interface CheckboxGroupOption {
-  label: string;
-  value: any;
-  disabled?: boolean;
-}
-
-export interface Props {
-  modelValue?: any[];
-  options?: CheckboxGroupOption[];
-  label?: string;
-  tooltip?: string;
-  hint?: string;
-  error?: boolean;
-  errorMessage?: string;
-  required?: boolean;
-  disabled?: boolean;
-  orientation?: "vertical" | "horizontal";
-  name?: string;
-  size?: "s" | "m" | "l";
-}
-
-export interface Emits {
-  (event: "update:modelValue", value: any[]): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
-  options: () => [],
-  orientation: "vertical",
-  size: "s",
-});
-
-const emit = defineEmits<Emits>();
-
-const uid = useId();
-const generatedName = computed(() => `vc-checkbox-group-${uid}`);
-const resolvedName = computed(() => props.name || generatedName.value);
-const normalizedModelValue = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));
-
-function onUpdate(value: any) {
-  if (Array.isArray(value)) {
-    emit("update:modelValue", value);
-    return;
-  }
-
-  emit("update:modelValue", normalizedModelValue.value);
-}
-
-function getOptionKey(option: CheckboxGroupOption, index: number) {
-  if (typeof option.value === "string" || typeof option.value === "number") {
-    return `${option.value}`;
-  }
-
-  return `${index}`;
-}
-</script>
-
-<style lang="scss">
-.vc-checkbox-group {
-  .vc-checkbox {
-    @apply tw-min-h-5;
-  }
-}
-</style>

package/ui/components/molecules/vc-color-input/index.ts

@@ -1 +0,0 @@
-export { default as VcColorInput } from "@ui/components/molecules/vc-color-input/vc-color-input.vue";

package/ui/components/molecules/vc-color-input/vc-color-input.stories.ts

@@ -1,152 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcColorInput } from "@ui/components/molecules/vc-color-input";
-import { ref } from "vue";
-
-const meta = {
-  title: "Molecules/VcColorInput",
-  component: VcColorInput,
-  tags: ["autodocs"],
-  args: {
-    label: "Pick a color",
-    placeholder: "Enter hex color...",
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-### VcColorInput Component
-
-A standalone color input component extracted from VcInput. Combines a text input for hex values with a color swatch square that opens the native color picker.
-
-- **Dual input**: Type hex values or use the native color picker via the swatch
-- **Color name support**: Accepts CSS color names (e.g., "red") and converts to hex
-- **Accessible**: Auto-generated IDs, \`aria-describedby\`, \`aria-invalid\`
-- **Consistent styling**: Uses the same CSS variables and focus rings as VcInput
-        `,
-      },
-    },
-  },
-} satisfies Meta<typeof VcColorInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-        <div class="tw-mt-4 tw-p-2 tw-bg-gray-100 tw-rounded tw-text-sm">
-          <strong>Value:</strong> "{{ value ?? 'null' }}"
-        </div>
-      </div>
-    `,
-  }),
-};
-
-export const WithValue: Story = {
-  args: {
-    label: "Brand color",
-    modelValue: "#3b82f6",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-        <div class="tw-mt-4 tw-p-2 tw-bg-gray-100 tw-rounded tw-text-sm">
-          <strong>Value:</strong> "{{ value ?? 'null' }}"
-        </div>
-      </div>
-    `,
-  }),
-};
-
-export const WithError: Story = {
-  args: {
-    error: true,
-    errorMessage: "Please enter a valid hex color",
-    modelValue: "invalid",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-      </div>
-    `,
-  }),
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    label: "Disabled color",
-    modelValue: "#ef4444",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-      </div>
-    `,
-  }),
-};
-
-export const Clearable: Story = {
-  args: {
-    clearable: true,
-    label: "Clearable color",
-    modelValue: "#22c55e",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-      </div>
-    `,
-  }),
-};
-
-export const Small: Story = {
-  args: {
-    size: "small",
-    label: "Small color input",
-    modelValue: "#a855f7",
-  },
-  render: (args) => ({
-    components: { VcColorInput },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg">
-        <VcColorInput v-bind="args" v-model="value" />
-      </div>
-    `,
-  }),
-};

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

@@ -1,398 +0,0 @@
-<template>
-  <div
-    class="vc-color-input"
-    :class="[
-      {
-        'vc-color-input--error': invalid,
-        'vc-color-input--disabled': resolvedDisabled,
-        'vc-color-input--focused': isFocused,
-      },
-    ]"
-  >
-    <!-- Label -->
-    <VcLabel
-      v-if="label"
-      :id="labelId"
-      :html-for="inputId"
-      class="vc-color-input__label"
-      :required="required"
-      :multilanguage="multilanguage"
-      :current-language="currentLanguage"
-      :error="invalid"
-    >
-      <span>{{ label }}</span>
-      <template
-        v-if="tooltip"
-        #tooltip
-        >{{ tooltip }}</template
-      >
-    </VcLabel>
-
-    <div
-      class="vc-color-input__field-wrapper"
-      :class="{
-        'vc-color-input__field-wrapper--default': size === 'default',
-        'vc-color-input__field-wrapper--small': size === 'small',
-      }"
-    >
-      <div class="vc-color-input__field-container">
-        <div class="vc-color-input__field">
-          <input
-            :id="inputId"
-            ref="inputRef"
-            v-model="textValue"
-            :placeholder="placeholder"
-            type="text"
-            :disabled="resolvedDisabled"
-            :name="name"
-            :autofocus="autofocus"
-            :aria-invalid="invalid || undefined"
-            :aria-required="ariaRequired"
-            :aria-describedby="ariaDescribedBy"
-            :aria-labelledby="label ? labelId : undefined"
-            class="vc-color-input__input"
-            tabindex="0"
-            @blur="handleBlur"
-            @focus="handleFocus"
-            @input="onTextInput"
-          />
-
-          <!-- Color picker swatch -->
-          <div class="vc-color-input__color-container">
-            <button
-              type="button"
-              class="vc-color-input__color-square"
-              :style="{ backgroundColor: colorValue || '#ffffff' }"
-              :aria-label="`Pick color${colorValue ? ': ' + colorValue : ''}`"
-              @click="openColorPicker"
-            >
-              <!-- Hidden native color input -->
-              <input
-                ref="colorPickerRef"
-                type="color"
-                :value="colorValue"
-                class="vc-color-input__color-picker-hidden"
-                tabindex="-1"
-                aria-hidden="true"
-                @change="handleColorPickerChange"
-              />
-            </button>
-          </div>
-
-          <button
-            v-if="clearable && textValue && !disabled"
-            type="button"
-            class="vc-color-input__clear"
-            aria-label="Clear color"
-            @click="onReset"
-          >
-            <VcIcon
-              size="xs"
-              icon="lucide-x"
-            ></VcIcon>
-          </button>
-        </div>
-
-        <div
-          v-if="loading"
-          class="vc-color-input__loading"
-        >
-          <VcIcon
-            icon="lucide-loader-2"
-            class="vc-color-input__loading-icon"
-            size="m"
-          ></VcIcon>
-        </div>
-      </div>
-    </div>
-
-    <Transition
-      name="slide-up"
-      mode="out-in"
-    >
-      <div v-if="invalid && errorMessage">
-        <VcHint
-          :id="errorId"
-          class="vc-color-input__hint-error"
-          :error="true"
-          >{{ errorMessage }}</VcHint
-        >
-      </div>
-      <div v-else>
-        <VcHint
-          v-if="hint"
-          :id="hintId"
-          class="vc-color-input__desc"
-          >{{ hint }}</VcHint
-        >
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { ref, watch, nextTick } from "vue";
-import { useFormField } from "@ui/composables/useFormField";
-import { VcLabel } from "@ui/components/atoms/vc-label";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { VcHint } from "@ui/components/atoms/vc-hint";
-import { convertColorNameToHex, isValidHexColor, normalizeHexColor } from "@shared/utilities";
-import type { ITextFieldProps } from "@ui/types";
-
-export interface VcColorInputProps extends ITextFieldProps {
-  modelValue?: string | null;
-}
-
-export interface VcColorInputEmits {
-  (event: "update:modelValue", value: string | null): void;
-  (event: "blur", value: Event): void;
-  (event: "focus"): void;
-}
-
-const props = withDefaults(defineProps<VcColorInputProps>(), {
-  name: "Field",
-  size: "default",
-});
-
-const emit = defineEmits<VcColorInputEmits>();
-
-const { fieldId: inputId, labelId, errorId, hintId, invalid, resolvedDisabled, ariaRequired, ariaDescribedBy } =
-  useFormField(props);
-
-// State
-const isFocused = ref(false);
-const isSyncing = ref(false);
-const inputRef = ref<HTMLInputElement>();
-const colorPickerRef = ref<HTMLInputElement>();
-const textValue = ref(props.modelValue ?? "");
-const colorValue = ref("");
-
-// Initialize color value from modelValue
-function syncColorFromText(value: string) {
-  if (!value || typeof value !== "string") {
-    colorValue.value = "";
-    return;
-  }
-
-  const trimmed = value.trim();
-
-  if (isValidHexColor(trimmed)) {
-    colorValue.value = normalizeHexColor(trimmed);
-    return;
-  }
-
-  const hexColor = convertColorNameToHex(trimmed);
-  if (hexColor) {
-    colorValue.value = hexColor;
-  }
-}
-
-// Sync external modelValue → internal (with guard to prevent loop)
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (isSyncing.value) return;
-    isSyncing.value = true;
-    textValue.value = newVal ?? "";
-    nextTick(() => {
-      syncColorFromText(newVal ?? "");
-      isSyncing.value = false;
-    });
-  },
-  { immediate: true },
-);
-
-// Sync colorValue → hidden picker
-watch(colorValue, (newColorValue) => {
-  if (newColorValue && colorPickerRef.value) {
-    colorPickerRef.value.value = newColorValue;
-  }
-});
-
-function onTextInput() {
-  if (isSyncing.value) return;
-  isSyncing.value = true;
-  emit("update:modelValue", textValue.value || null);
-  nextTick(() => {
-    syncColorFromText(textValue.value);
-    isSyncing.value = false;
-  });
-}
-
-function handleColorPickerChange(event: Event) {
-  const target = event.target as HTMLInputElement;
-  if (target?.value) {
-    const hexColor = normalizeHexColor(target.value);
-    colorValue.value = hexColor;
-    textValue.value = hexColor;
-    emit("update:modelValue", hexColor);
-  }
-}
-
-function openColorPicker() {
-  colorPickerRef.value?.click();
-}
-
-function onReset() {
-  textValue.value = "";
-  colorValue.value = "";
-  emit("update:modelValue", null);
-}
-
-function handleBlur(e: Event) {
-  isFocused.value = false;
-  emit("blur", e);
-}
-
-function handleFocus() {
-  isFocused.value = true;
-  emit("focus");
-}
-
-function focus() {
-  inputRef.value?.focus();
-}
-
-defineExpose({ focus });
-</script>
-
-<style lang="scss">
-/* CSS variables are also defined in vc-input; duplicated here for standalone use */
-:root {
-  --input-height: 36px;
-  --input-height-small: 32px;
-  --input-border-radius: 6px;
-  --input-border-color: var(--neutrals-300);
-  --input-padding: 12px;
-  --input-background-color: var(--additional-50);
-  --input-placeholder-color: var(--neutrals-400);
-  --input-clear-color: var(--neutrals-400);
-  --input-clear-color-hover: var(--neutrals-600);
-  --input-text-color: var(--neutrals-800);
-  --input-disabled-text-color: var(--neutrals-500);
-  --input-disabled-bg-color: var(--neutrals-200);
-  --input-text-color-error: var(--danger-500);
-  --input-border-color-error: var(--danger-500);
-  --input-border-color-focus: var(--primary-500);
-  --input-focus-ring-color: var(--primary-100);
-  --input-error-ring-color: var(--danger-100);
-
-  --color-input-swatch-size: 20px;
-  --color-input-swatch-border-radius: 4px;
-  --color-input-swatch-border-color: var(--neutrals-300);
-  --color-input-swatch-border-color-hover: var(--neutrals-400);
-}
-
-.vc-color-input {
-  &__label {
-    @apply tw-mb-2;
-  }
-
-  &__field-wrapper {
-    @apply tw-px-[var(--input-padding)] tw-relative tw-flex tw-flex-nowrap tw-w-full tw-min-w-0 tw-box-border tw-grow
-      tw-border tw-border-solid tw-border-[color:var(--input-border-color)]
-      tw-rounded-[var(--input-border-radius)] tw-bg-[color:var(--input-background-color)]
-      tw-shadow-sm tw-transition-[color,box-shadow] tw-duration-150 tw-ease-in-out
-      tw-outline-none;
-
-    &--default {
-      @apply tw-h-[var(--input-height)];
-    }
-
-    &--small {
-      @apply tw-h-[var(--input-height-small)];
-    }
-  }
-
-  &__field-container {
-    @apply tw-flex tw-flex-nowrap tw-flex-auto tw-h-full;
-  }
-
-  &__field {
-    @apply tw-w-auto tw-min-w-0 tw-max-w-full tw-relative tw-flex tw-flex-row tw-flex-auto tw-flex-nowrap [height:inherit];
-
-    input.vc-color-input__input {
-      @apply tw-border-none tw-outline-none tw-h-full tw-min-w-0 tw-w-full tw-box-border tw-grow tw-text-sm tw-text-[color:var(--input-text-color)];
-      background: transparent;
-
-      &::placeholder {
-        @apply tw-text-[color:var(--input-placeholder-color)] tw-text-sm;
-      }
-    }
-  }
-
-  &__color-container {
-    @apply tw-relative tw-flex tw-items-center;
-  }
-
-  &__color-square {
-    @apply tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-ml-2
-      tw-border tw-border-solid tw-bg-transparent tw-p-0 tw-outline-none;
-    width: var(--color-input-swatch-size);
-    height: var(--color-input-swatch-size);
-    border-radius: var(--color-input-swatch-border-radius);
-    border-color: var(--color-input-swatch-border-color);
-
-    &:hover {
-      border-color: var(--color-input-swatch-border-color-hover);
-    }
-
-    &:focus-visible {
-      @apply tw-ring-[3px] tw-ring-[color:var(--input-focus-ring-color)] tw-outline-none;
-    }
-  }
-
-  &__color-picker-hidden {
-    @apply tw-opacity-0 tw-absolute tw-pointer-events-none tw-w-0 tw-h-0;
-  }
-
-  &__clear {
-    @apply tw-cursor-pointer tw-pl-3 tw-text-[color:var(--input-clear-color)]
-      hover:tw-text-[color:var(--input-clear-color-hover)] tw-flex tw-items-center
-      tw-border-none tw-bg-transparent tw-outline-none tw-p-0;
-  }
-
-  &__loading {
-    @apply tw-flex tw-items-center tw-flex-nowrap tw-pl-3;
-  }
-
-  &__loading-icon {
-    @apply tw-animate-spin tw-text-[color:var(--input-clear-color)];
-  }
-
-  &__hint-error {
-    @apply tw-mt-1 [--hint-error-color:var(--input-text-color-error)];
-  }
-
-  &__desc {
-    @apply tw-text-[color:var(--input-placeholder-color)] tw-text-sm tw-mt-1;
-  }
-
-  &--error &__field-wrapper {
-    @apply tw-border tw-border-solid tw-border-[color:var(--input-border-color-error)]
-      tw-ring-[3px] tw-ring-[color:var(--input-error-ring-color)];
-  }
-
-  &--error &__field input {
-    @apply tw-text-[color:var(--input-text-color-error)];
-  }
-
-  &--disabled &__field-wrapper {
-    @apply tw-opacity-50;
-  }
-
-  &--disabled &__field-wrapper,
-  &--disabled &__field,
-  &--disabled input {
-    @apply tw-cursor-not-allowed tw-pointer-events-none;
-  }
-
-  &--focused &__field-wrapper {
-    @apply tw-border-[color:var(--input-border-color-focus)]
-      tw-ring-[3px] tw-ring-[color:var(--input-focus-ring-color)]
-      tw-outline-none;
-  }
-
-}
-</style>

package/ui/components/molecules/vc-date-picker/index.ts

@@ -1 +0,0 @@
-export { default as VcDatePicker } from "@ui/components/molecules/vc-date-picker/vc-date-picker.vue";