edvoyui-component-library-test-flight 0.0.24 → 0.0.26

package/src/components/input/EUIInput.vue

@@ -1,38 +1,43 @@
 <template>
   <div>
+    <label
+        v-if="!inputFilled && label"
+        :for="`${name}-${id}`"
+        :class="[
+          'text-xs w-full text-gray-500 cursor-pointer font-medium',
+          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+        ]"
+      >
+        {{ label }}
+      </label>
     <div
-      :class="disabled ? 'pointer-events-none cursor-not-allowed' : ''"
-      class="relative w-full mb-2 overflow-hidden border border-gray-100 cursor-pointer group h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600"
+      :class="[{'pointer-events-none cursor-not-allowed': disabled}, {'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-100': inputFilled}, 'group cursor-pointer relative w-full mb-2 overflow-hidden']"
     >
       <label
+        v-if="inputFilled"
         :for="`${name}-${id}`"
         :class="[
           getIconClass(),
           inputValue
             ? 'top-3.5 text-xs text-gray-400 leading-none cursor-default'
-            : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4 bg-white ring-1 ring-gray-200',
-          disabled ? ' cursor-not-allowed' : '',
+            : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4',
+          disabled ? 'cursor-not-allowed bg-gray-50 z-10' : 'z-0 bg-white',
           required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+          'absolute font-medium left-0 px-4 -translate-y-1/2 duration-300 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 first-letter:capitalize transition-all ease-in-out'
         ]"
-        class="absolute font-medium left-0 px-4 z-0 -translate-y-1/2 duration-200 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0"
       >
-        {{ label }}
+        {{ label || 'Label' }}
       </label>
       <div
         v-if="icon && iconType"
-        class="absolute inset-y-0 flex items-center pointer-events-none"
-        :class="[
-          iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
-          disabled ? 'cursor-not-allowed' : '',
-        ]"
+        :class="['absolute inset-y-0 flex items-center pointer-events-none', iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3', disabled ? 'z-20': '']"
       >
         <component
           :is="icon"
-          class="w-6 h-6 text-gray-400"
+          class="text-gray-400 size-6"
           aria-hidden="true"
         />
       </div>
-
       <input
         :id="`${name}-${id}`"
         ref="input"
@@ -40,8 +45,8 @@
         :value="modelValue"
         :placeholder="placeholder"
         :name="name"
-        class="z-10 block w-full h-full pt-6 pb-3 text-sm font-medium leading-6 appearance-none rounded-2xl placeholder:text-gray-400 focus:outline-none disabled:opacity-75 focus:border-purple-600 autofill:bg-white"
-        :class="[getIconClass(), disabled ? 'cursor-not-allowed' : '']"
+        :class="['z-10 block placeholder:text-gray-400 focus:outline-none text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 transition-all duration-100 border-none outline-none', inputFilled ? 'pt-6 pb-3 rounded-2xl size-full' : 'px-4 py-3 h-10 w-full ring-1 ring-gray-100 focus-within:ring-purple-600 focus-within:ring-2 ring-inset', !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md', disabled ? 'cursor-not-allowed' : 'cursor-text', getIconClass(), !inputFilled && className]"
+
         :required="required"
         :disabled="disabled"
         :readonly="readonly"
@@ -118,6 +123,16 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  inputFilled: {
+    type:Boolean,
+    default: false
+  },
+  rounded:Boolean,
+  className: {
+    type: Array as PropType<string[]>,
+    required: false,
+    default: () => [],
+  },
 });
 
 const hasFocus = ref(false);

package/src/components/modal/EUIModal.vue

@@ -7,7 +7,7 @@
         @click.self="closeModal"
       >
         <div
-          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-none overflow-hidden"
+          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/50 pointer-events-none overflow-hidden"
         ></div>
         <div
           class="bg-white shadow-lg max-w-lg w-full max-h-[calc(100svh-3rem)] md:h-auto overflow-hidden relative"
@@ -20,13 +20,13 @@
           </template>
           <div
             v-else
-            class="flex items-center justify-between font-medium text-gray-700"
+            class="flex flex-row items-center justify-between font-medium text-gray-700"
             :class="slimHeader ? 'p-4 text-base' : 'p-6 text-lg'"
           >
             <h3 class="text-xl font-semibold">
               <slot name="title">{{ title || "Modal Title" }}</slot>
             </h3>
-            <div>
+            <div v-if="visibleClose" class="flex-initial">
               <button
                 type="button"
                 class="flex items-center justify-center text-gray-400 bg-white hover:bg-gray-50 rounded-3xl hover:text-gray-600 size-8"
