edvoyui-component-library-test-flight 0.0.21 → 0.0.23

package/src/components/tabs/EUITabs.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div
+      v-if="tabStyle === 'design'"
+        class="flex flex-row items-center justify-between w-full p-2 bg-gray-100 rounded-xl"
+      >
+        <button
+         v-for="(tab, tabindex) in tabs"
+          :key="tabindex"
+          type="button"
+          class="[&:not(:focus-visible)]:focus:outline-none relative w-full inline-flex items-center"
+          role="tab"
+          tabindex="-1"
+         @click="selectTab(tabindex)"
+        >
+          <div
+            class="pointer-events-none absolute inset-0 rounded-full transition-transform duration-300 transform z-[1] ease-in-out"
+            :class="{
+              'translate-x-full':
+                tabindex < activeTabIndex,
+              '-translate-x-full':
+                tabindex > activeTabIndex,
+              'translate-x-0 rounded-lg bg-gray-600':
+                activeTabIndex === tabindex
+            }"
+          />
+          <span
+            :class="[
+              'w-full px-4 py-2 text-sm tracking-wide font-medium capitalize z-10',
+              activeTabIndex == tabindex
+                ? ' text-white'
+                : ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 delay-100 ease-in origin-center'
+            ]"
+          >
+          <slot name="title" :tab="tab">
+            {{ tab?.name }}
+          </slot>
+        </span>
+        </button>
+      </div>
+
+    <div
+      v-else-if="tabStyle === 'border'"
+      class="flex items-center gap-1 before:bottom-0 before:left-0 before:absolute before:content-[''] before:h-px before:w-full before:bg-gray-200 relative before:-z-[1] z-0 bg-white"
+    >
+      <button
+        v-for="(tab, tabindex) in tabs"
+        :key="tabindex"
+        role="tab"
+        class="px-3 py-1 text-sm font-semibold leading-5 transition-all duration-150 ease-in-out border-b-2 hover:text-gray-800"
+        :class="
+          activeTabIndex === tabindex
+            ? 'border-gray-900 text-gray-900'
+            : 'border-transparent text-gray-500'
+        "
+        @click="selectTab(tabindex)"
+      >
+        <slot name="title" :tab="tab">
+          {{ tab?.name }}
+        </slot>
+      </button>
+    </div>
+    <div
+      v-else
+      class="flex items-center gap-1 p-2 transition-all duration-100"
+    >
+      <button
+        v-for="(tab, tabindex) in tabs"
+        :key="tabindex"
+        role="tab"
+        class="px-4 py-1 text-sm font-semibold transition-colors duration-150 ease-in-out border rounded-full"
+        :class="
+          activeTabIndex === tabindex
+            ? 'shadow-lg shadow-gray-100 bg-white border-gray-200 focus-within:border-purple-600 text-gray-900'
+            : 'border-white hover:bg-gray-50 text-gray-700'
+        "
+        @click="selectTab(tabindex)"
+      >
+        <slot name="title" :tab="tab">
+          {{ tab?.name }}
+        </slot>
+      </button>
+    </div>
+    <div :class="['py-2 text-base font-normal text-gray-700', contentClass]">
+      <slot name="content" :active-tab="tabs[activeTabIndex]">
+        {{ tabs[activeTabIndex]?.content }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref, watch } from "vue";
+
+interface Tab {
+  name: string;
+  content?: string;
+}
+
+const props = defineProps<{
+  tabs: Tab[];
+  defaultActiveIndex?: number;
+  tabStyle: "rounded" | "border" | 'design' ,
+  contentClass?: string[] | string
+}>();
+
+const emit = defineEmits<{
+  (event: "update:activeTab", activeTab: Tab): void;
+}>();
+
+const activeTabIndex = ref(props.defaultActiveIndex ?? 0);
+
+const selectTab = (index: number) => {
+  activeTabIndex.value = index;
+  emit("update:activeTab", props.tabs[activeTabIndex.value]);
+};
+
+watch(
+  () => props.defaultActiveIndex,
+  (newIndex) => {
+    activeTabIndex.value = newIndex ?? 0;
+  }
+);
+</script>
+
+<style scoped>
+/* Add any scoped styles if needed */
+</style>

