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

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

@@ -1,10 +1,10 @@
 /**
- * @param {import("vue").Ref<VcsListItem[]>} items
- * @param {import("vue").ShallowRef<VcsListItem[]>} selected
+ * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
+ * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
  * @param {function(string, ...any[]):void} emit
  * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
  */
-export function createSelectionActions(items: import("vue").Ref<VcsListItem[]>, selected: import("vue").ShallowRef<VcsListItem[]>, emit: (arg0: string, ...args: any[][]) => void): 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: (arg0: string, ...args: any[][]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
 declare const _default: import("vue").DefineComponent<{
     items: {
         type: ArrayConstructor;
@@ -76,26 +76,26 @@ declare const _default: import("vue").DefineComponent<{
      */
     renderingActions: import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>;
     /**
-     * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+     * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
      */
-    renderingItems: import("vue").ComputedRef<Array<VcsListItem>>;
-    /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
-    selected: import("vue").ShallowRef<Array<VcsListItem>>;
+    renderingItems: import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
+    /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
+    selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
     /**
-     * @param {import("vue").UnwrapNestedRef<VcsListItem>} item
+     * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
      * @param {PointerEvent} event
      */
     select(item: any, event: PointerEvent): void;
     /**
-     * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+     * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
      */
-    add(item: import("vue").UnwrapNestedRefs<VcsListItem>): void;
+    add(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>): void;
     /**
-     * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+     * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
      */
-    remove(item: import("vue").UnwrapNestedRefs<VcsListItem>): void;
+    remove(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>): void;
     clear(): void;
-    drag: (e: MouseEvent, item: VcsListItem, index: number) => void;
+    drag: (e: MouseEvent, item: import("./VcsListItemComponent.vue").VcsListItem, index: number) => void;
     drop: (e: MouseEvent, targetIndex: number) => void;
     listHeader: import("vue").Ref<any>;
     listHeaderTooltip: import("vue").ComputedRef<string>;
@@ -173,48 +173,7 @@ declare const _default: import("vue").DefineComponent<{
     showTitle: boolean;
 }, {}>;
 export default _default;
-export type VcsListItem = {
-    name: string;
-    /**
-     * - Whether to display this item or not.
-     */
-    visible?: boolean | undefined;
-    /**
-     * - Whether this item should be displayed as disabled.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * - Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
-     */
-    renamable?: boolean | import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionOptions | undefined;
-    /**
-     * - The title to be displayed
-     */
-    title: string;
-    tooltip?: string | undefined;
-    /**
-     * - An optional icon to display with this item. Can be a URL or HTMLElement.
-     */
-    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
-    /**
-     * - Shows badge, if item has an update.
-     */
-    hasUpdate?: boolean | undefined;
-    actions?: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[] | undefined;
-    /**
-     * - An array of callbacks called on item click. called before selection update
-     */
-    clickedCallbacks?: Array<(arg0: PointerEvent) => void> | undefined;
-    /**
-     * - A callback called if the selection changes with the current selection status. called before value update
-     */
-    selectionChanged?: ((arg0: boolean) => void) | undefined;
-    /**
-     * - A callback called if the title changes via rename action. only usable with renamble true.
-     */
-    titleChanged?: ((arg0: string) => void) | undefined;
-};
 export type ItemMovedEvent = {
-    item: VcsListItem;
+    item: import("./VcsListItemComponent.vue").VcsListItem;
     targetIndex: number;
 };

package/src/components/lists/{VcsListItem.vue → VcsListItemComponent.vue}

@@ -12,8 +12,24 @@
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import { createEllipseTooltip } from '../composables.js';
 
+  /**
+   * @typedef {Object} VcsListItem
+   * @property {string} name
+   * @property {boolean} [visible] - Whether to display this item or not.
+   * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
+   * @property {boolean|import("../../actions/actionHelper.js").ActionOptions} [renamable] - Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
+   * @property {string} title - The title to be displayed
+   * @property {string} [tooltip]
+   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
+   * @property {boolean} [hasUpdate] - Shows badge, if item has an update.
+   * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [actions]
+   * @property {Array<function(PointerEvent):void>|undefined} [clickedCallbacks] - An array of callbacks called on item click. called before selection update
+   * @property {function(boolean):void} [selectionChanged] - A callback called if the selection changes with the current selection status. called before value update
+   * @property {function(string):void} [titleChanged] - A callback called if the title changes via rename action. only usable with renamble true.
+   */
+
   const props = defineProps({
-    /** @type {import("./VcsList.vue").VcsListItem} */
+    /** @type {VcsListItem} */
     item: {
       type: Object,
       required: true,
@@ -111,16 +127,26 @@
     <template #default="scope">
       <slot name="default" v-bind="{ ...scope, item, dragging, tooltip }" />
     </template>
-    <template #append>
-      <vcs-badge v-if="item.hasUpdate" class="mr-1" />
-      <vcs-action-button-list
-        v-if="actions.length > 0"
-        :actions="actions"
-        :disabled="item.disabled"
-        :block-overflow="true"
-        :overflow-count="actionButtonListOverflowCount"
-        class="ml-2"
-      />
+    <template #append="appendScope">
+      <slot
+        name="append"
+        v-bind="{
+          ...appendScope,
+          item,
+          actions,
+          actionButtonListOverflowCount,
+        }"
+      >
+        <vcs-badge v-if="item.hasUpdate" class="mr-1" />
+        <vcs-action-button-list
+          v-if="actions.length > 0"
+          :actions="actions"
+          :disabled="item.disabled"
+          :block-overflow="true"
+          :overflow-count="actionButtonListOverflowCount"
+          class="ml-2"
+        />
+      </slot>
     </template>
   </v-list-item>
 </template>

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

@@ -0,0 +1,79 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    $props: {
+        readonly [x: string]: any;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    title?(_: {
+        item: any;
+        dragging: any;
+        tooltip: string;
+    }): any;
+    subtitle?(_: {
+        item: any;
+    }): any;
+    default?(_: {
+        item: any;
+        dragging: any;
+        tooltip: string;
+        isActive: boolean;
+        isOpen: boolean;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
+    }): any;
+    append?(_: {
+        item: any;
+        actions: any[];
+        actionButtonListOverflowCount: any;
+        isActive: boolean;
+        isOpen: boolean;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
+    }): any;
+}>;
+export default _default;
+export type VcsListItem = {
+    name: string;
+    /**
+     * - Whether to display this item or not.
+     */
+    visible?: boolean | undefined;
+    /**
+     * - Whether this item should be displayed as disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
+     */
+    renamable?: boolean | Omit<import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction, "callback"> | undefined;
+    /**
+     * - The title to be displayed
+     */
+    title: string;
+    tooltip?: string | undefined;
+    /**
+     * - An optional icon to display with this item. Can be a URL or HTMLElement.
+     */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /**
+     * - Shows badge, if item has an update.
+     */
+    hasUpdate?: boolean | undefined;
+    actions?: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[] | undefined;
+    /**
+     * - An array of callbacks called on item click. called before selection update
+     */
+    clickedCallbacks?: Array<(arg0: PointerEvent) => void> | undefined;
+    /**
+     * - A callback called if the selection changes with the current selection status. called before value update
+     */
+    selectionChanged?: ((arg0: boolean) => void) | undefined;
+    /**
+     * - A callback called if the title changes via rename action. only usable with renamble true.
+     */
+    titleChanged?: ((arg0: string) => void) | undefined;
+};
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/src/components/lists/VcsTreeview.vue

@@ -3,26 +3,55 @@
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="searchbarPlaceholder"
-      v-model="search"
+      v-model="localSearchValue"
     />
     <v-treeview
       class="vcs-treeview"
-      v-bind="{ ...$props, ...$attrs }"
+      density="compact"
       item-value="name"
       :item-props="true"
-      :search="search"
       :custom-filter="handleFilter"
       :selectable="false"
       :activatable="false"
+      expand-icon="mdi-chevron-right"
+      collapse-icon="mdi-chevron-down"
+      v-bind="{ ...$props, ...$attrs }"
+      :search="localSearchValue"
     >
-      <template #item="{ props: item }">
-        <VcsTreeviewLeaf
-          @click.stop="item.clicked && !item.disabled && item.clicked($event)"
-          :item="item"
-        />
+      <template #title="scope">
+        <slot name="title" v-bind="scope ?? {}">
+          <VcsTreeviewTitle :item="scope.item"></VcsTreeviewTitle>
+        </slot>
+      </template>
+      <template v-for="slot of forwardSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope ?? {}" />
+      </template>
+      <template #prepend="scope">
+        <slot name="prepend" v-bind="scope ?? {}">
+          <template v-if="scope.item?.icon">
+            <v-icon
+              v-if="typeof scope.item?.icon === 'string'"
+              :size="iconSize"
+            >
+              {{ scope.item.icon }}
+            </v-icon>
+            <ImageElementInjector :element="scope.item.icon" v-else />
+          </template>
+        </slot>
       </template>
-      <template #title="{ item }">
-        {{ $st(item.title || item.name) }}
+      <template #append="scope">
+        <slot name="append" v-bind="scope ?? {}">
+          <VcsActionButtonList
+            v-if="scope.item.actions?.length > 0"
+            :actions="scope.item.actions"
+            :overflow-count="3"
+            :disabled="scope.item.disabled"
+            right
+            tooltip-position="right"
+            block-overflow
+            class="col-4 pa-0 d-flex align-center"
+          />
+        </slot>
       </template>
     </v-treeview>
   </div>
@@ -32,7 +61,8 @@
     // Root Level Entries should be 40px high
     > .v-list-item,
     > .v-list-group > .v-list-item {
-      min-height: calc(var(--v-vcs-item-height) + 8px) !important;
+      min-height: calc(var(--v-vcs-font-size) * 2 + 14px) !important;
+      padding-left: 6px;
     }
     // Border around root nodes with children included
     > .v-list-item:not(:last-child),
@@ -46,17 +76,32 @@
       > .v-list-item-title {
       font-weight: 700 !important;
     }
-    // remove ripple effect from expand icon
-    .v-icon.v-icon {
-      &::after {
-        background-color: transparent;
-      }
-    }
-    // Toggle Item Chevron with should be 16px
-    .v-treeview-node__toggle {
-      width: 16px;
+  }
+
+  // leaf indent
+  :deep(.v-list--slim .v-treeview-group.v-list-group) {
+    --prepend-width: 0px;
+  }
+
+  // Padding left of root nodes
+  :deep(.v-list-item__prepend) {
+    width: var(--v-vcs-font-size);
+    margin-right: 8px;
+    > .v-list-item-action > .v-btn {
+      width: var(--v-vcs-font-size);
+      height: var(--v-vcs-font-size);
+      margin: auto;
     }
   }
+
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
+  }
+  // remove ripple effect
+  :deep(.v-ripple__container) {
+    display: none;
+  }
   // hide active class
   :deep(.v-list-item__overlay) {
     display: none;
@@ -68,26 +113,40 @@
 </style>
 
 <script>
-  import { getCurrentInstance, ref } from 'vue';
+  import { getCurrentInstance } from 'vue';
+  import { VIcon } from 'vuetify/components';
   import { VTreeview } from 'vuetify/labs/VTreeview';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
+  import { useForwardSlots } from '../composables.js';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
-  import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import ImageElementInjector from '../ImageElementInjector.vue';
+  import VcsTreeviewTitle from './VcsTreeviewTitle.vue';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description extends API of https://vuetifyjs.com/en/api/v-treeview/
    * Can render dynamic components as leaf items.
    * In order to display an item needs to be registered and added to `availableComponents`.
+   * Exposes the `search` value for filtering the treeview.
    * @vue-prop {boolean} [showSearchbar=false] - Whether there is a searchbar for this treeview
    * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated
    */
   export default {
     name: 'VcsTreeview',
     components: {
-      VcsTreeviewLeaf,
+      VcsTreeviewTitle,
+      VIcon,
+      ImageElementInjector,
+      VcsActionButtonList,
       VcsTreeviewSearchbar,
       VTreeview,
     },
     props: {
+      search: {
+        type: String,
+        default: '',
+      },
       showSearchbar: {
         type: Boolean,
         default: false,
@@ -97,8 +156,10 @@
         default: undefined,
       },
     },
-    setup() {
-      const search = ref('');
+    emits: ['update:search'],
+    setup(props, { emit, slots }) {
+      const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
+
       // TODO properly type the tree view item interface & export in index.d.ts
 
       const vm = getCurrentInstance().proxy;
@@ -118,9 +179,17 @@
           .indexOf(q.toLocaleLowerCase());
       };
 
+      const forwardSlots = useForwardSlots(slots, [
+        'append',
+        'title',
+        'prepend',
+      ]);
+      const iconSize = useIconSize();
       return {
-        search,
+        iconSize,
+        localSearchValue,
         handleFilter,
+        forwardSlots,
       };
     },
   };

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

@@ -1,4 +1,8 @@
 declare const _default: import("vue").DefineComponent<{
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
     showSearchbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -8,9 +12,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    search: import("vue").Ref<string>;
+    iconSize: import("vue").ComputedRef<number>;
+    localSearchValue: import("vue").Ref<any>;
     handleFilter: (value: string, q: string, item: Object) => number;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    forwardSlots: import("vue").ComputedRef<string[]>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:search"[], "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
     showSearchbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -19,7 +29,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-}>>, {
+}>> & {
+    "onUpdate:search"?: ((...args: any[]) => any) | undefined;
+}, {
+    search: string;
     showSearchbar: boolean;
     searchbarPlaceholder: string;
 }, {}>;

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -3,20 +3,22 @@
     class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
   >
     <slot name="prepend">
-      <v-icon class="search-icon my-0 ml-1" size="12"> $vcsSearch </v-icon>
+      <v-icon class="search-icon my-0 ml-1" :size="iconSize - 4">
+        $vcsSearch
+      </v-icon>
     </slot>
 
     <slot v-bind="{ ...$props, attrs: $attrs }">
       <VcsTextField
         class="searchbar outlined rounded-xl align-center justify-center base-lighten-4 pa-1 pl-6"
         :placeholder="$st(placeholder)"
-        v-bind="$attrs"
         clearable
+        v-bind="$attrs"
       />
     </slot>
 
     <slot name="append" :has-filter="hasFilter">
-      <v-icon v-if="hasFilter" class="ml-2" size="16">$vcsFilter</v-icon>
+      <v-icon v-if="hasFilter" class="ml-2" :size="iconSize">$vcsFilter</v-icon>
     </slot>
   </div>
 </template>
@@ -48,7 +50,9 @@
         > .v-field__field
         > .v-field__input
     ) {
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 20px) !important;
+    --v-input-control-height: calc(
+      var(--v-vcs-font-size) * 2 - 14px
+    ) !important;
     min-height: var(--v-input-control-height);
   }
 
@@ -66,7 +70,7 @@
   // override primary--placeholder of VcsTextField
   :deep(input::placeholder) {
     color: rgb(var(--v-theme-base-lighten-1)) !important;
-    font-style: initial !important;
+    font-style: italic !important;
     opacity: 0.75 !important;
   }
 </style>
@@ -74,6 +78,7 @@
 <script>
   import { VIcon } from 'vuetify/components';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description stylized searchbar used in VcsTreeview, VcsDataTable and VcsList
@@ -100,5 +105,11 @@
         default: false,
       },
     },
+    setup() {
+      const iconSize = useIconSize();
+      return {
+        iconSize,
+      };
+    },
   };
 </script>

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

@@ -7,7 +7,9 @@ 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<{
+}, {
+    iconSize: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     placeholder: {
         type: StringConstructor;
         default: string;

package/src/components/lists/VcsTreeviewTitle.vue

@@ -0,0 +1,36 @@
+<script setup>
+  import { computed, ref } from 'vue';
+  import { VTooltip } from 'vuetify/components';
+  import { createEllipseTooltip } from '../composables.js';
+
+  const props = defineProps({
+    item: {
+      type: Object,
+      default: undefined,
+    },
+  });
+
+  const titleParent = ref();
+
+  const tooltip = createEllipseTooltip(
+    computed(() => titleParent.value),
+    computed(() => props.item.tooltip),
+    computed(() => props.item.title || props.item.name),
+  );
+</script>
+<style lang="scss" scoped>
+  .title-parent {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
+<template>
+  <div class="title-parent pr-2" ref="titleParent">
+    <span>
+      {{ $st(item.title || item.name) }}
+    </span>
+    <v-tooltip v-if="tooltip" activator="parent">
+      {{ $st(tooltip) }}
+    </v-tooltip>
+  </div>
+</template>

package/src/components/modelHelper.d.ts

@@ -4,25 +4,27 @@
  * 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 {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @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>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+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>>;
 /**
  * Can only be used in setup of Vue components!
  * Provides a ref model for complex properties.
  * Watches changes on the provided prop and updates the internal ref
  * Watches changes on the internal ref and emits the change, if prop has not already been updated
- * @param {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @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 useProxiedComplexModel<T>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+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>>;
 /**
  * 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.

package/src/components/modelHelper.js

@@ -8,11 +8,12 @@ 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 {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @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]);
@@ -43,11 +44,12 @@ export function useProxiedAtomicModel(props, prop, emit) {
  * Provides a ref model for complex properties.
  * Watches changes on the provided prop and updates the internal ref
  * Watches changes on the internal ref and emits the change, if prop has not already been updated
- * @param {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @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 useProxiedComplexModel(props, prop, emit) {
   const internal = ref(structuredClone(toRaw(props[prop])));