@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/components/lists/VcsActionList.vue

@@ -1,50 +1,51 @@
 <template>
-  <v-list v-if="actions.length > 0">
-    <VcsTooltip
+  <v-list v-if="actions.length > 0" rounded class="vcs-action-list">
+    <v-list-item
       v-for="(action, index) in actions"
       :key="`${action.name}-${index}`"
-      :tooltip="action.title"
-      :tooltip-position="tooltipPosition"
-      v-bind="{ ...tooltipProps }"
+      :class="action.active ? 'text-primary' : ''"
+      :disabled="action.disabled || disabled"
+      @click="action.callback($event)"
+      v-bind="{ ...$attrs }"
     >
-      <template #activator="{ on, attrs }">
-        <v-list-item
-          :class="action.active ? 'primary--text' : ''"
-          :disabled="action.disabled || disabled"
-          @click="action.callback($event)"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <v-list-item-icon v-if="showIcon && action.icon">
-            <v-icon small>{{ action.icon }}</v-icon>
-          </v-list-item-icon>
-          <v-list-item-content class="vcs-action-list">
-            <v-list-item-title>{{ $t(action.name) }}</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
+      <template #prepend v-if="showIcon && action.icon">
+        <v-icon :size="iconSize">{{ action.icon }}</v-icon>
       </template>
-    </VcsTooltip>
+      <v-list-item-title>{{ $st(action.name) }}</v-list-item-title>
+      <v-tooltip
+        v-if="action.title"
+        activator="parent"
+        :text="$st(action.title)"
+        :location="tooltipPosition"
+        v-bind="{ ...tooltipProps }"
+      />
+    </v-list-item>
   </v-list>
 </template>
-<style lang="scss">
-  .vcs-action-list {
-    width: 100%;
-    &:hover {
-      color: var(--v-primary-base);
+<style lang="scss" scoped>
+  :deep(.v-list-item:hover) {
+    .v-list-item-title {
+      color: rgb(var(--v-theme-primary));
     }
+    .v-icon {
+      // the icon color slightly differs from the text color, darken-1 seems to fit better
+      color: rgb(var(--v-theme-primary-darken-1));
+    }
+  }
+  :deep(.v-list-item .v-list-item__prepend .v-list-item__spacer) {
+    width: 8px;
   }
 </style>
 <script>
-  import { is } from '@vcsuite/check';
+  import { is, optional } from '@vcsuite/check';
   import {
     VIcon,
     VList,
     VListItem,
-    VListItemContent,
-    VListItemIcon,
     VListItemTitle,
-  } from 'vuetify/lib';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
+    VTooltip,
+  } from 'vuetify/components';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * pattern to check actions
@@ -52,13 +53,13 @@
    */
   export const ActionPattern = {
     name: String,
-    title: [undefined, String],
-    icon: [undefined, String],
+    title: optional(String),
+    icon: optional(String),
     callback: Function,
-    active: [undefined, Boolean],
-    background: [undefined, Boolean],
-    hasUpdate: [undefined, Boolean],
-    disabled: [undefined, Boolean],
+    active: optional(Boolean),
+    background: optional(Boolean),
+    hasUpdate: optional(Boolean),
+    disabled: optional(Boolean),
   };
 
   /**
@@ -79,24 +80,21 @@
 
   /**
    * @description
-   * A component rendering a list of actions with overflow mechanic using
-   * {@link https://vuetifyjs.com/en/api/v-list-item-group/|vuetify v-list-item-group} and {@link VcsTooltip}.
+   * A component rendering a list of actions
    * @vue-prop {Array<VcsAction>} actions - Array of actions
-   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
-   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip. (action.title will be rendered as a tooltip)
+   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to v-tooltip
    * @vue-prop {boolean}                                [showIcon=false] - Whether list item icons should be displayed.
    * @vue-prop {boolean}                                [disabled=false] - disable all actions
    */
   export default {
     name: 'VcsActionList',
     components: {
-      VcsTooltip,
       VList,
       VListItem,
-      VListItemIcon,
       VIcon,
       VListItemTitle,
-      VListItemContent,
+      VTooltip,
     },
     props: {
       actions: {
@@ -121,5 +119,11 @@
         default: false,
       },
     },
+    setup() {
+      const iconSize = useIconSize();
+      return {
+        iconSize,
+      };
+    },
   };
 </script>

package/src/components/lists/VcsActionList.vue.d.ts

@@ -35,7 +35,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    iconSize: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     actions: {
         type: ArrayConstructor;
         required: true;
@@ -58,9 +60,9 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    tooltipPosition: string;
     disabled: boolean;
+    tooltipPosition: string;
     tooltipProps: Record<string, any>;
     showIcon: boolean;
-}>;
+}, {}>;
 export default _default;