@winchsa/ui 0.1.31 → 0.1.33

package/dist/components/table/EditableDataTable.vue

@@ -1,330 +0,0 @@
-<script setup>
-import { VTooltip, VIcon, VDataTableVirtual } from "vuetify/components";
-import { useI18n } from "vue-i18n";
-import { computed } from "vue";
-import LoadingBar from "../LoadingBar.vue";
-import EditableDataTableRow from "./EditableDataTableRow.vue";
-const { t } = useI18n();
-const props = defineProps({
-  headers: { type: Array, required: true },
-  items: { type: Array, required: true },
-  errors: { type: Array, required: false },
-  loading: { type: Boolean, required: false },
-  module: { type: String, required: false }
-});
-const headers = computed(() => {
-  return props.headers.map((header) => {
-    return {
-      ...header,
-      title: header.title ? t(header.title) : "",
-      sortable: false
-    };
-  });
-});
-const moduleIdentifier = computed(() => props.module ?? "rows");
-</script>
-
-<template>
-  <LoadingBar v-if="loading" :is-loading="loading" class="app-z-1000" />
-
-  <VDataTableVirtual
-    :items="items"
-    :headers="headers"
-    min-height="400"
-    item-value="id"
-    class="secondary-table"
-  >
-    <template v-for="header in headers" #[`column.${header.key}`] :key="`header.${header.key}`">
-      <div class="d-flex align-center gap-1">
-        {{ header.title }}
-
-        <span v-if="header.required" class="text-red">*</span>
-
-        <VTooltip
-          v-if="header.tooltip"
-          content-class="bg-secondary !app-max-w-200px text-center app-font-size-12 text-pre-line"
-        >
-          <template #activator="{ props: tooltipProps }">
-            <div class="position-relative">
-              <div class="position-absolute app-w-10px app-h-10px rounded-pill" style="top: 50%;left: 50%;transform: translate(-50%, -50%);" />
-
-              <VIcon
-                v-bind="tooltipProps"
-                color="black"
-                class="outline-none"
-                icon="tabler-info-circle-filled"
-              />
-            </div>
-          </template>
-
-          <span>{{ header.tooltip }}</span>
-        </VTooltip>
-      </div>
-    </template>
-
-    <template
-      v-for="(header) in headers"
-      #[`item.${header.key}`]="{ item, index }"
-      :key="`row.${index}.${header.key}`"
-    >
-      <span
-        v-if="header.key === 'index'"
-        :key="`row.${index}.${header.key}`"
-        class="px-2 d-flex align-center justify-center h-100 app-border-silver"
-        style="border-inline-start: 0px !important;"
-      >
-        {{ `${index + 1 < 10 ? "0" : ""}${index + 1}` }}
-      </span>
-
-      <span
-        v-if="header.type === 'display'"
-        :key="`row.${index}.${header.key}`"
-        class="px-2 d-flex align-center justify-center h-100 app-border-silver"
-      >
-        {{ item[header.key] }}
-      </span>
-
-      <!-- eslint-disable vue/no-mutating-props -->
-      <template v-if="header?.fields && header?.fields?.length > 0">
-        <div
-          style="display: grid; grid-template-columns: 1fr 1fr;"
-          class="h-100 w-100"
-          :style="{
-  width: header.width
-}"
-        >
-          <template v-for="(field) in header.fields" :key="`row.${index}.${field.key}`">
-            <EditableDataTableRow
-              v-model="items[index]"
-              :header="field"
-              :index="index"
-              :module-identifier="moduleIdentifier"
-              :error-key="field.errorKey"
-              :errors="errors"
-            />
-          </template>
-        </div>
-      </template>
-
-      <template v-else>
-        <EditableDataTableRow
-          :key="`row.${index}.${header.key}.row2`"
-          v-model="items[index]"
-          :header="header"
-          :index="index"
-          :module-identifier="moduleIdentifier"
-          :error-key="header.errorKey"
-          :errors="errors"
-        />
-      </template>
-      <!-- eslint-enable vue/no-mutating-props -->
-    </template>
-
-    <template v-for="(_, name) in $slots" #[name]="slotProps">
-      <slot :name="name" v-bind="slotProps || {}" />
-    </template>
-  </VDataTableVirtual>
-</template>
-
-<style scoped>
-.v-table {
-  --v-table-row-height: 45px !important;
-}
-
-.v-table .v-table__wrapper > table > tbody > tr > td,
-.v-table .v-table__wrapper > table > tbody > tr > th {
-  border-bottom: 0px solid rgba(var(--v-table-divider)) !important;
-}
-
-.v-table__wrapper {
-  overflow: inherit !important;
-}
-
-table tr th {
-  position: sticky !important;
-  position: -webkit-sticky;
-  top: 70px;
-  z-index: 10;
-  padding-bottom: 0.75rem;
-}
-
-.secondary-table :deep(table) {
-  width: 100% !important;
-  border-collapse: collapse !important;
-  border-spacing: 0 !important;
-  border: 0px solid rgb(var(--v-theme-silver)) !important;
-  border-collapse: collapse !important;
-  font-size: 13px !important;
-}
-.secondary-table :deep(table) thead th {
-  border-top: 1px solid rgb(var(--v-theme-silver)) !important;
-  border-left: 1px solid rgb(var(--v-theme-silver)) !important;
-  border-right: 1px solid rgb(var(--v-theme-silver)) !important;
-  border-bottom: 0px !important;
-}
-.secondary-table :deep(table) tbody tr:first-child {
-  display: none !important;
-}
-.secondary-table :deep(table) tbody tr:last-child {
-  display: none !important;
-}
-.secondary-table :deep(table) th {
-  padding: 14px 16px !important;
-  height: fit-content !important;
-  top: 80px !important;
-  border: 0px 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:first-child {
-  border-inline-start: 1px solid rgb(var(--v-theme-silver)) !important;
-}
-.secondary-table :deep(table) td:last-child {
-  border-top: 0px solid rgb(var(--v-theme-silver)) !important;
-}
-.secondary-table :deep(table) td {
-  padding: 0px !important;
-  border: 0px solid rgb(var(--v-theme-silver)) !important;
-  color: rgb(var(--v-theme-on-surface)) !important;
-}
-.secondary-table :deep(table) .v-data-table-rows-no-data td {
-  padding: 10px !important;
-}
-.secondary-table .v-table .v-table__wrapper > table > tbody > tr > td,
-.secondary-table .v-table .v-table__wrapper > table > tbody > tr > th {
-  border-bottom: 1px solid rgba(var(--v-theme-silver)) !important;
-}
-
-:deep(tbody) .v-data-table__tr td {
-  padding: 0 !important;
-}
-
-:deep(.v-input) {
-  height: 100% !important;
-  display: flex !important;
-  width: 100% !important;
-}
-:deep(.v-input) .v-input__control {
-  height: 100% !important;
-  width: 100% !important;
-}
-
-:deep(.v-field) {
-  --v-input-control-height: unset !important;
-  border-radius: 0px !important;
-}
-:deep(.v-field) .v-field__input {
-  min-height: 100% !important;
-}
-:deep(.v-field) .v-field__outline {
-  color: rgba(var(--v-theme-silver));
-}
-:deep(.v-field) .v-field__outline .v-field__outline__start, :deep(.v-field) .v-field__outline .v-field__outline__end {
-  opacity: 1 !important;
-}
-
-:deep(.v-field--error:not(.v-field--disabled)) .v-field__outline {
-  color: rgb(var(--v-theme-error)) !important;
-}
-
-:deep(.dp__input) {
-  border-radius: 0 !important;
-}
-
-:deep(.dp__input_wrap) {
-  padding: 0 !important;
-}
-
-:deep(.dp__main) {
-  height: 100% !important;
-}
-:deep(.dp__main) div {
-  height: 100% !important;
-}
-
-:deep(.dp__input_wrap) {
-  display: flex !important;
-}
-:deep(.dp__input_wrap) input {
-  height: 100% !important;
-}
-
-:deep(.dp__input) {
-  border-color: rgba(var(--v-theme-silver));
-}
-:deep(.dp__input):hover {
-  border-color: rgba(var(--v-theme-silver));
-}
-
-:deep(.app-custom-input) {
-  height: 100%;
-  margin-top: 0 !important;
-}
-:deep(.app-custom-input) .multiselect__tags {
-  height: 100%;
-  border-color: rgba(var(--v-theme-silver));
-  border-radius: 0;
-  padding-top: 0px !important;
-}
-:deep(.app-custom-input) .multiselect__tags .multiselect__single {
-  margin-bottom: 0px;
-}
-:deep(.app-custom-input):hover .multiselect__tags {
-  border-color: rgba(var(--v-theme-silver));
-}
-:deep(.app-custom-input):focus .multiselect__tags, :deep(.app-custom-input):focus-within .multiselect__tags {
-  border-color: rgba(var(--v-theme-primary)) !important;
-}
-
-:deep(.app-license-plate-input) {
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 0px;
-}
-:deep(.app-license-plate-input) .app-license-plate-input-cell {
-  border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-:deep(.app-license-plate-input) .app-license-plate-input-cell:last-child {
-  border: 0px;
-}
-
-:deep(.app-date-input) {
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 0px;
-}
-:deep(.app-date-input):hover {
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-:deep(.app-date-input):focus-within {
-  transition: all 0.3s;
-  border-color: rgba(var(--v-theme-primary));
-}
-:deep(.app-date-input) .app-date-input-cell {
-  border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-:deep(.app-date-input) .app-date-input-cell:last-child {
-  border: 0px;
-}
-</style>
-
-<style>
-.app-input-outline .v-field__outline {
-  --v-field-border-width: 1px !important;
-  --v-field-border-opacity: 1 !important;
-}
-
-.app-input-table {
-  min-width: 250px !important;
-  max-width: 250px !important;
-}
-
-.app-custom-input-teleport .multiselect__tags {
-  border-color: rgba(var(--v-theme-silver)) !important;
-  border-radius: 0;
-}
-.app-custom-input-teleport .multiselect__tags .multiselect__single {
-  margin-bottom: 0px;
-}
-.app-custom-input-teleport:hover .multiselect__tags, .app-custom-input-teleport:focus .multiselect__tags, .app-custom-input-teleport:focus-within .multiselect__tags {
-  border-color: rgba(var(--v-theme-primary)) !important;
-}
-</style>

package/dist/components/table/EditableDataTable.vue.d.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;
-    };
-};

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

@@ -1,20 +0,0 @@
-import type { ErrorResponseFiled, EditableDataTableItem } from '../../types';
-declare const item: import("vue").ModelRef<any, string, any, any>;
-type __VLS_Props = {
-    index: number;
-    header: EditableDataTableItem;
-    moduleIdentifier: string;
-    errors?: ErrorResponseFiled[];
-    errorKey?: string | string[];
-};
-type __VLS_ModelProps = {
-    modelValue: typeof item['value'];
-};
-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: any) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/components/table/EditableDataTableRow.vue

@@ -1,253 +0,0 @@
-<script setup>
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { getErrorMessage } from "../../utils/formValidation";
-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 LicensePlateInput from "../forms/LicensePlateInput.vue";
-import TimePicker from "../forms/TimePicker.vue";
-import ManualDate from "../forms/ManualDate.vue";
-import AppNumberField from "../forms/AppNumberField.vue";
-const { t } = useI18n();
-const item = defineModel({ required: true, type: Object });
-const props = defineProps({
-  index: { type: Number, required: true },
-  header: { type: Object, required: true },
-  moduleIdentifier: { type: String, required: true },
-  errors: { type: Array, required: false },
-  errorKey: { type: [String, Array], required: false }
-});
-const isDisabled = computed(() => {
-  if (props.header.disabled) {
-    return true;
-  }
-  if (!props.header.dependsOn) {
-    return false;
-  }
-  if (props.header.dependsOnFunction) {
-    return props.header.dependsOnFunction(props.index, item.value);
-  }
-  return !item.value[props.header.dependsOn];
-});
-const getErrorPath = computed(() => (useInternalIndex = false) => {
-  if (Array.isArray(props.errorKey)) {
-    return props.errorKey.map((key) => `${props.moduleIdentifier}.${props.index}.${key}`);
-  }
-  if (useInternalIndex) {
-    return `${props.index}.${props.header.internalIndex}`;
-  }
-  return `${props.moduleIdentifier}.${props.index}.${props.header.key}`;
-});
-const errorMessages = computed(() => {
-  const path = getErrorPath.value(false);
-  const internalPath = getErrorPath.value(true);
-  if (Array.isArray(path)) {
-    return path.map((p) => getErrorMessage(props.errors, p)).filter(Boolean).join(", ");
-  }
-  if (typeof path === "string" && typeof internalPath === "string") {
-    return getErrorMessage(props.errors, path) || getErrorMessage(props.errors, internalPath);
-  }
-  return "";
-});
-const error = computed(() => {
-  return !!errorMessages.value;
-});
-const autoCompleteUrl = computed(() => {
-  if (typeof props.header.urlSearch === "string") {
-    return props.header.urlSearch;
-  }
-  if (typeof props.header.urlSearch !== "function") {
-    return "";
-  }
-  if (!props.header.dependsOn) {
-    return props.header.urlSearch(props.index, item.value);
-  }
-  const dependsOnValue = item.value[props.header.dependsOn];
-  if (props.header.nestedDependsOnKey) {
-    return props.header.urlSearch(props.index, dependsOnValue?.[props.header.nestedDependsOnKey]);
-  }
-  return props.header.urlSearch(props.index, dependsOnValue);
-});
-const autoCompleteParams = computed(() => {
-  const params = props.header.params || {};
-  if (!props.header.useDependsOnAsParams || !props.header.dependsOn) {
-    return params;
-  }
-  const dependsOnValue = props.header.nestedDependsOnKey ? item.value[props.header.dependsOn]?.[props.header.nestedDependsOnKey] : item.value[props.header.dependsOn];
-  return {
-    ...params,
-    [props.header.dependsOn]: dependsOnValue
-  };
-});
-const placeholder = (header) => {
-  return header.placeholder ?? t(header.text);
-};
-</script>
-
-<template>
-  <AppTextField
-    v-if="header.type === 'text'"
-    v-model="item[header.key]"
-    class="h-100 app-input-outline"
-    :placeholder="placeholder(header)"
-    :rules="header.rules"
-    :clearable="header.clearable"
-    :closable-chips="header.closableChips"
-    :disabled="isDisabled"
-    :error-messages="errorMessages"
-    :error="error"
-    flat
-    hide-details
-  />
-
-  <AppNumberField
-    v-if="header.type === 'number'"
-    v-model="item[header.key]"
-    class="h-100 app-input-outline"
-    :placeholder="placeholder(header)"
-    :rules="header.rules"
-    :maxlength="header.maxlength"
-    :clearable="header.clearable"
-    :closable-chips="header.closableChips"
-    :disabled="isDisabled"
-    :error-messages="errorMessages"
-    :error="error"
-    flat
-    hide-details
-  />
-
-  <AppSelect
-    v-if="header.type === 'select'"
-    v-model="item[header.key]"
-    class="h-100 app-input-outline"
-    :placeholder="placeholder(header)"
-    :rules="header.rules"
-    :items="header?.options"
-    :item-title="header.itemLabel || 'name'"
-    :item-value="header.trackBy || 'id'"
-    :menu-props="{
-  contentClass: ['app-input-table']
-}"
-    :menu-icon="header.menuIcon"
-    :clearable="header.clearable"
-    :closable-chips="header.closableChips"
-    :disabled="isDisabled"
-    :error-messages="errorMessages"
-    :error="error"
-    clear-icon="tabler-x"
-    hide-details
-  />
-
-  <AutocompleteInput
-    v-if="header.type === 'autocomplete' && header.urlSearch"
-    v-model="item[header.key]"
-    class="h-100 app-input-outline"
-    :placeholder="placeholder(header)"
-    :rules="header.rules"
-    :required="header.required"
-    :url="autoCompleteUrl"
-    :params="autoCompleteParams"
-    :search-internally="header.searchInternally"
-    :searchable="header.searchable"
-    :fetch-enabled="header.dependsOn ? item[`${header.dependsOn}`] : true"
-    :item-label="header.itemLabel || 'name'"
-    :track-by="header.trackBy"
-    :multiple="header.multiple"
-    :disabled="isDisabled"
-    :error-messages="errorMessages"
-    :error="error"
-    :disable-if-empty="header.disableIfEmpty"
-    teleported
-    hide-details
-    :clearable="header.clearable"
-  />
-
-  <AutocompleteInput
-    v-if="header.type === 'autocompleteGroups' && header.urlSearch"
-    v-model="item[header.key]"
-    class="h-100 app-input-outline"
-    :placeholder="placeholder(header)"
-    :rules="header.rules"
-    :required="header.required"
-    :url="autoCompleteUrl"
-    :params="autoCompleteParams"
-    :search-internally="header.searchInternally"
-    :searchable="header.searchable"
-    :fetch-enabled="header.dependsOn ? Boolean(item[`${header.dependsOn}`]) : true"
-    :group-label="header.groupLabel || 'name'"
-    :group-values="header.groupValues || 'children'"
-    :item-label="header.itemLabel || 'name'"
-    :track-by="header.trackBy || 'id'"
-    :multiple="header.multiple"
-    :disabled="isDisabled"
-    :error-messages="errorMessages"
-    :error="error"
-    :disable-if-empty="header.disableIfEmpty"
-    grouped
-    teleported
-    hide-details
-    :clearable="header.clearable"
-  />
-
-  <DatePicker
-    v-if="header.type === 'datepicker'"
-    v-model="item[header.key]"
-    :validate-on="header.validateOn"
-    class="pa-0 h-100 app-input-outline"
-    :placeholder="placeholder(header)"
-    :rules="header.rules"
-    :clearable="header.clearable"
-    :min-date="/* @__PURE__ */new Date()"
-    :max-date="header.maxDate"
-    :disabled="isDisabled"
-    :error-messages="errorMessages"
-    :error="error"
-    clear-icon="tabler-x"
-    append-inner-icon="none"
-    in-table
-    hide-error-message
-  />
-
-  <TimePicker
-    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"
-    :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
-  />
-
-  <LicensePlateInput
-    v-if="header.type === 'license_plate'"
-    v-model="item[header.key]"
-    :validate-on="header.validateOn"
-    :rules="header.rules"
-    :error="error"
-    class="pa-0 h-100 app-flex-1 app-max-w-150px app-input-outline"
-    :custom-id="`field.${index}.${header.key}`"
-    :error-messages="errorMessages"
-    hide-details
-  />
-
-  <ManualDate
-    v-if="header.type === 'manual_date'"
-    v-model="item[header.key]"
-    class="pa-0 h-100 app-flex-1 app-input-outline"
-    :validate-on="header.validateOn"
-    :rules="header.rules"
-    :error="error"
-    :custom-id="`field.${index}.${header.key}`"
-    :type="item[header.dependsOn]"
-    :disabled="isDisabled"
-    :error-messages="errorMessages"
-    hide-details
-  />
-</template>

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

@@ -1,20 +0,0 @@
-import type { ErrorResponseFiled, EditableDataTableItem } from '../../types';
-declare const item: import("vue").ModelRef<any, string, any, any>;
-type __VLS_Props = {
-    index: number;
-    header: EditableDataTableItem;
-    moduleIdentifier: string;
-    errors?: ErrorResponseFiled[];
-    errorKey?: string | string[];
-};
-type __VLS_ModelProps = {
-    modelValue: typeof item['value'];
-};
-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: any) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

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