@vcmap/ui 5.0.0-rc.9 → 5.0.0

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

@@ -1,97 +1,211 @@
 <template>
-  <div
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-  >
+  <div>
     <VcsTooltip
       :tooltip-position="tooltipPosition"
       :tooltip="errorMessage"
       color="error"
+      :max-width="200"
     >
       <template #activator="{ on, attrs }">
         <span v-on="on">
           <v-select
+            ref="selectField"
             append-icon="mdi-chevron-down"
             hide-details
             flat
-            :outlined="isOutlined"
+            outlined
             :dense="isDense"
             :height="isDense ? 24 : 32"
-            :class="$attrs.color === 'primary' ? 'primary--select' : ''"
-            v-bind="{...$attrs, ...attrs}"
-            v-on="{...$listeners, ...on}"
-            @update:error="setError"
-          />
+            :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>
 </template>
 <style lang="scss" scoped>
- .v-text-field {
-   padding: 0;
-   margin: 0;
- }
-
- .vcs-select-hover{
-   color: var(--v-primary-base) !important;
- }
-
- .primary--select {
-   ::v-deep {
-     .v-select__selection,
-     .v-select__selection--comma,
-     .v-select.v-text-field input {
-       color: var(--v-primary-base);
-     }
-   }
- }
+  .primary--placeholder {
+    ::v-deep {
+      input::placeholder {
+        color: var(--v-primary-base);
+        font-style: italic;
+        opacity: 1;
+      }
+    }
+  }
+  .v-select {
+    &.v-select--is-multi {
+      ::v-deep {
+        .v-select__selections {
+          flex-wrap: nowrap;
+        }
+      }
+    }
+  }
+  .remove-outline {
+    ::v-deep {
+      fieldset {
+        border-width: 0;
+        border-radius: 0;
+      }
+    }
+  }
+  .outline--current {
+    ::v-deep {
+      .v-input__slot fieldset,
+      .v-input__slot .v-select__slot {
+        border-color: currentColor;
+        transition: border-color 0.5s ease;
+      }
+    }
+  }
+  .outline--error {
+    ::v-deep {
+      .v-input__slot fieldset,
+      .v-input__slot .v-select__slot {
+        border-color: var(--v-error-base);
+      }
+    }
+  }
+  .input--dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 4px !important;
+      }
+      fieldset {
+        padding-left: 2px;
+      }
+    }
+  }
+  .input--not-dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 8px !important;
+      }
+      fieldset {
+        padding-left: 6px;
+      }
+    }
+  }
+  .v-input {
+    ::v-deep {
+      fieldset {
+        border-radius: 2px;
+      }
+      .v-select__slot {
+        border-bottom: 1px solid var(--v-base-base);
+      }
+    }
+    &.v-text-field--outlined:hover {
+      ::v-deep {
+        fieldset {
+          border: 1px solid currentColor;
+        }
+      }
+    }
+    &.v-input--is-focused:hover,
+    &.v-input--is-focused {
+      ::v-deep {
+        .v-select__slot {
+          border-bottom: 1px solid var(--v-primary-base);
+        }
+      }
+    }
+  }
 </style>
 <script>
