@vcmap/ui 6.3.10 → 7.0.0-rc.1

package/src/components/lists/{VcsTreeviewTitle.vue → VcsTreeviewTitle.ts.vue}

@@ -1,12 +1,14 @@
-<script setup>
+<script setup lang="ts">
   import { computed, ref } from 'vue';
+  import type { PropType } from 'vue';
   import { VTooltip } from 'vuetify/components';
   import { createEllipseTooltip } from '../composables.js';
+  import type { VcsTreeNodeItem } from './VcsTreeNode.ts.vue';
 
   const props = defineProps({
     item: {
-      type: Object,
-      default: undefined,
+      type: Object as PropType<VcsTreeNodeItem>,
+      required: true,
     },
     cursorPointer: {
       type: Boolean,
@@ -14,7 +16,7 @@
     },
   });
 
-  const titleParent = ref();
+  const titleParent = ref<HTMLElement | undefined>(undefined);
 
   const tooltip = createEllipseTooltip(
     computed(() => titleParent.value),

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

@@ -0,0 +1,25 @@
+import type { PropType } from 'vue';
+import type { VcsTreeNodeItem } from './VcsTreeNode.ts.vue';
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    item: {
+        type: PropType<VcsTreeNodeItem>;
+        required: true;
+    };
+    cursorPointer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, 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<{
+    item: {
+        type: PropType<VcsTreeNodeItem>;
+        required: true;
+    };
+    cursorPointer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    cursorPointer: boolean;
+}, {}>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/src/components/lists/dragHelper.d.ts

@@ -68,7 +68,7 @@ export function setupDraggableListOrTree(props: Object & {
     items: Array<VcsDraggableItem>;
     draggable: boolean;
     dropTargetZones?: DropTargetZonesFunction;
-}, query: import("vue").Ref<string>, emit: (event: 'itemMoved', value: ItemMovedEvent) => void): DraggableListOrTreeSetup;
+}, query: import("vue").Ref<string>, emit: (event: "itemMoved", value: ItemMovedEvent) => void): DraggableListOrTreeSetup;
 /**
  * A function moving items of a nested tree. Can be used for VcsTreeView @item-moved
  * @example
@@ -92,7 +92,7 @@ export namespace InsertMode {
     let INTO: number;
     let AFTER: number;
 }
-export type VcsDraggableItem = Object & (import('./VcsTreeNode.vue').VcsTreeNodeItem | import('./VcsListItemComponent.vue').VcsListItem);
+export type VcsDraggableItem = Object & (any | any);
 export type ItemMovedEvent = {
     item: VcsDraggableItem;
     targetItem: VcsDraggableItem;

package/src/components/lists/listHelper.d.ts

@@ -1,88 +1,16 @@
-/**
- * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
- * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
- * @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
- * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
- */
-export function createSelectionActions(items: import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>, selected: import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>, emit: (event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
-/**
- * @typedef {Object & {
- * selectable?: boolean,
- * singleSelect?: boolean,
- * selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
- * modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem> }
- * } SelectableListProps
- * @property {boolean?} selectable
- * @property {boolean?} singleSelect
- * @property {(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void} selectFunction
- * @property {Array<import("./VcsListItemComponent.vue").VcsListItem>?} modelValue
- */
-/**
- * @typedef {{
- *   selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>,
- *   select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
- *   selectionActions:Array<import("../../actions/actionHelper.js").VcsAction>
- * }} SelectableListSetup
- */
-/**
- * Function setting up selection logic for lists. Use only in setup function of components!
- * This requires VcsListItems with unique keys (name property).
- * @param {Object & SelectableListProps} props
- * @param {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} renderingItems
- * @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
- * @returns {SelectableListSetup}
- */
-export function setupSelectableList(props: Object & SelectableListProps, renderingItems: import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>, emit: (event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void): SelectableListSetup;
-/**
- * @typedef {{
- *   hovering: import("vue").Ref<number|undefined>,
- *   dragging: import("vue").Ref<number|undefined>,
- *   isDraggable: import("vue").ComputedRef<boolean>,
- *   borderBottom: (index: number) => boolean,
- *   borderTop: (index: number) => boolean,
- *   dragStart: (
- *     e: MouseEvent,
- *     item: import('./VcsListItemComponent.vue').VcsListItem,
- *     index: number,
- *   ) => void;
- *   dragOver: (e: MouseEvent, index: number) => void;
- *   dragLeave: (e: MouseEvent) => void;
- *   dragEnd: (e: MouseEvent) => void;
- *   drop: (e: MouseEvent, targetIndex: number) => void;
- * }} DraggableListSetup
- */
-/**
- * Function setting up drag logic for lists. Use only in setup function of components!
- * This requires VcsListItems with unique keys (name property).
- * @param {Object & { draggable: boolean }} props
- * @param {import("vue").Ref<string>} query
- * @param {(event: 'itemMoved', value: import("./dragHelper.js").ItemMovedEvent) => void} emit
- * @returns {DraggableListSetup}
- * @deprecated This function is deprecated and will be removed in version 7. Use setupDraggableListOrTree from dragHelper.js instead.
- */
-export function setupDraggableList(props: Object & {
-    draggable: boolean;
-}, query: import("vue").Ref<string>, emit: (event: 'itemMoved', value: import("./dragHelper.js").ItemMovedEvent) => void): DraggableListSetup;
-export type SelectableListProps = Object & {
+import type { ComputedRef, Ref, ShallowRef, UnwrapNestedRefs } from 'vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+import type { VcsListItem } from './VcsListItemComponent.ts.vue';
+export declare function createSelectionActions(items: Ref<VcsListItem[]>, selected: ShallowRef<VcsListItem[]>, emit: (event: 'update:modelValue', value: UnwrapNestedRefs<VcsListItem[]>) => void): VcsAction[];
+export type SelectableListProps = {
     selectable?: boolean;
     singleSelect?: boolean;
-    selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void;
-    modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem>;
+    selectFunction?: (item: VcsListItem, event: PointerEvent) => void;
+    modelValue?: VcsListItem[];
 };
 export type SelectableListSetup = {
-    selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
-    select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void;
-    selectionActions: Array<import("../../actions/actionHelper.js").VcsAction>;
-};
-export type DraggableListSetup = {
-    hovering: import("vue").Ref<number | undefined>;
-    dragging: import("vue").Ref<number | undefined>;
-    isDraggable: import("vue").ComputedRef<boolean>;
-    borderBottom: (index: number) => boolean;
-    borderTop: (index: number) => boolean;
-    dragStart: (e: MouseEvent, item: import('./VcsListItemComponent.vue').VcsListItem, index: number) => void;
-    dragOver: (e: MouseEvent, index: number) => void;
-    dragLeave: (e: MouseEvent) => void;
-    dragEnd: (e: MouseEvent) => void;
-    drop: (e: MouseEvent, targetIndex: number) => void;
+    selected: ShallowRef<VcsListItem[]>;
+    select: (item: VcsListItem, event: PointerEvent) => void;
+    selectionActions: VcsAction[];
 };
+export declare function setupSelectableList(props: SelectableListProps, renderingItems: ComputedRef<VcsListItem[]>, emit: (event: 'update:modelValue', value: UnwrapNestedRefs<VcsListItem[]>) => void): SelectableListSetup;

package/src/components/lists/listHelper.ts

@@ -0,0 +1,202 @@
+import { computed, isReactive, reactive, shallowRef, watch } from 'vue';
+import type { ComputedRef, Ref, ShallowRef, UnwrapNestedRefs } from 'vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+import type { VcsListItem } from './VcsListItemComponent.ts.vue';
+
+export function createSelectionActions(
+  items: Ref<VcsListItem[]>,
+  selected: ShallowRef<VcsListItem[]>,
+  emit: (
+    event: 'update:modelValue',
+    value: UnwrapNestedRefs<VcsListItem[]>,
+  ) => void,
+): VcsAction[] {
+  const selectAllAction = reactive({
+    name: 'list.selectAll',
+    tooltip: 'list.selectAll',
+    disabled: computed(() => items.value.length - selected.value.length < 1),
+    callback(): void {
+      const currentSelection = [...selected.value];
+      selected.value = items.value.filter((item) => !item.disabled);
+
+      selected.value.forEach((item) => {
+        if (item.selectionChanged && !currentSelection.includes(item)) {
+          item.selectionChanged(true);
+        }
+      });
+      emit('update:modelValue', selected.value);
+    },
+  });
+
+  const clearSelectionAction = reactive({
+    name: 'list.clearSelection',
+    tooltip: 'list.clearSelection',
+    disabled: computed(() => selected.value.length < 1),
+    callback(): void {
+      [...selected.value].forEach((item) => {
+        if (item.selectionChanged) {
+          item.selectionChanged(false);
+        }
+      });
+      selected.value = [];
+      emit('update:modelValue', selected.value);
+    },
+  });
+
+  return [selectAllAction, clearSelectionAction];
+}
+
+export type SelectableListProps = {
+  selectable?: boolean;
+  singleSelect?: boolean;
+  selectFunction?: (item: VcsListItem, event: PointerEvent) => void;
+  modelValue?: VcsListItem[];
+};
+
+export type SelectableListSetup = {
+  selected: ShallowRef<VcsListItem[]>;
+  select: (item: VcsListItem, event: PointerEvent) => void;
+  selectionActions: VcsAction[];
+};
+
+export function setupSelectableList(
+  props: SelectableListProps,
+  renderingItems: ComputedRef<VcsListItem[]>,
+  emit: (
+    event: 'update:modelValue',
+    value: UnwrapNestedRefs<VcsListItem[]>,
+  ) => void,
+): SelectableListSetup {
+  const selected = shallowRef<VcsListItem[]>([]);
+
+  watch(
+    props,
+    () => {
+      if (selected.value !== props.modelValue) {
+        selected.value = props.modelValue || [];
+      }
+      if (props.singleSelect && selected.value.length > 1) {
+        selected.value
+          .filter((i, index) => index && i.selectionChanged)
+          .forEach((i) => i.selectionChanged?.(false));
+        selected.value = [selected.value[0]];
+        emit('update:modelValue', selected.value);
+      }
+      if (!props.selectable && selected.value.length > 0) {
+        selected.value
+          .filter((i) => i.selectionChanged)
+          .forEach((i) => i.selectionChanged?.(false));
+        selected.value = [];
+        emit('update:modelValue', selected.value);
+      }
+    },
+    { immediate: true, deep: false },
+  );
+
+  const selectionActions = createSelectionActions(
+    renderingItems,
+    selected,
+    emit,
+  );
+
+  let firstSelected = selected.value.at(0);
+
+  return {
+    selected,
+    select:
+      props.selectFunction ||
+      ((item, event): void => {
+        if (!props.selectable || item.disabled) {
+          return;
+        }
+        if (!isReactive(item)) {
+          throw new Error('Trying to select an unreactive item');
+        }
+        if (Array.isArray(item.clickedCallbacks)) {
+          item.clickedCallbacks.forEach((cb) => {
+            cb(event);
+          });
+        }
+        if (props.singleSelect) {
+          if (selected.value[0] === item) {
+            item.selectionChanged?.(false);
+            selected.value = [];
+            firstSelected = undefined;
+          } else {
+            selected.value[0]?.selectionChanged?.(false);
+            item.selectionChanged?.(true);
+            selected.value = [item];
+            firstSelected = item;
+          }
+        } else if (event.shiftKey) {
+          let firstIndex = 0;
+          if (firstSelected) {
+            firstIndex = renderingItems.value.indexOf(firstSelected);
+          }
+          const currentIndex = renderingItems.value.indexOf(item);
+          if (firstIndex > -1 && currentIndex > -1) {
+            const currentSelection = [...selected.value];
+            selected.value = renderingItems.value.slice(
+              Math.min(firstIndex, currentIndex),
+              Math.max(firstIndex, currentIndex) + 1,
+            );
+            currentSelection.forEach((oldItem) => {
+              if (
+                oldItem.selectionChanged &&
+                !selected.value.includes(oldItem)
+              ) {
+                oldItem.selectionChanged(false);
+              }
+            });
+            selected.value.forEach((newItem) => {
+              if (
+                newItem.selectionChanged &&
+                !currentSelection.includes(newItem)
+              ) {
+                newItem.selectionChanged(true);
+              }
+            });
+          } else {
+            selected.value
+              .filter((i) => i !== item && i.selectionChanged)
+              .forEach((i) => i.selectionChanged?.(false));
+            selected.value = [];
+            firstSelected = undefined;
+          }
+        } else if (selected.value.includes(item)) {
+          if (event.ctrlKey) {
+            item.selectionChanged?.(false);
+            selected.value = selected.value.filter((i) => i !== item);
+          } else if (selected.value.length > 1) {
+            selected.value
+              .filter((i) => i !== item && i.selectionChanged)
+              .forEach((i) => {
+                i.selectionChanged?.(false);
+              });
+            selected.value = [item];
+            firstSelected = item;
+          } else {
+            item.selectionChanged?.(false);
+            selected.value = [];
+            firstSelected = undefined;
+          }
+        } else if (event.ctrlKey) {
+          item.selectionChanged?.(true);
+          selected.value = [...selected.value, item];
+          if (selected.value.length === 1) {
+            firstSelected = item;
+          }
+        } else {
+          selected.value
+            .filter((i) => i !== item && i.selectionChanged)
+            .forEach((i) => i.selectionChanged?.(false));
+          item.selectionChanged?.(true);
+          selected.value = [item];
+          firstSelected = item;
+        }
+
+        emit('update:modelValue', selected.value);
+      }),
+    selectionActions,
+  };
+}

package/src/components/modelHelper.d.ts

@@ -1,17 +1,12 @@
+import type { Ref, WritableComputedRef } from 'vue';
 /**
  * Can only be used in setup of Vue components!
  * Provides a computed model for atomic properties.
  * getter returns the internal value
  * setter updates internal value and emits the update event
  * simplified based on https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/proxiedModel.ts
- * @param {{ [k in P]: string extends P ? unknown : T }} props
- * @param {P} prop
- * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
- * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
- * @template T
- * @template  {string} [P=string]
  */
-export function useProxiedAtomicModel<T, P extends string = string>(props: { [k in P]: string extends P ? unknown : T; }, prop: P, emit: (event: string extends P ? P : `update:${P}`, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+export declare function useProxiedAtomicModel<Props extends Record<string, unknown>, Prop extends keyof Props & string>(props: Props, prop: Prop, emit: (event: `update:${Prop}`, value: Props[Prop]) => void): WritableComputedRef<Props[Prop]>;
 /**
  * Can only be used in setup of Vue components!
  * Provides a ref model for complex properties.
@@ -24,15 +19,13 @@ export function useProxiedAtomicModel<T, P extends string = string>(props: { [k
  * @template T
  * @template {string} [P=string]
  */
-export function useProxiedComplexModel<T, P extends string = string>(props: { [k in P]: string extends P ? unknown : T; }, prop: P, emit: (event: string extends P ? P : `update:${P}`, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+export declare function useProxiedComplexModel<Props extends Record<string, unknown>, Prop extends keyof Props & string>(props: Props, prop: Prop, emit: (event: `update:${Prop}`, value: Props[Prop]) => void): Ref<Props[Prop]>;
 /**
  * Helper function that returns a modelValue for VcsCheckbox depending on the availability of a specific property within a model object
  * Getter returns true, if property is available, otherwise false.
  * Setter applies provided defaultValue on the model object, if checked (true) and undefined, if unchecked (false)
- * @param {import("vue").Ref<Object>} localValue The model object, e.g. provided by `useProxiedComplexModel` or a local ref object.
- * @param {string} key The key of the localValue that should be return on get and updated on set.
- * @param {D} defaultValue  The default value that is set on checked (true)
- * @returns {import('vue').WritableComputedRef<boolean>}
- * @template D
+ * @param localValue The model object, e.g. provided by `useProxiedComplexModel` or a local ref object.
+ * @param key The key of the localValue that should be return on get and updated on set.
+ * @param defaultValue  The default value that is set on checked (true)
  */
-export function useModelHasProperty<D>(localValue: import("vue").Ref<Object>, key: string, defaultValue: D): import('vue').WritableComputedRef<boolean>;
+export declare function useModelHasProperty(localValue: Ref<Record<string, unknown>>, key: string, defaultValue: unknown): WritableComputedRef<boolean>;

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

@@ -1,3 +1,4 @@
+import type { Ref, WritableComputedRef } from 'vue';
 import { computed, ref, toRaw, watch } from 'vue';
 import deepEqual from 'fast-deep-equal';
 import { getLogger } from '@vcsuite/logger';
@@ -8,15 +9,16 @@ import { getLogger } from '@vcsuite/logger';
  * getter returns the internal value
  * setter updates internal value and emits the update event
  * simplified based on https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/proxiedModel.ts
- * @param {{ [k in P]: string extends P ? unknown : T }} props
- * @param {P} prop
- * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
- * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
- * @template T
- * @template  {string} [P=string]
  */
-export function useProxiedAtomicModel(props, prop, emit) {
-  const internal = ref(props[prop]);
+export function useProxiedAtomicModel<
+  Props extends Record<string, unknown>,
+  Prop extends keyof Props & string,
+>(
+  props: Props,
+  prop: Prop,
+  emit: (event: `update:${Prop}`, value: Props[Prop]) => void,
+): WritableComputedRef<Props[Prop]> {
+  const internal = ref(props[prop]) as Ref<Props[Prop]>;
 
   // Watch for changes in prop (reassignment) and update internal
   watch(
@@ -51,8 +53,15 @@ export function useProxiedAtomicModel(props, prop, emit) {
  * @template T
  * @template {string} [P=string]
  */
-export function useProxiedComplexModel(props, prop, emit) {
-  const internal = ref(structuredClone(toRaw(props[prop])));
+export function useProxiedComplexModel<
+  Props extends Record<string, unknown>,
+  Prop extends keyof Props & string,
+>(
+  props: Props,
+  prop: Prop,
+  emit: (event: `update:${Prop}`, value: Props[Prop]) => void,
+): Ref<Props[Prop]> {
+  const internal = ref(structuredClone(toRaw(props[prop]))) as Ref<Props[Prop]>;
 
   // Watch for changes in prop (reassignment) and update internal
   watch(
@@ -66,15 +75,12 @@ export function useProxiedComplexModel(props, prop, emit) {
         internal.value = structuredClone(newValue);
       } catch (e) {
         getLogger('modelHelper').error(
-          'Failed to update internal value. You may have a provided a deeply nested ref, which caused',
+          'Failed to update internal value. You may have a provided a deeply nested ref, which caused ',
           e,
         );
       }
     },
-    {
-      deep: true,
-      immediate: true,
-    },
+    { deep: true, immediate: true },
   );
 
   // Watch for changes in internal (key updates and reassign) and emit to update prop
@@ -91,14 +97,12 @@ export function useProxiedComplexModel(props, prop, emit) {
         emit(`update:${prop}`, structuredClone(newValue));
       } catch (e) {
         getLogger('modelHelper').error(
-          'Failed to emit value. You may have a provided a deeply nested ref, which caused',
+          'Failed to emit value. You may have a provided a deeply nested ref, which caused ',
           e,
         );
       }
     },
-    {
-      deep: true,
-    },
+    { deep: true },
   );
 
   return internal;
@@ -108,14 +112,16 @@ export function useProxiedComplexModel(props, prop, emit) {
  * Helper function that returns a modelValue for VcsCheckbox depending on the availability of a specific property within a model object
  * Getter returns true, if property is available, otherwise false.
  * Setter applies provided defaultValue on the model object, if checked (true) and undefined, if unchecked (false)
- * @param {import("vue").Ref<Object>} localValue The model object, e.g. provided by `useProxiedComplexModel` or a local ref object.
- * @param {string} key The key of the localValue that should be return on get and updated on set.
- * @param {D} defaultValue  The default value that is set on checked (true)
- * @returns {import('vue').WritableComputedRef<boolean>}
- * @template D
+ * @param localValue The model object, e.g. provided by `useProxiedComplexModel` or a local ref object.
+ * @param key The key of the localValue that should be return on get and updated on set.
+ * @param defaultValue  The default value that is set on checked (true)
  */
-export function useModelHasProperty(localValue, key, defaultValue) {
-  const model = () => localValue.value;
+export function useModelHasProperty(
+  localValue: Ref<Record<string, unknown>>,
+  key: string,
+  defaultValue: unknown,
+): WritableComputedRef<boolean> {
+  const model = (): Record<string, unknown> => localValue.value;
   return computed({
     get() {
       return model()[key] !== undefined;

package/src/components/notification/{VcsBadge.vue → VcsBadge.ts.vue}

@@ -2,12 +2,14 @@
   <span class="vcs-badge rounded-circle h-3 w-3" :class="[color]" />
 </template>
 
-<script>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
   /**
    * @description UI component representing a circular indicator.
    * @vue-prop {string} color - any of the theme colors.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsBadge',
     props: {
       color: {
@@ -15,7 +17,7 @@
         default: 'bg-warning',
       },
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

package/src/components/notification/VcsBadge.ts.vue.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @description UI component representing a circular indicator.
+ * @vue-prop {string} color - any of the theme colors.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}, unknown, 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<{
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    color: string;
+}, {}>;

package/src/components/notification/{VcsHelp.vue → VcsHelp.ts.vue}

@@ -10,7 +10,9 @@
     </v-container>
   </div>
 </template>
-<script>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
   import { VContainer } from 'vuetify/components';
 
   /**
@@ -18,7 +20,7 @@
    * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
    * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsHelp',
     components: {
       VContainer,
@@ -29,8 +31,9 @@
         default: undefined,
       },
     },
-  };
+  });
 </script>
+
 <style lang="scss">
   .vcs-help {
     box-sizing: border-box;

package/src/components/notification/VcsHelp.ts.vue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @description A component for displaying help.
+ * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
+ * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, unknown, 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<{
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>>, {
+    text: string;
+}, {}>;

package/src/components/notification/{VcsHelpTooltip.vue → VcsHelpTooltip.ts.vue}

@@ -10,7 +10,9 @@
     </v-container>
   </v-tooltip>
 </template>
-<script>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
   import { VTooltip, VIcon, VContainer } from 'vuetify/components';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
 
@@ -19,7 +21,7 @@
    * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
    * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsHelpTooltip',
     components: {
       VTooltip,
@@ -43,6 +45,7 @@
         fontSize,
       };
     },
-  };
+  });
 </script>
+
 <style lang="scss" scoped></style>