@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.23

package/src/components/form-inputs-controls/VcsTextField.vue

@@ -17,11 +17,10 @@
           :hide-spin-buttons="!showSpinButtons"
           :dense="isDense"
           :clearable="isClearable"
-          @focus="focus = true;"
-          @blur="focus = false;"
-          @input="value => $emit('input', value)"
-          @keydown.esc="handleEsc"
-          @keydown="event => $emit('keydown', event)"
+          @focus="onFocus"
+          @blur="onBlur"
+          @keydown.esc="onEscape"
+          @keydown="$emit('keydown', $event)"
           :value="visibleValue"
           :type="type"
           outlined
@@ -220,9 +219,19 @@
         }
       });
 
-      function handleEsc() {
+      function onEscape(event) {
         textFieldRef.value.blur();
         emit('input', textFieldRef.value.initialValue);
+        emit('keydown', event);
+      }
+
+      function onBlur(event) {
+        focus.value = false;
+        emit('blur', event);
+      }
+      function onFocus(event) {
+        focus.value = true;
+        emit('focus', event);
       }
 
       return {
@@ -234,9 +243,11 @@
         isOutlined,
         visibleValue,
         type,
-        handleEsc,
+        onEscape,
         textFieldRef,
         errorMessage,
+        onBlur,
+        onFocus,
       };
     },
   };

package/src/components/form-inputs-controls/VcsWizard.vue

@@ -3,6 +3,7 @@
     vertical
     :value="value"
     @change="newValue => $emit('input', newValue)"
+    class="rounded-0"
   >
     <slot />
   </v-stepper>
