npm - edvoyui-component-library-test-flight - Versions diffs - 0.0.175 → 0.0.176 - Mend

edvoyui-component-library-test-flight 0.0.175 → 0.0.176

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/library-vue-ts.cjs.js +4 -4
package/dist/library-vue-ts.css +1 -1
package/dist/library-vue-ts.es.js +515 -507
package/dist/library-vue-ts.umd.js +9 -9
package/dist/modal/EUIModal.vue.d.ts +1 -1
package/dist/slideover/EUISlideover.vue.d.ts +1 -1
package/dist/tabs/EUITabs.vue.d.ts +1 -1
package/package.json +1 -1
package/src/components/modal/EUIModal.vue +1 -1
package/src/components/slideover/EUISlideover.vue +1 -1
package/src/components/tabs/EUITabs.vue +91 -55

package/dist/modal/EUIModal.vue.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=script&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=63fa538d&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=e1811799&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIModal.vue.d.ts.map

package/dist/slideover/EUISlideover.vue.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/slideover/EUISlideover.vue?vue&type=script&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/slideover/EUISlideover.vue?vue&type=style&index=0&scoped=694773f1&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/slideover/EUISlideover.vue?vue&type=style&index=0&scoped=d575311b&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUISlideover.vue.d.ts.map

package/dist/tabs/EUITabs.vue.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=c7325a13&lang.css";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=fac4b91a&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITabs.vue.d.ts.map

package/package.json CHANGED Viewed

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

package/src/components/modal/EUIModal.vue CHANGED Viewed

@@ -14,7 +14,7 @@
         @click.self="closeModal"
       >
         <div
-          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-none overflow-hidden cursor-auto backdrop-blur-md"
+          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-none overflow-hidden cursor-auto backdrop-blur-sm"
         ></div>
         <div
           :class="[

package/src/components/slideover/EUISlideover.vue CHANGED Viewed

@@ -10,7 +10,7 @@
         @click.self="closeSlideover"
       >
         <div
-          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-auto overflow-hidden cursor-auto backdrop-blur-md"
+          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-auto overflow-hidden cursor-auto backdrop-blur-sm"
         ></div>
         <div
           :class="[

package/src/components/tabs/EUITabs.vue CHANGED Viewed

@@ -1,56 +1,85 @@
 <template>
   <div>
-      <div
+    <div
       v-if="tabStyle === 'design'"
-      class="inline-flex flex-row items-center justify-start px-[0.25rem] min-h-[34px] mb-0.5 bg-gray-100 rounded-[0.625rem] ring-1 ring-gray-200/75 gap-2 overflow-x-auto scrollbar--hide whitespace-nowrap max-w-full"
-    >
-    <template v-for="(tab, tabindex) in tabs" :key="tabindex">
-      <button
-      type="button"
-      :id="`id-${tab.name}`"
-      :disabled="tab?.disabled"
-      :title="tab?.toolTipText"
-      class="[&:not(:focus-visible)]:focus:outline-none relative w-max inline-flex items-center transition-colors duration-100 h-7"
+      class="inline-flex flex-row items-center justify-start mb-0.5 ring-1 ring-gray-200/75 gap-2 overflow-x-auto scrollbar--hide whitespace-nowrap max-w-full"
       :class="[
-          tab?.disabled ? ' cursor-not-allowed ' : '',
-          isHighlighedActivetab ? ' rounded-t-lg !bg-[#EDE9FE] ' : '',
-          'flex-shrink-0'
-        ]"
-        role="tab"
-        tabindex="-1"
-        @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-0 rounded-lg bg-white ring-1 ring-gray-200/75': activeTabIndex === tabindex,
-          }"
-        />
-        <span
+        tabSize === 'sm'
+          ? 'min-h-[34px] rounded-[0.625rem] px-[0.25rem] bg-gray-100'
+          : 'min-h-10 rounded-3xl px-1.5 ring-inset bg-white',
+      ]"
+    >
+      <template v-for="(tab, tabindex) in tabs" :key="tabindex">
+        <button
+          type="button"
+          :id="`id-${tab.name}`"
+          :disabled="tab?.disabled"
+          :title="tab?.toolTipText"
+          class="[&:not(:focus-visible)]:focus:outline-none relative w-max inline-flex items-center transition-colors duration-100"
           :class="[
-            'w-full px-2 py-1 text-xs tracking-wide z-10 flex items-center justify-start gap-2',
-            activeTabIndex === tabindex
-              ? ' text-gray-800 font-semibold'
-              : ' text-gray-600 font-medium hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
+            tab?.disabled ? ' cursor-not-allowed ' : '',
+            isHighlighedActivetab ? ' rounded-t-lg !bg-[#EDE9FE] ' : '',
+            tabSize === 'sm' ? 'flex-shrink-0 h-7' : 'flex-1 h-7',
           ]"
