@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.1

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

@@ -1,305 +0,0 @@
-<template>
-  <VcSelect
-    class="vc-input-dropdown"
-    :options="options"
-    :option-label="optionLabel"
-    :option-value="optionValue"
-    :searchable="searchable"
-    :debounce="debounce"
-    :disabled="disabled"
-    :label="label"
-    :required="required"
-    :model-value="option"
-    :tooltip="tooltip"
-    :multilanguage="multilanguage"
-    :current-language="currentLanguage"
-    @update:model-value="$emit('update:option', $event)"
-  >
-    <template #option="scope">
-      <slot
-        name="option"
-        v-bind="scope"
-      ></slot>
-    </template>
-    <template #control="{ toggleHandler, isOpened }">
-      <VcInput
-        :placeholder="placeholder"
-        :hint="hint"
-        :clearable="clearable"
-        :prefix="prefix"
-        :suffix="suffix"
-        :name="name"
-        :model-value="modelValue"
-        :loading="loading"
-        :disabled="disabled"
-        :autofocus="autofocus"
-        :error="error"
-        :error-message="errorMessage"
-        :maxlength="maxlength"
-        :type="inputType"
-        class="vc-input-dropdown__input"
-        @update:model-value="$emit('update:model-value', $event)"
-        @blur="$emit('blur', $event)"
-      >
-        <template #append-inner>
-          <div class="tw-flex tw-items-center">
-            <slot
-              name="button"
-              :toggle-handler="toggleHandler"
-            >
-              <template v-if="options && options.length">
-                <button
-                  type="button"
-                  class="vc-input-dropdown__toggle-button"
-                  tabindex="0"
-                  aria-label="Select option"
-                  :aria-expanded="isOpened"
-                  aria-haspopup="listbox"
-                  @click.stop.prevent="toggleHandler"
-                  @keydown.enter.stop.prevent="toggleHandler"
-                  @keydown.space.stop.prevent="toggleHandler"
-                >
-                  {{ unref(option) }}
-                </button>
-              </template>
-            </slot>
-            <VcButton
-              v-if="options && options.length"
-              :icon="isOpened ? 'lucide-chevron-up' : 'lucide-chevron-down'"
-              icon-size="s"
-              text
-              aria-label="Toggle dropdown"
-              icon-class="vc-input-dropdown__toggle-button-icon"
-              @click.stop.prevent="toggleHandler"
-            ></VcButton>
-          </div>
-          <slot
-            v-if="$slots['append-inner']"
-            name="append-inner"
-          ></slot>
-        </template>
-        <template
-          v-if="$slots.control"
-          #control="scope"
-        >
-          <slot
-            name="control"
-            v-bind="scope"
-          ></slot>
-        </template>
-        <template
-          v-if="$slots['prepend-inner']"
-          #prepend-inner
-        >
-          <slot name="prepend-inner"></slot>
-        </template>
-        <template
-          v-if="$slots['append']"
-          #append
-        >
-          <slot name="append"></slot>
-        </template>
-        <template
-          v-if="$slots['prepend']"
-          #prepend
-        >
-          <slot name="prepend"></slot>
-        </template>
-      </VcInput>
-    </template>
-  </VcSelect>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { unref } from "vue";
-import { VcSelect } from "@ui/components/molecules/vc-select";
-import { VcInput } from "@ui/components/molecules/vc-input";
-import { type OptionProp } from "@ui/components/molecules/vc-select";
-
-export interface Props {
-  /**
-   * Model of the input component
-   */
-  modelValue: string | number | Date | null | undefined;
-  /**
-   * Input label text
-   */
-  label?: string;
-  /**
-   * Input placeholder text
-   */
-  placeholder?: string;
-  /**
-   * Input description (hint) text below input component
-   */
-  hint?: string;
-  /**
-   * Appends clearable icon when a value is set;
-   * When clicked, model becomes null
-   */
-  clearable?: boolean;
-  /**
-   * Prefix
-   */
-  prefix?: string;
-  /**
-   * Suffix
-   */
-  suffix?: string;
-  /**
-   * Used to specify the name of the control; If not specified, it takes the value 'Field'
-   */
-  name?: string;
-  /**
-   * Signals the user a process is in progress by displaying a spinner
-   */
-  loading?: boolean;
-  /**
-   * Debounce amount (in milliseconds) for search input
-   * Default: 0
-   */
-  debounce?: string | number;
-  /**
-   * Put component in disabled mode
-   */
-  disabled?: boolean;
-  /**
-   * Focus field on initial component render
-   */
-  autofocus?: boolean;
-  /**
-   * Does field have validation errors?
-   */
-  error?: boolean;
-  /**
-   * Validation error message (gets displayed only if 'error' is set to 'true')
-   */
-  errorMessage?: string;
-  /**
-   * Specify a max length of model
-   * Default value: 1024
-   */
-  maxlength?: string | number;
-  /**
-   * Input tooltip information
-   */
-  tooltip?: string;
-  /**
-   * Input required state
-   */
-  required?: boolean;
-  /**
-   * Default selected option from dropdown
-   */
-  option: unknown;
-  /**
-   * Available options that the user can select from.
-   * Default value: []
-   */
-  options?: unknown[];
-  /**
-   * Property of option which holds the 'value'
-   * Default value: id
-   * @param option The current option being processed
-   * @returns Value of the current option
-   */
-  optionValue?: OptionProp<unknown>;
-  /**
-   * Property of option which holds the 'label'
-   * Default value: title
-   * @param option The current option being processed
-   * @returns Label of the current option
-   */
-  optionLabel?: OptionProp<unknown>;
-  /**
-   * Enable search in dropdown
-   */
-  searchable?: boolean;
-  /**
-   * Type of the input field
-   * Default: text
-   */
-  inputType?: "text" | "password" | "email" | "tel" | "number" | "integer" | "url" | "time" | "date" | "datetime-local";
-  multilanguage?: boolean;
-  currentLanguage?: string;
-}
-
-export interface Emits {
-  (event: "update:model-value", value: string | number | Date | null | undefined): void;
-  (event: "update:option", value: unknown): void;
-  (event: "change", value: unknown): void;
-  (event: "blur", value: Event): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  debounce: 0,
-  searchable: false,
-  inputType: "text",
-});
-
-defineSlots<{
-  /**
-   * Slot for custom dropdown open handler
-   */
-  button: (scope: {
-    /**
-     * Dropdown open/close handler
-     */
-    toggleHandler: () => void;
-  }) => unknown;
-  /**
-   * Slot for custom append-inner content
-   */
-  "append-inner": (props: any) => any;
-  /**
-   * Slot for custom prepend-inner content
-   */
-  "prepend-inner": (props: any) => any;
-  /**
-   * Slot for custom append content
-   */
-  append: (props: any) => any;
-  /**
-   * Slot for custom prepend content
-   */
-  prepend: (props: any) => any;
-  /**
-   * Slot for custom input control
-   */
-  control: (scope: {
-    placeholder?: string;
-    focused?: boolean;
-    modelValue: string | number | Date | null | undefined;
-    emitValue: (value: string | number | Date | null) => void;
-  }) => unknown;
-  option: (scope: {
-    index: number;
-    //todo: Create generic component
-    opt: unknown;
-    selected: boolean;
-    toggleOption: (opt: any) => void;
-  }) => unknown;
-}>();
-
-defineEmits<Emits>();
-</script>
-
-<style lang="scss">
-:root {
-  --input-dropdown-toggle-color: var(--primary-500);
-}
-
-.vc-input-dropdown {
-  &__input {
-    @apply tw-w-full;
-  }
-
-  &__toggle-button {
-    @apply tw-text-[color:var(--input-dropdown-toggle-color)] tw-not-italic tw-font-medium tw-text-sm tw-cursor-pointer;
-  }
-
-  &__toggle-button-icon {
-    @apply tw-text-[color:var(--input-dropdown-toggle-color)] tw-ml-3;
-  }
-}
-</style>

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

