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

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.51",
+  "version": "0.0.52",
   "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/delete.vue

@@ -3,7 +3,18 @@
     <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">
+        <EUISearchExpand v-model:model-value="inputSearch" :search-sync="showSearch" />
+        <EUIButton color="primary" rounded size="sm" @click="closeSeach">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>
@@ -172,6 +183,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";
 
 // TODO: Datepicker
 const datepickerRange = ref([
@@ -181,6 +193,13 @@ const datepickerRange = ref([
 
 const singleDate = ref(new Date());
 
+const inputSearch = ref('')
+const showSearch = ref(true)
+
+const closeSeach = () => {
+  showSearch.value = false
+}
+
 const timepicker = ref({
   hours: new Date().getHours(),
   minutes: new Date().getMinutes(),

package/src/components/index.ts

@@ -43,3 +43,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";

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);

package/src/components/searchexpand/EUISearchExpand.vue

@@ -0,0 +1,109 @@
+<template>
+
+  <div class="relative rounded-full size-12">
+    <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="closeInput"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
+import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  searchSync: {
+    type: Boolean,
+    default: false,
+  },
+});
+const { searchSync } = toRefs(props);
+const emit = defineEmits(["update:modelValue"]);
+
+const input = ref<HTMLInputElement>();
+const isExpanded = ref(true);
+const searchQuery = ref();
+const componentWrapper = ref<HTMLElement | null>(null);
+
+function expandInput() {
+  isExpanded.value = true;
+  input?.value?.focus();
+}
+
+function closeInput() {
+  if (!searchQuery.value) {
+    isExpanded.value = false;
+  }
+}
+
+function handleOutsideClick(event: MouseEvent) {
+  if (
+    componentWrapper.value &&
+    !componentWrapper.value.contains(event.target as Node)
+  ) {
+    closeInput();
+  }
+}
+
+watch(searchSync, (newVal) => {
+  if (!newVal) {
+    closeInput();
+  }
+}, {immediate: true, deep:true});
+
+onMounted(() => {
+  document.addEventListener("click", handleOutsideClick);
+  if (searchQuery.value) {
+    searchQuery.value?.focus();
+  }
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", handleOutsideClick);
+});
+
+function handleSearch(event: Event) {
+  const newValue = (event?.target as HTMLInputElement)?.value;
+  if (newValue !== undefined) {
+    emit("update:modelValue", newValue);
+  }
+}
+</script>
+
+<style scoped>
+/* Add custom styles here */
+</style>