@winchsa/ui 0.1.33 → 0.1.34

package/dist/components/forms/PasswordInput.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed, ref } from "vue";
+import AppTextField from "./AppTextField.vue";
+const props = defineProps({
+  modelValue: { type: [String, null], required: false, default: null },
+  label: { type: String, required: false, default: "" }
+});
+const emit = defineEmits(["update:modelValue"]);
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value2) {
+    emit("update:modelValue", value2 || "");
+  }
+});
+const isPasswordVisible = ref(false);
+</script>
+
+<template>
+  <AppTextField
+    v-bind="$attrs"
+    v-model="value"
+    :label="label"
+    :type="isPasswordVisible ? 'text' : 'password'"
+    :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
+    @click:append-inner="isPasswordVisible = !isPasswordVisible"
+  />
+</template>

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    modelValue?: string | null;
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    modelValue: [number | string, number | string] | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/forms/RangeInput.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import AppTextField from "./AppTextField.vue";
+import AppLabel from "./AppLabel.vue";
+const { t } = useI18n();
+const props = defineProps({
+  modelValue: { type: null, required: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const from = ref();
+const to = ref();
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value) {
+      from.value = value[0] !== void 0 ? value[0] : void 0;
+      to.value = value[1] !== void 0 ? value[1] : void 0;
+    } else {
+      from.value = void 0;
+      to.value = void 0;
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <AppLabel
+    :class="$attrs.class"
+    :label="$attrs.label"
+  >
+    <div class="d-flex gap-2" style="margin-top: 0.125rem;">
+      <AppTextField
+        v-model="from"
+        :placeholder="t('inputs.from')"
+        class="app-font-size-13"
+        @input="emits('update:modelValue', [from, to])"
+      />
+      <AppTextField
+        v-model="to"
+        class="app-font-size-13"
+        :placeholder="t('inputs.to')"
+        @input="emits('update:modelValue', [from, to])"
+      />
+    </div>
+  </AppLabel>
+</template>

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    modelValue: [number | string, number | string] | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    tabs: {
+        title: string;
+        key: string;
+        color?: string;
+        icon?: string;
+        leadingIcon?: string;
+        trailingIcon?: string;
+    }[];
+};
+declare var __VLS_21: string, __VLS_22: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/Tabs.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { ref } from "vue";
+import { VCol, VRow } from "vuetify/components";
+import BaseButton from "./BaseButton.vue";
+defineProps({
+  tabs: { type: Array, required: true }
+});
+const activeTab = ref(0);
+const getColor = (index, originalColor) => {
+  return index === activeTab.value ? { color: originalColor } : { variant: "plain", color: "secondary" };
+};
+const setActiveTab = (index) => {
+  activeTab.value = index;
+};
+</script>
+
+<template>
+  <div>
+    <VRow>
+      <VCol v-for="(tab, index) in tabs" :key="`btn-${index}`">
+        <BaseButton
+          v-bind="{ ...tab, ...getColor(index, tab.color) }"
+          class="w-100 h-100 py-2 px-5"
+          @click="setActiveTab(index)"
+        />
+      </VCol>
+    </VRow>
+
+    <div class="h-100 mt-4 w-100">
+      <div v-if="activeTab !== null" :key="tabs[activeTab].key" class="h-100 w-100">
+        <slot :name="tabs[activeTab].key" />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    tabs: {
+        title: string;
+        key: string;
+        color?: string;
+        icon?: string;
+        leadingIcon?: string;
+        trailingIcon?: string;
+    }[];
+};
+declare var __VLS_21: string, __VLS_22: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,18 @@
+import '@vuepic/vue-datepicker/dist/main.css';
+type __VLS_Props = {
+    errorMessages?: string | string[];
+    showIcon?: boolean;
+    hasDefaults?: boolean;
+    placeholder?: string;
+    valueIn24?: boolean;
+    fillInFocus?: boolean;
+    hideErrorMessage?: boolean;
+    isAppRtl?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/forms/TimePicker.vue

@@ -0,0 +1,370 @@
+<script setup>
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { computed, onBeforeUnmount, onMounted, ref, watch, useAttrs } from "vue";
+import { VTextField, VMessages } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+import { watchOnce } from "@vueuse/core";
+import { generateUniqueId } from "../../utils/utils";
+const { t } = useI18n();
+const props = defineProps({
+  errorMessages: { type: [String, Array], required: false, default: "" },
+  showIcon: { type: Boolean, required: false, default: true },
+  hasDefaults: { type: Boolean, required: false, default: true },
+  placeholder: { type: String, required: false },
+  valueIn24: { type: Boolean, required: false, default: true },
+  fillInFocus: { type: Boolean, required: false, default: true },
+  hideErrorMessage: { type: Boolean, required: false },
+  isAppRtl: { type: Boolean, required: false }
+});
+const errors = ref([]);
+const hasError = computed(() => errors.value.length > 0);
+watch(() => props.errorMessages, () => {
+  errors.value = props.errorMessages === "object" ? [...props.errorMessages] : props.errorMessages;
+});
+const emit = defineEmits(["update:model-value"]);
+const attrs = useAttrs();
+const time = ref(props.hasDefaults ? {
+  hours: (/* @__PURE__ */ new Date()).getHours(),
+  minutes: (/* @__PURE__ */ new Date()).getMinutes()
+} : null);
+const inputValue = ref("");
+const ampm = ref("am");
+const resetTime = () => {
+  time.value = {};
+};
+const formatTime = (value) => {
+  ampm.value = (value?.hours || 0) >= 12 ? "PM" : "AM";
+  let adjustedHours = (value?.hours || 0) % 12;
+  adjustedHours = adjustedHours === 0 ? 12 : adjustedHours;
+  const paddedHours = adjustedHours.toString().padStart(2, "0");
+  const paddedMinutes = value?.minutes?.toString().padStart(2, "0");
+  inputValue.value = `${paddedHours}:${paddedMinutes} ${ampm.value}`;
+  emit("update:model-value", props.valueIn24 ? `${value?.hours?.toString().padStart(2, "0")}:${value?.minutes?.toString().padStart(2, "0")}` : inputValue.value);
+};
+const changeAmPm = (value) => {
+  ampm.value = value;
+};
+const guid = generateUniqueId();
+const elementId = computed(() => {
+  const attrs2 = useAttrs();
+  const _elementIdToken = attrs2.id || attrs2.label;
+  return _elementIdToken ? `AppTextField-${_elementIdToken}-${guid}` : `timepicker-${guid}`;
+});
+const initializeTime = (value) => {
+  if (value) {
+    const initAmPm = value.split(" ")[1]?.toLowerCase();
+    const [hours, minutes] = value.split(" ")[0]?.split(":") || [];
+    ampm.value = initAmPm;
+    time.value = {
+      hours: initAmPm === "pm" ? parseInt(hours + 12) : parseInt(hours),
+      minutes: parseInt(minutes)
+    };
+    formatTime(time.value);
+  } else {
+    formatTime(time.value);
+  }
+};
+watchOnce(() => attrs.modelValue, (value) => {
+  initializeTime(value);
+}, {
+  immediate: true
+});
+const timePicker = ref();
+const isFocus = ref(false);
+const clear = () => {
+  timePicker.value.closeMenu();
+};
+const customPosition = () => {
+  const timepickerInputElement = document.querySelector(`#${elementId.value}`);
+  const rect = timepickerInputElement?.getBoundingClientRect();
+  return {
+    top: (rect?.top || 0) + window.pageYOffset + (rect?.height || 100) / 2 + 46 / 2,
+    left: rect?.left + timepickerInputElement?.offsetWidth / 2 - 120
+  };
+};
+const closeMenu = (event) => {
+  const vCalendarMenu = document.getElementById(`vc-calendar-container-${elementId.value}`);
+  const vCalendarInput = document.getElementById(`${elementId.value}`);
+  if (!vCalendarMenu?.contains(event.target) && !vCalendarInput?.contains(event.target)) {
+    isFocus.value = false;
+  }
+};
+const focusInputField = () => {
+  isFocus.value = true;
+  if (props.fillInFocus && !inputValue.value) {
+    formatTime({
+      hours: (/* @__PURE__ */ new Date()).getHours(),
+      minutes: (/* @__PURE__ */ new Date()).getMinutes()
+    });
+  }
+};
+onMounted(() => {
+  document.addEventListener("click", closeMenu);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("click", closeMenu);
+});
+</script>
+
+<template>
+  <div class="d-flex flex-column">
+    <div dir="ltr" class="h-100">
+      <div dir="ltr" class="d-flex justify-center align-center gap-2 h-100" :class="{
+  'rtl-input': isAppRtl
+}">
+        <VTextField
+          v-bind="{ ...$attrs }"
+          :id="elementId"
+          v-model="inputValue"
+          :placeholder="placeholder || t('inputs.time')"
+          :append-inner-icon="$attrs['append-inner-icon'] || 'tabler-clock'"
+          style="padding-block: 0.125rem;"
+          dir="ltr"
+          hide-details
+          maxlength="5"
+          :error-messages="errorMessages"
+          readonly
+          @click="isFocus = true"
+          @click:clear="resetTime"
+          @focus="focusInputField"
+        >
+          <template #details>
+            <span class="app-h-1" />
+          </template>
+        </VTextField>
+      </div>
+      <Teleport to="body">
+        <div
+          v-if="isFocus"
+          :id="`vc-calendar-container-${elementId}`"
+          class="position-absolute app-z-1000"
+          :style="{
+  left: `${customPosition().left - 20}px`,
+  top: `${customPosition().top + 10}px`
+}"
+        >
+          <div class="position-relative">
+            <div class="dp-custom-arrow" />
+            <VueDatePicker
+              :id="`timepicker-${elementId}`"
+              ref="timePicker"
+              v-model="time"
+              time-picker
+              class="app-w-150px"
+              :auto-position="false"
+              auto-apply
+              :is-24="false"
+              no-hours-overlay
+              inline
+              no-minutes-overlay
+              :hide-input-icon="!showIcon"
+              :teleport="true"
+              :ui="{
+  menu: 'app-dir-ltr'
+}"
+              @update:model-value="formatTime"
+              @cleared="clear"
+              @am-pm-change="changeAmPm"
+            >
+              <template #am-pm-button="{ toggle, value }">
+                <div class="dp__time_col dp__time_col_block dp__time_col_reg_with_button dp__am_bm_col">
+                  <button
+                    type="button"
+                    class="dp__btn dp__inc_dec_button"
+                    data-test="minutes-time-inc-btn-0"
+                    aria-label="Change Time"
+                    tabindex="0"
+                    @click="toggle"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"
+                    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 15l6 -6l6 6" /></svg>
+                  </button>
+                  <button>
+                    {{ value }}
+                  </button>
+                  <button
+                    type="button"
+                    class="dp__btn dp__inc_dec_button"
+                    data-test="minutes-time-dec-btn-0"
+                    aria-label="Change Time"
+                    tabindex="0"
+                    @click="toggle"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"
+                    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 9l6 6l6 -6" /></svg>
+                  </button>
+                </div>
+              </template>
+              <template #arrow-up>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"
+                ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 15l6 -6l6 6" /></svg>
+              </template>
+              <template #arrow-down>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"
+                ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 9l6 6l6 -6" /></svg>
+              </template>
+            </VueDatePicker>
+          </div>
+        </div>
+      </Teleport>
+    </div>
+
+    <VMessages
+      v-if="!hideErrorMessage"
+      :messages="typeof errors === 'object' ? errors.join(', ') : errors"
+      :active="hasError"
+      :class="isAppRtl ? 'text-right mr-2' : 'text-left ml-2'"
+    />
+  </div>
+</template>
+
+<style scoped>
+:deep(.v-field__append-inner) {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+
+:deep(.v-field__input input) {
+  text-align: start !important;
+}
+
+/* Apply text-align: end when RTL using the :deep modifier */
+.rtl-input :deep(.v-field__input input) {
+  text-align: end !important;
+}
+
+:deep(.v-input__control .v-field .v-field__clearable) {
+  inset-inline-start: -5px !important;
+}
+
+.icon {
+  background-color: transparent !important;
+}
+</style>
+
+<style>
+.dp-custom-arrow {
+  width: 15px;
+  height: 15px;
+  background: rgba(var(--v-theme-surface));
+  position: absolute;
+  z-index: 999999;
+  border-top: 1px solid rgba(var(--v-theme-gray-300));
+  border-left: 1px solid rgba(var(--v-theme-gray-300));
+  left: 50%;
+  top: -7px;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.dp--menu-wrapper {
+  box-shadow: var(--vc-shadow-lg) !important;
+}
+
+.dp__overlay {
+  height: 100px !important;
+}
+
+.dp__time_col {
+  font-size: 15px !important;
+  padding: 0 8px !important;
+}
+
+.dp__am_bm_col {
+  padding-inline-start: 35px !important;
+  padding-inline-end: 5px !important;
+}
+
+.dp__time_col_reg_block {
+  padding: 0 5px !important;
+}
+
+.dp__input_wrap {
+  padding: 2px 0 !important;
+}
+
+.dp__input {
+  --dp-border-color-hover: #000 !important;
+  --dp-border-color-focus: rgb(var(--v-theme-primary)) !important;
+  height: 44px !important;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-right: 10px;
+  padding-left: 10px;
+  font-size: 13px !important;
+  border-radius: 6px !important;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color), 0.35);
+  text-align: end !important;
+}
+
+.dp__input_focus {
+  --dp-border-color-focus: rgb(var(--v-theme-primary)) !important;
+  border-color: var(--dp-border-color-focus) !important;
+}
+
+.dp--clear-btn {
+  opacity: 0;
+  inset-inline-end: unset !important;
+  inset-inline-start: 2px !important;
+  background-color: rgb(var(--v-theme-surface));
+  transition: all 0.5s;
+}
+.dp--clear-btn .dp__input_icons {
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+}
+
+.dp__main:active .dp--clear-btn, .dp__main:focus .dp--clear-btn, .dp__main:focus-within .dp--clear-btn {
+  opacity: 1 !important;
+  transition: all 0.5s;
+}
+
+.dp__btn:hover {
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+
+.dp__overlay {
+  height: fit-content !important;
+}
+</style>

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

@@ -0,0 +1,18 @@
+import '@vuepic/vue-datepicker/dist/main.css';
+type __VLS_Props = {
+    errorMessages?: string | string[];
+    showIcon?: boolean;
+    hasDefaults?: boolean;
+    placeholder?: string;
+    valueIn24?: boolean;
+    fillInFocus?: boolean;
+    hideErrorMessage?: boolean;
+    isAppRtl?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/table/DataTable.d.vue.ts

@@ -0,0 +1,70 @@
+import type { FormFilter, Header, ErrorResponseFiled, Pagination, ReplaceableItem } from '../../types';
+type __VLS_Props = {
+    headers: Header[];
+    formFilters?: FormFilter[];
+    url?: string;
+    queryParams?: Record<string, string>;
+    enableButtons?: boolean;
+    enableButtonsFilter?: boolean;
+    enablePageSizeOptions?: boolean;
+    enableActionButtons?: boolean;
+    enableBaseButtons?: boolean;
+    secondaryStyle?: boolean;
+    replaceNullWithDash?: boolean;
+    withoutQueryParams?: boolean;
+    showSelect?: boolean;
+    returnObject?: boolean;
+    stickyActions?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_19: {}, __VLS_27: {}, __VLS_59: {}, __VLS_101: string | number, __VLS_102: any, __VLS_115: {
+    totals: {
+        [key: string]: number;
+    } | undefined;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_101>]?: (props: typeof __VLS_102) => any;
+} & {
+    buttons?: (props: typeof __VLS_19) => any;
+} & {
+    filters?: (props: typeof __VLS_27) => any;
+} & {
+    'action-buttons'?: (props: typeof __VLS_59) => any;
+} & {
+    'inside-bottom'?: (props: typeof __VLS_115) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    filterQueryString: import("vue").ComputedRef<string>;
+    isLoading: import("vue").Ref<boolean, boolean> | import("vue").Ref<false, false> | import("vue").Ref<true, true>;
+    filters: import("vue").Ref<Record<string, string | number | string[] | [] | number[] | object[] | (string | number | null)[] | null | undefined>, Record<string, string | number | string[] | [] | number[] | object[] | (string | number | null)[] | null | undefined>>;
+    refresh: (options?: import("@tanstack/vue-query").RefetchOptions) => Promise<import("@tanstack/vue-query").QueryObserverResult<{
+        status: {
+            success: boolean;
+            code: number;
+            message: string;
+            error_key: string;
+            errors_list?: ErrorResponseFiled[];
+        };
+        totals?: {
+            [key: string]: number;
+        };
+        pagination: Pagination;
+        rows: ReplaceableItem[];
+    }, Error>>;
+    totals: import("vue").Ref<Record<string, number>, Record<string, number>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};