edvoyui-component-library-test-flight 0.0.51 → 0.0.53

package/dist/searchInput/EUISearch.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/searchInput/EUISearch.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/searchInput/EUISearch.vue?vue&type=style&index=0&scoped=eb55b396&lang.css";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/searchInput/EUISearch.vue?vue&type=style&index=0&scoped=6bdd4db3&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUISearch.vue.d.ts.map

package/dist/searchexpand/EUISearchExpand.vue.d.ts

@@ -0,0 +1,5 @@
+export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/searchexpand/EUISearchExpand.vue?vue&type=script&setup=true&lang.ts";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/searchexpand/EUISearchExpand.vue?vue&type=style&index=0&scoped=914f602c&lang.css";
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=EUISearchExpand.vue.d.ts.map

package/dist/searchexpand/EUISearchExpand.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUISearchExpand.vue.d.ts","sourceRoot":"","sources":["../../src/components/searchexpand/EUISearchExpand.vue"],"names":[],"mappings":"AACA,cAAc,oHAAoH,CAAC;AACnI,OAAO,iIAAiI,CAAC;;AAEzI,wBAA0F"}

package/dist/searchexpand/EUISearchToggle.vue.d.ts

@@ -0,0 +1,5 @@
+export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/searchexpand/EUISearchToggle.vue?vue&type=script&setup=true&lang.ts";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/searchexpand/EUISearchToggle.vue?vue&type=style&index=0&scoped=69488444&lang.css";
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=EUISearchToggle.vue.d.ts.map

package/dist/searchexpand/EUISearchToggle.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUISearchToggle.vue.d.ts","sourceRoot":"","sources":["../../src/components/searchexpand/EUISearchToggle.vue"],"names":[],"mappings":"AACA,cAAc,oHAAoH,CAAC;AACnI,OAAO,iIAAiI,CAAC;;AAEzI,wBAA0F"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.51",
+  "version": "0.0.53",
   "type": "module",
   "files": [
     "dist/",

package/src/assets/svg/SearchBigZoomIn.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21 21L17.5104 17.5104M17.5104 17.5104C19.0486 15.9722 20 13.8472 20 11.5C20 6.80558 16.1944 3 11.5 3C6.80558 3 3 6.80558 3 11.5C3 16.1944 6.80558 20 11.5 20C13.8472 20 15.9722 19.0486 17.5104 17.5104Z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

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

@@ -20,6 +20,15 @@ const meta: Meta<typeof EUIAccordion> = {
       description:
         "Accordion panel default one opened. Next one click close previous another one open",
     },
+    accordionStyle: {
+      control: "select",
+      options: ["grouped", "separated"],
+    },
+    className: {
+      control: "text",
+      description:
+        "Additional CSS classes for styling the accordion container.",
+    },
   },
 } satisfies Meta<typeof EUIAccordion>;
 
@@ -51,6 +60,7 @@ export const Default: Story = {
       },
     ],
     defaultOpen: [1],
+    accordionStyle: "grouped",
   },
   render: (args) => ({
     components: { EUIAccordion },
@@ -97,6 +107,43 @@ export const AccordionCollopse: Story = {
   }),
 };
 
