@vc-shell/framework 1.1.0-alpha.8 → 1.1.0

package/ui/components/atoms/vc-switch/vc-switch.stories.ts

@@ -1,24 +1,324 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcSwitch } from "./";
-import { VcHint } from "./../../";
+import { ref } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import VcSwitch from "./vc-switch.vue";
+import VcHint from "../../atoms/vc-hint/vc-hint.vue";
 
-export default {
-  title: "atoms/VcSwitch",
+/**
+ * `VcSwitch` is a UI component that provides a visual toggle between two states.
+ * It's commonly used for enabling or disabling features, turning settings on or off,
+ * and other binary choices in forms and configuration interfaces.
+ */
+const meta = {
+  title: "Atoms/VcSwitch",
   component: VcSwitch,
-  args: {
-    label: "This is a switch",
-  },
+  tags: ["autodocs"],
   argTypes: {
+    modelValue: {
+      control: "boolean",
+      description: "Current value of the switch (bound to v-model)",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables the switch, making it non-interactive",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
     tooltip: {
       control: "text",
+      description: "Text displayed as a tooltip on hover",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" },
+      },
+    },
+    label: {
+      control: "text",
+      description: "Label text displayed with the switch",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" },
+      },
+    },
+    required: {
+      control: "boolean",
+      description: "Marks the switch as a required field",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    trueValue: {
+      description: "Value representing the checked state",
+      control: "boolean",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    falseValue: {
+      description: "Value representing the unchecked state",
+      control: "boolean",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+  },
+  args: {
+    modelValue: false,
+    disabled: false,
+    tooltip: "",
+    label: "Switch",
+    required: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The VcSwitch component provides a toggle with support for:
+
+- Two-way data binding via v-model
+- Adding text labels
+- Displaying tooltips on hover
+- Setting disabled state
+- Marking as required field
+        `,
+      },
+    },
+    actions: {
+      handles: ["update:modelValue"],
     },
   },
 } satisfies Meta<typeof VcSwitch>;
 
-export const Primary: StoryFn<typeof VcSwitch> = (args) => ({
-  components: { VcSwitch, VcHint },
-  setup() {
-    return { args };
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Basic usage of the VcSwitch component with default settings.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { VcSwitch },
+    setup() {
+      const value = ref(args.modelValue);
+      return {
+        args,
+        value,
+        updateValue: (val: boolean) => {
+          value.value = val;
+          console.log("Updated value:", val);
+        },
+      };
+    },
+    template: `
+      <vc-switch
+        v-bind="args"
+        :model-value="value"
+        @update:model-value="updateValue"
+      />
+    `,
+  }),
+};
+
+/**
+ * Switch component in the disabled state.
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { VcSwitch },
+    setup() {
+      const value = ref(args.modelValue);
+      return {
+        args,
+        value,
+        updateValue: (val: boolean) => {
+          value.value = val;
+          console.log("Updated value:", val);
+        },
+      };
+    },
+    template: `
+      <vc-switch
+        v-bind="args"
+        :model-value="value"
+        @update:model-value="updateValue"
+      />
+    `,
+  }),
+};
+
+/**
+ * Switch with a tooltip/hint message displayed below.
+ */
+export const WithTooltip: Story = {
+  args: {
+    tooltip: "Additional information",
+  },
+  render: (args) => ({
+    components: { VcSwitch },
+    setup() {
+      const value = ref(args.modelValue);
+      return {
+        args,
+        value,
+        updateValue: (val: boolean) => {
+          value.value = val;
+          console.log("Updated value:", val);
+        },
+      };
+    },
+    template: `
+      <vc-switch
+        v-bind="args"
+        :model-value="value"
+        @update:model-value="updateValue"
+      />
+    `,
+  }),
+};
+
+/**
+ * Switch marked as required in a form.
+ */
+export const Required: Story = {
+  args: {
+    required: true,
   },
-  template: '<vc-switch v-bind="args"></vc-switch>',
-});
+  render: (args) => ({
+    components: { VcSwitch },
+    setup() {
+      const value = ref(args.modelValue);
+      return {
+        args,
+        value,
+        updateValue: (val: boolean) => {
+          value.value = val;
+          console.log("Updated value:", val);
+        },
+      };
+    },
+    template: `
+      <vc-switch
+        v-bind="args"
+        :model-value="value"
+        @update:model-value="updateValue"
+      />
+    `,
+  }),
+};
+
+/**
+ * Switch without a text label.
+ */
+export const WithoutLabel: Story = {
+  args: {
+    label: "",
+  },
+  render: (args) => ({
+    components: { VcSwitch },
+    setup() {
+      const value = ref(args.modelValue);
+      return {
+        args,
+        value,
+        updateValue: (val: boolean) => {
+          value.value = val;
+          console.log("Updated value:", val);
+        },
+      };
+    },
+    template: `
+      <vc-switch
+        v-bind="args"
+        :model-value="value"
+        @update:model-value="updateValue"
+      />
+    `,
+  }),
+};
+
+/**
+ * Multiple switch variants demonstrating different states and configurations.
+ */
+export const Variants: Story = {
+  render: (args) => ({
+    components: { VcSwitch, VcHint },
+    setup() {
+      const value1 = ref(true);
+      const value2 = ref(false);
+      const value3 = ref(true);
+      const value4 = ref(false);
+
+      return {
+        value1,
+        value2,
+        value3,
+        value4,
+        updateValue1: (val: boolean) => {
+          value1.value = val;
+          console.log("Updated value1:", val);
+        },
+        updateValue2: (val: boolean) => {
+          value2.value = val;
+          console.log("Updated value2:", val);
+        },
+        updateValue3: (val: boolean) => {
+          value3.value = val;
+          console.log("Updated value3:", val);
+        },
+        updateValue4: (val: boolean) => {
+          value4.value = val;
+          console.log("Updated value4:", val);
+        },
+      };
+    },
+    template: `
+      <div class="tw-space-y-4">
+        <vc-switch
+          label="Enabled and checked"
+          :model-value="value1"
+          @update:model-value="updateValue1"
+        />
+        <vc-switch
+          label="Enabled and unchecked"
+          :model-value="value2"
+          @update:model-value="updateValue2"
+        />
+        <vc-switch
+          label="Disabled and checked"
+          :model-value="value3"
+          @update:model-value="updateValue3"
+          disabled
+        />
+        <vc-switch
+          label="Disabled and unchecked"
+          :model-value="value4"
+          @update:model-value="updateValue4"
+          disabled
+        />
+        <vc-switch
+          label="With tooltip"
+          :model-value="value2"
+          @update:model-value="updateValue2"
+          tooltip="This is a tooltip"
+        />
+        <vc-switch
+          label="Required field"
+          :model-value="value2"
+          @update:model-value="updateValue2"
+          required
+        />
+      </div>
+    `,
+  }),
+};

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

@@ -66,17 +66,15 @@ function onInput(e: Event) {
 
 <style lang="scss">
 :root {
-  --switch-width: 32px;
-  --switch-height: 18px;
+  --switch-width: 36px;
+  --switch-height: 22px;
   --switch-thumb-size: 16px;
   --switch-translate: 14px;
 
-  --switch-main-color: var(--primary-500);
+  --switch-main-color: var(--accent-500);
   --switch-secondary-color: var(--neutrals-300);
   --switch-icon-background: var(--additional-50);
   --switch-icon-color: var(--neutrals-400);
-  --switch-shadow-color: var(--additional-950);
-  --switch-shadow: inset 0px 2px 4px rgb(from var(--switch-shadow-color) r g b / 10%);
   --switch-transition: all 0.2s ease-in-out;
 }
 
@@ -114,10 +112,10 @@ function onInput(e: Event) {
   }
 
   &__slider {
-    @apply tw-absolute tw-inset-0 tw-bg-[color:var(--switch-secondary-color)] tw-rounded-full tw-transition tw-duration-200 [box-shadow:var(--switch-shadow)] tw-cursor-pointer;
+    @apply tw-absolute tw-inset-0 tw-bg-[color:var(--switch-secondary-color)] tw-rounded-full tw-transition tw-duration-200 tw-cursor-pointer;
 
     &::before {
-      @apply tw-absolute tw-left-px tw-top-1/2 tw-transition tw-duration-200 tw-bg-[color:var(--switch-icon-background)] tw-rounded-full tw-w-[var(--switch-thumb-size)] tw-h-[var(--switch-thumb-size)] [content:''] [box-shadow:var(--switch-shadow)] [transform:translateX(0)_translateY(-50%)];
+      @apply tw-absolute tw-left-[3px] tw-top-1/2 tw-transition tw-duration-200 tw-bg-[color:var(--switch-icon-background)] tw-rounded-full tw-w-[var(--switch-thumb-size)] tw-h-[var(--switch-thumb-size)] [content:''] [transform:translateX(0)_translateY(-50%)];
     }
   }
 }

package/ui/components/atoms/vc-tooltip/vc-tooltip.stories.ts

@@ -0,0 +1,287 @@
+import { ref } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcTooltip } from "./";
+
+/**
+ * `VcTooltip` is a component that displays additional information when users hover over an element.
+ * It provides contextual help, hints, or explanations without cluttering the interface.
+ */
+const meta = {
+  title: "Atoms/VcTooltip",
+  component: VcTooltip,
+  tags: ["autodocs"],
+  argTypes: {
+    placement: {
+      description: "Position of the tooltip relative to the target element",
+      control: "select",
+      options: [
+        "top",
+        "top-start",
+        "top-end",
+        "right",
+        "right-start",
+        "right-end",
+        "bottom",
+        "bottom-start",
+        "bottom-end",
+        "left",
+        "left-start",
+        "left-end",
+      ],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "bottom" },
+      },
+    },
+    offset: {
+      description: "Offset distance from the target element",
+      control: "object",
+      table: {
+        type: { summary: "{ mainAxis?: number; crossAxis?: number }" },
+        defaultValue: { summary: "{ mainAxis: 0, crossAxis: 0 }" },
+      },
+    },
+    delay: {
+      description: "Delay in milliseconds before displaying the tooltip",
+      control: "number",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: "0" },
+      },
+    },
+    default: {
+      description: "Content that triggers the tooltip on hover",
+      control: "text",
+      table: {
+        category: "Slots",
+        type: { summary: "VNode | string" },
+      },
+    },
+    tooltip: {
+      description: "Content displayed inside the tooltip",
+      control: "text",
+      table: {
+        category: "Slots",
+        type: { summary: "VNode | string" },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The VcTooltip component is a versatile UI element for displaying contextual information:
+
+- Supports multiple placement options (top, right, bottom, left with start/end variations)
+- Configurable display delay to prevent accidental triggering
+- Customizable offset for precise positioning
+- Uses Vue's Teleport for optimal rendering in the DOM
+- Leverages Floating UI for accurate positioning
+
+**Note:** This component requires an element with id="app" to exist in the DOM for teleportation
+of tooltip content. The stories handle this automatically.
+        `,
+      },
+    },
+  },
+} satisfies Meta<typeof VcTooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Basic example of a tooltip appearing below an element
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { VcTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-flex tw-justify-center tw-items-center tw-h-32">
+        <vc-tooltip v-bind="args">
+          <button class="tw-px-4 tw-py-2 tw-bg-blue-500 tw-text-white tw-rounded">
+            Hover me
+          </button>
+          <template #tooltip>
+            <div class="tw-py-1 tw-px-2">This is a tooltip</div>
+          </template>
+        </vc-tooltip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Tooltip with a delayed appearance
+ */
+export const WithDelay: Story = {
+  args: {
+    delay: 500,
+  },
+  render: (args) => ({
+    components: { VcTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-flex tw-justify-center tw-items-center tw-h-32">
+        <vc-tooltip v-bind="args">
+          <button class="tw-px-4 tw-py-2 tw-bg-blue-500 tw-text-white tw-rounded">
+            Hover me (500ms delay)
+          </button>
+          <template #tooltip>
+            <div class="tw-py-1 tw-px-2">This tooltip appears after a delay</div>
+          </template>
+        </vc-tooltip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Example showing different placement options
+ */
+export const Placements: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Tooltips can be positioned in various ways relative to the target element.",
+      },
+    },
+  },
+  render: () => ({
+    components: { VcTooltip },
+    setup() {
+      const placements = [
+        "top",
+        "top-start",
+        "top-end",
+        "right",
+        "right-start",
+        "right-end",
+        "bottom",
+        "bottom-start",
+        "bottom-end",
+        "left",
+        "left-start",
+        "left-end",
+      ];
+
+      return { placements };
+    },
+    template: `
+      <div class="tw-grid tw-grid-cols-3 tw-gap-4 tw-p-12">
+        <div v-for="placement in placements" :key="placement" class="tw-flex tw-justify-center tw-items-center tw-h-24">
+          <vc-tooltip :placement="placement">
+            <button class="tw-px-3 tw-py-1 tw-bg-blue-500 tw-text-white tw-rounded tw-text-sm">
+              {{ placement }}
+            </button>
+            <template #tooltip>
+              <div class="tw-py-1 tw-px-2">Placement: {{ placement }}</div>
+            </template>
+          </vc-tooltip>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Tooltip with custom offset
+ */
+export const WithOffset: Story = {
+  args: {
+    offset: { mainAxis: 16, crossAxis: 0 },
+  },
+  render: (args) => ({
+    components: { VcTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-flex tw-justify-center tw-items-center tw-h-32">
+        <vc-tooltip v-bind="args">
+          <button class="tw-px-4 tw-py-2 tw-bg-blue-500 tw-text-white tw-rounded">
+            Hover me (with offset)
+          </button>
+          <template #tooltip>
+            <div class="tw-py-1 tw-px-2">This tooltip has a custom offset</div>
+          </template>
+        </vc-tooltip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Rich content inside tooltip
+ */
+export const RichContent: Story = {
+  render: () => ({
+    components: { VcTooltip },
+    setup() {
+      return {};
+    },
+    template: `
+      <div class="tw-flex tw-justify-center tw-items-center tw-h-32">
+        <vc-tooltip>
+          <button class="tw-px-4 tw-py-2 tw-bg-blue-500 tw-text-white tw-rounded">
+            Help
+          </button>
+          <template #tooltip>
+            <div class="tw-p-2 tw-max-w-xs">
+              <h3 class="tw-font-bold tw-mb-1">Need help?</h3>
+              <p class="tw-mb-1">Here are some helpful tips:</p>
+              <ul class="tw-list-disc tw-pl-4">
+                <li>Make sure all fields are filled</li>
+                <li>Check for validation errors</li>
+                <li>Contact support if issues persist</li>
+              </ul>
+            </div>
+          </template>
+        </vc-tooltip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Interactive example with different triggers and tooltips
+ */
+export const InteractiveExample: Story = {
+  render: () => ({
+    components: { VcTooltip },
+    setup() {
+      const items = [
+        { name: "User Profile", icon: "👤", tooltip: "View and edit your profile" },
+        { name: "Settings", icon: "⚙️", tooltip: "Configure application settings" },
+        { name: "Messages", icon: "✉️", tooltip: "View your messages" },
+        { name: "Notifications", icon: "🔔", tooltip: "Manage your notifications" },
+      ];
+
+      return { items };
+    },
+    template: `
+      <div class="tw-flex tw-justify-center tw-items-center tw-h-32">
+        <div class="tw-bg-gray-100 tw-p-4 tw-rounded tw-shadow">
+          <div class="tw-flex tw-space-x-4">
+            <vc-tooltip
+              v-for="item in items"
+              :key="item.name"
+              placement="top"
+            >
+              <button class="tw-w-10 tw-h-10 tw-flex tw-items-center tw-justify-center tw-bg-white tw-rounded-full tw-shadow-sm tw-text-xl">
+                {{ item.icon }}
+              </button>
+              <template #tooltip>
+                <div class="tw-py-1 tw-px-2">{{ item.tooltip }}</div>
+              </template>
+            </vc-tooltip>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};

package/ui/components/atoms/vc-tooltip/vc-tooltip.vue

@@ -12,7 +12,7 @@
       <slot></slot>
     </div>
 
-    <teleport :to="`#${appContainer}`">
+    <teleport to="body">
       <span
         v-if="tooltipVisible && $slots['tooltip']"
         ref="tooltipRef"
@@ -59,7 +59,7 @@ const target = ref(null);
 let showTimeout: NodeJS.Timeout | null = null;
 
 const instance = getCurrentInstance();
-const appContainer = computed(() => instance?.appContext.app._container?.id);
+// const appContainer = computed(() => instance?.appContext.app._container?.id || "app");
 
 const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
   placement: props.placement,
@@ -88,7 +88,7 @@ const hideTooltip = () => {
 <style lang="scss">
 :root {
   --tooltip-background-color: var(--additional-50);
-  --tooltip-border-color: var(--base-border-color, var(--neutrals-200));
+  --tooltip-border-color: var(--neutrals-200);
   --tooltip-shadow-color: var(--secondary-300);
   --tooltip-shadow: 1px 1px 8px rgba(var(--tooltip-shadow-color), 0.25);
   --tooltip-text-color: var(--neutrals-600);