@vcmap/ui 5.0.0-rc.8 → 5.0.0

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

@@ -0,0 +1,149 @@
+<template>
+  <VcsTooltip
+    :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="isDense"
+          :ripple="false"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
+        >
+          <v-radio
+            v-for="(item, idx) in items"
+            :id="`radio-${idx}`"
+            :key="`radio-${idx}`"
+            :ripple="false"
+            :value="item.value ?? item"
+            :disabled="item.disabled ?? false"
+            class="ma-0"
+            :class="isDense ? 'vcs-radio-dense' : 'vcs-radio'"
+          >
+            <template #label>
+              <VcsLabel :html-for="`radio-${idx}`" :dense="isDense">
+                {{ $t(item.label ?? item) }}
+              </VcsLabel>
+            </template>
+          </v-radio>
+        </v-radio-group>
+      </span>
+    </template>
+  </VcsTooltip>
+</template>
+<style lang="scss" scoped>
+  @import '../../styles/vcsFont.scss';
+  @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-deep {
+        margin-top: 0;
+        padding-top: 0;
+        label.v-label,
+        .v-icon.v-icon {
+          font-size: $vcs-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) {
+          margin-bottom: 0;
+        }
+        .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;
+    align-items: center;
+  }
+</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 { useErrorSync } from './composables.js';
+
+  /**
+   * @typedef {Object} VcsRadioItem
+   * @property {string} label
+   * @property {string} [color='secondary']
+   * @property {any} value
+   * @property {boolean} [disabled=false]
+   */
+
+  /**
+   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify v-radio-group} using
+   * {@link https://vuetifyjs.com/en/api/v-radio/ |vuetify v-radio}.
+   * 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.
+   * @vue-prop {Array<string|VcsRadioItem>} items - A list of options. If strings are provided, the string is used as label and value.
+   */
+  export default {
+    name: 'VcsRadio',
+    components: {
+      VcsTooltip,
+      VcsLabel,
+      VRadioGroup,
+      VRadio,
+    },
+    props: {
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      items: {
+        type: Array,
+        required: true,
+      },
+    },
+    setup(props, { attrs }) {
+      const radioGroup = ref();
+
+      const errorMessage = useErrorSync(radioGroup);
+      const isDense = computed(() => attrs.dense !== false);
+
+      return {
+        radioGroup,
+        errorMessage,
+        isDense,
+      };
+    },
+    model: {
+      event: 'change',
+    },
+  };
+</script>

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

