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

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.52",
+  "version": "0.0.53",
   "type": "module",
   "files": [
     "dist/",

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

@@ -4,13 +4,21 @@
       class="flex flex-row items-center justify-end max-w-screen-xl gap-6 mx-auto mb-10"
     >
       <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.
+        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}}
+        {{ "search Data:" + inputSearch + showSearch }}
       </div>
       <div class="inline-flex flex-row gap-2">
-        <EUISearchExpand v-model:model-value="inputSearch" :search-sync="showSearch" />
-        <EUIButton color="primary" rounded size="sm" @click="closeSeach">Close</EUIButton>
+        <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>
@@ -30,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"
@@ -183,7 +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 EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
+import EUISearchToggle from "./searchexpand/EUISearchToggle.vue";
 
 // TODO: Datepicker
 const datepickerRange = ref([
@@ -193,12 +201,12 @@ const datepickerRange = ref([
 
 const singleDate = ref(new Date());
 
-const inputSearch = ref('')
-const showSearch = ref(true)
+const inputSearch = ref("");
+const showSearch = ref(true);
 
-const closeSeach = () => {
-  showSearch.value = false
-}
+const toggleSearch = () => {
+  showSearch.value = !showSearch.value;
+};
 
 const timepicker = ref({
   hours: new Date().getHours(),
@@ -242,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

@@ -44,3 +44,4 @@ 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/searchexpand/EUISearchToggle.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="relative rounded-full size-12">
+    <span class="text-[0.625rem] absolute -top-4 left-0 space-x-4">
+      <span>{{ "searchSync:" +  searchSync}}</span>
+      <span>{{ "isExpanded:" + isExpanded }}</span>
+    </span>
+    <div class="absolute top-0 right-0">
+      <div
+        ref="componentWrapper"
+        class="cursor-pointer group"
+        @click="expandInput"
+      >
+        <div class="relative max-w-80 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-80 text-gray-300'
+                : 'size-[2.875rem] text-gray-500',
+            ]"
+          >
+            <SearchBigZoomIn
+              class="absolute text-current size-6 top-2.5 left-2.5 transition-colors duration-100"
+            />
+            <input
+              v-if="isExpanded"
+              v-model="searchQuery"
+              ref="input"
+              type="search"
+              placeholder="Search here..."
+              class="text-sm font-medium text-gray-900 bg-transparent w-80 ps-10 pe-2 focus:outline-none min-h-9"
+              autocomplete="off"
+              @input="handleSearch"
+              @blur="handleSearch"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, watch } from "vue";
+import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  searchSync: {
+    type: Boolean,
+    default: true,
+  },
+});
+const { searchSync } = toRefs(props);
+const emit = defineEmits(["update:modelValue", "update:searchSync"]);
+
+const input = ref<HTMLInputElement>();
+const isExpanded = ref(true);
+const searchQuery = ref(null);
+const componentWrapper = ref<HTMLElement | null>(null);
+
+function handleSearch(event: Event) {
+  const newValue = (event?.target as HTMLInputElement)?.value;
+  if (newValue !== undefined) {
+    emit("update:modelValue", newValue);
+  }
+}
+
+function expandInput() {
+  isExpanded.value = true;
+  input?.value?.focus();
+  emit("update:searchSync", true);
+}
+
+watch(
+  searchSync,
+  (newVal) => {
+    isExpanded.value = newVal;
+    emit("update:searchSync", newVal);
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<style scoped>
+/* Add custom styles here */
+</style>