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

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,12 +1,9 @@
 <template>
-  <div class="pa-2 base lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0">
+  <div
+    class="pa-2 base lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
+  >
     <slot name="prepend">
-      <v-icon
-        class="search-icon my-0 ml-1"
-        v-text="'$vcsSearch'"
-        slot="prepend"
-        size="12"
-      />
+      <v-icon class="search-icon my-0 ml-1" size="12"> $vcsSearch </v-icon>
     </slot>
 
     <slot>
@@ -23,7 +20,7 @@
     </slot>
 
     <slot name="append">
-      <v-icon v-if="hasFilter" v-text="'$vcsFilter'" class="ml-2" size="16" />
+      <v-icon v-if="hasFilter" class="ml-2" size="16">$vcsFilter</v-icon>
     </slot>
   </div>
 </template>
@@ -73,9 +70,11 @@
       min-height: unset;
     }
 
-    .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded) > .v-input__control > .v-input__slot,
+    .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
+      > .v-input__control
+      > .v-input__slot,
     .v-text-field.v-text-field--enclosed .v-text-field__details {
-      padding-right: 0;
+      padding: 0 8px;
     }
 
     .v-input.outlined {
@@ -89,20 +88,25 @@
       }
     }
 
-    .v-text-field.v-input--dense:not(.v-text-field--outlined) .v-text-field__prefix,
-    .v-text-field.v-input--dense:not(.v-text-field--outlined) .v-text-field__suffix,
+    .v-text-field.v-input--dense:not(
+        .v-text-field--outlined
+      ).v-text-field__prefix,
+    .v-text-field.v-input--dense:not(
+        .v-text-field--outlined
+      ).v-text-field__suffix,
     .v-text-field.v-input--dense:not(.v-text-field--outlined) input {
       padding: 0;
     }
 
-    .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot {
+    .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
+      > .v-input__control
+      > .v-input__slot {
       box-shadow: none;
       border-radius: 0;
     }
   }
 </style>
 
-
 <script>
   import { VIcon, VTextField } from 'vuetify/lib';
 
