@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.3

package/src/application/VcsSplashScreen.vue

@@ -11,36 +11,29 @@
     <v-card>
       <div class="px-2 pt-2 pb-1">
         <v-card-text>
-          <div v-html="splashScreenText"></div>
+          <VcsMarkdown :content="$st(options.content)" />
+          <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
+            <template #label>
+              <VcsMarkdown
+                :content="$st(options.checkBoxText)"
+                class="marked-checkbox-content"
+              />
+            </template>
+          </VcsCheckbox>
+        </v-card-text>
 
-          <v-row class="mt-2" v-if="options.acceptInput" no-gutters>
-            <v-col class="align-center d-flex">
-              <VcsCheckbox
-                id="checkbox_splashScreen"
-                style="margin-bottom: 16px"
-                v-model="checkBox"
+        <v-card-actions>
+          <v-row no-gutters>
+            <v-col class="text-right">
+              <VcsFormButton
+                color="primary"
+                variant="filled"
+                @click="exitScreen"
+                :disabled="options.acceptInput && !checkBox"
+                >{{ $t(options.buttonTitle) }}</VcsFormButton
               >
-              </VcsCheckbox>
-
-              <VcsLabel>
-                <div
-                  v-html="splashScreenCheckboxText"
-                  class="marked-checkbox-content"
-                ></div>
-              </VcsLabel>
             </v-col>
           </v-row>
-        </v-card-text>
-
-        <v-card-actions>
-          <v-col class="text-right">
-            <VcsFormButton
-              color="primary"
-              @click="exitScreen"
-              :disabled="!checkBox"
-              >{{ $t(options.buttonTitle) }}</VcsFormButton
-            >
-          </v-col>
         </v-card-actions>
       </div>
     </v-card>
@@ -56,16 +49,15 @@
     VRow,
     VCol,
   } from 'vuetify/components';
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
-  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import { computed, ref } from 'vue';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';
   import VcsCheckbox from '../components/form-inputs-controls/VcsCheckbox.vue';
