edvoyui-component-library-test-flight 0.0.235 → 0.0.237

package/dist/components/datepicker/EUIDatepicker.vue

@@ -276,10 +276,11 @@ const clearIconRight = computed(() =>
   --dp-primary-color: rgba(139, 92, 246, 1);
   --dp-row-margin: 2px 0;
   --dp-cell-size: 36px;
+  --dp-disabled-color: theme("colors.gray.100");
 }
 
 .eui-datepicker {
-  @apply min-w-56;
+  @apply min-w-44;
   .dp__main {
     .dp__input {
       @apply pb-2 pt-6 border-0 transition-colors duration-100 ease-in-out text-sm font-medium leading-6 placeholder:text-gray-400 placeholder:font-normal;
@@ -337,4 +338,7 @@ const clearIconRight = computed(() =>
 .dp__calendar_row {
   margin: var(--dp-row-margin);
 }
+.dp__disabled {
+  background: var(--dp-disabled-color)
+}
 </style>

package/dist/components/select/EUISelect.d.ts

@@ -107,6 +107,11 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         required: false;
         default: boolean;
     };
+    readonly: {
+        type: PropType<boolean>;
+        required: false;
+        default: boolean;
+    };
     isStartCaseText: {
         type: PropType<boolean>;
         required: false;
@@ -268,6 +273,11 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         required: false;
         default: boolean;
     };
+    readonly: {
+        type: PropType<boolean>;
+        required: false;
+        default: boolean;
+    };
     isStartCaseText: {
         type: PropType<boolean>;
         required: false;
@@ -354,6 +364,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     required: boolean;
     modelValue: string | unknown[] | Record<string, any>;
     placeholder: string;
+    readonly: boolean;
     inputFilled: boolean;
     className: string[];
     value: string | unknown[] | Record<string, any>;

package/dist/components/select/EUISelect.vue

@@ -23,10 +23,11 @@
       :push-tags="pushtags"
       :deselect-from-dropdown="true"
       append-to-body
-      :searchable="searchable"
+      :searchable="readonly ? false : searchable"
       :calculate-position="withPopper"
       :loading="loading"
       :disabled="disabled"
+      :aria-readonly="readonly"
       :selectable="selectedLimit"
       class="eui-style"
       :class="[
@@ -34,11 +35,11 @@
           ? '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-xl min-h-14' : 'rounded-md min-h-10',
-        'group relative w-full bg-white cursor-pointer overflow-hidden',
-        { 'opacity-75': disabled },
+        'group relative w-full cursor-pointer overflow-hidden',
+        disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white',
         className,
       ]"
-      :clearable="clearable"
+      :clearable="readonly ? false : clearable"
       :no-drop="nodropDown"
       :components="customComponents"
       @search="search($event)"
@@ -58,8 +59,9 @@
           :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 bg-white ml-px group-focus-within:top-3.5 group-focus-within:py-0 group-focus-within:h-auto group-focus-within:text-xs group-focus-within:w-max w-[88%] group-focus-within:-translate-y-1/2 group-focus-within:text-gray-400',
-            disabled ? ' cursor-not-allowed' : '',
+              : 'top-1/2 text-sm text-gray-700 h-14 pt-5 pb-4 ring-0 ring-gray-200 ml-px group-focus-within:top-3.5 group-focus-within:py-0 group-focus-within:h-auto group-focus-within:text-xs group-focus-within:w-max w-[88%] group-focus-within:-translate-y-1/2 group-focus-within:text-gray-400',
+            !inputValue && (disabled ? 'bg-gray-100' : 'bg-white'),
+            disabled ? 'cursor-not-allowed' : !inputValue && 'cursor-pointer',
             required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
           ]"
           class="absolute pointer-events-none 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-xl 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]"
@@ -93,22 +95,33 @@
           :class="
             isUseCustomSelect
               ? 'break-words flex items-start'
-              : 'flex items-center'
+              : 'flex items-center min-w-0 max-w-full overflow-hidden'
           "
         >
           <img
             v-if="
               name == 'country' ? getFlag({ nameText:item[fieldName], iconlink:(item as any)?.iconlink }) : (item as any)?.iconlink
             "
-            :class="isUseCustomSelect ? 'w-6 mr-1 flex-initial' : 'w-6 mr-2'"
+            :class="
+              isUseCustomSelect
+                ? 'w-6 mr-1 flex-initial'
+                : 'w-6 mr-2 flex-shrink-0'
+            "
             :src="
               name == 'country' ? getFlag({ nameText:item[fieldName], iconlink:(item as any)?.iconlink }) : (item as any)?.iconlink
             "
             :alt="item[fieldName]"
           />
-          {{
-            isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
-          }}
+          <span
+            :class="!isUseCustomSelect && 'block min-w-0 truncate'"
+            :title="
+              !isUseCustomSelect ? String(item[fieldName] ?? '') : undefined
+            "
+          >
+            {{
+              isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
+            }}
+          </span>
         </div>
       </template>
 
@@ -118,7 +131,7 @@
         <!-- Passing the 'option' data -->
       </template>
       <template v-else #option="item">
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 break-words whitespace-normal">
           <img
             v-if="(item as any).iconlink"
             class="flex-shrink-0 size-6"
@@ -396,6 +409,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  readonly: {
+    type: Boolean as PropType<boolean>,
+    required: false,
+    default: false,
+  },
   isStartCaseText: {
     type: Boolean as PropType<boolean>,
     required: false,
@@ -495,6 +513,10 @@ const isCheckedAll = (e: Event) => {
 const isShowDropdown = ref(false);
 
 const dropdownShouldOpen = (VueSelect: any) => {
+  if (props.readonly) {
+    isShowDropdown.value = false;
+    return false;
+  }
   isShowDropdown.value = VueSelect.open;
   return VueSelect.open;
 };
@@ -716,6 +738,7 @@ const slectedChipHeight = computed(() =>
 const dropDownIcon = computed(() => (props.clearable ? "flex" : "none"));
 
 const selectBG = computed(() => {
+  if (props.disabled) return "var(--vs-disabled-bg)";
   if (selected.value?.length === 0 || !!_.isEmpty(selected.value)) {
     return "#ffffff";
   }
@@ -831,7 +854,7 @@ const open = () => {
 :root {
   --vs-dropdown-color: theme("colors.gray.600");
   --vs-dropdown-option--active-color: theme("colors.white");
-  --vs-disabled-bg: theme("colors.white");
+  --vs-disabled-bg: theme("colors.gray.100");
 }
 .scrollbar {
   &--hide {
@@ -929,6 +952,16 @@ const open = () => {
   }
 }
 
+.v-select.vs--single:not(.customselect) {
+  .vs__selected-options {
+    @apply min-w-0 flex-nowrap overflow-hidden;
+  }
+
+  .vs__selected {
+    @apply min-w-0 max-w-full overflow-hidden;
+  }
+}
+
 .vs__selected-options {
   @apply group-focus:bg-transparent focus-within:bg-transparent border-transparent;
   background-color: v-bind(selectBG);