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

package/src/components/searchInput/EUISearch.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUISearch from "./EUISearch.vue";
+const meta: Meta<typeof EUISearch> = {
+  title: "Example/Search",
+  component: EUISearch,
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof EUISearch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    components: { EUISearch },
+    setup() {
+      return { args };
+    },
+    template: `<div class="min-h-72 mx-auto max-w-xl p-6 flex items-start justify-end">
+                <EUISearch v-bind="args">
+              </div>`,
+  }),
+};

package/src/components/searchInput/EUISearch.vue

@@ -0,0 +1,215 @@
+<template>
+  <div ref="componentWrapper" class="cursor-pointer group" @click="expandInput">
+    <div class="relative max-w-96 z-[calc(infinity)]">
+      <div
+        :class="[
+          'relative flex items-center py-1 duration-300 ease-linear bg-gray-100 border border-gray-200 rounded-full pe-1 group-focus-within:ring-2 ring-purple-200 group-focus-within:border-gray-300 transition-all delay-100',
+          isExpanded ? 'group-focus-within:w-96' : 'size-[2.875rem]',
+        ]"
+      >
+        <MagnifyingGlassIcon
+          class="absolute text-current size-6 top-3 left-3"
+        />
+        <input
+          v-if="isExpanded"
+          v-model="searchQuery"
+          type="search"
+          placeholder="Search here..."
+          class="text-sm font-medium bg-transparent w-96 ps-12 pe-2 focus:outline-none"
+          autofocus="true"
+          @input="handleSearch"
+          @blur="closeDropdown"
+          @focus="showDropdownResult = true"
+        />
+        <div
+          v-if="isExpanded"
+          ref="dropdownButton"
+          :open="isOpen"
+          class="flex items-center pl-3 pe-2 py-1.5 ml-auto bg-white cursor-pointer rounded-3xl ring-1 ring-gray-200/40 select-none transition-all duration-300 ease-in delay-100"
+          @click="toggleDropdown"
+        >
+          <div
+            class="inline-flex items-center gap-2 text-sm font-medium tracking-wide min-w-20"
+          >
+            <component :is="selectOption.icon" class="text-current size-4" />
+            {{ selectOption.title }}
+          </div>
+          <ChevronDownStroke
+            :class="[
+              'text-current size-6 transform transition-all duration-300 delay-75',
+              isOpen ? '-rotate-180 opacity-100' : 'opacity-50',
+            ]"
+          />
+        </div>
+      </div>
+      <ul
+        v-if="showDropdown"
+        ref="dropdown"
+        class="absolute text-sm font-medium right-0 z-50 w-40 bg-white border rounded-xl shadow-lg mt-0.5 overflow-hidden"
+      >
+        <li
+          v-for="data in dataList"
+          class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-gray-100"
+          @click.stop="onSelectOption(data)"
+        >
+          <component :is="data.icon" class="text-current size-4" />
+          <span>{{ data.title }}</span>
+        </li>
+      </ul>
+
+      <!-- search data -->
+      <ul
+        v-if="showDropdownResult && filteredResults.length"
+        ref="dropdown"
+        class="absolute text-sm font-medium right-0 z-40 w-full bg-white border rounded-xl shadow-lg mt-0.5 overflow-hidden"
+        @click="closeDropdown"
+      >
+        <li
+          v-for="(result, index) in filteredResults"
+          :key="index"
+          class="flex flex-col gap-1 px-4 py-2 cursor-pointer hover:bg-gray-100"
+        >
+          <div class="flex items-center gap-2">
+            <span
+              class="flex items-center justify-center w-8 h-8 rounded-full"
+              :style="{ backgroundColor: result.color }"
+            >
+              <span class="font-bold text-white">{{ result.initial }}</span>
+            </span>
+            <div class="flex flex-col">
+              <span class="font-semibold">{{ result.name }}</span>
+              <span class="text-sm text-gray-500">{{ result.email }}</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
+import { createPopper } from "@popperjs/core";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
+import Student from "../../assets/svg/Student.vue";
+import Partner from "../../assets/svg/partner.vue";
+import People from "../../assets/svg/people.vue";
+
+const isExpanded = ref(false);
+const dropdownButton = ref<HTMLElement | null>(null);
+const dropdown = ref<HTMLElement | null>(null);
+const showDropdown = ref(false);
+const searchQuery = ref();
+const showDropdownResult = ref(false);
+const isOpen = ref(false);
+const componentWrapper = ref<HTMLElement | null>(null);
+
+function expandInput() {
+  isExpanded.value = true;
+}
+
+function closeInput() {
+  if (!searchQuery.value && !selectOption.value) {
+    isExpanded.value = false;
+  }
+  showDropdownResult.value = false;
+  isOpen.value = false;
+}
+
+function toggleDropdown() {
+  showDropdown.value = !showDropdown.value;
+  isOpen.value = !isOpen.value;
+}
+
+function closeDropdown() {
+  showDropdown.value = false;
+  isOpen.value = false;
+  closeInput();
+}
+
+function handleOutsideClick(event: MouseEvent) {
+  if (
+    componentWrapper.value &&
+    !componentWrapper.value.contains(event.target as Node)
+  ) {
+    closeDropdown();
+    if (!searchQuery.value) {
+      isExpanded.value = false;
+    }
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("click", handleOutsideClick);
+  if (searchQuery.value) {
+    searchQuery.value?.focus();
+  }
+  if (dropdownButton.value && dropdown.value) {
+    createPopper(dropdownButton.value, dropdown.value, {
+      placement: "bottom",
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", handleOutsideClick);
+});
+
+const filteredResults = computed(() => {
+  return results.value.filter((result) =>
+    result.name?.toLowerCase().includes(searchQuery.value?.toLowerCase())
+  );
+});
+
+function handleSearch() {
+  if (searchQuery.value) {
+    showDropdownResult.value = true;
+  } else {
+    showDropdownResult.value = false;
+  }
+}
+
+const dataList = ref([
+  { title: "Student", icon: Student },
+  { title: "People", icon: People },
+  { title: "Partner", icon: Partner },
+]);
+
+const selectOption = ref(dataList.value[0]);
+const onSelectOption = (data: any) => {
+  selectOption.value = data;
+  toggleDropdown()
+};
+
+const results = ref([
+  {
+    name: "Kamal Ahmed",
+    email: "kamalahmed@gmail.com",
+    color: "green",
+    initial: "A",
+  },
+  {
+    name: "Kamala Koteswararoo",
+    email: "kamalkote86@gmail.com",
+    color: "purple",
+    initial: "K",
+  },
+  {
+    name: "Kamaljeet Kaur",
+    email: "cheemak346@gmail.com",
+    color: "orange",
+    initial: "K",
+  },
+  {
+    name: "Kamala Hamal",
+    email: "kamalahamal88@outlook.com",
+    color: "gray",
+    initial: "K",
+  },
+]);
+</script>
+
+<style scoped>
+/* Add custom styles here */
+</style>

package/src/components/select/EUISelect.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUISelect from "./EUISelect.vue"; // Adjust the path if necessary
+
+const meta = {
+  title: "Forms/Select",
+  component: EUISelect,
+  tags: ["autodocs"],
+  argTypes: {
+    name: {
+      control: "text",
+      description:
+        "The name of the select input field, used as a key to display the selected option or error message.",
+    },
+    items: {
+      control: "object",
+      description:
+        "Array of options to display in the select dropdown. Each option should be an object with `value` and `label` properties.",
+    },
+    modelValue: {
+      control: "text",
+      description: "The currently selected value in the select input.",
+    },
+    errors: {
+      control: "object",
+      description:
+        "Object containing validation errors where keys are field names and values are the error messages.",
+    },
+  },
+} satisfies Meta<typeof EUISelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story for EUISelect
+export const Default: Story = {
+  args: {
+    name: "country",
+    label: "country",
+    placeholder: "country",
+    items: [
+      { value: "usa", label: "United States", name: "United States" },
+      { value: "canada", label: "Canada", name: "Canada" },
+      { value: "uk", label: "United Kingdom", name: "United Kingdom" },
+    ],
+    modelValue: { value: "usa", label: "United States", name: "United States" },
+    errors: {},
+    required: true,
+  },
+};