@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/application/VcsTextPage.vue

@@ -1,7 +1,7 @@
 <template>
   <v-sheet>
     <v-container>
-      <div v-html="markedHtml"></div>
+      <VcsMarkdown :content="markedHtml"></VcsMarkdown>
     </v-container>
   </v-sheet>
 </template>
@@ -31,8 +31,8 @@
 
 <script>
   import { computed, getCurrentInstance } from 'vue';
-  import { VContainer, VSheet } from 'vuetify/lib';
-  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import { VContainer, VSheet } from 'vuetify/components';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
   /**
    * @description Is a component to render and sanitize a String
@@ -43,6 +43,7 @@
     components: {
       VSheet,
       VContainer,
+      VcsMarkdown,
     },
     props: {
       content: {
@@ -53,8 +54,7 @@
     setup(props) {
       const vm = getCurrentInstance().proxy;
       const markedHtml = computed(() => {
-        const translatedContent = vm.$t(props.content);
-        return parseAndSanitizeMarkdown(translatedContent);
+        return vm.$st(props.content);
       });
 
       return {

package/src/application/VcsTextPage.vue.d.ts

@@ -1,16 +1,16 @@
 declare const _default: import("vue").DefineComponent<{
     content: {
         type: StringConstructor;
-        default: () => "";
+        default: () => string;
     };
 }, {
-    markedHtml: import("vue").ComputedRef<string>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    markedHtml: import("vue").ComputedRef<any>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     content: {
         type: StringConstructor;
-        default: () => "";
+        default: () => string;
     };
 }>>, {
     content: string;
-}>;
+}, {}>;
 export default _default;

package/src/application/VcsTextPageFooter.vue

@@ -1,13 +1,13 @@
 <template v-if="textPage.title">
   <VcsTooltip :tooltip="textPage.tooltip">
-    <template #activator="{ on }">
+    <template #activator="{ props }">
       <span
         class="d-inline-block text-truncate mr-10 setmargin"
-        v-on="{ ...$listeners, ...on }"
+        v-bind="{ ...$attrs, ...props }"
       >
         <span v-if="textPage.url" class="imprint-span imprint button">
           <a :href="textPage.url" class="link" target="_blank"
-            >{{ $t(textPage.title) }} <span></span>
+            >{{ $st(textPage.title) }} <span></span>
           </a>
         </span>
 
@@ -15,7 +15,7 @@
           v-else
           class="imprint-span imprint button link"
           @click="addTextPage()"
-          >{{ $t(textPage.title) }}</span
+          >{{ $st(textPage.title) }}</span
         >
       </span>
     </template>

package/src/application/VcsTextPageFooter.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     addTextPage: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     textPage: {
         type: ObjectConstructor;
         default: () => void;
@@ -20,5 +20,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     textPage: Record<string, any>;
-}>;
+}, {}>;
 export default _default;

package/src/application/attributionsHelper.d.ts

@@ -26,10 +26,10 @@ export function mergeAttributions(entries: Array<AttributionEntry>): Array<{
  * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
  * Returns a destroy function to clear listeners.
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<AttributionEntry>>, destroy: function():void}}
+ * @returns {{entries: import("vue").UnwrapRef<Array<AttributionEntry>>, destroy: function():void}}
  */
 export function getAttributions(app: import("../vcsUiApp.js").default): {
-    entries: import("vue").Ref<Array<AttributionEntry>>;
+    entries: import("vue").UnwrapRef<Array<AttributionEntry>>;
     destroy: () => void;
 };
 export namespace Attribution {

package/src/application/attributionsHelper.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { reactive } from 'vue';
 import { ObliqueMap } from '@vcmap/core';
 
 /**
@@ -59,13 +59,13 @@ export function mergeAttributions(entries) {
  * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
  * Returns a destroy function to clear listeners.
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<AttributionEntry>>, destroy: function():void}}
+ * @returns {{entries: import("vue").UnwrapRef<Array<AttributionEntry>>, destroy: function():void}}
  */
 export function getAttributions(app) {
   /**
-   * @type {import("vue").Ref<Array<AttributionEntry>>}
+   * @type {import("vue").UnwrapRef<Array<AttributionEntry>>}
    */
-  const entries = ref([]);
+  const entries = reactive([]);
   /**
    * @type {function():void}
    */
@@ -81,9 +81,9 @@ export function getAttributions(app) {
       return;
     }
     const key = `${object.className}_${object.name}`;
-    const idx = entries.value.findIndex((e) => e.key === key);
+    const idx = entries.findIndex((e) => e.key === key);
     if (idx < 0) {
-      entries.value.push({
+      entries.push({
         key,
         title:
           object.properties?.title ?? `${object.className}: ${object.name}`,
@@ -98,11 +98,11 @@ export function getAttributions(app) {
    * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
    */
   function removeAttributions(object) {
-    const idx = entries.value.findIndex(
+    const idx = entries.findIndex(
       (e) => e.key === `${object.className}_${object.name}`,
     );
     if (idx >= 0) {
-      entries.value.splice(idx, 1);
+      entries.splice(idx, 1);
     }
   }
 
@@ -130,7 +130,7 @@ export function getAttributions(app) {
       return;
     }
     obliqueListener();
-    entries.value.splice(0);
+    entries.splice(0);
     syncAttributions(map);
     [...map.layerCollection].forEach((layer) => {
       if (layer.isSupported(map)) {

package/src/application/markdownHelper.js

@@ -1,28 +1,13 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 
-// Create a custom renderer
-const renderer = new marked.Renderer();
-
-renderer.link = (href, title, text) => {
-  const target = '_blank';
-  const titleAttr = title ? ` title="${title}"` : '';
-  return `<a href="${href}" target="${target}"${titleAttr}>${text}</a>`;
-};
-
-// Set options for marked to use the custom renderer
-marked.setOptions({
-  renderer,
-  breaks: true, // Enable line breaks
-});
-
 /**
  * @param {string} content
  * @returns {string}
  */
 export function parseAndSanitizeMarkdown(content) {
-  // First, convert the Markdown to HTML using marked
-  const html = marked(content);
+  const html = marked.parse(content, { breaks: true });
+
   // Then sanitize the HTML using DOMPurify
   return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
 }

package/src/components/ImageElementInjector.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
         })[];
         required: true;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     element: {
         type: ({
             new (): HTMLCanvasElement;
@@ -20,5 +20,5 @@ declare const _default: import("vue").DefineComponent<{
         })[];
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/components/attrsHelpers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {Record<string, unknown>} attrs
+ * @returns {Record<string, unknown>}
+ */
+export function removeListenersFromAttrs(attrs: Record<string, unknown>): Record<string, unknown>;

package/src/components/attrsHelpers.js

@@ -0,0 +1,14 @@
+import { is } from '@vcsuite/check';
+
+/**
+ * @param {Record<string, unknown>} attrs
+ * @returns {Record<string, unknown>}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function removeListenersFromAttrs(attrs) {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(
+      ([key, value]) => !(key.startsWith('on') && is(value, Function)),
+    ),
+  );
+}

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="actions.length > 0" :class="classes">
+  <div v-if="actions.length > 0" :class="classes" class="gc-2">
     <template v-if="buttons.length > 0">
       <component
         :is="button"
@@ -13,23 +13,20 @@
         :has-update="btn.hasUpdate"
         :background="btn.background"
         @click.stop="btn.callback($event)"
-        v-bind="{ ...$attrs }"
-        v-on="{ ...$listeners }"
       />
     </template>
     <v-menu
       v-if="overflowButtons.length > 0"
       content-class="vcs-overflow-menu-wrap"
       max-width="none"
-      :nudge-right="13"
-      offset-x
+      location="right"
+      :offset="[13, 0]"
     >
-      <template #activator="{ on, attrs }">
+      <template #activator="{ props }">
         <component
           :is="button"
           :disabled="disabled"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="on"
+          v-bind="props"
           class="d-flex"
         >
           <v-icon>{{ overflowIcon }}</v-icon>
@@ -37,19 +34,10 @@
       </template>
       <VcsActionList :actions="overflowButtons" :disabled="disabled" />
     </v-menu>
-    <v-spacer
-      v-else-if="blockOverflow"
-      class="flex-grow-0 d-inline-block px-2"
-    />
   </div>
 </template>
-<style lang="scss">
-  .action-btn-wrap {
-    gap: 8px;
-  }
-</style>
 <script>
-  import { VIcon, VMenu, VSpacer } from 'vuetify/lib';
+  import { VIcon, VMenu, VSpacer } from 'vuetify/components';
   import VcsButton from './VcsButton.vue';
   import VcsToolButton from './VcsToolButton.vue';
   import VcsFormButton from './VcsFormButton.vue';
@@ -63,7 +51,6 @@
    * @vue-prop {string} [button='VcsButton'] - used button type (one of 'VcsButton', 'VcsToolButton' or 'VcsFormButton)
    * @vue-prop {number} [overflowCount=2] - number of buttons rendered until overflow.
    * @vue-prop {string} [overflowIcon='$vcsKebab'] - optional custom icon for overflow button
-   * @vue-prop {boolean} [blockOverflow=false] - if space for the overflow should be blocked or not (e.g. when rendering lists in a grid)
    * @vue-computed {Array<VcsAction>} buttons - buttons rendered directly, have to provide an icon
    * @vue-computed {Array<VcsAction>} overflowButtons - rest of buttons rendered in overflow
    * @vue-prop {boolean} [disabled=false] - disable all actions
@@ -99,10 +86,6 @@
         type: String,
         default: '$vcsKebab',
       },
-      blockOverflow: {
-        type: Boolean,
-        default: false,
-      },
       disabled: {
         type: Boolean,
         default: false,

package/src/components/buttons/VcsActionButtonList.vue.d.ts

@@ -17,20 +17,16 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    blockOverflow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {
+}, any, any, {
     right(): boolean;
     buttons(): any;
     overflowButtons(): any;
     classes(): string[];
-}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     actions: {
         type: ArrayConstructor;
         required: true;
@@ -49,10 +45,6 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    blockOverflow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -62,7 +54,6 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     overflowCount: number;
     overflowIcon: string;
-    blockOverflow: boolean;
-}>;
+}, {}>;
 export default _default;
 import { validateActions } from '../lists/VcsActionList.vue';

package/src/components/buttons/VcsButton.vue

@@ -1,104 +1,86 @@
 <template>
-  <div class="vcs-button-wrap">
-    <v-btn
-      v-if="!tooltip"
-      text
-      :color="appliedColor"
-      :disabled="disabled"
-      class="vcs-button pa-0"
-      :class="customClasses.join(' ')"
-      :ripple="false"
-      elevation="0"
-      v-bind="{ ...$attrs }"
-      v-on="{ ...$listeners }"
-    >
-      <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+  <v-btn
+    :min-height="minHeight"
+    min-width="auto"
+    variant="text"
+    :color="appliedColor"
+    :disabled="disabled"
+    class="vcsButton"
+    elevation="0"
+    density="compact"
+    size="small"
+    v-bind="{ ...$attrs }"
+  >
+    <template #default="scope">
+      <v-tooltip
+        activator="parent"
+        v-if="tooltip"
+        :text="$st(tooltip)"
+        :location="tooltipPosition"
+      />
+      <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
         {{ icon }}
       </v-icon>
-      <slot />
-    </v-btn>
-    <VcsTooltip
-      v-else
-      :tooltip="tooltip"
-      :tooltip-position="tooltipPosition"
-      v-bind="{ ...tooltipProps }"
-    >
-      <template #activator="{ on, attrs }">
-        <v-btn
-          text
-          :color="appliedColor"
-          :disabled="disabled"
-          class="vcs-button pa-0"
-          :class="customClasses.join(' ')"
-          :ripple="false"
-          elevation="0"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
-            {{ icon }}
-          </v-icon>
-          <slot />
-        </v-btn>
-      </template>
-    </VcsTooltip>
-    <VcsBadge v-if="hasUpdate" :color="'warning'" class="position-absolute" />
-  </div>
+      <VcsBadge
+        v-if="hasUpdate"
+        :color="'bg-warning'"
+        class="position-absolute"
+      />
+      <slot name="default" v-bind="scope ?? {}" />
+    </template>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+  </v-btn>
 </template>
 
 <style lang="scss" scoped>
-  .vcs-button-wrap {
-    position: relative;
-    display: inline-block;
-  }
   .badge {
     top: -3px;
     right: -3px;
   }
   .v-btn {
-    &.vcs-button {
-      height: 16px;
-      min-width: auto;
+    padding: 0px;
+    &.vcsButton {
       &:hover {
-        color: var(--v-primary-lighten1) !important;
-      }
-      ::v-deep {
-        .v-icon {
-          font-size: 16px;
-        }
-        .v-icon__component {
-          height: 16px;
-          width: 16px;
-        }
+        color: rgb(var(--v-theme-primary-lighten-1)) !important;
       }
     }
+    &.v-btn--disabled {
+      opacity: var(--v-disabled-opacity);
+    }
+    :deep(.v-btn__loader > .v-progress-circular) {
+      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+    }
+  }
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
   }
 </style>
 
 <script>
-  import { VBtn, VIcon } from 'vuetify/lib';
+  import { computed } from 'vue';
+  import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
+  import { useForwardSlots } from '../composables.js';
 
   /**
-   * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}.
+   * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
    * @vue-prop {boolean}                                active - State of the button. Applies set color or vuetify primary color in active state.
+   * @vue-prop {boolean}                                disabled - Whether button is disabled.
    * @vue-prop {string}                                 color - Passes property to v-btn in case prop active is true.
-   * @vue-prop {boolean}                                disabled
    * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
    * @vue-prop {string}                                 icon - When given, will display an icon in the button. Replaces vuetify icon property.
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @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 {string[]}                               [customClasses] - CSS classes to customize style
-   * @vue-computed {string}                             appliedColor - color applied to button, depending on active state
-   * @vue-computed {boolean}                            hasDefaultSlot
-   * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
    */
   export default {
     name: 'VcsButton',
     components: {
-      VcsTooltip,
+      VTooltip,
       VcsBadge,
       VBtn,
       VIcon,
@@ -109,14 +91,14 @@
         type: Boolean,
         default: false,
       },
-      color: {
-        type: String,
-        default: undefined,
-      },
       disabled: {
         type: Boolean,
         default: false,
       },
+      color: {
+        type: String,
+        default: undefined,
+      },
       hasUpdate: {
         type: Boolean,
         default: false,
@@ -133,26 +115,33 @@
         type: String,
         default: 'bottom',
       },
-      tooltipProps: {
-        type: Object,
-        default: () => ({}),
-      },
-      customClasses: {
-        type: Array,
-        default: () => [],
-      },
     },
-    computed: {
-      appliedColor() {
-        if (this.active) {
-          return this.color ? this.color : 'primary';
+    setup(props, { slots }) {
+      const appliedColor = computed(() => {
+        if (props.active && !props.disabled) {
+          return props.color ? props.color : 'primary';
         } else {
           return null;
         }
-      },
-      hasDefaultSlot() {
-        return !!this.$slots?.default?.[0]?.text?.trim();
-      },
+      });
+      const forwardSlots = useForwardSlots(slots, ['default']);
+      const hasDefaultSlot = computed(() => {
+        return !!slots?.default;
+      });
+      const fontSize = useFontSize();
+      const minHeight = computed(() => {
+        return fontSize.value * 1.5;
+      });
+      const iconSize = computed(() => {
+        return fontSize.value * (1.2 + 0.1 / 3);
+      });
+      return {
+        forwardSlots,
+        hasDefaultSlot,
+        appliedColor,
+        iconSize,
+        minHeight,
+      };
     },
   };
 </script>