@vcmap/ui 5.0.0-rc.21 → 5.0.0-rc.22

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

@@ -3,30 +3,31 @@
     :tooltip-position="tooltipPosition"
     :tooltip="errorMessage"
     color="error"
+    :max-width="200"
   >
     <template #activator="{ on, attrs }">
       <span v-on="on">
         <v-radio-group
+          ref="radioGroup"
           hide-details
           class="w-full vcs-radio-group"
-          :dense="$attrs.dense!==false"
+          :dense="isDense"
           :ripple="false"
           v-bind="{...$attrs, ...attrs}"
           v-on="{...$listeners, ...on}"
-          @update:error="setError"
         >
           <v-radio
             v-for="(item, idx) in items"
             :id="`radio-${idx}`"
             :key="`radio-${idx}`"
             :ripple="false"
-            :color="item.color ?? 'secondary'"
             :value="item.value ?? item"
             :disabled="item.disabled ?? false"
-            :class="$attrs.dense!==false ? 'vcs-radio-dense' : 'vcs-radio'"
+            class="ma-0"
+            :class="isDense ? 'vcs-radio-dense' : 'vcs-radio'"
           >
             <template #label>
-              <VcsLabel :html-for="`radio-${idx}`" :dense="!!$attrs.dense">
+              <VcsLabel :html-for="`radio-${idx}`" :dense="isDense">
                 {{ $t(item.label ?? item) }}
               </VcsLabel>
             </template>
@@ -38,11 +39,12 @@
 </template>
 <style lang="scss" scoped>
 @import "../../styles/vcsFont";
+@import '../../styles/shades.scss';
 .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
   margin-bottom: 0;
 }
-.v-input{
-  &.vcs-radio-group{
+.v-input {
+  &.vcs-radio-group {
     ::v-deep {
       margin-top: 0;
       padding-top: 0;
@@ -50,19 +52,35 @@
       .v-icon.v-icon{
         font-size: $base-font-size;
         color: inherit;
+        &.theme--light{
+          color: map-get($shades, 'black') !important;
+          &.error--text{
+            color: var(--v-error-base) !important;
+          }
+        }
+        &.theme--dark{
+          color: map-get($shades, 'white') !important;
+          &.error--text{
+            color: var(--v-error-base) !important;
+          }
+        }
       }
-      .v-radio:not(:last-child):not(:only-child){
+      .v-radio:not(:last-child):not(:only-child) {
         margin-bottom: 0;
       }
-      .v-input--selection-controls__input{
+      .v-input--selection-controls__input {
         margin: 0;
       }
+      label.v-label.error--text {
+        animation: none;
+      }
     }
   }
 }
 .vcs-radio {
   height: 40px;
   align-items: center;
+  padding-left: 4px;
 }
 .vcs-radio-dense {
   height: 32px;
@@ -70,10 +88,11 @@
 }
 </style>
 <script>
+  import { computed, ref } from 'vue';
   import { VRadio, VRadioGroup } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsLabel from './VcsLabel.vue';
-  import validate from '../notification/validation.js';
+  import { useErrorSync } from './composables.js';
 
   /**
    * @typedef {Object} VcsRadioItem
@@ -111,17 +130,18 @@
         required: true,
       },
     },
-    data() {
+    setup(props, { attrs }) {
+      const radioGroup = ref();
+
+      const errorMessage = useErrorSync(radioGroup);
+      const isDense = computed(() => attrs.dense !== false);
+
       return {
-        errorMessage: '',
+        radioGroup,
+        errorMessage,
+        isDense,
       };
     },
-    methods: {
-      setError() {
-        const rules = [...this.$attrs.rules].concat(this.$attrs.errorMessages);
-        this.errorMessage = validate(rules, this.$attrs.value).join('\n');
-      },
-    },
     model: {
       event: 'change',
     },

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

@@ -1,33 +1,42 @@
 <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"
             :item-text="item => $t(getText(item))"
-            :class="$attrs.color === 'primary' ? 'primary--select' : ''"
+            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}"
-            @update:error="setError"
+            @focus="focus = true;"
+            @blur="focus = false;"
+            @mouseover="hover = true"
+            @mouseleave="hover = false"
           >
             <template #selection="{ item, index }">
               <span v-if="index === 0" class="text-truncate">
                 {{ $t(getText(item)) }}
               </span>
-              <span v-if="index === 1" class="text-no-wrap grey--text text-caption">
+              <span v-if="index === 1" class="text-no-wrap text-caption">
                 (+{{ $attrs.value.length - 1 }})
               </span>
             </template>
@@ -38,39 +47,85 @@
   </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);
-     }
-   }
- }
- .v-select{
-   &.v-select--is-multi{
-     ::v-deep {
-       .v-select__selections{
+  .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;
+        border-color: var(--v-base-base);
+      }
+      .v-select__slot {
+        border-bottom: 1px solid var(--v-base-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}.
@@ -100,33 +155,36 @@
         default: undefined,
       },
     },
-    data() {
-      return {
-        hover: false,
-        errorMessage: '',
-      };
-    },
-    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');
-      },
-      getText(item) {
-        if (this.itemText) {
-          return this.itemText(item);
+    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,
+        focus,
+        errorMessage,
+        isDense,
+        isOutlined,
+        getText,
+        selectField,
+      };
     },
   };
 </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"
+          @blur="focus = false"
+          @mouseover="hover = true"
+          @mouseleave="hover = false"
+          outlined
           v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners}"
+          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>
@@ -41,18 +44,77 @@
     }
   }
 }
-.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}.
@@ -82,51 +144,30 @@
         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>