@winchsa/ui 0.1.33 → 0.1.34

package/dist/components/table/FilterGenerator.vue

@@ -0,0 +1,231 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { VCol, VRow } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+import { getErrorMessage } from "../../utils/formValidation";
+import { useIsMobile } from "../../composables/useIsMobile";
+import AutocompleteInput from "../forms/AutocompleteInput.vue";
+import AppSelect from "../forms/AppSelect.vue";
+import AppTextField from "../forms/AppTextField.vue";
+import DatePicker from "../forms/DatePicker.vue";
+import DatePickerRange from "../forms/DatePickerRange.vue";
+import LicensePlateInput from "../forms/LicensePlateInput.vue";
+import MobileInput from "../forms/MobileInput.vue";
+import RangeInput from "../forms/RangeInput.vue";
+import BankSelect from "../forms/BankSelect.vue";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  forms: { type: Array, required: true },
+  errors: { type: Array, required: false, default: () => [] }
+});
+const emit = defineEmits(["update:modelValue"]);
+const { t } = useI18n();
+const formsFilters = ref(props.forms || []);
+const filters = computed(() => {
+  return formsFilters.value.map((form) => {
+    const isSelectOrAutocomplete = ["select", "autocomplete", "autocompleteGroups"].includes(form.type ?? "");
+    const baseForm = {
+      ...form,
+      clearable: form.clearable ?? true,
+      ...isSelectOrAutocomplete && {
+        closableChips: form.closableChips ?? true,
+        itemLabel: form.itemLabel ?? "name",
+        trackBy: form.trackBy ?? "id"
+      }
+    };
+    if (form.hasLang && form.options) {
+      const translatedOptions = form.options.map((option) => ({
+        ...option,
+        name: option?.allowTranslate && option.name ? t(option.name) : option.name
+      }));
+      return {
+        ...baseForm,
+        options: translatedOptions
+      };
+    }
+    return baseForm;
+  });
+});
+const placeholder = (form) => {
+  return form.placeholder ?? t(`inputs.${form.type === "text" || form.type === void 0 ? "placeholder_search" : "placeholder_select"}`, { name: t(form.label) });
+};
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value2) {
+    emit("update:modelValue", value2 || "");
+  }
+});
+watch(() => props.forms, (value2) => {
+  formsFilters.value = value2 || [];
+});
+watch(
+  () => props.forms,
+  (filter) => {
+    formsFilters.value = filter || [];
+    if (!filter) {
+      return;
+    }
+    filter.forEach((item) => {
+      if (item?.value) {
+        value.value[item.name] = item.value;
+      }
+    });
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <VRow :class="useIsMobile().value ? 'pt-8' : 'pt-4'">
+    <template
+      v-for="(form, key) in filters"
+      :key="key"
+    >
+      <VCol
+        v-if="form.type !== 'datepickerRange'"
+        cols="12"
+        sm="3"
+        class="py-0"
+        :class="{
+  'd-none': form.invisible
+}"
+      >
+        <AppTextField
+          v-if="form.type === 'text' || form.type === undefined"
+          v-model="value[form.name]"
+          :label="form.label"
+          :placeholder="placeholder(form)"
+          density="compact"
+          :rules="form.rules"
+          :error-messages="getErrorMessage(errors, form.name)"
+          :clearable="form.clearable"
+          :closable-chips="form.closableChips"
+        />
+
+        <RangeInput
+          v-if="form.type === 'range'"
+          v-model="value[form.name]"
+          :label="form.label"
+          :class="form.class"
+          :rules="form.rules"
+          :error-messages="getErrorMessage(errors, form.name)"
+        />
+
+        <AppSelect
+          v-if="form.type === 'select'"
+          v-model="value[form.name]"
+          :label="form.label"
+          :placeholder="placeholder(form)"
+          :items="form?.options"
+          :item-title="form.itemLabel || 'name'"
+          :item-value="form.trackBy || 'id'"
+          :multiple="form.multiple"
+          :chips="form.multiple"
+          :clearable="form.clearable"
+          :closable-chips="form.closableChips"
+          :rules="form.rules"
+          :error-messages="getErrorMessage(errors, form.name)"
+          clear-icon="tabler-x"
+        />
+
+        <AutocompleteInput
+          v-if="form.type === 'autocomplete'"
+          v-model="value[form.name]"
+          :url="form.urlSearch"
+          :label="form.label"
+          :item-label="form.itemLabel || 'name'"
+          :track-by="form.trackBy || 'id'"
+          :track-by-value="form.trackByValue"
+          :search-internally="form.searchInternally"
+          :multiple="form.multiple"
+          :params="form.params"
+          :placeholder="placeholder(form)"
+          :required="form.rules && form.rules.length > 0"
+          :error-messages="getErrorMessage(errors, form.name)"
+          searchable
+          :options="form.options"
+        />
+
+        <AutocompleteInput
+          v-if="form.type === 'autocompleteGroups' && form.urlSearch"
+          v-model="value[form.name]"
+          :url="form.urlSearch"
+          :label="form.label"
+          :item-label="form.itemLabel || 'name'"
+          :track-by="form.trackBy || 'id'"
+          :track-by-value="form.trackByValue"
+          :params="form.params"
+          :multiple="form.multiple"
+          :placeholder="placeholder(form)"
+          :required="form.rules && form.rules.length > 0"
+          :error-messages="getErrorMessage(errors, form.name)"
+          group-label="name"
+          group-values="children"
+          :search-internally="form.searchInternally"
+          grouped
+          searchable
+        />
+
+        <MobileInput
+          v-if="form.type === 'mobile'"
+          v-model="value[form.name]"
+          :label="form.label"
+          :rules="form.rules"
+          :error-messages="getErrorMessage(errors, form.name)"
+        />
+
+        <BankSelect
+          v-if="form.type === 'bankSelect'"
+          v-model="value[form.name]"
+          :search-internally="form.searchInternally"
+          :track-by-value="form.trackByValue"
+          :multiple="form.multiple"
+          :params="form.params"
+          :error-messages="getErrorMessage(errors, form.name)"
+        />
+
+        <LicensePlateInput
+          v-if="form.type === 'licensePlate'"
+          v-model="value[form.name]"
+          :label="form.label"
+          :rules="form.rules"
+          :error-messages="getErrorMessage(errors, form.name)"
+        />
+
+        <DatePicker
+          v-if="form.type === 'datepicker'"
+          v-model="value[form.name]"
+          show-today
+          display-format="DD/MM/YYYY"
+          :label="form.label"
+          :rules="form.rules"
+          :clearable="form.clearable"
+          :min-date="form.fromMinDate"
+          :max-date="form.fromMaxDate"
+          :placeholder="placeholder(form)"
+          :error-messages="getErrorMessage(errors, form.name)"
+        />
+      </VCol>
+
+      <template v-else>
+        <DatePickerRange
+          v-if="form.type === 'datepickerRange'"
+          v-model="value[form.name]"
+          :to-error-messages="getErrorMessage(errors, `${form.name}.0`)"
+          :from-error-messages="getErrorMessage(errors, `${form.name}.1`)"
+          :rules="form.rules"
+          :from-min-date="form.fromMinDate"
+          :to-min-date="form.toMinDate"
+          :from-max-date="form.fromMaxDate"
+          :to-max-date="form.toMaxDate"
+          clearable
+        />
+      </template>
+    </template>
+  </VRow>
+</template>

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

@@ -0,0 +1,13 @@
+import type { FormFilter, ErrorResponseFiled } from '../../types';
+type __VLS_Props = {
+    modelValue: any;
+    forms: FormFilter[];
+    errors?: ErrorResponseFiled[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,34 @@
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<{
+        items: T[];
+        subItemsKey?: string;
+        headers: {
+            key: string;
+            label?: string;
+            grayColorWhenNull?: boolean;
+            type?: "number" | "string";
+            dashedWhenNull?: boolean;
+        }[];
+    }> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {
+            item: T;
+        }) => any) | undefined;
+    } & {
+        [x: string]: ((props: {
+            item: any;
+        }) => any) | undefined;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/components/table/StaticTable.vue

@@ -0,0 +1,152 @@
+<script setup>
+import { computed, onMounted, onUpdated, ref } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useIsMobile } from "../../composables/useIsMobile";
+const { t } = useI18n();
+const route = useRoute();
+const props = defineProps({
+  items: { type: Array, required: true, default: () => [] },
+  subItemsKey: { type: String, required: false, default: "" },
+  headers: { type: Array, required: true, default: () => [] }
+});
+const activeCell = ref();
+function getProperty(item, key) {
+  if (typeof item === "string" || item === void 0 || item === null) {
+    return item;
+  }
+  return key.split(".").reduce((value, k) => value && value[k] ? value[k] : null, item);
+}
+const headers = computed(() => props.headers.filter((e) => e.key !== "index").map((header) => {
+  return {
+    ...header,
+    label: t(header.label)
+  };
+}));
+const indexHeader = computed(() => props.headers.find((e) => e.key === "index"));
+const activeCellId = computed(() => {
+  return function(item) {
+    if (!!item.winch_id && !!activeCell.value && item.winch_id === activeCell.value) {
+      return "active-cell";
+    } else {
+      return void 0;
+    }
+  };
+});
+onMounted(() => {
+  if (route.query.winch_id) {
+    activeCell.value = route.query.winch_id;
+  }
+});
+onUpdated(() => {
+  const activeCellElement = document.getElementById("active-cell");
+  if (activeCellElement) {
+    const windowHeight = window.innerHeight;
+    const elementPosition = activeCellElement.getBoundingClientRect().top;
+    const offsetPosition = elementPosition - windowHeight / 2;
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: "smooth"
+    });
+  }
+});
+</script>
+
+<template>
+  <div class="secondary-table" :class="{
+  'responsive-table': useIsMobile().value
+}">
+    <table>
+      <thead>
+        <tr>
+          <th key="index" class="static-table-header-first-column">
+            #
+          </th>
+          <th v-for="(header, index) in headers" :key="`header-${index}-${header.key}`">
+            {{ header.label }}
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <template v-for="(item, index) in items" :key="`item-tr-${index}`">
+          <tr :id="activeCellId(item)">
+            <td :class="{
+  'active-cell': !!item.winch_id && !!activeCell && item.winch_id === activeCell
+}">
+              {{ index + 1 }}
+            </td>
+            <td
+              v-for="header in headers"
+              :key="`item-td-${header.key}`"
+              :class="{
+  'bg-grayish-blue': header.grayColorWhenNull && getProperty(item, header.key) === null,
+  'active-cell': !!item.winch_id && !!activeCell && item.winch_id === activeCell
+}"
+            >
+              <slot :name="header.key" :item="item">
+                {{ getProperty(item, header.key) !== null ? getProperty(item, header.key) : header?.type === "number" ? 0 : header?.dashedWhenNull === true || header?.dashedWhenNull === void 0 ? "-" : ""
+                }}
+              </slot>
+            </td>
+          </tr>
+
+          <tr v-for="(subItem, subIndex) in item[subItemsKey]" :key="`sub-item-tr-${subIndex}`">
+            <td :class="{
+  'bg-grayish-blue': indexHeader?.grayColorWhenNull
+}" />
+            <td
+              v-for="header in headers"
+              :key="`item-td-${subIndex}-${header.key}`"
+              :class="{
+  'bg-grayish-blue': header.grayColorWhenNull && getProperty(subItem, header.key) === null
+}"
+            >
+              <slot :name="header.key" :item="subItem">
+                {{ getProperty(subItem, header.key) !== null ? getProperty(subItem, header.key) : header?.type === "number" ? 0 : header?.dashedWhenNull === true || header?.dashedWhenNull === void 0 ? "-" : ""
+                }}
+              </slot>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.secondary-table table {
+  width: 100% !important;
+  border-collapse: collapse !important;
+  border-spacing: 0 !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
+  font-size: 13px !important;
+}
+.secondary-table table th {
+  padding: 12px 16px !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
+  background-color: rgb(var(--v-theme-gray-200)) !important;
+  text-align: start !important;
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+.secondary-table table td {
+  padding: 16px !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
+  text-align: start !important;
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+
+.active-cell {
+  background-color: rgba(var(--v-theme-primary), 0.15) !important;
+}
+
+.responsive-table table th {
+  position: unset !important;
+  top: 0 !important;
+  z-index: 10 !important;
+}
+
+.static-table-header-first-column {
+  width: 50px !important;
+}
+</style>

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

@@ -0,0 +1,34 @@
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<{
+        items: T[];
+        subItemsKey?: string;
+        headers: {
+            key: string;
+            label?: string;
+            grayColorWhenNull?: boolean;
+            type?: "number" | "string";
+            dashedWhenNull?: boolean;
+        }[];
+    }> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {
+            item: T;
+        }) => any) | undefined;
+    } & {
+        [x: string]: ((props: {
+            item: any;
+        }) => any) | undefined;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -0,0 +1,15 @@
+import type { Pagination } from '../../types';
+type __VLS_Props = {
+    pagination: Pagination;
+};
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/table/TablePagination.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { VPagination, VBtn } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+import { useIsMobile } from "../../composables/useIsMobile";
+defineProps({
+  pagination: { type: Object, required: true }
+});
+const { t } = useI18n();
+const currentPage = defineModel({ type: Number, ...{ default: 0 } });
+</script>
+
+<template>
+  <div class="d-flex align-center justify-sm-space-between justify-center flex-wrap gap-3 pa-5 pt-5 mt-auto">
+    <p class="text-sm text-disabled mb-0">
+      {{
+        t('pagination.info', {
+          from: pagination.from > 0 ? pagination.from : 0,
+          to: pagination.to > 0 ? pagination.to : 0,
+          total: pagination.total > 0 ? pagination.total : 0,
+        })
+      }}
+    </p>
+
+    <VPagination
+      v-model="currentPage"
+      :length="pagination.last_page"
+      :total-visible="useIsMobile().value ? 3 : 5"
+      size="small"
+    >
+      <template #item="{ isActive, page, ...slotProps }">
+        <VBtn
+          v-bind="slotProps"
+          variant="tonal"
+          size="small"
+          density="comfortable"
+          :class="{
+  'text-primary': isActive
+}"
+          :color="isActive ? 'primary' : 'on-surface'"
+          icon
+          :disabled="slotProps.props.disabled"
+          @click="currentPage = Number(page)"
+        >
+          {{ page }}
+        </VBtn>
+      </template>
+
+      <template #prev="slotProps">
+        <VBtn
+          variant="tonal"
+          color="default"
+          v-bind="slotProps"
+          size="small"
+          :icon="false"
+        >
+          {{ t("pagination.previous") }}
+        </VBtn>
+      </template>
+
+      <template #next="slotProps">
+        <VBtn
+          variant="tonal"
+          color="default"
+          v-bind="slotProps"
+          size="small"
+          :icon="false"
+        >
+          {{ t("pagination.next") }}
+        </VBtn>
+      </template>
+    </VPagination>
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+import type { Pagination } from '../../types';
+type __VLS_Props = {
+    pagination: Pagination;
+};
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/useIsMobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): import("vue").ComputedRef<boolean>;

