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

package/ui/components/molecules/vc-radio-button/vc-radio-button.stories.ts

@@ -1,283 +0,0 @@
-import { ref } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
-
-/**
- * `VcRadioButton` is a selection control that allows users to select a single option from a set.
- * It provides a visual interface for making exclusive choices in forms and other interactive contexts.
- */
-const meta = {
-  title: "molecules/VcRadioButton",
-  component: VcRadioButton,
-  tags: ["autodocs"],
-  args: {
-    modelValue: "Product 1",
-    label: "Product 1",
-    value: "Product 1",
-  },
-  argTypes: {
-    modelValue: {
-      description: "Value binding of the radio button (v-model)",
-      control: "text",
-      table: {
-        type: { summary: "any" },
-        category: "Model",
-      },
-    },
-    value: {
-      description: "Value of the radio button",
-      control: "text",
-      table: {
-        type: { summary: "any" },
-        category: "Content",
-      },
-    },
-    binary: {
-      description: "Allows to select a boolean value",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "undefined" },
-        category: "Behavior",
-      },
-    },
-    disabled: {
-      description: "Disables the radio button",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-        category: "State",
-      },
-    },
-    name: {
-      description: "Name of the radio button",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "RadioField" },
-        category: "Identification",
-      },
-    },
-    error: {
-      description: "Specifies that the component should have error state style",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-        category: "State",
-      },
-    },
-    errorMessage: {
-      description: "Error message to display",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-        category: "Content",
-      },
-    },
-    label: {
-      description: "Label of the radio button",
-      control: "text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-        category: "Content",
-      },
-    },
-    "onUpdate:modelValue": {
-      description: "Event emitted when the radio button value changes",
-      table: {
-        type: { summary: "(value: any) => void" },
-        category: "Events",
-      },
-      action: "update:modelValue",
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The VcRadioButton component provides a styled radio button control:
-
-- Supports standard radio button behaviors
-- Can be grouped to represent mutually exclusive options
-- Includes support for labels and error states
-- Can be disabled to prevent user interaction
-- Supports binary mode for boolean value selection
-`,
-      },
-    },
-  },
-} satisfies Meta<typeof VcRadioButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Default radio button
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: { VcRadioButton },
-    setup() {
-      const modelValue = ref(args.modelValue);
-      return { args, modelValue };
-    },
-    template: `
-      <div style="padding: 20px;">
-        <VcRadioButton
-          v-model="modelValue"
-          :value="args.value"
-          :label="args.label"
-          :disabled="args.disabled"
-          :error="args.error"
-          :errorMessage="args.errorMessage"
-          :name="args.name"
-          :binary="args.binary"
-        />
-        <div class="tw-mt-4">
-          <p><strong>Current value:</strong> {{ modelValue }}</p>
-        </div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Radio button group with object values
- */
-export const Group: Story = {
-  render: () => ({
-    components: { VcRadioButton },
-    setup() {
-      const products = ref([
-        { id: 1, name: "Product 1" },
-        { id: 2, name: "Product 2" },
-        { id: 3, name: "Product 3" },
-      ]);
-      const selectedProduct = ref("Product 1");
-      return { products, selectedProduct };
-    },
-    template: `
-      <div style="padding: 20px;">
-        <div v-for="product in products" :key="product.id" class="tw-pb-3">
-          <VcRadioButton
-            v-model="selectedProduct"
-            :value="product.name"
-            :label="product.name"
-          />
-        </div>
-        <div class="tw-mt-4 tw-p-3 tw-bg-gray-100 tw-rounded">
-          <p><strong>Selected product:</strong> {{ selectedProduct }}</p>
-        </div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Radio button group with string values
- */
-export const StringGroup: Story = {
-  render: () => ({
-    components: { VcRadioButton },
-    setup() {
-      const options = ref(["Option A", "Option B", "Option C"]);
-      const selectedOption = ref("Option A");
-      return { options, selectedOption };
-    },
-    template: `
-      <div style="padding: 20px;">
-        <div v-for="option in options" :key="option" class="tw-pb-3">
-          <VcRadioButton
-            v-model="selectedOption"
-            :value="option"
-            :label="option"
-          />
-        </div>
-        <div class="tw-mt-4 tw-p-3 tw-bg-gray-100 tw-rounded">
-          <p><strong>Selected option:</strong> {{ selectedOption }}</p>
-        </div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Disabled radio button
- */
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    label: "This radio button is disabled",
-  },
-};
-
-/**
- * Radio button with error state
- */
-export const Error: Story = {
-  args: {
-    error: true,
-    errorMessage: "This field contains an error",
-    label: "Error state radio button",
-  },
-};
-
-/**
- * Binary mode radio button (for boolean values)
- */
-export const Binary: Story = {
-  render: () => ({
-    components: { VcRadioButton },
-    setup() {
-      const accepted = ref(false);
-      return { accepted };
-    },
-    template: `
-      <div style="padding: 20px;">
-        <VcRadioButton
-          v-model="accepted"
-          :binary="true"
-          label="I accept the terms and conditions"
-        />
-        <div class="tw-mt-4 tw-p-3 tw-bg-gray-100 tw-rounded">
-          <p><strong>Terms accepted:</strong> {{ accepted ? 'Yes' : 'No' }}</p>
-        </div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Horizontal radio button group
- */
-export const HorizontalGroup: Story = {
-  render: () => ({
-    components: { VcRadioButton },
-    setup() {
-      const options = ref(["Small", "Medium", "Large"]);
-      const selectedSize = ref("Medium");
-      return { options, selectedSize };
-    },
-    template: `
-      <div style="padding: 20px;">
-        <div class="tw-flex tw-gap-6">
-          <div v-for="option in options" :key="option">
-            <VcRadioButton
-              v-model="selectedSize"
-              :value="option"
-              :label="option"
-              name="size"
-            />
-          </div>
-        </div>
-        <div class="tw-mt-4 tw-p-3 tw-bg-gray-100 tw-rounded">
-          <p><strong>Selected size:</strong> {{ selectedSize }}</p>
-        </div>
-      </div>
-    `,
-  }),
-};

package/ui/components/molecules/vc-radio-button/vc-radio-button.vue

@@ -1,195 +0,0 @@
-<template>
-  <div class="vc-radio-button">
-    <label class="vc-radio-button__label">
-      <input
-        :id="radioId"
-        type="radio"
-        :name="resolvedName"
-        :value="value"
-        :checked="checked"
-        :disabled="resolvedDisabled"
-        :aria-invalid="invalid || undefined"
-        :aria-required="ariaRequired"
-        :aria-describedby="ariaDescribedBy"
-        :class="{ 'vc-radio-button--error': invalid }"
-        tabindex="0"
-        @change="onChange"
-      />
-
-      {{ label }}
-    </label>
-    <Transition
-      name="slide-up"
-      mode="out-in"
-    >
-      <div v-if="invalid && errorMessage">
-        <slot name="error">
-          <VcHint
-            :id="errorId"
-            class="vc-radio-button__error"
-            :error="true"
-          >
-            {{ errorMessage }}
-          </VcHint>
-        </slot>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { isEqual } from "lodash-es";
-import { computed } from "vue";
-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 {
-  /**
-   * Value of the radio button.
-   */
-  value: any;
-  /**
-   * Value binding of the radio button.
-   */
-  modelValue: any;
-  /**
-   * Allows to select a boolean value.
-   */
-  binary?: boolean;
-  /**
-   * Specifies that the radio button should be selected.
-   */
-  checked?: boolean;
-}
-
-export interface Emits {
-  /**
-   * Emits when the radio button is changed.
-   */
-  (event: "update:modelValue", value: any): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  name: "RadioField",
-});
-const emit = defineEmits<Emits>();
-
-defineSlots<{
-  error: (props: Record<string, never>) => any;
-}>();
-
-const { fieldId: radioId, errorId, invalid, resolvedDisabled, resolvedName, ariaRequired, ariaDescribedBy } =
-  useFormField(props);
-
-const checked = computed(() => {
-  return props.modelValue != null && (props.binary ? !!props.modelValue : isEqual(props.modelValue, props.value));
-});
-
-function onChange() {
-  if (!resolvedDisabled.value) {
-    const model = props.binary ? !checked.value : props.value;
-
-    emit("update:modelValue", model);
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  --radio-size: 16px;
-  --radio-dot-size: 8px;
-  --radio-border-color: var(--neutrals-300);
-  --radio-border-color-hover: var(--neutrals-400);
-  --radio-background: var(--additional-50);
-  --radio-active: var(--primary-500);
-  --radio-active-inner: var(--additional-50);
-  --radio-disabled-bg: var(--neutrals-100);
-  --radio-disabled-opacity: 0.5;
-  --radio-error: var(--danger-500);
-  --radio-error-ring-color: var(--danger-100);
-  --radio-focus-ring-color: var(--primary-100);
-}
-
-.vc-radio-button {
-  &__label {
-    @apply tw-text-sm tw-flex tw-items-center tw-gap-2 tw-cursor-pointer tw-select-none;
-  }
-
-  input[type="radio"] {
-    flex-shrink: 0;
-    border-radius: 9999px;
-    appearance: none;
-    height: var(--radio-size);
-    width: var(--radio-size);
-    outline: none;
-    display: inline-block;
-    vertical-align: top;
-    position: relative;
-    margin: 0;
-    cursor: pointer;
-    border: 1px solid var(--radio-border-color);
-    background: var(--radio-background);
-    transition:
-      border-color 200ms ease,
-      box-shadow 200ms ease;
-
-    &::after {
-      width: var(--radio-dot-size);
-      height: var(--radio-dot-size);
-      border-radius: 9999px;
-      background: var(--radio-active);
-      transform: scale(0);
-      opacity: 0;
-      content: "";
-      display: block;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      margin-left: calc(var(--radio-dot-size) / -2);
-      margin-top: calc(var(--radio-dot-size) / -2);
-      transition:
-        transform 200ms cubic-bezier(0.2, 0.85, 0.32, 1.2),
-        opacity 200ms ease;
-    }
-
-    &:checked {
-      border-color: var(--radio-active);
-
-      &::after {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-
-    &:disabled {
-      background: var(--radio-disabled-bg);
-      cursor: not-allowed;
-      opacity: var(--radio-disabled-opacity);
-
-      & + label {
-        cursor: not-allowed;
-      }
-    }
-
-    &:hover:not(:disabled):not(:checked) {
-      border-color: var(--radio-border-color-hover);
-    }
-
-    &:focus-visible {
-      @apply tw-ring-[3px] tw-ring-[color:var(--radio-focus-ring-color)] tw-outline-none;
-    }
-
-    &.vc-radio-button--error {
-      border-color: var(--radio-error);
-      @apply tw-ring-[3px] tw-ring-[color:var(--radio-error-ring-color)];
-    }
-  }
-
-  &__error {
-    @apply tw-mt-1 [--hint-error-color:var(--radio-error)];
-  }
-
-}
-</style>

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

@@ -1,2 +0,0 @@
-export { default as VcRadioGroup } from "@ui/components/molecules/vc-radio-group/vc-radio-group.vue";
-export type { RadioGroupOption } from "@ui/components/molecules/vc-radio-group/vc-radio-group.vue";