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

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

@@ -7,7 +7,7 @@
     :menu-props="{ origin: 'overlap' }"
     :item-title="(item) => $st(getTitle(item))"
     color="primary"
-    class="primary--placeholder"
+    class="primary--placeholder vcs-select"
     :class="{
       'py-1': !paddingProvided,
     }"
@@ -23,8 +23,8 @@
       </span>
     </template>
 
-    <template #append-inner>
-      <slot name="append-inner"></slot>
+    <template #append-inner="scope">
+      <slot name="append-inner" v-bind="scope ?? {}"></slot>
       <v-tooltip
         :activator="selectFieldRef"
         v-if="tooltip && !errorTooltipRef"
@@ -32,37 +32,38 @@
         :location="tooltipPosition"
       />
     </template>
-    <template
-      v-for="slot of Object.keys($slots).filter(
-        (name) => name !== 'append-inner',
-      )"
-      #[slot]="scope"
-    >
-      <slot :name="slot" v-bind="scope" />
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
     </template>
-    <template #message="{ message }">
+    <template #message="scope">
       <v-tooltip
         :activator="selectFieldRef"
         ref="errorTooltipRef"
-        v-if="message"
-        :text="$st(message)"
+        v-if="scope?.message"
+        :text="$st(scope?.message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
+      <slot name="message" v-bind="scope ?? {}"></slot>
     </template>
-    <template #item="{ props }">
-      <v-list-item density="compact" v-bind="props" role="option">
-        <template #prepend="scope" v-if="multiple">
-          <VcsCheckbox v-model="scope.isSelected" class="py-0"></VcsCheckbox>
-        </template>
-      </v-list-item>
+    <template #item="itemScope">
+      <slot name="item" v-bind="itemScope ?? {}">
+        <v-list-item density="compact" v-bind="itemScope.props" role="option">
+          <template #prepend="prependScope" v-if="multiple">
+            <VcsCheckbox
+              v-model="prependScope.isSelected"
+              class="py-0"
+            ></VcsCheckbox>
+          </template>
+        </v-list-item>
+      </slot>
     </template>
   </v-select>
 </template>
 <style lang="scss" scoped>
   :deep(.v-field) {
-    --v-field-padding-start: 8px;
-    --v-field-padding-end: 8px;
+    --v-field-padding-start: 4px;
+    --v-field-padding-end: 4px;
   }
   :deep(.v-field__input) {
     flex-wrap: unset;
@@ -95,12 +96,12 @@
       border-radius: 0;
     }
     .v-field__outline {
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: 4px;
+      padding-right: 4px;
     }
     .v-field__loader {
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: 3px;
+      padding-right: 3px;
     }
     .v-field__outline *::before {
       border-width: 0;
@@ -111,6 +112,14 @@
       margin-left: -4px;
     }
   }
+  :deep(.v-field--appended) {
+    padding-inline-end: 4px;
+    .v-field__append-inner {
+      i {
+        margin-left: 0;
+      }
+    }
+  }
   .primary--placeholder {
     :deep(input::placeholder) {
       color: rgb(var(--v-theme-primary));
@@ -135,7 +144,7 @@
 <script>
   import { VSelect, VTooltip, VListItem } from 'vuetify/components';
   import { computed, ref } from 'vue';
-  import { usePadding } from '../composables.js';
+  import { useForwardSlots, usePadding } from '../composables.js';
   import VcsCheckbox from './VcsCheckbox.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
@@ -183,7 +192,8 @@
         default: undefined,
       },
     },
-    setup(props, { attrs, emit }) {
+    emits: ['update:modelValue'],
+    setup(props, { attrs, slots, emit }) {
       const selectFieldRef = ref();
       const errorTooltipRef = ref();
       const localModelValue = useProxiedComplexModel(props, 'modelValue', emit);
@@ -206,8 +216,10 @@
         return props.multiple;
       });
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
 
       return {
+        forwardSlots,
         localModelValue,
         additionalItems,
         isMultiple,

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

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
+    forwardSlots: import("vue").ComputedRef<string[]>;
     localModelValue: import("vue").Ref<any>;
     additionalItems: import("vue").ComputedRef<number>;
     isMultiple: import("vue").ComputedRef<boolean>;
@@ -27,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
     selectFieldRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;
     getTitle: (item: any) => any;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -48,7 +49,9 @@ declare const _default: import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: undefined;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     modelValue: string | number | boolean | unknown[];
     multiple: boolean;
     tooltip: string;

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

@@ -2,8 +2,9 @@
   <v-slider
     :class="{
       'py-1': !paddingProvided,
+      'remove-append-margin': !hasAppendSlot,
     }"
