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

package/src/components/timeLine/EUITimeLine.stories.ts

@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUITimeLine from "./EUITimeLine.vue";
+import { ArrowDownCircleIcon } from "@heroicons/vue/24/solid";
+const meta = {
+  title: "Example/TimeLine",
+  component: EUITimeLine,
+  tags: ["autodocs"],
+  argTypes: {
+    items: {
+      control: "object",
+    },
+    type: {
+      name: "string",
+    },
+  },
+} satisfies Meta<typeof EUITimeLine>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story for EUITextarea
+export const Default: Story = {
+  args: {
+    items: [
+      {
+        id: 1,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 2,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+      {
+        id: 3,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 4,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+      {
+        id: 5,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 6,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+    ],
+    type: "view",
+  },
+  render: (args) => ({
+    components: { EUITimeLine },
+    setup() {
+      return { args };
+    },
+    template: `<div class="max-w-xl"><EUITimeLine v-bind="args" datas="items" type="view"></EUITimeLine></div>`,
+  }),
+};
+
+export const TimeLineIcon: Story = {
+  args: {
+    items: [
+      {
+        id: 1,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 2,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+      {
+        id: 3,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 4,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+      {
+        id: 5,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 6,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+    ],
+    type: "icon",
+    icon: ArrowDownCircleIcon,
+  },
+  render: (args) => ({
+    components: { EUITimeLine, ArrowDownCircleIcon },
+    setup() {
+      return { args };
+    },
+    template: `<div class="max-w-xl"><EUITimeLine v-bind="args" datas="items" type="icon" timelineIcon="icon">
+              </EUITimeLine></div>`,
+  }),
+};
+
+export const TimeLineImage: Story = {
+  args: {
+    items: [
+      {
+        id: 1,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 2,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 3,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 4,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 5,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 6,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+    ],
+    type: "image",
+    showMore: true,
+  },
+  render: (args) => ({
+    components: { EUITimeLine, ArrowDownCircleIcon },
+    setup() {
+      return { args };
+    },
+    template: `<div class="max-w-xl"><EUITimeLine v-bind="args" datas="items" type="image" showmore="true">
+              </EUITimeLine></div>`,
+  }),
+};
+
+// export const TimeLineGroup: Story = {
+//   args: {},
+// };

package/src/components/timeLine/EUITimeLine.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <ul role="list" class="space-y-6 p-4">
+            <EUITimeLineItem :data="items" :type="type" :timeline-icon="icon" :show-more="showMore" />
+        </ul>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PropType ,toRefs} from 'vue';
+import EUITimeLineItem from './EUITimeLineItem.vue';
+interface ITimeLine {
+  id: number | string,
+  person: any,
+  comment?: string;
+  date?: string,
+  dateTime?: string,
+  showmore?: any
+}
+
+
+const props = defineProps({
+  items:{
+    type:Array<ITimeLine>,
+    default:[]
+  },
+  type: {
+    type:String as PropType<"view" | "icon" | "image">,
+    default:''
+  },
+  icon:{
+    type:[String , Object],
+    default:''
+  } ,
+  showMore:{
+    type:Boolean,
+    default:false
+  }
+});
+
+const  {items,type,icon,showMore} = toRefs(props)
+</script>
+

package/src/components/timeLine/EUITimeLineItem.vue

@@ -0,0 +1,124 @@
+<template>
+  <li
+    v-for="(item, itemIdx) in data"
+    :key="item.id"
+    class="relative flex gap-x-4 group"
+  >
+    <div
+      :class="[
+        itemIdx === data.length - 1 ? 'h-6' : '-bottom-6',
+        'absolute left-0 top-0 flex w-6 justify-center',
+      ]"
+    >
+      <div
+        :class="[type === 'icon' ? 'w-0.5 bg-green-500' : 'w-px bg-gray-200']"
+      />
+    </div>
+    <template v-if="type === 'image'">
+      <img
+        :src="item.person?.imageUrl"
+        alt=""
+        class="relative size-6 flex-none rounded-full bg-gray-50"
+      />
+      <div class="flex-auto rounded-md p-3 ring-1 ring-inset ring-gray-200">
+        <div class="flex justify-between gap-x-4 mb-0.5">
+          <div class="text-xs leading-5 text-gray-500">
+            <span class="font-medium text-gray-900">{{
+              item.person?.name
+            }}</span>
+          </div>
+          <time
+            :datetime="item.dateTime"
+            class="flex-none text-xs leading-5 text-gray-500"
+          >
+            {{ item.date + " " + item.dateTime }}
+          </time>
+        </div>
+        <p class="text-sm leading-6 text-gray-500">
+          {{ item.comment }}
+        </p>
+        <details
+          v-if="showMore"
+          :open="itemIdx === 0"
+          class="text-gray-500 text-xs select-none open:border open:border-gray-100 open:bg-gray-50 open:rounded-md transition-colors duration-100 ease-in-out mt-2 p-2 group h-6 open:h-auto"
+        >
+          <summary
+            class="text-sm leading-5 text-gray-900 list-none flex items-center justify-start flex-row cursor-pointer"
+          >
+            {{ item.showmore?.title || "More Details" }}
+            <PlusIcon
+              class="fill-current opacity-75 size-4 -mr-1 transition-all duration-300 ml-auto group-open:hidden"
+            />
+            <MinusIcon
+              class="fill-current opacity-75 size-4 -mr-1 transition-all duration-300 ml-auto hidden group-open:inline-block"
+            />
+          </summary>
+          <div>{{ item.showmore?.content }}</div>
+        </details>
+      </div>
+    </template>
+    <template v-else>
+      <div
+        class="relative flex size-6 flex-none items-center justify-center bg-white"
+      >
+        <component
+          v-if="type === 'icon'"
+          :is="icon || CheckCircleIcon"
+          class="size-6 text-green-500"
+          aria-hidden="true"
+        />
+        <div
+          v-else
+          class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300 group-hover:bg-purple-200 group-hover:ring-purple-500"
+        />
+      </div>
+      <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
+        <span class="font-medium text-gray-900">{{ item.person?.name }}</span>
+        {{ item?.command }}
+      </p>
+      <time
+        :datetime="item.dateTime"
+        class="flex-none py-0.5 text-xs leading-5 text-gray-500"
+        >{{ item.date + " " + item.dateTime }}</time
+      >
+    </template>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from "vue";
+import { MinusIcon, PlusIcon } from "@heroicons/vue/24/outline";
+import { CheckCircleIcon } from "@heroicons/vue/24/solid";
+
+interface ITimeLine {
+  id: number | string;
+  person: any;
+  comment?: string;
+  date?: string;
+  dateTime?: string;
+  showmore?: any;
+  command?:string
+}
+
+const props = defineProps({
+  data: {
+    type: Array<ITimeLine>,
+    default: [],
+  },
+  type: {
+    type: String as PropType<"view" | "icon" | "image">,
+    default: "",
+  },
+  icon: {
+    type: [String, Object],
+    default: "",
+  },
+  showMore: {
+    type: Boolean,
+    default: false,
+  },
+});
+const  {data,type,icon,showMore} = toRefs(props)
+</script>
+
+<style scoped></style>

package/src/components/toggle/EUIToggle.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import EUIToggle from "./EUIToggle.vue";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Forms/Toggle",
+  component: EUIToggle,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      description: "Controls the switch state of the Toggle",
+      control: "boolean",
+    },
+    label: {
+      description: "The label displayed next to the Toggle",
+      control: "text",
+    },
+    name: {
+      description: "The name attribute for the switch toggle, useful for forms",
+      control: "text",
+    },
+    errors: {
+      description:
+        "An object that contains error messages or validation information",
+      control: "object",
+    },
+    disabled: {
+      description: "Disables the toggle when set to change",
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof EUIToggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    label: "Accept Terms & Conditions",
+    modelValue: false,
+    disabled: false,
+  },
+};
+
+// Disabled state story
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Toggle",
+    modelValue: false,
+    disabled: true,
+  },
+};
+
+// Disabled state story
+export const DisabledToggle: Story = {
+  args: {
+    label: "Disabled Toggle state",
+    modelValue: true,
+    disabled: true,
+  },
+};

package/src/components/toggle/EUIToggle.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <label class="inline-flex items-center cursor-pointer eui-switch">
+        <input
+            v-model="isChecked"
+            type="checkbox"
+            class="sr-only peer eui-switch_input"
+            :disabled="disabled"
+            @change="toggle($event)"
+        />
+        <div
+        class="eui-switch_circle relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300/10 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-700"
+        >
+            <span class="eui-switch_icons"></span>
+        </div>
+        <span v-if="label" class="text-sm font-medium text-gray-900 ms-3 first-letter:capitalize">
+            {{ label }}
+        </span>
+    </label>
+    <EUIErrorMessage :errors="errors" :name="name" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } from "vue";
+import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
+
+// Props declaration
+const props = defineProps({
+  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,
+  },
+  label: { type: String as PropType<string>, required: true, default: "" },
+});
+
+const emit = defineEmits(["update:modelValue", "toggle"]);
+const isChecked = ref<boolean>(props.modelValue);
+
+watch(isChecked, (newValue) => {
+  emit("update:modelValue", newValue);
+});
+
+const toggle = ($event: Event) => {
+  if($event) {
+    emit("toggle", isChecked.value);
+  }
+};
+
+watch(props, (newValue) => {
+  isChecked.value = newValue.modelValue;
+});
+</script>
+
+<style lang="scss" scoped>
+.eui-switch_icons {
+      @apply size-5 absolute z-10;
+      transform: translateX(0%) !important;
+      &::before,
+      &::after {
+        content: '';
+        border-width: 0 2px 2px 0;
+        left: 9px;
+        @apply absolute border-solid border-red-500 transform size-[5px] ;
+      }
+      &::after {
+        @apply rotate-45 top-2;
+      }
+      &::before {
+        bottom: 3px;
+        rotate: 225deg;
+      }
+    }
+
+    .eui-switch_input:checked + .eui-switch_circle {
+    .eui-switch_icons {
+      transform: translateX(120%) !important;
+      &::after {
+        width: 5.3px;
+        border-width: 0 2.4px 2.4px 0;
+        @apply border-green-500 top-1.5 left-1.5 h-2.5;
+      }
+      &::before {
+        @apply hidden;
+      }
+    }
+  }
+</style>

