@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/components/style/VcsTextSelector.vue.d.ts

@@ -11,7 +11,7 @@ export const fonts: {
     Lucida: string;
 };
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -35,16 +35,16 @@ declare const _default: import("vue").DefineComponent<{
     font: import("vue").ComputedRef<any>;
     fontFamily: import("vue").WritableComputedRef<any>;
     fontSize: import("vue").WritableComputedRef<number>;
-    selectedFill: import("vue").WritableComputedRef<any>;
-    selectedStroke: import("vue").WritableComputedRef<any>;
+    selectedFill: import("vue").WritableComputedRef<unknown>;
+    selectedStroke: import("vue").WritableComputedRef<unknown>;
     emitNewFont: (key: any, value: any) => void;
     isBold: import("vue").WritableComputedRef<boolean>;
     isItalic: import("vue").WritableComputedRef<boolean>;
-    selectedOffsetX: import("vue").WritableComputedRef<any>;
-    selectedOffsetY: import("vue").WritableComputedRef<any>;
-    selectedText: import("vue").WritableComputedRef<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    selectedOffsetX: import("vue").WritableComputedRef<unknown>;
+    selectedOffsetY: import("vue").WritableComputedRef<unknown>;
+    selectedText: import("vue").WritableComputedRef<unknown>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -53,6 +53,6 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }>>, {
-    value: Record<string, any>;
-}>;
+    modelValue: Record<string, any>;
+}, {}>;
 export default _default;

package/src/components/style/VcsVectorStyleComponent.vue

@@ -6,7 +6,7 @@
       :is="componentMap[key]"
       :value-default="valueDefault[key]"
       v-model="selectedKeys[key].value"
-      @input="(v) => $emit(`update:${key}`, v)"
+      @update:model-value="(v) => $emit(`update:${key}`, v)"
       v-bind="specificProps[key]"
     />
   </v-sheet>
@@ -14,7 +14,7 @@
 
 <script>
   import { computed } from 'vue';
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import VcsFillMenu from './VcsFillMenu.vue';
   import VcsImageMenu from './VcsImageMenu.vue';
   import VcsStrokeMenu from './VcsStrokeMenu.vue';
@@ -60,7 +60,7 @@
       VSheet,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
@@ -90,7 +90,7 @@
         // convert to Object with style prop names as keys and computed props as value to allow v-model.
         props.styleComponents.reduce((acc, key) => {
           acc[key] = useSelectedKey(
-            () => props.value,
+            () => props.modelValue,
             key,
             props.valueDefault[key],
             emit,

package/src/components/style/VcsVectorStyleComponent.vue.d.ts

@@ -9,7 +9,7 @@ export namespace VectorStyleMenus {
     let TEXT: string;
 }
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -31,11 +31,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    selectedKeys: import("vue").ComputedRef<any>;
+    selectedKeys: import("vue").ComputedRef<unknown>;
     specificProps: import("vue").ComputedRef<{
         [x: string]: {
-            extendedShapeSettings: any;
-            iconOptions: any;
+            extendedShapeSettings: boolean;
+            iconOptions: unknown[] | undefined;
         };
     }>;
     componentMap: {
@@ -44,8 +44,8 @@ declare const _default: import("vue").DefineComponent<{
         image: string;
         text: string;
     };
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -67,10 +67,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    value: Record<string, any>;
+    modelValue: Record<string, any>;
     valueDefault: Record<string, any>;
     extendedShapeSettings: boolean;
     iconOptions: unknown[];
     styleComponents: unknown[];
-}>;
+}, {}>;
 export default _default;

package/src/components/style/composables.js

@@ -72,7 +72,10 @@ export function useSelectedKey(
       const newModelObject = structuredClone(modelObject());
       // is needed to get e.g. from square shape to x by setting radius2 from 0 to undefined
       const newValue = value === '' ? undefined : value;
-      emit('input', Object.assign(newModelObject, { [key]: newValue }));
+      emit(
+        'update:modelValue',
+        Object.assign(newModelObject, { [key]: newValue }),
+      );
     },
   });
 }