-  import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
+  import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
   export default {
     name: 'VcsSplashScreen',
     components: {
-      VcsLabel,
       VDialog,
       VCard,
       VCardText,
@@ -74,9 +66,10 @@
       VcsCheckbox,
       VRow,
       VCol,
+      VcsMarkdown,
     },
     props: {
-      value: {
+      modelValue: {
         type: Boolean,
         default: false,
       },
@@ -86,28 +79,12 @@
       },
     },
     setup(props, { emit }) {
-      const localValue = ref(props.value);
-      watch(
-        () => props.value,
-        (newValue) => {
-          localValue.value = newValue;
-        },
-      );
-      const vm = getCurrentInstance().proxy;
-      const splashScreenText = computed(() => {
-        const translatedContent = vm.$st(props.options.content);
-        return parseAndSanitizeMarkdown(translatedContent);
-      });
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
 
-      const splashScreenCheckboxText = computed(() => {
-        const translatedContent = vm.$st(props.options.checkBoxText);
-        return parseAndSanitizeMarkdown(translatedContent);
-      });
-
-      const checkBox = ref(!props.options.acceptInput);
+      const checkBox = ref(false);
       const exitScreen = () => {
         localValue.value = false;
-        emit('input', localValue.value);
+        checkBox.value = false;
       };
 
       const position = computed(() => ({
@@ -120,8 +97,6 @@
       return {
         localValue,
         exitScreen,
-        splashScreenText,
-        splashScreenCheckboxText,
         checkBox,
         position,
       };
@@ -130,7 +105,12 @@
 </script>
 
 <style scoped lang="scss">
-  .marked-checkbox-content ::v-deep p {
-    margin-bottom: 0;
+  .marked-checkbox-content {
+    :deep(p) {
+      margin-bottom: 0;
+    }
+  }
+  .v-input {
+    margin-left: -5px !important;
   }
 </style>

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

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -8,10 +8,8 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
-    localValue: import("vue").Ref<boolean>;
+    localValue: import("vue").Ref<any>;
     exitScreen: () => void;
-    splashScreenText: import("vue").ComputedRef<string>;
-    splashScreenCheckboxText: import("vue").ComputedRef<string>;
     checkBox: import("vue").Ref<boolean>;
     position: import("vue").ComputedRef<{
         width: any;
@@ -20,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         maxHeight: any;
     }>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -29,6 +27,6 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }>>, {
-    value: boolean;
+    modelValue: boolean;
 }, {}>;
 export default _default;

package/src/application/VcsTextPage.vue

@@ -1,65 +1,34 @@
 <template>
-  <v-sheet>
-    <v-container>
-      <div v-html="markedHtml"></div>
-    </v-container>
-  </v-sheet>
+  <v-container>
+    <VcsMarkdown :content="$st(content)"></VcsMarkdown>
+  </v-container>
 </template>
 
 <style lang="scss" scoped>
-  @import '../styles/shades.scss';
-
-  .theme--light {
-    a {
-      color: map-get($shades, 'black');
-    }
-  }
-  .theme--dark {
-    a {
-      color: map-get($shades, 'white');
-    }
-  }
-  a {
-    &:hover {
-      color: var(--v-primary-base);
-    }
-    &:before {
-      content: '\00a9';
-    }
+  :deep(a) {
+    color: var(--v-text-color);
   }
 </style>
 
 <script>
-  import { computed, getCurrentInstance } from 'vue';
-  import { VContainer, VSheet } from 'vuetify/components';
-  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import { VContainer } from 'vuetify/components';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
   /**
-   * @description Is a component to render and sanitize a String
-   * @vue-prop {string} content - The markdown content to be rendered. Is translatable and will be sanitized.
+   * @description Container wrapper around VcsMarkdown
+   * @vue-prop {string} content - The markdown content to be rendered.
    */
   export default {
     name: 'VcsTextPage',
-    components: {
-      VSheet,
-      VContainer,
-    },
     props: {
       content: {
         type: String,
-        default: () => '',
+        required: true,
       },
     },
-    setup(props) {
-      const vm = getCurrentInstance().proxy;
-      const markedHtml = computed(() => {
-        const translatedContent = vm.$st(props.content);
-        return parseAndSanitizeMarkdown(translatedContent);
-      });
-
-      return {
-        markedHtml,
-      };
+    components: {
+      VContainer,
+      VcsMarkdown,
     },
   };
 </script>

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

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

package/src/application/VcsTextPageFooter.vue

@@ -1,55 +1,37 @@
 <template v-if="textPage.title">
-  <VcsTooltip :tooltip="textPage.tooltip">
-    <template #activator="{ props }">
-      <span
-        class="d-inline-block text-truncate mr-10 setmargin"
-        v-bind="{ ...$attrs, ...props }"
-      >
-        <span v-if="textPage.url" class="imprint-span imprint button">
-          <a :href="textPage.url" class="link" target="_blank"
-            >{{ $st(textPage.title) }} <span></span>
-          </a>
-        </span>
+  <span class="d-inline-block text-truncate mr-1">
+    <span v-if="textPage.url" class="imprint">
+      <a :href="textPage.url" target="_blank"
+        >{{ $st(textPage.title) }} <span></span>
+      </a>
+    </span>
 
-        <span
-          v-else
-          class="imprint-span imprint button link"
-          @click="addTextPage()"
-          >{{ $st(textPage.title) }}</span
-        >
-      </span>
-    </template>
-  </VcsTooltip>
+    <span
+      v-else
+      class="imprint cursor-pointer text-decoration-underline"
+      @click="addTextPage()"
+      >{{ $st(textPage.title) }}</span
+    >
+    <v-tooltip
+      :text="$st(textPage.tooltip)"
+      activator="parent"
+      location="top"
+    />
+  </span>
 </template>
 
 <style lang="scss" scoped>
-  .button {
-    cursor: pointer !important;
-  }
-  .setmargin {
-    margin-right: 2px !important;
-  }
   .imprint {
-    margin-left: 2px;
-  }
-  .link {
-    text-decoration: underline;
-  }
-  .imprint-span {
     font-size: smaller;
-
-    &:first-child::before {
-      content: '';
-    }
-    span {
-      font-size: inherit;
+    a {
+      color: var(--v-text-color);
     }
   }
 </style>
 
 <script>
   import { inject } from 'vue';
-  import VcsTooltip from '../components/notification/VcsTooltip.vue';
+  import { VTooltip } from 'vuetify/components';
   import VcsTextPage from './VcsTextPage.vue';
   import { vcsAppSymbol } from '../pluginHelper.js';
   import { WindowSlot } from '../manager/window/windowManager.js';
@@ -61,7 +43,7 @@
    */
   export default {
     name: 'VcsTextPageFooter',
-    components: { VcsTooltip },
+    components: { VTooltip },
     props: {
       textPage: {
         type: Object,

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/buttons/VcsButton.vue

@@ -15,7 +15,7 @@
       <v-tooltip
         activator="parent"
         v-if="tooltip"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :location="tooltipPosition"
       />
       <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">

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

@@ -63,12 +63,12 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    disabled: boolean;
-    tooltip: string;
-    tooltipPosition: string;
     icon: string;
     active: boolean;
     hasUpdate: boolean;
+    disabled: boolean;
     color: string;
+    tooltip: string;
+    tooltipPosition: string;
 }, {}>;
 export default _default;

package/src/components/buttons/VcsFormButton.vue

@@ -13,7 +13,7 @@
       <v-tooltip
         activator="parent"
         v-if="tooltip"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :location="tooltipPosition"
       />
       <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">

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

@@ -49,10 +49,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    tooltip: string;
-    tooltipPosition: string;
     icon: string;
     hasUpdate: boolean;
     variant: string;
+    tooltip: string;
+    tooltipPosition: string;
 }, {}>;
 export default _default;

package/src/components/buttons/VcsToolButton.vue

@@ -17,7 +17,7 @@
       <v-tooltip
         activator="parent"
         v-if="tooltip"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :location="tooltipPosition"
       />
       <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">

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

@@ -72,13 +72,13 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    disabled: boolean;
-    tooltip: string;
-    tooltipPosition: string;
+    background: boolean;
     icon: string;
     active: boolean;
     hasUpdate: boolean;
-    background: boolean;
+    disabled: boolean;
     color: string;
+    tooltip: string;
+    tooltipPosition: string;
 }, {}>;
 export default _default;

package/src/components/composables.d.ts

@@ -12,3 +12,10 @@ export function usePadding(attrs: Object): import("vue").ComputedRef<boolean>;
  * @returns {import("vue").ComputedRef<Array<string>>}
  */
 export function useForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): import("vue").ComputedRef<Array<string>>;
+/**
+ * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
+ * @param {import("vue").ComputedRef<string|undefined>} tooltip
+ * @param {import("vue").ComputedRef<string|undefined>} title
+ * @returns {import("vue").ComputedRef<string>}
+ */
+export function createEllipseTooltip(parent: import("vue").ComputedRef<HTMLElement | undefined>, tooltip: import("vue").ComputedRef<string | undefined>, title: import("vue").ComputedRef<string | undefined>): import("vue").ComputedRef<string>;

package/src/components/composables.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 
 /**
  * returns a computed which is true, if the provided attributes contain one or more
@@ -29,3 +29,37 @@ export function useForwardSlots(slots, exclude = []) {
     return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
   });
 }
+
+/**
+ * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
+ * @param {import("vue").ComputedRef<string|undefined>} tooltip
+ * @param {import("vue").ComputedRef<string|undefined>} title
+ * @returns {import("vue").ComputedRef<string>}
+ */
+export function createEllipseTooltip(parent, tooltip, title) {
+  const offsetWidth = ref(0);
+  const scrollWidth = ref(0);
+
+  watch([parent, title], async () => {
+    const elem = parent.value;
+    if (elem) {
+      await nextTick(() => {
+        offsetWidth.value = elem.offsetWidth;
+        scrollWidth.value = elem.scrollWidth;
+      });
+    } else {
+      offsetWidth.value = 0;
+      scrollWidth.value = 0;
+    }
+  });
+
+  return computed(() => {
+    if (tooltip.value) {
+      return tooltip.value;
+    }
+    if (title.value && offsetWidth.value < scrollWidth.value) {
+      return title.value;
+    }
+    return '';
+  });
+}

package/src/components/extent/VcsExtentEditor.vue

@@ -18,7 +18,7 @@
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { setupExtentComponentActions } from '../../actions/extentActions.js';
   import VcsExtent from './VcsExtent.vue';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
 
   /**
    * A VcsFormSection with actions to draw and edit an extent