package/src/components/tooltip/EUITooltip.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUITooltip from "./EUITooltip.vue";
+const meta: Meta<typeof EUITooltip> = {
+  title: "Example/Tooltip",
+  component: EUITooltip,
+  tags: ["autodocs"],
+  argTypes: {
+    placement: {
+      control: { type: "select" },
+      options: ["top", "left", "bottom", "right", "bottom-start", "bottom-end"],
+      description: "Tooltip placement around the target element",
+      defaultValue: "left",
+    },
+  },
+} satisfies Meta<typeof EUITooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placement: "top",
+  },
+  render: (args) => ({
+    components: { EUITooltip },
+    setup() {
+      return { args };
+    },
+    template: `<div class="min-h-72 mx-auto max-w-xl p-6 flex items-center justify-center">
+    <EUITooltip v-bind="args">
+      <template v-slot:default>
+        <button class="px-4 py-2 text-white bg-gray-800 rounded">Hover me</button>
+      </template>
+      <template v-slot:tooltip>
+       Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+      </template>
+    </EUITooltip></div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<EUITooltip v-bind="args">
+      <template v-slot:default>
+        <button class="px-4 py-2 text-white bg-gray-800 rounded">Hover me</button>
+      </template>
+      <template v-slot:tooltip>
+       Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+      </template>
+    </EUITooltip></div>`,
+      },
+    },
+  },
+};