@vcmap/ui 5.0.0-rc.9 → 5.0.0

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

@@ -3,23 +3,28 @@
     :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"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
         >
           <template #label>
-            <VcsLabel :html-for="$attrs.id" :dense="!!$attrs.dense">
-              {{ $attrs.label }}
+            <VcsLabel :html-for="$attrs.id" :dense="isDense">
+              <slot name="label" />
+              <span v-if="!$slots.label">{{ $t($attrs.label) }}</span>
             </VcsLabel>
           </template>
         </v-checkbox>
@@ -28,15 +33,45 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-.v-input--selection-controls {
-  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;
+      }
+
+      .primary--text,
+      .v-label:not(.v-label--is-disabled) {
+        &.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;
+  }
 </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}.
@@ -45,27 +80,34 @@
    * - 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 {string} label - Label to be displayed, will be translated.
+   * @vue-data {slot} [#label] - slot to pass html for Checkbox label. Overrides label passed as prop.
    */
   export default {
     name: 'VcsCheckbox',
-    components: { VcsTooltip, VcsLabel },
+    components: {
+      VcsTooltip,
+      VcsLabel,
+      VCheckbox,
+    },
     props: {
       tooltipPosition: {
         type: String,
         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/VcsChipArrayInput.vue

@@ -0,0 +1,290 @@
+<template>
+  <div
+    class="d-flex d-inline-block align-center mb-1"
+    :class="{ 'mt-1': !column }"
+  >
+    <v-btn
+      v-if="hasScrollbar"
+      :dense="isDense"
+      x-small
+      icon
+      :ripple="false"
+      elevation="0"
+      @click="vcsChipArrayInput.scrollLeft -= scrollDx"
+    >
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+    <div
+      ref="vcsChipArrayInput"
+      class="d-flex d-inline-block mx-1 my-0"
+      :class="{
+        'overflow-x-auto': !column,
+        'hide-scrollbar': !column,
+        row: column,
+      }"
+    >
+      <div
+        v-for="(item, index) in value"
+        :key="index"
+        class="pr-1"
+        :class="{ 'pt-1': column }"
+      >
+        <v-chip
+          v-if="selected !== index"
+          v-bind="{ ...$attrs }"
+          :small="isDense"
+          :disabled="disabled"
+          :close="deletableChips"
+          @click="select(index)"
+          @click:close="remove(index)"
+        >
+          <span class="text-truncate d-inline-block">{{ item }}</span>
+        </v-chip>
+        <VcsTextField
+          v-else
+          hide-details
+          :dense="isDense"
+          rounded
+          filled
+          autofocus
+          no-padding
+          :height="24"
+          v-bind="{ ...$attrs }"
+          v-model="editValue"
+          @keydown.esc="selected = -1"
+          @blur="selected = -1"
+          @keydown.enter="submitChange($event)"
+          @click:append="submitChange($event)"
+          @update:error="(err) => (isEditValid = !err)"
+          append-icon="mdi-check"
+          :style="{ width: `${inputWidth}px` }"
+        />
+      </div>
+      <div :class="{ 'pt-1': column }">
+        <v-chip
+          v-if="adding === false"
+          v-bind="{ ...$attrs }"
+          :small="isDense"
+          :disabled="disabled"
+          @click="adding = true"
+        >
+          <v-icon>$vcsPlus</v-icon>
+        </v-chip>
+        <VcsTextField
+          v-else
+          hide-details
+          :dense="isDense"
+          rounded
+          filled
+          autofocus
+          no-padding
+          :height="24"
+          class="vcs-inside-chip"
+          v-model="newValue"
+          v-bind="{ ...$attrs }"
+          @keydown.enter="add($event, newValue)"
+          @keydown.esc="cancel"
+          @blur="cancel"
+          @click:append="add($event, newValue)"
+          @update:error="(err) => (isNewValid = !err)"
+          append-icon="mdi-check"
+          :style="{ width: `${inputWidth}px` }"
+        />
+      </div>
+    </div>
+    <v-btn
+      v-if="hasScrollbar"
+      :dense="isDense"
+      x-small
+      icon
+      :ripple="false"
+      elevation="0"
+      @click="vcsChipArrayInput.scrollLeft += scrollDx"
+    >
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .v-chip {
+    display: flex;
+    max-width: 260px;
+    padding: 0 8px;
+    .v-chip__content {
+      display: flex;
+    }
+  }
+  .vcs-inside-chip {
+    ::v-deep {
+      .v-input__slot {
+        .v-input__append-inner {
+          margin-top: 5px;
+        }
+      }
+      .v-text-field--filled > .v-input__control > .v-input__slot,
+      .v-text-field--outlined > .v-input__control > .v-input__slot {
+        min-height: unset;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { computed, nextTick, onMounted, ref } from 'vue';
+  import { VBtn, VChip, VIcon } from 'vuetify/lib';
+  import VcsTextField from './VcsTextField.vue';
+
+  /**
+   * @description Renders elements of an array as chips with an input field to edit or add new elements.
+   * Provides two height options depending on "dense" property
+   * Provides VcsTooltip to show error messages on focus
+   * When clicking esc key, previous input is restored.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {string}                                 [type] - The input type (string or number)
+   * @vue-prop {boolean}                                [disabled] - Disables adding or removing new elements
+   * @vue-prop {boolean}                                [column] - Remove horizontal pagination and wrap items as needed
+   * @vue-prop {boolean}                                [scrollDx=20] - scroll amount in px
+   * @vue-prop {boolean}                                [deletableChips=true] - Adds a delete button to elements to remove them from array
+   * @vue-prop {number}                                 [inputWidth=50] - Width of the text fields in px.
+   */
+  export default {
+    name: 'VcsChipArrayInput',
+    components: {
+      VBtn,
+      VcsTextField,
+      VChip,
+      VIcon,
+    },
+    props: {
+      value: {
+        type: Array,
+        required: true,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      deletableChips: {
+        type: Boolean,
+        default: true,
+      },
+      inputWidth: {
+        type: Number,
+        default: 50,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      column: {
+        type: Boolean,
+        default: false,
+      },
+      scrollDx: {
+        type: Number,
+        default: 20,
+      },
+    },
+    setup(props, { attrs, emit }) {
+      const selected = ref(-1);
+      const adding = ref(false);
+      const isEditValid = ref(true);
+      const editValue = ref(undefined);
+      const isNewValid = ref(true);
+      const newValue = ref(undefined);
+      const vcsChipArrayInput = ref();
+      const hasScrollbar = ref();
+      const isDense = computed(() => attrs.dense !== false);
+
+      function emitValue(value) {
+        if (attrs.type === 'number') {
+          emit(
+            'input',
+            value.map((v) => parseFloat(v)),
+          );
+        } else {
+          emit('input', value);
+        }
+      }
+
+      function updateHasScrollbar() {
+        if (!props.column) {
+          hasScrollbar.value =
+            vcsChipArrayInput.value.scrollWidth -
+              vcsChipArrayInput.value.clientWidth >
+            36; // size of the scroll buttons
+        }
+      }
+
+      onMounted(() => updateHasScrollbar());
+
+      function remove(index) {
+        emitValue(props.value.toSpliced(index, 1));
+        updateHasScrollbar();
+      }
+
+      function select(index) {
+        if (!props.disabled) {
+          selected.value = index;
+          editValue.value = props.value[index];
+        }
+      }
+
+      function submitChange(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (isEditValid.value) {
+          emitValue(props.value.toSpliced(selected.value, 1, editValue.value));
+          selected.value = -1;
+        }
+      }
+
+      function cancel() {
+        newValue.value = undefined;
+        adding.value = false;
+      }
+
+      async function add(e, value) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (isNewValid.value) {
+          if (value) {
+            emitValue([...props.value, value]);
+            await nextTick();
+            updateHasScrollbar();
+            await nextTick();
+            vcsChipArrayInput.value.scrollLeft =
+              vcsChipArrayInput.value.scrollWidth;
+          }
+          newValue.value = undefined;
+          adding.value = true;
+        }
+      }
+
+      return {
+        selected,
+        adding,
+        editValue,
+        isEditValid,
+        newValue,
+        isNewValid,
+        isDense,
+        vcsChipArrayInput,
+        hasScrollbar,
+        remove,
+        select,
+        submitChange,
+        add,
+        cancel,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,156 @@
+<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"
+        :dense="isDense"
+        readonly
+        hide-details
+        class="ma-0 py-1"
+        :class="{
+          'input--dense': isDense,
+          'input--not-dense': !isDense,
+        }"
+      />
+    </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 4px;
+    }
+    .v-input__prepend-outer {
+      margin-right: 4px;
+    }
+    .v-icon {
+      font-size: 16px;
+    }
+  }
+</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, { emit, attrs }) {
+      /**
+       * @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 isDense = computed(() => attrs.dense !== false);
+
+      const isValid = (date) => !Number.isNaN(new Date(date).getTime());
+      const setFromValue = () => {
+        if (isValid(localValue.value)) {
+          localValue.value = props.value;
+        } else if (localValue.value) {
+          // 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;
+          emit('input', localValue.value);
+        },
+      });
+
+      return {
+        formattedDate,
+        date,
+        isDense,
+        menuOpen,
+        formatDate,
+        locale,
+        goToToday,
+      };
+    },
+  };
+</script>