@vcmap/ui 5.3.2 → 6.0.0-rc.1

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

@@ -1,169 +1,178 @@
 <template>
-  <div>
-    <VcsTooltip
-      :tooltip-position="tooltipPosition"
-      :tooltip="errorMessage"
-      color="error"
-      :max-width="200"
+  <v-select
+    menu-icon="mdi-chevron-down"
+    :multiple="multiple"
+    variant="outlined"
+    ref="selectFieldRef"
+    :menu-props="{ origin: 'overlap' }"
+    :item-title="(item) => $st(getTitle(item))"
+    color="primary"
+    class="primary--placeholder"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+    v-bind="$attrs"
+    v-model="forwardedModelValue"
+  >
+    <template #selection="{ item, index }">
+      <span v-if="index === 0" class="text-truncate w-100">
+        {{ $st(getTitle(item.raw)) }}
+      </span>
+      <span v-if="index === 1" class="text-no-wrap">
+        (+{{ additionalItems }})
+      </span>
+    </template>
+
+    <template #append-inner>
+      <slot name="append-inner"></slot>
+      <v-tooltip
+        :activator="selectFieldRef"
+        v-if="tooltip && !errorTooltipRef"
+        :text="tooltip"
+        :location="tooltipPosition"
+      />
+    </template>
+    <template
+      v-for="slot of Object.keys($slots).filter(
+        (name) => name !== 'append-inner',
+      )"
+      #[slot]="scope"
     >
-      <template #activator="{ on, attrs }">
-        <span v-on="on">
-          <v-select
-            ref="selectField"
-            append-icon="mdi-chevron-down"
-            hide-details
-            flat
-            outlined
-            :dense="isDense"
-            :height="isDense ? 24 : 32"
-            :item-text="(item) => $t(getText(item))"
-            class="py-1 primary--placeholder"
-            :class="{
-              'remove-outline': !isOutlined,
-              'input--dense': isDense,
-              'input--not-dense': !isDense,
-              'outline--current': focus,
-              'outline--error': !!errorMessage,
-            }"
-            v-bind="{ ...$attrs, ...attrs }"
-            v-on="{ ...$listeners, ...on }"
-            @focus="focus = true"
-            @blur="focus = false"
-            @mouseover="hover = true"
-            @mouseleave="hover = false"
-          >
-            <template #selection="{ item, index }">
-              <span v-if="index === 0" class="text-truncate w-full">
-                {{ $t(getText(item)) }}
-              </span>
-              <span v-if="index === 1" class="text-no-wrap text-caption">
-                (+{{ $attrs.value.length - 1 }})
-              </span>
-            </template>
-            <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
-              <slot :name="slot" v-bind="scope" />
-            </template>
-          </v-select>
-        </span>
-      </template>
-    </VcsTooltip>
-  </div>
+      <slot :name="slot" v-bind="scope" />
+    </template>
+    <template #message="{ message }">
+      <v-tooltip
+        :activator="selectFieldRef"
+        ref="errorTooltipRef"
+        v-if="message"
+        :text="message"
+        content-class="bg-error"
+        :location="tooltipPosition"
+      />
+    </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>
+  </v-select>
 </template>
 <style lang="scss" scoped>
