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

package/src/components/flight/VcsFlightComponent.vue

@@ -18,23 +18,23 @@
       <v-container class="py-0 px-1">
         <v-row no-gutters v-if="!hideName">
           <v-col cols="6">
-            <VcsLabel html-for="name" required>
+            <VcsLabel :html-for="`${cid}-name`" required>
               {{ $t('components.flight.name') }}
             </VcsLabel>
           </v-col>
           <v-col>
-            <VcsTextField id="name" clearable v-model="name" />
+            <VcsTextField :id="`${cid}-name`" clearable v-model="name" />
           </v-col>
         </v-row>
         <v-row no-gutters v-if="!hideTitle">
           <v-col cols="6">
-            <VcsLabel html-for="title">
+            <VcsLabel :html-for="`${cid}-title`">
               {{ $t('components.flight.title') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="title"
+              :id="`${cid}-title`"
               clearable
               :placeholder="$t('components.flight.titlePlaceholder')"
               v-model="title"
@@ -43,13 +43,13 @@
         </v-row>
         <v-row no-gutters v-if="!hideInterpolation">
           <v-col cols="6">
-            <VcsLabel html-for="interpolation">
+            <VcsLabel :html-for="`${cid}-interpolation`">
               {{ $t('components.flight.interpolation') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsSelect
-              id="title"
+              :id="`${cid}-interpolation`"
               :items="[
                 { value: 'spline', title: 'components.flight.spline' },
                 { value: 'linear', title: 'components.flight.linear' },
@@ -60,13 +60,13 @@
         </v-row>
         <v-row no-gutters v-if="!hideDuration">
           <v-col cols="6">
-            <VcsLabel html-for="duration">
+            <VcsLabel :html-for="`${cid}-duration`">
               {{ $t('components.flight.duration') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="duration"
+              :id="`${cid}-duration`"
               v-model="duration"
               :hide-spin-buttons="true"
               type="number"
@@ -79,11 +79,7 @@
         </v-row>
         <v-row no-gutters v-if="!hideLoop">
           <v-col cols="6">
-            <VcsCheckbox
-              id="animate"
-              label="components.flight.loop"
-              v-model="loop"
-            />
+            <VcsCheckbox label="components.flight.loop" v-model="loop" />
           </v-col>
         </v-row>
       </v-container>
@@ -116,6 +112,7 @@
     getProvidedFlightInstance,
     setupFlightAnchorEditingListener,
   } from './composables.js';
+  import { useComponentId } from '../composables.js';
 
   /**
    * @param {import("@vcmap/core").FlightInstance} instance
@@ -228,6 +225,8 @@
         editingListener();
       });
 
+      const cid = useComponentId();
+
       return {
         name: flightInstance.name,
         title: computed({
@@ -275,6 +274,7 @@
           },
         }),
         disablePlayer,
+        cid,
       };
     },
   };

package/src/components/flight/VcsFlightComponent.vue.d.ts

@@ -47,6 +47,7 @@ declare const _default: import("vue").DefineComponent<{
     durationRule: typeof durationRule;
     loop: import("vue").WritableComputedRef<boolean>;
     disablePlayer: import("vue").Ref<boolean>;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: StringConstructor;

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

@@ -37,12 +37,17 @@
   </v-checkbox>
 </template>
 <style lang="scss" scoped>
+  :deep(.v-icon--size-default) {
+    font-size: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3));
+  }
   .v-input--density-compact :deep(.v-selection-control) {
-    --v-selection-control-size: 20px;
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 16px);
+    --v-selection-control-size: calc(
+      var(--v-vcs-font-size) * (1.2 + 0.1 / 3) + 4
+    );
+    --v-input-control-height: calc(var(--v-vcs-font-size) + 3px);
   }
   :deep(.v-input__control) {
-    height: calc(var(--v-vcs-item-height) - 8px);
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
   }
   // remove ripple effect
   :deep(.v-selection-control__input::before) {

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

@@ -38,7 +38,6 @@
           filled
           autofocus
           hide-spin-buttons
-          :height="itemHeight - 8"
           @keydown.esc="selected = -1"
           @blur="selected = -1"
           @keydown.enter="submitChange($event)"
@@ -66,7 +65,6 @@
           filled
           autofocus
           hide-spin-buttons
-          :height="itemHeight - 8"
           @keydown.enter="add($event, newValue)"
           @click:append-inner="add($event, newValue)"
           @keydown.esc="cancel"
@@ -96,10 +94,11 @@
     display: none;
   }
   .v-chip.v-chip--size-small {
-    --v-chip-height: calc(var(--v-vcs-item-height) - 8px);
+    --v-chip-height: calc(var(--v-vcs-font-size) * 2 - 2px);
+    padding: 0 calc(var(--v-vcs-font-size) - 3px);
   }
   :deep(.v-icon--size-x-small) {
-    font-size: 18px;
+    font-size: calc(var(--v-vcs-font-size) + 3px);
   }
   .row-gap {
     row-gap: 8px !important;
@@ -111,7 +110,6 @@
   import { VChip, VIcon } from 'vuetify/components';
   import { v4 as uuid } from 'uuid';
   import { usePadding } from '../composables.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
   import VcsButton from '../buttons/VcsButton.vue';
   import VcsTextField from './VcsTextField.vue';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
@@ -279,8 +277,6 @@
 
       const paddingProvided = usePadding(attrs);
 
-      const itemHeight = useItemHeight();
-
       return {
         paddingProvided,
         localValue,
@@ -296,7 +292,6 @@
         submitChange,
         add,
         cancel,
-        itemHeight,
       };
     },
   };

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

@@ -38,7 +38,6 @@ declare const _default: import("vue").DefineComponent<{
     submitChange: (e: any) => void;
     add: (e: any, v: any) => Promise<void>;
     cancel: () => void;
-    itemHeight: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;

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

@@ -11,7 +11,6 @@
     <template v-for="(_, idx) in localValue">
       <v-col :key="`coordinate-${idx}`" v-if="!hideZ || idx < 2">
         <VcsTextField
-          :id="`coordinate-${idx}`"
           :hide-spin-buttons="true"
           type="number"
           class="py-0"
@@ -23,7 +22,7 @@
           force-prefix
           :decimals="decimals[idx]"
           v-bind="noListenerAttrs"
-          v-model="localValue[idx]"
+          v-model.number="localValue[idx]"
           :rules="getRulesForAxis(idx)"
         />
       </v-col>

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

@@ -46,7 +46,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: calc(var(--v-vcs-item-height) - 9px);
+    line-height: calc(var(--v-vcs-font-size) * 2 - 3px);
   }
 </style>
 

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

@@ -23,7 +23,7 @@
     box-sizing: content-box;
     display: flex;
     align-items: center;
-    height: calc(var(--v-vcs-item-height) - 8px);
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
     font-size: var(--v-vcs-font-size);
   }
   .vcs-label-required:after {

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

@@ -9,8 +9,8 @@
   >
     <v-radio
       v-for="(item, idx) in items"
-      :id="`${$.uid}-${idx}`"
-      :key="`${$.uid}-${idx}`"
+      :id="`${cid}-${idx}`"
+      :key="`${cid}-${idx}`"
       :value="item[itemValue] ?? item"
       :disabled="$attrs.disabled ?? item.disabled ?? false"
       :color="item?.color ?? undefined"
@@ -23,7 +23,7 @@
     >
       <template #label>
         <slot name="label" :item="item" :error="!!errorTooltip">
-          <span :html-for="`${$.uid}-${idx}`">
+          <span :html-for="`${cid}-${idx}`">
             {{ $st(item.label ?? item) }}
           </span>
         </slot>
@@ -50,8 +50,8 @@
 </template>
 <style lang="scss" scoped>
   .v-input--density-compact :deep(.v-selection-control) {
-    --v-selection-control-size: calc(var(--v-vcs-item-height) - 8px);
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 16px);
+    --v-selection-control-size: calc(var(--v-vcs-font-size) * 2 - 2px);
+    --v-input-control-height: calc(var(--v-vcs-font-size) + 3px);
   }
   // remove ripple effect
   :deep(.v-selection-control__input::before) {
@@ -73,7 +73,7 @@
 <script>
   import { ref } from 'vue';
   import { VRadio, VRadioGroup, VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { useComponentId, usePadding } from '../composables.js';
 
   /**
    * @typedef {Object} VcsRadioItem
@@ -128,11 +128,13 @@
       const radioGroup = ref();
       const errorTooltip = ref();
       const paddingProvided = usePadding(attrs);
+      const cid = useComponentId();
 
       return {
         paddingProvided,
         radioGroup,
         errorTooltip,
+        cid,
       };
     },
   };

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

@@ -23,6 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     paddingProvided: import("vue").ComputedRef<boolean>;
     radioGroup: import("vue").Ref<any>;
     errorTooltip: import("vue").Ref<any>;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: ArrayConstructor;

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

@@ -73,7 +73,7 @@
     }
   }
   .v-input--density-compact :deep(.v-field) {
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
+    --v-input-control-height: calc(var(--v-vcs-font-size) * 2 - 2px);
     --v-field-padding-bottom: 0px;
     --v-field-input-padding-top: 0px;
     --v-input-padding-top: 0px;

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

@@ -32,7 +32,7 @@
 </template>
 <style lang="scss" scoped>
   .v-input--horizontal :deep(.v-input__control) {
-    min-height: calc(var(--v-vcs-item-height) - 8px);
+    min-height: calc(var(--v-vcs-font-size) * 2 - 2px);
   }
   .v-input--horizontal.v-slider--has-labels {
     margin-bottom: var(--v-vcs-font-size);
@@ -77,7 +77,7 @@
   import { computed, ref } from 'vue';
   import { VSlider, VTooltip } from 'vuetify/components';
   import { useForwardSlots, usePadding } from '../composables.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/sliders/#usage}.
@@ -101,12 +101,12 @@
       },
     },
     setup(props, { attrs, slots }) {
-      const itemHeight = useItemHeight();
+      const fontSize = useFontSize();
       const thumbSize = computed(() => {
-        return Math.floor(itemHeight.value / 4);
+        return Math.floor((fontSize.value + 3) / 2);
       });
       const trackSize = computed(() => {
-        return Math.floor(itemHeight.value / 12);
+        return Math.floor((fontSize.value + 3) / 6);
       });
       const tickSize = computed(() => {
         return trackSize.value * 2;

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

@@ -39,7 +39,7 @@
 
 <style lang="scss" scoped>
   .v-input--density-compact :deep(.v-field) {
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
+    --v-input-control-height: calc(var(--v-vcs-font-size) * 2 - 2px);
     --v-field-padding-bottom: 0px;
     --v-field-input-padding-top: 0px;
     --v-input-padding-top: 0px;

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

@@ -10,6 +10,7 @@
     class="vcs-text-field primary--placeholder"
     :class="{
       'py-1': !paddingProvided,
+      'no-prepended-content': !prependedContent,
     }"
     v-bind="$attrs"
     :prefix="forcePrefix ? undefined : $attrs.prefix"
@@ -151,8 +152,12 @@
           return localValue.value ?? '';
         },
         set(value) {
-          localValue.value = value;
           // emit is not needed since the vuetify component already emits an @input event. (forwarded listeners)
+          if (props.type === 'number') {
+            localValue.value = parseFloat(value);
+          } else {
+            localValue.value = value;
+          }
         },
       });
 
@@ -169,7 +174,11 @@
       const paddingProvided = usePadding(attrs);
       const forwardSlots = useForwardSlots(slots, ['default', 'message']);
 
+      const prependedContent = computed(() => {
+        return (props.forcePrefix && attrs.prefix) || !!slots['prepend-inner'];
+      });
       return {
+        prependedContent,
         forwardSlots,
         paddingProvided,
         visibleValue,

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

@@ -28,9 +28,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
+    prependedContent: import("vue").ComputedRef<{}>;
     forwardSlots: import("vue").ComputedRef<string[]>;
     paddingProvided: import("vue").ComputedRef<boolean>;
-    visibleValue: import("vue").WritableComputedRef<any>;
+    visibleValue: import("vue").WritableComputedRef<string | number | boolean>;
     rules: import("vue").ComputedRef<unknown>;
     textFieldRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;

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

@@ -35,8 +35,8 @@
 </script>
 <style scoped lang="scss">
   :deep(.v-expansion-panel-title) {
-    height: var(--v-vcs-item-height);
-    min-height: var(--v-vcs-item-height);
+    height: calc(var(--v-vcs-font-size) * 2 + 6px);
+    min-height: calc(var(--v-vcs-font-size) * 2 + 6px);
     padding: 0 8px;
   }
   :deep(.v-expansion-panel-title.v-expansion-panel-title--active) {
@@ -58,7 +58,7 @@
   }
   :deep(.v-stepper-vertical-item:not(:last-child):before) {
     height: 100%;
-    top: calc(var(--v-vcs-item-height) * 0.5);
+    top: calc(var(--v-vcs-font-size) * 2 - 16px);
     left: calc(14px + var(--v-vcs-font-size) * 0.42);
     width: calc(var(--v-vcs-font-size) * 0.1);
   }

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

@@ -30,7 +30,11 @@
     </template>
     <template #default>
       <div>
-        <VcsHelp :text="helpText" :show="showHelp" class="mb-1">
+        <VcsHelp
+          :text="helpText"
+          v-if="showHelp && ($slots.help || helpText)"
+          class="mb-1"
+        >
           <slot name="help" />
         </VcsHelp>
         <slot />

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

@@ -3,7 +3,7 @@
   --v-field-padding-end: 4px;
 }
 .v-input--density-compact :deep(.v-field) {
-  --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
+  --v-input-control-height: calc(var(--v-vcs-font-size) * 2 - 2px);
   --v-field-padding-bottom: 0px;
   --v-field-input-padding-top: 0px;
   --v-input-padding-top: 0px;
@@ -50,6 +50,12 @@
 :deep(.v-field--appended) {
   padding-inline-end: 4px;
 }
+:deep(.v-field--prepended) {
+  padding-inline-start: 4px;
+}
+.no-prepended-content :deep(.v-field--prepended) {
+  padding-inline-start: 0px;
+}
 
 // remove margin from prepended Icon
 .v-input--horizontal :deep(.v-input__prepend) {

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

@@ -33,7 +33,7 @@
     box-sizing: content-box;
     display: flex;
     align-items: center;
-    height: calc(var(--v-vcs-item-height) - 8px);
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
   }
   .vcs-disabled {
     opacity: var(--v-disabled-opacity);

package/src/components/import/VcsImportComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card flat class="pa-2">
     <vcs-file-drop
-      :height="3 * itemHeight"
+      :height="dropElementHeight"
       :multiple="multiple"
       v-model="files"
     />
@@ -30,7 +30,7 @@
   import { VCard } from 'vuetify/components';
   import { computed, inject, ref } from 'vue';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
   import VcsFileDrop from './VcsFileDrop.vue';
   import VcsFormButton from '../buttons/VcsFormButton.vue';
   import VcsFileInput from '../form-inputs-controls/VcsFileInput.vue';
@@ -77,13 +77,16 @@
 
       const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
 
-      const itemHeight = useItemHeight();
+      const fontSize = useFontSize();
+      const dropElementHeight = computed(() => {
+        return fontSize.value * 6 + 18;
+      });
 
       return {
         files,
         loading,
         noListenerAttrs,
-        itemHeight,
+        dropElementHeight,
         async doImport() {
           loading.value = true;
           try {

package/src/components/import/VcsImportComponent.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     files: WritableComputedRef<File[]>;
     loading: import("vue").Ref<boolean>;
     noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
-    itemHeight: import("vue").ComputedRef<number>;
+    dropElementHeight: import("vue").ComputedRef<number>;
     doImport(): Promise<void>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     importFiles: {

package/src/components/lists/VcsActionList.vue

@@ -37,7 +37,6 @@
   }
 </style>
 <script>
-  import { computed } from 'vue';
   import { is, optional } from '@vcsuite/check';
   import {
     VIcon,
@@ -46,7 +45,7 @@
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
-  import { useFontSize } from '../../vuePlugins/vuetify.js';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * pattern to check actions
@@ -121,10 +120,7 @@
       },
     },
     setup() {
-      const fontSize = useFontSize();
-      const iconSize = computed(() => {
-        return fontSize.value * (1.2 + 0.1 / 3);
-      });
+      const iconSize = useIconSize();
       return {
         iconSize,
       };

package/src/components/lists/VcsListItemComponent.vue

@@ -127,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

@@ -21,6 +21,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
         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 = {
@@ -36,7 +46,7 @@ export type VcsListItem = {
     /**
      * - 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;
+    renamable?: boolean | Omit<import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction, "callback"> | undefined;
     /**
      * - The title to be displayed
      */