edvoyui-component-library-test-flight 0.0.184 → 0.0.186

package/src/components/searchTagSelect/EUISearchTagSelect.vue

@@ -1,642 +0,0 @@
-<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="flex items-center flex-shrink-0 gap-2 m-auto">
-          <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-400 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>