@vcmap/ui 5.3.7 → 6.0.0-rc.10

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

@@ -1,10 +1,10 @@
 /**
- * @param {import("vue").Ref<VcsListItem[]>} items
- * @param {import("vue").Ref<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").Ref<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;
@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    value: {
+    modelValue: {
         type: ArrayConstructor;
         default: () => never[];
     };
@@ -67,7 +67,7 @@ declare const _default: import("vue").DefineComponent<{
     query: import("vue").Ref<string>;
     hovering: import("vue").Ref<number | undefined>;
     dragging: import("vue").Ref<number | undefined>;
-    isDraggable: import("vue").ComputedRef<any>;
+    isDraggable: import("vue").ComputedRef<boolean>;
     borderBottom: (index: any) => boolean;
     borderTop: (index: any) => boolean;
     lightenEven: import("vue").ComputedRef<boolean>;
@@ -76,34 +76,31 @@ 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").Ref<Array<VcsListItem>>} */
-    selected: import("vue").Ref<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 {VcsListItem} item
+     * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
      * @param {PointerEvent} event
      */
-    select(item: VcsListItem, event: PointerEvent): void;
+    select(item: any, event: PointerEvent): void;
     /**
-     * @param {VcsListItem} item
+     * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
      */
-    add(item: VcsListItem): void;
+    add(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>): void;
     /**
-     * @param {VcsListItem} item
+     * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
      */
-    remove(item: 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;
-    titles: import("vue").Ref<never[]>;
-    overflowTitle(index: any, alternative: any): any;
-    listHeader: import("vue").Ref<null>;
-    listHeaderTooltip: import("vue").ComputedRef<any>;
-    rename(item: any, newTitle: any): void;
+    listHeader: import("vue").Ref<any>;
+    listHeaderTooltip: import("vue").ComputedRef<string>;
     hasIntermediateSlot: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: ArrayConstructor;
         required: true;
@@ -120,7 +117,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    value: {
+    modelValue: {
         type: ArrayConstructor;
         default: () => never[];
     };
@@ -162,66 +159,21 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
 }>>, {
-    value: unknown[];
     title: string;
-    tooltip: string;
     icon: string;
-    actions: unknown[];
-    searchbarPlaceholder: string;
+    modelValue: unknown[];
     draggable: boolean;
+    tooltip: string;
     selectable: boolean;
+    actions: unknown[];
+    searchbarPlaceholder: string;
+    actionButtonListOverflowCount: number;
     singleSelect: boolean;
     searchable: boolean;
     showTitle: boolean;
-    actionButtonListOverflowCount: number;
-}>;
+}, {}>;
 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 this item is currently in edit mode.
-     */
-    rename?: boolean | 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").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. called before value update
-     */
-    titleChanged?: ((arg0: string) => void) | undefined;
-};
 export type ItemMovedEvent = {
-    item: VcsListItem;
+    item: import("./VcsListItemComponent.vue").VcsListItem;
     targetIndex: number;
 };
-export type ItemRenamedEvent = {
-    item: VcsListItem;
-    newTitle: string;
-};

package/src/components/lists/VcsListItemComponent.vue

