edvoyui-component-library-test-flight 0.0.108 → 0.0.110

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

package/src/components/select/EUISelect.vue

@@ -45,7 +45,11 @@
       @open="open"
     >
       <!-- :clearable="isUseCustomSelect ? clearable : undefined" -->
-      <template v-if="inputFilled" #header>
+      <!-- Allow parent to override header slot -->
+      <template v-if="$slots.header" #header>
+        <slot name="header"></slot>
+      </template>
+      <template v-if="inputFilled && !$slots.header" #header>
         <div
           :class="[
             inputValue
@@ -59,7 +63,14 @@
           {{ startCaseText(label) || "Select" }}
         </div>
       </template>
-      <template #selected-option="item">
+
+
+      <!-- Allow parent to override selected-option slot -->
+      <template v-if="$slots['selected-option']" #selected-option="slotProps">
+        <slot name="selected-option" v-bind="slotProps as Record<string, any>"></slot>
+      </template>
+
+      <template v-if="!$slots['selected-option']" #selected-option="item">
         <div
           :class="
             isUseCustomSelect
@@ -77,10 +88,17 @@
             "
             :alt="item[fieldName]"
           />
-          {{ isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName] }}
+          {{
+            isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
+          }}
         </div>
       </template>
-      <template #option="item">
+
+      <!-- Allow parent to override option slot -->
+      <template v-if="$slots.option" #option="option">
+        <slot name="option" v-bind="option  as Record<string, any>"></slot> <!-- Passing the 'option' data -->
+      </template>
+      <template v-else #option="item">
         <div class="flex items-center">
           <img
             v-if="(item as any).iconlink"
@@ -89,17 +107,30 @@
             :alt="item[fieldName]"
           />
 
-          {{ isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName] }}
+          {{
+            isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
+          }}
         </div>
       </template>
-      <template #spinner="{ loading: _loading }">
+
+      <!-- Allow parent to override spinner slot -->
+      <template v-if="$slots.spinner" #spinner="{ loading: _loading }">
+        <slot name="spinner" :loading="_loading || loading"></slot>
+      </template>
+      <template v-else #spinner="{ loading: _loading }">
         <div
           v-if="loading || _loading"
           style="border-left-color: rgba(107, 30, 190, 0.71)"
           class="vs__spinner"
         />
       </template>
-      <template v-if="isSelectAll" #list-header>
+
+      <!-- Allow parent to override list-header slot -->
+      <template v-if="$slots['list-header']" #list-header>
+        <slot name="list-header"></slot>
+      </template>
+
+      <template v-else-if="isSelectAll" #list-header>
         <div v-if="items.length !== selected?.length">
           <button
             class="w-full px-6 py-2 text-sm font-medium text-gray-600 transition duration-75 hover:font-bold hover:text-gray-900 text-start"
@@ -109,7 +140,13 @@
           </button>
         </div>
       </template>
-      <template #open-indicator="{ attributes }">
+
+      <!-- Allow parent to override open-indicator slot -->
+      <template v-if="$slots['open-indicator']" #open-indicator="attributes">
+        <slot name="open-indicator" v-bind="attributes as Record<string, any>"></slot>
+      </template>
+
+      <template v-else #open-indicator="{ attributes }">
         <span v-bind="attributes as Record<string, any>"
           ><ChevronBigDown class="text-current size-6"
         /></span>
