@winchsa/ui 0.1.31 → 0.1.33

package/dist/components/forms/AutocompleteInput.vue

@@ -1,760 +0,0 @@
-<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 "../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 },
-  clearable: { type: Boolean, required: false, default: true }
-});
-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) && !disabled && clearable"
-              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="(Array.isArray(value) ? value.length > 0 : !!value) && !disabled && clearable"
-              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!important}
-</style>