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

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/tabs/EUITabs.vue

@@ -1,28 +1,27 @@
 <template>
   <div>
-    <div
-      v-if="tabStyle === 'design'"
+    <div class="overflow-x-scroll">
+      <div
+        v-if="tabStyle === 'design'"
         class="flex flex-row items-center justify-between w-full p-2 bg-gray-100 rounded-xl"
       >
         <button
-         v-for="(tab, tabindex) in tabs"
+          v-for="(tab, tabindex) in tabs"
           :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"
           role="tab"
           tabindex="-1"
-         @click="selectTab(tabindex)"
+          @click="selectTab(tabindex)"
         >
           <div
             class="pointer-events-none absolute inset-0 transition-transform duration-200 transform z-[1] ease-in-out"
             :class="{
-              'translate-x-full':
-                tabindex < activeTabIndex,
-              '-translate-x-full':
-                tabindex > activeTabIndex,
+              'translate-x-full': tabindex < activeTabIndex,
+              '-translate-x-full': tabindex > activeTabIndex,
               'translate-x-0 rounded-lg bg-gray-600':
-                activeTabIndex === tabindex
+                activeTabIndex === tabindex,
             }"
           />
           <span
@@ -30,59 +29,69 @@
               'w-full px-4 py-2 text-sm tracking-wide font-medium capitalize z-10',
               activeTabIndex == tabindex
                 ? ' text-white'
-                : ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center'
+                : ' text-gray-500 hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
             ]"
           >
+            <slot name="title" :tab="tab">
+              {{ tab?.name }}
+            </slot>
+          </span>
+        </button>
+      </div>
+      <div
+        v-else-if="tabStyle === 'border'"
+        class="flex items-center gap-1 before:bottom-0 before:left-0 before:absolute before:content-[''] before:h-px before:w-full before:bg-gray-200 relative before:-z-[1] z-0 bg-white"
+        :class="[
+          tabAlign === 'justify'
+            ? 'justify-between'
+            : tabAlign === 'end'
+            ? 'justify-end'
+            : 'justify-start',
+        ]"
+      >
+        <button
+          v-for="(tab, tabindex) in tabs"
+          :key="tabindex"
+          role="tab"
+          :id="`id-${tab.name}`"
+          :class="[
+            'px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800',
+            tabSize === 'sm'
+              ? 'text-sm font-semibold border-b-2'
+              : 'text-base font-bold border-b-[3px]',
+            activeTabIndex === tabindex
+              ? 'border-gray-900 text-gray-900'
+              : 'border-transparent text-gray-500',
+          ]"
+          @click="selectTab(tabindex)"
+        >
           <slot name="title" :tab="tab">
             {{ tab?.name }}
           </slot>
-        </span>
         </button>
       </div>
-
-    <div
-      v-else-if="tabStyle === 'border'"
-      class="flex items-center gap-1 before:bottom-0 before:left-0 before:absolute before:content-[''] before:h-px before:w-full before:bg-gray-200 relative before:-z-[1] z-0 bg-white"
-      :class="[tabAlign === 'justify' ? 'justify-between' : tabAlign === 'end' ? 'justify-end' : 'justify-start']"
-    >
-      <button
-        v-for="(tab, tabindex) in tabs"
-        :key="tabindex"
-        role="tab"
-        :id="`id-${tab.name}`"
-        :class="['px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800',
-        tabSize === 'sm' ? 'text-sm font-semibold border-b-2' : 'text-base font-bold border-b-[3px]',
-        activeTabIndex === tabindex
-            ? 'border-gray-900 text-gray-900'
-            : 'border-transparent text-gray-500']"
-        @click="selectTab(tabindex)"
-      >
-        <slot name="title" :tab="tab">
-          {{ tab?.name }}
-        </slot>
-      </button>
-    </div>
-    <div
-      v-else
-      class="flex items-center gap-1 p-2 transition-all duration-100"
-    >
-      <button
-        v-for="(tab, tabindex) in tabs"
-        :key="tabindex"
-        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
-            ? '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'
-        "
-        @click="selectTab(tabindex)"
+      <div
+        v-else
+        class="flex items-center gap-1 p-2 transition-all duration-100"
       >
-        <slot name="title" :tab="tab">
-          {{ tab?.name }}
-        </slot>
-      </button>
+        <button
+          v-for="(tab, tabindex) in tabs"
+          :key="tabindex"
+          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
+              ? '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'
+          "
+          @click="selectTab(tabindex)"
+        >
+          <slot name="title" :tab="tab">
+            {{ tab?.name }}
+          </slot>
+        </button>
+      </div>
     </div>
     <div :class="['py-2 text-base font-normal text-gray-700', contentClass]">
       <slot name="content" :active-tab="tabs[activeTabIndex]">
@@ -103,10 +112,10 @@ interface Tab {
 const props = defineProps<{
   tabs: Tab[];
   defaultActiveIndex?: number;
-  tabStyle: "rounded" | "border" | 'design' ,
-  contentClass?: string[] | string,
-  tabSize?: "sm" | "md",
-  tabAlign?: 'start' | 'justify' | 'end'
+  tabStyle: "rounded" | "border" | "design";
+  contentClass?: string[] | string;
+  tabSize?: "sm" | "md";
+  tabAlign?: "start" | "justify" | "end";
 }>();
 
 const emit = defineEmits<{
@@ -124,7 +133,6 @@ watch(
   () => props.defaultActiveIndex,
   (newIndex) => {
     activeTabIndex.value = newIndex ?? 0;
-
   }
 );
 </script>

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"}