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

package/src/components/accordion/EUIAccordion.stories.ts

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIAccordion from "./EUIAccordion.vue";
+
+const meta: Meta<typeof EUIAccordion> = {
+  title: "Example/Accordion",
+  component: EUIAccordion,
+  tags: ["autodocs"],
+  argTypes: {
+    datas: {
+      control: "object",
+      description:
+        "* The template method allows you to define how content is rendered in the <mark>EUIAccordion</mark> component. \n\n* Named slots <mark>(#title, #content)</mark> enable you to customize the display of titles and content for each accordion item.",
+    },
+    defaultOpen: {
+      control: { type: "object" },
+      description: "Accordion default one open [1]",
+    },
+    collapse: {
+      control: "boolean",
+      description:
+        "Accordion panel default one opened. Next one click close previous another one open",
+    },
+  },
+} satisfies Meta<typeof EUIAccordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    datas: [
+      {
+        title: "1.How long does the course take?",
+        content:
+          "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+      },
+      {
+        title: "2.How long does the course take?",
+        content:
+          "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+      },
+      {
+        title: "3.How long does the course take?",
+        content:
+          "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+      },
+      {
+        title: "4.How long does the course take?",
+        content:
+          "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+      },
+    ],
+    defaultOpen: [1],
+  },
+  render: (args) => ({
+    components: { EUIAccordion },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAccordion v-bind="args" />`,
+  }),
+};
+
+export const AccordionCollopse: Story = {
+  args: {
+    datas: [
+      {
+        title: "1.How long does the course take?",
+        content:
+          "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+      },
+      {
+        title: "2.How long does the course take?",
+        content:
+          "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+      },
+      {
+        title: "3.How long does the course take?",
+        content:
+          "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+      },
+      {
+        title: "4.How long does the course take?",
+        content:
+          "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+      },
+    ],
+    defaultOpen: [1],
+    collapse: true,
+  },
+  render: (args) => ({
+    components: { EUIAccordion },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAccordion v-bind="args" />`,
+  }),
+};
+
+export const UseTemplate: Story = {
+  args: {
+    datas: [
+      {
+        name: "How long does the course take?",
+        description:
+          "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+      },
+    ],
+    defaultOpen: [0],
+    collapse: false,
+  },
+  render: (args) => ({
+    components: { EUIAccordion },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAccordion v-bind="args">
+                <template #title="{ item }">
+                  <h3>{{ item.name }}</h3>
+                </template>
+                <template #content="{ item }">
+                  <p>{{ item.description }}</p>
+                </template>
+              </EUIAccordion>`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "* The template method allows you to define how content is rendered in the <mark>EUIAccordion</mark> component. \n\n* Named slots <mark>(#title, #content)</mark> enable you to customize the display of titles and content for each accordion item.",
+      },
+      source: {
+        code: `<script setup lang="ts">
+const datas = [
+  {
+    name: "How long does the course take?",
+    description:
+      "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+  },
+];
+const defaultOpen = [0]
+</script>
+
+<template>
+  <EUIAccordion :datas="datas" :defaultOpen="defaultOpen">
+    <template #title="{ item }">
+      <h3>{{ item.name }}</h3>
+    </template>
+    <template #content="{ item }">
+      <p>{{ item.description }}</p>
+    </template>
+  </EUIAccordion>
+</template>`,
+      },
+    },
+  },
+};

package/src/components/accordion/EUIAccordion.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div class="max-w-full p-2 bg-gray-50 rounded-xl">
+    <details
+      v-for="(item, index) in datas"
+      :key="`accordion-${index}`"
+      :open="openAccordions[index]"
+      @click.prevent="onClick(index)"
+      class="box-border relative mx-auto my-0 text-base font-normal transition-all duration-150 ease-in-out rounded-lg group hover:bg-gray-100 open:bg-gray-100 open:mb-4 open:last:mb-0"
+    >
+      <summary class="flex items-center p-4 font-semibold list-none cursor-pointer select-none focus:outline-none">
+        <span
+          class="w-11/12 text-gray-700 transition-all duration-200 ease-in-out faq-title group-hover:text-gray-900 group-open:text-gray-900">
+          <slot name="title" :item="item">
+            {{ item.title }}
+          </slot>
+        </span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="absolute text-gray-700 transition-all duration-150 ease-out pointer-events-none expand-icon group-open:text-gray-900 right-4 group-open:rotate-90"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M9 6l6 6l-6 6"></path>
+        </svg>
+      </summary>
+      <div class="p-4 pt-1 font-light text-gray-600">
+         <slot name="content" :item="item">
+            {{ item.content }}
+          </slot>
+      </div>
+    </details>
+  </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, PropType, ref } from 'vue';
+
+const props = defineProps({
+  datas: {
+    type: Array as PropType<any[]>,
+    required: true,
+    default: () => []
+  },
+  defaultOpen: {
+    type: Array as PropType<number[]>,
+    default: () => [0],
+  },
+  collapse: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const openAccordions = ref<boolean[]>(Array(props.datas.length).fill(false));
+
+onMounted(() => {
+  props.defaultOpen.forEach((index: number) => {
+    if (index >= 0 && index < openAccordions.value.length) {
+      openAccordions.value[index] = true;  // Open specified accordions
+    }
+  });
+});
+
+const onClick = (index: number) => {
+//   openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
+
+if (props.collapse) {
+    openAccordions.value = openAccordions.value.map((_, i) => i === index);
+  } else {
+    openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+summary {
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+</style>

package/src/components/avatar/EUIAvatar.stories.ts

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIAvatar from "./EUIAvatar.vue"; // Adjust the path if necessary
+
+const meta = {
+  title: "Example/Avatar",
+  component: EUIAvatar,
+  tags: ["autodocs"],
+  argTypes: {
+    imageUrl: {
+      type: "string",
+      description: "Show image URLs",
+    },
+    fullName: {
+      type: "string",
+      description: "No image URL show Name FirstLetter",
+    },
+    size: {
+      control: { type: "select", options: ["xs", "sm", "md", "lg", "xl"] },
+      description: "Size of the button.",
+    },
+    showStatus: {
+      control: { type: "boolean" },
+      description: "Show online/Offline status",
+    },
+    status: {
+      control: { type: "select", options: ["Online", "Offline"] },
+      description: "Profile Status",
+    },
+    profile: {
+      control: { type: "boolean" },
+      description:
+        "Show Profile enable \n\n Name and Designation use \n\n `<template #name></template><template #designation></template>`",
+    },
+    profileData: {
+      control: { type: "object" },
+      description: "Profile data send name and Designation or use template",
+    },
+  },
+} satisfies Meta<typeof EUIAvatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default button story with default slot content
+export const Default: Story = {
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+    },
+    imageUrl: {
+      type: "string",
+    },
+    status: {
+      control: "select",
+      options: ["Online", "Offline"],
+    },
+  },
+  args: {
+    imageUrl: "https://tinyurl.com/43e5fxh9",
+    size: "md",
+    showStatus: true,
+    status: "Online",
+  },
+  render: (args) => ({
+    components: { EUIAvatar },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAvatar v-bind="args"></EUIAvatar>`,
+  }),
+};
+
+export const FirstLetter: Story = {
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+    },
+    fullName: {
+      type: "string",
+    },
+    status: {
+      control: "select",
+      options: ["Online", "Offline"],
+    },
+  },
+  args: {
+    fullName: "JohnCena",
+    size: "md",
+    showStatus: true,
+    status: "Offline",
+  },
+  render: (args) => ({
+    components: { EUIAvatar },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAvatar v-bind="args"></EUIAvatar>`,
+  }),
+};
+
+export const Profile: Story = {
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+    },
+    imageUrl: { type: "string" },
+    status: {
+      control: "select",
+      options: ["Online", "Offline"],
+    },
+    profile: { type: "boolean" },
+    name: { type: "string" },
+    designation: { type: "string" },
+  },
+  args: {
+    imageUrl: "https://tinyurl.com/43e5fxh9",
+    size: "sm",
+    showStatus: true,
+    status: "Online",
+    profile: true,
+    name: "John Cena",
+    designation: "Actor",
+  },
+  render: (args) => ({
+    components: { EUIAvatar },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAvatar v-bind="args">
+                <template #name>{{args.name}}</template>
+                <template #designation>{{ args.designation }}</template>
+              </EUIAvatar>`,
+  }),
+};
+
+export const ProfileData: Story = {
+  argTypes: {},
+  args: {
+    imageUrl: "https://tinyurl.com/43e5fxh9",
+    size: "xl",
+    profile: true,
+    profileData: {
+      name: "John Cena",
+      designation: "Actor",
+    },
+  },
+  render: (args) => ({
+    components: { EUIAvatar },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAvatar v-bind="args"></EUIAvatar>`,
+  }),
+};

