@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/application/VcsSettings.vue

@@ -43,13 +43,12 @@
       </v-col>
       <v-col>
         <VcsRadio
-          dense
           :items="[
             { label: 'settings.theme.light', value: false },
             { label: 'settings.theme.dark', value: true },
           ]"
-          v-model="$vuetify.theme.dark"
-          row
+          v-model="themeMode"
+          inline
         />
       </v-col>
     </v-row>
@@ -57,9 +56,10 @@
 </template>
 
 <script>
-  import { ref, inject, onUnmounted, getCurrentInstance, computed } from 'vue';
-  import { VCol, VContainer, VRow } from 'vuetify/lib';
   import { CesiumMap, DisplayQualityLevel } from '@vcmap/core';
+  import { ref, inject, onUnmounted, computed } from 'vue';
+  import { useTheme } from 'vuetify';
+  import { VCol, VContainer, VRow } from 'vuetify/components';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
   import VcsRadio from '../components/form-inputs-controls/VcsRadio.vue';
@@ -91,9 +91,10 @@
           app.locale = value;
         },
       });
-      const vm = getCurrentInstance().proxy;
       const setupI18n = () => {
-        languages.value = [...vm.$i18n.availableLocales];
+        languages.value = [...app.vueI18n.availableLocales].filter((lang) => {
+          return Object.keys(app.vueI18n.getLocaleMessage(lang)).length > 0;
+        });
         if (!languages.value.includes(localLanguage.value)) {
           localLanguage.value = languages.value[0];
         }
@@ -141,6 +142,16 @@
         app.maps.mapActivated.addEventListener(updateIs3D);
       updateIs3D();
 
+      const theme = useTheme();
+      const themeMode = computed({
+        get() {
+          return theme.global.current.value.dark;
+        },
+        set(value) {
+          theme.global.name.value = value ? 'dark' : 'light';
+        },
+      });
+
       onUnmounted(() => {
         localeChangedListener();
         addedListener();
@@ -150,6 +161,7 @@
       });
 
       return {
+        themeMode,
         language,
         languages,
         displaySettings,

package/src/application/VcsSettings.vue.d.ts

@@ -1,7 +1,8 @@
 declare const _default: import("vue").DefineComponent<{}, {
+    themeMode: import("vue").WritableComputedRef<boolean>;
     language: import("vue").WritableComputedRef<string>;
     languages: import("vue").Ref<never[]>;
     displaySettings: import("vue").WritableComputedRef<any>;
     is3D: import("vue").Ref<boolean>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsSplashScreen.vue

@@ -55,7 +55,7 @@
     VCardActions,
     VRow,
     VCol,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import { computed, getCurrentInstance, ref, watch } from 'vue';
   import { parseAndSanitizeMarkdown } from './markdownHelper.js';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';
@@ -95,12 +95,12 @@
       );
       const vm = getCurrentInstance().proxy;
       const splashScreenText = computed(() => {
-        const translatedContent = vm.$t(props.options.content);
+        const translatedContent = vm.$st(props.options.content);
         return parseAndSanitizeMarkdown(translatedContent);
       });
 
       const splashScreenCheckboxText = computed(() => {
-        const translatedContent = vm.$t(props.options.checkBoxText);
+        const translatedContent = vm.$st(props.options.checkBoxText);
         return parseAndSanitizeMarkdown(translatedContent);
       });
 

package/src/application/VcsSplashScreen.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
-    localValue: any;
+    localValue: import("vue").Ref<boolean>;
     exitScreen: () => void;
     splashScreenText: import("vue").ComputedRef<string>;
     splashScreenCheckboxText: import("vue").ComputedRef<string>;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
         maxWidth: any;
         maxHeight: any;
     }>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: BooleanConstructor;
         default: boolean;
@@ -30,5 +30,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     value: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/application/VcsTextPage.vue

@@ -31,7 +31,7 @@
 
 <script>
   import { computed, getCurrentInstance } from 'vue';
-  import { VContainer, VSheet } from 'vuetify/lib';
+  import { VContainer, VSheet } from 'vuetify/components';
   import { parseAndSanitizeMarkdown } from './markdownHelper.js';
 
   /**
@@ -53,7 +53,7 @@
     setup(props) {
       const vm = getCurrentInstance().proxy;
       const markedHtml = computed(() => {
-        const translatedContent = vm.$t(props.content);
+        const translatedContent = vm.$st(props.content);
         return parseAndSanitizeMarkdown(translatedContent);
       });
 

package/src/application/VcsTextPage.vue.d.ts

@@ -1,16 +1,16 @@
 declare const _default: import("vue").DefineComponent<{
     content: {
         type: StringConstructor;
-        default: () => "";
+        default: () => string;
     };
 }, {
     markedHtml: import("vue").ComputedRef<string>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     content: {
         type: StringConstructor;
-        default: () => "";
+        default: () => string;
     };
 }>>, {
     content: string;
-}>;
+}, {}>;
 export default _default;

package/src/application/VcsTextPageFooter.vue

@@ -1,13 +1,13 @@
 <template v-if="textPage.title">
   <VcsTooltip :tooltip="textPage.tooltip">
-    <template #activator="{ on }">
+    <template #activator="{ props }">
       <span
         class="d-inline-block text-truncate mr-10 setmargin"
-        v-on="{ ...$listeners, ...on }"
+        v-bind="{ ...$attrs, ...props }"
       >
         <span v-if="textPage.url" class="imprint-span imprint button">
           <a :href="textPage.url" class="link" target="_blank"
-            >{{ $t(textPage.title) }} <span></span>
+            >{{ $st(textPage.title) }} <span></span>
           </a>
         </span>
 
@@ -15,7 +15,7 @@
           v-else
           class="imprint-span imprint button link"
           @click="addTextPage()"
-          >{{ $t(textPage.title) }}</span
+          >{{ $st(textPage.title) }}</span
         >
       </span>
     </template>

package/src/application/VcsTextPageFooter.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     addTextPage: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     textPage: {
         type: ObjectConstructor;
         default: () => void;
@@ -20,5 +20,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     textPage: Record<string, any>;
-}>;
+}, {}>;
 export default _default;

package/src/application/attributionsHelper.d.ts

@@ -26,10 +26,10 @@ export function mergeAttributions(entries: Array<AttributionEntry>): Array<{
  * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
  * Returns a destroy function to clear listeners.
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<AttributionEntry>>, destroy: function():void}}
+ * @returns {{entries: import("vue").UnwrapRef<Array<AttributionEntry>>, destroy: function():void}}
  */
 export function getAttributions(app: import("../vcsUiApp.js").default): {
-    entries: import("vue").Ref<Array<AttributionEntry>>;
+    entries: import("vue").UnwrapRef<Array<AttributionEntry>>;
     destroy: () => void;
 };
 export namespace Attribution {

package/src/application/attributionsHelper.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { reactive } from 'vue';
 import { ObliqueMap } from '@vcmap/core';
 
 /**
@@ -59,13 +59,13 @@ export function mergeAttributions(entries) {
  * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
  * Returns a destroy function to clear listeners.
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<AttributionEntry>>, destroy: function():void}}
+ * @returns {{entries: import("vue").UnwrapRef<Array<AttributionEntry>>, destroy: function():void}}
  */
 export function getAttributions(app) {
   /**
-   * @type {import("vue").Ref<Array<AttributionEntry>>}
+   * @type {import("vue").UnwrapRef<Array<AttributionEntry>>}
    */
-  const entries = ref([]);
+  const entries = reactive([]);
   /**
    * @type {function():void}
    */
@@ -81,9 +81,9 @@ export function getAttributions(app) {
       return;
     }
     const key = `${object.className}_${object.name}`;
-    const idx = entries.value.findIndex((e) => e.key === key);
+    const idx = entries.findIndex((e) => e.key === key);
     if (idx < 0) {
-      entries.value.push({
+      entries.push({
         key,
         title:
           object.properties?.title ?? `${object.className}: ${object.name}`,
@@ -98,11 +98,11 @@ export function getAttributions(app) {
    * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
    */
   function removeAttributions(object) {
-    const idx = entries.value.findIndex(
+    const idx = entries.findIndex(
       (e) => e.key === `${object.className}_${object.name}`,
     );
     if (idx >= 0) {
-      entries.value.splice(idx, 1);
+      entries.splice(idx, 1);
     }
   }
 
@@ -130,7 +130,7 @@ export function getAttributions(app) {
       return;
     }
     obliqueListener();
-    entries.value.splice(0);
+    entries.splice(0);
     syncAttributions(map);
     [...map.layerCollection].forEach((layer) => {
       if (layer.isSupported(map)) {

package/src/components/ImageElementInjector.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
         })[];
         required: true;
     };
-}, {}, {}, {}, {}, 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<{
     element: {
         type: ({
             new (): HTMLCanvasElement;
@@ -20,5 +20,5 @@ declare const _default: import("vue").DefineComponent<{
         })[];
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/components/attrsHelpers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {Record<string, unknown>} attrs
+ * @returns {Record<string, unknown>}
+ */
+export function removeListenersFromAttrs(attrs: Record<string, unknown>): Record<string, unknown>;

package/src/components/attrsHelpers.js

@@ -0,0 +1,14 @@
+import { is } from '@vcsuite/check';
+
+/**
+ * @param {Record<string, unknown>} attrs
+ * @returns {Record<string, unknown>}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function removeListenersFromAttrs(attrs) {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(
+      ([key, value]) => !(key.startsWith('on') && is(value, Function)),
+    ),
+  );
+}

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="actions.length > 0" :class="classes">
+  <div v-if="actions.length > 0" :class="classes" class="gc-2">
     <template v-if="buttons.length > 0">
       <component
         :is="button"
@@ -13,23 +13,20 @@
         :has-update="btn.hasUpdate"
         :background="btn.background"
         @click.stop="btn.callback($event)"
-        v-bind="{ ...$attrs }"
-        v-on="{ ...$listeners }"
       />
     </template>
     <v-menu
       v-if="overflowButtons.length > 0"
       content-class="vcs-overflow-menu-wrap"
       max-width="none"
-      :nudge-right="13"
-      offset-x
+      location="right"
+      :offset="[13, 0]"
     >
-      <template #activator="{ on, attrs }">
+      <template #activator="{ props }">
         <component
           :is="button"
           :disabled="disabled"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="on"
+          v-bind="props"
           class="d-flex"
         >
           <v-icon>{{ overflowIcon }}</v-icon>
@@ -37,19 +34,10 @@
       </template>
       <VcsActionList :actions="overflowButtons" :disabled="disabled" />
     </v-menu>
-    <v-spacer
-      v-else-if="blockOverflow"
-      class="flex-grow-0 d-inline-block px-2"
-    />
   </div>
 </template>
-<style lang="scss">
-  .action-btn-wrap {
-    gap: 8px;
-  }
-</style>
 <script>
-  import { VIcon, VMenu, VSpacer } from 'vuetify/lib';
+  import { VIcon, VMenu, VSpacer } from 'vuetify/components';
   import VcsButton from './VcsButton.vue';
   import VcsToolButton from './VcsToolButton.vue';
   import VcsFormButton from './VcsFormButton.vue';
@@ -63,7 +51,6 @@
    * @vue-prop {string} [button='VcsButton'] - used button type (one of 'VcsButton', 'VcsToolButton' or 'VcsFormButton)
    * @vue-prop {number} [overflowCount=2] - number of buttons rendered until overflow.
    * @vue-prop {string} [overflowIcon='$vcsKebab'] - optional custom icon for overflow button
-   * @vue-prop {boolean} [blockOverflow=false] - if space for the overflow should be blocked or not (e.g. when rendering lists in a grid)
    * @vue-computed {Array<VcsAction>} buttons - buttons rendered directly, have to provide an icon
    * @vue-computed {Array<VcsAction>} overflowButtons - rest of buttons rendered in overflow
    * @vue-prop {boolean} [disabled=false] - disable all actions
@@ -99,10 +86,6 @@
         type: String,
         default: '$vcsKebab',
       },
-      blockOverflow: {
-        type: Boolean,
-        default: false,
-      },
       disabled: {
         type: Boolean,
         default: false,

package/src/components/buttons/VcsActionButtonList.vue.d.ts

@@ -17,20 +17,16 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    blockOverflow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {
+}, any, any, {
     right(): boolean;
     buttons(): any;
     overflowButtons(): any;
     classes(): string[];
-}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     actions: {
         type: ArrayConstructor;
         required: true;
@@ -49,10 +45,6 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    blockOverflow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -62,7 +54,6 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     overflowCount: number;
     overflowIcon: string;
-    blockOverflow: boolean;
-}>;
+}, {}>;
 export default _default;
 import { validateActions } from '../lists/VcsActionList.vue';

package/src/components/buttons/VcsButton.vue

@@ -1,104 +1,86 @@
 <template>
-  <div class="vcs-button-wrap">
-    <v-btn
-      v-if="!tooltip"
-      text
-      :color="appliedColor"
-      :disabled="disabled"
-      class="vcs-button pa-0"
-      :class="customClasses.join(' ')"
-      :ripple="false"
-      elevation="0"
-      v-bind="{ ...$attrs }"
-      v-on="{ ...$listeners }"
-    >
-      <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+  <v-btn
+    :min-height="minHeight"
+    min-width="auto"
+    variant="text"
+    :color="appliedColor"
+    :disabled="disabled"
+    class="vcsButton"
+    elevation="0"
+    density="compact"
+    size="small"
+    v-bind="{ ...$attrs }"
+  >
+    <template #default="scope">
+      <v-tooltip
+        activator="parent"
+        v-if="tooltip"
+        :text="tooltip"
+        :location="tooltipPosition"
+      />
+      <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
         {{ icon }}
       </v-icon>
-      <slot />
-    </v-btn>
-    <VcsTooltip
-      v-else
-      :tooltip="tooltip"
-      :tooltip-position="tooltipPosition"
-      v-bind="{ ...tooltipProps }"
-    >
-      <template #activator="{ on, attrs }">
-        <v-btn
-          text
-          :color="appliedColor"
-          :disabled="disabled"
-          class="vcs-button pa-0"
-          :class="customClasses.join(' ')"
-          :ripple="false"
-          elevation="0"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
-            {{ icon }}
-          </v-icon>
-          <slot />
-        </v-btn>
-      </template>
-    </VcsTooltip>
-    <VcsBadge v-if="hasUpdate" :color="'warning'" class="position-absolute" />
-  </div>
+      <VcsBadge
+        v-if="hasUpdate"
+        :color="'bg-warning'"
+        class="position-absolute"
+      />
+      <slot name="default" v-bind="scope ?? {}" />
+    </template>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+  </v-btn>
 </template>
 
 <style lang="scss" scoped>
-  .vcs-button-wrap {
-    position: relative;
-    display: inline-block;
-  }
   .badge {
     top: -3px;
     right: -3px;
   }
   .v-btn {
-    &.vcs-button {
-      height: 16px;
-      min-width: auto;
+    padding: 0px;
+    &.vcsButton {
       &:hover {
-        color: var(--v-primary-lighten1) !important;
-      }
-      ::v-deep {
-        .v-icon {
-          font-size: 16px;
-        }
-        .v-icon__component {
-          height: 16px;
-          width: 16px;
-        }
+        color: rgb(var(--v-theme-primary-lighten-1)) !important;
       }
     }
+    &.v-btn--disabled {
+      opacity: var(--v-disabled-opacity);
+    }
+    :deep(.v-btn__loader > .v-progress-circular) {
+      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+    }
+  }
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
   }
 </style>
 
 <script>
-  import { VBtn, VIcon } from 'vuetify/lib';
+  import { computed } from 'vue';
+  import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
+  import { useForwardSlots } from '../composables.js';
 
   /**
-   * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}.
+   * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
    * @vue-prop {boolean}                                active - State of the button. Applies set color or vuetify primary color in active state.
+   * @vue-prop {boolean}                                disabled - Whether button is disabled.
    * @vue-prop {string}                                 color - Passes property to v-btn in case prop active is true.
-   * @vue-prop {boolean}                                disabled
    * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
    * @vue-prop {string}                                 icon - When given, will display an icon in the button. Replaces vuetify icon property.
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
-   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
-   * @vue-prop {string[]}                               [customClasses] - CSS classes to customize style
-   * @vue-computed {string}                             appliedColor - color applied to button, depending on active state
-   * @vue-computed {boolean}                            hasDefaultSlot
-   * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
    */
   export default {
     name: 'VcsButton',
     components: {
-      VcsTooltip,
+      VTooltip,
       VcsBadge,
       VBtn,
       VIcon,
@@ -109,14 +91,14 @@
         type: Boolean,
         default: false,
       },
-      color: {
-        type: String,
-        default: undefined,
-      },
       disabled: {
         type: Boolean,
         default: false,
       },
+      color: {
+        type: String,
+        default: undefined,
+      },
       hasUpdate: {
         type: Boolean,
         default: false,
@@ -133,26 +115,33 @@
         type: String,
         default: 'bottom',
       },
-      tooltipProps: {
-        type: Object,
-        default: () => ({}),
-      },
-      customClasses: {
-        type: Array,
-        default: () => [],
-      },
     },
-    computed: {
-      appliedColor() {
-        if (this.active) {
-          return this.color ? this.color : 'primary';
+    setup(props, { slots }) {
+      const appliedColor = computed(() => {
+        if (props.active && !props.disabled) {
+          return props.color ? props.color : 'primary';
         } else {
           return null;
         }
-      },
-      hasDefaultSlot() {
-        return !!this.$slots?.default?.[0]?.text?.trim();
-      },
+      });
+      const forwardSlots = useForwardSlots(slots, ['default']);
+      const hasDefaultSlot = computed(() => {
+        return !!slots?.default;
+      });
+      const fontSize = useFontSize();
+      const minHeight = computed(() => {
+        return fontSize.value * 1.5;
+      });
+      const iconSize = computed(() => {
+        return fontSize.value * (1.2 + 0.1 / 3);
+      });
+      return {
+        forwardSlots,
+        hasDefaultSlot,
+        appliedColor,
+        iconSize,
+        minHeight,
+      };
     },
   };
 </script>