edvoyui-component-library-test-flight 0.0.63 → 0.0.65

package/dist/loader/EUICircleLoader.vue.d.ts

@@ -1,4 +1,4 @@
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/loader/EUICircleLoader.vue?vue&type=style&index=0&scoped=b972fce9&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/loader/EUICircleLoader.vue?vue&type=style&index=0&scoped=080faf4c&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUICircleLoader.vue.d.ts.map

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=bf6ac7d8&lang.css";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=c1f4455c&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.63",
+  "version": "0.0.65",
   "type": "module",
   "files": [
     "dist/",

package/src/components/checkbox/EUICheckbox.vue

@@ -1,5 +1,5 @@
 <template>
- <label class="flex flex-row items-start scale-100 translate-x-0 translate-y-0 eui-checkbox">
+ <label class="flex flex-row items-center scale-100 translate-x-0 translate-y-0 eui-checkbox">
     <input v-model="isChecked" type="checkbox" id="checkbox" class="appearance-none sr-only input-checkbox" :disabled="disabled"
       @change="toggle($event)" />
       <div class="cbx-icon" for="checkbox">

package/src/components/datepicker/EUIDatepicker.vue

@@ -61,12 +61,13 @@
       :dark="false"
       :inline="false"
       :text-input="false"
-      auto-apply
+      :auto-apply="autoApply"
       :hide-input-icon="true"
       position="left"
       :multi-calendars="multiCalendars"
       :min-date="minDate"
       :max-date="maxDate"
+      :config="config"
       />
     </div>
     <EUIErrorMessage :errors="errors" :name="name" />
@@ -131,9 +132,16 @@ const props = defineProps({
   required: Boolean,
   range:Boolean,
   multiCalendars:Boolean,
+  autoApply: {
+    type:Boolean,
+    default: true
+  },
   inputFilled: {
     type:Boolean,
     default: false
+  },
+  config: {
+    type: Object, required: false, default: () => {}
   }
 });
 const emit = defineEmits(["update:modelValue"]);
@@ -193,6 +201,10 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
 </script>
 
 <style lang="scss">
+:root {
+  --dp-menu-width: 232px;
+  --dp-menu-min-width: 232px;
+}
 .dp__theme_light {
     --dp-primary-color: rgba(139, 92, 246, 1);
     --dp-row-margin: 2px 0;

package/src/components/loader/EUICircleLoader.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="flex flex-col items-center justify-center gap-4 size-72 mx-auto">
-        <div class="min-h-16 relative">
+    <div class="flex flex-col items-center justify-center gap-4 mx-auto size-72">
+        <div class="relative min-h-16">
             <div class="circle-loader">
             </div>
         </div>
@@ -17,7 +17,7 @@
     &::before {
         content: "";
         @apply absolute box-border -inset-3 rounded-full border-[0.8rem] border-solid border-violet-600;
-        animation: circleProgress 2s infinite linear;
+        animation: circleProgress 1s infinite linear;
     }
 }
 

package/src/components/table/EUIStudentPagination.vue

@@ -20,7 +20,7 @@
           i === '…'
             ? 'select-none pointer-events-none'
             : currentPage === i
-            ? 'text-black bg-blue-50 ring-2 ring-inset ring-blue-600'
+            ? 'text-black bg-purple-50 ring-2 ring-inset ring-purple-600'
             : 'bg-white text-black',
         ]"
         @click="typeof i === 'number' && changePage(i - 1)"

package/src/components/table/UTable.scss

@@ -6,10 +6,8 @@
     linear-gradient(to left, rgba(223, 231, 242, 1), rgba(255, 255, 255, 0)),
     linear-gradient(to top, white, rgba(255, 255, 255, 0)),
     linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(223, 231, 242, 1));
