@vcmap/ui 5.3.2 → 6.0.0-rc.1

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

@@ -1,96 +1,76 @@
 <template>
-  <VcsTooltip
-    :tooltip-position="tooltipPosition"
-    :tooltip="errorMessage"
-    color="error"
-    :max-width="200"
+  <v-checkbox
+    ref="checkbox"
+    true-icon="$vcsCheckboxChecked"
+    false-icon="$vcsCheckbox"
+    indeterminate-icon="$vcsCheckboxIndeterminate"
+    :hide-details="false"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+    v-bind="$attrs"
   >
-    <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="isDense"
-          :ripple="false"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <template #label>
-            <VcsLabel :html-for="$attrs.id" :dense="isDense">
-              <slot name="label" />
-              <span v-if="!$slots.label">{{ $t($attrs.label) }}</span>
-            </VcsLabel>
-          </template>
-        </v-checkbox>
-      </span>
+    <template #label>
+      <slot name="label" />
+      <template v-if="!$slots.label">{{ $st($attrs.label) }}</template>
     </template>
-  </VcsTooltip>
+    <template #message="{ message }">
+      <v-tooltip
+        ref="errorTooltip"
+        :activator="checkbox"
+        v-if="message"
+        :text="message"
+        content-class="bg-error"
+        :location="tooltipPosition"
+      />
+    </template>
+    <v-tooltip
+      v-if="tooltip && !errorTooltip"
+      :activator="checkbox"
+      :location="tooltipPosition"
+      :text="tooltip"
+    ></v-tooltip>
+  </v-checkbox>
 </template>
 <style lang="scss" scoped>
-  @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--density-compact :deep(.v-selection-control) {
+    --v-selection-control-size: calc(var(--v-vcs-item-height) - 8px);
+    --v-input-control-height: calc(var(--v-vcs-item-height) - 16px);
   }
-  .v-input--selection-controls {
-    margin: 0;
-    padding: 0;
+  // remove ripple effect
+  :deep(.v-selection-control__input::before) {
+    background-color: transparent;
+  }
+  // remove details
+  :deep(.v-input__details) {
+    display: none;
   }
 </style>
 <script>
-  import { computed, ref } from 'vue';
-  import { VCheckbox } from 'vuetify/lib';
-  import VcsLabel from './VcsLabel.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
-  import { useErrorSync } from './composables.js';
+  import { ref } from 'vue';
+  import { VCheckbox, VTooltip } from 'vuetify/components';
+  import { usePadding } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-checkbox/ |vuetify checkbox}.
-   * 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.
+   * Provides VTooltip to show error messages
+   * @vue-prop {string} [tooltip] - A message to be displayed when there is no error.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip, see {@link https://vuetifyjs.com/en/api/v-tooltip/#props-location | vuetify 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',
+    inheritAttrs: true,
     components: {
-      VcsTooltip,
-      VcsLabel,
+      VTooltip,
       VCheckbox,
     },
     props: {
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
       tooltipPosition: {
         type: String,
         default: 'right',
@@ -98,18 +78,14 @@
     },
     setup(props, { attrs }) {
       const checkbox = ref();
-
-      const errorMessage = useErrorSync(checkbox);
-      const isDense = computed(() => attrs.dense !== false);
+      const errorTooltip = ref();
+      const paddingProvided = usePadding(attrs);
 
       return {
+        paddingProvided,
         checkbox,
-        errorMessage,
-        isDense,
+        errorTooltip,
       };
     },
-    model: {
-      event: 'change',
-    },
   };
 </script>

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

@@ -1,18 +1,27 @@
 declare const _default: import("vue").DefineComponent<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
     };
 }, {
+    paddingProvided: import("vue").ComputedRef<boolean>;
     checkbox: import("vue").Ref<any>;
-    errorMessage: import("vue").Ref<string>;
-    isDense: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    errorTooltip: import("vue").Ref<any>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
     };
 }>>, {
+    tooltip: string;
     tooltipPosition: string;
-}>;
+}, {}>;
 export default _default;

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

@@ -1,70 +1,60 @@
 <template>
   <div
-    class="d-flex d-inline-block align-center mb-1"
-    :class="{ 'mt-1': !column }"
+    class="d-flex d-inline-block align-center"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
   >
-    <v-btn
+    <VcsButton
       v-if="hasScrollbar"
-      :dense="isDense"
-      x-small
-      icon
-      :ripple="false"
-      elevation="0"
+      icon="mdi-chevron-left"
       @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="d-flex d-inline-block mx-1 my-0 ga-1"
       :class="{
         'overflow-x-auto': !column,
         'hide-scrollbar': !column,
-        row: column,
+        'v-row': column,
+        'row-gap': column,
       }"
     >
-      <div
-        v-for="(item, index) in value"
-        :key="index"
-        class="pr-1"
-        :class="{ 'pt-1': column }"
-      >
+      <div v-for="({ key, value }, index) in localValue" :key="key">
         <v-chip
           v-if="selected !== index"