@@ -0,0 +1,216 @@
+<script setup>
+  import {
+    VListItem,
+    VIcon,
+    VListItemTitle,
+    VTooltip,
+  } from 'vuetify/components';
+  import { computed, ref } from 'vue';
+  import { is } from '@vcsuite/check';
+  import VcsBadge from '../notification/VcsBadge.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  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 {VcsListItem} */
+    item: {
+      type: Object,
+      required: true,
+    },
+    actionButtonListOverflowCount: {
+      type: Number,
+      default: undefined,
+    },
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const rename = ref(false);
+  const renameAction = computed(() => {
+    if (props.item.renamable) {
+      return {
+        name: 'list.renameItem',
+        ...(is(props.item.renamable, Object) ? props.item.renamable : {}),
+        callback() {
+          rename.value = true;
+        },
+      };
+    }
+    return undefined;
+  });
+
+  function renameOff() {
+    rename.value = false;
+  }
+
+  const actions = computed(() => {
+    if (renameAction.value) {
+      return [...(props.item?.actions || []), renameAction.value];
+    }
+    return [...(props.item?.actions || [])];
+  });
+
+  const title = ref();
+  const tooltip = createEllipseTooltip(
+    computed(() => {
+      if (rename.value) {
+        return undefined;
+      }
+      return title.value?.$el;
+    }),
+    computed(() => props.item?.tooltip),
+    computed(() => props.item?.title),
+  );
+
+  function renameItem(item, newTitle) {
+    if (newTitle) {
+      item.titleChanged?.(newTitle);
+    }
+  }
+</script>
+
+<template>
+  <v-list-item
+    :disabled="item.disabled"
+    v-bind="$attrs"
+    class="vcs-list-item-component"
+  >
+    <template #prepend="scope">
+      <slot name="prepend" v-bind="scope">
+        <v-icon v-if="item.icon">
+          {{ item.icon }}
+        </v-icon>
+      </slot>
+    </template>
+    <template #title="scope">
+      <slot name="title" v-bind="{ ...scope, tooltip }">
+        <v-list-item-title
+          ref="title"
+          :class="{ 'vcs-list-item__rename': rename }"
+        >
+          <vcs-text-field
+            v-if="rename"
+            :model-value="item.title"
+            autofocus
+            @update:model-value="(value) => renameItem(item, value)"
+            @click.stop
+            @keydown.enter="renameOff"
+            @blur="renameOff"
+            :rules="[(v) => !!v || 'components.validation.required']"
+            class="pa-0"
+          />
+          <template v-else>
+            {{ $st(item.title) }}
+          </template>
+          <v-tooltip v-if="dragging === false && tooltip" activator="parent">
+            {{ $st(tooltip) }}
+          </v-tooltip>
+        </v-list-item-title>
+      </slot>
+    </template>
+    <template #subtitle="scope">
+      <slot name="subtitle" v-bind="scope" />
+    </template>
+    <template #default="scope">
+      <slot name="default" v-bind="{ ...scope, tooltip }" />
+    </template>
+    <template #append="scope">
+      <slot
+        name="append"
+        v-bind="{
+          ...scope,
+          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>
+
+<style lang="scss" scoped>
+  .v-list-item {
+    padding: 4px 8px 4px 8px;
+    padding-inline-end: 8px !important;
+    padding-inline-start: 16px !important;
+    &.border-bottom {
+      border-bottom: solid;
+      border-bottom-color: rgb(var(--v-theme-base-lighten-2));
+    }
+    &.border-top {
+      border-top: solid;
+      border-top-color: rgb(var(--v-theme-base-lighten-2));
+    }
+    &:after {
+      display: none;
+    }
+    &.font-weight-bold {
+      .v-list-item__title {
+        font-weight: 700;
+      }
+    }
+    :deep(.v-list-item__action) {
+      .v-icon {
+        font-size: 16px;
+      }
+      &:last-child {
+        min-width: auto;
+      }
+    }
+    :deep(.v-list-item__content) {
+      flex-wrap: nowrap;
+      column-gap: 4px;
+      .v-icon,
+      .action-btn-wrap {
+        flex: 1 1 auto;
+      }
+      .v-icon {
+        font-size: 16px;
+        .v-icon__component {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+    :deep(.v-list-item__prepend > .v-badge ~ .v-list-item__spacer),
+    :deep(.v-list-item__prepend > .v-icon ~ .v-list-item__spacer),
+    :deep(.v-list-item__prepend > .v-tooltip ~ .v-list-item__spacer) {
+      width: 8px;
+    }
+    :deep(.v-list-item__overlay) {
+      background-color: transparent;
+    }
+    :deep(.vcs-list-item__rename) {
+      color: rgb(var(--v-theme-on-surface));
+    }
+  }
+</style>

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

@@ -0,0 +1,83 @@
+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<{}>>, {}, {}>, {
+    prepend?(_: {
+        isActive: boolean;
+        isOpen: boolean;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
+    }): any;
+    title?(_: {
+        tooltip: string;
+        title?: string | number | undefined;
+    }): any;
+    subtitle?(_: {
+        subtitle?: string | number | undefined;
+    }): any;
+    default?(_: {
+        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;
+});