@winchsa/ui 0.1.39 → 0.1.41

package/dist/components/cards/AppCardActions.d.vue.ts

@@ -15,12 +15,12 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_76) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    refresh: (hideOverlay: () => void) => any;
     collapsed: (isContentCollapsed: boolean) => any;
+    refresh: (hideOverlay: () => void) => any;
     trash: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onRefresh?: ((hideOverlay: () => void) => any) | undefined;
     onCollapsed?: ((isContentCollapsed: boolean) => any) | undefined;
+    onRefresh?: ((hideOverlay: () => void) => any) | undefined;
     onTrash?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/cards/AppCardActions.vue.d.ts

@@ -15,12 +15,12 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_76) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    refresh: (hideOverlay: () => void) => any;
     collapsed: (isContentCollapsed: boolean) => any;
+    refresh: (hideOverlay: () => void) => any;
     trash: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onRefresh?: ((hideOverlay: () => void) => any) | undefined;
     onCollapsed?: ((isContentCollapsed: boolean) => any) | undefined;
+    onRefresh?: ((hideOverlay: () => void) => any) | undefined;
     onTrash?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/cards/InputCard.d.vue.ts

@@ -6,9 +6,11 @@ type __VLS_Props = {
     disabled?: boolean;
     info?: string;
 };
-declare var __VLS_12: {};
+declare var __VLS_1: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_12) => any;
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_14) => 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>;

package/dist/components/cards/InputCard.vue

@@ -16,9 +16,11 @@ const colorStyle = computed(() => props.color ? `text-${props.color}` : "");
 
 <template>
   <div>
-    <VLabel v-if="title" class="text-subtitle-2 text-capitalize">
-      {{ title }}
-    </VLabel>
+    <slot name="title">
+      <VLabel v-if="title" class="text-subtitle-2 text-capitalize">
+        {{ title }}
+      </VLabel>
+    </slot>
 
     <AppCard
       class="border px-4 py-0 mt-2 text-subtitle-2 d-flex align-center app-input-card"

package/dist/components/cards/InputCard.vue.d.ts

@@ -6,9 +6,11 @@ type __VLS_Props = {
     disabled?: boolean;
     info?: string;
 };
-declare var __VLS_12: {};
+declare var __VLS_1: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_12) => any;
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_14) => 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>;

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

@@ -1,3 +1,7 @@
+type __VLS_Props = {
+    to?: string | object;
+    withoutDefaultClass?: boolean;
+};
 declare var __VLS_1: {}, __VLS_10: {}, __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
@@ -6,9 +10,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {} | {
-    [x: string]: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;

package/dist/components/forms/AppLink.vue

@@ -1,49 +1,48 @@
 <script setup>
 import { RouterLink } from "vue-router";
-import { computed } from "vue";
-defineOptions({
-  inheritAttrs: false
-});
+import { computed, useAttrs } from "vue";
+const attrs = useAttrs();
 const props = defineProps({
-  // @ts-ignore
-  ...RouterLink.props,
-  to: {
-    type: [String, Object],
-    default: void 0
-  },
-  withoutDefaultClass: {
-    type: Boolean,
-    default: false
-  }
+  to: { type: [String, Object], required: false, default: void 0 },
+  withoutDefaultClass: { type: Boolean, required: false, default: false }
 });
 const isExternalLink = computed(() => {
-  return typeof props.to === "string" && (props.to.startsWith("http") || props.to.startsWith("https"));
+  return typeof props.to === "string" && (props.to.startsWith("http://") || props.to.startsWith("https://"));
+});
+const hrefValue = computed(() => {
+  return typeof props.to === "string" ? props.to : "";
 });
 </script>
 
 <template>
   <a
     v-if="isExternalLink"
-    v-bind="$attrs"
-    :href="to"
-    target="_blank"
-    :class="[{ 'hover-underline': !withoutDefaultClass }, ...($attrs?.class || [])]"
+    v-bind="{
+      target: '_blank',
+      ...attrs,
+    }"
+    :href="hrefValue"
+    :class="[{
+  'hover-underline': !withoutDefaultClass
+}, attrs?.class]"
   >
     <slot />
   </a>
 
   <RouterLink
     v-else-if="to"