-  .primary--placeholder {
-    ::v-deep {
-      input::placeholder {
-        color: var(--v-primary-base);
-        font-style: italic;
-        opacity: 1;
-      }
-    }
+  :deep(.v-field) {
+    --v-field-padding-start: 8px;
+    --v-field-padding-end: 8px;
   }
-  .v-select {
-    &.v-select--is-multi {
-      ::v-deep {
-        .v-select__selections {
-          flex-wrap: nowrap;
-        }
-      }
+  :deep(.v-field__input) {
+    flex-wrap: unset;
+    padding-right: calc(var(--v-vcs-font-size) * 2 + 2px);
+    > input {
+      align-self: auto !important;
     }
   }
-  .remove-outline {
-    ::v-deep {
-      fieldset {
-        border-width: 0;
-        border-radius: 0;
-      }
-    }
+  .v-input--density-compact :deep(.v-field) {
+    --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
+    --v-field-padding-bottom: 0px;
+    --v-field-input-padding-top: 0px;
+    --v-input-padding-top: 0px;
   }
-  .outline--current {
-    ::v-deep {
-      .v-input__slot fieldset,
-      .v-input__slot .v-select__slot {
-        border-color: currentColor;
-        transition: border-color 0.5s ease;
-      }
-    }
+  :deep(.v-field--focused .v-field__outline *) {
+    --v-field-border-width: 1px;
   }
-  .outline--error {
-    ::v-deep {
-      .v-input__slot fieldset,
-      .v-input__slot .v-select__slot {
-        border-color: var(--v-error-base);
-      }
-    }
+  // set the border color on focused to primary, but not on error
+  :deep(.v-field--focused:not(.v-field--error) .v-field__outline *) {
+    border-color: rgb(var(--v-theme-primary));
   }
-  .input--dense {
-    ::v-deep {
-      .v-input__slot {
-        padding: 0 4px !important;
-      }
-      fieldset {
-        padding-left: 2px;
-      }
-    }
+  // Not color, just used if label is given
+  :deep(.v-field--focused:not(.v-field--error) .v-field__outline *::after) {
+    border-color: rgb(var(--v-theme-primary));
   }
-  .input--not-dense {
-    ::v-deep {
-      .v-input__slot {
-        padding: 0 8px !important;
-      }
-      fieldset {
-        padding-left: 6px;
-      }
+  // remove outline, if not focused, hovered or an error
+  :deep(.v-field:not(.v-field--focused):not(.v-field--error):not(:hover)) {
+    .v-field__outline * {
+      border-width: 0 0 1px 0;
+      border-radius: 0;
     }
-  }
-  .v-input {
-    ::v-deep {
-      fieldset {
-        border-radius: 2px;
-      }
-      .v-select__slot {
-        border-bottom: 1px solid var(--v-base-base);
-      }
+    .v-field__outline {
+      padding-left: 8px;
+      padding-right: 8px;
     }
-    &.v-text-field--outlined:hover {
-      ::v-deep {
-        fieldset {
-          border: 1px solid currentColor;
-        }
-      }
+    .v-field__loader {
+      padding-left: 8px;
+      padding-right: 8px;
     }
-    &.v-input--is-focused:hover,
-    &.v-input--is-focused {
-      ::v-deep {
-        .v-select__slot {
-          border-bottom: 1px solid var(--v-primary-base);
-        }
-      }
+    .v-field__outline *::before {
+      border-width: 0;
+      border-radius: 0;
+    }
+    .v-field__outline * label {
+      color: rgb(var(--v-theme-primary));
+      margin-left: -4px;
     }
   }
+  .primary--placeholder {
+    :deep(input::placeholder) {
+      color: rgb(var(--v-theme-primary));
+      opacity: 1;
+      // line-height: unset !important;
+      padding: 0 3px 0 0;
+    }
+    :deep(input::-moz-placeholder) {
+      font-style: italic;
+    }
+  }
+  // remove details
+  :deep(.v-input__details) {
+    display: none;
+  }
+
+  // Progress Bar
+  :deep(.v-field__loader) {
+    top: calc(100% - 2px);
+  }
 </style>
 <script>
-  import { VSelect } from 'vuetify/lib';
+  import { VSelect, VTooltip, VListItem } from 'vuetify/components';
   import { computed, ref } from 'vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
-  import { useErrorSync } from './composables.js';
+  import { usePadding } from '../composables.js';
+  import VcsCheckbox from './VcsCheckbox.vue';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-select/ |vuetify select}.
    * Translates the items text if it is an i18n string.
-   * Provides two height options depending on "dense" property:
-   * - if dense is set true (default), height is 24 px
-   * - if dense is set false, height is 32 px
-   * Provides VcsTooltip to show error messages
+   * Provides VTooltip to show error messages
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {string|undefined} tooltip - Optional tooltip which will be shown on hover when no error message is shown
    * @vue-prop {Function} itemText - A function that is applied to each item and should return the item's text value.
-   * @vue-computed {boolean} isDense - Whether size of select is dense.
-   * @vue-computed {boolean} isOutlined - Select is outlined on either hover, focus or error, if not disabled.
+   * @vue-prop {boolean} multiple - allows selecting several values instead of just one
    */
   export default {
     name: 'VcsSelect',
     components: {
-      VcsTooltip,
       VSelect,
+      VTooltip,
+      VListItem,
+      VcsCheckbox,
     },
     props: {
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      modelValue: {
+        type: [Array, String, Boolean, Number],
+        default(rawProps) {
+          if (rawProps.multiple) {
+            return [];
+          }
+          return '';
+        },
+      },
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
       tooltipPosition: {
         type: String,
         default: 'right',
@@ -174,37 +183,47 @@
       },
     },
     setup(props, { attrs }) {
-      const hover = ref(false);
-      const focus = ref(false);
       // $ref to v-select element
-      const selectField = ref();
+      const selectFieldRef = ref();
+      const errorTooltipRef = ref();
+      const localModelValue = ref(props.modelValue);
 
-      const errorMessage = useErrorSync(selectField);
+      const forwardedModelValue = computed({
+        get() {
+          return localModelValue.value;
+        },
+        set(value) {
+          localModelValue.value = value;
+        },
+      });
 
-      const isDense = computed(() => attrs.dense !== false);
-      const isOutlined = computed(() => {
-        return (
-          (hover.value || focus.value || !!errorMessage.value) &&
-          !(attrs.disabled || attrs.disabled === '')
-        );
+      const additionalItems = computed(() => {
+        if (Array.isArray(localModelValue.value)) {
+          return localModelValue.value.length - 1;
+        }
+        return 0;
       });
 
-      function getText(item) {
+      function getTitle(item) {
         if (props.itemText) {
           return props.itemText(item);
         } else {
-          return item?.text ?? item;
+          return item?.title ?? item;
         }
       }
+      const isMultiple = computed(() => {
+        return props.multiple;
+      });
+      const paddingProvided = usePadding(attrs);
 
       return {
-        hover,
-        focus,
-        errorMessage,
-        isDense,
-        isOutlined,
-        getText,
-        selectField,
+        forwardedModelValue,
+        additionalItems,
+        isMultiple,
+        paddingProvided,
+        selectFieldRef,
+        errorTooltipRef,
+        getTitle,
       };
     },
   };

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

@@ -1,4 +1,16 @@
 declare const _default: import("vue").DefineComponent<{
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        default(rawProps: any): never[] | "";
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
@@ -8,14 +20,26 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    hover: import("vue").Ref<boolean>;
-    focus: import("vue").Ref<boolean>;
-    errorMessage: import("vue").Ref<string>;
-    isDense: import("vue").ComputedRef<boolean>;
-    isOutlined: import("vue").ComputedRef<boolean>;
-    getText: (item: any) => any;
-    selectField: import("vue").Ref<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    forwardedModelValue: import("vue").WritableComputedRef<string | number | boolean | unknown[]>;
+    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<{
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        default(rawProps: any): never[] | "";
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
@@ -25,7 +49,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    modelValue: string | number | boolean | unknown[];
+    tooltip: string;
     tooltipPosition: string;
+    multiple: boolean;
     itemText: Function;
-}>;
+}, {}>;
 export default _default;

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

@@ -1,66 +1,64 @@
 <template>
   <v-slider
-    class="vcs-slider"
-    :dense="$attrs.dense !== false"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+    class="VcsSlider"
     hide-details
+    :track-color="'base-darken-1'"
+    thumb-color="base-darken-3"
+    track-fill-color="base-darken-1"
+    :thumb-size="thumbSize"
+    :track-size="trackSize"
+    :tick-size="tickSize"
     v-bind="{ ...$attrs }"
-    v-on="{ ...$listeners }"
-    :color="$attrs.color || 'base darken-1'"
-    :track-color="$attrs['track-color'] || 'base darken-1'"
-    :thumb-color="$attrs['thumb-color'] || 'base darken-3'"
-  />
+  >
+    <template v-for="slot of Object.keys($slots)" #[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </v-slider>
 </template>
 <style lang="scss" scoped>
-  @import '../../styles/shades.scss';
-  .vcs-slider {
-    ::v-deep {
-      .v-slider {
-        cursor: pointer;
-        .v-slider__thumb {
-          border: 2px solid;
-          &:before {
-            display: none;
-          }
-        }
-        &.theme--light {
-          .v-slider__thumb {
-            border-color: map-get($shades, 'white') !important;
-          }
-        }
-        &.theme--dark {
-          .v-slider__thumb {
-            border-color: map-get($shades, 'black') !important;
-          }
-        }
-        .v-slider__tick,
-        .v-slider__tick--filled {
-          background-color: var(--v-base-darken1);
-          height: 4px !important;
-          top: calc(50% - 2px) !important;
-        }
-        &.v-slider--vertical {
-          .v-slider__tick,
-          .v-slider__tick--filled {
-            width: 4px !important;
-            height: 2px !important;
-            right: calc(50% - 2px) !important;
-            top: auto !important;
-          }
-        }
-      }
+  .v-input--horizontal :deep(.v-input__control) {
+    min-height: calc(var(--v-vcs-item-height) - 8px);
+  }
+  .v-slider.v-input--horizontal {
+    :deep(.v-slider-track__fill) {
+      height: 2px;
+    }
+    :deep(.v-slider-track__tick--first) {
+      margin-inline-start: 0;
     }
-    &:not(.v-input--dense) {
-      ::v-deep {
-        .v-slider.v-slider--horizontal {
-          margin-left: 12px;
-          margin-right: 12px;
-        }
-      }
+    :deep(.v-slider-track__tick--last) {
+      margin-inline-start: 100%;
     }
   }
+  .v-slider.v-input--vertical {
+    :deep(.v-slider-track__fill) {
+      width: 2px;
+    }
+    :deep(.v-slider-track__tick--first) {
+      bottom: 0;
+    }
+    :deep(.v-slider-track__tick--last) {
+      bottom: 100%;
+    }
+  }
+  :deep(.v-slider-thumb__surface::before) {
+    --v-focus-opacity: 0;
+    --v-hover-opacity: 0;
+    --v-pressed-opacity: 0;
+  }
+  :deep(.v-slider-track__tick) {
+    background-color: rgb(var(--v-theme-base-darken-1));
+  }
 </style>
 <script>
-  import { VSlider } from 'vuetify/lib';
+  import { computed } from 'vue';
+  import { VSlider } from 'vuetify/components';
+  import { usePadding } from '../composables.js';
+  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+
   /**
    * @description stylized wrapper around {@link https://v2.vuetifyjs.com/en/components/sliders/#api}.
    */
@@ -69,5 +67,26 @@
     components: {
       VSlider,
     },
+    setup(props, { attrs }) {
+      const itemHeight = useItemHeight();
+      const thumbSize = computed(() => {
+        return Math.floor(itemHeight.value / 4);
+      });
+
+      const trackSize = computed(() => {
+        return Math.floor(itemHeight.value / 12);
+      });
+      const tickSize = computed(() => {
+        return trackSize.value * 2;
+      });
+      const paddingProvided = usePadding(attrs);
+
+      return {
+        thumbSize,
+        tickSize,
+        trackSize,
+        paddingProvided,
+      };
+    },
   };
 </script>

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

@@ -1,2 +1,7 @@
-declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {
+    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<{}>>, {}, {}>;
 export default _default;