package/src/components/avatar/EUIAvatar.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="group">
+    <div class="flex items-center">
+      <div :class="['relative inline-block flex-none', avatarSize]">
+        <img
+          v-if="imageUrl"
+          :class="['group-hover:ring-2 ring-offset-2 ring-gray-300', rounded ? 'rounded-full' : 'rounded-md', avatarSize]"
+          :src="imageUrl"
+          alt=""
+        />
+        <span
+          v-else
+          :class="['flex items-center justify-center mx-auto text-white capitalize', rounded ? 'rounded-full':'rounded-md', avatarSize]"
+          :style="{background:profileColor}">
+          {{ fullName && fullName.charAt(0) }}
+        </span>
+        <span
+          v-if="showStatus"
+          :class="['absolute bottom-0 right-0 block rounded-full ring-2 ring-white',checkStatus === 'Online'?'bg-green-500':'bg-gray-400',
+          size === 'xs' ? 'size-1.5' : size === 'sm' ? 'size-2' : 'size-3']"
+        />
+      </div>
+      <div v-if="profile" class="flex-1 ms-2">
+        <div class="text-base font-semibold text-gray-600 capitalize group-hover:text-gray-900">
+          <slot name="name" :profileData="profileData">{{ profileData?.name }}</slot>
+        </div>
+        <div class="text-sm font-medium text-gray-500 group-hover:text-gray-700">
+          <slot name="designation" :profileData="profileData">{{ profileData?.designation }}</slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, reactive } from "vue";
+
+interface ProfileData {
+  name: string;
+  designation: string;
+}
+
+
+const props = defineProps({
+  imageUrl: {
+    type: String,
+    default: "",
+    required: true
+  },
+  fullName: {
+    type: String,
+    default: "",
+    required: false,
+  },
+  profile: {
+    type: Boolean,
+    required: false,
+  },
+  size: {
+    type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl">,
+    default: "md",
+  },
+  rounded: {
+    type: Boolean,
+    default: true,
+  },
+  showStatus: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String as PropType<"Online" | "Offline">,
+    default: "Online",
+  },
+  profileData: {
+    type: Object as PropType<ProfileData>,
+    default: () => ({ name: "", designation: "" }),
+  }
+});
+
+const sizes = reactive({
+  xs: "size-6", // 24
+  sm: "size-8", // 32
+  md: "size-10", // 40
+  lg: "size-12", // 48
+  xl: "size-16", // 48
+});
+
+const avatarSize = computed(() => sizes[props.size] || "")
+const checkStatus = computed(() => props.status);
+const profileColor = computed(() => colors[Math.floor(Math.random() * colors.length)])
+
+const colors = ['#6366F1','#F97316','#65A30D','#E11D48','#4B5563','#059669','#1D4ED8','#7C3AED','#FB923C','#fe4ca9']
+</script>
+
+<style scoped></style>