@winchsa/ui 0.1.0

package/dist/components/table/EditableDataTable.vue

@@ -0,0 +1,329 @@
+<script setup>
+import { VTooltip, VIcon } from "vuetify/components";
+import { VDataTableVirtual } from "vuetify/labs/VDataTable";
+import { useI18n } from "vue-i18n";
+import { computed } from "vue";
+import LoadingBar from "../loading/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.raw[header.key] }}
+      </span>
+
+      <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="item.raw"
+              :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="item.raw"
+          :header="header"
+          :index="index"
+          :module-identifier="moduleIdentifier"
+          :error-key="header.errorKey"
+          :errors="errors"
+        />
+      </template>
+    </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

@@ -0,0 +1,73 @@
+import { VTooltip, VIcon } from 'vuetify/components';
+import { VDataTableVirtual } from 'vuetify/labs/VDataTable';
+import type { EditableDataTableItem, ErrorResponseFiled } from '../../types';
+import LoadingBar from '../loading/LoadingBar.vue';
+import EditableDataTableRow from './EditableDataTableRow.vue';
+type __VLS_Props = {
+    headers: EditableDataTableItem[];
+    items: [];
+    errors?: ErrorResponseFiled[];
+    loading?: boolean;
+    module?: string;
+};
+declare const headers: import("vue").ComputedRef<{
+    title: string;
+    sortable: boolean;
+    internalIndex?: number;
+    key: string;
+    width?: string;
+    text?: string | undefined;
+    placeholder?: string;
+    type?: import("../../types").EditableDataTableItemType;
+    required?: boolean;
+    rules?: ((value: unknown) => typeof value | string)[];
+    renderDataOnMounted?: boolean;
+    renderDataOnBeforeMount?: boolean;
+    showDescription?: boolean;
+    tooltip?: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    maxlength?: number;
+    dependsOn?: string;
+    nestedDependsOnKey?: string;
+    fields?: EditableDataTableItem[];
+    errorKey?: string | string[];
+    useDependsOnAsParams?: boolean;
+    dependsOnFunction?: (...args: unknown[]) => boolean;
+    closableChips?: boolean;
+    urlSearch?: string | ((...args: unknown[]) => string);
+    params?: Record<string, string | number | null>;
+    menuIcon?: string;
+    searchable?: boolean;
+    searchInternally?: boolean;
+    trackBy?: string;
+    itemLabel?: string;
+    multiple?: boolean;
+    groupLabel?: string;
+    groupValues?: string;
+    options?: Record<string, unknown>[] | import("../../types").OptionItem[] | import("vue").Ref<import("../../types").OptionItem[]>;
+    disableIfEmpty?: boolean;
+}[]>;
+declare const moduleIdentifier: import("vue").ComputedRef<string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_23: any, __VLS_24: any;
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_23>]?: (props: typeof __VLS_24) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VTooltip: typeof VTooltip;
+    VIcon: typeof VIcon;
+    VDataTableVirtual: typeof VDataTableVirtual;
+    LoadingBar: typeof LoadingBar;
+    EditableDataTableRow: typeof EditableDataTableRow;
+    headers: typeof headers;
+    moduleIdentifier: typeof moduleIdentifier;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/table/EditableDataTableRow.vue

@@ -0,0 +1,243 @@
+<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 "../core/app-form-elements/AppSelect.vue";
+import AppTextField from "../core/app-form-elements/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
+  />
+
+  <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 ? 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
+  />
+
+  <DatePicker
+    v-if="header.type === 'datepicker'"
+    v-model="item[header.key]"
+    class="pa-0 h-100 app-input-outline"
+    :placeholder="placeholder(header)"
+    :rules="header.rules"
+    :clearable="header.clearable"
+    :min-date="/* @__PURE__ */new Date()"
+    :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]"
+    class="pa-0 h-100 app-flex-1 app-max-w-150px app-input-outline"
+    :rules="header.rules"
+    :show-icon="false"
+    :disabled="isDisabled"
+    :error-messages="errorMessages"
+    :error="error"
+    append-inner-icon="none"
+    hide-error-message
+  />
+
+  <LicensePlateInput
+    v-if="header.type === 'license_plate'"
+    v-model="item[header.key]"
+    class="pa-0 h-100 app-flex-1 app-max-w-150px app-input-outline"
+    :custom-id="`field.${index}.${header.key}`"
+    :error-messages="errorMessages"
+    :error="error"
+    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"
+    :custom-id="`field.${index}.${header.key}`"
+    :type="item[header.dependsOn]"
+    :disabled="isDisabled"
+    :error-messages="errorMessages"
+    :error="error"
+    hide-details
+  />
+</template>

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

@@ -0,0 +1,18 @@
+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_PublicProps = {
+    modelValue: typeof item['value'];
+} & __VLS_Props;
+declare const _default: 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>;
+export default _default;