-
+  import { VSelect } from 'vuetify/lib';
+  import { computed, ref } from 'vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
-  import validate from '../notification/validation.js';
+  import { useErrorSync } from './composables.js';
 
   /**
    * @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
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @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.
    */
   export default {
     name: 'VcsSelect',
-    components: { VcsTooltip },
+    components: {
+      VcsTooltip,
+      VSelect,
+    },
     props: {
       tooltipPosition: {
         type: String,
         default: 'right',
       },
+      itemText: {
+        type: Function,
+        default: undefined,
+      },
     },
-    data() {
+    setup(props, { attrs }) {
+      const hover = ref(false);
+      const focus = ref(false);
+      // $ref to v-select element
+      const selectField = ref();
+
+      const errorMessage = useErrorSync(selectField);
+
+      const isDense = computed(() => attrs.dense !== false);
+      const isOutlined = computed(() => {
+        return (
+          (hover.value || focus.value || !!errorMessage.value) &&
+          !(attrs.disabled || attrs.disabled === '')
+        );
+      });
+
+      function getText(item) {
+        if (props.itemText) {
+          return props.itemText(item);
+        } else {
+          return item?.text ?? item;
+        }
+      }
+
       return {
-        hover: false,
-        errorMessage: '',
+        hover,
+        focus,
+        errorMessage,
+        isDense,
+        isOutlined,
+        getText,
+        selectField,
       };
     },
-    computed: {
-      isDense() {
-        return this.$attrs.dense !== undefined && this.$attrs.dense !== false;
-      },
-      isOutlined() {
-        return (this.hover || this.errorMessage.length > 0) &&
-          !(this.$attrs.disabled || this.$attrs.disabled === '');
-      },
-    },
-    methods: {
-      setError() {
-        const rules = [...this.$attrs.rules].concat(this.$attrs.errorMessages);
-        this.errorMessage = validate(rules, this.$attrs.value).join('\n');
-      },
-    },
   };
 </script>
-

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

@@ -0,0 +1,73 @@
+<template>
+  <v-slider
+    class="vcs-slider"
+    :dense="$attrs.dense !== false"
+    hide-details
+    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>
+<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;
+          }
+        }
+      }
+    }
+    &:not(.v-input--dense) {
+      ::v-deep {
+        .v-slider.v-slider--horizontal {
+          margin-left: 12px;
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+</style>
+<script>
+  import { VSlider } from 'vuetify/lib';
+  /**
+   * @description stylized wrapper around {@link https://v2.vuetifyjs.com/en/components/sliders/#api}.
+   */
+  export default {
+    name: 'VcsSlider',
+    components: {
+      VSlider,
+    },
+  };
+</script>

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

@@ -1,30 +1,33 @@
 <template>
-  <div
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-  >
+  <div>
     <VcsTooltip
       :tooltip-position="tooltipPosition"
       :tooltip="errorMessage"
-      :value="(hover || focus) && isError"
       color="error"
       :max-width="200"
     >
-      <template #activator="{ attrs }">
+      <template #activator="{ on, attrs }">
         <v-textarea
           ref="textAreaRef"
           hide-details
           :dense="isDense"
           :clearable="isClearable"
           @focus="focus = true"
-          @blur="focus = neverBlurred = false"
-          @input="firstInput = true"
-          :outlined="isOutlined"
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners}"
+          @blur="focus = false"
+          @mouseover="hover = true"
+          @mouseleave="hover = false"
+          outlined
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
           :rows="$attrs.rows || (isDense ? 3 : 5)"
-          class="ma-0 pb-1 pt-1 primary--placeholder"
-          :class="$attrs.color === 'primary' ? 'primary--textarea' : ''"
+          class="ma-0 py-1 primary--placeholder"
+          :class="{
+            'remove-outline': !isOutlined,
+            'outline--current': focus,
+            'outline--error': errorMessage,
+            'input--dense': isDense,
+            'input--not-dense': !isDense,
+          }"
         />
       </template>
     </VcsTooltip>
@@ -32,26 +35,87 @@
 </template>
 
 <style lang="scss" scoped>
-.primary--placeholder {
-  ::v-deep {
-    textarea::placeholder {
-      color: var(--v-primary-base);
-      font-style: italic;
-      opacity: 1;
+  .primary--placeholder {
+    ::v-deep {
+      textarea::placeholder {
+        color: var(--v-primary-base);
+        font-style: italic;
+        opacity: 1;
+      }
     }
   }
-}
-.primary--textarea {
-  ::v-deep {
-    textarea {
-      color: var(--v-primary-base);
+  .remove-outline {
+    ::v-deep {
+      fieldset {
+        border-width: 0;
+        border-radius: 0;
+      }
+    }
+  }
+  .outline--current {
+    ::v-deep {
+      .v-input__slot fieldset {
+        border-color: currentColor;
+        transition: border-color 0.5s ease;
+      }
+      .v-text-field__slot textarea {
+        border-color: transparent;
+      }
+    }
+  }
+  .outline--error {
+    ::v-deep {
+      .v-input__slot fieldset,
+      .v-text-field__slot textarea {
+        border-color: var(--v-error-base);
+      }
+    }
+  }
+  .input--dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 4px !important;
+      }
+      fieldset {
+        padding-left: 2px;
+      }
+    }
+  }
+  .input--not-dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 8px !important;
+      }
+      fieldset {
+        padding-left: 6px;
+      }
+    }
+  }
+  .v-input {
+    ::v-deep {
+      textarea {
+        border-bottom: 1px solid var(--v-base-base);
+        border-radius: 0;
+      }
+      textarea::selection {
+        background-color: var(--v-primary-base);
+      }
+      fieldset {
+        border-radius: 2px;
+        border-color: var(--v-base-base);
+      }
+      .v-text-field__slot {
+        margin-right: 0 !important;
+      }
     }
   }
-}
 </style>
 
 <script>
+  import { computed, ref } from 'vue';
+  import { VTextarea } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useErrorSync } from './composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
@@ -73,6 +137,7 @@
     name: 'VcsTextArea',
     components: {
       VcsTooltip,
+      VTextarea,
     },
     props: {
       tooltipPosition: {
@@ -80,51 +145,36 @@
         default: 'right',
       },
     },
-    data() {
+    setup(props, { attrs }) {
+      const hover = ref(false);
+      const focus = ref(false);
+      const textAreaRef = ref();
+
+      const errorMessage = useErrorSync(textAreaRef);
+
+      const isClearable = computed(() => {
+        return (
+          attrs.clearable !== undefined &&
+          attrs.clearable !== false &&
+          (hover.value || focus.value || errorMessage.value)
+        );
+      });
+      const isDense = computed(() => attrs.dense !== false);
+      const isOutlined = computed(() => {
+        return (
+          (hover.value || focus.value || errorMessage.value) &&
+          !(attrs.disabled || attrs.disabled === '')
+        );
+      });
       return {
-        hover: false,
-        focus: false,
-        firstInput: false,
-        neverBlurred: true,
-        isMounted: false,
-        errorMessage: '',
+        hover,
+        focus,
+        textAreaRef,
+        errorMessage,
+        isClearable,
+        isDense,
+        isOutlined,
       };
     },
-    computed: {
-      isClearable() {
-        return (this.$attrs.clearable !== undefined && this.$attrs.clearable !== false) &&
-          (this.hover || this.focus || this.isError);
-      },
-      isDense() {
-        return this.$attrs.dense !== undefined && this.$attrs.dense !== false;
-      },
-      isError() {
-        return this.joinedErrorBucket.length > 0 && (this.firstInput || !this.neverBlurred);
-      },
-      isOutlined() {
-        return (this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
-      },
-      joinedErrorBucket() {
-        if (!this.isMounted) {
-          return false;
-        } else {
-          return this.$refs.textAreaRef.errorBucket.concat(this.$refs.textAreaRef.errorMessages).join('\n');
-        }
-      },
-    },
-    watch: {
-      joinedErrorBucket(newValue, oldValue) {
-        if (oldValue && !newValue) {
-          setTimeout(() => {
-            this.errorMessage = newValue;
-          }, 200);
-        } else {
-          this.errorMessage = newValue;
-        }
-      },
-    },
-    mounted() {
-      this.isMounted = true;
-    },
   };
 </script>