@winchsa/ui 0.1.35 → 0.1.37

package/dist/components/forms/AutocompleteInput.d.vue.ts

@@ -35,12 +35,14 @@ type __VLS_Props = {
     isLoading?: boolean;
     disableIfEmpty?: boolean;
     clearable?: boolean;
+    showNoOptions?: boolean;
+    showNoResults?: boolean;
 };
-declare var __VLS_71: string | number, __VLS_72: any, __VLS_136: string | number, __VLS_137: any;
+declare var __VLS_69: string | number, __VLS_70: any, __VLS_134: string | number, __VLS_135: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_71>]?: (props: typeof __VLS_72) => any;
+    [K in NonNullable<typeof __VLS_69>]?: (props: typeof __VLS_70) => any;
 } & {
-    [K in NonNullable<typeof __VLS_136>]?: (props: typeof __VLS_137) => any;
+    [K in NonNullable<typeof __VLS_134>]?: (props: typeof __VLS_135) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     records: Ref<{

package/dist/components/forms/AutocompleteInput.vue

@@ -1,10 +1,10 @@
 <script setup>
 import MultiSelect from "vue-multiselect";
-import { ref, computed, watch, useAttrs, nextTick } from "vue";
+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 { generateUniqueId, searchArabicText } from "../../utils/utils";
 import { buildQueryString } from "../../utils/queryParams";
 import LoadingBar from "../LoadingBar.vue";
 const { t } = useI18n();
@@ -43,8 +43,11 @@ const props = defineProps({
   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 }
+  clearable: { type: Boolean, required: false, default: true },
+  showNoOptions: { type: Boolean, required: false, default: true },
+  showNoResults: { type: Boolean, required: false, default: true }
 });
+const emits = defineEmits(["update:model-value"]);
 const defaultOptions = ref(props.options ?? []);
 const displayedOptions = ref(props.options ?? []);
 const loadedValuesHaveBeenSet = ref(false);
@@ -52,10 +55,8 @@ const loading = ref(false);
 const showTeleport = ref(false);
 const search = ref("");
 const inputRef = ref({});
-const teleportRef = ref(null);
 const errorState = ref(false);
 const isOpen = ref(false);
-const emits = defineEmits(["update:model-value"]);
 const value = computed({
   get() {
     return props.modelValue;
@@ -64,9 +65,7 @@ const value = computed({
     emits("update:model-value", value2);
   }
 });
-const isLoading = computed(() => {
-  return props.isLoading || loading.value;
-});
+const isLoading = computed(() => props.isLoading || loading.value);
 const params = computed(() => buildQueryString(props.params));
 const elementId = computed(() => {
   const attrs = useAttrs();
@@ -74,10 +73,59 @@ const elementId = computed(() => {
   return _elementIdToken ? `autocomplete-input-${_elementIdToken}-${guid}` : `autocomplete-input-${guid}`;
 });
 const internalPlaceholder = computed(() => {
-  return props.placeholder ? props.placeholder : t("inputs.placeholder_select", {
-    name: props.label ? t(props.label) : ""
-  });
+  return props.placeholder ?? t("inputs.placeholder_select", { name: props.label ? t(props.label) : "" });
+});
+const hasValue = computed(() => Array.isArray(value.value) ? value.value.length > 0 : !!value.value);
+const hasError = computed(() => (validationIsValid) => {
+  return props.error || validationIsValid === false || errorState.value;
 });
+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 = getOptionValue(child);
+        return searchArabicText(childValue, search.value);
+      });
+      return matchingChildren?.length ? { ...entry, children: matchingChildren } : null;
+    }
+    const entryValue = getOptionValue(entry);
+    return searchArabicText(entryValue, search.value) ? entry : null;
+  }).filter(Boolean);
+});
+const disableIfNoOptions = computed(() => filteredOptions.value.length === 0 && props.disableIfEmpty);
+const sharedMultiSelectProps = computed(() => ({
+  options: filteredOptions.value,
+  multiple: props.multiple,
+  closeOnSelect: !props.multiple,
+  searchable: props.searchable,
+  internalSearch: false,
+  preselectFirst: props.preselectFirst,
+  disabled: props.disabled || disableIfNoOptions.value,
+  required: props.required,
+  groupSelect: props.grouped,
+  groupValues: props.groupValues,
+  groupLabel: props.groupLabel,
+  label: props.itemLabel,
+  trackBy: props.trackBy,
+  placeholder: hasValue.value ? "" : internalPlaceholder.value || t("inputs.placeholder_select"),
+  showLabels: false,
+  clearOnSelect: true,
+  showNoOptions: isLoading.value ? false : props.showNoOptions,
+  showNoResults: isLoading.value ? false : props.showNoResults,
+  deselectLabel: props.deselectLabel,
+  hideSelected: props.hideSelected,
+  selectLabel: props.selectLabel,
+  selectedLabel: props.selectedLabel
+}));
+const getOptionValue = (option) => {
+  if (typeof option === "object" && option !== null && "name" in option) {
+    return option.name?.toString() ?? "";
+  }
+  return option?.toString() || "";
+};
 const customPosition = () => {
   const autocompleteInputElement = document.querySelector(`#${elementId.value}`);
   const rect = autocompleteInputElement?.getBoundingClientRect();
@@ -88,26 +136,22 @@ const customPosition = () => {
     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 customSearch = (query) => {
+  search.value = query?.toString().trim() || "";
 };
-const searchArabic = (value2, query) => {
-  if (!value2 || !query) {
-    return false;
+const handleOpen = () => {
+  if (props.teleported) {
+    showTeleport.value = true;
   }
-  const normalizedValue = normalizeArabic(value2.toString()).toLowerCase();
-  const normalizedQuery = normalizeArabic(query).toLowerCase();
-  return normalizedValue.includes(normalizedQuery);
+  isOpen.value = true;
 };
-const customSearch = (query) => {
-  search.value = query?.toString().trim() || "";
+const handleClose = () => {
+  showTeleport.value = false;
+  isOpen.value = false;
 };
 const resetTeleportState = () => {
   if (!props.multiple && props.teleported) {
-    showTeleport.value = false;
+    handleClose();
     inputRef.value[`select-input-${elementId.value}`]?.deactivate();
   }
 };
@@ -132,98 +176,62 @@ const getRecords = async (searchQuery) => {
 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);
+const updateOptions = async (newOptions) => {
+  defaultOptions.value = newOptions;
+  displayedOptions.value = newOptions;
+};
+const handleSelect = () => {
+  errorState.value = false;
+  resetTeleportState();
+};
+const handleSearchChange = (query) => {
+  if (props.searchInternally) {
+    customSearch(query);
+  } else {
+    fetchAndUpdateRecords(query?.toString());
+  }
+};
+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());
     }
-  },
-  {
-    immediate: true
   }
-);
-watch(() => props.errorMessages, () => {
-  if (props.errorMessages && props.errorMessages.length > 0) {
-    errorState.value = true;
+  const optionsToSelect = loadedValues.map((value2) => items.find((item) => item?.[props.trackBy] == value2)).filter(Boolean);
+  if (optionsToSelect.length > 0) {
+    emits("update:model-value", optionsToSelect);
   }
-}, {
-  deep: true,
-  immediate: true
-});
+}, { immediate: true });
+watch(() => props.errorMessages, (newErrorMessages) => {
+  errorState.value = !!(newErrorMessages && newErrorMessages.length > 0);
+}, { 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,
-  deep: true
-});
-watch(() => props.options, () => {
+watch([() => props.url, () => props.options], async () => {
   if (props.options && props.options.length > 0) {
-    defaultOptions.value = props.options;
-    displayedOptions.value = props.options;
-  }
-}, {
-  deep: true,
-  immediate: true
-});
-watch(showTeleport, (newValue) => {
-  if (newValue && props.teleported) {
-    nextTick(() => {
-      teleportRef.value?.activate();
-    });
+    updateOptions(props.options);
+  } else if (props.fetchEnabled && props.url) {
+    const options = await getRecords();
+    updateOptions(options);
   }
-});
+}, { deep: true, immediate: true });
 const refetch = async () => {
   if (props.url) {
     const options = await getRecords();
-    defaultOptions.value = options;
-    displayedOptions.value = options;
+    updateOptions(options);
     return options;
   }
   return [];
@@ -252,22 +260,11 @@ defineExpose({
         validate-on="input lazy"
       >
         <MultiSelect
-          ref="teleportRef"
           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"
+          v-bind="sharedMultiSelectProps"
           class="app-custom-input position-absolute app-z-7 app-custom-input-teleport"
           :class="{
-  'app-custom-input-error': error || isValid.value === false || errorState
+  'app-custom-input-error': hasError(isValid.value)
 }"
           :style="{
   left: `${customPosition().left}px`,
@@ -275,25 +272,19 @@ defineExpose({
   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()"
-          @close="showTeleport = false, isOpen = false"
+          @search-change="handleSearchChange"
+          @select="handleSelect"
+          @close="handleClose"
         >
           <template #caret>
             <span class="multiselect-arrow">
-              <VIcon class="icon" size="19">tabler-chevron-down</VIcon>
+              <VIcon
+                icon="tabler-chevron-down"
+                class="icon"
+                size="19"
+                :color="hasError(isValid.value) ? 'error' : ''"
+              />
             </span>
           </template>
 
@@ -328,13 +319,16 @@ defineExpose({
 
           <template #clear>
             <div
-              v-if="(Array.isArray(value) ? value.length > 0 : !!value) && !disabled && clearable"
+              v-if="hasValue && !disabled && clearable"
               class="multiselect-clear cursor-pointer"
               @mousedown.prevent.stop="value = null"
             >
-              <VIcon class="icon" size="19">
-                tabler-x
-              </VIcon>
+              <VIcon
+                icon="tabler-x"
+                class="icon"
+                size="19"
+                :color="hasError(isValid.value) ? 'error' : ''"
+              />
             </div>
           </template>
 
@@ -348,9 +342,7 @@ defineExpose({
 
           <template v-if="isLoading" #beforeList>
             <div class="app-h-50px w-100">
-              <LoadingBar
-                :is-loading="isLoading"
-              />
+              <LoadingBar :is-loading="isLoading" />
             </div>
           </template>
 
@@ -383,46 +375,30 @@ defineExpose({
       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" />
+        <div v-if="isOpen && !teleported" 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"
+          v-bind="sharedMultiSelectProps"
           class="app-custom-input"
           :class="{
-  'app-custom-input-error': error || isValid.value === false || errorState,
+  'app-custom-input-error': hasError(isValid.value),
   '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()"
+          @open="handleOpen"
+          @close="handleClose"
+          @search-change="handleSearchChange"
+          @select="handleSelect"
         >
           <template #caret>
             <span class="multiselect-arrow">
-              <VIcon class="icon" size="19">tabler-chevron-down</VIcon>
+              <VIcon
+                icon="tabler-chevron-down"
+                class="icon"
+                size="19"
+                :color="hasError(isValid.value) ? 'error' : ''"
+              />
             </span>
           </template>
 
@@ -460,13 +436,16 @@ defineExpose({
 
           <template #clear>
             <div
-              v-if="(Array.isArray(value) ? value.length > 0 : !!value) && !disabled && clearable"
+              v-if="hasValue && !disabled && clearable"
               class="multiselect-clear cursor-pointer"
               @mousedown.prevent.stop="value = null"
             >
-              <VIcon class="icon" size="19">
-                tabler-x
-              </VIcon>
+              <VIcon
+                icon="tabler-x"
+                class="icon"
+                size="19"
+                :color="hasError(isValid.value) ? 'error' : ''"
+              />
             </div>
           </template>
 
@@ -480,9 +459,7 @@ defineExpose({
 
           <template v-if="isLoading" #beforeList>
             <div class="app-h-50px w-100">
-              <LoadingBar
-                :is-loading="isLoading"
-              />
+              <LoadingBar :is-loading="isLoading" />
             </div>
           </template>
 
@@ -515,16 +492,22 @@ defineExpose({
 <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 {
-  display: none !important;
+  margin: 0;
+  padding-top: 0;
 }
 .app-custom-input-teleport .multiselect__content-wrapper {
   margin-top: 53px;
-  z-index: 9999;
+  z-index: 10;
   display: block !important;
 }
 
@@ -561,7 +544,7 @@ defineExpose({
   font-size: 13px !important;
   background-color: rgba(var(--v-theme-surface));
   font-weight: 100 !important;
-  min-height: 43px;
+  min-height: 40px;
   border-radius: 6px;
 }
 .app-custom-input .multiselect__tags:hover {

package/dist/components/forms/AutocompleteInput.vue.d.ts

@@ -35,12 +35,14 @@ type __VLS_Props = {
     isLoading?: boolean;
     disableIfEmpty?: boolean;
     clearable?: boolean;
+    showNoOptions?: boolean;
+    showNoResults?: boolean;
 };
-declare var __VLS_71: string | number, __VLS_72: any, __VLS_136: string | number, __VLS_137: any;
+declare var __VLS_69: string | number, __VLS_70: any, __VLS_134: string | number, __VLS_135: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_71>]?: (props: typeof __VLS_72) => any;
+    [K in NonNullable<typeof __VLS_69>]?: (props: typeof __VLS_70) => any;
 } & {
-    [K in NonNullable<typeof __VLS_136>]?: (props: typeof __VLS_137) => any;
+    [K in NonNullable<typeof __VLS_134>]?: (props: typeof __VLS_135) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     records: Ref<{

package/dist/components/forms/LicensePlateInput.vue

@@ -63,6 +63,18 @@ const handleInput = (e, index) => {
     updateModelAt(index, value);
   }
 };
+const handleKeydown = (e, index) => {
+  if (e.key === "Delete" || e.key === "Del" || e.key === "Backspace") {
+    e.preventDefault();
+    const currentValue = model.value?.[index] ?? "";
+    if (!currentValue && index > 0) {
+      const prevInput = document.getElementById(`license-${props.customId || ""}-${index - 1}`);
+      prevInput?.focus();
+    } else if (currentValue) {
+      updateModelAt(index, "");
+    }
+  }
+};
 const clear = () => {
   model.value = null;
 };
@@ -108,6 +120,7 @@ watch(() => model.value, (newVal) => {
             :maxlength="index === 3 ? 4 : 1"
             :placeholder="index === 3 ? t('inputs.numbers') : t('inputs.character')"
             @input="handleInput($event, index)"
+            @keydown="handleKeydown($event, index)"
           >
           <a
             v-if="model?.some(Boolean)"
@@ -127,8 +140,8 @@ watch(() => model.value, (newVal) => {
           v-if="!hideDetails"
           class="mt-1"
           color="error"
-          :messages="errorMessages || validationErrors.value"
-          :active="!isValid.value"
+          :messages="[...validationErrors.value, errorMessages]"
+          :active="isValid.value === false || errorMessages?.length !== 0"
         />
       </div>
     </VValidation>

package/dist/components/table/DataTable.vue

@@ -246,7 +246,7 @@ defineExpose({
 
               <template #item.created_at="{ item }">
                 <div class="d-flex text-pre-line">
-                  {{ formatDate(item.raw?.created_at) }}
+                  {{ formatDate(item?.created_at) }}
                 </div>
               </template>
 

package/dist/components/table/EditableDataTable.vue

@@ -34,7 +34,8 @@ const moduleIdentifier = computed(() => props.module ?? "rows");
     item-value="id"
     class="secondary-table"
   >
-    <template v-for="header in headers" #[`column.${header.key}`] :key="`header.${header.key}`">
+    <!-- headers -->
+    <template v-for="header in headers" #[`header.${header.key}`] :key="`header.${header.key}`">
       <div class="d-flex align-center gap-1">
         {{ header.title }}
 
@@ -42,7 +43,7 @@ const moduleIdentifier = computed(() => props.module ?? "rows");
 
         <VTooltip
           v-if="header.tooltip"
-          content-class="bg-secondary !app-max-w-200px text-center app-font-size-12 text-pre-line"
+          :content-class="`text-center text-pre-line ${header.tooltipClass}`"
         >
           <template #activator="{ props: tooltipProps }">
             <div class="position-relative">
@@ -62,28 +63,12 @@ const moduleIdentifier = computed(() => props.module ?? "rows");
       </div>
     </template>
 
+    <!-- rows -->
     <template
       v-for="(header) in headers"
-      #[`item.${header.key}`]="{ item, index }"
-      :key="`row.${index}.${header.key}`"
+      #[`item.${header.key}`]="{ index }"
+      :key="`row.item.${index}.${header.key}`"
     >
-      <span
-        v-if="header.key === 'index'"
-        :key="`row.${index}.${header.key}`"
-        class="px-2 d-flex align-center justify-center h-100 app-border-silver"
-        style="border-inline-start: 0px !important;"
-      >
-        {{ `${index + 1 < 10 ? "0" : ""}${index + 1}` }}
-      </span>
-
-      <span
-        v-if="header.type === 'display'"
-        :key="`row.${index}.${header.key}`"
-        class="px-2 d-flex align-center justify-center h-100 app-border-silver"
-      >
-        {{ item[header.key] }}
-      </span>
-
       <!-- eslint-disable vue/no-mutating-props -->
       <template v-if="header?.fields && header?.fields?.length > 0">
         <div
@@ -120,6 +105,7 @@ const moduleIdentifier = computed(() => props.module ?? "rows");
       <!-- eslint-enable vue/no-mutating-props -->
     </template>
 
+    <!-- other slots -->
     <template v-for="(_, name) in $slots" #[name]="slotProps">
       <slot :name="name" v-bind="slotProps || {}" />
     </template>
@@ -136,8 +122,8 @@ const moduleIdentifier = computed(() => props.module ?? "rows");
   border-bottom: 0px solid rgba(var(--v-table-divider)) !important;
 }
 
-.v-table__wrapper {
-  overflow: inherit !important;
+:deep(.v-table__wrapper) {
+  overflow: visible !important;
 }
 
 table tr th {
@@ -150,17 +136,15 @@ table tr th {
 
 .secondary-table :deep(table) {
   width: 100% !important;
-  border-collapse: collapse !important;
   border-spacing: 0 !important;
   border: 0px solid rgb(var(--v-theme-silver)) !important;
-  border-collapse: collapse !important;
   font-size: 13px !important;
 }
 .secondary-table :deep(table) thead th {
   border-top: 1px solid rgb(var(--v-theme-silver)) !important;
   border-left: 1px solid rgb(var(--v-theme-silver)) !important;
   border-right: 1px solid rgb(var(--v-theme-silver)) !important;
-  border-bottom: 0px !important;
+  border-bottom: 0px solid rgb(var(--v-theme-silver)) !important;
 }
 .secondary-table :deep(table) tbody tr:first-child {
   display: none !important;
@@ -172,15 +156,15 @@ table tr th {
   padding: 14px 16px !important;
   height: fit-content !important;
   top: 80px !important;
-  border: 0px solid rgb(var(--v-theme-silver)) !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
   background-color: rgb(var(--v-theme-gray-200)) !important;
   color: rgb(var(--v-theme-on-surface)) !important;
 }
 .secondary-table :deep(table) td:first-child {
-  border-inline-start: 1px solid rgb(var(--v-theme-silver)) !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
 }
 .secondary-table :deep(table) td:last-child {
-  border-top: 0px solid rgb(var(--v-theme-silver)) !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
 }
 .secondary-table :deep(table) td {
   padding: 0px !important;
@@ -264,7 +248,6 @@ table tr th {
   height: 100%;
   border-color: rgba(var(--v-theme-silver));
   border-radius: 0;
-  padding-top: 0px !important;
 }
 :deep(.app-custom-input) .multiselect__tags .multiselect__single {
   margin-bottom: 0px;
@@ -312,11 +295,6 @@ table tr th {
   --v-field-border-opacity: 1 !important;
 }
 
-.app-input-table {
-  min-width: 250px !important;
-  max-width: 250px !important;
-}
-
 .app-custom-input-teleport .multiselect__tags {
   border-color: rgba(var(--v-theme-silver)) !important;
   border-radius: 0;

package/dist/components/table/EditableDataTableRow.vue

@@ -101,6 +101,7 @@ const placeholder = (header) => {
     flat
     hide-details
   />
+  
   <AppNumberField
     v-if="header.type === 'number'"
     v-model="item[header.key]"
@@ -158,7 +159,6 @@ const placeholder = (header) => {
     :error-messages="errorMessages"
     :error="error"
     :disable-if-empty="header.disableIfEmpty"
-    teleported
     hide-details
     :clearable="header.clearable"
   />
@@ -185,7 +185,6 @@ const placeholder = (header) => {
     :error="error"
     :disable-if-empty="header.disableIfEmpty"
     grouped
-    teleported
     hide-details
     :clearable="header.clearable"
   />
@@ -249,4 +248,20 @@ const placeholder = (header) => {
     :error-messages="errorMessages"
     hide-details
   />
+
+  <span
+    v-if="header.key === 'index'"
+    :key="`row.${index}.${header.key}`"
+    class="px-2 d-flex align-center justify-center h-100"
+  >
+    {{ `${index + 1 < 10 ? "0" : ""}${index + 1}` }}
+  </span>
+
+  <span
+    v-if="header.type === 'display'"
+    :key="`row.${index}.${header.key}`"
+    class="px-2 d-flex align-center justify-center h-100"
+  >
+    {{ item[header.key] }}
+  </span>
 </template>

package/dist/styles/core/template/_components.scss

@@ -626,7 +626,7 @@ $btn-hover-overlay-opacity: (
 
   &:not(.v-input--disabled) .v-switch__track {
     border: 1px solid rgba(var(--v-border-color), var(--v-switch-opacity));
-    background-color: rgb(var(--v-theme-surface));
+    background-color: rgba(var(--v-theme-on-surface),var(--v-focus-opacity));
     opacity: 1;
   }
 
@@ -636,9 +636,7 @@ $btn-hover-overlay-opacity: (
     --v-selection-control-size: 1.5rem;
 
     .v-switch__thumb {
-      background: rgb(var(--v-theme-on-success));
-      // block-size: 1rem;
-      // inline-size: 1rem;
+      background: rgb(var(--v-theme-on-success)) !important;
     }
   }
 
@@ -1042,3 +1040,13 @@ $btn-hover-overlay-opacity: (
 ::-webkit-resizer {
   background: transparent;
 }
+
+
+.v-tooltip > .v-overlay__content {
+  color: rgb(var(--v-theme-on-secondary)) !important;
+  font-size: 13px !important;
+}
+
+.v-icon {
+  outline: none !important;
+}

package/dist/styles/core/template/index.css

@@ -18397,7 +18397,7 @@ body {
 }
 .v-switch.v-switch--inset:not(.v-input--disabled) .v-switch__track {
   border: 1px solid rgba(var(--v-border-color), var(--v-switch-opacity));
-  background-color: rgb(var(--v-theme-surface));
+  background-color: rgba(var(--v-theme-on-surface), var(--v-focus-opacity));
   opacity: 1;
 }
 .v-switch.v-switch--inset .v-selection-control__input {
@@ -18405,7 +18405,7 @@ body {
   --v-selection-control-size: 1.5rem;
 }
 .v-switch.v-switch--inset .v-selection-control__input .v-switch__thumb {
-  background: rgb(var(--v-theme-on-success));
+  background: rgb(var(--v-theme-on-success)) !important;
 }
 .v-switch.v-switch--inset .v-selection-control--dirty .v-switch__track {
   border-color: rgba(var(--v-border-color), var(--v-switch-opacity));
@@ -18768,6 +18768,15 @@ body {
   background: transparent;
 }
 
+.v-tooltip > .v-overlay__content {
+  color: rgb(var(--v-theme-on-secondary)) !important;
+  font-size: 13px !important;
+}
+
+.v-icon {
+  outline: none !important;
+}
+
 .v-timeline-item .app-timeline-title {
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
   font-size: 15px;

package/dist/types.d.ts

@@ -124,6 +124,7 @@ export type EditableDataTableItem = {
 	renderDataOnBeforeMount?: boolean
 	showDescription?: boolean
 	tooltip?: string
+	tooltipClass?: string
 	clearable?: boolean
 	disabled?: boolean
 	maxlength?: number

package/dist/utils/formValidation.d.ts

@@ -4,4 +4,5 @@ export declare function formValidator(errors: ErrorResponseFiled[] | undefined,
     getMessage: () => string;
     hasError: () => boolean;
 };
-export declare function getErrorMessage(errors: ErrorResponseFiled[] | undefined, key: string): string;
+export declare function getErrorMessage(errors: ErrorResponseFiled[] | undefined, key: string): string | undefined;
+export declare function getErrorMessages(errors: ErrorResponseFiled[] | undefined, keys: string[]): string | undefined;

package/dist/utils/formValidation.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formValidator = formValidator;
 exports.getErrorMessage = getErrorMessage;
+exports.getErrorMessages = getErrorMessages;
 function formValidator(errors = [], key) {
   const getError = () => errors?.find(e => e.field == key);
   const getMessage = () => getError()?.message || "";
@@ -16,5 +17,14 @@ function formValidator(errors = [], key) {
   };
 }
 function getErrorMessage(errors = [], key) {
-  return errors?.find(e => e.field == key)?.message || "";
+  return errors?.find(e => e.field == key)?.message || void 0;
+}
+function getErrorMessages(errors = [], keys) {
+  for (const key of keys) {
+    const error = errors?.find(e => e.field == key);
+    if (error?.message) {
+      return error.message;
+    }
+  }
+  return void 0;
 }

package/dist/utils/formValidation.mjs

@@ -9,5 +9,14 @@ export function formValidator(errors = [], key) {
   };
 }
 export function getErrorMessage(errors = [], key) {
-  return errors?.find((e) => e.field == key)?.message || "";
+  return errors?.find((e) => e.field == key)?.message || void 0;
+}
+export function getErrorMessages(errors = [], keys) {
+  for (const key of keys) {
+    const error = errors?.find((e) => e.field == key);
+    if (error?.message) {
+      return error.message;
+    }
+  }
+  return void 0;
 }

package/dist/utils/utils.d.ts

@@ -7,3 +7,5 @@ export declare const buildFormData: <T>(data: T | T[], excludedKeys?: string[],
 export declare const stripLeadingZero: (mobile: string) => string;
 export declare const cloneObjectDeep: <T>(obj: T) => T;
 export declare const mergeDeep: (target: any, source: any) => any;
+export declare const normalizeArabicText: (text: string | number) => string;
+export declare const searchArabicText: (value: string | number, query: string) => boolean;

package/dist/utils/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stripLeadingZero = exports.mergeDeep = exports.isNullOrUndefined = exports.isEmptyArray = exports.isEmpty = exports.generateUniqueId = exports.generateRandomId = exports.cloneObjectDeep = exports.buildFormData = void 0;
+exports.stripLeadingZero = exports.searchArabicText = exports.normalizeArabicText = exports.mergeDeep = exports.isNullOrUndefined = exports.isEmptyArray = exports.isEmpty = exports.generateUniqueId = exports.generateRandomId = exports.cloneObjectDeep = exports.buildFormData = void 0;
 const generateRandomId = length => {
   const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   let result = "";
@@ -81,4 +81,20 @@ const mergeDeep = (target, source) => {
   }
   return output;
 };
-exports.mergeDeep = mergeDeep;
+exports.mergeDeep = mergeDeep;
+const normalizeArabicText = text => {
+  if (typeof text === "number") {
+    return text.toString();
+  }
+  return text.trim().replace(/أ|ا|إ|آ/g, "\u0627").replace(/ي|ى|ئ/g, "\u064A").replace(/ة/g, "\u0647");
+};
+exports.normalizeArabicText = normalizeArabicText;
+const searchArabicText = (value, query) => {
+  if (!value || !query) {
+    return false;
+  }
+  const normalizedValue = normalizeArabicText(value.toString()).toLowerCase();
+  const normalizedQuery = normalizeArabicText(query).toLowerCase();
+  return normalizedValue.includes(normalizedQuery);
+};
+exports.searchArabicText = searchArabicText;

package/dist/utils/utils.mjs

@@ -65,3 +65,17 @@ export const mergeDeep = (target, source) => {
   }
   return output;
 };
+export const normalizeArabicText = (text) => {
+  if (typeof text === "number") {
+    return text.toString();
+  }
+  return text.trim().replace(/أ|ا|إ|آ/g, "\u0627").replace(/ي|ى|ئ/g, "\u064A").replace(/ة/g, "\u0647");
+};
+export const searchArabicText = (value, query) => {
+  if (!value || !query) {
+    return false;
+  }
+  const normalizedValue = normalizeArabicText(value.toString()).toLowerCase();
+  const normalizedQuery = normalizeArabicText(query).toLowerCase();
+  return normalizedValue.includes(normalizedQuery);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@winchsa/ui",
-    "version": "0.1.35",
+    "version": "0.1.37",
     "type": "module",
     "private": false,
     "publishConfig": {