package/src/components/tables/VcsDataTable.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-card>
+  <div>
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
-      :placeholder="$t(searchbarPlaceholder)"
+      :placeholder="$st(searchbarPlaceholder)"
       v-model="search"
-      @input="handleSearch"
+      @update:model-value="handleSearch"
     >
       <template #prepend="scope">
         <slot name="prepend" v-bind="scope" />
@@ -17,12 +17,9 @@
       </template>
     </VcsTreeviewSearchbar>
     <v-data-table
-      dense
       :headers="translatedHeaders"
       :items="internalItems"
-      :item-key="itemKey"
-      :items-per-page.sync="itemsPerPageRef"
-      :page.sync="page"
+      :items-per-page="itemsPerPageRef"
       :search="search"
       :custom-filter="handleFilter"
       :no-data-text="
@@ -32,131 +29,112 @@
         $attrs.noResultsText ??
         $t('components.vcsDataTable.noResultsPlaceholder')
       "
-      :single-select="singleSelect"
-      :selectable-key="selectableKey"
-      :server-items-length="serverItemsLength"
+      :item-selectable="itemSelectable"
       hide-default-footer
+      class="vcs-table"
+      :class="{ 'vcs-table-select': $attrs.showSelect }"
       v-bind="$attrs"
-      v-on="$listeners"
-      class="vcs-table rounded-0"
+      v-model:page="page"
+      v-model:items-per-page="itemsPerPageRef"
       @update:options="(o) => $emit('update:items', { ...o, search })"
     >
-      <!-- eslint-disable-next-line -->
-      <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
+      <template v-for="slot of Object.keys($slots)" #[slot]="scope">
         <slot
           v-if="!['prepend', 'default', 'append'].includes(slot)"
           :name="slot"
           v-bind="scope"
         />
       </template>
-      <!-- eslint-disable-next-line -->
-      <template v-slot:header.data-table-select="{ props, on }">
-        <div v-if="on">
-          <v-icon
-            v-if="props.value"
-            @click="on.input(false)"
-            class="vcs-select-icon"
-          >
-            mdi-check-circle
-          </v-icon>
-          <v-icon
-            v-else-if="props.indeterminate"
-            @click="on.input(true)"
-            class="vcs-select-icon"
-          >
-            mdi-minus-circle
-          </v-icon>
-          <v-icon v-else @click="on.input(true)" class="vcs-select-icon">
-            mdi-circle-outline
-          </v-icon>
-        </div>
+      <template
+        #header.data-table-select="{ allSelected, selectAll, someSelected }"
+      >
+        <VcsCheckbox
+          :indeterminate="someSelected && !allSelected"
+          indeterminate-icon="mdi-minus-circle"
+          false-icon="mdi-circle-outline"
+          true-icon="mdi-check-circle"
+          :model-value="allSelected"
+          @update:model-value="selectAll(!allSelected)"
+        />
       </template>
-      <!-- eslint-disable-next-line -->
-      <template #item.data-table-select="{ isSelected, select, item, index }">
-        <div @mouseover="hovering = index" @mouseout="hovering = null">
-          <v-icon
-            v-if="isSelected"
-            :disabled="item.disabled"
-            @click="select(!isSelected)"
-            class="vcs-select-icon"
-          >
-            mdi-check-circle
-          </v-icon>
-          <v-icon
-            v-else
-            :disabled="item.disabled"
-            @click="select(!isSelected)"
-            class="vcs-select-icon"
-          >
-            mdi-circle-outline
-          </v-icon>
-        </div>
+      <template
+        #item.data-table-select="{ internalItem, isSelected, toggleSelect }"
+      >
+        <VcsCheckbox
+          :model-value="isSelected(internalItem)"
+          :disabled="!internalItem.selectable"
+          false-icon="mdi-circle-outline"
+          true-icon="mdi-check-circle"
+          @update:model-value="toggleSelect(internalItem)"
+        />
       </template>