@@ -124,7 +128,7 @@
       },
       customClasses: {
         type: Array,
-        default: () => ([]),
+        default: () => [],
       },
       value: {
         type: String,

package/src/components/notification/VcsBadge.vue

@@ -3,18 +3,16 @@
 </template>
 
 <style lang="scss" scoped>
-@import '../../styles/shades.scss';
+  @import '../../styles/shades.scss';
   .v-application .theme--light .badge {
     border: 1px solid map-get($shades, 'white') !important;
   }
-.v-application .theme--dark .badge {
-  border: 1px solid map-get($shades, 'black') !important;
-}
+  .v-application .theme--dark .badge {
+    border: 1px solid map-get($shades, 'black') !important;
+  }
 </style>
 
-
 <script>
-
   /**
    * @description UI component representing a circular indicator.
    * @vue-prop {string} color - any of the theme colors.

package/src/components/notification/VcsTooltip.vue

@@ -7,7 +7,7 @@
     :left="tooltipPosition === 'left'"
     :right="tooltipPosition === 'right'"
     transition="expand-x-transition"
-    v-bind="{...$props, ...$attrs}"
+    v-bind="{ ...$props, ...$attrs }"
   >
     <template #activator="{ on, attrs }">
       <slot name="activator" :on="on" :attrs="attrs" />
@@ -16,100 +16,99 @@
   </v-tooltip>
 </template>
 <style lang="scss" scoped>
-//.v-tooltip__content.tooltip {
-//  border: 1px solid black;
-//  border-radius: 0;
-//  background-color: #222222;
-//
-//&.arrow-top {
-//   transform: translateY(-6px);
-//
-//&::after, &::before {
-//             bottom: 100%;
-//             left: 50%;
-//             border: solid transparent;
-//             content: "";
-//             height: 0;
-//             width: 0;
-//             position: absolute;
-//             pointer-events: none;
-//           }
-//
-//&::before {
-//   border-color: rgba(194, 225, 245, 0);
-//   border-bottom-color: black;
-//   border-width: 5px;
-//   margin-left: -5px;
-// }
-//}
-//
-//&.arrow-bottom {
-//   transform: translateY(6px);
-//
-//&::after, &::before {
-//             top: 100%;
-//             left: 50%;
-//             border: solid transparent;
-//             content: "";
-//             height: 0;
-//             width: 0;
-//             position: absolute;
-//             pointer-events: none;
-//           }
-//
-//&::before {
-//   border-color: rgba(194, 225, 245, 0);
-//   border-top-color: black;
-//   border-width: 5px;
-//   margin-left: -5px;
-// }
-//}
-//
-//&.arrow-right {
-//&::after, &::before {
-//             top: 50%;
-//             right: -11px;
-//             transform: translateY(-50%);
-//             border: solid transparent;
-//             content: "";
-//             height: 0;
-//             width: 0;
-//             position: absolute;
-//             pointer-events: none;
-//           }
-//
-//&::before {
-//   border-color: rgba(255, 0, 0, 0);
-//   border-left-color: black;
-//   border-width: 5px;
-//   margin-left: -5px;
-// }
-//}
-//
-//&.arrow-left {
-//
-//&::after, &::before {
-//             top: 50%;
-//             left: -11px;
-//             transform: translateY(-50%);
-//             border: solid transparent;
-//             content: "";
-//             height: 0;
-//             width: 0;
-//             position: absolute;
-//             pointer-events: none;
-//           }
-//
-//&::before {
-//   border-color: rgba(194, 225, 245, 0);
-//   border-right-color: black;
-//   border-width: 5px;
-// }
-//}
-//}
+  //.v-tooltip__content.tooltip {
+  //  border: 1px solid black;
+  //  border-radius: 0;
+  //  background-color: #222222;
+  //
+  //&.arrow-top {
+  //   transform: translateY(-6px);
+  //
+  //&::after, &::before {
+  //             bottom: 100%;
+  //             left: 50%;
+  //             border: solid transparent;
+  //             content: "";
+  //             height: 0;
+  //             width: 0;
+  //             position: absolute;
+  //             pointer-events: none;
+  //           }
+  //
+  //&::before {
+  //   border-color: rgba(194, 225, 245, 0);
+  //   border-bottom-color: black;
+  //   border-width: 5px;
+  //   margin-left: -5px;
+  // }
+  //}
+  //
+  //&.arrow-bottom {
+  //   transform: translateY(6px);
+  //
+  //&::after, &::before {
+  //             top: 100%;
+  //             left: 50%;
+  //             border: solid transparent;
+  //             content: "";
+  //             height: 0;
+  //             width: 0;
+  //             position: absolute;
+  //             pointer-events: none;
+  //           }
+  //
+  //&::before {
+  //   border-color: rgba(194, 225, 245, 0);
+  //   border-top-color: black;
+  //   border-width: 5px;
+  //   margin-left: -5px;
+  // }
+  //}
+  //
+  //&.arrow-right {
+  //&::after, &::before {
+  //             top: 50%;
+  //             right: -11px;
+  //             transform: translateY(-50%);
+  //             border: solid transparent;
+  //             content: "";
+  //             height: 0;
+  //             width: 0;
+  //             position: absolute;
+  //             pointer-events: none;
+  //           }
+  //
+  //&::before {
+  //   border-color: rgba(255, 0, 0, 0);
+  //   border-left-color: black;
+  //   border-width: 5px;
+  //   margin-left: -5px;
+  // }
+  //}
+  //
+  //&.arrow-left {
+  //
+  //&::after, &::before {
+  //             top: 50%;
+  //             left: -11px;
+  //             transform: translateY(-50%);
+  //             border: solid transparent;
+  //             content: "";
+  //             height: 0;
+  //             width: 0;
+  //             position: absolute;
+  //             pointer-events: none;
+  //           }
+  //
+  //&::before {
+  //   border-color: rgba(194, 225, 245, 0);
+  //   border-right-color: black;
+  //   border-width: 5px;
+  // }
+  //}
+  //}
 </style>
 <script>
-
   import { VTooltip } from 'vuetify/lib';
 
   /**
@@ -147,7 +146,9 @@
       tooltipPosition: {
         type: String,
         default: 'bottom',
-        validator(value) { return Object.keys(TooltipPositions).includes(value); },
+        validator(value) {
+          return Object.keys(TooltipPositions).includes(value);
+        },
       },
     },
     computed: {

package/src/components/notification/validation.js

@@ -13,7 +13,7 @@ export default function validate(rules, value) {
         }
         return rule;
       })
-      .filter(val => val !== true);
+      .filter((val) => val !== true);
   }
   return [];
 }

package/src/components/tables/VcsDataTable.vue

@@ -14,14 +14,20 @@
       :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')"
+      :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"
     >
+      <!-- eslint-disable-next-line -->
       <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
         <slot :name="slot" v-bind="scope" />
       </template>
@@ -33,49 +39,40 @@
             @click="on.input(false)"
             class="vcs-select-icon"
           >
-            mdi-check-circle-outline
+            mdi-check-circle
           </v-icon>
           <v-icon
             v-else-if="props.indeterminate"
             @click="on.input(true)"
             class="vcs-select-icon"
           >
-            mdi-minus-circle-outline
+            mdi-minus-circle
           </v-icon>
-          <v-icon
-            v-else
-            @click="on.input(true)"
-            class="vcs-select-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"
-        >
+        <div @mouseover="hovering = index" @mouseout="hovering = null">
           <v-icon
             v-if="isSelected"
             @click="select(!isSelected)"
             class="vcs-select-icon"
           >
-            mdi-check-circle-outline
+            mdi-check-circle
           </v-icon>
           <v-icon
-            v-else-if="hovering === index || (!singleSelect && value.length > 0)"
+            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"
-          >
+          <v-icon v-else @click="select(!isSelected)" class="vcs-select-icon">
             mdi-circle-small
           </v-icon>
         </div>
@@ -83,19 +80,10 @@
       <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-row dense no-gutters justify="center" class="align-center">
             <v-menu offset-y dense>
               <template #activator="{ on, attrs }">
-                <VcsButton
-                  small
-                  color="primary"
-                  v-bind="attrs"
-                  v-on="on"
-                >
+                <VcsButton small color="primary" v-bind="attrs" v-on="on">
                   {{ itemsPerPageRef }}
                   <v-icon>mdi-chevron-down</v-icon>
                 </VcsButton>
@@ -105,15 +93,18 @@
                   v-for="(number, index) in itemsPerPageArray"
                   :key="index"
                   @click="updateItemsPerPage(number)"
-                  style="min-height: auto; height: 24px; text-align: right;"
+                  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">{{
+              $t('components.vcsDataTable.itemsPerPage')
+            }}</span>
             <span class="mx-2">
-              {{ itemsFrom }} - {{ itemsTo }} {{ $t('components.vcsDataTable.ofItems') }} {{ numberOfItems }}
+              {{ itemsFrom }} - {{ itemsTo }}
+              {{ $t('components.vcsDataTable.ofItems') }} {{ numberOfItems }}
             </span>
             <VcsButton
               small
@@ -243,7 +234,10 @@
           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 (
+              translated.toLowerCase().includes(q) ||
+              content.toLowerCase().includes(q)
+            );
           });
         }
         return true;
@@ -252,8 +246,11 @@
       /**
        * @type {ComputedRef<Array<Object>>}
        */
-      const filteredItems = computed(() => props.items
-        .filter(item => handleFilter(item.value, search.value, item)));
+      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);
 