@@ -280,10 +317,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  fieldName:{
+  fieldName: {
     type: String,
-    default: 'name',
-  }
+    default: "name",
+  },
 });
 
 const {
@@ -298,7 +335,7 @@ const {
   isStartCaseText,
   isSelectAll,
   required,
-  fieldName
+  fieldName,
 } = toRefs(props);
 const emit = defineEmits([
   "update:modelValue",
@@ -307,7 +344,8 @@ const emit = defineEmits([
   "deselected",
   "search",
   "tag",
-  "selectedOption",'open'
+  "selectedOption",
+  "open",
 ]);
 
 const selectAll = (e: Event) => {
@@ -510,12 +548,9 @@ const selectedLimit = () => {
   }
 };
 
-
-const open=()=>{
-  emit('open')
-
-}
-
+const open = () => {
+  emit("open");
+};
 </script>
 <style lang="scss">
 .scrollbar {

package/src/components/tabs/EUITabs.vue

@@ -6,10 +6,12 @@
       >
         <button
           v-for="(tab, tabindex) in tabs"
+          :disabled="tab?.disabled"
           :key="tabindex"
           :id="`id-${tab.name}`"
           type="button"
           class="[&:not(:focus-visible)]:focus:outline-none relative w-full inline-flex items-center transition-colors duration-100"
+          :class="tab?.disabled?' cursor-not-allowed ':''"
           role="tab"
           tabindex="-1"
           @click="selectTab(tabindex)"
@@ -50,6 +52,8 @@
       >
         <button
           v-for="(tab, tabindex) in tabs"
+          :disabled="tab?.disabled"
+
           :key="tabindex"
           type="button"
           role="tab"
@@ -62,6 +66,7 @@
             activeTabIndex === tabindex
               ? 'border-gray-900 text-gray-900'
               : 'border-transparent text-gray-500',
+              tab?.disabled?' cursor-not-allowed ':''
           ]"
           @click="selectTab(tabindex)"
         >
@@ -76,6 +81,7 @@
     >
       <button
         v-for="(tab, tabindex) in tabs"
+        :disabled="tab?.disabled"
         :key="tabindex"
         type="button"
         role="tab"
@@ -88,6 +94,7 @@
           activeTabIndex === tabindex
             ? 'border-purple-800 text-purple-800 bg-white z-10 rounded-t-lg shadow-[0px_2px_4px_0px_rgba(55,65,81,0.1)]'
             : 'border-transparent text-gray-500 z-0',
+            tab?.disabled?' cursor-not-allowed ':''
         ]"
         @click="selectTab(tabindex)"
       >
@@ -103,15 +110,16 @@
       >
         <button
           v-for="(tab, tabindex) in tabs"
+          :disabled="tab?.disabled"
           :key="tabindex"
           type="button"
           role="tab"
           :id="`id-${tab.name}`"
           class="px-4 py-1 text-sm font-semibold transition-colors duration-150 ease-in-out border rounded-full"
           :class="
-            activeTabIndex === tabindex
+           [ activeTabIndex === tabindex
               ? 'shadow-lg shadow-gray-100 bg-white border-gray-200 focus-within:border-purple-600 text-gray-900'
-              : 'border-white hover:bg-gray-50 text-gray-700'
+              : 'border-white hover:bg-gray-50 text-gray-700',tab?.disabled?' cursor-not-allowed ':'']
           "
           @click="selectTab(tabindex)"
         >
@@ -134,6 +142,7 @@ import { defineProps, ref, watch } from "vue";
 interface Tab {
   name: string;
   content?: string;
+  disabled?:boolean
 }
 
 const props = defineProps<{
@@ -143,6 +152,7 @@ const props = defineProps<{
   contentClass?: string[] | string;
   tabSize?: "sm" | "md";
   tabAlign?: "start" | "justify" | "end";
+  
 }>();
 
 const emit = defineEmits<{

package/dist/EUISelectSearch.vue.d.ts

@@ -1,4 +0,0 @@
-import _sfc_main from "/Volumes/work/repos/edvoy-ui-v2/src/components/selectSearch/EUISelectSearch.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/selectSearch/EUISelectSearch.vue?vue&type=script&setup=true&lang.ts";
-export default _sfc_main;
-//# sourceMappingURL=EUISelectSearch.vue.d.ts.map

package/dist/EUISelectSearch.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUISelectSearch.vue.d.ts","sourceRoot":"","sources":["../src/components/selectSearch/EUISelectSearch.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oHAAoH,CAAC;AAC3I,cAAc,oHAAoH,CAAC;AACnI,eAAe,SAAS,CAAC"}

package/dist/button/EUIButton.vue.d.ts

@@ -1,5 +0,0 @@
-import _sfc_main from "/Volumes/work/repos/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=style&index=0&lang.scss";
-export default _sfc_main;
-//# sourceMappingURL=EUIButton.vue.d.ts.map

package/dist/button/EUIButton.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/button/EUIButton.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wGAAwG,CAAC;AAC/H,cAAc,wGAAwG,CAAC;AACvH,OAAO,sGAAsG,CAAC;AAC9G,eAAe,SAAS,CAAC"}