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

package/ui/components/molecules/vc-switch/vc-switch.vue

@@ -1,237 +0,0 @@
-<template>
-  <div
-    class="vc-switch"
-    :class="{
-      'vc-switch--disabled': resolvedDisabled,
-      'vc-switch--error': invalid,
-    }"
-  >
-    <!-- Switch label -->
-    <VcLabel
-      v-if="label"
-      :html-for="switchId"
-      class="vc-switch__label"
-      :required="required"
-      :error="invalid"
-    >
-      <span>{{ label }}</span>
-      <template
-        v-if="labelTooltip"
-        #tooltip
-        >{{ labelTooltip }}</template
-      >
-    </VcLabel>
-
-    <div class="vc-switch__track-wrapper">
-      <label class="vc-switch__track-label">
-        <input
-          :id="switchId"
-          type="checkbox"
-          class="vc-switch__input"
-          role="switch"
-          :checked="invertValue(modelValue)"
-          :disabled="resolvedDisabled"
-          :aria-checked="!!invertValue(modelValue)"
-          :aria-invalid="invalid || undefined"
-          :aria-required="ariaRequired"
-          :aria-describedby="ariaDescribedBy"
-          tabindex="0"
-          @input="onInput"
-        />
-        <span class="vc-switch__slider"></span>
-      </label>
-    </div>
-
-    <Transition
-      name="slide-up"
-      mode="out-in"
-    >
-      <div v-if="invalid && errorMessage">
-        <slot name="error">
-          <VcHint
-            :id="errorId"
-            class="vc-switch__error"
-            :error="true"
-          >
-            {{ errorMessage }}
-          </VcHint>
-        </slot>
-      </div>
-      <div v-else-if="hintText">
-        <VcHint
-          :id="hintId"
-          class="vc-switch__hint"
-        >
-          {{ hintText }}
-        </VcHint>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted } from "vue";
-import { VcLabel } from "@ui/components/atoms/vc-label";
-import { VcHint } from "@ui/components/atoms/vc-hint";
-import { useFormField } from "@ui/composables/useFormField";
-import type { IFormFieldProps } from "@ui/types";
-
-export interface Props extends IFormFieldProps {
-  modelValue: boolean | undefined;
-  /** Hint text displayed below the switch */
-  hint?: string;
-  /**
-   * @deprecated Use `hint` instead. Kept for backward compatibility.
-   * @override Overrides IFormFieldProps.tooltip — here it acts as hint text, not label tooltip.
-   */
-  tooltip?: string;
-  /** Tooltip text shown on the label's info icon */
-  labelTooltip?: string;
-  trueValue?: boolean;
-  falseValue?: boolean;
-}
-
-export interface Emits {
-  (event: "update:modelValue", value: boolean | undefined): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  trueValue: true,
-  falseValue: false,
-});
-
-const emit = defineEmits<Emits>();
-
-defineSlots<{
-  error: (props: Record<string, never>) => any;
-}>();
-
-const { fieldId: switchId, errorId, hintId, invalid, resolvedDisabled, ariaRequired, ariaDescribedBy } =
-  useFormField(props);
-
-// `tooltip` prop is kept for backward compat — treat as hint text
-const hintText = computed(() => props.hint || props.tooltip);
-
-if (import.meta.env.DEV) {
-  onMounted(() => {
-    if (props.tooltip) {
-      console.warn('[VcSwitch] The "tooltip" prop is deprecated. Use "hint" for hint text or "labelTooltip" for the label info icon.');
-    }
-  });
-}
-
-const invertValue = (value: boolean | undefined) => {
-  if (typeof value !== "undefined") {
-    return props.trueValue ? value : !value;
-  }
-};
-
-function onInput(e: Event) {
-  const newValue = (e.target as HTMLInputElement).checked;
-  emit("update:modelValue", invertValue(newValue));
-}
-</script>
-
-<style lang="scss">
-:root {
-  --switch-width: 36px;
-  --switch-height: 20px;
-  --switch-thumb-size: 16px;
-  --switch-translate: 16px;
-
-  --switch-active-color: var(--primary-500);
-  --switch-inactive-color: var(--neutrals-300);
-  --switch-hover-active-color: var(--primary-600);
-  --switch-hover-inactive-color: var(--neutrals-400);
-  --switch-thumb-color: var(--additional-50);
-  --switch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --switch-focus-ring-color: var(--primary-100);
-  --switch-error-ring-color: var(--danger-100);
-  --switch-error-border-color: var(--danger-500);
-  --switch-border-radius: 9999px;
-  --switch-disabled-opacity: 0.5;
-}
-
-.vc-switch {
-  @apply tw-flex tw-flex-col;
-
-  &__label {
-    @apply tw-mb-2;
-  }
-
-  &__track-wrapper {
-    @apply tw-inline-flex tw-items-center;
-  }
-
-  &__track-label {
-    @apply tw-relative tw-inline-block tw-cursor-pointer;
-    width: var(--switch-width);
-    height: var(--switch-height);
-  }
-
-  &__hint {
-    @apply tw-mt-1;
-  }
-
-  &__error {
-    @apply tw-mt-1 [--hint-error-color:var(--danger-500)];
-  }
-
-  &__input {
-    @apply tw-w-0 tw-h-0 tw-opacity-0 tw-cursor-pointer;
-
-    &:checked + .vc-switch__slider {
-      background-color: var(--switch-active-color);
-
-      &::before {
-        @apply [transform:translateX(var(--switch-translate))_translateY(-50%)];
-      }
-    }
-
-    &:checked:not(:disabled) + .vc-switch__slider:hover {
-      background-color: var(--switch-hover-active-color);
-    }
-
-    &:not(:checked):not(:disabled) + .vc-switch__slider:hover {
-      background-color: var(--switch-hover-inactive-color);
-    }
-
-    &:focus-visible + .vc-switch__slider {
-      @apply tw-ring-[3px] tw-ring-[color:var(--switch-focus-ring-color)] tw-outline-none;
-    }
-
-    &:disabled + .vc-switch__slider {
-      @apply tw-cursor-not-allowed;
-      opacity: var(--switch-disabled-opacity);
-    }
-
-    &:disabled {
-      @apply tw-cursor-not-allowed;
-    }
-  }
-
-  &__slider {
-    @apply tw-absolute tw-inset-0 tw-rounded-[var(--switch-border-radius)] tw-cursor-pointer;
-    background-color: var(--switch-inactive-color);
-    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
-
-    &::before {
-      @apply tw-absolute tw-left-[2px] tw-top-1/2 tw-rounded-full tw-w-[var(--switch-thumb-size)] tw-h-[var(--switch-thumb-size)] [content:''] [transform:translateX(0)_translateY(-50%)];
-      background-color: var(--switch-thumb-color);
-      box-shadow: var(--switch-thumb-shadow);
-      transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-  }
-
-  &--error {
-    .vc-switch__slider {
-      @apply tw-ring-[3px] tw-ring-[color:var(--switch-error-ring-color)];
-    }
-  }
-
-  &--disabled {
-    @apply tw-pointer-events-none;
-  }
-
-}
-</style>

package/ui/components/molecules/vc-textarea/index.ts

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

package/ui/components/molecules/vc-textarea/vc-textarea.a11y.test.ts

@@ -1,44 +0,0 @@
-import { afterEach, describe, expect, it } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import axe from "axe-core";
-import VcTextarea from "@ui/components/molecules/vc-textarea/vc-textarea.vue";
-
-describe("VcTextarea a11y", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  const mountTextarea = (props: Record<string, unknown> = {}) => {
-    wrapper = mount(VcTextarea as any, {
-      props: { modelValue: "", ...props },
-      global: {
-        stubs: {
-          VcLabel: false,
-          VcHint: false,
-        },
-      },
-      attachTo: document.body,
-    });
-    return wrapper;
-  };
-
-  it("has no a11y violations with label", async () => {
-    const w = mountTextarea({ label: "Description" });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("has no a11y violations in error state", async () => {
-    const w = mountTextarea({ label: "Description", error: true, errorMessage: "Too short" });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("has no a11y violations when disabled", async () => {
-    const w = mountTextarea({ label: "Description", disabled: true });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-});

package/ui/components/molecules/vc-textarea/vc-textarea.stories.ts

@@ -1,326 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcTextarea } from "@ui/components/molecules/vc-textarea";
-import { ref } from "vue";
-
-/**
- * `VcTextarea` — a multiline input field component designed for entering large amounts of text.
- * Supports labels, hints, error handling, and other text field features.
- */
-const meta = {
-  title: "Molecules/VcTextarea",
-  component: VcTextarea,
-  tags: ["autodocs"],
-  argTypes: {
-    modelValue: {
-      description: "Text area value (v-model)",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    label: {
-      description: "Label text displayed above the textarea",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    placeholder: {
-      description: "Hint displayed inside the empty textarea",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    disabled: {
-      description: "Disables the textarea, making it non-interactive",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    required: {
-      description: "Marks the field as required",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    tooltip: {
-      description: "Additional information displayed as a tooltip",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    name: {
-      description: "HTML name attribute for the textarea element",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Field" },
-      },
-    },
-    maxlength: {
-      description: "Maximum number of characters that can be entered",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "1024" },
-      },
-    },
-    error: {
-      description: "Enables error state for the textarea",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    errorMessage: {
-      description: "Error message to display",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    multilanguage: {
-      description: "Enables multilanguage support",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    currentLanguage: {
-      description: "Currently selected language for multilanguage mode",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-  },
-  args: {
-    placeholder: "Enter text...",
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The VcTextarea component is a multiline input field for entering and editing large text data:
-
-- Supports v-model for two-way data binding
-- Includes support for labels, placeholders, and error messages
-- Shows character counter when maxlength is specified
-- Can be configured as a required field
-- Supports disabled state
-        `,
-      },
-    },
-  },
-} satisfies Meta<typeof VcTextarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Basic textarea example without additional settings
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: { VcTextarea },
-    setup() {
-      const value = ref("");
-      return { args, value };
-    },
-    template: `
-      <vc-textarea
-        v-bind="args"
-        v-model="value"
-        @update:modelValue="(val) => console.log('Text updated:', val)"
-      />
-    `,
-  }),
-};
-
-/**
- * Textarea with a label above the field
- */
-export const WithLabel: Story = {
-  args: {
-    label: "Description",
-  },
-  render: (args) => ({
-    components: { VcTextarea },
-    setup() {
-      const value = ref("");
-      return { args, value };
-    },
-    template: `
-      <vc-textarea
-        v-bind="args"
-        v-model="value"
-        @update:modelValue="(val) => console.log('Text updated:', val)"
-      />
-    `,
-  }),
-};
-
-/**
- * Disabled textarea, non-interactive
- */
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    modelValue: "This text cannot be changed",
-    label: "Disabled field",
-  },
-  render: (args) => ({
-    components: { VcTextarea },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <vc-textarea
-        v-bind="args"
-        v-model="value"
-        @update:modelValue="(val) => console.log('Text updated:', val)"
-      />
-    `,
-  }),
-};
-
-/**
- * Textarea with error message
- */
-export const WithError: Story = {
-  args: {
-    errorMessage: "The field contains invalid characters",
-    error: true,
-    label: "Field with error",
-  },
-  render: (args) => ({
-    components: { VcTextarea },
-    setup() {
-      const value = ref("Problematic text");
-      return { args, value };
-    },
-    template: `
-      <vc-textarea
-        v-bind="args"
-        v-model="value"
-        @update:modelValue="(val) => console.log('Text updated:', val)"
-      />
-    `,
-  }),
-};
-
-/**
- * Required textarea with label
- */
-export const Required: Story = {
-  args: {
-    label: "Required field",
-    required: true,
-  },
-  render: (args) => ({
-    components: { VcTextarea },
-    setup() {
-      const value = ref("");
-      return { args, value };
-    },
-    template: `
-      <vc-textarea
-        v-bind="args"
-        v-model="value"
-        @update:modelValue="(val) => console.log('Text updated:', val)"
-      />
-    `,
-  }),
-};
-
-/**
- * Textarea with tooltip
- */
-export const WithTooltip: Story = {
-  args: {
-    tooltip: "This hint helps understand what to enter",
-    label: "Field with tooltip",
-  },
-  render: (args) => ({
-    components: { VcTextarea },
-    setup() {
-      const value = ref("");
-      return { args, value };
-    },
-    template: `
-      <vc-textarea
-        v-bind="args"
-        v-model="value"
-        @update:modelValue="(val) => console.log('Text updated:', val)"
-      />
-    `,
-  }),
-};
-
-/**
- * Textarea with character limit
- */
-export const WithMaxLength: Story = {
-  args: {
-    label: "Limited field",
-    maxlength: "50",
-    modelValue: "Text with a length limit of 50 characters",
-  },
-  render: (args) => ({
-    components: { VcTextarea },
-    setup() {
-      const value = ref(args.modelValue);
-      return { args, value };
-    },
-    template: `
-      <vc-textarea
-        v-bind="args"
-        v-model="value"
-        @update:modelValue="(val) => console.log('Text updated:', val)"
-      />
-    `,
-  }),
-};
-
-/**
- * Full functional example demonstrating value updates
- */
-export const Interactive: Story = {
-  render: () => ({
-    components: { VcTextarea },
-    setup() {
-      const value = ref("Change this text");
-
-      return { value };
-    },
-    template: `
-      <div>
-        <vc-textarea
-          label="Interactive demonstration"
-          placeholder="Enter something..."
-          v-model="value"
-          @update:modelValue="(val) => console.log('Text updated:', val)"
-        />
-        <div class="tw-mt-4">
-          <p><strong>Current value:</strong></p>
-          <pre class="tw-bg-gray-100 tw-p-2 tw-rounded tw-mt-2">{{ value }}</pre>
-        </div>
-      </div>
-    `,
-  }),
-};