+export const AccordionSeparated: 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,
+    accordionStyle: "separated",
+  },
+  render: (args) => ({
+    components: { EUIAccordion },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAccordion v-bind="args" />`,
+  }),
+};
+
 export const UseTemplate: Story = {
   args: {
     datas: [

package/src/components/accordion/EUIAccordion.vue

@@ -1,54 +1,86 @@
 <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"
+    <div
+      :class="[
+        accordionStyle === 'grouped' ? 'p-2 bg-gray-50 rounded-xl' : 'space-y-3',
+        'max-w-full transition-all duration-100 ease-in-out',
+      ]"
     >
-      <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"
+      <details
+        v-for="(item, index) in datas"
+        :key="`accordion-${index}`"
+        :open="openAccordions[index]"
+        @click.prevent="onClick(index)"
+        :class="[
+          accordionStyle === 'grouped'
+            ? 'rounded-lg hover:bg-gray-100 open:bg-gray-100 open:mb-4 open:last:mb-0'
+            : 'bg-white px-8 py-4 rounded-2xl hover:ring-2 hover:ring-purple-500 open:ring-2 ring-purple-700 open:shadow-lg open:shadow-purple-100',
+          'box-border relative mx-auto my-0 text-base font-normal transition-colors duration-150 ease-in-out group', className
+        ]"
+      >
+        <summary
+          :class="[
+            accordionStyle === 'grouped'
+              ? 'p-4'
+              : 'group-open:pb-4 justify-center gap-6 group-open:border-b group-open:border-gray-200',
+            'flex items-center font-semibold list-none cursor-pointer select-none focus:outline-none',
+          ]"
+        >
+          <div
+            :class="[
+              accordionStyle === 'grouped' ? 'w-11/12' : 'flex-initial w-10/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>
+          </div>
+          <svg
+            v-if="accordionStyle === 'grouped'"
+            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>
+          <div v-else class="flex-1 truncate">
+            <div class="flex items-end w-full text-start">
+              <slot name="right-icon" :item="item"></slot>
+            </div>
+          </div>
+        </summary>
+        <div
+          :class="[
+            accordionStyle === 'grouped' ? 'p-4 pt-1 ' : 'pt-3',
+            'font-light text-gray-600',
+          ]"
         >
-          <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">
+          <slot name="content" :item="item">
             {{ item.content }}
           </slot>
-      </div>
-    </details>
-  </div>
+        </div>
+      </details>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, PropType, ref } from 'vue';
+import { onMounted, PropType, ref } from "vue";
 
 const props = defineProps({
   datas: {
     type: Array as PropType<any[]>,
     required: true,
-    default: () => []
+    default: () => [],
   },
   defaultOpen: {
     type: Array as PropType<number[]>,
@@ -56,8 +88,16 @@ const props = defineProps({
   },
   collapse: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
+  accordionStyle: {
+    type: String as PropType<"grouped" | "separated">,
+    default: "grouped",
+  },
+  className: {
+    type: String,
+    required: false,
+  },
 });
 
 const openAccordions = ref<boolean[]>(Array(props.datas.length).fill(false));
@@ -65,18 +105,20 @@ 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
+      openAccordions.value[index] = true; // Open specified accordions
     }
   });
 });
 
 const onClick = (index: number) => {
-//   openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
+  //   openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
 
-if (props.collapse) {
+  if (props.collapse) {
     openAccordions.value = openAccordions.value.map((_, i) => i === index);
   } else {
-    openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
+    openAccordions.value = openAccordions.value.map((isOpen, i) =>
+      i === index ? !isOpen : isOpen
+    );
   }
 };
 </script>

package/src/components/delete.vue

@@ -3,7 +3,26 @@
     <div
       class="flex flex-row items-center justify-end max-w-screen-xl gap-6 mx-auto mb-10"
     >
-      <EUISearch />
+      <div class="flex-1">
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad quibusdam
+        illo nisi recusandae impedit nulla possimus, et delectus necessitatibus
+        tempora maxime maiores dolores voluptates nemo ratione officia suscipit
+        voluptatum iure.
+
+        {{ "search Data:" + inputSearch + showSearch }}
+      </div>
+      <div class="inline-flex flex-row gap-2">
+        <EUISearchToggle
+          v-model:model-value="inputSearch"
+          v-model:search-sync="showSearch"
+        />
+        <EUIButton color="primary" rounded size="sm" @click="toggleSearch"
+          >Close</EUIButton
+        >
+      </div>
+      <div class="relative border border-red-500 rounded-full size-12">
+        <div class="absolute top-0 right-0"><EUISearch /></div>
+      </div>
       <div>
         <EUITooltip placement="top">
           <template v-slot:default>
@@ -19,107 +38,107 @@
     </div>
     <div class="grid max-w-3xl gap-4 mx-auto mb-6 sm:grid-cols-3">
       <div>
-      <EUIDatepicker
-        v-model:modelValue="datepickerRange"
-        label="Date Min and max"
-        placeholder="Select Date here..."
-        :range="true"
-        required
-        :icon="CalendarIcon"
-        iconType="startIcon"
-        :min-date="minDate"
-        :max-date="maxDate"
-      />
-    </div>
-    <div>
-      <EUIDatepicker
-        v-model:modelValue="datepickerRange"
-        label="Datepicker Range multi"
-        placeholder="Select Date here..."
-        :range="true"
-        :multi-calendars="true"
-        required
-        :icon="CalendarIcon"
-        iconType="startIcon"
-      />
-      <EUIButton @click="resetFilter">Reset</EUIButton>
-    </div>
-    <div>
-      <EUIDatepicker
-        v-model:modelValue="datepickerRange"
-        label="Datepicker Range"
-        placeholder="Select Date here..."
-        :range="true"
-        required
-        :icon="CalendarIcon"
-        iconType="startIcon"
-      />
-    </div>
-    <div>
-      <EUIDatepicker
-        :disabled="false"
-        label="Datepicker Single"
-        v-model:modelValue="singleDate"
-        placeholder="Select your date"
-        :readonly="false"
-        required
-         :icon="CalendarIcon"
-        iconType="endIcon"
-      />
-    </div>
-    <div>
-      <EUIDatepicker
-        v-model:modelValue="timepicker"
-        :disabled="false"
-        label="Time Picker"
-        placeholder="Select your time"
-        :readonly="false"
-        required
-        :timePicker="true"
-      />
+        <EUIDatepicker
+          v-model:modelValue="datepickerRange"
+          label="Date Min and max"
+          placeholder="Select Date here..."
+          :range="true"
+          required
+          :icon="CalendarIcon"
+          iconType="startIcon"
+          :min-date="minDate"
+          :max-date="maxDate"
+        />
+      </div>
+      <div>
+        <EUIDatepicker
+          v-model:modelValue="datepickerRange"
+          label="Datepicker Range multi"
+          placeholder="Select Date here..."
+          :range="true"
+          :multi-calendars="true"
+          required
+          :icon="CalendarIcon"
+          iconType="startIcon"
+        />
+        <EUIButton @click="resetFilter">Reset</EUIButton>
+      </div>
+      <div>
+        <EUIDatepicker
+          v-model:modelValue="datepickerRange"
+          label="Datepicker Range"
+          placeholder="Select Date here..."
+          :range="true"
+          required
+          :icon="CalendarIcon"
+          iconType="startIcon"
+        />
+      </div>
+      <div>
+        <EUIDatepicker
+          :disabled="false"
+          label="Datepicker Single"
+          v-model:modelValue="singleDate"
+          placeholder="Select your date"
+          :readonly="false"
+          required
+          :icon="CalendarIcon"
+          iconType="endIcon"
+        />
+      </div>
+      <div>
+        <EUIDatepicker
+          v-model:modelValue="timepicker"
+          :disabled="false"
+          label="Time Picker"
+          placeholder="Select your time"
+          :readonly="false"
+          required
+          :timePicker="true"
+        />
+      </div>
     </div>
-  </div>
     <div class="grid max-w-3xl gap-4 mx-auto mb-6 sm:grid-cols-3">
-    <div>
-      <EUIDatepicker
-        v-model:modelValue="datepickerRange"
-        label="Datepicker Range"
-        placeholder="Select Date here..."
-        :range="true"
-        required
-        inputFilled
-        :icon="CalendarIcon"
-        iconType="startIcon"
-      />
-    </div>
+      <div>
+        <EUIDatepicker
+          v-model:modelValue="datepickerRange"
+          label="Datepicker Range"
+          placeholder="Select Date here..."
+          :range="true"
+          required
+          inputFilled
+          :icon="CalendarIcon"
+          iconType="startIcon"
+        />
+      </div>
 
-    <div>
-      <EUIDatepicker
-        :disabled="false"
-        label="Datepicker Single"
-        v-model:modelValue="singleDate"
-        placeholder="Select your date"
-        :readonly="false"
-        required
-        inputFilled
-        :icon="CalendarIcon"
-        iconType="endIcon"
-      />
-    </div>
+      <div>
+        <EUIDatepicker
+          :disabled="false"
+          label="Datepicker Single"
+          v-model:modelValue="singleDate"
+          placeholder="Select your date"
+          :readonly="false"
+          required
+          inputFilled
+          :icon="CalendarIcon"
+          iconType="endIcon"
+        />
+      </div>
 
-    <div>
-      <EUIDatepicker
-        v-model:modelValue="timepicker"
-        :disabled="false"
-        label="Time Picker"
-        placeholder="Select your time"
-        :readonly="false"
-        :timePicker="true"
-        required
-        inputFilled
-      />
+      <div>
+        <EUIDatepicker
+          v-model:modelValue="timepicker"
+          :disabled="false"
+          label="Time Picker"
+          placeholder="Select your time"
+          :readonly="false"
+          :timePicker="true"
+          required
+          inputFilled
+        />
+      </div>
     </div>
-  </div>
 
     <EUITable
       :checkable="true"
@@ -172,6 +191,7 @@ import EUISearch from "./searchInput/EUISearch.vue";
 import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
 import { CalendarIcon } from "@heroicons/vue/24/solid";
 import EUIButton from "./button/EUIButton.vue";
+import EUISearchToggle from "./searchexpand/EUISearchToggle.vue";
 
 // TODO: Datepicker
 const datepickerRange = ref([
@@ -181,6 +201,13 @@ const datepickerRange = ref([
 
 const singleDate = ref(new Date());
 
+const inputSearch = ref("");
+const showSearch = ref(true);
+
+const toggleSearch = () => {
+  showSearch.value = !showSearch.value;
+};
+
 const timepicker = ref({
   hours: new Date().getHours(),
   minutes: new Date().getMinutes(),
@@ -223,8 +250,8 @@ const onSort = (field: string, order: string) => {
 };
 
 const resetFilter = () => {
-  datepickerRange.value  = []
-}
+  datepickerRange.value = [];
+};
 
 const minDate = ref(new Date(2024, 11));
 const maxDate = ref(new Date());

package/src/components/dropdown/EUIMultiDropdown.vue

@@ -17,7 +17,7 @@
       </slot>
     </button>
     <!-- Menu lists -->
-    <div v-if="isOpen && menuItems.length" class="absolute left-0 z-0 p-2 mt-1 transition-all duration-300 ease-in-out bg-white border border-gray-200 border-solid rounded-lg shadow-2xl top-full shadow-gray-300 min-w-36 max-w-64 w-max" @click.stop>
+    <div v-if="isOpen && menuItems.length" class="absolute left-0 z-0 p-2 mt-1 transition-all duration-300 ease-in-out bg-white border border-gray-200 border-solid rounded-lg shadow-2xl top-full shadow-gray-300 min-w-32 max-w-64 w-max" @click.stop>
       <div
         v-for="item in menuItems"
         :key="item.text"
@@ -36,7 +36,7 @@
         </div>
 
         <!-- Sub-menu lists-->
-        <div v-if="item.subMenu && activeMenuItem === item.text" class="absolute top-0 z-10 transition-all duration-300 ease-in-out left-full min-w-36 max-w-64 w-max">
+        <div v-if="item.subMenu && activeMenuItem === item.text" class="absolute top-0 z-10 transition-all duration-300 ease-in-out left-full min-w-36 max-w-64">
           <div class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300">
             <div v-if="item.enableAction" class="flex items-center justify-center w-full gap-1 px-6 py-3 text-sm font-medium text-gray-900 bg-purple-100 rounded-t-md" @click.prevent="$emit('actionItem', 'action')">
               <slot name="actionName">{{ '+ Action Name' }}</slot>

package/src/components/index.ts

@@ -43,3 +43,5 @@ export { default as EUIErrorMessage } from "./errorMessage/EUIErrorMessage.vue";
 
 export { default as EUITooltip } from "./tooltip/EUITooltip.vue";
 export { default as EUISearch } from "./searchInput/EUISearch.vue";
+export { default as EUISearchExpand } from "./searchexpand/EUISearchExpand.vue";
+export { default as EUISearchToggle } from "./searchexpand/EUISearchToggle.vue";

package/src/components/searchInput/EUISearch.vue

@@ -15,14 +15,14 @@
           v-model="searchQuery"
           type="search"
           placeholder="Search here..."
-          class="text-sm font-medium bg-transparent w-96 ps-12 pe-2 focus:outline-none"
+          class="text-sm font-medium bg-transparent w-96 ps-12 pe-2 focus:outline-none min-h-9"
           autofocus="true"
           @input="handleSearch"
           @blur="closeDropdown"
           @focus="showDropdownResult = true"
         />
         <div
-          v-if="isExpanded"
+          v-if="menuDropdown && 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"
@@ -90,12 +90,20 @@
 <script lang="ts" setup>
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
 import { createPopper } from "@popperjs/core";
-import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, toRefs } 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 props = defineProps({
+  menuDropdown: {
+    type: Boolean,
+    default: false
+  }
+})
+const {menuDropdown }= toRefs(props);
+
 const isExpanded = ref(false);
 const dropdownButton = ref<HTMLElement | null>(null);
 const dropdown = ref<HTMLElement | null>(null);