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

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

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

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

@@ -1,13 +1,21 @@
 <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}`"
-      :key="`${$.uid}-${idx}`"
+      :id="`${cid}-${idx}`"
+      :key="`${cid}-${idx}`"
       :value="item[itemValue] ?? item"
       :disabled="$attrs.disabled ?? item.disabled ?? false"
       :color="item?.color ?? undefined"
       :error="!!errorTooltip"
+      class="pa-0"
       :class="{
         'flex-column': labelPosition !== 'right',
         'label-top': labelPosition === 'top',
@@ -15,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>
@@ -27,7 +35,7 @@
         :activator="radioGroup"
         :model-value="true"
         v-if="message"
-        :text="message"
+        :text="$st(message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
@@ -36,15 +44,14 @@
       v-if="tooltip && !errorTooltip"
       :activator="radioGroup"
       :location="tooltipPosition"
-      :text="tooltip"
+      :text="$st(tooltip)"
     ></v-tooltip>
   </v-radio-group>
 </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);
-    padding: 4px;
+    --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) {
@@ -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 { useComponentId, usePadding } from '../composables.js';
 
   /**
    * @typedef {Object} VcsRadioItem
@@ -112,13 +124,17 @@
         default: 'right',
       },
     },
-    setup() {
+    setup(props, { attrs }) {
       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

@@ -20,8 +20,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    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

@@ -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;
@@ -72,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;
@@ -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,16 +112,21 @@
       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));
       opacity: 1;
-      // line-height: unset !important;
+      font-style: italic !important;
       padding: 0 3px 0 0;
     }
-    :deep(input::-moz-placeholder) {
-      font-style: italic;
-    }
   }
   // remove details
   :deep(.v-input__details) {
@@ -135,8 +141,9 @@
 <script>
   import { VSelect, VTooltip, VListItem } from 'vuetify/components';
   import { computed, ref } from 'vue';
-  import { usePadding } from '../composables.js';
+  import { getForwardSlots, 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}.
@@ -166,7 +173,7 @@
           if (rawProps.multiple) {
             return [];
           }
-          return '';
+          return null;
         },
       },
       tooltip: {
@@ -182,20 +189,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 +213,11 @@
         return props.multiple;
       });
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
 
       return {
-        forwardedModelValue,
+        forwardSlots,
+        localModelValue,
         additionalItems,
         isMultiple,
         paddingProvided,

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

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     modelValue: {
         type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-        default(rawProps: any): never[] | "";
+        default(rawProps: any): never[] | null;
     };
     tooltip: {
         type: StringConstructor;
@@ -20,21 +20,22 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    forwardedModelValue: import("vue").WritableComputedRef<string | number | boolean | unknown[]>;
+    forwardSlots: 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;
     };
     modelValue: {
         type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-        default(rawProps: any): never[] | "";
+        default(rawProps: any): never[] | null;
     };
     tooltip: {
         type: StringConstructor;
@@ -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,14 +15,27 @@
     :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>
 <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);
   }
   .v-slider.v-input--horizontal {
     :deep(.v-slider-track__fill) {
@@ -52,36 +67,59 @@
   :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 { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { computed, ref } from 'vue';
+  import { VSlider, VTooltip } from 'vuetify/components';
+  import { getForwardSlots, usePadding } from '../composables.js';
+  import { useFontSize } 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 }) {
-      const itemHeight = useItemHeight();
+    setup(props, { attrs, slots }) {
+      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;
       });
       const paddingProvided = usePadding(attrs);
-
+      const forwardSlots = getForwardSlots(slots, ['append']);
+      const sliderRef = ref();
       return {
+        hasAppendSlot: computed(() => {
+          return !!slots.append;
+        }),
+        forwardSlots,
+        sliderRef,
         thumbSize,
         tickSize,
         trackSize,

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

@@ -1,7 +1,31 @@
-declare const _default: import("vue").DefineComponent<{}, {
+declare const _default: import("vue").DefineComponent<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    hasAppendSlot: import("vue").ComputedRef<boolean>;
+    forwardSlots: 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>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, 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;
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: string;
+}, {}>;
 export default _default;