-      <template #footer v-if="showFooter">
-        <v-divider />
-        <v-container class="pa-2 vcs-pagination-bar">
-          <v-row dense no-gutters justify="center" class="align-center">
-            <v-menu offset-y dense>
-              <template #activator="{ on, attrs }">
-                <VcsButton color="primary" v-bind="attrs" v-on="on">
-                  {{ itemsPerPageRef }}
-                  <v-icon>mdi-chevron-down</v-icon>
-                </VcsButton>
-              </template>
-              <v-list>
-                <v-list-item
-                  v-for="(number, index) in itemsPerPageArray"
-                  :key="index"
-                  @click="updateItemsPerPage(number)"
-                  style="min-height: auto; height: 24px; text-align: right"
-                >
-                  <v-list-item-title>{{ number }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-            <span class="mx-2">{{
-              $t('components.vcsDataTable.itemsPerPage')
-            }}</span>
-            <span class="mx-2">
-              {{ itemsFrom }} - {{ itemsTo }}
-              {{ $t('components.vcsDataTable.ofItems') }} {{ numberOfItems }}
-            </span>
-            <VcsButton
-              icon="mdi-chevron-left"
-              @click="formerPage"
-              tooltip="components.vcsDataTable.formerPage"
-              :disabled="page < 2"
-              class="ml-1"
-            />
-            <VcsButton
-              icon="mdi-chevron-right"
-              @click="nextPage"
-              tooltip="components.vcsDataTable.nextPage"
-              :disabled="page > numberOfPages - 1"
-              class="ml-1"
-            />
-          </v-row>
-        </v-container>
+      <template #tfoot v-if="showFooter">
+        <tfoot>
+          <tr class="v-data-table__tr">
+            <td colspan="100" class="text-center pa-1">
+              <v-menu dense>
+                <template #activator="{ props }">
+                  <VcsButton
+                    color="primary"
+                    v-bind="props"
+                    class="v-btn--variant-plain mx-2 d-flex flex-wrap"
+                  >
+                    {{ itemsPerPageRef }}
+                    <v-icon>mdi-chevron-down</v-icon>
+                  </VcsButton>
+                </template>
+                <v-list>
+                  <v-list-item
+                    v-for="(number, index) in itemsPerPageArray"
+                    :key="index"
+                    @click="updateItemsPerPage(number)"
+                    style="min-height: auto; height: 24px; text-align: right"
+                  >
+                    <v-list-item-title>{{ number }}</v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+              <span class="mx-2">{{
+                $t('components.vcsDataTable.itemsPerPage')
+              }}</span>
+              <span class="mx-2">
+                {{ itemsFrom }} - {{ itemsTo }}
+                {{ $t('components.vcsDataTable.ofItems') }} {{ numberOfItems }}
+              </span>
+              <VcsButton
+                icon="mdi-chevron-left"
+                @click="formerPage"
+                tooltip="components.vcsDataTable.formerPage"
+                :disabled="page < 2"
+                class="v-btn--variant-plain ml-1"
+              />
+              <VcsButton
+                icon="mdi-chevron-right"
+                @click="nextPage"
+                tooltip="components.vcsDataTable.nextPage"
+                :disabled="page > numberOfPages - 1"
+                class="v-btn--variant-plain ml-1"
+              />
+            </td>
+          </tr>
+        </tfoot>
       </template>
     </v-data-table>
-  </v-card>
+  </div>
 </template>
 <script>
   import { getCurrentInstance, ref, computed, watch } from 'vue';
   import {
-    VCard,
-    VDivider,
-    VContainer,
     VDataTable,
     VList,
     VListItem,
     VListItemTitle,
     VMenu,
     VIcon,
-    VRow,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
   import VcsButton from '../buttons/VcsButton.vue';
+  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
 
   /**
    * @typedef {Object} UpdateItemsEvent
@@ -175,14 +153,12 @@
    * @description A wrapper around {@link https://vuetifyjs.com/en/api/v-data-table/#props v-data-table } with custom pagination
    * Passes all slots to v-data-table and 'prepend', 'default' and 'append' slots to VcsSearchbar
    * @vue-prop {Array<Object>} items - array of items, where each item must provide a unique key
-   * @vue-prop {string} itemKey - the key property, which is unique on all items.
    * @vue-prop {number} serverItemsLength - number of total items on a backend. Used for server-side pagination.
    * @vue-prop {number} serverPagesLength - number of total pages on a backend. Used for server-side pagination.
-   * @vue-prop {Array<{text: string, value: string}>} [headers] - optional array defining column names. Text will be translated
+   * @vue-prop {Array<{title: string, value: string}>} [headers] - optional array defining column names. Text will be translated
    * @vue-prop {boolean} [showSearchbar=true] - whether to show searchbar
    * @vue-prop {string} [searchbarPlaceholder] - placeholder for searchbar
-   * @vue-prop {boolean} [singleSelect=false]
-   * @vue-prop {string} [selectableKey='isSelectable'] - The property on each item that is used to determine if it is selectable or not. Non-selectable items are automatically disabled.
+   * @vue-prop {string} [itemSelectable='isSelectable'] - The property on each item that is used to determine if it is selectable or not. Non-selectable items are automatically disabled.
    * @vue-event {UpdateItemsEvent} update:items - Emits when one of the options properties is updated or on search input. Can be used to update items via API call to a server.
    * @vue-computed {Array<TableItem>} filteredItems - array of items with search filter applied on. If search string is empty, same as items array.
    * @vue-computed {Array<import("vuetify").DataTableHeader>} translatedHeaders - array of translated header items.
@@ -194,13 +170,10 @@
   export default {
     name: 'VcsDataTable',
     components: {
+      VcsCheckbox,
       VcsButton,
       VcsTreeviewSearchbar,
-      VCard,
       VDataTable,
-      VContainer,
-      VDivider,
-      VRow,
       VMenu,
       VIcon,
       VList,
@@ -216,10 +189,6 @@
         type: Array,
         default: () => [],
       },
-      itemKey: {
-        type: String,
-        required: true,
-      },
       serverItemsLength: {
         type: Number,
         default: -1,
@@ -244,18 +213,10 @@
         type: String,
         default: 'components.vcsDataTable.searchbarPlaceholder',
       },
-      singleSelect: {
-        type: Boolean,
-        default: false,
-      },
-      selectableKey: {
+      itemSelectable: {
         type: String,
         default: 'isSelectable',
       },
-      value: {
-        type: Array,
-        default: () => [],
-      },
     },
     setup(props, { attrs, emit }) {
       const vm = getCurrentInstance().proxy;
@@ -274,10 +235,10 @@
       const handleFilter = (value, filter, item) => {
         if (filter) {
           const q = filter.toLocaleLowerCase();
-          return Object.values(item).some((i) => {
+          return Object.values(item.raw).some((i) => {
             if (i) {
               const content = i.toString();
-              const translated = vm.$t(content);
+              const translated = vm.$st(content);
               return (
                 translated.toLowerCase().includes(q) ||
                 content.toLowerCase().includes(q)
@@ -290,21 +251,21 @@
       };
 
       /**
-       * Syncs disabled and isSelectable (or custom selectable-key) on items
+       * Syncs disabled and isSelectable (or custom item-selectable key) on items
        * @type {ComputedRef<Array<Object>>}
        */
       const internalItems = computed(() =>
         props.items.map((item) => {
           if (
             item.disabled !== undefined &&
-            item[props.selectableKey] === undefined
+            item[props.itemSelectable] === undefined
           ) {
-            item[props.selectableKey] = !item.disabled;
+            item[props.itemSelectable] = !item.disabled;
           } else if (
             item.disabled === undefined &&
-            item[props.selectableKey] !== undefined
+            item[props.itemSelectable] !== undefined
           ) {
-            item.disabled = item[props.selectableKey];
+            item.disabled = !item[props.itemSelectable];
           }
           return item;
         }),
@@ -333,7 +294,7 @@
         return props.headers.map((hd) => {
           return {
             ...hd,
-            text: vm.$t(hd.text),
+            title: vm.$st(hd.title),
           };
         });
       });
@@ -360,6 +321,12 @@
         return last < numberOfItems.value ? last : numberOfItems.value;
       });
 