-    class="vcs-slider"
+    class="vcs-slider mx-1"
     hide-details
     ref="sliderRef"
     :track-color="'base-darken-1'"
@@ -33,6 +34,9 @@
   .v-input--horizontal :deep(.v-input__control) {
     min-height: calc(var(--v-vcs-item-height) - 8px);
   }
+  .v-input--horizontal.v-slider--has-labels {
+    margin-bottom: var(--v-vcs-font-size);
+  }
   .v-slider.v-input--horizontal {
     :deep(.v-slider-track__fill) {
       height: 2px;
@@ -63,6 +67,11 @@
   :deep(.v-slider-track__tick) {
     background-color: rgb(var(--v-theme-base-darken-1));
   }
+  .remove-append-margin {
+    :deep(.v-input__append) {
+      margin-inline-start: 0px;
+    }
+  }
 </style>
 <script>
   import { computed, ref } from 'vue';
@@ -91,6 +100,7 @@
         default: 'right',
       },
     },
+    emits: ['update:modelValue'],
     setup(props, { attrs, slots }) {
       const itemHeight = useItemHeight();
       const thumbSize = computed(() => {
@@ -106,6 +116,9 @@
       const forwardSlots = useForwardSlots(slots, ['append']);
       const sliderRef = ref();
       return {
+        hasAppendSlot: computed(() => {
+          return !!slots.append;
+        }),
         forwardSlots,
         sliderRef,
         thumbSize,

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

@@ -8,13 +8,14 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    hasAppendSlot: import("vue").ComputedRef<boolean>;
     forwardSlots: import("vue").ComputedRef<string[]>;
     sliderRef: import("vue").Ref<any>;
     thumbSize: import("vue").ComputedRef<number>;
     tickSize: import("vue").ComputedRef<number>;
     trackSize: import("vue").ComputedRef<number>;
     paddingProvided: import("vue").ComputedRef<boolean>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tooltip: {
         type: StringConstructor;
         default: undefined;
@@ -23,7 +24,9 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     tooltip: string;
     tooltipPosition: string;
 }, {}>;

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

@@ -4,27 +4,29 @@
     variant="outlined"
     clear-icon="$close"
     :rows="$attrs.rows"
-    class="primary--placeholder"
+    color="primary"
+    class="primary--placeholder vcs-text-area"
     :class="{
       'py-1': !paddingProvided,
     }"
-    v-bind="{ ...$attrs }"
+    v-bind="$attrs"
   >
-    <template v-for="slot of Object.keys($slots)" #[slot]="scope">
-      <slot :name="slot" v-bind="scope" />
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
     </template>
-    <template #message="{ message }">
+    <template #message="scope">
       <v-tooltip
         ref="errorTooltipRef"
         :activator="textAreaRef"
-        v-if="message"
-        :text="$st(message)"
+        v-if="scope?.message"
+        :text="$st(scope?.message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
+      <slot name="message" v-bind="scope ?? {}"></slot>
     </template>
-    <template #append-inner>
-      <slot name="append-inner"></slot>
+    <template #append-inner="scope">
+      <slot name="append-inner" v-bind="scope ?? {}"></slot>
       <v-tooltip
         v-if="tooltip && !errorTooltipRef"
         :activator="textAreaRef"
@@ -44,12 +46,12 @@
   }
 
   :deep(.v-field) {
-    --v-field-padding-start: 8px;
-    --v-field-padding-end: 8px;
-    padding-left: 8px;
-    padding-right: 8px;
+    --v-field-padding-start: 4px;
+    --v-field-padding-end: 4px;
+    padding-left: 4px;
+    padding-right: 4px;
     .v-field__clearable {
-      margin: 4px -4px 0px 0px;
+      margin: 2px -2px 0px 0px;
     }
   }
 
@@ -86,10 +88,13 @@
     .v-field__outline__end {
       border-width: 0 0 1px 0 !important;
       border-radius: 0;
-      margin-right: 8px;
-      margin-left: -4px;
+      margin-right: 4px;
+      margin-left: -8px;
+    }
+    .v-field__loader {
+      padding-left: 3px;
+      padding-right: 3px;
     }
-
     .v-field__outline *::before {
       border-width: 0;
       border-radius: 0;
@@ -131,9 +136,6 @@
   }
 
   // Progress Bar
-  :deep(.v-progress-linear) {
-    color: rgb(var(--v-theme-primary));
-  }
   :deep(.v-field__loader) {
     top: calc(100% - 2px);
   }
@@ -142,7 +144,7 @@
 <script>
   import { ref } from 'vue';
   import { VTextarea, VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { useForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
@@ -169,13 +171,15 @@
         default: 'right',
       },
     },
-    setup(_p, { attrs }) {
+    setup(_p, { attrs, slots }) {
       const textAreaRef = ref();
       const errorTooltipRef = ref();
 
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
 
       return {
+        forwardSlots,
         textAreaRef,
         errorTooltipRef,
         paddingProvided,

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

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

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

@@ -6,6 +6,7 @@
     :hide-details="false"
     :rules="rules"
     :type="type"
+    color="primary"
     class="vcs-text-field primary--placeholder"
     :class="{
       'py-1': !paddingProvided,
@@ -20,15 +21,16 @@
     <template v-for="slot of forwardSlots" #[slot]="scope">
       <slot :name="slot" v-bind="scope ?? {}" />
     </template>
-    <template #message="{ message }">
+    <template #message="scope">
       <v-tooltip
         ref="errorTooltipRef"
         :activator="textFieldRef"
-        v-if="message"
-        :text="$st(message)"
+        v-if="scope?.message"
+        :text="$st(scope?.message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
+      <slot name="message" v-bind="scope ?? {}"></slot>
     </template>
     <template #default="scope">
       <v-tooltip
@@ -151,7 +153,7 @@
       });
 
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = useForwardSlots(slots, ['default', 'message']);
 
       return {
         forwardSlots,

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

@@ -32,7 +32,7 @@
       </slot>
     </template>
     <template #default>
-      <div class="pr-4">
+      <div>
         <VcsHelp :text="helpText" :show="showHelp">
           <slot name="help" />
         </VcsHelp>

package/src/components/form-inputs-controls/vcsTextField.scss

@@ -1,6 +1,6 @@
 :deep(.v-field) {
-  --v-field-padding-start: 8px;
-  --v-field-padding-end: 8px;
+  --v-field-padding-start: 4px;
+  --v-field-padding-end: 4px;
 }
 .v-input--density-compact :deep(.v-field) {
   --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
@@ -29,12 +29,12 @@
     border-radius: 0;
   }
   .v-field__outline {
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 4px;
+    padding-right: 4px;
   }
   .v-field__loader {
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 3px;
+    padding-right: 3px;
   }
   .v-field__outline *::before {
     border-width: 0;
@@ -48,7 +48,7 @@
 
 // move unit to the right
 :deep(.v-field--appended) {
-  padding-inline-end: 8px;
+  padding-inline-end: 4px;
 }
 
 // remove margin from prepended Icon
@@ -72,7 +72,6 @@
   display: none;
 }
 
-// Progress Bar
 :deep(.v-field__loader) {
   top: calc(100% - 2px);
 }
@@ -80,4 +79,5 @@
 // unit margin
 :deep(.v-field__clearable) {
   margin-left: 0;
+  margin-right: 0;
 }

package/src/components/form-output/VcsFormattedNumber.vue

@@ -1,5 +1,11 @@
 <template>
-  <span class="vcs-formatted-number" :class="{ 'py-1': !paddingProvided }">
+  <span
+    class="vcs-formatted-number"
+    :class="{
+      'vcs-disabled': disabled,
+      'pa-1': !paddingProvided,
+    }"
+  >
     <slot name="prepend">
       <span v-if="prefix" class="pr-1">{{ prefix }}</span>
     </slot>
@@ -27,6 +33,9 @@
     align-items: center;
     height: calc(var(--v-vcs-item-height) - 8px);
   }
+  .vcs-disabled {
+    opacity: var(--v-disabled-opacity);
+  }
 </style>
 <script>
   import { computed } from 'vue';
@@ -70,6 +79,7 @@
 
   /**
    * @description Formatted number display, optionally with unit
+   * @vue-prop {boolean} [disabled=false] - disabled by adding transparency to the label.
    * @vue-prop {string|SpecialUnits} [unit=undefined]
    * @vue-prop {number} [fractionDigits=undefined]
    * @vue-prop {number} modelValue
@@ -83,6 +93,10 @@
       VTooltip,
     },
     props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
       unit: {
         type: [String || SpecialUnits],
         default: undefined,

package/src/components/form-output/VcsFormattedNumber.vue.d.ts

@@ -16,6 +16,10 @@ export namespace SpecialUnits {
     let DEG: string;
 }
 declare const _default: import("vue").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     unit: {
         type: StringConstructor[];
         default: undefined;
@@ -49,6 +53,10 @@ declare const _default: import("vue").DefineComponent<{
     formatted: import("vue").ComputedRef<string | number>;
     paddingProvided: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     unit: {
         type: StringConstructor[];
         default: undefined;
@@ -74,6 +82,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
+    disabled: boolean;
     modelValue: number;
     prefix: string | number;
     tooltip: string;

package/src/components/lists/VcsActionList.vue

@@ -34,7 +34,7 @@
 </style>
 <script>
   import { computed } from 'vue';
-  import { is } from '@vcsuite/check';
+  import { is, optional } from '@vcsuite/check';
   import {
     VIcon,
     VList,
@@ -50,13 +50,13 @@
    */
   export const ActionPattern = {
     name: String,
-    title: [undefined, String],
-    icon: [undefined, String],
+    title: optional(String),
+    icon: optional(String),
     callback: Function,
-    active: [undefined, Boolean],
-    background: [undefined, Boolean],
-    hasUpdate: [undefined, Boolean],
-    disabled: [undefined, Boolean],
+    active: optional(Boolean),
+    background: optional(Boolean),
+    hasUpdate: optional(Boolean),
+    disabled: optional(Boolean),
   };
 
   /**

package/src/components/lists/VcsList.vue

@@ -56,16 +56,15 @@
             'cursor-pointer': selectable && !isDraggable,
           }"
           @click="select(item, $event)"
-          @item-renamed="$emit('item-renamed', $event)"
         >
-          <template #prepend-title>
-            <slot name="item.prepend-title" :item="item" :index="index" />
+          <template #title="titleScope">
+            <slot name="item.title" v-bind="{ ...titleScope, index }"></slot>
           </template>
-          <template #title>
-            <slot name="item.title" :item="item" :index="index"></slot>
+          <template #subtitle="subtitleScope">
+            <slot name="item.subtitle" v-bind="{ ...subtitleScope, index }" />
           </template>
-          <template #append-title>
-            <slot name="item.append-title" :item="item" :index="index" />
+          <template #default="scope">
+            <slot name="item.default" v-bind="{ ...scope, index }" />
           </template>
         </VcsListItem>
         <slot name="item.intermediate" :item="item" :index="index" />
@@ -144,7 +143,7 @@
    * @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} [rename] - Whether the title of can be edited. will add a rename action to the end of the action list
+   * @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.
@@ -152,7 +151,7 @@
    * @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. called before value update
+   * @property {function(string):void} [titleChanged] - A callback called if the title changes via rename action. only usable with renamble true.
    */
 
   /**
@@ -161,12 +160,6 @@
    * @property {number} targetIndex
    */
 
-  /**
-   * @typedef {Object} ItemRenamedEvent
-   * @property {VcsListItem} item
-   * @property {string} newTitle
-   */
-
   /**
    * @description
    * The VCS list is intended to render items. Items can be selectable (by default, more than one) or only a single item can
@@ -193,7 +186,6 @@
    * @vue-prop {string} [tooltip] - tooltip to render on the list title
    * @vue-prop {Array<import("../../actions/actionHelper.js").VcsAction>} [actions] - actions to render in the list title
    * @vue-event {ItemMovedEvent} item-moved - event triggered after item was dragged and is dropped
-   * @vue-event {ItemRenamedEvent} item-renamed - event triggered after item was renamed
    * @vue-data {slot} [#item.prepend-title] - A slot to adapt the list item titel, adding content before the title. Binds item and index.
    * @vue-data {slot} [#item.title] - A slot to adapt the list item titel. Default content is a span or VcsTextField for active rename action. Binds item and index.
    * @vue-data {slot} [#item.append-title] - A slot to adapt the list item titel, adding content after the title. Binds item and index.
@@ -577,7 +569,8 @@
     .v-list-item__selected {
       border-left: solid 4px;
       border-left-color: rgb(var(--v-theme-primary));
-      padding-left: 13px !important;
+      color: rgb(var(--v-theme-primary));
+      padding-left: 12px !important;
     }
     .v-list-item--active {
       .v-list-item__append {

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

@@ -184,9 +184,9 @@ export type VcsListItem = {
      */
     disabled?: boolean | undefined;
     /**
-     * - Whether the title of can be edited. will add a rename action to the end of the action list
+     * - 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.
      */
-    rename?: boolean | undefined;
+    renamable?: boolean | import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionOptions | undefined;
     /**
      * - The title to be displayed
      */
@@ -210,7 +210,7 @@ export type VcsListItem = {
      */
     selectionChanged?: ((arg0: boolean) => void) | undefined;
     /**
-     * - A callback called if the title changes via rename action. called before value update
+     * - A callback called if the title changes via rename action. only usable with renamble true.
      */
     titleChanged?: ((arg0: string) => void) | undefined;
 };
@@ -218,7 +218,3 @@ export type ItemMovedEvent = {
     item: VcsListItem;
     targetIndex: number;
 };
-export type ItemRenamedEvent = {
-    item: VcsListItem;
-    newTitle: string;
-};