@winchsa/ui 0.1.0

package/dist/components/forms/AutocompleteInput.vue

@@ -0,0 +1,759 @@
+<script setup>
+import MultiSelect from "vue-multiselect";
+import { ref, computed, watch, useAttrs } from "vue";
+import { useI18n } from "vue-i18n";
+import { VLabel, VValidation, VListItem, VMessages, VIcon } from "vuetify/components";
+import { client } from "../../utils/client";
+import { generateUniqueId } from "../../utils/utils";
+import { buildQueryString } from "../../utils/queryParams";
+import LoadingBar from "../loading/LoadingBar.vue";
+const { t } = useI18n();
+const guid = generateUniqueId();
+const props = defineProps({
+  options: { type: Array, required: false },
+  rules: { type: Array, required: false },
+  multiple: { type: Boolean, required: false },
+  searchable: { type: Boolean, required: false },
+  searchInternally: { type: Boolean, required: false },
+  querySearchParam: { type: String, required: false, default: "q" },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  grouped: { type: Boolean, required: false },
+  returnObject: { type: Boolean, required: false },
+  teleported: { type: Boolean, required: false },
+  preselectFirst: { type: Boolean, required: false },
+  hideSelected: { type: Boolean, required: false, default: false },
+  error: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  itemLabel: { type: String, required: false },
+  groupValues: { type: String, required: false },
+  groupLabel: { type: String, required: false },
+  trackBy: { type: String, required: false, default: "id" },
+  trackByValue: { type: [String, Number, Array], required: false },
+  placeholder: { type: String, required: false },
+  url: { type: String, required: false },
+  label: { type: String, required: false },
+  deselectLabel: { type: String, required: false, default: "" },
+  selectLabel: { type: String, required: false, default: "" },
+  selectedLabel: { type: String, required: false, default: "" },
+  errorMessages: { type: String, required: false },
+  params: { type: Object, required: false },
+  hideDetails: { type: Boolean, required: false, default: false },
+  fetchEnabled: { type: Boolean, required: false, default: true },
+  isLoading: { type: Boolean, required: false, default: false },
+  disableIfEmpty: { type: Boolean, required: false, default: false }
+});
+const defaultOptions = ref(props.options ?? []);
+const displayedOptions = ref(props.options ?? []);
+const loadedValuesHaveBeenSet = ref(false);
+const loading = ref(false);
+const showTeleport = ref(false);
+const search = ref("");
+const inputRef = ref({});
+const errorState = ref(false);
+const isOpen = ref(false);
+const emits = defineEmits(["update:model-value"]);
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value2) {
+    emits("update:model-value", value2);
+  }
+});
+const isLoading = computed(() => {
+  return props.isLoading || loading.value;
+});
+const params = computed(() => buildQueryString(props.params));
+const elementId = computed(() => {
+  const attrs = useAttrs();
+  const _elementIdToken = attrs.id || attrs.label;
+  return _elementIdToken ? `autocomplete-input-${_elementIdToken}-${guid}` : `autocomplete-input-${_elementIdToken}-${guid}`;
+});
+const internalPlaceholder = computed(() => {
+  return props.placeholder ? props.placeholder : t("inputs.placeholder_select", {
+    name: props.label ? t(props.label) : ""
+  });
+});
+const customPosition = () => {
+  const autocompleteInputElement = document.querySelector(`#${elementId.value}`);
+  const rect = autocompleteInputElement?.getBoundingClientRect();
+  return {
+    top: rect?.top || 0,
+    left: rect?.left || 0,
+    width: rect?.width,
+    height: rect?.height
+  };
+};
+const normalizeArabic = (text) => {
+  if (typeof text === "number") {
+    return text.toString();
+  }
+  return text.trim().replace(/أ|ا|إ|آ/g, "\u0627").replace(/ي|ى|ئ/g, "\u064A").replace(/ة/g, "\u0647");
+};
+const searchArabic = (value2, query) => {
+  if (!value2 || !query) {
+    return false;
+  }
+  const normalizedValue = normalizeArabic(value2.toString()).toLowerCase();
+  const normalizedQuery = normalizeArabic(query).toLowerCase();
+  return normalizedValue.includes(normalizedQuery);
+};
+const customSearch = (query) => {
+  search.value = query?.toString().trim() || "";
+};
+const resetTeleportState = () => {
+  if (!props.multiple && props.teleported) {
+    showTeleport.value = false;
+    inputRef.value[`select-input-${elementId.value}`]?.deactivate();
+  }
+};
+const closeMenu = () => {
+  inputRef.value[`select-input-${elementId.value}`]?.deactivate();
+};
+const getRecords = async (searchQuery) => {
+  loading.value = true;
+  const params2 = buildQueryString({
+    ...props.params,
+    ...searchQuery ? { [props.querySearchParam]: searchQuery } : {}
+  });
+  try {
+    const { data } = await client.get(`${props.url}?${params2}`);
+    return data;
+  } catch (err) {
+    return [];
+  } finally {
+    loading.value = false;
+  }
+};
+const fetchAndUpdateRecords = async (searchQuery) => {
+  displayedOptions.value = await getRecords(searchQuery);
+};
+watch(
+  [() => props.trackByValue, defaultOptions],
+  async ([trackByValue, _defaultOptions]) => {
+    if (!trackByValue || _defaultOptions.length === 0 || loadedValuesHaveBeenSet.value) {
+      return;
+    }
+    loadedValuesHaveBeenSet.value = true;
+    const loadedValues = Array.isArray(trackByValue) ? trackByValue : [trackByValue];
+    let items = _defaultOptions.flatMap((option) => props.grouped ? option.children : [option]);
+    const missingIds = loadedValues.filter((value2) => !items.some((item) => item?.[props.trackBy] == value2));
+    if (missingIds.length > 0 && props.url) {
+      const fetchedItems = await Promise.all(missingIds.map((id) => getRecords(id)));
+      if (fetchedItems.length > 0) {
+        items = items.concat(fetchedItems.flat());
+      }
+    }
+    const optionsToSelect = loadedValues.map((value2) => items.find((item) => item?.[props.trackBy] == value2)).filter(Boolean);
+    if (optionsToSelect.length > 0) {
+      emits("update:model-value", optionsToSelect);
+    }
+  },
+  {
+    immediate: true
+  }
+);
+watch(() => props.errorMessages, () => {
+  if (props.errorMessages && props.errorMessages.length > 0) {
+    errorState.value = true;
+  }
+}, {
+  deep: true,
+  immediate: true
+});
+watch(() => params.value, (value2) => {
+  if (value2) {
+    fetchAndUpdateRecords();
+  }
+});
+const filteredOptions = computed(() => {
+  if (!search.value) {
+    return displayedOptions.value;
+  }
+  return displayedOptions.value?.map((entry) => {
+    if (props.grouped) {
+      const matchingChildren = entry?.children?.filter((child) => {
+        const childValue = typeof child === "object" && child !== null && "name" in child ? child.name : child;
+        return searchArabic(childValue?.toString() ?? "", search.value);
+      });
+      if (matchingChildren && matchingChildren.length > 0) {
+        return {
+          ...entry,
+          children: matchingChildren
+        };
+      }
+      return null;
+    }
+    const entryValue = typeof entry === "object" && entry !== null && "name" in entry ? entry.name : entry;
+    return searchArabic(entryValue?.toString() || "", search.value) ? entry : null;
+  }).filter(Boolean);
+});
+const disableIfNoOptions = computed(() => filteredOptions.value.length === 0 && props.disableIfEmpty);
+watch(() => props.url, async () => {
+  if (props.fetchEnabled && props.url) {
+    const options = await getRecords();
+    defaultOptions.value = options;
+    displayedOptions.value = options;
+  }
+}, {
+  immediate: true
+});
+watch(() => props.options, () => {
+  if (props.options && props.options.length > 0) {
+    defaultOptions.value = props.options;
+    displayedOptions.value = props.options;
+  }
+}, {
+  deep: true,
+  immediate: true
+});
+defineExpose({
+  records: defaultOptions,
+  internalOptions: filteredOptions,
+  loading: isLoading
+});
+</script>
+
+<template>
+  <div :id="elementId" class="d-flex flex-column w-100">
+    <VLabel
+      v-if="label"
+      class="text-body-2 text-high-emphasis mb-2"
+      :text="t(label)"
+    />
+
+    <Teleport v-if="teleported && showTeleport" to="body">
+      <VValidation
+        v-slot="{ errorMessages: validationErrors, isValid }"
+        v-model="value"
+        :rules="rules"
+        validate-on="input lazy"
+      >
+        <MultiSelect
+          v-model="value"
+          :options="filteredOptions"
+          :multiple="multiple"
+          :close-on-select="multiple ? false : true"
+          :searchable="searchable"
+          :internal-search="false"
+          :preselect-first="preselectFirst"
+          :disabled="disabled || disableIfNoOptions"
+          :required="required"
+          :group-select="grouped"
+          :group-values="groupValues"
+          :group-label="groupLabel"
+          class="app-custom-input position-absolute app-z-7 app-custom-input-teleport"
+          :class="{
+  'app-custom-input-error': error || isValid.value === false || errorState
+}"
+          :style="{
+  left: `${customPosition().left}px`,
+  top: `${customPosition().top}px`,
+  width: `${customPosition().width}px`,
+  height: `${customPosition().height}px`
+}"
+          :label="itemLabel"
+          :track-by="trackBy"
+          :placeholder="value && value.length > 0 ? '' : internalPlaceholder || t('inputs.placeholder_select')"
+          :show-labels="false"
+          :clear-on-select="true"
+          :show-no-options="isLoading ? false : true"
+          :show-no-results="isLoading ? false : true"
+          :deselect-label="deselectLabel"
+          :hide-selected="hideSelected"
+          :select-label="selectLabel"
+          :selected-label="selectedLabel"
+          :value="value"
+          @search-change="searchInternally ? customSearch($event) : fetchAndUpdateRecords($event)"
+          @select="errorState = false, resetTeleportState()"
+        >
+          <template #caret>
+            <span class="multiselect-arrow">
+              <VIcon class="icon" size="19">tabler-chevron-down</VIcon>
+            </span>
+          </template>
+
+          <template v-if="grouped" #option="{ option }">
+            <VListItem
+              v-if="option.$isLabel"
+              class="app-group-category-title pa-0"
+            >
+              {{ option.$groupLabel }}
+            </VListItem>
+
+            <VListItem v-else class="pa-0 w-100" :title="option.name">
+              <template #title>
+                <div class="d-flex flex-column text-wrap">
+                  <p class="ma-0 app-font-size-13">
+                    {{ option.name }}
+                  </p>
+                  <span v-if="option?.description" class="text-gray-600 app-font-size-13">({{ option?.description }})</span>
+                </div>
+              </template>
+
+              <template #prepend>
+                <img
+                  v-if="option?.svg_icon_url"
+                  :src="option?.svg_icon_url"
+                  width="65"
+                  class="me-2"
+                >
+              </template>
+            </VListItem>
+          </template>
+
+          <template #clear>
+            <div
+              v-if="(Array.isArray(value) && value?.length > 0 || value) && value && !disabled"
+              class="multiselect-clear cursor-pointer"
+              @mousedown.prevent.stop="value = null"
+            >
+              <VIcon class="icon" size="19">
+                tabler-x
+              </VIcon>
+            </div>
+          </template>
+
+          <template #noResult>
+            <span class="app-font-size-13 text-center w-100">{{ t("no_data") }}</span>
+          </template>
+
+          <template #noOptions>
+            <span class="app-font-size-13 text-center w-100">{{ t("no_data") }}</span>
+          </template>
+
+          <template v-if="isLoading" #beforeList>
+            <div class="app-h-50px w-100">
+              <LoadingBar
+                :is-loading="isLoading"
+              />
+            </div>
+          </template>
+
+          <template #afterList />
+
+          <template
+            v-for="(_, name) in $slots"
+            #[name]="slotProps"
+          >
+            <slot
+              :name="name"
+              v-bind="slotProps || {}"
+            />
+          </template>
+        </MultiSelect>
+        <VMessages
+          v-if="!hideDetails"
+          class="mt-1"
+          :messages="[validationErrors.value, errorMessages]"
+          :active="isValid.value === false || errorMessages?.length !== 0"
+        />
+      </VValidation>
+    </Teleport>
+
+    <VValidation
+      v-slot="{ errorMessages: validationErrors, isValid }"
+      v-model="value"
+      :rules="rules"
+      validate-on="input lazy"
+    >
+      <div class="d-flex h-100 position-relative">
+        <div v-if="isOpen" class="w-100 h-100 position-absolute app-z-11" @click="closeMenu" />
+        <MultiSelect
+          :ref="el => inputRef[`select-input-${elementId}`] = el"
+          v-model="value"
+          :options="filteredOptions"
+          :multiple="multiple"
+          :close-on-select="multiple ? false : true"
+          :searchable="searchable"
+          :internal-search="false"
+          :preselect-first="preselectFirst"
+          :disabled="disabled || disableIfNoOptions"
+          :required="required"
+          :group-select="grouped"
+          :group-values="groupValues"
+          :group-label="groupLabel"
+          class="app-custom-input"
+          :class="{
+  'app-custom-input-error': error || isValid.value === false || errorState,
+  'app-teleport-clone': teleported
+}"
+          style="margin-top: 2px;"
+          :label="itemLabel"
+          :track-by="trackBy"
+          :placeholder="value && value?.length > 0 ? '' : internalPlaceholder || t('inputs.placeholder_select')"
+          :show-labels="false"
+          :clear-on-select="true"
+          :show-no-options="isLoading ? false : true"
+          :show-no-results="isLoading ? false : true"
+          :deselect-label="deselectLabel"
+          :hide-selected="hideSelected"
+          :select-label="selectLabel"
+          :selected-label="selectedLabel"
+          @open="showTeleport = true, isOpen = true"
+          @close="showTeleport = false, isOpen = false"
+          @search-change="searchInternally ? customSearch($event) : fetchAndUpdateRecords($event)"
+          @select="errorState = false, resetTeleportState()"
+        >
+          <template #caret>
+            <span class="multiselect-arrow">
+              <VIcon class="icon" size="19">tabler-chevron-down</VIcon>
+            </span>
+          </template>
+
+          <template v-if="grouped" #option="{ option }">
+            <VListItem
+              v-if="option.$isLabel"
+              class="app-group-category-title pa-0"
+            >
+              {{ option.$groupLabel }}
+            </VListItem>
+            <VListItem
+              v-else
+              class="pa-0 w-100"
+              :title="option.name"
+            >
+              <template #title>
+                <div class="d-flex flex-column text-wrap">
+                  <p class="ma-0 app-font-size-13">
+                    {{ option.name }}
+                  </p>
+                  <span v-if="option?.description" class="text-gray-600 app-font-size-13">({{ option?.description }})</span>
+                </div>
+              </template>
+
+              <template #prepend>
+                <img
+                  v-if="option?.svg_icon_url"
+                  :src="option?.svg_icon_url"
+                  width="65"
+                  class="me-2"
+                >
+              </template>
+            </VListItem>
+          </template>
+
+          <template #clear>
+            <div
+              v-if="!disabled && Array.isArray(value) && value.length > 0"
+              class="multiselect-clear cursor-pointer"
+              @mousedown.prevent.stop="value = null"
+            >
+              <VIcon class="icon" size="19">
+                tabler-x
+              </VIcon>
+            </div>
+          </template>
+
+          <template #noResult>
+            <span class="app-font-size-13 text-center w-100">{{ t("no_data") }}</span>
+          </template>
+
+          <template #noOptions>
+            <span class="app-font-size-13 text-center w-100">{{ t("no_data") }}</span>
+          </template>
+
+          <template v-if="isLoading" #beforeList>
+            <div class="app-h-50px w-100">
+              <LoadingBar
+                :is-loading="isLoading"
+              />
+            </div>
+          </template>
+
+          <template
+            v-for="(_, name) in $slots"
+            #[name]="slotProps"
+          >
+            <slot
+              :name="name"
+              v-bind="slotProps || {}"
+            />
+          </template>
+        </MultiSelect>
+      </div>
+      <VMessages
+        v-if="!hideDetails"
+        class="mt-1"
+        :messages="[validationErrors.value, errorMessages]"
+        :active="isValid.value === false || errorMessages?.length !== 0"
+      />
+    </VValidation>
+  </div>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.min.css">
+
+</style>
+
+<style>
+.app-custom-input-teleport .multiselect__tags {
+  display: none !important;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding-top: 0;
+}
+.app-custom-input-teleport .multiselect-arrow {
+  display: none !important;
+}
+.app-custom-input-teleport .multiselect__placeholder {
+  margin: 0;
+  padding-top: 0;
+}
+.app-custom-input-teleport .multiselect__content-wrapper {
+  margin-top: 53px;
+  z-index: 10;
+  display: block !important;
+}
+
+.app-teleport-clone .multiselect__tags {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding-top: 0;
+}
+.app-teleport-clone .multiselect__placeholder {
+  margin: 0;
+  padding-top: 0;
+}
+.app-teleport-clone .multiselect__content-wrapper {
+  display: none !important;
+}
+
+.app-custom-input .multiselect__placeholder {
+  display: flex;
+  align-items: center;
+  height: 21px;
+  line-height: 21px;
+  font-weight: 400;
+  font-size: 13px;
+  margin: 0px;
+  padding: 0;
+  padding-inline-start: 5px;
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+}
+.app-custom-input .multiselect__tags {
+  transition: all 0.3s;
+  border: 1px solid rgba(var(--v-border-color), 0.29);
+  font-size: 13px !important;
+  background-color: rgba(var(--v-theme-surface));
+  font-weight: 100 !important;
+  min-height: 43px;
+  border-radius: 6px;
+}
+.app-custom-input .multiselect__tags:hover {
+  transition: all 0.3s;
+  border: 1px solid rgba(var(--v-border-color), 0.8);
+}
+.app-custom-input:focus .multiselect__tags, .app-custom-input:focus-within .multiselect__tags {
+  border-color: rgba(var(--v-theme-primary)) !important;
+}
+.app-custom-input:focus .multiselect-clear, .app-custom-input:focus-within .multiselect-clear {
+  opacity: 1;
+}
+
+.multiselect__content-wrapper {
+  padding: 4px 0;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+  box-shadow: 0 0px 9px rgba(var(--v-shadow-key-umbra-color), 0.3), 0 0 transparent, 0 0 transparent !important;
+  border-radius: 6px;
+  background: rgba(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+
+.multiselect__input {
+  display: none;
+  height: 21px;
+  line-height: 21px;
+  font-size: 13px;
+  font-weight: 400;
+  text-align: start;
+  margin: 0px;
+  padding: 0;
+  padding-inline-start: 5px;
+  border-radius: 0px;
+  background-color: rgba(var(--v-theme-surface));
+}
+
+.multiselect--active .multiselect__input {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+[dir=rtl] .multiselect__input {
+  inset-inline-start: 0px !important;
+}
+
+.app-custom-input-error .multiselect__tags {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-color: rgba(var(--v-theme-error)) !important;
+}
+
+.multiselect--disabled {
+  opacity: 1;
+  background: transparent !important;
+}
+.multiselect--disabled .multiselect__tags {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  background: rgb(var(--v-disabled-background)) !important;
+}
+.multiselect--disabled .multiselect__placeholder {
+  background-color: rgb(var(--v-disabled-background));
+}
+.multiselect--disabled .multiselect-arrow {
+  display: none;
+}
+.multiselect--disabled .multiselect-arrow .icon {
+  background: rgb(var(--v-disabled-background)) !important;
+}
+.multiselect--disabled .multiselect__spinner, .multiselect--disabled .multiselect__single {
+  background: rgb(var(--v-disabled-background)) !important;
+}
+
+.multiselect__single {
+  font-size: 13px;
+  background-color: rgba(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface));
+  padding-top: 2px;
+  padding-inline-start: 8px;
+}
+
+.multiselect--active .multiselect-arrow .icon {
+  transition: all 0.3s;
+  transform: rotate(180deg);
+}
+
+.icon {
+  transition: all 0.3s;
+  transform: rotate(0deg);
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+  background: rgb(var(--v-theme-surface));
+}
+
+.multiselect-arrow {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 10px !important;
+  transform: translateY(-50%);
+}
+
+.multiselect-clear {
+  position: absolute;
+  top: 50%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  transform: translateY(-50%);
+  inset-inline-end: 10px !important;
+  opacity: 1;
+  transition: all 0.3s;
+  z-index: 12;
+}
+
+.multiselect__tag {
+  background: rgb(var(--v-theme-surface-variant));
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin-top: 2px;
+}
+
+.multiselect__tag-icon::after {
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+
+.multiselect__content {
+  font-size: 13px !important;
+  padding: 6px;
+}
+
+.multiselect__option {
+  align-items: center;
+  display: grid;
+  flex: none;
+  outline: none;
+  max-width: 100%;
+  padding: 4px 20px;
+  position: relative;
+  margin-block: 0.25rem;
+  text-decoration: none;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+  border-radius: 0;
+  color: rgba(var(--v-theme-on-surface)) !important;
+  width: 100% !important;
+  text-wrap: wrap;
+}
+
+.multiselect__option--highlight {
+  background: rgb(var(--v-theme-surface)) !important;
+  color: rgb(var(--v-theme-on-primary));
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+.multiselect__option--highlight:hover {
+  background: rgb(var(--v-theme-gray-200)) !important;
+}
+
+.multiselect__option--selected {
+  border-radius: 8px;
+  background: rgb(var(--v-nav-background)) !important;
+  color: rgb(var(--v-theme-on-primary));
+}
+
+.multiselect__spinner {
+  top: 50%;
+  inset-inline-end: 4px !important;
+  transform: translate(0%, -50%);
+}
+.multiselect__spinner::after {
+  border-color: rgba(var(--v-theme-primary)) transparent transparent !important;
+}
+.multiselect__spinner::before {
+  border-color: rgba(var(--v-theme-primary)) transparent transparent !important;
+}
+
+.multiselect__option--selected {
+  font-weight: inherit !important;
+}
+
+.multiselect__input::placeholder {
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+}
+
+.multiselect__option--group, .app-group-category-title {
+  background-color: rgb(var(--v-theme-gray-100)) !important;
+  border-radius: 8px !important;
+  color: rgba(var(--v-theme-dark-gray)) !important;
+  pointer-events: none;
+  font-size: 13px !important;
+  width: 100% !important;
+  font-weight: 700;
+}
+
+.multiselect--active .multiselect__placeholder {
+  display: inline-block;
+}
+
+.multiselect--active {
+  z-index: unset;
+}
+
+.multiselect__tags-wrap {
+  position: relative;
+}
+.multiselect__tags-wrap .multiselect__tag {
+  z-index: 12 !important;
+}
+</style>
+
+<style scoped>
+:deep(.v-list-item){min-height:auto}
+</style>