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

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

@@ -9,69 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     formattedDate: import("vue").WritableComputedRef<string>;
-    date: import("vue").WritableComputedRef<{
-        toString: () => string;
-        toDateString: () => string;
-        toTimeString: () => string;
-        toLocaleString: {
-            (): string;
-            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
-            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
-        };
-        toLocaleDateString: {
-            (): string;
-            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
-            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
-        };
-        toLocaleTimeString: {
-            (): string;
-            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
-            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
-        };
-        valueOf: () => number;
-        getTime: () => number;
-        getFullYear: () => number;
-        getUTCFullYear: () => number;
-        getMonth: () => number;
-        getUTCMonth: () => number;
-        getDate: () => number;
-        getUTCDate: () => number;
-        getDay: () => number;
-        getUTCDay: () => number;
-        getHours: () => number;
-        getUTCHours: () => number;
-        getMinutes: () => number;
-        getUTCMinutes: () => number;
-        getSeconds: () => number;
-        getUTCSeconds: () => number;
-        getMilliseconds: () => number;
-        getUTCMilliseconds: () => number;
-        getTimezoneOffset: () => number;
-        setTime: (time: number) => number;
-        setMilliseconds: (ms: number) => number;
-        setUTCMilliseconds: (ms: number) => number;
-        setSeconds: (sec: number, ms?: number | undefined) => number;
-        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
-        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
-        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
-        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
-        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
-        setDate: (date: number) => number;
-        setUTCDate: (date: number) => number;
-        setMonth: (month: number, date?: number | undefined) => number;
-        setUTCMonth: (month: number, date?: number | undefined) => number;
-        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
-        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
-        toUTCString: () => string;
-        toISOString: () => string;
-        toJSON: (key?: any) => string;
-        [Symbol.toPrimitive]: {
-            (hint: "default"): string;
-            (hint: "string"): string;
-            (hint: "number"): number;
-            (hint: string): string | number;
-        };
-    }>;
+    localValue: import("vue").Ref<any>;
     menuOpen: import("vue").Ref<boolean>;
     formatDate: (date: any) => string;
     goToToday: () => void;
@@ -87,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: Date;
     icon: string;
+    modelValue: Date;
 }, {}>;
 export default _default;

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

@@ -4,39 +4,36 @@
     variant="outlined"
     clear-icon="$close"
     :hide-details="false"
+    color="primary vcs-file-input"
     class="primary--placeholder"
     :class="{
       'py-1': !paddingProvided,
     }"
     v-bind="$attrs"
   >
-    <template #message="{ message }">
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+    <template #message="scope">
       <v-tooltip
         ref="errorTooltipRef"
         :activator="fileInputRef"
-        v-if="message"
-        :text="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
         :activator="fileInputRef"
         v-if="tooltip && !errorTooltipRef"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :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-file-input>
 </template>
 
@@ -44,19 +41,19 @@
   @import './vcsTextField.scss';
 
   // set text overflow for file input
-  :deep(.v-field__field) {
-    display: inline-block;
-    max-width: 100%;
+  :deep(.v-field__input) {
+    display: unset;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    line-height: calc(var(--v-vcs-item-height) - 9px);
   }
 </style>
 
 <script>
   import { ref } from 'vue';
   import { VFileInput, 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-file-input v-text-field}.
@@ -84,13 +81,15 @@
         default: 'right',
       },
     },