@@ -278,7 +275,9 @@
        * @type {Ref<UnwrapRef<number>>}
        */
       const page = ref(1);
-      const itemsFrom = computed(() => ((page.value - 1) * itemsPerPageRef.value) + 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;
@@ -316,71 +315,84 @@
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/shades.scss';
+  @import '../../styles/shades.scss';
+  @import '../../styles/variables.scss';
 
-.vcs-select-icon {
-  &.v-icon {
-    font-size: 16px;
-    .v-icon__component {
-      width: 16px;
-      height: 16px;
-    }
-  }
-}
+  .vcs-select-icon {
+    &.v-icon {
+      font-size: $input-icon-font-size;
 
-::v-deep {
-  .vcs-table {
-    tbody tr {
-      &:hover {
-        background-color: transparent !important;
-      }
-      &:nth-child(odd) {
-        background-color: var(--v-base-lighten4) !important;
+      .v-icon__component {
+        width: $input-icon-width;
+        height: $input-icon-height;
       }
     }
-    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;
+  }
+  ::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;
+            height: 27px;
+            min-height: auto;
+          }
+        }
       }
     }
-    &.theme--dark {
-      thead tr th {
-        color: map-get($shades, 'white') !important;
+
+    th {
+      padding: 0 8px !important;
+
+      &.sortable {
+        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;
+        }
       }
-    }
-  }
-  .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);
+      .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>