edvoyui-component-library-test-flight 0.0.93 → 0.0.95

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

@@ -1,5 +1,5 @@
 export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/searchexpand/EUISearchExpand.vue?vue&type=script&setup=true&lang.ts";
-import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/searchexpand/EUISearchExpand.vue?vue&type=style&index=0&scoped=3af29ac1&lang.css";
+import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/searchexpand/EUISearchExpand.vue?vue&type=style&index=0&scoped=d3cf5f43&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUISearchExpand.vue.d.ts.map

package/package.json

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

package/src/components/HelloWorld.vue

@@ -4,11 +4,27 @@
   >
     Edvoy User Interface
   </h1>
+ <!-- <div class="ml-[200px]">
+ <EUISearchExpand
+                
+                  v-model:model-value="searchInput"
+                  :search-sync="showSearch"
+                  @input="seachStudent($event?.target?.value)"
+                  @update:modelValue="seachStudent($event?.target?.value)"
+                /></div> -->
 
 </template>
 <script setup lang="ts">
+// import { ref } from 'vue';
 
+// import EUISearchExpand from './searchexpand/EUISearchExpand.vue'
 
+// const searchInput =ref('')
+// const showSearch  =ref(false)
+
+// const seachStudent=(e)=>{
+//   console.log('seachStudent',e)
+// }
 </script>
 <style lang="scss"></style>
 

package/src/components/button/EUIButton.stories.ts

@@ -18,7 +18,16 @@ const meta = {
     color: {
       control: {
         type: "select",
-        options: ["black", "white", "danger", "success", "purple", "primary"],
+        options: [
+          "black",
+          "white",
+          "danger",
+          "success",
+          "purple",
+          "primary",
+          "tertiary",
+          "secondary",
+        ],
       },
       description: "The color theme of the button.",
     },
@@ -67,7 +76,16 @@ export const Default: Story = {
     },
     color: {
       control: "select",
-      options: ["black", "white", "danger", "success", "purple", "primary"],
+      options: [
+        "black",
+        "white",
+        "danger",
+        "success",
+        "purple",
+        "primary",
+        "tertiary",
+        "secondary",
+      ],
     },
     iconType: {
       control: "select",

package/src/components/searchexpand/EUISearchExpand.vue

@@ -1,5 +1,4 @@
 <template>
-
   <div class="relative rounded-full size-10">
     <div class="absolute top-0 right-0">
       <div
@@ -19,11 +18,37 @@
             <SearchBigZoomIn
               class="absolute text-current size-6 top-2 left-2"
             />
+
+            <button
+              v-if="isExpanded"
+              :class="
+                inputValue ? '  absolute inset-y-0 right-3  ' : ' hidden '
+              "
+              @click="(searchQuery=''), emit('update:modelValue', '')"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-5"
+              >
+                <!--         <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+ -->
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 18 18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+
             <input
               v-if="isExpanded"
               v-model="searchQuery"
               ref="input"
-              type="search"
+              :type="type === 'search' ? 'text' : type"
               placeholder="Search here..."
               class="h-10 text-sm font-medium text-gray-900 bg-transparent w-80 ps-10 pe-2 focus:outline-none"
               autocomplete="off"
@@ -38,7 +63,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, PropType, ref, toRefs, watch } from "vue";
 import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
 
 const props = defineProps({
@@ -50,6 +75,12 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  type: {
+    type: String as PropType<
+      "text" | "number" | "email" | "password" | "search" 
+    >,
+    default: "text",
+  },
 });
 const { searchSync } = toRefs(props);
 const emit = defineEmits(["update:modelValue"]);
@@ -64,6 +95,10 @@ function expandInput() {
   input?.value?.focus();
 }
 
+const inputValue = computed(() => {
+  return props.modelValue === 0 ? true : !!props.modelValue;
+});
+
 function closeInput() {
   if (!searchQuery.value) {
     isExpanded.value = false;
@@ -79,11 +114,15 @@ function handleOutsideClick(event: MouseEvent) {
   }
 }
 
-watch(searchSync, (newVal) => {
-  if (!newVal) {
-    closeInput();
-  }
-}, {immediate: true, deep:true});
+watch(
+  searchSync,
+  (newVal) => {
+    if (!newVal) {
+      closeInput();
+    }
+  },
+  { immediate: true, deep: true }
+);
 
 onMounted(() => {
   document.addEventListener("click", handleOutsideClick);