@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

package/src/components/style/composables.js

@@ -31,55 +31,6 @@ export function between(value, range) {
   return value >= range[0] && value <= range[1];
 }
 
-/**
- * Creates a computed property with a getter and a setter for a specific object property/key of the value prop. If the value prop is an object, this composable allows to pass this computed to an v-model of a sub component. The getter returns the value of the key or, if it is undefined, a default value. The setter merges the passed value with the other object properties of the value prop and emits the whole object as a input event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be return on get and updated on set.
- * @param {U} defaultValue Default value for the key of the modelObject.
- * @param {function(string, ...unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {Array<number>} [range] The allowed range of numbers.
- * @param {boolean} [isRequired] If value is required.
- * @returns {import("vue").WritableComputedRef<T[K]>} The value to the key param if the getter is called.
- * @template {Object} T
- * @template {string} K
- * @template U
- */
-export function useSelectedKey(
-  modelObject,
-  key,
-  defaultValue,
-  emit,
-  range,
-  isRequired,
-) {
-  return computed({
-    get() {
-      if (modelObject()?.[key] === undefined && isRequired) {
-        return defaultValue;
-      }
-      return modelObject()?.[key];
-    },
-    set(value) {
-      if (
-        ((value === null || value === undefined) && isRequired) ||
-        (value !== null &&
-          value !== undefined &&
-          range &&
-          !between(value, range))
-      ) {
-        return;
-      }
-      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(
-        'update:modelValue',
-        Object.assign(newModelObject, { [key]: newValue }),
-      );
-    },
-  });
-}
-
 /**
  * Creates a string from a color object.
  * @param {{r: number, g: number, b: number, a: number}} rgbaObject An object with rgba keys.

package/src/components/tables/VcsDataTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vcs-data-table">
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="$st(searchbarPlaceholder)"
@@ -38,12 +38,8 @@
       v-model:items-per-page="itemsPerPageRef"
       @update:options="(o) => $emit('update:items', { ...o, search })"
     >
-      <template v-for="slot of Object.keys($slots)" #[slot]="scope">
-        <slot
-          v-if="!['prepend', 'default', 'append'].includes(slot)"
-          :name="slot"
-          v-bind="scope"
-        />
+      <template v-for="slot of forwardSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope ?? {}" />
       </template>
       <template
         #header.data-table-select="{ allSelected, selectAll, someSelected }"
@@ -72,28 +68,30 @@
         <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>
+              <div class="d-inline-block">
+                <v-menu>
+                  <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>
+              </div>
               <span class="mx-2">{{
                 $t('components.vcsDataTable.itemsPerPage')
               }}</span>
@@ -135,6 +133,7 @@
   import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
   import VcsButton from '../buttons/VcsButton.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @typedef {Object} UpdateItemsEvent
@@ -218,7 +217,7 @@
         default: 'isSelectable',
       },
     },
-    setup(props, { attrs, emit }) {
+    setup(props, { attrs, emit, slots }) {
       const vm = getCurrentInstance().proxy;
       const hovering = ref(null);
       /**
@@ -364,6 +363,12 @@
           props.serverItemsLength > itemsPerPageRef.value,
       );
 
+      const forwardSlots = getForwardSlots(slots, [
+        'prepend',
+        'default',
+        'append',
+      ]);
+
       return {
         hovering,
         search,
@@ -391,6 +396,7 @@
         handleSearch,
         translatedHeaders,
         showFooter,
+        forwardSlots,
       };
     },
   };
@@ -419,6 +425,9 @@
   }
 
   :deep(.vcs-table > .v-table__wrapper) {
+    overflow-x: hidden;
+    overflow-y: auto;
+
     table tbody tr {
       &:hover {
         background-color: transparent !important;
@@ -430,6 +439,7 @@
 
       td {
         padding: 0 8px;
+        border-bottom: transparent !important;
       }
     }
     table thead tr {
@@ -440,10 +450,10 @@
   }
 
   .v-table--density-compact {
-    --v-table-header-height: var(--v-vcs-item-height);
-    --v-table-row-height: var(--v-vcs-item-height);
+    --v-table-header-height: calc(var(--v-vcs-font-size) * 2 + 6px);
+    --v-table-row-height: calc(var(--v-vcs-font-size) * 2 + 6px);
     & :deep(.v-selection-control--density-default) {
-      --v-selection-control-size: var(--v-vcs-item-height);
+      --v-selection-control-size: calc(var(--v-vcs-font-size) * 2 + 6px);
     }
   }
 

package/src/components/tables/VcsDataTable.vue.d.ts

@@ -54,6 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     handleSearch: () => void;
     translatedHeaders: ComputedRef<Object[]>;
     showFooter: import("vue").ComputedRef<boolean>;
+    forwardSlots: string[];
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     headers: {
         type: ArrayConstructor;
@@ -93,9 +94,9 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     items: unknown[];
-    headers: unknown[];
     showSearchbar: boolean;
     searchbarPlaceholder: string;
+    headers: unknown[];
     itemSelectable: string;
     itemsPerPage: number;
     serverItemsLength: number;

package/src/components/tables/VcsTable.vue

@@ -1,34 +1,34 @@
 <template>
-  <VcsDataTable :items="items" :headers="headers" v-bind="$attrs">
-    <template #item.key="{ item }">
-      <td
-        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-        :style="{ 'max-width': headers[0].width }"
+  <VcsDataTable
+    class="vcs-table"
+    v-bind="$attrs"
+    :items="items"
+    :headers="[keyHeader, valueHeader]"
+  >
+    <template #body="{ page, itemsPerPage }">
+      <tr
+        class="v-data-table__tr"
+        v-for="(item, idx) in items.slice(
+          (page - 1) * itemsPerPage,
+          page * itemsPerPage,
+        )"
+        :key="`row-${idx}`"
       >
-        {{ $st(item.key) }}
-      </td>
-    </template>
-    <template #item.value="{ item }">
-      <td
-        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-        :style="{ 'max-width': headers[1].width }"
-      >
-        <component
-          :is="getTag(tags, item.key)"
-          v-bind="getTagOptions(tags, item.key)"
-          :class="{
-            'single-line': !/\s/.test(item.value),
-            'multi-line': /\s/.test(item.value),
-          }"
+        <vcs-table-cell :title="item.key" :width="keyHeader.width" />
+        <vcs-table-cell
+          :title="item.value"
+          :width="valueHeader.width"
+          :tag="getTag(tags, item.key)"
+          :tag-options="getTagOptions(tags, item.key)"
         >
-          {{ $st(item.value) }}
-        </component>
-      </td>
+        </vcs-table-cell>
+      </tr>
     </template>
   </VcsDataTable>
 </template>
 <script>
   import { computed } from 'vue';
+  import VcsTableCell from './VcsTableCell.vue';
   import VcsDataTable from './VcsDataTable.vue';
 
   /**
@@ -125,22 +125,19 @@
 
   /**
    * @description A table view for feature attributes using VcsDataTable
-   * @vue-prop {string} featureId - feature's id
    * @vue-prop {Object} attributes - feature's attributes
    * @vue-prop {Object} tags - Allows to render the value column for specific attribute keys with special html elements. See 'defaultTagOptions' for supported html tags.
-   * @vue-prop {Array<{title: string, value: string}>} [headers] - optional array defining column names
+   * @vue-prop {{title: string, key: 'key', width: string|undefined}} [keyHeader] - optional header defining the key column
+   * @vue-prop {{title: string, key: 'value', width: string|undefined}} [valueHeader] - optional header defining the value column
    * @vue-computed {Array<TableItem>} items - from attributes derived table items
    */
   export default {
     name: 'VcsTable',
     components: {
+      VcsTableCell,
       VcsDataTable,
     },
     props: {
-      featureId: {
-        type: String,
-        required: true,
-      },
       attributes: {
         type: Object,
         required: true,
@@ -149,16 +146,23 @@
         type: Object,
         default: undefined,
       },
-      headers: {
-        type: Array,
-        default: () => [
-          { title: 'components.vcsTable.key', value: 'key', width: '160px' },
-          {
-            title: 'components.vcsTable.value',
-            value: 'value',
-            width: '160px',
-          },
-        ],
+      keyHeader: {
+        type: Object,
+        default: () => ({
+          title: 'components.vcsTable.key',
+          key: 'key',
+          width: '128px',
+        }),
+        validator: (value) => value.key === 'key',
+      },
+      valueHeader: {
+        type: Object,
+        default: () => ({
+          title: 'components.vcsTable.value',
+          key: 'value',
+          width: '192px',
+        }),
+        validator: (value) => value.key === 'value',
       },
     },
     setup(props) {
@@ -166,10 +170,7 @@
        * @type {ComputedRef<Array<TableItem>>}
        */
       const items = computed(() => {
-        return attributesToItems({
-          featureId: props.featureId,
-          ...props.attributes,
-        });
+        return attributesToItems(props.attributes);
       });
 
       return {
@@ -182,28 +183,11 @@
 </script>
 
 <style lang="scss" scoped>
-  .single-line {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .multi-line {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    height: auto;
-    max-height: 96px;
-  }
-
-  .noBorder {
-    border-bottom: none !important;
-  }
-
   :deep(.v-data-table__mobile-row__cell) {
     td.vcs-table.overflow-max-width {
       max-width: 100% !important;
     }
   }
+  :deep(.v-table__wrapper) {
+  }
 </style>

package/src/components/tables/VcsTable.vue.d.ts

@@ -32,10 +32,6 @@ export const defaultTagOptions: {
     };
 };
 declare const _default: import("vue").DefineComponent<{
-    featureId: {
-        type: StringConstructor;
-        required: true;
-    };
     attributes: {
         type: ObjectConstructor;
         required: true;
@@ -44,23 +40,29 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    headers: {
-        type: ArrayConstructor;
+    keyHeader: {
+        type: ObjectConstructor;
+        default: () => {
+            title: string;
+            key: string;
+            width: string;
+        };
+        validator: (value: unknown) => boolean;
+    };
+    valueHeader: {
+        type: ObjectConstructor;
         default: () => {
             title: string;
-            value: string;
+            key: string;
             width: string;
-        }[];
+        };
+        validator: (value: unknown) => boolean;
     };
 }, {
     items: ComputedRef<TableItem[]>;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    featureId: {
-        type: StringConstructor;
-        required: true;
-    };
     attributes: {
         type: ObjectConstructor;
         required: true;
@@ -69,17 +71,28 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    headers: {
-        type: ArrayConstructor;
+    keyHeader: {
+        type: ObjectConstructor;
+        default: () => {
+            title: string;
+            key: string;
+            width: string;
+        };
+        validator: (value: unknown) => boolean;
+    };
+    valueHeader: {
+        type: ObjectConstructor;
         default: () => {
             title: string;
-            value: string;
+            key: string;
             width: string;
-        }[];
+        };
+        validator: (value: unknown) => boolean;
     };
 }>>, {
-    headers: unknown[];
     tags: Record<string, any>;
+    keyHeader: Record<string, any>;
+    valueHeader: Record<string, any>;
 }, {}>;
 export default _default;
 export type TableItem = {

package/src/components/tables/VcsTableCell.vue

@@ -0,0 +1,72 @@
+<script setup>
+  import { ref, computed } from 'vue';
+  import { VTooltip } from 'vuetify/components';
+  import { createEllipseTooltip } from '../composables.js';
+
+  const props = defineProps({
+    title: {
+      type: [String, Number],
+      default: undefined,
+    },
+    width: {
+      type: [String, Number],
+      default: undefined,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    tagOptions: {
+      type: Object,
+      default: () => {},
+    },
+  });
+
+  const td = ref(null);
+
+  const tooltip = createEllipseTooltip(
+    computed(() => td.value),
+    computed(() => undefined),
+    computed(() => props.title),
+  );
+
+  const hasWhiteSpace = computed(() => /\s/.test(props.title));
+  // important: tooltip has evaluated before single-line and multi-line class are applied
+  const isSingleLine = computed(() => tooltip.value && !hasWhiteSpace.value);
+  const isMultiLine = computed(() => tooltip.value && hasWhiteSpace.value);
+</script>
+
+<template>
+  <td ref="td" :style="{ 'max-width': width }" class="vcs-table-cell">
+    <component
+      :is="tag"
+      :class="{
+        'single-line': isSingleLine,
+        'multi-line': isMultiLine,
+      }"
+      v-bind="tagOptions"
+    >
+      {{ $st(title) }}
+    </component>
+    <v-tooltip v-if="tooltip" activator="parent">
+      {{ $st(tooltip) }}
+    </v-tooltip>
+  </td>
+</template>
+
+<style scoped>
+  .single-line {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .multi-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    height: auto;
+    max-height: 96px;
+  }
+</style>

package/src/components/tables/VcsTableCell.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    tag: string;
+    tagOptions: Record<string, any>;
+    title?: string | number | undefined;
+    width?: string | number | undefined;
+    $props: {
+        readonly tag?: string | undefined;
+        readonly tagOptions?: Record<string, any> | undefined;
+        readonly title?: string | number | undefined;
+        readonly width?: string | number | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;