edvoyui-component-library-test-flight 0.0.243 → 0.0.245

package/dist/components/alerts/EUIAlerts.d.ts

@@ -26,7 +26,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         default: string;
     };
     alertType: {
-        type: PropType<"Default" | "Warning" | "Success" | "Error">;
+        type: PropType<"Default" | "Info" | "Warning" | "Success" | "Error">;
         default: string;
     };
     alertIcon: {
@@ -53,7 +53,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         default: string;
     };
     alertType: {
-        type: PropType<"Default" | "Warning" | "Success" | "Error">;
+        type: PropType<"Default" | "Info" | "Warning" | "Success" | "Error">;
         default: string;
     };
     alertIcon: {
@@ -71,7 +71,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     showAlert: boolean;
     heading: string;
     textMessage: string;
-    alertType: "Success" | "Error" | "Default" | "Warning";
+    alertType: "Success" | "Error" | "Default" | "Info" | "Warning";
     alertIcon: string | Function | Record<string, any>;
     actionItems: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/alerts/EUIAlerts.vue

@@ -7,7 +7,7 @@
     leave-from-class="opacity-100"
     leave-to-class="opacity-0"
   >
-    <div v-if="showAlert" :class="['p-4 rounded-md', alertsClass.bgColor]">
+    <div v-if="showAlert" :class="['px-4 py-4 rounded-lg border border-solid', alertsClass.bgColor]">
       <div
         :class="[closeIcon && !textMessage ? 'items-center pr-2 flex' : 'flex items-start']"
       >
@@ -87,8 +87,10 @@ import {
   CheckCircleIcon,
   XCircleIcon,
   XMarkIcon,
+  InformationCircleIcon
 } from "@heroicons/vue/24/solid";
 
+
 const props = defineProps({
   showAlert: {
     type: Boolean,
@@ -103,7 +105,7 @@ const props = defineProps({
     default: "",
   },
   alertType: {
-    type: String as PropType<"Default" | "Warning" | "Success" | "Error">,
+    type: String as PropType<"Default"  | "Info" | "Warning" | "Success" | "Error">,
     default: "Default",
   },
   alertIcon: {
@@ -127,7 +129,22 @@ const onClose = () => {
 const alertsClass = computed(() => {
   const iconClasses = {
     Default: {
-      bgColor: "bg-blue-50",
+      bgColor: "bg-gray-100 border-gray-200",
+      leftIcon: {
+        icon: InformationCircleIcon,
+        color: "text-gray-600",
+      },
+      titleColor: "text-gray-800",
+      textColor: "text-gray-700",
+      btnPrimary:
+        "bg-gray-700 hover:bg-gray-800 focus:ring-gray-600 focus:ring-offset-gray-50",
+      btnTertiary:
+        "text-gray-500 bg-gray-50 hover:bg-gray-100 focus:ring-gray-600 focus:ring-offset-gray-50",
+      btnClose:
+        "bg-gray-50 text-gray-500 hover:bg-gray-100 focus:ring-gray-600 focus:ring-offset-gray-50",
+    },
+    Info: {
+      bgColor: "bg-blue-50 border-blue-200",
       leftIcon: {
         icon: CheckCircleIcon,
         color: "text-blue-400",
@@ -142,7 +159,7 @@ const alertsClass = computed(() => {
         "bg-blue-50 text-blue-500 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50",
     },
     Warning: {
-      bgColor: "bg-yellow-50",
+      bgColor: "bg-yellow-50 border-orange-200",
       leftIcon: {
         icon: ExclamationTriangleIcon,
         color: "text-yellow-400",
@@ -157,7 +174,7 @@ const alertsClass = computed(() => {
         "bg-yellow-50 text-yellow-500 hover:bg-yellow-100 focus:ring-yellow-600 focus:ring-offset-yellow-50",
     },
     Success: {
-      bgColor: "bg-green-50",
+      bgColor: "bg-green-50 border-green-200",
       leftIcon: {
         icon: CheckCircleIcon,
         color: "text-green-400",
@@ -172,7 +189,7 @@ const alertsClass = computed(() => {
         "bg-green-50 text-green-500 hover:bg-green-100 focus:ring-green-600 focus:ring-offset-green-50",
     },
     Error: {
-      bgColor: "bg-red-50",
+      bgColor: "bg-red-50 border-red-200",
       leftIcon: {
         icon: XCircleIcon,
         color: "text-red-400",

package/dist/components/checkbox/EUICheckbox.d.ts

@@ -28,6 +28,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: BooleanConstructor;
         default: boolean;
     };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: {
         type: PropType<string>;
         required: false;
@@ -56,6 +60,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: BooleanConstructor;
         default: boolean;
     };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: {
         type: PropType<string>;
         required: false;
@@ -70,6 +78,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     name: string;
     errors: Record<string, any>;
     modelValue: boolean;
+    indeterminate: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/checkbox/EUICheckbox.vue

@@ -1,8 +1,16 @@
 <template>
 <div>
    <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)" />
+    <input
+      v-model="isChecked"
+      type="checkbox"
+      id="checkbox"
+      class="appearance-none sr-only input-checkbox"
+      :disabled="disabled"
+      :indeterminate.prop="indeterminate"
+      :aria-checked="indeterminate ? 'mixed' : isChecked"
+      @change="toggle($event)"
+    />
       <div class="cbx-icon" for="checkbox">
         <span>
             <svg width="14px" height="14px">
@@ -45,6 +53,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  indeterminate: {
+    type: Boolean,
+    default: false,
+  },
   label: { type: String as PropType<string>, required: false, default: "" },
 });
 
@@ -56,9 +68,7 @@ watch(isChecked, (newValue) => {
 });
 
 const toggle = ($event: Event) => {
-  if($event) {
-    emit("toggle", isChecked.value);
-  }
+  emit("toggle", ($event.target as HTMLInputElement).checked);
 };
 
 watch(props, (newValue) => {
@@ -97,6 +107,15 @@ watch(props, (newValue) => {
   @apply bg-purple-700 border-purple-700;
 }
 
+.eui-checkbox .input-checkbox:indeterminate + .cbx-icon > span {
+  @apply bg-purple-700 border-purple-700;
+}
+
+.eui-checkbox .input-checkbox:indeterminate + .cbx-icon > span::after {
+  content: '';
+  @apply absolute left-1/2 top-1/2 h-0.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded bg-white;
+}
+
 .eui-checkbox .input-checkbox:checked + .cbx-icon span > svg {
   stroke-dashoffset: 0;
   transition: rotate(8deg);

package/dist/components/datepicker/EUIDatepicker.vue

@@ -17,7 +17,7 @@
           'is-open': isDatepickerOpen,
         },
         inputFilled
-          ? 'overflow-hidden border border-gray-100 cursor-pointer group h-14 rounded-xl eui-datepicker'
+          ? 'overflow-hidden border border-gray-200 cursor-pointer group h-14 rounded-xl eui-datepicker'
           : 'h-10 eui-datepicker normal',
         'relative w-full mb-2',
       ]"
@@ -283,7 +283,7 @@ const clearIconRight = computed(() =>
   @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;
+      @apply pb-2 pt-6 border-0 transition-colors duration-100 ease-in-out text-sm font-medium leading-6 placeholder:text-gray-600 placeholder:font-normal;
       padding-left: v-bind(iconshowLeft);
       padding-right: v-bind(iconshowRight);
     }
@@ -300,7 +300,7 @@ const clearIconRight = computed(() =>
   &.normal {
     .dp__main {
       .dp__input {
-        @apply py-2 ring-1 ring-gray-100;
+        @apply py-2 ring-1 ring-gray-200;
       }
       .dp__input.dp__input_focus {
         @apply ring-2 h-10 rounded-md ring-purple-600;

package/dist/components/searchTagSelect/EUISearchTagSelect.d.ts

@@ -26,6 +26,12 @@ interface Props {
     ignoreDeselect?: boolean;
     popperClasses?: string;
     showCount?: boolean;
+    /** Include an All row for every item in `items` (independent of search). */
+    showSelectAll?: boolean;
+    selectAllLabel?: string;
+    /** Maximum selected tags shown before the More/Less control; 0 shows all. */
+    maxVisibleTags?: number;
+    tagSize?: "sm" | "md" | "lg";
 }
 export type SelectItemKey = string | (string | number)[] | ((item: object, fallback?: any) => any);
 declare function __VLS_template(): {
@@ -199,6 +205,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     ignoreDeselect: boolean;
     popperClasses: string;
     showCount: boolean;
+    showSelectAll: boolean;
+    selectAllLabel: string;
+    maxVisibleTags: number;
+    tagSize: "sm" | "md" | "lg";
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, false, {
     componentRef: HTMLDivElement;
     searchInputRef: import('../../../node_modules/vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../../node_modules/vue').ExtractPropTypes<{

package/dist/components/searchTagSelect/EUISearchTagSelect.vue

@@ -38,6 +38,7 @@
       <button
         v-else-if="!showDropDown && selectedValues.length > 0"
         type="button"
+        :disabled="disabled"
         class="flex items-center justify-between w-full h-10 gap-2 px-4 py-2 text-left bg-white border border-gray-200 border-solid cursor-pointer search-textstyle rounded-3xl"
         @click="handleOpen"
       >
@@ -100,6 +101,30 @@
             aria-activedescendant="listbox-option-3"
             class="space-y-0.5"
           >
+            <li
+              v-if="selectType === 'multiple' && showSelectAll && items.length"
+              role="option"
+              :aria-selected="allItemsSelected"
+              class="mb-2 border-b border-gray-100 pb-2"
+              @click.stop
+            >
+              <EUICheckbox
+                :model-value="allItemsSelected"
+                :indeterminate="someItemsSelected && !allItemsSelected"
+                :disabled="disabled"
+                :class="[
+                  'relative flex items-center text-sm transition-colors duration-75 w-full multiple-select rounded-md font-medium [&_label]:w-full [&_label]:p-2.5',
+                  allItemsSelected || someItemsSelected
+                    ? 'text-gray-800 hover:bg-purple-50 hover:text-purple-600'
+                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800',
+                ]"
+                @toggle="handleSelectAll"
+              >
+                <template #label>
+                  <span class="ms-2">{{ selectAllLabel }}</span>
+                </template>
+              </EUICheckbox>
+            </li>
             <li v-if="filteredItems.length === 0 && !hideNoData">
               <slot name="no-items">
                 <div
@@ -173,7 +198,7 @@
                         : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800',
                       'relative flex items-center capitalize text-sm transition-colors duration-75 w-full multiple-select rounded-md font-medium [&_label]:w-full [&_label]:p-2.5',
                     ]"
-                    @update:model-value="
+                    @toggle="
                       (checked) => handleCheckboxChange(item, checked)
                     "
                   >
@@ -197,26 +222,50 @@
     <slot v-if="$slots.labelhint" name="labelhint"></slot>
     <div
       v-if="selectType === 'multiple' && selectedValues.length > 0 && showTags"
-      class="px-0.5 my-2 inline-flex gap-x-3 gap-y-2 items-center flex-wrap"
+      class="my-2 space-y-2"
     >
-      <slot
-        v-for="(item, index) in selectedValues"
-        name="selection"
-        :item="item"
-        :clear="() => handleDeselect(item)"
-        :key="`selected-values-${index}`"
+      <div
+        class="px-0.5 gap-x-3 gap-y-2 items-center flex-wrap"
+        :class="[
+          effectiveTagLimit ? 'flex w-full' : 'inline-flex',
+          tagsExpanded && effectiveTagLimit ? 'max-h-32 overflow-y-auto' : '',
+        ]"
       >
-        <EUITag
-          class="capitalize"
-          :disabled="disabled"
-          closeIcon
-          size="md"
-          color="secondary"
-          @remove="handleTagRemove(item)"
+        <slot
+          v-for="(item, index) in visibleSelectedValues"
+          name="selection"
+          :item="item"
+          :clear="() => handleDeselect(item)"
+          :key="`selected-values-${index}`"
+        >
+          <EUITag
+            class="capitalize"
+            :disabled="disabled"
+            :closeIcon="!disabled"
+            :size="tagSize"
+            color="secondary"
+            @remove="handleTagRemove(item)"
+          >
+            {{ startCase(item[itemText] || item) }}
+          </EUITag>
+        </slot>
+        <button
+          v-if="canExpandTags && !tagsExpanded"
+          type="button"
+          class="text-xs font-medium text-violet-600 hover:text-violet-700"
+          @click="tagsExpanded = true"
         >
-          {{ startCase(item[itemText] || item) }}
-        </EUITag>
-      </slot>
+          +{{ selectedValues.length - effectiveTagLimit }} more
+        </button>
+      </div>
+      <button
+        v-if="canExpandTags && tagsExpanded"
+        type="button"
+        class="text-xs font-medium text-violet-600 hover:text-violet-700"
+        @click="tagsExpanded = false"
+      >
+        Show less
+      </button>
     </div>
     <div
       class="absolute top-0 px-2 text-xs text-white rounded right-6"
@@ -289,6 +338,12 @@ interface Props {
   ignoreDeselect?: boolean;
   popperClasses?: string;
   showCount?: boolean;
+  /** Include an All row for every item in `items` (independent of search). */
+  showSelectAll?: boolean;
+  selectAllLabel?: string;
+  /** Maximum selected tags shown before the More/Less control; 0 shows all. */
+  maxVisibleTags?: number;
+  tagSize?: "sm" | "md" | "lg";
 }
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
@@ -314,6 +369,10 @@ const props = withDefaults(defineProps<Props>(), {
   ignoreDeselect: false,
   popperClasses: "",
   showCount: false,
+  showSelectAll: false,
+  selectAllLabel: "All",
+  maxVisibleTags: 0,
+  tagSize: "md",
 });
 
 
@@ -337,6 +396,7 @@ const options = ref<HTMLElement>();
 const searchInputRef = ref<any>();
 const componentRef = ref<HTMLElement>();
 const isOpening = ref(false);
+const tagsExpanded = ref(false);
 
 // Computed properties
 const selectedValues = computed({
@@ -362,6 +422,37 @@ const selected = computed(() => {
   };
 });
 
+const sameItem = (a: any, b: any) =>
+  a != null &&
+  b != null &&
+  getPropertyFromItem(a, props.itemText) ===
+    getPropertyFromItem(b, props.itemText);
+
+const allItemsSelected = computed(
+  () => props.items.length > 0 && props.items.every((item) => selected.value(item))
+);
+const someItemsSelected = computed(() =>
+  props.items.some((item) => selected.value(item))
+);
+
+const effectiveTagLimit = computed(() =>
+  Number.isFinite(props.maxVisibleTags) && props.maxVisibleTags > 0
+    ? Math.floor(props.maxVisibleTags)
+    : 0
+);
+const canExpandTags = computed(
+  () => effectiveTagLimit.value > 0 && selectedValues.value.length > effectiveTagLimit.value
+);
+const visibleSelectedValues = computed(() =>
+  canExpandTags.value && !tagsExpanded.value
+    ? selectedValues.value.slice(0, effectiveTagLimit.value)
+    : selectedValues.value
+);
+
+watch(canExpandTags, (canExpand) => {
+  if (!canExpand) tagsExpanded.value = false;
+});
+
 export type SelectItemKey =
   | string
   | (string | number)[]
@@ -434,8 +525,7 @@ const filteredItems = computed(() => {
 });
 
 const handleDeselect = (item: any) => {
-  // console.log("called with:", item, selectedValues.value);
-  if (props.ignoreDeselect) return;
+  if (props.ignoreDeselect || props.disabled) return;
   let index = -1;
   if (typeof item === "object" && item[props.itemText]) {
     index = selectedValues.value.findIndex(
@@ -464,10 +554,26 @@ const handleDeselect = (item: any) => {
 };
 
 const handleClearAll = () => {
+  if (props.disabled) return;
   emit("update:modelValue", []);
   emit("toggle");
 };
 
+const handleSelectAll = (checked: boolean) => {
+  if (props.disabled || props.selectType !== "multiple") return;
+  const next = checked
+    ? [
+        ...selectedValues.value,
+        ...props.items.filter((item) => !selected.value(item)),
+      ]
+    : selectedValues.value.filter(
+        (value: any) => !props.items.some((item) => sameItem(value, item))
+      );
+  emit("update:modelValue", next);
+  emit("on-change", next);
+  emit("toggle", next);
+};
+
 const handleTagRemove = (item: any) => {
   handleDeselect(item);
 };
@@ -499,6 +605,7 @@ const handleUpdate = (items: any) => {
 };
 
 const handleSelect = (item: any) => {
+  if (props.disabled) return;
   let newSelection: any;
 
   if (props.selectType === "multiple" && typeof item === "object") {
@@ -537,6 +644,7 @@ const handleSelect = (item: any) => {
 };
 
 const handleOpen = () => {
+  if (props.disabled) return;
   isOpening.value = true;
 
   // Only clear search for single select, preserve it for multiple select
@@ -619,13 +727,6 @@ watch(internalSearch, (value: string) => {
   emit("search", value);
 });
 
-watch(
-  () => props.modelValue,
-  (newValue, oldValue) => {
-    console.log("changed from:", oldValue, "to:", newValue);
-  },
-  { deep: true }
-);
 </script>
 
 <style lang="scss">

package/dist/components/searchTagSelect/SearchInput.vue

@@ -22,6 +22,7 @@
       :class="['search-input', hasError ? 'error-state' : '']"
       :placeholder="placeholder"
       :value="modelValue"
+      :disabled="disabled"
       @input="emitInput"
       @focus="onFocus"
       @blur="onBlur"