@@ -61,13 +62,14 @@
     }
   }
   &.theme--dark {
+    background: map-get($shades, 'black');
     ::v-deep{
       .v-stepper__step {
         .v-stepper__label {
           color: map-get($shades, 'white');
         }
         &--active {
-          background-color: rgba(255, 255, 255, 0.5);
+          background-color: rgba(255, 255, 255, 0.17);
           .v-stepper__label {
             color: var(--v-primary-base);
           }

package/src/components/icons/CheckboxCheckedIcon.vue

@@ -3,7 +3,7 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
     <g id="icon-checkbox-check">
-      <path fill="currentColor" d="m13,2H3c-.55,0-1,.45-1,1v10c0,.55.45,1,1,1h10c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1Zm-.67,3.67l-4.23,5.88h0s-.01.03-.02.03c-.27.34-.77.39-1.1.12l-3.02-2.48c-.33-.28-.38-.77-.12-1.11,0,0,.01-.01.02-.02.27-.34.76-.4,1.09-.13l2.38,1.95,3.74-5.21s0-.01.01-.02c.26-.34.74-.41,1.09-.15h0c.35.27.43.78.17,1.14Z"/>
+      <path fill="currentColor" d="m13,2H3c-.55,0-1,.45-1,1v10c0,.55.45,1,1,1h10c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1Zm-.67,3.67l-4.23,5.88h0s-.01.03-.02.03c-.27.34-.77.39-1.1.12l-3.02-2.48c-.33-.28-.38-.77-.12-1.11,0,0,.01-.01.02-.02.27-.34.76-.4,1.09-.13l2.38,1.95,3.74-5.21s0-.01.01-.02c.26-.34.74-.41,1.09-.15h0c.35.27.43.78.17,1.14Z" />
     </g>
   </svg>
 </template>

package/src/components/icons/LegendIcon.vue

@@ -1,65 +1,15 @@
 <!-- eslint-disable max-len -->
 <template>
-  <svg id="icon_24_legend" xmlns="http://www.w3.org/2000/svg" width="24" height="25.523" viewBox="0 0 24 25.523">
-    <rect id="size" width="24" height="24" transform="translate(0 1.523)" fill="none" />
-    <g id="Group_1711" data-name="Group 1711" transform="translate(-712 -904)">
-      <rect
-        id="size-2"
-        data-name="size"
-        width="24"
-        height="24"
-        transform="translate(712 904.521)"
-        fill="none"
-      />
-      <rect
-        id="Rectangle_747"
-        data-name="Rectangle 747"
-        width="6.677"
-        height="6.677"
-        rx="2"
-        transform="translate(713 921.323)"
-        fill="currentColor"
-      />
-      <path id="Polygon_8" data-name="Polygon 8" d="M3.474,0,6.947,5.955H0Z" transform="translate(713 904)" fill="currentColor" />
-      <circle
-        id="Ellipse_88"
-        data-name="Ellipse 88"
-        cx="3.338"
-        cy="3.338"
-        r="3.338"
-        transform="translate(713 912.677)"
-        fill="currentColor"
-      />
-      <line
-        id="Line_297"
-        data-name="Line 297"
-        x2="9"
-        transform="translate(724 907.978)"
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="3"
-      />
-      <line
-        id="Line_298"
-        data-name="Line 298"
-        x2="9"
-        transform="translate(724 916.016)"
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="3"
-      />
-      <line
-        id="Line_299"
-        data-name="Line 299"
-        x2="9"
-        transform="translate(724 924.053)"
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="3"
-      />
+  <svg id="icon_24_legend" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g transform="translate(-438 -549)">
+      <g fill="currentColor">
+        <path d="M446.8,562.318a2.87,2.87,0,0,0-4.052,0l-1.766,1.765a2.87,2.87,0,0,0,0,4.053l1.766,1.765a2.868,2.868,0,0,0,4.052,0l1.766-1.765a2.87,2.87,0,0,0,0-4.053Zm.352,4.4-1.766,1.765a.865.865,0,0,1-1.224,0l-1.766-1.765a.869.869,0,0,1,0-1.225l1.766-1.765a.867.867,0,0,1,1.224,0l1.765,1.765A.868.868,0,0,1,447.155,566.722Z" />
+        <path d="M445.642,551.372a1,1,0,0,0-1.728,0l-4.156,7.124a1,1,0,0,0,.864,1.5h8.311a1,1,0,0,0,.863-1.5ZM442.363,558l2.415-4.14,2.414,4.14Z" />
+        <path d="M459,563h-7a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2Z" />
+        <path d="M459,567h-7a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2Z" />
+        <path d="M452,554h7a1,1,0,0,0,0-2h-7a1,1,0,0,0,0,2Z" />
+        <path d="M459,556h-7a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2Z" />
+      </g>
     </g>
   </svg>
 </template>

package/src/components/lists/VcsList.vue

@@ -17,12 +17,19 @@
         <v-list-item-action
           v-if="selectable"
         >
+          <v-spacer v-if="singleSelect" />
           <v-icon
-            v-if="selected.length === renderingItems.length"
+            v-else-if="selected.length === renderingItems.length"
             @click="clear"
           >
             mdi-check-circle-outline
           </v-icon>
+          <v-icon
+            v-else-if="selected.length > 0 && selected.length < renderingItems.length"
+            @click="selectAll()"
+          >
+            mdi-minus-circle-outline
+          </v-icon>
           <v-icon
             v-else
             @click="selectAll()"
@@ -52,7 +59,6 @@
             :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
             small
-            right
           />
         </v-list-item-content>
       </v-list-item>
@@ -64,6 +70,7 @@
         @mousedown.shift="$event.preventDefault()"
         @mouseover="hovering = index"
         @mouseout="hovering = null"
+        :class="{ 'v-list-item__lighten_even': lightenEven, 'v-list-item__lighten_odd': !lightenEven }"
       >
         <v-list-item-action
           v-if="selectable"
@@ -112,7 +119,6 @@
             :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
             small
-            right
           />
         </v-list-item-content>
       </v-list-item>
@@ -129,6 +135,7 @@
     VListItemAction,
     VIcon,
     VListItemTitle,
+    VSpacer,
   } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
@@ -182,6 +189,7 @@
       VListItemAction,
       VIcon,
       VListItemTitle,
+      VSpacer,
     },
     props: {
       /** @type {Array<VcsListItem>} */
@@ -246,6 +254,9 @@
       /** @type {import("vue").Ref<string>} */
       const query = ref('');
       const hovering = ref(null);
+      const lightenEven = computed(() => {
+        return !(!props.searchable && !props.showTitle);
+      });
       let firstSelected = null;
 
       watch(props, () => {
@@ -281,6 +292,7 @@
       return {
         query,
         hovering,
+        lightenEven,
         /**
          * @type {import("vue").ComputedRef<Array<VcsListItem>>}
          */
@@ -419,6 +431,16 @@
 <style lang="scss" scoped>
   ::v-deep {
     .v-list {
+      .v-list-item__lighten_even {
+        &:nth-child(even) {
+          background-color: var(--v-base-lighten4);
+        }
+      }
+      .v-list-item__lighten_odd {
+        &:nth-child(odd) {
+          background-color: var(--v-base-lighten4);
+        }
+      }
       .v-list-item {
         padding: 4px 8px 4px 16px;
         &:after{
@@ -429,9 +451,6 @@
             font-weight: 700;
           }
         }
-        &:nth-child(even) {
-          background-color: var(--v-base-lighten4);
-        }
         .v-list-item__action {
           .v-icon {
             font-size: 16px;

package/src/components/tables/VcsDataTable.vue

@@ -0,0 +1,386 @@
+<template>
+  <v-card>
+    <VcsTreeviewSearchbar
+      v-if="showSearchbar"
+      :placeholder="$t(searchbarPlaceholder)"
+      v-model="search"
+    />
+    <v-data-table
+      dense
+      :headers="translatedHeaders"
+      :items="items"
+      :item-key="itemKey"
+      :items-per-page.sync="itemsPerPageRef"
+      :page.sync="page"
+      :search="search"
+      :custom-filter="handleFilter"
+      :no-data-text="$attrs.noDataText ?? $t('components.vcsDataTable.noDataPlaceholder')"
+      :no-results-text="$attrs.noResultsText ?? $t('components.vcsDataTable.noResultsPlaceholder')"
+      :single-select="singleSelect"
+      hide-default-footer
+      v-bind="$attrs"
+      v-on="$listeners"
+      class="vcs-table rounded-0"
+    >
+      <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
+        <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="value.length === totalNumber"
+            @click="on.input(false)"
+            class="vcs-select-icon"
+          >
+            mdi-check-circle-outline
+          </v-icon>
+          <v-icon
+            v-else-if="props.indeterminate"
+            @click="on.input(true)"
+            class="vcs-select-icon"
+          >
+            mdi-minus-circle-outline
+          </v-icon>
+          <v-icon
+            v-else
+            @click="on.input(true)"
+            class="vcs-select-icon"
+          >
+            mdi-circle-outline
+          </v-icon>
+        </div>
+      </template>
+      <!-- eslint-disable-next-line -->
+      <template v-slot:item.data-table-select="{ isSelected, select, index }">
+        <div
+          @mouseover="hovering = index"
+          @mouseout="hovering = null"
+        >
+          <v-icon
+            v-if="isSelected"
+            @click="select(!isSelected)"
+            class="vcs-select-icon"
+          >
+            mdi-check-circle-outline
+          </v-icon>
+          <v-icon
+            v-else-if="hovering === index || (!singleSelect && value.length > 0)"
+            @click="select(!isSelected)"
+            class="vcs-select-icon"
+          >
+            mdi-circle-outline
+          </v-icon>
+          <v-icon
+            v-else
+            @click="select(!isSelected)"
+            class="vcs-select-icon"
+          >
+            mdi-circle-small
+          </v-icon>
+        </div>
+      </template>
+      <template #footer v-if="items.length > itemsPerPageRef">
+        <v-divider />
+        <v-container class="pa-2 vcs-pagination-bar">
+          <v-row
+            dense
+            no-gutters
+            justify="center"
+          >
+            <v-menu offset-y dense>
+              <template #activator="{ on, attrs }">
+                <VcsButton
+                  small
+                  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
+              small
+              icon="mdi-chevron-left"
+              @click="formerPage"
+              tooltip="components.vcsDataTable.formerPage"
+              :disabled="page < 2"
+              class="ml-1"
+            />
+            <VcsButton
+              small
+              icon="mdi-chevron-right"
+              @click="nextPage"
+              tooltip="components.vcsDataTable.nextPage"
+              :disabled="page > numberOfPages - 1"
+              class="ml-1"
+            />
+          </v-row>
+        </v-container>
+      </template>
+    </v-data-table>
+  </v-card>
+</template>
+<script>
+  import { getCurrentInstance, ref, computed } from 'vue';
+  import {
+    VCard,
+    VDivider,
+    VContainer,
+    VDataTable,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VMenu,
+    VIcon,
+    VRow,
+  } from 'vuetify/lib';
+  import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
+  import VcsButton from '../buttons/VcsButton.vue';
+
+  /**
+   * @description A wrapper around {@link https://vuetifyjs.com/en/api/v-data-table/#props v-data-table } with custom pagination
+   * @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 {Array<{text: 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-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.
+   * @vue-computed {number} numberOfItems - number of filtered items (depending on search).
+   * @vue-computed {number} numberOfPages - number of pages depending on number of items, search and itemsPerPage.
+   * @vue-computed {number} itemsFrom - index of first item shown on current page.
+   * @vue-computed {number} itemsTo - index of last item shown on current page.
+   */
+  export default {
+    name: 'VcsDataTable',
+    components: {
+      VcsButton,
+      VcsTreeviewSearchbar,
+      VCard,
+      VDataTable,
+      VContainer,
+      VDivider,
+      VRow,
+      VMenu,
+      VIcon,
+      VList,
+      VListItem,
+      VListItemTitle,
+    },
+    props: {
+      headers: {
+        type: Array,
+        default: () => [],
+      },
+      items: {
+        type: Array,
+        default: () => [],
+      },
+      itemKey: {
+        type: String,
+        required: true,
+      },
+      itemsPerPage: {
+        type: Number,
+        default: 10,
+      },
+      itemsPerPageArray: {
+        type: Array,
+        default: () => [5, 10, 15],
+      },
+      showSearchbar: {
+        type: Boolean,
+        default: true,
+      },
+      searchbarPlaceholder: {
+        type: String,
+        default: 'components.vcsDataTable.searchbarPlaceholder',
+      },
+      singleSelect: {
+        type: Boolean,
+        default: false,
+      },
+      value: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    setup(props) {
+      const vm = getCurrentInstance().proxy;
+      const hovering = ref(null);
+      /**
+       * @type {Ref<UnwrapRef<string>>}
+       */
+      const search = ref('');
+
+      /**
+       * @param {any} value
+       * @param {string|undefined} filter
+       * @param {TableItem} item
+       * @returns {boolean}
+       */
+      const handleFilter = (value, filter, item) => {
+        if (filter) {
+          const q = filter.toLocaleLowerCase();
+          return Object.values(item).some((i) => {
+            const content = i.toString();
+            const translated = vm.$t(content);
+            return translated.toLowerCase().includes(q) || content.toLowerCase().includes(q);
+          });
+        }
+        return true;
+      };
+
+      /**
+       * @type {ComputedRef<Array<Object>>}
+       */
+      const filteredItems = computed(() => props.items
+        .filter(item => handleFilter(item.value, search.value, item)));
+      const numberOfItems = computed(() => filteredItems.value.length);
+      const totalNumber = computed(() => props.items.length);
+
+      /**
+       * @type {ComputedRef<Array<Object>>}
+       */
+      const translatedHeaders = computed(() => {
+        return props.headers.map((hd) => {
+          hd.text = vm.$t(hd.text);
+          return hd;
+        });
+      });
+
+      /**
+       * @type {Ref<UnwrapRef<number>>}
+       */
+      const itemsPerPageRef = ref(props.itemsPerPage);
+      const numberOfPages = computed(() => {
+        return Math.ceil(numberOfItems.value / itemsPerPageRef.value);
+      });
+      /**
+       * @type {Ref<UnwrapRef<number>>}
+       */
+      const page = ref(1);
+      const itemsFrom = computed(() => ((page.value - 1) * itemsPerPageRef.value) + 1);
+      const itemsTo = computed(() => {
+        const last = page.value * itemsPerPageRef.value;
+        return last < numberOfItems.value ? last : numberOfItems.value;
+      });
+
+      return {
+        hovering,
+        search,
+        page,
+        filteredItems,
+        itemsPerPageRef,
+        itemsFrom,
+        itemsTo,
+        numberOfPages,
+        numberOfItems,
+        totalNumber,
+        nextPage() {
+          if (page.value + 1 <= numberOfPages.value) {
+            page.value += 1;
+          }
+        },
+        formerPage() {
+          if (page.value - 1 >= 1) {
+            page.value -= 1;
+          }
+        },
+        updateItemsPerPage(number) {
+          itemsPerPageRef.value = number;
+        },
+        handleFilter,
+        translatedHeaders,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/shades.scss';
+
+.vcs-select-icon {
+  &.v-icon {
+    font-size: 16px;
+    .v-icon__component {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+::v-deep {
+  .vcs-table {
+    tbody tr {
+      &:hover {
+        background-color: transparent !important;
+      }
+      &:nth-child(odd) {
+        background-color: var(--v-base-lighten4) !important;
+      }
+    }
+    td {
+      font-size: 14px !important;
+      &.v-data-table__mobile-row {
+        justify-content: left;
+        height: 27px;
+        min-height: auto;
+      }
+    }
+    th.sortable {
+      padding: 0 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      span {
+        vertical-align: middle;
+        padding: 0 4px 0 0;
+      }
+    }
+    &.theme--light {
+      thead tr th {
+        color: map-get($shades, 'black') !important;
+      }
+    }
+    &.theme--dark {
+      thead tr th {
+        color: map-get($shades, 'white') !important;
+      }
+    }
+  }
+  .v-btn.vcs-button--small {
+    height: 100% !important;
+    display: block;
+  }
+}
+
+.vcs-pagination-bar {
+  .vcs-button-wrap {
+    height: 25px;
+    border: 1px solid;
+    padding: 0 4px;
+    border-radius: 4px;
+    &:hover {
+      border: 1px solid var(--v-primary-base);
+    }
+  }
+}
+</style>