edvoyui-component-library-test-flight 0.0.112 → 0.0.114

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

@@ -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=c12052b6&lang.css";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=e35126f7&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITabs.vue.d.ts.map

package/package.json

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

package/src/components/HelloWorld.vue

@@ -1,13 +1,13 @@
 <template>
-  <h1
+ <div class="max-w-screen-xl mx-auto bg-white">
+   <h1
     class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-8 decoration-green-400 decoration-wavy"
   >
     Edvoy User Interface
   </h1>
+ </div>
  <!-- <div class="ml-[200px]">
- <EUISearchExpand
-                
-                  v-model:model-value="searchInput"
+ <EUISearchExpand v-model:model-value="searchInput"
                   :search-sync="showSearch"
                   @input="seachStudent($event?.target?.value)"
                   @update:modelValue="seachStudent($event?.target?.value)"
@@ -15,6 +15,7 @@
 
 </template>
 <script setup lang="ts">
+
 // import { ref } from 'vue';
 
 // import EUISearchExpand from './searchexpand/EUISearchExpand.vue'
@@ -469,6 +470,20 @@
             {{ activeTab }}
           </template>
         </EUITabs>
+
+        <div class="bg-white">
+    <EUITabs tab-style="design" :tabs="tabData" :defaultActiveIndex="0">
+          <template #title="{ tab,tabIndex, activeTab }">
+            {{ tab.name }}
+            <span class="rounded-3xl px-1.5 text-xss font-medium uppercase leading-none inline-flex items-center h-4 transition-colors duration-100 ease-in-out" :class="[tabIndex === activeTab ? 'text-gray-100 bg-gray-600' : 'bg-gray-300 text-gray-600']">{{ 28399 }}</span>
+          </template>
+          <template #content="{ activeTab }">
+           <div class="p-2 text-sm">
+             {{ activeTab }}
+           </div>
+          </template>
+        </EUITabs>
+  </div>
       </div>
 
       <div

package/src/components/tabs/EUITabs.vue

@@ -2,35 +2,37 @@
   <div>
     <div
       v-if="tabStyle === 'design'"
-      class="flex flex-row items-center justify-between w-full p-2 bg-gray-100 rounded-xl"
+      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"
     >
+    <template v-for="(tab, tabindex) in tabs" :key="tabindex">
       <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 ' : ''"
+      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="[
+          tab?.disabled ? ' cursor-not-allowed ' : '',
+          isHighlighedActivetab ? ' rounded-t-lg !bg-[#EDE9FE] ' : '',
+        ]"
         role="tab"
         tabindex="-1"
         @click="selectTab(tabindex)"
-        :title="tab?.toolTipText"
       >
         <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-gray-600': activeTabIndex === tabindex,
+            'translate-x-0 rounded-lg bg-white ring-1 ring-gray-200/75': activeTabIndex === tabindex,
           }"
         />
         <span
           :class="[
-            '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',
+            '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',
           ]"
         >
           <slot
@@ -43,6 +45,11 @@
           </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>
+
     </div>
     <div
       v-else-if="tabStyle === 'border'"
@@ -72,6 +79,7 @@
             ? 'border-gray-900 text-gray-900'
             : 'border-transparent text-gray-500',
           tab?.disabled ? ' cursor-not-allowed ' : '',
+          isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
         ]"
         @click="selectTab(tabindex)"
       >
@@ -106,6 +114,7 @@
             ? '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]' : '',
         ]"
         @click="selectTab(tabindex)"
       >
@@ -135,6 +144,7 @@
             ? '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]' : '',
         ]"
         @click="selectTab(tabindex)"
       >
@@ -182,6 +192,7 @@ const props = defineProps<{
   contentClass?: string[] | string;
   tabSize?: "sm" | "md";
   tabAlign?: "start" | "justify" | "end";
+  isHighlighedActivetab?: boolean;
 }>();
 
 const emit = defineEmits<{

package/src/data/tab.ts

@@ -1,13 +1,13 @@
 export default [
   {
-    name: "About",
+    name: "Supporting Documents",
     active: true,
     content:
       "About Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
     priority: "Choose the status and priority for this student",
   },
   {
-    name: "Application",
+    name: "English Proofs",
     active: false,
     content:
       "Application Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
@@ -17,17 +17,24 @@ export default [
     },
   },
   {
-    name: "Notes",
+    name: "Deposits",
     active: false,
     content:
       "Notes Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
     notes: "Here you can add some notes for yourself!",
   },
   {
-    name: "Task",
+    name: "Interview",
     active: false,
     content:
       "Task Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
     task: "You can add your tasks here!",
   },
+  {
+    name: "Pre-requisite Course",
+    active: false,
+    content:
+      "Pre-requisite Course Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
+    task: "You can add your tasks here!",
+  },
 ];