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

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>

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>