@winchsa/ui 0.1.30 → 0.1.33

package/dist/components/table/DataTable.vue

@@ -1,361 +0,0 @@
-<script setup>
-import { VCol, VRow, 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";
-import { useI18n } from "vue-i18n";
-import AppCard from "../cards/AppCard.vue";
-import { responseAlert } from "../../utils/toaster";
-import { buildQueryString } from "../../utils/queryParams";
-import { client } from "../../utils/client";
-import { formatDate } from "../../utils/formatters";
-import { useTableFilters, usePagination } from "../../composables/useTableFilters";
-import { useIsMobile } from "../../composables/useIsMobile";
-import BaseButton from "../forms/BaseButton.vue";
-import AppSelect from "../forms/AppSelect.vue";
-import FilterGenerator from "./FilterGenerator.vue";
-import TablePagination from "./TablePagination.vue";
-const { t } = useI18n();
-const { showValidationAlert } = responseAlert();
-const route = useRoute();
-const router = useRouter();
-const pageSizeOptions = [
-  { value: 30, title: "30" },
-  { value: 60, title: "60" },
-  { value: 90, title: "90" },
-  { value: 120, title: "120" }
-];
-const props = defineProps({
-  headers: { type: Array, required: true, default: () => [] },
-  formFilters: { type: Array, required: false, default: () => [] },
-  url: { type: String, required: false, default: "" },
-  queryParams: { type: Object, required: false, default: () => ({}) },
-  enableButtons: { type: Boolean, required: false, default: false },
-  enableButtonsFilter: { type: Boolean, required: false, default: true },
-  enablePageSizeOptions: { type: Boolean, required: false, default: true },
-  enableActionButtons: { type: Boolean, required: false, default: true },
-  enableBaseButtons: { type: Boolean, required: false, default: true },
-  secondaryStyle: { type: Boolean, required: false },
-  replaceNullWithDash: { type: Boolean, required: false, default: true },
-  withoutQueryParams: { type: Boolean, required: false, default: false },
-  showSelect: { type: Boolean, required: false },
-  returnObject: { type: Boolean, required: false, default: false },
-  stickyActions: { type: Boolean, required: false, default: false }
-});
-const modelValue = defineModel({ type: Array, ...{ default: [] } });
-const { processedFormFilters, filters, urlQueryParams } = useTableFilters({
-  formFilters: computed(() => props.formFilters),
-  syncFiltersWithUrl: !props.withoutQueryParams
-});
-const { currentPage, itemsPerPage } = usePagination({
-  syncFiltersWithUrl: !props.withoutQueryParams,
-  defaultValues: {
-    pageSize: pageSizeOptions[0].value
-  }
-});
-const errors = reactive({ data: [] });
-const totals = ref({});
-const pagination = ref({
-  to: 1,
-  from: 1,
-  total: 1,
-  count: 1,
-  per_page: 1,
-  current_page: 1,
-  last_page: 1
-});
-const queryParamsString = computed(() => buildQueryString({
-  ...props.queryParams,
-  ...urlQueryParams.value,
-  page: currentPage.value,
-  pages_count: itemsPerPage.value
-}));
-const queryKey = computed(() => ["table-data", props.url, queryParamsString.value]);
-const { data, error: tableError, isLoading, refetch: refresh } = useQuery({
-  queryKey,
-  queryFn: async () => {
-    const response = await client.get(`${props.url}?${queryParamsString.value}`);
-    pagination.value = response.pagination;
-    totals.value = response.totals ?? {};
-    errors.data = [];
-    return response;
-  },
-  select: ({ data: data2, ...rest }) => {
-    return {
-      rows: props.replaceNullWithDash ? data2.map((item) => replaceItemNullWithDash(item)) : data2,
-      ...rest
-    };
-  }
-});
-function reset() {
-  const defaults = {};
-  processedFormFilters.value.forEach((filter) => {
-    defaults[filter.name] = null;
-  });
-  router.replace({ path: route.path, query: props.withoutQueryParams ? {} : props.queryParams }).finally(() => {
-    filters.value = defaults;
-    currentPage.value = 1;
-    itemsPerPage.value = pageSizeOptions[0].value;
-  });
-}
-function replaceItemNullWithDash(item) {
-  if (Array.isArray(item)) {
-    return item.map(replaceItemNullWithDash);
-  }
-  if (typeof item === "object") {
-    return Object.fromEntries(
-      Object.entries(item).map(([key, value]) => [
-        key,
-        value === null ? "-" : typeof value === "object" ? replaceItemNullWithDash(value) : value
-      ])
-    );
-  }
-  return item;
-}
-const hasFilters = computed(() => processedFormFilters.value.length > 0);
-const headers = computed(() => props.headers.map((header) => ({
-  ...header,
-  title: t(header.title),
-  sortable: false
-})));
-watch(tableError, (data2) => {
-  if (data2) {
-    errors.data = data2.response?._data?.status.errors_list;
-    showValidationAlert(data2);
-  }
-});
-defineExpose({
-  filterQueryString: queryParamsString,
-  isLoading,
-  filters,
-  refresh,
-  totals
-});
-</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>
-
-          <VDivider v-if="hasFilters" />
-
-          <!-- 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>
-
-            <VSpacer />
-
-            <!-- 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>
-
-                <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
-}" />
-
-          <div :class="[!useIsMobile().value || 'overflow-auto app-h-fit', {
-  'secondary-table': secondaryStyle,
-  'responsive-table': useIsMobile().value
-}]">
-            <!-- 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>
-
-              <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">
-                  {{ formatDate(item.raw?.created_at) }}
-                </div>
-              </template>
-
-              <template #loader />
-
-              <!-- 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>
-            </VDataTableServer>
-          </div>
-        </AppCard>
-      </VCol>
-    </VRow>
-  </section>
-</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-table) .v-table__wrapper > table > tbody > tr > td,
-:deep(.v-table) .v-table__wrapper > table > tbody > tr > th {
-  border-bottom: 8px solid rgba(var(--v-table-divider)) !important;
-}
-
-:deep(.v-table__wrapper) {
-  overflow: inherit !important;
-}
-
-:deep(table) tr th {
-  position: sticky !important;
-  position: -webkit-sticky;
-  top: 70px;
-  z-index: 10;
-  padding-bottom: 0.75rem;
-  background-color: rgb(var(--v-theme-surface)) !important;
-}
-
-.sticky-actions ~ div :deep(table) tr th {
-  top: 146px !important;
-}
-
-.table-buttons .v-btn .v-btn__overlay {
-  display: none !important;
-}
-.table-buttons .v-btn:hover {
-  background-color: rgba(var(--v-theme-secondary), 0.82) !important;
-  color: rgb(var(--v-theme-on-secondary)) !important;
-}
-
-.secondary-table :deep(table) {
-  width: 100% !important;
-  border-collapse: collapse !important;
-  border-spacing: 0 !important;
-  border: 1px solid rgb(var(--v-theme-silver)) !important;
-  border-collapse: collapse !important;
-  font-size: 13px !important;
-}
-.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;
-}
-.secondary-table :deep(table) td {
-  padding: 16px !important;
-  height: auto !important;
-  border: 1px solid rgb(var(--v-theme-silver)) !important;
-  color: rgb(var(--v-theme-on-surface)) !important;
-}
-.secondary-table :deep(.v-table) .v-table__wrapper > table > tbody > tr > td,
-.secondary-table :deep(.v-table) .v-table__wrapper > table > tbody > tr > th {
-  border-bottom: 1px solid rgba(var(--v-theme-silver)) !important;
-}
-
-.sticky-actions ~ div .secondary-table :deep(table) th {
-  top: 156px !important;
-}
-
-:deep(.v-overlay) {
-  z-index: 500 !important;
-}
-
-.responsive-table :deep(table) th {
-  position: unset !important;
-  top: 0 !important;
-  z-index: 10 !important;
-}
-</style>

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

@@ -1,70 +0,0 @@
-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;
-    };
-};

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

@@ -1,21 +0,0 @@
-import type { EditableDataTableItem, ErrorResponseFiled } from '../../types';
-type __VLS_Props = {
-    headers: EditableDataTableItem[];
-    items: [];
-    errors?: ErrorResponseFiled[];
-    loading?: boolean;
-    module?: string;
-};
-declare var __VLS_39: string | number, __VLS_40: any;
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_39>]?: (props: typeof __VLS_40) => 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;
-    };
-};