@@ -0,0 +1,175 @@
+<template>
+  <VcsTooltip
+    :tooltip-position="tooltipPosition"
+    :tooltip="errorMessage"
+    color="error"
+    :max-width="200"
+  >
+    <template #activator="{ on, attrs }">
+      <v-container v-on="on" class="py-0" :class="isDense ? 'px-1' : 'px-2'">
+        <v-radio-group
+          ref="radioGroup"
+          hide-details
+          class="vcs-radio-group"
+          :ripple="false"
+          :dense="isDense"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
+        >
+          <v-row no-gutters class="justify-center">
+            <v-col
+              v-for="(item, idx) in items"
+              :key="idx"
+              cols="1"
+              class="mx-2"
+            >
+              <v-row no-gutters>
+                <v-col>
+                  <div
+                    class="d-flex justify-center label-wrapper pt-1"
+                    :class="$attrs.disabled ? 'disabled' : ''"
+                  >
+                    <slot name="label" :value="item[itemValue]" :src="item.src">
+                      <img
+                        :src="item.src"
+                        :alt="item[itemValue]"
+                        class="image"
+                      />
+                    </slot>
+                  </div>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col>
+                  <v-radio
+                    :value="item[itemValue]"
+                    :ripple="false"
+                    class="ma-0"
+                    :class="isDense ? 'vcs-radio-dense' : 'vcs-radio'"
+                    :dense="isDense"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-radio-group>
+      </v-container>
+    </template>
+  </VcsTooltip>
+</template>
+
+<script>
+  import { computed, ref } from 'vue';
+  import { VContainer, VRow, VCol, VRadioGroup, VRadio } from 'vuetify/lib';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useErrorSync } from './composables.js';
+
+  /**
+   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify radio group} which places icons or raster src files above the radio buttons as labels and arranges them in a grid.
+   * @vue-prop {{value: string, src: string}[]} items - The items to be displayed in the grid. The src is the path to the raster image.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {string} itemValue - The key of the provided item objects that contains the value.
+   * @vue-data {slot} [#label] - slot to display labels where the src does not contain a path to an img but e.g. the name of an icon. Then an v-icon can be used in the slot.
+   */
+  export default {
+    name: 'VcsRadioGrid',
+    components: {
+      VContainer,
+      VRow,
+      VCol,
+      VRadioGroup,
+      VRadio,
+      VcsTooltip,
+    },
+    props: {
+      items: {
+        type: Array,
+        required: true,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      itemValue: {
+        type: String,
+        default: 'value',
+      },
+    },
+    setup(props, { attrs }) {
+      const radioGroup = ref();
+
+      const errorMessage = useErrorSync(radioGroup);
+      return {
+        isDense: computed(() => attrs.dense !== false),
+        radioGroup,
+        errorMessage,
+      };
+    },
+    model: {
+      event: 'change',
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  // TODO: scss for radio buttons should be moved to own file.
+  @import '../../styles/vcsFont.scss';
+  @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-deep {
+        margin-top: 0;
+        padding-top: 0;
+        label.v-label,
+        .v-icon.v-icon {
+          font-size: $vcs-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) {
+          margin-bottom: 0;
+        }
+        .v-input--selection-controls__input {
+          margin: 0;
+        }
+        label.v-label.error--text {
+          animation: none;
+        }
+      }
+    }
+  }
+  .vcs-radio {
+    height: 40px;
+    align-items: center;
+  }
+  .vcs-radio-dense {
+    height: 32px;
+    align-items: center;
+  }
+  .image {
+    max-height: 24px;
+    max-width: 24px;
+    height: auto;
+    width: auto;
+  }
+  .label-wrapper {
+    width: 24px;
+  }
+  .disabled {
+    opacity: 0.3;
+  }
+</style>

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

@@ -0,0 +1,211 @@
+<template>
+  <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
+            :dense="isDense"
+            :height="isDense ? 24 : 32"
+            :item-text="(item) => $t(getText(item))"
+            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 }"
+            @focus="focus = true"
+            @blur="focus = false"
+            @mouseover="hover = true"
+            @mouseleave="hover = false"
+          >
+            <template #selection="{ item, index }">
+              <span v-if="index === 0" class="text-truncate w-full">
+                {{ $t(getText(item)) }}
+              </span>
+              <span v-if="index === 1" class="text-no-wrap text-caption">
+                (+{{ $attrs.value.length - 1 }})
+              </span>
+            </template>
+            <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
+              <slot :name="slot" v-bind="scope" />
+            </template>
+          </v-select>
+        </span>
+      </template>
+    </VcsTooltip>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .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;
+      }
+      .v-select__slot {
+        border-bottom: 1px solid var(--v-base-base);
+      }
+    }
+    &.v-text-field--outlined:hover {
+      ::v-deep {
+        fieldset {
+          border: 1px solid currentColor;
+        }
+      }
+    }
+    &.v-input--is-focused:hover,
+    &.v-input--is-focused {
+      ::v-deep {
+        .v-select__slot {
+          border-bottom: 1px solid var(--v-primary-base);
+        }
+      }
+    }
+  }
+</style>
+<script>
+  import { VSelect } from 'vuetify/lib';
+  import { computed, ref } from 'vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useErrorSync } from './composables.js';
+
+  /**
+   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-select/ |vuetify select}.
+   * Translates the items text if it is an i18n string.
+   * 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.
+   * @vue-prop {Function} itemText - A function that is applied to each item and should return the item's text value.
+   * @vue-computed {boolean} isDense - Whether size of select is dense.
+   * @vue-computed {boolean} isOutlined - Select is outlined on either hover, focus or error, if not disabled.
+   */
+  export default {
+    name: 'VcsSelect',
+    components: {
+      VcsTooltip,
+      VSelect,
+    },
+    props: {
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      itemText: {
+        type: Function,
+        default: undefined,
+      },
+    },
+    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/VcsSlider.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-slider
+    class="vcs-slider"
+    :dense="$attrs.dense !== false"
+    hide-details
+    v-bind="{ ...$attrs }"
+    v-on="{ ...$listeners }"
+    :color="$attrs.color || 'base darken-1'"
+    :track-color="$attrs['track-color'] || 'base darken-1'"
+    :thumb-color="$attrs['thumb-color'] || 'base darken-3'"
+  />
+</template>
+<style lang="scss" scoped>
+  @import '../../styles/shades.scss';
+  .vcs-slider {
+    ::v-deep {
+      .v-slider {
+        cursor: pointer;
+        .v-slider__thumb {
+          border: 2px solid;
+          &:before {
+            display: none;
+          }
+        }
+        &.theme--light {
+          .v-slider__thumb {
+            border-color: map-get($shades, 'white') !important;
+          }
+        }
+        &.theme--dark {
+          .v-slider__thumb {
+            border-color: map-get($shades, 'black') !important;
+          }
+        }
+        .v-slider__tick,
+        .v-slider__tick--filled {
+          background-color: var(--v-base-darken1);
+          height: 4px !important;
+          top: calc(50% - 2px) !important;
+        }
+        &.v-slider--vertical {
+          .v-slider__tick,
+          .v-slider__tick--filled {
+            width: 4px !important;
+            height: 2px !important;
+            right: calc(50% - 2px) !important;
+            top: auto !important;
+          }
+        }
+      }
+    }
+    &:not(.v-input--dense) {
+      ::v-deep {
+        .v-slider.v-slider--horizontal {
+          margin-left: 12px;
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+</style>
+<script>
+  import { VSlider } from 'vuetify/lib';
+  /**
+   * @description stylized wrapper around {@link https://v2.vuetifyjs.com/en/components/sliders/#api}.
+   */
+  export default {
+    name: 'VcsSlider',
+    components: {
+      VSlider,
+    },
+  };
+</script>