package/dist/composables/useIsMobile.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsMobile = useIsMobile;
+var _vuetify = require("vuetify");
+function useIsMobile() {
+  return (0, _vuetify.useDisplay)().mobile;
+}

package/dist/composables/useIsMobile.mjs

@@ -0,0 +1,4 @@
+import { useDisplay } from "vuetify";
+export function useIsMobile() {
+  return useDisplay().mobile;
+}

package/dist/composables/useTableFilters.d.ts

@@ -0,0 +1,23 @@
+import { type ComputedRef } from 'vue';
+import type { FormFilter } from '../types';
+type TableFiltersOptions = {
+    formFilters: ComputedRef<FormFilter[]>;
+    syncFiltersWithUrl: boolean;
+};
+export declare function useTableFilters({ formFilters, syncFiltersWithUrl }: TableFiltersOptions): {
+    processedFormFilters: ComputedRef<FormFilter[]>;
+    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>>;
+    urlQueryParams: ComputedRef<Record<string, string | number | string[] | [] | number[] | object[] | (string | number | null)[] | null | undefined>>;
+};
+type PaginationOptions = {
+    syncFiltersWithUrl: boolean;
+    defaultValues?: {
+        pageNumber?: number;
+        pageSize?: number;
+    };
+};
+export declare function usePagination(options: PaginationOptions): {
+    currentPage: import("vue").Ref<number, number>;
+    itemsPerPage: import("vue").Ref<number, number>;
+};
+export {};