@vcmap/ui 6.3.10 → 7.0.0-rc.1

package/src/components/buttons/{VcsButton.vue → VcsButton.ts.vue}

@@ -11,7 +11,7 @@
     size="small"
     v-bind="{ ...$attrs }"
   >
-    <template #default="scope">
+    <template #default>
       <v-tooltip
         activator="parent"
         v-if="tooltip"
@@ -26,7 +26,7 @@
         :color="'bg-warning'"
         class="position-absolute badge"
       />
-      <slot name="default" v-bind="scope ?? {}" />
+      <slot name="default" v-bind="{}" />
     </template>
     <template v-for="slot of forwardSlots" #[slot]="scope">
       <slot :name="slot" v-bind="scope ?? {}" />
@@ -34,10 +34,10 @@
   </v-btn>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import { computed, defineComponent, type PropType } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
-  import VcsBadge from '../notification/VcsBadge.vue';
+  import VcsBadge from '../notification/VcsBadge.ts.vue';
   import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
   import { getForwardSlots } from '../composables.js';
 
@@ -51,7 +51,7 @@
    * @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.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsButton',
     components: {
       VTooltip,
@@ -86,7 +86,7 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'top' | 'left' | 'right'>,
         default: 'bottom',
       },
     },
@@ -95,7 +95,7 @@
         if (props.active && !props.disabled) {
           return props.color ? props.color : 'primary';
         } else {
-          return null;
+          return undefined;
         }
       });
       const forwardSlots = getForwardSlots(slots, ['default']);
@@ -115,7 +115,7 @@
         minHeight,
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,86 @@
+import { type PropType } from 'vue';
+/**
+ * @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}                                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.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "top" | "left" | "right">;
+        default: string;
+    };
+}, {
+    forwardSlots: string[];
+    hasDefaultSlot: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    appliedColor: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<string | undefined>;
+    iconSize: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    minHeight: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "top" | "left" | "right">;
+        default: string;
+    };
+}>>, {
+    disabled: boolean;
+    active: boolean;
+    color: string;
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+    icon: string;
+    hasUpdate: boolean;
+}, {}>;

package/src/components/buttons/{VcsFormButton.vue → VcsFormButton.ts.vue}

@@ -9,7 +9,7 @@
     :slim="false"
     v-bind="{ ...$attrs }"
   >
-    <template #default="scope">
+    <template #default>
       <v-tooltip
         activator="parent"
         v-if="tooltip"
@@ -24,7 +24,7 @@
         :color="'bg-warning'"
         class="position-absolute badge"
       />
-      <slot name="default" v-bind="scope ?? {}" />
+      <slot name="default" v-bind="{}" />
     </template>
     <template v-for="slot of forwardSlots" #[slot]="scope">
       <slot :name="slot" v-bind="scope ?? {}" />
@@ -32,10 +32,11 @@
   </v-btn>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
-  import VcsBadge from '../notification/VcsBadge.vue';
+  import VcsBadge from '../notification/VcsBadge.ts.vue';
   import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
   import { getForwardSlots } from '../composables.js';
 
@@ -48,7 +49,7 @@
    * @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.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsFormButton',
     components: {
       VcsBadge,
@@ -59,9 +60,9 @@
     inheritAttrs: false,
     props: {
       variant: {
-        type: String,
+        type: String as PropType<'outlined' | 'filled'>,
         default: 'outlined',
-        validator: (value) => ['outlined', 'filled'].includes(value),
+        validator: (value: string) => ['outlined', 'filled'].includes(value),
       },
       hasUpdate: {
         type: Boolean,
@@ -76,7 +77,7 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'bottom',
       },
     },
@@ -87,15 +88,12 @@
         }
         return props.variant;
       });
-      const hasDefaultSlot = computed(() => {
-        return !!slots?.default;
-      });
+      const hasDefaultSlot = computed(() => !!slots?.default);
       const forwardSlots = getForwardSlots(slots, ['default']);
       const fontSize = useFontSize();
       const iconSize = useIconSize();
-      const itemHeight = computed(() => {
-        return fontSize.value * 2 + 6;
-      });
+      const itemHeight = computed(() => fontSize.value * 2 + 6);
+
       return {
         forwardSlots,
         buttonVariant,
@@ -104,7 +102,7 @@
         iconSize,
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,69 @@
+import type { PropType } from 'vue';
+/**
+ * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
+ * Meant to be used in forms or window contents.
+ * @vue-prop {('filled' | 'outlined')}                [variant='outlined'] - Filled or outlined representation of the button.
+ * @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.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    variant: {
+        type: PropType<"outlined" | "filled">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}, {
+    forwardSlots: string[];
+    buttonVariant: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<"flat" | "outlined">;
+    hasDefaultSlot: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    itemHeight: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    iconSize: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    variant: {
+        type: PropType<"outlined" | "filled">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}>>, {
+    variant: "filled" | "outlined";
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+    icon: string;
+    hasUpdate: boolean;
+}, {}>;

package/src/components/buttons/{VcsToolButton.vue → VcsToolButton.ts.vue}

@@ -13,7 +13,7 @@
     elevation="0"
     v-bind="{ ...$attrs }"
   >
-    <template #default="scope">
+    <template #default>
       <v-tooltip
         activator="parent"
         v-if="tooltip"
@@ -32,7 +32,7 @@
         :color="'bg-warning'"
         class="position-absolute badge"
       />
-      <slot name="default" v-bind="scope ?? {}" />
+      <slot name="default" v-bind="{}" />
     </template>
     <template v-for="slot of forwardSlots" #[slot]="scope">
       <slot :name="slot" v-bind="scope ?? {}" />
@@ -40,11 +40,12 @@
   </v-btn>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import { useDisplay } from 'vuetify';
-  import VcsBadge from '../notification/VcsBadge.vue';
+  import VcsBadge from '../notification/VcsBadge.ts.vue';
   import { getForwardSlots } from '../composables.js';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
 
@@ -61,7 +62,7 @@
    * @vue-computed {string}                             appliedColor - color applied to button, depending on size and state
    * @vue-computed {boolean}                            hasDefaultSlot
    */
