@vcmap/ui 5.0.0-rc.8 → 5.0.0

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>

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

@@ -0,0 +1,150 @@
+<template>
+  <section class="vcs-form-section">
+    <slot name="header" :heading="heading" :actions="actions">
+      <div class="vcs-form-section-header d-flex base lighten-3">
+        <div class="d-flex justify-space-between w-full">
+          <div class="d-flex align-center" :class="{ 'px-2': !expandable }">
+            <v-btn
+              :ripple="false"
+              dense
+              plain
+              icon
+              small
+              text
+              :disabled="disabled"
+              elevation="0"
+              @click="open = !open"
+              v-if="expandable"
+            >
+              <v-icon>{{
+                open ? 'mdi-chevron-down' : 'mdi-chevron-right'
+              }}</v-icon>
+            </v-btn>
+            <strong :class="{ 'text--disabled': disabled }">{{
+              $t(heading)
+            }}</strong>
+          </div>
+          <VcsActionButtonList
+            :actions="actions"
+            :overflow-count="actionButtonListOverflowCount"
+            class="pa-2"
+          />
+        </div>
+      </div>
+    </slot>
+    <VcsHelp :text="helpText" :show="showHelp" class="base lighten-4">
+      <slot name="help" />
+    </VcsHelp>
+    <article class="section-content" v-if="showContent">
+      <slot />
+    </article>
+  </section>
+</template>
+
+<script>
+  import { computed, reactive, ref } from 'vue';
+  import { VBtn, VIcon } from 'vuetify/lib';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsHelp from '../notification/VcsHelp.vue';
+
+  /**
+   * @description
+   * Stylized form section with action buttons
+   * @vue-data {slot} [#header] - slot to override form section header
+   * @vue-data {slot} [#default] - slot with the section content
+   * @vue-data {slot} [#help] - Slot to specify html based help. Gets precedence over helpText prop.
+   * @vue-prop {string} heading - Title of the section to be displayed, will be translated.
+   * @vue-prop {boolean} [expandable=false] - If true, section can be toggled.
+   * @vue-prop {boolean} [startOpen=false] - If section starts open.
+   * @vue-prop {boolean} [disabled=false] - If expansion is disabled. Title is rendered in disabled style.
+   * @vue-prop {Array<VcsAction>}    headerActions - Icons to be displayed on the right side
+   * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
+   * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
+   * @vue-computed {Array<VcsAction>} actions - Returns header actions extended by a help action, if help prop is passed or help slot is used.
+   */
+  export default {
+    name: 'VcsFormSection',
+    components: {
+      VBtn,
+      VIcon,
+      VcsActionButtonList,
+      VcsHelp,
+    },
+    props: {
+      heading: {
+        type: String,
+        default: undefined,
+      },
+      expandable: {
+        type: Boolean,
+        default: false,
+      },
+      startOpen: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      headerActions: {
+        type: Array,
+        default: () => [],
+      },
+      actionButtonListOverflowCount: {
+        type: Number,
+        required: false,
+        default: undefined,
+      },
+      helpText: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup(props, { slots }) {
+      const open = ref(props.startOpen);
+      const showContent = computed(() => {
+        if (props.expandable) {
+          return open.value;
+        }
+        return true;
+      });
+      const helpAction = reactive({
+        name: 'help',
+        title: 'components.vcsFormSection.help',
+        active: false,
+        icon: 'mdi-help-circle',
+        callback() {
+          this.active = !this.active;
+        },
+      });
+      const showHelp = computed(() => helpAction.active);
+      /**
+       * @type {import("vue").ComputedRef<VcsAction>}
+       */
+      const actions = computed(() => {
+        if (props.helpText || (slots.help && slots.help().length > 0)) {
+          return [helpAction, ...props.headerActions];
+        }
+        return props.headerActions;
+      });
+
+      return {
+        open,
+        showContent,
+        showHelp,
+        actions,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '../../styles/shades.scss';
+  .vcs-form-section-header {
+    height: 40px;
+  }
+  .v-alert--text:before {
+    background-color: transparent;
+  }
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <label
+    :htmlFor="htmlFor"
+    class="vcs-label"
+    :class="{
+      'vcs-label-dense': dense,
+      'vcs-label-required': required,
+      'px-1': dense,
+      'px-2': !dense,
+    }"
+  >
+    <slot />
+  </label>
+</template>
+
+<style lang="scss" scoped>
+  @import '../../styles/vcsGrid.scss';
+  @import '../../styles/vcsFont';
+  .vcs-label {
+    font-size: $vcs-font-size;
+    line-height: $line-height-base;
+  }
+  .vcs-label-dense {
+    line-height: $line-height-dense;
+  }
+  .vcs-label-required:after {
+    content: ' *';
+    color: var(--v-error-base);
+  }
+</style>
+<script>
+  /**
+   * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
+   * pass the label text as innerHtml
+   * @vue-prop {string} htmlFor - an id reference the label is meant for
+   * @vue-prop {boolean} [dense=true] - default line height is 32px (dense). If set false, height is 40px.
+   * @vue-prop {boolean} [required=false] - Marks an input field as required by adding an asterisk after the label.
+   */
+  export default {
+    name: 'VcsLabel',
+    props: {
+      htmlFor: {
+        type: String,
+        default: undefined,
+      },
+      dense: {
+        type: Boolean,
+        default: true,
+      },
+      required: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+</script>