@vcmap/ui 5.3.2 → 6.0.0-rc.1

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

@@ -29,11 +29,12 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    open: any;
-    showContent: import("vue").ComputedRef<any>;
+    open: import("vue").Ref<boolean>;
+    showContent: import("vue").ComputedRef<boolean>;
     showHelp: import("vue").ComputedRef<boolean>;
     actions: import("vue").ComputedRef<VcsAction>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    useItemHeight: typeof useItemHeight;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: StringConstructor;
         default: undefined;
@@ -71,5 +72,6 @@ declare const _default: import("vue").DefineComponent<{
     expandable: boolean;
     startOpen: boolean;
     helpText: string;
-}>;
+}, {}>;
 export default _default;
+import { useItemHeight } from '../../vuePlugins/vuetify.js';

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

@@ -3,13 +3,8 @@
     :htmlFor="htmlFor"
     class="vcs-label"
     :class="{
-      'vcs-label-dense': dense,
       'vcs-label-required': required,
-      'px-1': dense,
-      'px-2': !dense,
       'vcs-label-disabled': disabled,
-      'theme--dark': $vuetify.theme.dark,
-      'theme--light': !$vuetify.theme.dark,
     }"
   >
     <slot />
@@ -17,36 +12,25 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '../../styles/vcsGrid.scss';
-  @import '../../styles/vcsFont';
-  @import '../../styles/shades.scss';
-
   .vcs-label {
-    font-size: $vcs-font-size;
-    line-height: $line-height-base;
-  }
-  .vcs-label-dense {
-    line-height: $line-height-dense;
+    display: flex;
+    align-items: center;
+    height: var(--v-vcs-item-height);
+    font-size: var(--v-vcs-font-size);
   }
   .vcs-label-required:after {
     content: ' *';
-    color: var(--v-error-base);
+    color: rgb(var(--v-theme-error));
   }
   .vcs-label-disabled {
-    &.theme--dark {
-      color: rgba(map-get($shades, 'white'), 0.5);
-    }
-    &.theme--light {
-      color: rgba(map-get($shades, 'black'), 0.3);
-    }
+    opacity: var(--v-disabled-opacity);
   }
 </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.
+   * Pass the label text as innerHtml.
+   * @vue-prop {string} htmlFor - an id reference the label is meant for.
    * @vue-prop {boolean} [required=false] - Marks an input field as required by adding an asterisk after the label.
    * @vue-prop {boolean} [disabled=false] - Marks an input field as disabled by adding transparency to the label.
    */
@@ -57,10 +41,6 @@
         type: String,
         default: undefined,
       },
-      dense: {
-        type: Boolean,
-        default: true,
-      },
       required: {
         type: Boolean,
         default: false,

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

@@ -3,10 +3,6 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    dense: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -15,15 +11,11 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     htmlFor: {
         type: StringConstructor;
         default: undefined;
     };
-    dense: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -34,8 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     disabled: boolean;
-    dense: boolean;
     required: boolean;
     htmlFor: string;
-}>;
+}, {}>;
 export default _default;

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

@@ -1,98 +1,67 @@
 <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>
+  <v-radio-group v-bind="{ ...$attrs }" ref="radioGroup">
+    <v-radio
+      v-for="(item, idx) in items"
+      :id="`${$.uid}-${idx}`"
+      :key="`${$.uid}-${idx}`"
+      :value="item[itemValue] ?? item"
+      :disabled="$attrs.disabled ?? item.disabled ?? false"
+      :color="item?.color ?? undefined"
+      :error="!!errorTooltip"
+      :class="{
+        'flex-column': labelPosition !== 'right',
+        'label-top': labelPosition === 'top',
+      }"
+    >
+      <template #label>
+        <slot name="label" :item="item" :error="!!errorTooltip">
+          <span :html-for="`${$.uid}-${idx}`">
+            {{ $st(item.label ?? item) }}
+          </span>
+        </slot>
+      </template>
+    </v-radio>
+    <template #message="{ message }">
+      <v-tooltip
+        ref="errorTooltip"
+        :activator="radioGroup"
+        :model-value="true"
+        v-if="message"
+        :text="message"
+        content-class="bg-error"
+        :location="tooltipPosition"
+      />
     </template>
-  </VcsTooltip>
+    <v-tooltip
+      v-if="tooltip && !errorTooltip"
+      :activator="radioGroup"
+      :location="tooltipPosition"
+      :text="tooltip"
+    ></v-tooltip>
+  </v-radio-group>
 </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--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);
+    padding: 4px;
   }
-  .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;
-        }
-      }
-    }
+  // remove ripple effect
+  :deep(.v-selection-control__input::before) {
+    background-color: transparent;
   }
-  .vcs-radio {
-    height: 40px;
-    align-items: center;
-    padding-left: 4px;
+  // remove details
+  :deep(.v-input__details) {
+    display: none;
   }
-  .vcs-radio-dense {
-    height: 32px;
-    align-items: center;
+  // switch input and label order
+  :deep(.label-top > .v-selection-control__wrapper) {
+    order: 2;
   }
 </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';
+  import { ref } from 'vue';
+  import { VRadio, VRadioGroup, VTooltip } from 'vuetify/components';
 
   /**
    * @typedef {Object} VcsRadioItem
@@ -105,45 +74,52 @@
   /**
    * @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.
+   * Provides VTooltip to show passed messages and error messages.
    * @vue-prop {Array<string|VcsRadioItem>} items - A list of options. If strings are provided, the string is used as label and value.
+   * @vue-prop {string} [item-value='value'] - The value used when the component is selected in a group.
+   * @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-data {slot} [#top-label] - A slot to render a label on top of the radio button, e.g. using <img> or <v-icon>. Passes item and error as props
+   * @vue-data {slot} [#label] - A slot to render a label. Passes item and error as props.
    */
   export default {
     name: 'VcsRadio',
+    inheritAttrs: false,
     components: {
-      VcsTooltip,
-      VcsLabel,
+      VTooltip,
       VRadioGroup,
       VRadio,
     },
     props: {
+      items: {
+        type: Array,
+        required: true,
+      },
+      itemValue: {
+        type: String,
+        default: 'value',
+      },
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
       tooltipPosition: {
         type: String,
         default: 'right',
       },
-      items: {
-        type: Array,
-        required: true,
+      labelPosition: {
+        type: String,
+        default: 'right',
       },
     },
-    setup(props, { attrs }) {
+    setup() {
       const radioGroup = ref();
-
-      const errorMessage = useErrorSync(radioGroup);
-      const isDense = computed(() => attrs.dense !== false);
+      const errorTooltip = ref();
 
       return {
         radioGroup,
-        errorMessage,
-        isDense,
+        errorTooltip,
       };
     },
-    model: {
-      event: 'change',
-    },
   };
 </script>

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

@@ -1,28 +1,54 @@
 declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    itemValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
     };
+    labelPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    radioGroup: import("vue").Ref<any>;
+    errorTooltip: import("vue").Ref<any>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: ArrayConstructor;
         required: true;
     };
-}, {
-    radioGroup: 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<{
+    itemValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
     };
-    items: {
-        type: ArrayConstructor;
-        required: true;
+    labelPosition: {
+        type: StringConstructor;
+        default: string;
     };
 }>>, {
+    tooltip: string;
     tooltipPosition: string;
-}>;
+    itemValue: string;
+    labelPosition: string;
+}, {}>;
 export default _default;
 export type VcsRadioItem = {
     label: string;