-  export default {
+  export default defineComponent({
     name: 'VcsToolButton',
     components: {
       VcsBadge,
@@ -100,7 +101,7 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'bottom',
       },
     },
@@ -109,7 +110,7 @@
         if (props.active && !props.disabled) {
           return props.color ? props.color : 'primary';
         } else {
-          return null;
+          return undefined;
         }
       });
       const hasDefaultSlot = computed(() => {
@@ -142,7 +143,7 @@
         xs,
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,100 @@
+import type { PropType } from 'vue';
+/**
+ * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/\|vuetify v-btn}. Used for tool buttons in the Navbar.
+ * @vue-prop {boolean}                                active - Whether button has background color. Applies vuetify primary color if color property is not set.
+ * @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}                                background - When applied with active the button shows an active-background state implying that a tool is active, but running in background, e.g. windowComponent closed.
+ * @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-computed {string}                             appliedColor - color applied to button, depending on size and state
+ * @vue-computed {boolean}                            hasDefaultSlot
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}, {
+    itemHeight: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    iconSize: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    appliedColor: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<string | undefined>;
+    forwardSlots: string[];
+    buttonVariant: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<"flat" | "text">;
+    hasDefaultSlot: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    xs: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}>>, {
+    disabled: boolean;
+    active: boolean;
+    color: string;
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+    icon: string;
+    hasUpdate: boolean;
+    background: boolean;
+}, {}>;

package/src/components/composables.d.ts

@@ -1,26 +1,16 @@
+import type { ComputedRef, Slots } from 'vue';
 /**
  * returns a computed which is true, if the provided attributes contain one or more
  * padding classes
- * @param {Object} attrs all the Attributes of the component
- * @returns {import("vue").ComputedRef<boolean>}
+ * @param attrs all the Attributes of the component
  */
-export function usePadding(attrs: Object): import("vue").ComputedRef<boolean>;
+export declare function usePadding(attrs: Record<string, unknown>): ComputedRef<boolean>;
 /**
  * returns only the slotNames which are not excluded as a computed.
- * @param {import("vue").Slots} slots
- * @param {Array<string>} exclude
- * @returns {Array<string>}
  */
-export function getForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): 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>;
+export declare function getForwardSlots(slots: Slots, exclude?: string[]): string[];
+export declare function createEllipseTooltip(parent: ComputedRef<HTMLElement | undefined>, tooltip: ComputedRef<string | undefined>, title: ComputedRef<string | undefined>): ComputedRef<string>;
 /**
  * Returns a globally unique vcs component id string
- * @returns {string}
  */
-export function useComponentId(): string;
+export declare function useComponentId(): string;

package/src/components/{composables.js → composables.ts}

@@ -1,15 +1,17 @@
+import type { ComputedRef, Slots, WritableComputedRef } from 'vue';
 import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 
 /**
  * returns a computed which is true, if the provided attributes contain one or more
  * padding classes
- * @param {Object} attrs all the Attributes of the component
- * @returns {import("vue").ComputedRef<boolean>}
+ * @param attrs all the Attributes of the component
  */
-export function usePadding(attrs) {
+export function usePadding(
+  attrs: Record<string, unknown>,
+): ComputedRef<boolean> {
   return computed(() => {
     if (attrs.class) {
-      const classes = attrs.class.split(' ');
+      const classes = (attrs.class as string).split(' ');
       return classes.some((c) => {
         return /^p[tblrsexyac]-.*/.test(c);
       });
@@ -20,29 +22,31 @@ export function usePadding(attrs) {
 
 /**
  * returns only the slotNames which are not excluded as a computed.
- * @param {import("vue").Slots} slots
- * @param {Array<string>} exclude
- * @returns {Array<string>}
  */
-export function getForwardSlots(slots, exclude = []) {
+export function getForwardSlots(
+  slots: Slots,
+  exclude: string[] = [],
+): string[] {
   return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
 }
 
-let intersectionObserver = null;
-/** @type {WeakMap<WeakKey<HTMLElement>, import("vue").ComputedRef<boolean>>} */
-const observedTargets = new WeakMap();
+let intersectionObserver: IntersectionObserver | null = null;
+const observedTargets = new WeakMap<
+  HTMLElement,
+  WritableComputedRef<boolean>
+>();
 
 /**
  * if the visibility of the element changes, the computed ref will be set.
- * @param {HTMLElement} elem
- * @param {import("vue").ComputedRef<boolean>} visible
- * @returns {() => void}}
  */
-function registerTargetWithIntersectionObserver(elem, visible) {
+function registerTargetWithIntersectionObserver(
+  elem: HTMLElement,
+  visible: WritableComputedRef<boolean>,
+): () => void {
   if (!intersectionObserver) {
     intersectionObserver = new IntersectionObserver((targets) => {
       targets.forEach((target) => {
-        const visibilityRef = observedTargets.get(target.target);
+        const visibilityRef = observedTargets.get(target.target as HTMLElement);
         if (visibilityRef) {
           visibilityRef.value = target.isIntersecting;
         }
@@ -51,23 +55,27 @@ function registerTargetWithIntersectionObserver(elem, visible) {
   }
   intersectionObserver.observe(elem);
   observedTargets.set(elem, visible);
-  return () => {
-    intersectionObserver.unobserve(elem);
+  return (): void => {
+    intersectionObserver?.unobserve(elem);
     observedTargets.delete(elem);
   };
 }
 
-/**
- * @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) {
+export function createEllipseTooltip(
+  parent: ComputedRef<HTMLElement | undefined>,
+  tooltip: ComputedRef<string | undefined>,
+  title: ComputedRef<string | undefined>,
+): ComputedRef<string> {
   const offsetWidth = ref(0);
   const scrollWidth = ref(0);
-  const visible = ref(false);
-  let observerListener = () => {};
+  const visibleValue = ref(false);
+  const visible = computed({
+    get: () => visibleValue.value,
+    set: (value) => {
+      visibleValue.value = value;
+    },
+  });
+  let observerListener = (): void => {};
   watch(visible, () => {
     if (visible.value && parent.value) {
       offsetWidth.value = parent.value.offsetWidth;
@@ -100,8 +108,8 @@ export function createEllipseTooltip(parent, tooltip, title) {
   watch(title, async () => {
     if (visible.value) {
       await nextTick(() => {
-        offsetWidth.value = parent.value.offsetWidth;
-        scrollWidth.value = parent.value.scrollWidth;
+        offsetWidth.value = parent.value?.offsetWidth ?? 0;
+        scrollWidth.value = parent.value?.scrollWidth ?? 0;
       });
     }
   });
@@ -125,9 +133,8 @@ let componentIdCounter = 0;
 
 /**
  * Returns a globally unique vcs component id string
- * @returns {string}
  */
-export function useComponentId() {
+export function useComponentId(): string {
   componentIdCounter += 1;
   return `vcs-${componentIdCounter}`;
 }