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

package/src/application/VcsSplashScreen.vue

@@ -11,16 +11,11 @@
     <v-card>
       <div class="px-2 pt-2 pb-1">
         <v-card-text>
-          <div v-html="splashScreenText"></div>
+          <VcsMarked :content="splashScreenText"></VcsMarked>
 
           <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"
-              >
-              </VcsCheckbox>
+              <VcsCheckbox v-model="checkBox"> </VcsCheckbox>
 
               <VcsLabel>
                 <div
@@ -36,6 +31,7 @@
           <v-col class="text-right">
             <VcsFormButton
               color="primary"
+              variant="filled"
               @click="exitScreen"
               :disabled="!checkBox"
               >{{ $t(options.buttonTitle) }}</VcsFormButton
@@ -56,11 +52,13 @@
     VRow,
     VCol,
   } from 'vuetify/components';
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { computed, getCurrentInstance, ref } from 'vue';
   import { parseAndSanitizeMarkdown } from './markdownHelper.js';
   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 VcsMarked from '../components/form-output/VcsMarkdown.vue';
+  import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
   export default {
     name: 'VcsSplashScreen',
@@ -74,9 +72,10 @@
       VcsCheckbox,
       VRow,
       VCol,
+      VcsMarked,
     },
     props: {
-      value: {
+      modelValue: {
         type: Boolean,
         default: false,
       },
@@ -86,17 +85,11 @@
       },
     },
     setup(props, { emit }) {
-      const localValue = ref(props.value);
-      watch(
-        () => props.value,
-        (newValue) => {
-          localValue.value = newValue;
-        },
-      );
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
+
       const vm = getCurrentInstance().proxy;
       const splashScreenText = computed(() => {
-        const translatedContent = vm.$st(props.options.content);
-        return parseAndSanitizeMarkdown(translatedContent);
+        return vm.$st(props.options.content);
       });
 
       const splashScreenCheckboxText = computed(() => {
@@ -107,7 +100,6 @@
       const checkBox = ref(!props.options.acceptInput);
       const exitScreen = () => {
         localValue.value = false;
-        emit('input', localValue.value);
       };
 
       const position = computed(() => ({
@@ -130,7 +122,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,9 +8,9 @@ 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>;
+    splashScreenText: import("vue").ComputedRef<any>;
     splashScreenCheckboxText: import("vue").ComputedRef<string>;
     checkBox: import("vue").Ref<boolean>;
     position: import("vue").ComputedRef<{
@@ -20,7 +20,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 +29,6 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }>>, {
-    value: boolean;
+    modelValue: boolean;
 }, {}>;
 export default _default;

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>
@@ -32,7 +32,7 @@
 <script>
   import { computed, getCurrentInstance } from 'vue';
   import { VContainer, VSheet } from 'vuetify/components';
-  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  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.$st(props.content);
-        return parseAndSanitizeMarkdown(translatedContent);
+        return vm.$st(props.content);
       });
 
       return {

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

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

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/form-inputs-controls/VcsCheckbox.vue

@@ -5,21 +5,24 @@
     false-icon="$vcsCheckbox"
     indeterminate-icon="$vcsCheckboxIndeterminate"
     :hide-details="false"
+    class="vcs-checkbox"
     :class="{
       'py-1': !paddingProvided,
     }"
     v-bind="$attrs"
   >
-    <template #label>
-      <slot name="label" />
-      <template v-if="!$slots.label">{{ $st($attrs.label) }}</template>
+    <template #label="scope">
+      <slot name="label" v-bind="scope ?? {}">{{ $st($attrs.label) }}</slot>
+    </template>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
     </template>
     <template #message="{ message }">
       <v-tooltip
         ref="errorTooltip"
         :activator="checkbox"
         v-if="message"
-        :text="message"
+        :text="$st(message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
@@ -28,7 +31,7 @@
       v-if="tooltip && !errorTooltip"
       :activator="checkbox"
       :location="tooltipPosition"
-      :text="tooltip"
+      :text="$st(tooltip)"
     ></v-tooltip>
   </v-checkbox>
 </template>
@@ -49,7 +52,7 @@
 <script>
   import { ref } from 'vue';
   import { VCheckbox, VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { useForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-checkbox/ |vuetify checkbox}.
@@ -76,12 +79,13 @@
         default: 'right',
       },
     },
-    setup(props, { attrs }) {
+    setup(props, { attrs, slots }) {
       const checkbox = ref();
       const errorTooltip = ref();
       const paddingProvided = usePadding(attrs);
-
+      const forwardSlots = useForwardSlots(slots, ['label']);
       return {
+        forwardSlots,
         paddingProvided,
         checkbox,
         errorTooltip,

package/src/components/form-inputs-controls/VcsCheckbox.vue.d.ts

@@ -8,6 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    forwardSlots: import("vue").ComputedRef<string[]>;
     paddingProvided: import("vue").ComputedRef<boolean>;
     checkbox: import("vue").Ref<any>;
     errorTooltip: import("vue").Ref<any>;

package/src/components/form-inputs-controls/VcsChipArrayInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex d-inline-block align-center"
+    class="d-flex d-inline-block align-center vcs-chip-array-input"
     :class="{
       'py-1': !paddingProvided,
     }"

package/src/components/form-inputs-controls/VcsDatePicker.vue.d.ts

@@ -87,7 +87,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: Date;
     icon: string;
+    modelValue: Date;
 }, {}>;
 export default _default;

package/src/components/form-inputs-controls/VcsFileInput.vue

@@ -15,7 +15,7 @@
         ref="errorTooltipRef"
         :activator="fileInputRef"
         v-if="message"
-        :text="message"
+        :text="$st(message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
@@ -25,7 +25,7 @@
       <v-tooltip
         :activator="fileInputRef"
         v-if="tooltip && !errorTooltipRef"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :location="tooltipPosition"
       />
     </template>

package/src/components/form-inputs-controls/VcsFormSection.vue.d.ts

@@ -65,8 +65,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    disabled: boolean;
     headerActions: unknown[];
+    disabled: boolean;
     heading: string;
     actionButtonListOverflowCount: number;
     expandable: boolean;

package/src/components/form-inputs-controls/VcsLabel.vue

@@ -5,17 +5,25 @@
     :class="{
       'vcs-label-required': required,
       'vcs-label-disabled': disabled,
+      'py-1': !paddingProvided,
     }"
   >
     <slot />
+    <v-tooltip
+      v-if="tooltip"
+      activator="parent"
+      :location="tooltipPosition"
+      :text="$st(tooltip)"
+    ></v-tooltip>
   </label>
 </template>
 
 <style lang="scss" scoped>
   .vcs-label {
+    box-sizing: content-box;
     display: flex;
     align-items: center;
-    height: var(--v-vcs-item-height);
+    height: calc(var(--v-vcs-item-height) - 8px);
     font-size: var(--v-vcs-font-size);
   }
   .vcs-label-required:after {
@@ -27,15 +35,23 @@
   }
 </style>
 <script>
+  import { VTooltip } from 'vuetify/components';
+  import { usePadding } from '../composables.js';
+
   /**
    * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
    * Pass the label text as innerHtml.
    * @vue-prop {string} htmlFor - an id reference the label is meant for.
    * @vue-prop {boolean} [required=false] - Marks an input field as required by adding an asterisk after the label.
    * @vue-prop {boolean} [disabled=false] - Marks an input field as disabled by adding transparency to the label.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
+   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
   export default {
     name: 'VcsLabel',
+    components: {
+      VTooltip,
+    },
     props: {
       htmlFor: {
         type: String,
@@ -49,6 +65,20 @@
         type: Boolean,
         default: false,
       },
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+    },
+    setup(props, { attrs }) {
+      const paddingProvided = usePadding(attrs);
+      return {
+        paddingProvided,
+      };
     },
   };
 </script>

package/src/components/form-inputs-controls/VcsLabel.vue.d.ts

@@ -11,7 +11,17 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    paddingProvided: import("vue").ComputedRef<boolean>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     htmlFor: {
         type: StringConstructor;
         default: undefined;
@@ -24,9 +34,19 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     disabled: boolean;
     required: boolean;
+    tooltip: string;
+    tooltipPosition: string;
     htmlFor: string;
 }, {}>;
 export default _default;

package/src/components/form-inputs-controls/VcsRadio.vue

@@ -27,7 +27,7 @@
         :activator="radioGroup"
         :model-value="true"
         v-if="message"
-        :text="message"
+        :text="$st(message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
@@ -36,7 +36,7 @@
       v-if="tooltip && !errorTooltip"
       :activator="radioGroup"
       :location="tooltipPosition"
-      :text="tooltip"
+      :text="$st(tooltip)"
     ></v-tooltip>
   </v-radio-group>
 </template>

package/src/components/form-inputs-controls/VcsSelect.vue

@@ -12,7 +12,7 @@
       'py-1': !paddingProvided,
     }"
     v-bind="$attrs"
-    v-model="forwardedModelValue"
+    v-model="localModelValue"
   >
     <template #selection="{ item, index }">
       <span v-if="index === 0" class="text-truncate w-100">
@@ -28,7 +28,7 @@
       <v-tooltip
         :activator="selectFieldRef"
         v-if="tooltip && !errorTooltipRef"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :location="tooltipPosition"
       />
     </template>
@@ -45,7 +45,7 @@
         :activator="selectFieldRef"
         ref="errorTooltipRef"
         v-if="message"
-        :text="message"
+        :text="$st(message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
@@ -137,6 +137,7 @@
   import { computed, ref } from 'vue';
   import { usePadding } from '../composables.js';
   import VcsCheckbox from './VcsCheckbox.vue';
+  import { useProxiedComplexModel } from '../modelHelper.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-select/ |vuetify select}.
@@ -182,20 +183,10 @@
         default: undefined,
       },
     },
-    setup(props, { attrs }) {
-      // $ref to v-select element
+    setup(props, { attrs, emit }) {
       const selectFieldRef = ref();
       const errorTooltipRef = ref();
-      const localModelValue = ref(props.modelValue);
-
-      const forwardedModelValue = computed({
-        get() {
-          return localModelValue.value;
-        },
-        set(value) {
-          localModelValue.value = value;
-        },
-      });
+      const localModelValue = useProxiedComplexModel(props, 'modelValue', emit);
 
       const additionalItems = computed(() => {
         if (Array.isArray(localModelValue.value)) {
@@ -217,7 +208,7 @@
       const paddingProvided = usePadding(attrs);
 
       return {
-        forwardedModelValue,
+        localModelValue,
         additionalItems,
         isMultiple,
         paddingProvided,