@@ -104,6 +104,10 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    visibleClose: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ["update:isVisible", "confirm"],
   methods: {
@@ -131,33 +135,26 @@ export default defineComponent({
 <style lang="scss" scoped>
 .modal-enter-active,
 .modal-leave-active {
-  transition: opacity 0.5s ease, transform 0.5s ease;
+  transition: opacity 0.3s ease, transform 0.3s ease;
 }
 .modal-enter-from,
 .modal-leave-to {
-  opacity: 0;
-  transform-origin: top;
-  transform: translateY(40%) scale(0.4);
+  @apply opacity-0;
 }
 .modal-enter-to,
 .modal-leave-from {
-  opacity: 1;
-  transform-origin: top center;
-  transform: translateY(0%) scale(1);
+ @apply opacity-100;
 }
 
 .backdrop {
-  transition: opacity 0.6s ease, transform 0.6s ease;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .modal-enter-from .backdrop,
 .modal-leave-to .backdrop {
-  transform: scale(0.3) rotate3d(0.5, 1, 0, 60deg);
-  opacity: 0;
+  @apply opacity-0;
 }
 .modal-enter-to .backdrop,
 .modal-leave-from .backdrop {
-  // transform: scale(0.8) rotate3d(0.5, 0, 0, 90deg); //rotate effect
-  transform: scale(1) rotate3d(0, 0, 0, 90deg); // fade effect only
-  opacity: 0.2;
+  @apply opacity-100;
 }
 </style>

package/src/components/select/EUISelect.stories.ts

@@ -25,6 +25,15 @@ const meta = {
       description:
         "Object containing validation errors where keys are field names and values are the error messages.",
     },
+    inputFilled: {
+      control: "boolean",
+      description: "Toggles the alternate Select input Filled design.",
+      defaultValue: false,
+      table: {
+        type: { summary: "Boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
   },
 } satisfies Meta<typeof EUISelect>;
 
@@ -35,8 +44,8 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     name: "country",
-    label: "country",
-    placeholder: "country",
+    label: "Country Name",
+    placeholder: "select country",
     items: [
       { value: "usa", label: "United States", name: "United States" },
       { value: "canada", label: "Canada", name: "Canada" },
@@ -44,6 +53,43 @@ export const Default: Story = {
     ],
     modelValue: { value: "usa", label: "United States", name: "United States" },
     errors: {},
-    required: true,
+    required: false,
   },
+  render: (args) => ({
+    components: { EUISelect },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-xs"><EUISelect v-bind="args" /></div>',
+  }),
 };
+
+export const inputFilled: Story = {
+  args: {
+    name: "country",
+    label: "Country Name",
+    placeholder: "select country",
+    items: [
+      { value: "usa", label: "United States", name: "United States" },
+      { value: "canada", label: "Canada", name: "Canada" },
+      { value: "uk", label: "United Kingdom", name: "United Kingdom" },
+    ],
+    modelValue: [],
+    errors: {},
+    inputFilled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Toggles the alternate Select Filled design.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { EUISelect },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-xs"><EUISelect v-bind="args" /></div>',
+  }),
+};

package/src/components/select/EUISelect.vue

@@ -1,5 +1,14 @@
 <template>
   <div :class="isUseCustomSelect ? 'isUseCustomSelect' : ''">
+    <label
+      v-if="!inputFilled && label"
+      :class="[
+        'text-xs w-full text-gray-500 cursor-pointer font-medium block mb-1',
+        required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+      ]"
+    >
+      {{ label }}
+    </label>
     <vSelect
       v-model="selected"
       :filter="isFussySeach ? fuseSearch : undefined"
@@ -18,7 +27,14 @@
       :loading="loading"
       :disabled="disabled"
       :selectable="selectedLimit"
-      :class="[ isUseCustomSelect ? 'customselect' : 'rounded-2xl border border-gray-200 focus-within:border-purple-600 focus-within:ring-inset focus-within:ring-1 focus-within:ring-purple-600 z-10 focus-within:rounded', disabled ? 'opacity-25' : '', 'group relative min-h-14 w-full bg-white cursor-pointer overflow-hidden' ]"
+      :class="[
+        isUseCustomSelect
+          ? 'customselect'
+          : 'border border-gray-200 focus-within:border-purple-600 focus-within:ring-inset focus-within:ring-1 focus-within:ring-purple-600 z-10 focus-within:rounded',
+        inputFilled ? 'rounded-2xl min-h-14' : 'rounded-md min-h-10',
+        'group relative w-full bg-white cursor-pointer overflow-hidden',
+        { 'opacity-25': disabled },
+      ]"
       :clearable="isUseCustomSelect ? clearable : undefined"
       :no-drop="nodropDown"
       @search="search($event)"
@@ -26,18 +42,18 @@
       @option:deselected="deselected($event)"
       @option:created="handleOptionCreate"
     >
-      <template #header>
+      <template v-if="inputFilled" #header>
         <div
           :class="[
             inputValue
               ? 'top-3.5 text-xs text-gray-400 cursor-default max-w-max'
-              : 'top-1/2 text-sm text-gray-700 cursor-pointer h-14 pt-5 pb-4 bg-transparent ring-0 ring-gray-200 group-hover:top-3.5 group-hover:py-0 group-hover:h-auto bg-white group-hover:text-xs group-hover:min-w-max w-11/12 group-hover:-translate-y-1/2 group-hover:text-gray-400',
+              : 'top-1/2 text-sm text-gray-700 cursor-pointer h-14 pt-5 pb-4 bg-transparent ring-0 ring-gray-200 group-hover:top-3.5 group-hover:py-0 group-hover:h-auto bg-white group-hover:text-xs group-hover:w-max w-11/12 group-hover:-translate-y-1/2 group-hover:text-gray-400',
             disabled ? ' cursor-not-allowed' : '',
             required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
           ]"
           class="absolute text-left font-medium inset-x-0 px-4 z-10 -translate-y-1/2 duration-200 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 capitalize leading-[normal]"
         >
