@winchsa/ui 0.1.40 → 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,13 +20,13 @@ type __VLS_ModelProps = {
     modelValue?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_8: {}, __VLS_16: {}, __VLS_48: {}, __VLS_90: string | number, __VLS_91: any, __VLS_104: {
+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_90>]?: (props: typeof __VLS_91) => any;
+    [K in NonNullable<typeof __VLS_108>]?: (props: typeof __VLS_109) => any;
 } & {
     buttons?: (props: typeof __VLS_8) => any;
 } & {
@@ -34,7 +34,7 @@ type __VLS_Slots = {} & {
 } & {
     'action-buttons'?: (props: typeof __VLS_48) => any;
 } & {
-    'inside-bottom'?: (props: typeof __VLS_104) => 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";
@@ -135,7 +135,7 @@ defineExpose({
 
 <template>
   <AppCard
-    style="z-index: unset !important;"
+    style="z-index: unset !important; overflow: visible !important;"
     :is-loading="isLoading && secondaryStyle"
   >
     <template v-if="enableButtons" #append>
@@ -206,14 +206,18 @@ defineExpose({
       </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', {
   'secondary-table': secondaryStyle,
   'responsive-table': useIsMobile().value
-}]">
+}]" style="position: relative;">
       <!-- table -->
       <VDataTableServer
         v-model="modelValue"
@@ -225,15 +229,10 @@ defineExpose({
         :headers="headers"
         :loading="isLoading"
         :no-data-text="t('no_data')"
-        :fixed-header="useIsMobile().value"
+        :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>
-
         <template #item.index="{ index }">
           {{ (data?.pagination.total ?? 0) - index - (data?.pagination.from ?? 0) + 1 }}
         </template>
@@ -258,25 +257,19 @@ defineExpose({
           <slot name="inside-bottom" :totals="data?.totals" />
           <TablePagination v-model="currentPage" :pagination="pagination" />
         </template>
+
+        <!-- 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,
@@ -285,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 {
@@ -320,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;
@@ -337,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,13 +20,13 @@ type __VLS_ModelProps = {
     modelValue?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_8: {}, __VLS_16: {}, __VLS_48: {}, __VLS_90: string | number, __VLS_91: any, __VLS_104: {
+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_90>]?: (props: typeof __VLS_91) => any;
+    [K in NonNullable<typeof __VLS_108>]?: (props: typeof __VLS_109) => any;
 } & {
     buttons?: (props: typeof __VLS_8) => any;
 } & {
@@ -34,7 +34,7 @@ type __VLS_Slots = {} & {
 } & {
     'action-buttons'?: (props: typeof __VLS_48) => any;
 } & {
-    'inside-bottom'?: (props: typeof __VLS_104) => 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.40",
+    "version": "0.1.41",
     "type": "module",
     "private": false,
     "publishConfig": {