-    setup(props, { attrs }) {
+    setup(props, { attrs, slots }) {
       const fileInputRef = ref();
       const errorTooltipRef = ref();
 
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
 
       return {
+        forwardSlots,
         paddingProvided,
         fileInputRef,
         errorTooltipRef,

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

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

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

@@ -5,17 +5,25 @@
     :class="{
       'vcs-label-required': required,
       'vcs-label-disabled': disabled,
+      'pa-1': !paddingProvided,
     }"
   >
     <slot />
+    <v-tooltip
+      v-if="tooltip"
+      activator="parent"
+      :location="tooltipPosition"
+      :text="$st(tooltip)"
+    ></v-tooltip>
   </label>
 </template>
 
 <style lang="scss" scoped>
   .vcs-label {
+    box-sizing: content-box;
     display: flex;
     align-items: center;
-    height: var(--v-vcs-item-height);
+    height: calc(var(--v-vcs-item-height) - 8px);
     font-size: var(--v-vcs-font-size);
   }
   .vcs-label-required:after {
@@ -27,15 +35,23 @@
   }
 </style>
 <script>
+  import { VTooltip } from 'vuetify/components';
+  import { usePadding } from '../composables.js';
+
   /**
    * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
    * Pass the label text as innerHtml.
    * @vue-prop {string} htmlFor - an id reference the label is meant for.
    * @vue-prop {boolean} [required=false] - Marks an input field as required by adding an asterisk after the label.
    * @vue-prop {boolean} [disabled=false] - Marks an input field as disabled by adding transparency to the label.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
+   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
   export default {
     name: 'VcsLabel',
+    components: {
+      VTooltip,
+    },
     props: {
       htmlFor: {
         type: String,
@@ -49,6 +65,20 @@
         type: Boolean,
         default: false,
       },
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+    },
+    setup(props, { attrs }) {
+      const paddingProvided = usePadding(attrs);
+      return {
+        paddingProvided,
+      };
     },
   };
 </script>

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

@@ -11,7 +11,17 @@ 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<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    paddingProvided: import("vue").ComputedRef<boolean>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     htmlFor: {
         type: StringConstructor;
         default: undefined;
@@ -24,9 +34,19 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     disabled: boolean;
     required: boolean;
+    tooltip: string;
+    tooltipPosition: string;
     htmlFor: string;
 }, {}>;
 export default _default;

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

@@ -1,5 +1,12 @@
 <template>
-  <v-radio-group v-bind="{ ...$attrs }" ref="radioGroup">
+  <v-radio-group
+    ref="radioGroup"
+    class="vcs-radio"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+    v-bind="$attrs"
+  >
     <v-radio
       v-for="(item, idx) in items"
       :id="`${$.uid}-${idx}`"
@@ -8,6 +15,7 @@
       :disabled="$attrs.disabled ?? item.disabled ?? false"
       :color="item?.color ?? undefined"
       :error="!!errorTooltip"
+      class="pa-0"
       :class="{
         'flex-column': labelPosition !== 'right',
         'label-top': labelPosition === 'top',
@@ -27,7 +35,7 @@
         :activator="radioGroup"
         :model-value="true"
         v-if="message"
-        :text="message"
+        :text="$st(message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
@@ -36,7 +44,7 @@
       v-if="tooltip && !errorTooltip"
       :activator="radioGroup"
       :location="tooltipPosition"
-      :text="tooltip"
+      :text="$st(tooltip)"
     ></v-tooltip>
   </v-radio-group>
 </template>
@@ -44,7 +52,6 @@
   .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);
-    padding: 4px;
   }
   // remove ripple effect
   :deep(.v-selection-control__input::before) {
@@ -58,10 +65,15 @@
   :deep(.label-top > .v-selection-control__wrapper) {
     order: 2;
   }
+  :deep(.v-selection-control-group) {
+    row-gap: 8px;
+    column-gap: 8px;
+  }
 </style>
 <script>
   import { ref } from 'vue';
   import { VRadio, VRadioGroup, VTooltip } from 'vuetify/components';
+  import { usePadding } from '../composables.js';
 
   /**
    * @typedef {Object} VcsRadioItem
@@ -112,11 +124,13 @@
         default: 'right',
       },
     },
-    setup() {
+    setup(props, { attrs }) {
       const radioGroup = ref();
       const errorTooltip = ref();
+      const paddingProvided = usePadding(attrs);
 
       return {
+        paddingProvided,
         radioGroup,
         errorTooltip,
       };

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

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

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

@@ -7,12 +7,12 @@
     :menu-props="{ origin: 'overlap' }"
     :item-title="(item) => $st(getTitle(item))"
     color="primary"
-    class="primary--placeholder"
+    class="primary--placeholder vcs-select"
     :class="{
       'py-1': !paddingProvided,
     }"
     v-bind="$attrs"
-    v-model="forwardedModelValue"
+    v-model="localModelValue"
   >
     <template #selection="{ item, index }">
       <span v-if="index === 0" class="text-truncate w-100">
@@ -23,46 +23,47 @@
       </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"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :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="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,8 +144,9 @@
 <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';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-select/ |vuetify select}.
@@ -182,20 +192,11 @@
         default: undefined,
       },
     },
-    setup(props, { attrs }) {
-      // $ref to v-select element
+    emits: ['update:modelValue'],
+    setup(props, { attrs, slots, emit }) {
       const selectFieldRef = ref();
       const errorTooltipRef = ref();
-      const localModelValue = ref(props.modelValue);
-
-      const forwardedModelValue = computed({
-        get() {
-          return localModelValue.value;
-        },
-        set(value) {
-          localModelValue.value = value;
-        },
-      });
+      const localModelValue = useProxiedComplexModel(props, 'modelValue', emit);
 
       const additionalItems = computed(() => {
         if (Array.isArray(localModelValue.value)) {
@@ -215,9 +216,11 @@
         return props.multiple;
       });
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
 
       return {
-        forwardedModelValue,
+        forwardSlots,
+        localModelValue,
         additionalItems,
         isMultiple,
         paddingProvided,

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

@@ -20,14 +20,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    forwardedModelValue: import("vue").WritableComputedRef<string | number | boolean | unknown[]>;
+    forwardSlots: import("vue").ComputedRef<string[]>;
+    localModelValue: import("vue").Ref<any>;
     additionalItems: import("vue").ComputedRef<number>;
     isMultiple: import("vue").ComputedRef<boolean>;
     paddingProvided: import("vue").ComputedRef<boolean>;
     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,11 +49,13 @@ 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;
     tooltipPosition: string;
-    multiple: boolean;
     itemText: Function;
 }, {}>;
 export default _default;

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

@@ -2,9 +2,11 @@
   <v-slider
     :class="{
       'py-1': !paddingProvided,
+      'remove-append-margin': !hasAppendSlot,
     }"
-    class="VcsSlider"
+    class="vcs-slider mx-1"
     hide-details
+    ref="sliderRef"
     :track-color="'base-darken-1'"
     thumb-color="base-darken-3"
     track-fill-color="base-darken-1"
@@ -13,8 +15,18 @@
     :tick-size="tickSize"
     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 #append="scope">
+      <slot name="append" v-bind="scope ?? {}"></slot>
+      <v-tooltip
+        v-if="tooltip"
+        :activator="sliderRef"
+        :location="tooltipPosition"
+        :text="$st(tooltip)"
+      ></v-tooltip>
     </template>
   </v-slider>
 </template>
@@ -22,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;
@@ -52,27 +67,45 @@
   :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 } from 'vue';
-  import { VSlider } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { computed, ref } from 'vue';
+  import { VSlider, VTooltip } from 'vuetify/components';
+  import { useForwardSlots, usePadding } from '../composables.js';
   import { useItemHeight } from '../../vuePlugins/vuetify.js';
 
   /**
-   * @description stylized wrapper around {@link https://v2.vuetifyjs.com/en/components/sliders/#api}.
+   * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/sliders/#usage}.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
+   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
   export default {
     name: 'VcsSlider',
     components: {
       VSlider,
+      VTooltip,
+    },
+    props: {
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
     },
-    setup(props, { attrs }) {
+    emits: ['update:modelValue'],
+    setup(props, { attrs, slots }) {
       const itemHeight = useItemHeight();
       const thumbSize = computed(() => {
         return Math.floor(itemHeight.value / 4);
       });
-
       const trackSize = computed(() => {
         return Math.floor(itemHeight.value / 12);
       });
@@ -80,8 +113,14 @@
         return trackSize.value * 2;
       });
       const paddingProvided = usePadding(attrs);
-
+      const forwardSlots = useForwardSlots(slots, ['append']);
+      const sliderRef = ref();
       return {
+        hasAppendSlot: computed(() => {
+          return !!slots.append;
+        }),
+        forwardSlots,
+        sliderRef,
         thumbSize,
         tickSize,
         trackSize,