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

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)"
@@ -396,6 +397,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 +501,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 +726,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 +842,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 {