+          role="tab"
+          tabindex="-1"
+          @click="selectTab(tabindex)"
         >
-          <slot
-            name="title"
-            :tab="tab"
-            :tabIndex="tabindex"
-            :activeTab="activeTabIndex"
+          <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-0': activeTabIndex === tabindex,
+              },
+              activeTabIndex === tabindex
+                ? tabSize === 'sm'
+                  ? 'rounded-lg bg-white ring-1 ring-gray-200/75'
+                  : 'rounded-3xl bg-violet-100'
+                : 'bg-transparent',
+            ]"
+          />
+          <span
+            :class="[
+              'w-full py-1 text-xs tracking-wide z-10 flex items-center justify-start gap-2',
+              activeTabIndex === tabindex
+                ? ' font-semibold'
+                : ' text-gray-600 font-medium hover:text-gray-600 bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
+              activeTabIndex === tabindex
+                ? tabSize === 'sm'
+                  ? 'text-gray-800'
+                  : 'text-violet-500'
+                : '',
+              tabSize === 'sm'
+                ? 'text-xs rounded-lg px-2'
+                : 'text-sm/6 rounded-3xl px-5',
+            ]"
           >
-            {{ tab?.name }}
-          </slot>
-        </span>
-      </button>
-      <div v-if="tabindex !== tabs.length -1" :class="['self-stretch w-px h-4 my-2',
-       tabindex === activeTabIndex - 1 ? 'bg-transparent' : activeTabIndex === tabindex ? 'bg-transparent': 'bg-gray-300']"></div>
-    </template>
+            <slot
+              name="title"
+              :tab="tab"
+              :tabIndex="tabindex"
+              :activeTab="activeTabIndex"
+            >
+              {{ tab?.name }}
+            </slot>
+          </span>
+        </button>
+        <div
+          v-if="tabindex !== tabs.length - 1"
+          :class="[
+            'self-stretch w-px h-4',
+            tabSize === 'sm' ? 'my-2' : 'my-3',
+            tabindex === activeTabIndex - 1
+              ? 'bg-transparent'
+              : activeTabIndex === tabindex
+              ? 'bg-transparent'
+              : 'bg-gray-300',
+          ]"
+        ></div>
+      </template>
     </div>
     <div
       v-else-if="tabStyle === 'border'"
@@ -80,8 +109,10 @@
             ? 'border-gray-900 text-gray-900'
             : 'border-transparent text-gray-500',
           tab?.disabled ? ' cursor-not-allowed ' : '',
-          isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
+          isHighlighedActivetab && activeTabIndex === tabindex
+            ? ' rounded-t-lg !bg-[#EDE9FE]'
+            : '',
+          'flex-shrink-0',
         ]"
         @click="selectTab(tabindex)"
       >
@@ -116,8 +147,10 @@
             ? '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 ' : '',
-          isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
+          isHighlighedActivetab && activeTabIndex === tabindex
+            ? ' rounded-t-lg !bg-[#EDE9FE]'
+            : '',
+          'flex-shrink-0',
         ]"
         @click="selectTab(tabindex)"
       >
@@ -146,8 +179,10 @@
             ? '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',
           tab?.disabled ? ' cursor-not-allowed ' : '',
-          isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
+          isHighlighedActivetab && activeTabIndex === tabindex
+            ? ' rounded-t-lg !bg-[#EDE9FE]'
+            : '',
+          'flex-shrink-0',
         ]"
         @click="selectTab(tabindex)"
       >
@@ -172,8 +207,8 @@
           },
         ]"
       >
-          {{ tabs[activeTabIndex]?.content }}
-        </div>
+        {{ tabs[activeTabIndex]?.content }}
+      </div>
     </slot>
   </div>
 </template>
@@ -207,7 +242,7 @@ const activeTabIndex = ref(props.defaultActiveIndex ?? 0);
 const selectTab = (index: number) => {
   activeTabIndex.value = index;
-  emit("update:defaultActiveIndex", activeTabIndex.value );
+  emit("update:defaultActiveIndex", activeTabIndex.value);
   emit("update:activeTab", props.tabs[activeTabIndex.value]);
 };
@@ -215,8 +250,9 @@ watch(
   () => props.defaultActiveIndex,
   (newIndex) => {
     activeTabIndex.value = newIndex ?? 0;
-  },{
-    immediate:true
+  },
+  {
+    immediate: true,
   }
 );
 </script>