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

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -1,32 +1,21 @@
 <template>
-  <div
-    class="d-flex flex-row align-center"
-    v-if="item"
-  >
-    <div
-      class="position-relative col-8 pa-0 d-flex align-center"
-    >
-      <span
-        v-if="item.icon"
-        class="d-inline-flex"
-      >
-        <v-icon
-          v-if="isStringIcon"
-          v-text="item.icon"
-          :size="16"
-          class="mr-1"
-        />
+  <div class="d-flex flex-row align-center" v-if="item">
+    <div class="position-relative col-8 pa-0 d-flex align-center">
+      <span v-if="item.icon" class="d-inline-flex">
+        <v-icon v-if="isStringIcon" :size="16" class="mr-1">
+          {{ item.icon }}
+        </v-icon>
         <ImageElementInjector :element="item.icon" v-else />
       </span>
-      <VcsTooltip
-        :tooltip="item.tooltip || item.title"
-      >
+      <VcsTooltip :tooltip="tooltip">
         <template #activator="{ on, attrs }">
           <span
             v-bind="attrs"
             v-on="on"
             class="d-inline-block text-truncate"
-          >{{ $t(item.title) }}</span>
+            ref="titleElem"
+            >{{ $t(item.title) }}</span
+          >
         </template>
       </VcsTooltip>
     </div>
@@ -44,7 +33,7 @@
 </template>
 
 <script>
-  import { computed } from 'vue';
+  import { computed, ref } from 'vue';
   import { VIcon } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import ImageElementInjector from '../imageElementInjector.vue';
@@ -71,10 +60,22 @@
     },
     setup(props) {
       const leaf = computed(() => props.item?.children?.length === 0);
+      const titleElem = ref(null);
 
       return {
         isStringIcon: computed(() => typeof props.item.icon === 'string'),
         leaf,
+        titleElem,
+        tooltip: computed(() => {
+          if (props.item.tooltip) {
+            return props.item.tooltip;
+          }
+          const elem = titleElem.value;
+          if (elem && elem.offsetWidth < elem.scrollWidth) {
+            return props.item.title;
+          }
+          return '';
+        }),
       };
     },
   };

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 [];
 }