package/src/components/tabs/EUItabs.stories.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUItabs from "./EUITabs.vue";
+import tabData from "../../data/tab";
+
+// Meta configuration for the EUItabs stories
+const meta = {
+  title: "Example/Tabs",
+  component: EUItabs,
+  tags: ["autodocs"],
+  argTypes: {
+    tabStyle: {
+      control: "select",
+      options: ["rounded", "border", "design"],
+    },
+    tabs: {
+      control: "object",
+    },
+    defaultActiveIndex: {
+      control: "number",
+    },
+    contentClass: {
+      control: "text",
+      description: "Required design to add class",
+    },
+  },
+} satisfies Meta<typeof EUItabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with tabs and an initial active index
+export const DefaultRoundedTab: Story = {
+  args: {
+    tabs: tabData,
+    tabStyle: "rounded",
+    defaultActiveIndex: 0, // Set default active index to 1 (second tab)
+  },
+  render: (args) => ({
+    components: { EUItabs },
+    setup() {
+      return { args };
+    },
+    template: `
+      <EUItabs v-bind="args"></EUItabs>
+    `,
+  }),
+};
+
+export const BorderTab: Story = {
+  args: {
+    tabStyle: "border",
+    tabs: tabData,
+    defaultActiveIndex: 1,
+  },
+  render: (args) => ({
+    components: { EUItabs },
+    setup() {
+      return { args };
+    },
+    template: `
+      <EUItabs v-bind="args" />
+    `,
+  }),
+};
+
+export const DesignTab: Story = {
+  args: {
+    tabStyle: "design",
+    tabs: tabData,
+    defaultActiveIndex: 1,
+  },
+  render: (args) => ({
+    components: { EUItabs },
+    setup() {
+      return { args };
+    },
+    template: `
+      <EUItabs v-bind="args" />
+    `,
+  }),
+};
+
+// Story with a different active tab by default
+export const TemplateUsingTab: Story = {
+  args: {
+    tabStyle: "rounded",
+    tabs: tabData,
+    defaultActiveIndex: 1, // Set default active index to 1 (second tab)
+  },
+  render: (args) => ({
+    components: { EUItabs },
+    setup() {
+      return { args };
+    },
+    template: `
+      <EUItabs v-bind="args">
+        <template #title="{tab}">{{ tab.name}}</template>
+        <template #content="{ activeTab }">
+           {{ activeTab.content }}
+        </template>
+      </EUItabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Tab object data to use <code><b>tab</b></code> and <code><b>activeTab</b></code>",
+      },
+      source: {
+        code: `<template>
+  <EUITabs tab-style="border" :tabs="tabData" :defaultActiveIndex="0">
+    <template #title="{ tab }">{{ tab.name}}</template>
+    <template #content="{ activeTab }">
+      {{ activeTab.content }}
+    </template>
+  </EUITabs>
+</template>
+`,
+      },
+    },
+  },
+};

package/src/components/tag/EUITag.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import EUITag from "./EUITag.vue";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Example/Tag",
+  component: EUITag,
+  tags: ["autodocs"],
+  argTypes: {
+    closeIcon: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    modelValue: {
+      control: "boolean",
+    },
+    errors: {
+      control: "object",
+    },
+    name: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof EUITag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    modelValue: false,
+    disabled: false,
+    closeIcon: true,
+  },
+  render: (args) => ({
+    components: { EUITag },
+    setup() {
+      return { args };
+    },
+    template: `<EUITag v-bind="args">Name</EUITag>`,
+  }),
+};

package/src/components/tag/EUITag.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="inline-flex items-center gap-x-1 rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-400/10">
+    <slot />
+    <button v-if="closeIcon" type="button" class="relative -mr-1 size-3.5 group rounded hover:bg-red-300/50 active:bg-red-300" @click.stop.prevent="removeTag">
+      <span class="sr-only">Remove</span>
+      <svg viewBox="0 0 14 14" class="size-3.5 stroke-gray-400 group-hover:stroke-red-600/75">
+        <path d="M4 4l6 6m0-6l-6 6" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from "vue";
+
+const props = defineProps({
+  closeIcon: {
+    type: Boolean,
+    default: false,
+  },
+  errors: { type: Object, required: false, default: () => {} },
+  name: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  modelValue: {
+    type: Boolean as PropType<boolean>,
+    required: true,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const { closeIcon } = toRefs(props);
+const emit = defineEmits(["remove", "update:modelValue"]);
+
+const removeTag = (e: Event) => {
+  emit("remove", e);
+  emit("update:modelValue", false);
+};
+</script>
+
+<style scoped></style>

package/src/components/telephone/EUITelephone.stories.ts

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUITelephone from "./EUITelephone.vue";
+import { ref } from "vue";
+import { PhoneIcon } from "@heroicons/vue/24/outline";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Forms/Telephone",
+  component: EUITelephone,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      control: "text",
+      description:
+        "The value of the telephone input, typically the phone number entered.",
+    },
+    name: {
+      control: "text",
+      description:
+        "Name for the Validation Telephone field, used for identification.",
+    },
+    label: {
+      control: "text",
+      description:
+        "Label for the Telephone field that is displayed above the input.",
+    },
+    placeholder: {
+      control: "text",
+      description:
+        "Placeholder text that appears inside the telephone input when it's empty.",
+    },
+    autoFocus: {
+      control: "boolean",
+      description:
+        "Automatically focuses the telephone input when the page loads.",
+    },
+    length: {
+      control: "number",
+      description:
+        "Sets the maximum allowed length for the mobile number input.",
+    },
+    errors: {
+      control: "object",
+      description:
+        "Object containing validation errors. The keys are field names, and the values are the corresponding error messages.",
+    },
+    required: {
+      control: "boolean",
+      description: "Indicates whether the telephone input field is mandatory.",
+    },
+    readonly: {
+      control: "boolean",
+      description:
+        "Makes the telephone input field read-only, preventing users from editing the value.",
+    },
+    disabled: {
+      control: "boolean",
+      description:
+        "Disables the telephone input, making it uneditable and unclickable.",
+    },
+    isValid: {
+      control: "boolean",
+      description:
+        "Represents the validation state of the telephone input. `true` if the value is valid, otherwise `false`.",
+    },
+    iconType: {
+      control: "select",
+      options: ["", "startIcon", "endIcon"],
+      description:
+        "The position of the icon to be displayed either at the start or end of the input field.",
+    },
+    icon: {
+      control: { type: "text" },
+      description:
+        "Specifies an SVG icon to be displayed inside the telephone input field.",
+    },
+  },
+} satisfies Meta<typeof EUITelephone>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    placeholder: "Mobile number 0 to 9",
+    label: "Contact number",
+    modelValue: "",
+    name: "telephoneInput",
+    autoFocus: false,
+    length: 10,
+    required: true,
+    readonly: false,
+    disabled: false,
+    isValid: false,
+    errors: {
+      message: "Enter valid mobile number",
+    },
+  },
+  render: (args) => ({
+    components: { EUITelephone },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(args.isValid);
+
+      const onUpdateModelValue = (newValue: string) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      const onUpdateIsValid = (newValue: boolean) => {
+        isValid.value = newValue;
+        args.isValid = newValue;
+      };
+
+      return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
+    },
+    template: `<div class="max-w-xl min-h-64"><EUITelephone v-bind="args" /></div>`,
+  }),
+};
+
+export const IconUsingStart: Story = {
+  args: {
+    iconType: "startIcon",
+    icon: PhoneIcon,
+  },
+  render: (args) => ({
+    components: { EUITelephone },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(args.isValid);
+
+      const onUpdateModelValue = (newValue: string) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      const onUpdateIsValid = (newValue: boolean) => {
+        isValid.value = newValue;
+        args.isValid = newValue;
+      };
+
+      return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
+    },
+    template: `<div class="max-w-xl min-h-64"><EUITelephone v-bind="args" /></div>`,
+  }),
+};
+
+export const IconUsingEnd: Story = {
+  args: {
+    iconType: "endIcon",
+    icon: PhoneIcon,
+  },
+  render: (args) => ({
+    components: { EUITelephone },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(args.isValid);
+
+      const onUpdateModelValue = (newValue: string) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      const onUpdateIsValid = (newValue: boolean) => {
+        isValid.value = newValue;
+        args.isValid = newValue;
+      };
+
+      return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
+    },
+    template: `<div class="max-w-xl min-h-64"><EUITelephone v-bind="args" /></div>`,
+  }),
+};
+
+export const MobileNumberUsed: Story = {
+  args: {
+    modelValue: "+919094089456",
+    disabled: false,
+    isValid: false,
+  },
+  render: (args) => ({
+    components: { EUITelephone },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(args.isValid);
+
+      const onUpdateModelValue = (newValue: string) => {
+        modelValue.value = newValue;
+        args.modelValue = newValue;
+      };
+
+      const onUpdateIsValid = (newValue: boolean) => {
+        isValid.value = newValue;
+        args.isValid = newValue;
+      };
+
+      return { args, modelValue, isValid, onUpdateModelValue, onUpdateIsValid };
+    },
+    template: `<div class="max-w-xl"><EUITelephone v-bind="args" v-model="modelValue" @update:modelValue="onUpdateModelValue" @update:isValid="onUpdateIsValid" /></div>`,
+  }),
+};