+      const updateItemsPerPage = (number) => {
+        itemsPerPageRef.value = number;
+      };
+
+      watch(() => props.itemsPerPage, updateItemsPerPage);
+
       watch(
         () => props.items,
         () => {
@@ -419,9 +386,7 @@
             page.value -= 1;
           }
         },
-        updateItemsPerPage(number) {
-          itemsPerPageRef.value = number;
-        },
+        updateItemsPerPage,
         handleFilter,
         handleSearch,
         translatedHeaders,
@@ -432,86 +397,66 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../styles/shades.scss';
-  @import '../../styles/variables.scss';
-
-  .vcs-select-icon {
-    &.v-icon {
-      font-size: $input-icon-font-size;
-
-      .v-icon__component {
-        width: $input-icon-width;
-        height: $input-icon-height;
+  :deep(.vcs-table-select > .v-table__wrapper) {
+    table tbody tr {
+      td {
+        padding: 0 8px !important;
+        &:first-child {
+          width: 32px !important;
+          padding: 0 0 !important;
+        }
       }
     }
-  }
-  ::v-deep {
-    .vcs-table {
-      tbody tr {
-        &:hover {
-          background-color: transparent !important;
-        }
-
-        &:nth-child(odd) {
-          background-color: var(--v-base-lighten4) !important;
-        }
-
-        td {
-          padding: 0 8px !important;
-
-          &.v-data-table__mobile-row {
-            justify-content: left;
-            min-height: auto;
-            .v-data-table__mobile-row__header {
-              min-width: 50px;
-            }
-          }
+    table thead tr {
+      th {
+        padding: 0 8px !important;
+        &:first-child {
+          width: 32px !important;
+          padding: 0 0 !important;
         }
       }
     }
+  }
 
-    th {
-      padding: 0 8px !important;
-
-      &.sortable {
-        overflow: hidden;
-        white-space: nowrap;
+  :deep(.vcs-table > .v-table__wrapper) {
+    table tbody tr {
+      &:hover {
+        background-color: transparent !important;
+      }
 
-        span {
-          vertical-align: middle;
-          padding: 0 4px 0 0;
+      &:nth-child(odd) {
+        background-color: rgb(var(--v-theme-base-lighten-4)) !important;
+      }
 
-          &.theme--light {
-            thead tr th {
-              color: map-get($shades, 'black') !important;
-            }
-          }
+      td {
+        padding: 0 8px;
+      }
+    }
+    table thead tr {
+      th {
+        padding: 0 8px;
+      }
+    }
+  }
 
-          &.theme--dark {
-            thead tr th {
-              color: map-get($shades, 'white') !important;
-            }
-          }
-        }
+  .v-table--density-compact {
+    --v-table-header-height: var(--v-vcs-item-height);
+    --v-table-row-height: var(--v-vcs-item-height);
+    & :deep(.v-selection-control--density-default) {
+      --v-selection-control-size: var(--v-vcs-item-height);
+    }
+  }
 
-        .v-btn.vcs-button {
-          height: 100% !important;
-          display: block;
-        }
-      }
+  :deep(.v-table > .v-table__wrapper > table > thead > tr > th) {
+    font-weight: bold;
+  }
 
-      .vcs-pagination-bar {
-        .vcs-button-wrap {
-          height: 25px;
-          border: 1px solid;
-          padding: 0 4px;
-          border-radius: 4px;
+  .vcs-footer {
+    vertical-align: middle !important;
+  }
 
-          &:hover {
-            border: 1px solid var(--v-primary-base);
-          }
-        }
-      }
-    }
+  // remove ripple effect for hover
+  :deep(.v-selection-control__input::before) {
+    background-color: transparent;
   }
 </style>