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

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

@@ -3,24 +3,26 @@
     :tooltip-position="tooltipPosition"
     :tooltip="errorMessage"
     color="error"
+    :max-width="200"
   >
     <template #activator="{ on, attrs }">
       <span v-on="on">
         <v-checkbox
+          ref="checkbox"
           :input-value="$attrs.value"
           on-icon="$vcsCheckboxChecked"
           off-icon="$vcsCheckbox"
           class="vcs-checkbox"
+          :class="{'pl-1': !isDense }"
           hide-details
           indeterminate-icon="$vcsCheckboxIndeterminate"
-          :dense="$attrs.dense!==false"
+          :dense="isDense"
           :ripple="false"
           v-bind="{...$attrs, ...attrs}"
           v-on="{...$listeners, ...on}"
-          @update:error="setError"
         >
           <template #label>
-            <VcsLabel :html-for="$attrs.id" :dense="!!$attrs.dense">
+            <VcsLabel :html-for="$attrs.id" :dense="isDense">
               <slot name="label" />
               <span v-if="!$slots.label">{{ $t($attrs.label) }}</span>
             </VcsLabel>
@@ -31,28 +33,45 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-.vcs-checkbox {
-  ::v-deep {
-    label.v-label,
-    .v-icon.v-icon{
-      color: inherit;
-    }
-    .v-input--selection-controls__input {
-      margin: 0;
-      padding: 0;
+@import '../../styles/shades.scss';
+  .vcs-checkbox {
+    ::v-deep {
+      .v-input--selection-controls__input {
+        margin: 0;
+        padding: 0;
+      }
+      label.v-label.error--text {
+        animation: none;
+      }
+      .v-icon,
+      .v-label {
+        &.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-input--selection-controls {
-  margin: 0;
-  padding: 0;
-}
+  .v-input--selection-controls {
+    margin: 0;
+    padding: 0;
+  }
+
 </style>
 <script>
+  import { computed, ref } from 'vue';
   import { VCheckbox } from 'vuetify/lib';
   import VcsLabel from './VcsLabel.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-checkbox/ |vuetify checkbox}.
@@ -77,17 +96,18 @@
         default: 'right',
       },
     },
-    data() {
+    setup(props, { attrs }) {
+      const checkbox = ref();
+
+      const errorMessage = useErrorSync(checkbox);
+      const isDense = computed(() => attrs.dense !== false);
+
       return {
-        errorMessage: '',
+        checkbox,
+        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/VcsDatePicker.vue

@@ -0,0 +1,111 @@
+<template>
+  <v-menu
+    v-model="menuOpen"
+    :close-on-content-click="false"
+    transition="scale-transition"
+    offset-y
+    max-width="290px"
+    min-width="290px"
+  >
+    <template #activator="{ on, attrs }">
+      <v-text-field
+        v-model="formattedDate"
+        :placeholder="formatDate(new Date().toISOString())"
+        v-bind="{...$attrs, ...attrs}"
+        v-on="{...$listeners, ...on}"
+        :prepend-icon="icon"
+        readonly
+        hide-details
+        class="ma-0 py-1"
+      />
+    </template>
+    <v-date-picker v-model="date" no-title @input="menuOpen = false" :locale="locale" color="primary">
+      <v-btn color="primary" @click="goToToday">
+        {{ $t('datePicker.today') }}
+      </v-btn>
+    </v-date-picker>
+  </v-menu>
+</template>
+<style lang="scss" scoped>
+::v-deep {
+  .v-input__control{
+    padding: 0 8px;
+  }
+}
+</style>
+<script>
+  import {
+    computed, ref, watch, inject, onUnmounted, onBeforeMount,
+  } from 'vue';
+  import {
+    VMenu, VTextField, VDatePicker, VBtn,
+  } from 'vuetify/lib';
+  /**
+   * @description stylized wrapper around {@link https://v15.vuetifyjs.com/en/components/date-pickers/#month-pickers-in-dialog-and-menu}.
+   * @vue-prop {string} value - value of the date picker in {@link https://tc39.es/ecma262/#sec-date-time-string-format | Date Time String Format}
+   * @vue-prop {string} icon - specify optional prepend icon, defaults to mdi-calendar
+   * @vue-event {string} input - raised when calendar date is selected
+   */
+  export default {
+    name: 'VcsDatePicker',
+    props: {
+      value: {
+        type: String,
+        required: true,
+      },
+      icon: {
+        type: String,
+        default: 'mdi-calendar',
+      },
+    },
+    components: {
+      VMenu,
+      VTextField,
+      VDatePicker,
+      VBtn,
+    },
+    setup(props, context) {
+      /**
+       * @type {import("@vcmap/ui").VcsUiApp}
+       */
+      const app = /** @type {import("@vcmap/ui").VcsUiApp} */ (inject('vcsApp'));
+      const localValue = ref(props.value);
+      const menuOpen = ref(false);
+      const locale = ref(app.locale);
+
+      const isValid = date => !Number.isNaN(Date.parse(date));
+      const setFromValue = () => {
+        if (isValid(localValue.value)) {
+          localValue.value = props.value;
+        } else {
+          // eslint-disable-next-line no-console
+          console.error('Invalid date provided: ', props.value);
+        }
+      };
+      onBeforeMount(() => setFromValue());
+      const destroyLocaleChanged = app.localeChanged.addEventListener(() => { locale.value = app.locale; });
+      onUnmounted(() => destroyLocaleChanged());
+
+      const formatDate = (date) => {
+        if (date) {
+          return new Intl.DateTimeFormat(locale.value, { dateStyle: 'short' }).format(Date.parse(date));
+        }
+        return '';
+      };
+      const goToToday = () => {
+        localValue.value = new Date(Date.now()).toISOString().substring(0, 10);
+        menuOpen.value = false;
+      };
+      watch(() => props.value, () => setFromValue());
+      const formattedDate = computed({
+        get: () => { return formatDate(localValue.value); },
+        set: () => {},
+      });
+      const date = computed({ get: () => localValue.value, set: (nv) => { localValue.value = nv; context.emit('input', localValue.value); } });
+
+      return {
+        formattedDate, date, menuOpen, formatDate, locale, goToToday,
+      };
+    },
+  };
+</script>

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

@@ -1,7 +1,7 @@
 <template>
   <section class="vcs-form-section">
     <slot name="header" :heading="heading" :actions="actions">
-      <article class="pa-2 accent">
+      <article class="pa-2 base lighten-3">
         <div class="form-section-header d-flex justify-space-between align-center">
           <strong class="caption">{{ $t(heading) }}</strong>
           <VcsActionButtonList
@@ -12,17 +12,13 @@
         </div>
       </article>
     </slot>
-    <v-alert
-      :value="showHelp"
-      dense
-      text
-      color="secondary"
-      class="ma-0"
+    <VcsHelp
+      :text="helpText"
+      :show="showHelp"
+      class="base lighten-4"
     >
-      <slot name="help">
-        <span>{{ $t(helpText) }}</span>
-      </slot>
-    </v-alert>
+      <slot name="help" />
+    </VcsHelp>
     <article class="section-content">
       <slot />
     </article>
@@ -32,8 +28,8 @@
 
 <script>
   import { computed, reactive } from 'vue';
-  import { VAlert } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsHelp from '../notification/VcsHelp.vue';
 
   /**
    * @description
@@ -51,7 +47,7 @@
     name: 'VcsFormSection',
     components: {
       VcsActionButtonList,
-      VAlert,
+      VcsHelp,
     },
     props: {
       heading: {
@@ -98,3 +94,9 @@
     },
   };
 </script>
+
+<style scoped>
+  .v-alert--text:before{
+    background-color: transparent;
+  }
+</style>

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

@@ -1,8 +1,17 @@
 <template>
-  <label :htmlFor="htmlFor" class="vcs-label" :class="{'vcs-label-dense': dense}">
+  <label
+    :htmlFor="htmlFor"
+    class="vcs-label"
+    :class="{
+      'vcs-label-dense': dense,
+      'px-1': dense,
+      'px-2': !dense,
+    }"
+  >
     <slot />
   </label>
 </template>
+
 <style lang="scss" scoped>
 @import "../../styles/vcsGrid.scss";
 @import "../../styles/vcsFont";

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>