@vcmap/ui 5.0.0-rc.9 → 5.0.1

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

@@ -1,46 +1,150 @@
 <template>
   <section class="vcs-form-section">
-    <slot name="title">
-      <article class="pa-2 accent">
-        <div class="form-section-header d-flex justify-space-between align-center">
-          <strong class="caption">{{ title }}</strong>
+    <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="titleActions"
-            small
+            :actions="actions"
+            :overflow-count="actionButtonListOverflowCount"
+            class="pa-2"
           />
         </div>
-      </article>
+      </div>
     </slot>
-    <article class="section-content">
+    <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} [#title] - slot to override form section header
+   * @vue-data {slot} [#header] - slot to override form section header
    * @vue-data {slot} [#default] - slot with the section content
-   * @vue-prop {string}   title - Title to be displayed
-   * @vue-prop {Array<VcsAction>}    titleActions - Icons to be displayed on the right side
+   * @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: { VcsActionButtonList },
+    components: {
+      VBtn,
+      VIcon,
+      VcsActionButtonList,
+      VcsHelp,
+    },
     props: {
-      title: {
+      heading: {
         type: String,
         default: undefined,
       },
-      titleActions: {
+      expandable: {
+        type: Boolean,
+        default: false,
+      },
+      startOpen: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      headerActions: {
         type: Array,
-        default: () => ([]),
+        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

@@ -1,26 +1,40 @@
 <template>
-  <label :htmlFor="htmlFor" class="vcs-label" :class="{'vcs-label-dense': dense}">
+  <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: $base-font-size;
-  line-height: $line-height-base;
-}
-.vcs-label-dense {
-  line-height: $line-height-dense;
-}
+  @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',
@@ -33,6 +47,10 @@
         type: Boolean,
         default: true,
       },
+      required: {
+        type: Boolean,
+        default: false,
+      },
     },
   };
 </script>

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>