-          v-bind="{ ...$attrs }"
-          :small="isDense"
+          v-bind="{ ...noListenerAttrs }"
+          size="small"
           :disabled="disabled"
-          :close="deletableChips"
+          :closable="deletableChips"
           @click="select(index)"
           @click:close="remove(index)"
         >
-          <span class="text-truncate d-inline-block">{{ item }}</span>
+          <span class="text-truncate d-inline-block">{{ value }}</span>
         </v-chip>
         <VcsTextField
           v-else
-          hide-details
-          :dense="isDense"
+          v-bind="{ ...noListenerAttrs }"
           rounded
           filled
           autofocus
-          no-padding
-          :height="24"
-          v-bind="{ ...$attrs }"
+          hide-spin-buttons
+          :height="useItemHeight().value - 8"
           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"
+          @click:append-inner="submitChange($event)"
+          append-inner-icon="mdi-check"
           :style="{ width: `${inputWidth}px` }"
+          class="py-0"
         />
       </div>
-      <div :class="{ 'pt-1': column }">
+      <div>
         <v-chip
           v-if="adding === false"
-          v-bind="{ ...$attrs }"
-          :small="isDense"
+          v-bind="{ ...noListenerAttrs }"
+          size="small"
           :disabled="disabled"
           @click="adding = true"
         >
@@ -72,37 +62,28 @@
         </v-chip>
         <VcsTextField
           v-else
-          hide-details
-          :dense="isDense"
+          v-bind="{ ...noListenerAttrs }"
           rounded
           filled
           autofocus
-          no-padding
-          :height="24"
-          class="vcs-inside-chip"
+          hide-spin-buttons
+          :height="useItemHeight().value - 8"
           v-model="newValue"
-          v-bind="{ ...$attrs }"
           @keydown.enter="add($event, newValue)"
+          @click:append-inner="add($event, newValue)"
           @keydown.esc="cancel"
           @blur="cancel"
-          @click:append="add($event, newValue)"
-          @update:error="(err) => (isNewValid = !err)"
-          append-icon="mdi-check"
+          append-inner-icon="mdi-check"
           :style="{ width: `${inputWidth}px` }"
+          class="py-0"
         />
       </div>
     </div>
-    <v-btn
+    <VcsButton
       v-if="hasScrollbar"
-      :dense="isDense"
-      x-small
-      icon
-      :ripple="false"
-      elevation="0"
+      icon="mdi-chevron-right"
       @click="vcsChipArrayInput.scrollLeft += scrollDx"
-    >
-      <v-icon>mdi-chevron-right</v-icon>
-    </v-btn>
+    />
   </div>
 </template>
 
@@ -114,63 +95,51 @@
   .hide-scrollbar::-webkit-scrollbar {
     display: none;
   }
-  .v-chip {
-    display: flex;
-    max-width: 260px;
-    padding: 0 8px;
-    .v-chip__content {
-      display: flex;
-    }
+  .v-chip.v-chip--size-small {
+    --v-chip-height: calc(var(--v-vcs-item-height) - 8px);
   }
-  .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;
-      }
-    }
+  :deep(.v-icon--size-x-small) {
+    font-size: 18px;
+  }
+  .row-gap {
+    row-gap: 8px !important;
   }
 </style>
 
 <script>