-  background-position: left center, right center, left center, right center,
-    left bottom, left bottom;
-  background-size: 30px 100%, 30px 100%, 20px 100%, 20px 100%, 100% 100px,
-    100% 20px;
+  background-position: left center, right center, left center, right center, left bottom, left bottom;
+  background-size: 30px 100%, 30px 100%, 20px 100%, 20px 100%, 100% 100px, 100% 20px;
   background-attachment: local, local, scroll, scroll, local, scroll;
 
   .table {
@@ -38,14 +36,14 @@
           transition: all 0.15s ease-out;
           @apply bg-purple-50;
           td {
-            @apply border-purple-500 border-t first:rounded-l-sm last:rounded-r-sm border-r-gray-200 last:border-r-purple-500 transition-colors duration-100 ease-in font-medium text-gray-900 bg-purple-50;
+            @apply first:rounded-l-sm last:rounded-r-sm transition-colors duration-100 ease-in text-gray-900 bg-purple-50;
              &:first-of-type.checkable {
               @apply bg-purple-50;
             }
           }
         }
         td {
-          @apply relative text-sm text-gray-900 border-b border-solid break-words flex items-center border-0 first:border-l border-r border-gray-100 py-1.5 px-3 h-12;
+          @apply relative text-sm font-medium text-gray-600 border-b border-solid break-words flex items-center border-0 first:border-l border-r border-gray-100 py-1.5 px-3 h-12;
            &:first-of-type.checkable {
             @apply w-[45px] text-center sticky left-0 top-0 z-[11] bg-white;
           }

package/src/components/table/UTable.vue

@@ -16,11 +16,10 @@
           <EUICircleLoader />
         </div>
       </div>
-      <div v-else class="relative max-w-screen-xl mx-auto overflow-hidden">
+      <div v-else class="relative max-w-full mx-auto overflow-hidden">
         <div
-          id="euitable-comp"
           :class="[
-            'ui-table scrollbar--thin overscroll-none',
+            'ui-table scrollbar--hide overscroll-none',
             computedItems.length === 0
               ? 'overflow-hidden pointer-events-none'
               : 'overflow-auto',

package/src/components/tabs/EUITabs.vue

@@ -8,13 +8,13 @@
          v-for="(tab, tabindex) in tabs"
           :key="tabindex"
           type="button"
-          class="[&:not(:focus-visible)]:focus:outline-none relative w-full inline-flex items-center"
+          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)"
         >
           <div
-            class="pointer-events-none absolute inset-0 rounded-full transition-transform duration-300 transform z-[1] ease-in-out"
+            class="pointer-events-none absolute inset-0 transition-transform duration-200 transform z-[1] ease-in-out"
             :class="{
               'translate-x-full':
                 tabindex < activeTabIndex,
@@ -29,7 +29,7 @@
               '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 delay-100 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">
@@ -42,17 +42,17 @@
     <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"
-        class="px-3 py-1 text-sm font-semibold leading-5 transition-all duration-150 ease-in-out border-b-2 hover:text-gray-800"
-        :class="
-          activeTabIndex === tabindex
+        :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'
-        "
+            : 'border-transparent text-gray-500']"
         @click="selectTab(tabindex)"
       >
         <slot name="title" :tab="tab">
@@ -101,7 +101,9 @@ const props = defineProps<{
   tabs: Tab[];
   defaultActiveIndex?: number;
   tabStyle: "rounded" | "border" | 'design' ,
-  contentClass?: string[] | string
+  contentClass?: string[] | string,
+  tabSize?: "sm" | "md",
+  tabAlign?: 'start' | 'justify' | 'end'
 }>();
 
 const emit = defineEmits<{

package/src/components/tabs/EUItabs.stories.ts

@@ -12,6 +12,18 @@ const meta = {
       control: "select",
       options: ["rounded", "border", "design"],
     },
+    tabSize: {
+      control: "select",
+      options: ["sm", "md"],
+      description:
+        "<mark>[:tabStyle='border']</mark> Only available tabSize variation",
+    },
+    tabAlign: {
+      control: "select",
+      options: ["start", "justify", "end"],
+      description:
+        "<mark>[:tabStyle='border']</mark> Only available tabAlign variation",
+    },
     tabs: {
       control: "object",
     },
@@ -34,6 +46,8 @@ export const DefaultRoundedTab: Story = {
     tabs: tabData,
     tabStyle: "rounded",
     defaultActiveIndex: 0, // Set default active index to 1 (second tab)
+    tabSize: "sm",
+    tabAlign: "start",
   },
   render: (args) => ({
     components: { EUItabs },