edvoyui-component-library-test-flight 0.0.170 → 0.0.173

package/src/components/searchTagSelect/EUISearchTagSelect.vue

@@ -0,0 +1,642 @@
+<template>
+  <div ref="componentRef" class="relative w-full">
+    <slot v-if="$slots.label" name="label">
+      <label
+        v-if="label"
+        for="search-input"
+        class="block text-sm font-medium text-gray-700"
+      >
+        {{ label }} <span v-if="required" class="text-red-500">*</span>
+      </label>
+    </slot>
+    <Popper
+      :class="[`popper-defaultstyle w-full ${popperClasses}`]"
+      v-bind="$attrs"
+      :show="showDropDown"
+      arrow
+      closeDelay="100"
+      :offsetSkid="offsetSkid"
+      :offsetDistance="offsetDistance"
+      :placement="placement"
+      :interactive="true"
+      :auto-hide="true"
+      @open:popper="handleOpen"
+      @close:popper="handleClose"
+    >
+      <SearchInput
+        v-if="showDropDown || selectedValues.length === 0"
+        ref="searchInputRef"
+        id="search-input"
+        v-model:model-value="internalSearch"
+        input-type="defaultInput"
+        :icon="SearchBigZoomIn"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @focus="handleSearchFocus"
+        @click="handleOpen"
+      />
+      <button
+        v-else-if="!showDropDown && selectedValues.length > 0"
+        type="button"
+        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"
+      >
+        <component
+          v-if="searchIcon"
+          :is="SearchBigZoomIn"
+          class="flex-shrink-0 w-5 h-5 text-gray-500"
+        />
+        <div class="flex-1 min-w-0">
+          <span
+            v-if="selectType === 'single'"
+            class="text-sm font-semibold text-current truncate"
+          >
+            {{ startCase(selectedValues[0][itemText] || selectedValues[0]) }}
+          </span>
+          <template v-else-if="selectType === 'multiple' && showCount">
+            <div
+              class="inline-flex items-center gap-2 py-1 pl-2 pr-1 text-xs font-semibold text-current bg-gray-100 rounded-3xl"
+            >
+              Selected Cities
+              <span class="show-count"> {{ selectedValues.length }}</span>
+            </div>
+          </template>
+          <span v-else class="text-sm font-normal text-gray-400">
+            {{ placeholder }}
+          </span>
+        </div>
+        <div class="inset-y-0 m-auto right-2.5 flex items-center gap-2">
+          <XMarkIcon
+            v-if="selectedValues.length > 0 && clearable"
+            class="w-4 h-4 text-gray-300 cursor-pointer hover:text-gray-500"
+            @click.stop="handleClearAll"
+          />
+          <ChevronDownStroke
+            v-else
+            :class="[
+              'w-5 h-5 transform transition duration-200 ease-in-out',
+              showDropDown
+                ? 'text-gray-800 rotate-180'
+                : 'text-gray-300 rotate-0',
+            ]"
+          />
+        </div>
+      </button>
+      <template #content>
+        <div
+          v-if="showDropDown"
+          class="w-full p-4 overflow-y-auto text-sm bg-white border-2 border-gray-100 border-solid shadow-lg rounded-3xl max-h-72 scrollbar--hide"
+        >
+          <h3
+            class="sticky z-10 p-2 mb-2 -mx-px -mt-3 font-semibold text-gray-500 bg-white text-sm/4 -top-4"
+          >
+            Search Results
+          </h3>
+          <ul
+            ref="options"
+            tabindex="-1"
+            role="listbox"
+            aria-labelledby="listbox-label"
+            aria-activedescendant="listbox-option-3"
+            class="space-y-0.5"
+          >
+            <li v-if="filteredItems.length === 0 && !hideNoData">
+              <slot name="no-items">
+                <div
+                  v-if="internalSearch.length > 0"
+                  class="px-2 py-4 mb-6 text-sm font-medium text-center text-gray-500 min-h-32"
+                >
+                  No results found for "<strong>{{ internalSearch }}</strong
+                  >"
+                </div>
+              </slot>
+            </li>
+            <li
+              v-for="(item, i) in filteredItems"
+              v-else
+              :key="`items-${i}`"
+              role="option"
+              :class="[
+                'transition-all duration-100 ease-in-out',
+                selectType === 'single' ? 'cursor-pointer' : '',
+              ]"
+              @click="
+                selectType === 'single'
+                  ? selected(item)
+                    ? handleDeselect(item)
+                    : handleSelect(item)
+                  : null
+              "
+              @click.stop
+            >
+              <!-- Single Select Item -->
+              <template v-if="selectType === 'single'">
+                <slot name="item" :item="item">
+                  <div
+                    :class="[
+                      selected(item)
+                        ? 'bg-purple-50 text-purple-600'
+                        : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800',
+                      'relative py-2 px-4 flex items-center capitalize text-sm transition-colors duration-75 rounded',
+                    ]"
+                  >
+                    <span
+                      :class="[
+                        selected(item) ? 'font-semibold mr-5' : 'font-medium',
+                        'block tracking-tight',
+                      ]"
+                    >
+                      {{ startCase(item[itemText] || item) }}
+                    </span>
+                    <span
+                      v-if="selected(item)"
+                      class="absolute inset-y-0 right-0 flex items-center pr-4"
+                    >
+                      <CheckTick
+                        class="text-current size-5"
+                        aria-hidden="true"
+                      />
+                    </span>
+                  </div>
+                </slot>
+              </template>
+
+              <!-- Multiple Select Item -->
+              <template v-else-if="selectType === 'multiple'">
+                <slot name="item" :item="item">
+                  <EUICheckbox
+                    :model-value="selected(item)"
+                    name="checkbox"
+                    :class="[
+                      selected(item)
+                        ? 'text-gray-800 hover:bg-purple-50 hover:text-purple-600'
+                        : '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="
+                      (checked) => handleCheckboxChange(item, checked)
+                    "
+                  >
+                    <template #label>
+                      <span class="ms-2 first-letter:capitalize">{{
+                        startCase(item[itemText] || item)
+                      }}</span>
+                    </template>
+                  </EUICheckbox>
+                </slot>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </Popper>
+    <template v-if="errors && errors.length && !showDropDown">
+      <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
+    </template>
+
+    <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"
+    >
+      <slot
+        v-for="(item, index) in selectedValues"
+        name="selection"
+        :item="item"
+        :clear="() => handleDeselect(item)"
+        :key="`selected-values-${index}`"
+      >
+        <EUITag
+          class="capitalize"
+          :disabled="disabled"
+          closeIcon
+          size="md"
+          color="secondary"
+          @remove="handleTagRemove(item)"
+        >
+          {{ startCase(item[itemText] || item) }}
+        </EUITag>
+      </slot>
+    </div>
+    <div
+      class="absolute top-0 px-2 text-xs text-white rounded right-6"
+      :class="[
+        { 'bg-gray-400': tagColor === 'None' },
+        { 'bg-green-400': tagColor === 'Success' },
+        { 'bg-red-400': tagColor === 'Error' },
+      ]"
+      v-if="tag"
+    >
+      {{ tag }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, nextTick, onMounted, onUnmounted } from "vue";
+import { startCase } from "lodash";
+import { ErrorObject, ValidationErrors } from "../../utils/types";
+import SearchInput from "./SearchInput.vue";
+import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
+import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
+import EUICheckbox from "../checkbox/EUICheckbox.vue";
+import EUITag from "../tag/EUITag.vue";
+import Popper from "vue3-popper";
+import CheckTick from "../../assets/svg/CheckTick.vue";
+import { XMarkIcon } from "@heroicons/vue/20/solid";
+import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
+
+// Props
+interface Props {
+  modelValue?: any;
+  items?: any[];
+  label?: string;
+  name?: string;
+  placement?:
+    | "auto"
+    | "auto-start"
+    | "auto-end"
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "left"
+    | "left-start"
+    | "left-end";
+  itemText?: string;
+  placeholder?: string;
+  offsetSkid?: string;
+  offsetDistance?: string;
+  errors?: ValidationErrors | ErrorObject[];
+  selectType?: "single" | "multiple";
+  filterFunction?: Function;
+  searchable?: boolean;
+  backendPagination?: boolean;
+  hideNoData?: boolean;
+  disabled?: boolean;
+  tag?: string;
+  tagColor?: "None" | "Success" | "Error";
+  required?: boolean;
+  classes?: string;
+  searchIcon?: boolean;
+  showTags?: boolean;
+  clearable?: boolean;
+  ignoreDeselect?: boolean;
+  popperClasses?: string;
+  showCount?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  itemText: "name",
+  placeholder: "Please Select",
+  name: "",
+  offsetDistance: "4",
+  offsetSkid: "0",
+  filterFunction: () => {},
+  selectType: "single",
+  searchable: true,
+  backendPagination: false,
+  hideNoData: false,
+  disabled: false,
+  tag: "",
+  tagColor: "None",
+  required: false,
+  classes: "",
+  searchIcon: false,
+  showTags: true,
+  clearable: true,
+  placement: "bottom-start",
+  ignoreDeselect: false,
+  popperClasses: "",
+  showCount: false,
+});
+
+
+// Emits
+const emit = defineEmits<{
+  "update:modelValue": [value: any];
+  blur: [];
+  search: [value: string];
+  create: [value: string];
+  "on-change": [value: any];
+  "on-deselect": [value: any];
+  toggle: [value?: any];
+}>();
+
+// Refs
+const internalSearch = ref("");
+const showDropDown = ref(false);
+const options = ref<HTMLElement>();
+const searchInputRef = ref<any>();
+const componentRef = ref<HTMLElement>();
+const isOpening = ref(false);
+
+// Computed properties
+const selectedValues = computed({
+  get(): any {
+    const value: any = props.modelValue;
+    if (!value) return [];
+    return [].concat(value);
+  },
+  set(value: any) {
+    emit("update:modelValue", value);
+  },
+});
+
+const selected = computed(() => {
+  return (item: any) => {
+    if (typeof item === "object")
+      return Boolean(
+        selectedValues.value.find(
+          (x: any) => x[props.itemText] === item[props.itemText]
+        )
+      );
+    if (typeof item === "string") return selectedValues.value.includes(item);
+  };
+});
+
+export type SelectItemKey =
+  | string
+  | (string | number)[]
+  | ((item: object, fallback?: any) => any);
+
+function getNestedValue(
+  obj: any,
+  path: (string | number)[],
+  fallback?: any
+): any {
+  const last = path.length - 1;
+
+  if (last < 0) return obj === undefined ? fallback : obj;
+
+  for (let i = 0; i < last; i++) {
+    if (obj == null) {
+      return fallback;
+    }
+    obj = obj[path[i]];
+  }
+
+  if (obj == null) return fallback;
+
+  return obj[path[last]] === undefined ? fallback : obj[path[last]];
+}
+
+function getObjectValueByPath(obj: any, path: string, fallback?: any): any {
+  if (obj == null || !path || typeof path !== "string") return fallback;
+  if (obj[path] !== undefined) return obj[path];
+  path = path.replace(/\[(\w+)\]/g, ".$1"); // convert indexes to properties
+  path = path.replace(/^\./, ""); // strip a leading dot
+  return getNestedValue(obj, path.split("."), fallback);
+}
+
+function getPropertyFromItem(
+  item: object,
+  property: SelectItemKey,
+  fallback?: any
+): any {
+  if (property == null) return item === undefined ? fallback : item;
+
+  if (item !== Object(item)) return fallback === undefined ? item : fallback;
+
+  if (typeof property === "string")
+    return getObjectValueByPath(item, property, fallback);
+
+  if (Array.isArray(property)) return getNestedValue(item, property, fallback);
+
+  if (typeof property !== "function") return fallback;
+
+  const value = property(item, fallback);
+
+  return typeof value === "undefined" ? fallback : value;
+}
+
+const filteredItems = computed(() => {
+  let items = props.items?.slice();
+  const search = internalSearch.value.trim().toLowerCase();
+
+  if (internalSearch.value !== "") {
+    if (search === "") return [];
+    if (props.backendPagination) return props.items;
+    items = props.items.filter((option: any) => {
+      const value = getPropertyFromItem(option, props.itemText);
+      const text = value != null ? String(value).toLowerCase() : "";
+      return text.includes(search);
+    });
+  }
+  return items;
+});
+
+const handleDeselect = (item: any) => {
+  // console.log("called with:", item, selectedValues.value);
+  if (props.ignoreDeselect) return;
+  let index = -1;
+  if (typeof item === "object" && item[props.itemText]) {
+    index = selectedValues.value.findIndex(
+      (x: any) => x[props.itemText] === item[props.itemText]
+    );
+  } else {
+    index = selectedValues.value.indexOf(item);
+  }
+
+  if (index > -1) {
+    const newValues = [...selectedValues.value];
+    newValues.splice(index, 1);
+    emit("update:modelValue", newValues);
+    nextTick(() => {
+      if (selectedValues.value.length !== newValues.length) {
+        selectedValues.value = newValues;
+      }
+    });
+  }
+
+  if (!props.selectType || props.selectType === "single") {
+    handleClose();
+  }
+  emit("on-deselect", item);
+  emit("toggle");
+};
+
+const handleClearAll = () => {
+  emit("update:modelValue", []);
+  emit("toggle");
+};
+
+const handleTagRemove = (item: any) => {
+  handleDeselect(item);
+};
+
+const handleCheckboxChange = (item: any, checked: boolean) => {
+  if (checked) {
+    handleSelect(item);
+  } else {
+    handleDeselect(item);
+  }
+};
+
+const handleUpdate = (items: any) => {
+  if (typeof items === "object") {
+    if (Array.isArray(items)) {
+      if (items.length == 0) {
+        emit("update:modelValue", "");
+      } else {
+        emit("update:modelValue", items);
+      }
+    } else {
+      emit("update:modelValue", items);
+    }
+  } else if (items.length > 0) {
+    emit("update:modelValue", items);
+  } else {
+    emit("update:modelValue", "");
+  }
+};
+
+const handleSelect = (item: any) => {
+  let newSelection: any;
+
+  if (props.selectType === "multiple" && typeof item === "object") {
+    const findObj = selectedValues.value.find(
+      (x: any) => x[props.itemText] === item[props.itemText]
+    );
+    if (findObj) {
+      newSelection = selectedValues.value.filter(
+        (x: any) => x[props.itemText] !== item[props.itemText]
+      );
+    } else {
+      newSelection = selectedValues.value.concat(item);
+    }
+    emit("on-change", [...newSelection]);
+  } else if (props.selectType === "multiple" && typeof item === "string") {
+    if (selectedValues.value.includes(item)) {
+      return handleDeselect(item);
+    }
+    newSelection = selectedValues.value.concat(item);
+    emit("on-change", [...newSelection]);
+  } else {
+    // Single select
+    newSelection = item;
+  }
+
+  // Only clear search for single select, keep it for multiple select
+  if (props.selectType === "single") {
+    internalSearch.value = "";
+  }
+
+  handleUpdate(newSelection);
+  if (!props.selectType || props.selectType === "single") {
+    handleClose();
+  }
+  emit("toggle", newSelection);
+};
+
+const handleOpen = () => {
+  isOpening.value = true;
+
+  // Only clear search for single select, preserve it for multiple select
+  if (props.selectType === "single") {
+    internalSearch.value = "";
+  }
+  showDropDown.value = true;
+
+  nextTick(() => {
+    setTimeout(() => {
+      internalSearch.value = "";
+      isOpening.value = false;
+      if (searchInputRef.value?.searchInput) {
+        searchInputRef.value.searchInput.focus();
+      } else if (searchInputRef.value?.$el) {
+        const inputElement = searchInputRef.value.$el.querySelector("input");
+        if (inputElement) {
+          inputElement.focus();
+        }
+      }
+    }, 50);
+  });
+};
+
+const handleClose = () => {
+  if (showDropDown.value) {
+    emit("blur");
+  }
+  showDropDown.value = false;
+
+  // Only clear search for single select, keep it for multiple select
+  if (props.selectType === "single") {
+    internalSearch.value = "";
+  }
+};
+
+const handleSearchFocus = () => {
+  internalSearch.value = "";
+};
+
+// Document click handler for outside clicks
+const handleDocumentClick = (event: MouseEvent) => {
+  // Don't close if we're currently opening
+  if (isOpening.value) return;
+
+  const target = event.target as Node;
+
+  // Check if click is outside the component and popper
+  if (showDropDown.value && componentRef.value) {
+    // Check if click is outside the main component
+    const isOutsideComponent = !componentRef.value.contains(target);
+
+    // Check if click is outside any popper content
+    const popperElements = document.querySelectorAll(
+      '[data-popper-placement], .popper-defaultstyle, [role="tooltip"]'
+    );
+    const isOutsidePopper = Array.from(popperElements).every(
+      (popper) => !popper.contains(target)
+    );
+
+    if (isOutsideComponent && isOutsidePopper) {
+      handleClose();
+    }
+  }
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  document.addEventListener("click", handleDocumentClick);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleDocumentClick);
+});
+
+// Watchers
+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">
+.popper-defaultstyle {
+  border: 0px solid transparent !important;
+  margin: 0px !important;
+  @apply w-full;
+
+  & > div.popper {
+    width: 100% !important;
+  }
+}
+
+.show-count {
+  min-width: 20px;
+  @apply h-5 inline-flex items-center justify-center text-xss font-semibold bg-white rounded-xl;
+}
+</style>