-  import { computed, nextTick, onMounted, ref } from 'vue';
-  import { VBtn, VChip, VIcon } from 'vuetify/lib';
+  import { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+  import { VChip, VIcon } from 'vuetify/components';
+  import { v4 as uuid } from 'uuid';
+  import { usePadding } from '../composables.js';
+  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import VcsButton from '../buttons/VcsButton.vue';
   import VcsTextField from './VcsTextField.vue';
+  import { removeListenersFromAttrs } from '../attrsHelpers.js';
 
   /**
    * @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 {T[]} modelValue
    * @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.
+   * @vue-prop {number}                                 [inputWidth=75] - Width of the text fields in px.
    */
   export default {
     name: 'VcsChipArrayInput',
     components: {
-      VBtn,
+      VcsButton,
       VcsTextField,
       VChip,
       VIcon,
     },
     props: {
-      value: {
+      modelValue: {
         type: Array,
-        required: true,
-      },
-      tooltipPosition: {
-        type: String,
-        default: 'right',
+        default: () => [],
       },
       deletableChips: {
         type: Boolean,
@@ -178,7 +147,7 @@
       },
       inputWidth: {
         type: Number,
-        default: 50,
+        default: 75,
       },
       disabled: {
         type: Boolean,
@@ -193,27 +162,14 @@
         default: 20,
       },
     },
+    emits: ['update:modelValue'],
     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) {
@@ -226,25 +182,68 @@
 
       onMounted(() => updateHasScrollbar());
 
+      function isValid(value) {
+        if (attrs.rules) {
+          return !attrs.rules.some((r) => {
+            if (typeof r === 'function') {
+              return r(value) !== true;
+            }
+            return r !== true;
+          });
+        }
+        return true;
+      }
+
+      function parseValue(value) {
+        return attrs.type === 'number' ? parseFloat(value) : value;
+      }
+
+      function mapModelValue(modelValue) {
+        return modelValue.map((value) => ({
+          key: uuid(),
+          value: parseValue(value),
+        }));
+      }
+
+      function emitValue(value) {
+        emit(
+          'update:modelValue',
+          value.map((i) => i.value),
+        );
+      }
+
+      const localValue = shallowRef(mapModelValue(props.modelValue));
+
+      watch(
+        () => props.modelValue,
+        () => {
+          localValue.value = mapModelValue(props.modelValue);
+        },
+      );
+
       function remove(index) {
-        emitValue(props.value.toSpliced(index, 1));
+        localValue.value.splice(index, 1);
+        emitValue(localValue.value);
         updateHasScrollbar();
       }
 
       function select(index) {
         if (!props.disabled) {
           selected.value = index;
-          editValue.value = props.value[index];
+          editValue.value = localValue.value[index].value;
         }
       }
 
       function submitChange(e) {
         e.stopPropagation();
         e.preventDefault();
-        if (isEditValid.value) {
-          emitValue(props.value.toSpliced(selected.value, 1, editValue.value));
-          selected.value = -1;
+        const value = parseValue(editValue.value);
+        if (!isValid(value)) {
+          return;
         }
+        localValue.value[selected.value].value = value;
+        emitValue(localValue.value);
+        selected.value = -1;
       }
 
       function cancel() {
@@ -252,31 +251,42 @@
         adding.value = false;
       }
 
-      async function add(e, value) {
+      async function add(e, v) {
         e.stopPropagation();
         e.preventDefault();
-        if (isNewValid.value) {
-          if (value) {
-            emitValue([...props.value, value]);
-            await nextTick();
-            updateHasScrollbar();
-            await nextTick();
-            vcsChipArrayInput.value.scrollLeft =
-              vcsChipArrayInput.value.scrollWidth;
+
+        if (v) {
+          const value = parseValue(v);
+          if (!isValid(value)) {
+            return;
           }
-          newValue.value = undefined;
-          adding.value = true;
+          localValue.value.push({
+            key: uuid(),
+            value,
+          });
+          emitValue(localValue.value);
+          await nextTick();
+          updateHasScrollbar();
+          await nextTick();
+          vcsChipArrayInput.value.scrollLeft =
+            vcsChipArrayInput.value.scrollWidth;
         }
+        newValue.value = undefined;
+        adding.value = true;
       }
 
+      const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
+
+      const paddingProvided = usePadding(attrs);
+
       return {
+        paddingProvided,
+        localValue,
+        noListenerAttrs,
         selected,
         adding,
         editValue,
-        isEditValid,
         newValue,
-        isNewValid,
-        isDense,
         vcsChipArrayInput,
         hasScrollbar,
         remove,
@@ -284,6 +294,7 @@
         submitChange,
         add,
         cancel,
+        useItemHeight,
       };
     },
   };

package/src/components/form-inputs-controls/VcsChipArrayInput.vue.d.ts

@@ -1,11 +1,7 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ArrayConstructor;
-        required: true;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
+        default: () => never[];
     };
     deletableChips: {
         type: BooleanConstructor;
@@ -28,28 +24,25 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
 }, {
+    paddingProvided: import("vue").ComputedRef<boolean>;
+    localValue: import("vue").ShallowRef<any>;
+    noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
     selected: import("vue").Ref<number>;
     adding: import("vue").Ref<boolean>;
     editValue: import("vue").Ref<undefined>;
-    isEditValid: import("vue").Ref<boolean>;
     newValue: import("vue").Ref<undefined>;
-    isNewValid: import("vue").Ref<boolean>;
-    isDense: import("vue").ComputedRef<boolean>;
     vcsChipArrayInput: import("vue").Ref<any>;
     hasScrollbar: import("vue").Ref<any>;
     remove: (index: any) => void;
     select: (index: any) => void;
     submitChange: (e: any) => void;
-    add: (e: any, value: any) => Promise<void>;
+    add: (e: any, v: any) => Promise<void>;
     cancel: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    useItemHeight: typeof useItemHeight;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ArrayConstructor;
-        required: true;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
+        default: () => never[];
     };
     deletableChips: {
         type: BooleanConstructor;
@@ -71,12 +64,15 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
-    tooltipPosition: string;
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
-    column: boolean;
+    modelValue: unknown[];
     deletableChips: boolean;
     inputWidth: number;
+    column: boolean;
     scrollDx: number;
-}>;
+}, {}>;
 export default _default;
+import { useItemHeight } from '../../vuePlugins/vuetify.js';