-          {{ startCaseText(label) }}
+          {{ startCaseText(label) || "Select" }}
         </div>
       </template>
       <template #selected-option="{ name: nameText, iconlink }">
@@ -90,6 +106,11 @@
           </button>
         </div>
       </template>
+      <template #open-indicator="{ attributes }">
+        <span v-bind="attributes as Record<string, any>"
+          ><ChevronBigDown class="text-current size-6"
+        /></span>
+      </template>
     </vSelect>
     <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
   </div>
@@ -111,8 +132,8 @@ import {
   toRefs,
   watch,
 } from "vue";
-import "./EUISelect.scss";
 import { ValidationErrors } from "../../utils/types";
+import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
 
 type VirtualElement = {
   getBoundingClientRect: () => ClientRect | DOMRect;
@@ -146,7 +167,7 @@ const props = defineProps({
     default: "",
     required: false,
   },
-  customOffset:{
+  customOffset: {
     type: Array as PropType<any>,
     required: false,
   },
@@ -170,7 +191,7 @@ const props = defineProps({
   },
   label: {
     type: String,
-    default: "Select an option...",
+    default: "",
     required: false,
   },
   searchLabel: {
@@ -198,10 +219,10 @@ const props = defineProps({
     required: false,
     default: false,
   },
-  multipleLimit:{
+  multipleLimit: {
     type: Number,
     required: false,
-    default: false
+    default: false,
   },
   disabled: {
     type: Boolean as PropType<boolean>,
@@ -252,6 +273,10 @@ const props = defineProps({
     required: false,
     default: true,
   },
+  inputFilled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const {
@@ -302,7 +327,7 @@ const deselected = (newValue: any) => {
   }
 };
 
-watch(modelValue, (newValue:any) => {
+watch(modelValue, (newValue: any) => {
   selected.value = newValue;
 });
 
@@ -311,8 +336,8 @@ const search = (x: string) => {
   emit("search", x);
 };
 
-const selectWidth = computed(() => props.customWidth)
-const offsetValue = computed(() => props.customOffset)
+const selectWidth = computed(() => props.customWidth);
+const offsetValue = computed(() => props.customOffset);
 
 const withPopper = (
   dropdownList: HTMLElement,
@@ -320,10 +345,10 @@ const withPopper = (
   { width }: any
 ) => {
   const newwidth = selectWidth.value || width; //setcustom width '400px'
-  const newOffset = offsetValue.value || [0,3]; //setcustom Offset '[123, -1]'
+  const newOffset = offsetValue.value || [0, 7]; //setcustom Offset '[123, -1]'
   const customWidth = isUseCustomSelect.value ? newwidth : width;
   dropdownList.style.width = customWidth;
-  const offsetValues = isUseCustomSelect.value ? newOffset : [0, 3];
+  const offsetValues = isUseCustomSelect.value ? newOffset : [0, 7];
   const popper = createPopper(component.$refs.toggle, dropdownList, {
     placement: "bottom",
     modifiers: [
@@ -360,7 +385,13 @@ onBeforeUnmount(() => {
 
 const slectedChipbg = computed(() => (props.multiple ? "#f3e8ff" : ""));
 const slectedChiptextColor = computed(() => (props.multiple ? "#7e22ce" : ""));
-const slectedChipHeight = computed(() => (props.multiple ? "fit-content" : ""));
+const slectedChipHeight = computed(() =>
+  props.multiple && props.inputFilled
+    ? "fit-content"
+    : props.inputFilled
+    ? ""
+    : "auto"
+);
 
 const dropDownIcon = computed(() => (props.clearable ? "flex" : "none"));
 
@@ -372,17 +403,17 @@ const selectBG = computed(() => {
 });
 const selectHeight = computed(() => {
   if (selected.value?.length === 0 || _.isEmpty(selected.value)) {
-    return "54px";
+    return props.inputFilled ? "54px" : "36px";
   }
 
   let heightValue;
 
   if (props.multiple) {
-    heightValue = "32px";
+    heightValue = props.inputFilled ? "32px" : "0px";
   } else if (isUseCustomSelect.value) {
     heightValue = "fit-content";
   } else {
-    heightValue = "54px";
+    heightValue = props.inputFilled ? "40px" : "30px";
   }
 
   return heightValue;
@@ -396,15 +427,28 @@ const selectedMultiple = computed(() => {
   let heightValue;
 
   if (isUseCustomSelect.value || props.multiple) {
-    heightValue = "24px";
+    heightValue = props.inputFilled ? "24px" : "4px";
   } else {
-    heightValue = "2px";
+    heightValue = props.inputFilled ? "12px" : "2px";
   }
 
   return heightValue;
 });
 
-const selectFocus = computed(() => (props.multiple ? "8px" : "8px"));
+const selectFocus = computed(() =>
+  props.multiple && props.inputFilled
+    ? "8px"
+    : props.inputFilled
+    ? "8px"
+    : "0px"
+);
+const searchMargin = computed(() =>
+  props.multiple && props.inputFilled
+    ? "10px"
+    : props.inputFilled
+    ? "10px"
+    : "0px"
+);
 
 const selectRequited = computed(() =>
   props.required
@@ -435,7 +479,8 @@ const inputValue = computed(() => {
   const selectedValue = selected.value;
   if (modelValue) return true;
   if (Array.isArray(selectedValue)) return !!selectedValue.length;
-  if (selectedValue && typeof selectedValue === 'object') return !!Object.keys(selectedValue).length;
+  if (selectedValue && typeof selectedValue === "object")
+    return !!Object.keys(selectedValue).length;
   return !!selectedValue;
 });
 
@@ -444,17 +489,18 @@ const handleOptionCreate = (e: any) => {
 };
 
 const isSelectable = computed(() => {
-  return !props.multipleLimit || (selected.value?.length ?? 0) < props.multipleLimit;
+  return (
+    !props.multipleLimit || (selected.value?.length ?? 0) < props.multipleLimit
+  );
 });
 
-const selectedLimit = () =>  {
-  if(!props.multipleLimit) return true
+const selectedLimit = () => {
+  if (!props.multipleLimit) return true;
 
-  if(props.multipleLimit) {
-    return isSelectable.value
+  if (props.multipleLimit) {
+    return isSelectable.value;
   }
-}
-
+};
 
 // const handlers = (e: Event) => {
 //   console.log("@e", e);
@@ -492,9 +538,6 @@ const selectedLimit = () =>  {
   }
 }
 
-.vs__search:focus {
-  padding-top: v-bind(selectFocus);
-}
 .vs--single.vs--open .vs__selected,
 .vs--single.vs--loading .vs__selected {
   @apply opacity-0;
@@ -551,9 +594,11 @@ const selectedLimit = () =>  {
 
 .vs {
   &__search {
-    @apply placeholder-gray-500 placeholder:text-sm placeholder:font-medium placeholder:leading-loose;
+    @apply px-2 placeholder:text-sm placeholder:font-medium placeholder:leading-loose appearance-none;
+    margin-top: v-bind(searchMargin);
     &:focus {
-      @apply text-sm font-medium;
+      @apply text-sm font-medium pl-2.5;
+      padding-top: v-bind(selectFocus);
     }
   }
   &__selected {

package/src/components/table/EUIDashboardTable.vue

@@ -96,7 +96,7 @@
             </template>
           </tbody>
           <tbody v-if="computedItems.length === 0">
-            <tr>
+            <tr class="norecords">
               <td :colspan="headers.length">
                 <div
                   class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
@@ -458,7 +458,7 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
     }
     tbody {
      @apply snap-y snap-mandatory snap-always;
-      tr {
+      tr:not(.norecords)  {
         @apply text-gray-500 transition-all duration-150 rounded-xl bg-white snap-start ease-in-out snap-x snap-mandatory;
         &:hover {
           @apply shadow-[1px_2px_40px_0px_#03022912] ring-1 ring-gray-100 ring-inset z-30;

package/src/components/table/EUITable.vue

@@ -125,7 +125,7 @@
             </template>
           </tbody>
           <tbody v-if="computedItems.length === 0">
-            <tr>
+            <tr class="norecords">
               <td :colspan="checkable === true ? headers.length + 1 : headers.length">
                 <div
                   class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
@@ -484,7 +484,7 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
 
     tbody {
       @apply snap-y snap-mandatory snap-always;
-      tr {
+        tr:not(.norecords)  {
         @apply text-gray-600 transition-colors duration-100 bg-white snap-start ease-in-out snap-x snap-mandatory rounded-sm h-12;
         &:hover {
           @apply bg-purple-50 ring-1 ring-purple-100 ring-inset;