@@ -1,10 +0,0 @@
-import type { InjectionKey, Ref } from "vue";
-
-export interface InputGroupContext {
-  name: Ref<string | undefined>;
-  disabled: Ref<boolean>;
-  invalid: Ref<boolean>;
-  describedBy: Ref<string | undefined>;
-}
-
-export const InputGroupContextKey: InjectionKey<InputGroupContext> = Symbol("vc-input-group-context");

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

@@ -1,2 +0,0 @@
-export { default as VcInputGroup } from "@ui/components/molecules/vc-input-group/vc-input-group.vue";
-export type { InputGroupContext } from "@ui/components/molecules/vc-input-group/context";

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

@@ -1,355 +0,0 @@
-import { ref } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcCheckbox } from "@ui/components/molecules/vc-checkbox";
-import { VcInput } from "@ui/components/molecules/vc-input";
-import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
-import { VcSelect } from "@ui/components/molecules/vc-select";
-import { VcInputGroup } from "@ui/components/molecules/vc-input-group";
-
-/**
- * `VcInputGroup` is a semantic wrapper for related form controls.
- * It is designed for text inputs, selects, checkboxes, radios, and mixed field compositions.
- */
-const meta = {
-  title: "Molecules/VcInputGroup",
-  component: VcInputGroup,
-  tags: ["autodocs"],
-  argTypes: {
-    label: {
-      description: "Group label (renders as legend)",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-    tooltip: {
-      description: "Tooltip text shown on the group label",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-    hint: {
-      description: "Hint text shown below grouped controls",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-    error: {
-      description: "Error state for the entire group",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    errorMessage: {
-      description: "Error message shown below the group",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-    required: {
-      description: "Shows required mark on the group label",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    disabled: {
-      description: "Disables all controls in the fieldset",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    orientation: {
-      description: "Layout orientation for grouped controls",
-      control: "select",
-      options: ["vertical", "horizontal"],
-      table: {
-        type: { summary: "'vertical' | 'horizontal'" },
-        defaultValue: { summary: "'vertical'" },
-      },
-    },
-    role: {
-      description: "ARIA role for the group container",
-      control: "select",
-      options: ["group", "radiogroup"],
-      table: {
-        type: { summary: "'group' | 'radiogroup'" },
-        defaultValue: { summary: "'group'" },
-      },
-    },
-    name: {
-      description: "Shared name propagated to child controls",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-  },
-  args: {
-    label: "Customer profile",
-    hint: "Group related form fields in one semantic section",
-    orientation: "vertical",
-    role: "group",
-    name: "customer-profile",
-  },
-} satisfies Meta<typeof VcInputGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const countryOptions = [
-  { id: "us", title: "United States" },
-  { id: "de", title: "Germany" },
-  { id: "jp", title: "Japan" },
-];
-
-/**
- * Main use case: grouping text inputs and selects.
- */
-export const FormFields: Story = {
-  render: (args) => ({
-    components: { VcInputGroup, VcInput, VcSelect },
-    setup: () => {
-      const firstName = ref("");
-      const country = ref<string | undefined>(undefined);
-      return { args, firstName, country, countryOptions };
-    },
-    template: `
-      <div class="tw-max-w-xl tw-space-y-3">
-        <VcInputGroup v-bind="args">
-          <VcInput
-            v-model="firstName"
-            label="First name"
-            placeholder="John"
-          />
-
-          <VcSelect
-            v-model="country"
-            label="Country"
-            placeholder="Select country"
-            :options="countryOptions"
-            option-value="id"
-            option-label="title"
-          />
-        </VcInputGroup>
-
-        <div class="tw-text-sm tw-text-gray-600">
-          Value: {{ { firstName, country } }}
-        </div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Horizontal form section layout.
- */
-export const HorizontalFields: Story = {
-  args: {
-    orientation: "horizontal",
-    label: "Shipping details",
-    hint: "Fields can be aligned in a row",
-  },
-  render: (args) => ({
-    components: { VcInputGroup, VcInput, VcSelect },
-    setup: () => {
-      const city = ref("");
-      const country = ref<string | undefined>(undefined);
-      return { args, city, country, countryOptions };
-    },
-    template: `
-      <div class="tw-max-w-3xl">
-        <VcInputGroup v-bind="args">
-          <div class="tw-w-[280px]">
-            <VcInput v-model="city" label="City" placeholder="Berlin" />
-          </div>
-          <div class="tw-w-[280px]">
-            <VcSelect
-              v-model="country"
-              label="Country"
-              placeholder="Select country"
-              :options="countryOptions"
-              option-value="id"
-              option-label="title"
-            />
-          </div>
-        </VcInputGroup>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Checkbox controls grouped with semantic fieldset/legend.
- */
-export const Checkboxes: Story = {
-  args: {
-    label: "Delivery options",
-    hint: "Choose at least one option",
-    name: "delivery-options",
-  },
-  render: (args) => ({
-    components: { VcInputGroup, VcCheckbox },
-    setup: () => {
-      const selected = ref<string[]>(["courier"]);
-      return { args, selected };
-    },
-    template: `
-      <div class="tw-max-w-lg tw-space-y-3">
-        <VcInputGroup v-bind="args">
-          <VcCheckbox v-model="selected" value="courier">Courier delivery</VcCheckbox>
-          <VcCheckbox v-model="selected" value="pickup">Store pickup</VcCheckbox>
-          <VcCheckbox v-model="selected" value="postal">Postal service</VcCheckbox>
-        </VcInputGroup>
-        <div class="tw-text-sm tw-text-gray-600">Selected: {{ selected }}</div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Horizontal radio controls with radiogroup role.
- */
-export const RadiosHorizontal: Story = {
-  args: {
-    role: "radiogroup",
-    orientation: "horizontal",
-    label: "Payment method",
-    hint: "You can change it later in checkout",
-    name: "payment-method",
-  },
-  render: (args) => ({
-    components: { VcInputGroup, VcRadioButton },
-    setup: () => {
-      const value = ref("card");
-      return { args, value };
-    },
-    template: `
-      <div class="tw-max-w-lg tw-space-y-3">
-        <VcInputGroup v-bind="args">
-          <VcRadioButton v-model="value" value="card" label="Card" />
-          <VcRadioButton v-model="value" value="invoice" label="Invoice" />
-          <VcRadioButton v-model="value" value="cash" label="Cash" />
-        </VcInputGroup>
-        <div class="tw-text-sm tw-text-gray-600">Selected: {{ value }}</div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Group-level disabled state for input/select fields.
- */
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    label: "Read-only section",
-    hint: "All controls are disabled by fieldset",
-    name: "readonly-profile",
-  },
-  render: (args) => ({
-    components: { VcInputGroup, VcInput, VcSelect },
-    setup: () => {
-      const email = ref("john@example.com");
-      const country = ref<string | undefined>("us");
-      return { args, email, country, countryOptions };
-    },
-    template: `
-      <VcInputGroup v-bind="args">
-        <VcInput v-model="email" label="Email" />
-        <VcSelect
-          v-model="country"
-          label="Country"
-          :options="countryOptions"
-          option-value="id"
-          option-label="title"
-        />
-      </VcInputGroup>
-    `,
-  }),
-};
-
-/**
- * Group-level error message for mixed form controls.
- */
-export const ErrorState: Story = {
-  args: {
-    label: "Billing details",
-    required: true,
-    error: true,
-    errorMessage: "Please fill required fields in this section",
-    hint: "At least one value is required",
-    name: "billing-details",
-  },
-  render: (args) => ({
-    components: { VcInputGroup, VcInput, VcSelect },
-    setup: () => {
-      const company = ref("");
-      const country = ref<string | undefined>(undefined);
-      return { args, company, country, countryOptions };
-    },
-    template: `
-      <VcInputGroup v-bind="args">
-        <VcInput v-model="company" label="Company" placeholder="ACME Inc." />
-        <VcSelect
-          v-model="country"
-          label="Country"
-          placeholder="Select country"
-          :options="countryOptions"
-          option-value="id"
-          option-label="title"
-        />
-      </VcInputGroup>
-    `,
-  }),
-};
-
-/**
- * Accessibility demo: inspect fieldset/legend and ARIA links.
- */
-export const Accessibility: Story = {
-  render: () => ({
-    components: { VcInputGroup, VcInput, VcSelect },
-    setup: () => {
-      const firstName = ref("Jane");
-      const country = ref<string | undefined>("de");
-      return { firstName, country, countryOptions };
-    },
-    template: `
-      <div class="tw-max-w-xl tw-space-y-4">
-        <VcInputGroup
-          label="Profile section"
-          name="profile-section"
-          hint="Inspect aria-describedby and aria-labelledby on fieldset"
-        >
-          <VcInput v-model="firstName" label="First name" />
-          <VcSelect
-            v-model="country"
-            label="Country"
-            :options="countryOptions"
-            option-value="id"
-            option-label="title"
-          />
-        </VcInputGroup>
-
-        <div class="tw-p-3 tw-bg-blue-50 tw-rounded tw-text-blue-700 tw-text-sm">
-          <strong>Inspect in DOM:</strong>
-          <ul class="tw-list-disc tw-pl-5 tw-mt-1">
-            <li><code>fieldset</code> groups related controls semantically</li>
-            <li><code>legend</code> provides section label</li>
-            <li><code>aria-describedby</code> points to hint/error id</li>
-            <li>works for standard form controls, not only checkbox/radio groups</li>
-          </ul>
-        </div>
-      </div>
-    `,
-  }),
-};