-    v-bind="$attrs"
+    v-bind="attrs"
     :to="to"
-    :class="[{ 'hover-underline': !withoutDefaultClass }, ...($attrs?.class || [])]"
+    :class="[{
+  'hover-underline': !withoutDefaultClass
+}, attrs?.class]"
   >
     <slot />
   </RouterLink>
 
   <span
     v-else
-    v-bind="$attrs"
+    v-bind="attrs"
   >
     <slot />
   </span>

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

@@ -1,3 +1,7 @@
+type __VLS_Props = {
+    to?: string | object;
+    withoutDefaultClass?: boolean;
+};
 declare var __VLS_1: {}, __VLS_10: {}, __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
@@ -6,9 +10,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {} | {
-    [x: string]: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;

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

@@ -17,6 +17,7 @@ type __VLS_Props = {
     showToday?: boolean;
     hideErrorMessage?: boolean;
     inTable?: boolean;
+    showIcon?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | Date) => any;

package/dist/components/forms/DatePicker.vue

@@ -26,7 +26,8 @@ const props = defineProps({
   rules: { type: Array, required: false },
   showToday: { type: Boolean, required: false, default: true },
   hideErrorMessage: { type: Boolean, required: false, default: false },
-  inTable: { type: Boolean, required: false }
+  inTable: { type: Boolean, required: false },
+  showIcon: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["update:modelValue", "resetSelectedDate"]);
 const popover = ref({
@@ -197,7 +198,7 @@ onBeforeUnmount(() => {
           :id="elementId"
           :model-value="inputValue"
           :placeholder="placeholder"
-          :append-inner-icon="$attrs['append-inner-icon'] || 'tabler-calendar-event'"
+          :append-inner-icon="!showIcon ? void 0 : $attrs['append-inner-icon'] ?? 'tabler-calendar-event'"
           :disabled="disabled"
           :clearable="clearable"
           :clear-icon="clearIcon"

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

@@ -17,6 +17,7 @@ type __VLS_Props = {
     showToday?: boolean;
     hideErrorMessage?: boolean;
     inTable?: boolean;
+    showIcon?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | Date) => any;

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

@@ -7,7 +7,6 @@ type __VLS_Props = {
     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;

package/dist/components/forms/TimePicker.vue

@@ -14,8 +14,7 @@ const props = defineProps({
   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 }
+  hideErrorMessage: { type: Boolean, required: false }
 });
 const errors = ref([]);
 const hasError = computed(() => errors.value.length > 0);
@@ -108,19 +107,16 @@ onBeforeUnmount(() => {
 </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
-}">
+  <div class="d-flex flex-column app-time-picker">
+    <div class="h-100">
+      <div class="d-flex justify-center align-center gap-2 h-100">
         <VTextField
           v-bind="{ ...$attrs }"
           :id="elementId"
           v-model="inputValue"
           :placeholder="placeholder || t('inputs.time')"
-          :append-inner-icon="$attrs['append-inner-icon'] || 'tabler-clock'"
+          :append-inner-icon="!showIcon ? void 0 : $attrs['append-inner-icon'] ?? 'tabler-clock'"
           style="padding-block: 0.125rem;"
-          dir="ltr"
           hide-details
           maxlength="5"
           :error-messages="errorMessages"
@@ -134,6 +130,7 @@ onBeforeUnmount(() => {
           </template>
         </VTextField>
       </div>
+
       <Teleport to="body">
         <div
           v-if="isFocus"
@@ -254,7 +251,7 @@ onBeforeUnmount(() => {
       v-if="!hideErrorMessage"
       :messages="typeof errors === 'object' ? errors.join(', ') : errors"
       :active="hasError"
-      :class="isAppRtl ? 'text-right mr-2' : 'text-left ml-2'"
+      class="time-picker-messages"
     />
   </div>
 </template>
@@ -264,25 +261,27 @@ onBeforeUnmount(() => {
   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;
+.time-picker-messages {
+  text-align: start;
+  margin-inline-start: 8px;
 }
 </style>
 
 <style>
+[dir=rtl] .app-time-picker input {
+  text-align: end;
+  padding-inline: var(--v-field-padding-end) var(--v-field-padding-start);
+}
+
+[dir=ltr] .app-time-picker input {
+  text-align: start;
+  padding-inline: var(--v-field-padding-start) var(--v-field-padding-end);
+}
+
 .dp-custom-arrow {
   width: 15px;
   height: 15px;
@@ -335,7 +334,6 @@ onBeforeUnmount(() => {
   border-width: 1px;
   border-style: solid;
   border-color: rgba(var(--v-border-color), 0.35);
-  text-align: end !important;
 }
 
 .dp__input_focus {

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

@@ -7,7 +7,6 @@ type __VLS_Props = {
     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;

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

@@ -20,21 +20,21 @@ 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: {
+declare var __VLS_8: {}, __VLS_16: {}, __VLS_48: {}, __VLS_99: {
     totals: {
         [key: string]: number;
     } | undefined;
-};
+}, __VLS_108: string | number, __VLS_109: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_101>]?: (props: typeof __VLS_102) => any;
+    [K in NonNullable<typeof __VLS_108>]?: (props: typeof __VLS_109) => any;
 } & {
-    buttons?: (props: typeof __VLS_19) => any;
+    buttons?: (props: typeof __VLS_8) => any;
 } & {
-    filters?: (props: typeof __VLS_27) => any;
+    filters?: (props: typeof __VLS_16) => any;
 } & {
-    'action-buttons'?: (props: typeof __VLS_59) => any;
+    'action-buttons'?: (props: typeof __VLS_48) => any;
 } & {
-    'inside-bottom'?: (props: typeof __VLS_115) => any;
+    'inside-bottom'?: (props: typeof __VLS_99) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     filterQueryString: import("vue").ComputedRef<string>;

package/dist/components/table/DataTable.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { VCol, VRow, VCardText, VDivider, VProgressCircular, VIcon, VSpacer, VDataTableServer } from "vuetify/components";
+import { VCardText, VDivider, VProgressCircular, VIcon, VSpacer, VDataTableServer } from "vuetify/components";
 import { useQuery } from "@tanstack/vue-query";
 import { useRoute, useRouter } from "vue-router";
 import { computed, reactive, ref, watch } from "vue";
@@ -134,158 +134,142 @@ defineExpose({
 </script>
 
 <template>
-  <section>
-    <VRow>
-      <VCol cols="12">
-        <AppCard
-          :style="{
-  overflow: useIsMobile().value ? 'auto !important' : 'inherit !important'
-}"
-          style="z-index: unset !important;"
-          :is-loading="isLoading && secondaryStyle"
-        >
-          <template v-if="enableButtons" #append>
-            <slot name="buttons" />
-          </template>
-          <!-- filters -->
-          <VCardText v-if="hasFilters" class="pt-0">
-            <slot name="filters">
-              <FilterGenerator
-                v-model="filters"
-                :forms="processedFormFilters"
-                :errors="errors.data"
-              />
-            </slot>
-          </VCardText>
+  <AppCard
+    style="z-index: unset !important; overflow: visible !important;"
+    :is-loading="isLoading && secondaryStyle"
+  >
+    <template v-if="enableButtons" #append>
+      <slot name="buttons" />
+    </template>
+    <!-- filters -->
+    <VCardText v-if="hasFilters">
+      <slot name="filters">
+        <FilterGenerator
+          v-model="filters"
+          :forms="processedFormFilters"
+          :errors="errors.data"
+        />
+      </slot>
+    </VCardText>
 
-          <VDivider v-if="hasFilters" />
+    <VDivider v-if="hasFilters" />
 
-          <!-- options and buttons -->
-          <VCardText
-            v-if="enablePageSizeOptions || enableActionButtons"
-            :class="['d-flex flex-wrap py-4 gap-4', {
+    <!-- options and buttons -->
+    <VCardText
+      v-if="enablePageSizeOptions || enableActionButtons"
+      :class="['d-flex flex-wrap py-4 gap-4', {
   'sticky-actions': stickyActions
 }]"
-          >
-            <!-- Page Size options -->
-            <div v-if="enablePageSizeOptions" class="me-3 d-flex gap-3">
-              <AppSelect
-                hide-details
-                :model-value="itemsPerPage"
-                :items="pageSizeOptions"
-                style="width: 6.25rem"
-                @update:model-value="val => itemsPerPage = Number(val)"
-              />
-            </div>
+    >
+      <!-- Page Size options -->
+      <div v-if="enablePageSizeOptions" class="me-3 d-flex gap-3">
+        <AppSelect
+          hide-details
+          :model-value="itemsPerPage"
+          :items="pageSizeOptions"
+          style="width: 6.25rem"
+          @update:model-value="val => itemsPerPage = Number(val)"
+        />
+      </div>
 
-            <VSpacer />
+      <VSpacer />
 
-            <!-- buttons -->
-            <div v-if="enableActionButtons" class="d-flex align-center table-buttons">
-              <slot name="action-buttons" />
+      <!-- buttons -->
+      <div v-if="enableActionButtons" class="d-flex align-center table-buttons">
+        <slot name="action-buttons" />
 
-              <template v-if="enableBaseButtons">
-                <BaseButton
-                  size="38"
-                  color="secondary"
-                  class="ms-2"
-                  @click="reset"
-                >
-                  <VIcon
-                    icon="tabler-filter-x"
-                    size="22"
-                  />
-                </BaseButton>
+        <template v-if="enableBaseButtons">
+          <BaseButton
+            size="38"
+            color="secondary"
+            class="ms-2"
+            @click="reset"
+          >
+            <VIcon
+              icon="tabler-filter-x"
+              size="22"
+            />
+          </BaseButton>
 
-                <BaseButton
-                  size="38"
-                  color="secondary"
-                  class="ms-2"
-                  @click="refresh"
-                >
-                  <VIcon
-                    icon="tabler-refresh"
-                    size="22"
-                  />
-                </BaseButton>
-              </template>
-            </div>
-          </VCardText>
+          <BaseButton
+            size="38"
+            color="secondary"
+            class="ms-2"
+            @click="refresh"
+          >
+            <VIcon
+              icon="tabler-refresh"
+              size="22"
+            />
+          </BaseButton>
+        </template>
+      </div>
+    </VCardText>
 
-          <VDivider v-if="enableButtonsFilter" :class="{
-  'sticky-divider': stickyActions
-}" />
+    <VDivider
+      v-if="enableButtonsFilter"
+      :class="{
+  'sticky-divider-action': stickyActions,
+  'sticky-divider': !stickyActions
+}"
+    />
 
-          <div :class="[!useIsMobile().value || 'overflow-auto app-h-fit', {
+    <div :class="[!useIsMobile().value || 'overflow-auto app-h-fit', {
   'secondary-table': secondaryStyle,
   'responsive-table': useIsMobile().value
-}]">
-            <!-- table -->
-            <VDataTableServer
-              v-model="modelValue"
-              :class="{
+}]" style="position: relative;">
+      <!-- table -->
+      <VDataTableServer
+        v-model="modelValue"
+        :class="{
   'mt-5 px-5': secondaryStyle
 }"
-              :items="data?.rows"
-              :items-length="data?.pagination.total ?? 0"
-              :headers="headers"
-              :loading="isLoading"
-              :no-data-text="t('no_data')"
-              :fixed-header="useIsMobile().value"
-              :show-select="showSelect"
-              :return-object="returnObject"
-            >
-              <!-- columns -->
-              <template v-for="(_, name) in $slots" #[name]="slotProps">
-                <slot :name="name" v-bind="slotProps || {}" />
-              </template>
+        :items="data?.rows"
+        :items-length="data?.pagination.total ?? 0"
+        :headers="headers"
+        :loading="isLoading"
+        :no-data-text="t('no_data')"
+        :fixed-header="!useIsMobile().value"
+        :show-select="showSelect"
+        :return-object="returnObject"
+      >
+        <template #item.index="{ index }">
+          {{ (data?.pagination.total ?? 0) - index - (data?.pagination.from ?? 0) + 1 }}
+        </template>
 
-              <template #item.index="{ index }">
-                {{ (data?.pagination.total ?? 0) - index - (data?.pagination.from ?? 0) + 1 }}
-              </template>
+        <template #item.created_at="{ item }">
+          <div class="d-flex text-pre-line">
+            {{ item?.created_at != "-" || item?.created_at ? formatDate(item?.created_at) : "-" }}
+          </div>
+        </template>
 
-              <template #item.created_at="{ item }">
-                <div class="d-flex text-pre-line">
-                  {{ item?.created_at != "-" || item?.created_at ? formatDate(item?.created_at) : "-" }}
-                </div>
-              </template>
+        <template #loader />
 
-              <template #loader />
+        <!-- loading -->
+        <template #loading>
+          <div class="text-center">
+            <VProgressCircular indeterminate />
+          </div>
+        </template>
 
-              <!-- loading -->
-              <template #loading>
-                <div class="text-center">
-                  <VProgressCircular indeterminate />
-                </div>
-              </template>
+        <!-- pagination -->
+        <template #bottom>
+          <slot name="inside-bottom" :totals="data?.totals" />
+          <TablePagination v-model="currentPage" :pagination="pagination" />
+        </template>
 
-              <!-- pagination -->
-              <template #bottom>
-                <slot name="inside-bottom" :totals="data?.totals" />
-                <TablePagination v-model="currentPage" :pagination="pagination" />
-              </template>
-            </VDataTableServer>
-          </div>
-        </AppCard>
-      </VCol>
-    </VRow>
-  </section>
+        <!-- columns -->
+        <template v-for="(_, name) in $slots" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps || {}" />
+        </template>
+      </VDataTableServer>
+    </div>
+  </AppCard>
 </template>
 
 <style scoped>
-.sticky-actions {
-  position: sticky !important;
-  position: -webkit-sticky;
-  top: 75px;
-  z-index: 11 !important;
-  background-color: rgb(var(--v-theme-surface)) !important;
-}
-
-.sticky-divider {
-  position: sticky !important;
-  position: -webkit-sticky;
-  top: 146px;
-  z-index: 11 !important;
+:deep(.v-card) {
+  overflow: visible !important;
 }
 
 :deep(.v-table) .v-table__wrapper > table > tbody > tr > td,
@@ -294,20 +278,40 @@ defineExpose({
 }
 
 :deep(.v-table__wrapper) {
-  overflow: inherit !important;
+  overflow: visible !important;
 }
 
+:deep(.v-data-table__wrapper) {
+  overflow: visible !important;
+}
+
+:deep(table) {
+  position: relative;
+}
 :deep(table) tr th {
   position: sticky !important;
   position: -webkit-sticky;
-  top: 70px;
-  z-index: 10;
+  top: 86px !important;
+  z-index: 10 !important;
   padding-bottom: 0.75rem;
   background-color: rgb(var(--v-theme-surface)) !important;
 }
 
+.sticky-actions {
+  position: sticky;
+  top: 76px;
+  z-index: 12;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+.sticky-divider-action {
+  position: sticky;
+  top: 140px;
+  z-index: 12;
+}
+
 .sticky-actions ~ div :deep(table) tr th {
-  top: 146px !important;
+  top: 141px !important;
 }
 
 .table-buttons .v-btn .v-btn__overlay {
@@ -329,7 +333,6 @@ defineExpose({
 .secondary-table :deep(table) th {
   padding: 14px 16px !important;
   height: fit-content !important;
-  top: 80px !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;
@@ -346,7 +349,7 @@ defineExpose({
 }
 
 .sticky-actions ~ div .secondary-table :deep(table) th {
-  top: 156px !important;
+  top: 141px !important;
 }
 
 :deep(.v-overlay) {

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

@@ -20,21 +20,21 @@ 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: {
+declare var __VLS_8: {}, __VLS_16: {}, __VLS_48: {}, __VLS_99: {
     totals: {
         [key: string]: number;
     } | undefined;
-};
+}, __VLS_108: string | number, __VLS_109: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_101>]?: (props: typeof __VLS_102) => any;
+    [K in NonNullable<typeof __VLS_108>]?: (props: typeof __VLS_109) => any;
 } & {
-    buttons?: (props: typeof __VLS_19) => any;
+    buttons?: (props: typeof __VLS_8) => any;
 } & {
-    filters?: (props: typeof __VLS_27) => any;
+    filters?: (props: typeof __VLS_16) => any;
 } & {
-    'action-buttons'?: (props: typeof __VLS_59) => any;
+    'action-buttons'?: (props: typeof __VLS_48) => any;
 } & {
-    'inside-bottom'?: (props: typeof __VLS_115) => any;
+    'inside-bottom'?: (props: typeof __VLS_99) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     filterQueryString: import("vue").ComputedRef<string>;

package/dist/components/table/EditableDataTableRow.vue

@@ -203,7 +203,7 @@ const placeholder = (header) => {
     :error-messages="errorMessages"
     :error="error"
     clear-icon="tabler-x"
-    append-inner-icon="none"
+    :show-icon="false"
     in-table
     hide-error-message
   />
@@ -212,14 +212,12 @@ const placeholder = (header) => {
     v-if="header.type === 'timepicker'"
     v-model="item[header.key]"
     :validate-on="header.validateOn"
-    class="pa-0 h-100 app-flex-1 app-max-w-150px app-input-outline"
+    class="pa-0 h-100 app-input-outline"
     :rules="header.rules"
     :show-icon="false"
     :disabled="isDisabled"
-    :is-app-rtl="header.isAppRtl"
     :error-messages="errorMessages"
     :error="error"
-    append-inner-icon="none"
     hide-error-message
   />
 

package/dist/styles/core/base/libs/vuetify/_overrides.scss

@@ -235,6 +235,10 @@ h6,
   font-size: 13px;
 }
 
+.v-pagination__prev .v-btn.v-btn--density-default, .v-pagination__next .v-btn.v-btn--density-default {
+  width: calc(var(--v-btn-height) + 40px) !important;
+}
+
 .v-data-table-footer {
   margin-block-start: 1rem;
 }

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

@@ -619,6 +619,10 @@ h6,
   font-size: 13px;
 }
 
+.v-pagination__prev .v-btn.v-btn--density-default, .v-pagination__next .v-btn.v-btn--density-default {
+  width: calc(var(--v-btn-height) + 40px) !important;
+}
+
 .v-data-table-footer {
   margin-block-start: 1rem;
 }

package/dist/utils/formatters.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formatTime = exports.formatNumberColor = exports.formatNumber = exports.formatDateWithoutTime = exports.formatDateWithTime = exports.formatDateWithDay = exports.formatDate = exports.extractDate = void 0;
 var _core = require("@vueuse/core");
-var _vueI18n = require("vue-i18n");
 const formatDate = date => {
   return (0, _core.useDateFormat)(date, "DD/MM/YYYY \n hh:mm A").value;
 };
@@ -23,13 +22,9 @@ const formatDateWithTime = date => {
 };
 exports.formatDateWithTime = formatDateWithTime;
 const formatDateWithDay = date => {
-  const {
-    locale
-  } = (0, _vueI18n.useI18n)({
-    useScope: "global"
-  });
+  const locale = localStorage.getItem("winch-lang") ?? "ar";
   return (0, _core.useDateFormat)(date, "HH:mm A dddd - DD/MM/YYYY", {
-    locales: locale?.value === "ar" ? "ar-SA" : "en-US"
+    locales: locale === "ar" ? "ar-SA" : "en-US"
   }).value;
 };
 exports.formatDateWithDay = formatDateWithDay;
@@ -53,14 +48,10 @@ const extractDate = (dateString, format = "DD/MM/YYYY", hasTime = true) => {
 };
 exports.extractDate = extractDate;
 const formatNumber = (number, withCurrency = false) => {
-  const {
-    locale
-  } = (0, _vueI18n.useI18n)({
-    useScope: "global"
-  });
+  const locale = localStorage.getItem("winch-lang") ?? "ar";
   const currency = withCurrency ? String.fromCharCode(59392) : "";
   if (number === void 0 || number === null || number === "" || number === 0) {
-    return locale?.value !== "ar" ? `${currency} 0` : `0 ${currency}`;
+    return locale !== "ar" ? `${currency} 0` : `0 ${currency}`;
   }
   if (typeof number === "string") {
     number = parseFloat(number);
@@ -71,7 +62,7 @@ const formatNumber = (number, withCurrency = false) => {
     maximumFractionDigits: needsTwoDecimalPlaces ? 2 : 0
   };
   const formatted = Math.abs(number).toLocaleString("en-US", options);
-  return locale?.value !== "ar" ? `${currency} ${number < 0 ? `${formatted}-` : formatted}` : `${number < 0 ? `-${formatted}` : formatted} ${currency}`;
+  return locale !== "ar" ? `${currency} ${number < 0 ? `${formatted}-` : formatted}` : `${number < 0 ? `-${formatted}` : formatted} ${currency}`;
 };
 exports.formatNumber = formatNumber;
 const formatNumberColor = number => {

package/dist/utils/formatters.mjs

@@ -1,5 +1,4 @@
 import { useDateFormat } from "@vueuse/core";
-import { useI18n } from "vue-i18n";
 export const formatDate = (date) => {
   return useDateFormat(date, "DD/MM/YYYY \n hh:mm A").value;
 };
@@ -13,8 +12,8 @@ export const formatDateWithTime = (date) => {
   return useDateFormat(date, "DD/MM/YYYY - hh:mm A").value;
 };
 export const formatDateWithDay = (date) => {
-  const { locale } = useI18n({ useScope: "global" });
-  return useDateFormat(date, "HH:mm A dddd - DD/MM/YYYY", { locales: locale?.value === "ar" ? "ar-SA" : "en-US" }).value;
+  const locale = localStorage.getItem("winch-lang") ?? "ar";
+  return useDateFormat(date, "HH:mm A dddd - DD/MM/YYYY", { locales: locale === "ar" ? "ar-SA" : "en-US" }).value;
 };
 export const extractDate = (dateString, format = "DD/MM/YYYY", hasTime = true) => {
   if (!dateString) {
@@ -31,10 +30,10 @@ export const extractDate = (dateString, format = "DD/MM/YYYY", hasTime = true) =
   return { day, month, year };
 };
 export const formatNumber = (number, withCurrency = false) => {
-  const { locale } = useI18n({ useScope: "global" });
+  const locale = localStorage.getItem("winch-lang") ?? "ar";
   const currency = withCurrency ? String.fromCharCode(59392) : "";
   if (number === void 0 || number === null || number === "" || number === 0) {
-    return locale?.value !== "ar" ? `${currency} 0` : `0 ${currency}`;
+    return locale !== "ar" ? `${currency} 0` : `0 ${currency}`;
   }
   if (typeof number === "string") {
     number = parseFloat(number);
@@ -45,7 +44,7 @@ export const formatNumber = (number, withCurrency = false) => {
     maximumFractionDigits: needsTwoDecimalPlaces ? 2 : 0
   };
   const formatted = Math.abs(number).toLocaleString("en-US", options);
-  return locale?.value !== "ar" ? `${currency} ${number < 0 ? `${formatted}-` : formatted}` : `${number < 0 ? `-${formatted}` : formatted} ${currency}`;
+  return locale !== "ar" ? `${currency} ${number < 0 ? `${formatted}-` : formatted}` : `${number < 0 ? `-${formatted}` : formatted} ${currency}`;
 };
 export const formatNumberColor = (number) => {
   const parsedNumber = typeof number === "string" ? parseFloat(number) : number;

package/package.json

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