@nuxt/ui 2.9.0 → 2.11.0

package/dist/runtime/components/elements/ButtonGroup.mjs

@@ -1,12 +1,14 @@
-import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
+import { h, computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI.mjs";
 import { mergeConfig, getSlotsChildren } from "../../utils/index.mjs";
+import { useProvideButtonGroup } from "../../composables/useButtonGroup.mjs";
 import appConfig from "#build/app.config";
 import { button, buttonGroup } from "#ui/ui.config";
 const buttonConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
 const buttonGroupConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup);
 export default defineComponent({
+  name: "ButtonGroup",
   inheritAttrs: false,
   props: {
     size: {
@@ -35,36 +37,6 @@ export default defineComponent({
   setup(props, { slots }) {
     const { ui, attrs } = useUI("buttonGroup", toRef(props, "ui"), buttonGroupConfig);
     const children = computed(() => getSlotsChildren(slots));
-    const rounded = computed(() => {
-      const roundedMap = {
-        "rounded-none": { horizontal: { left: "rounded-s-none", right: "rounded-e-none" }, vertical: { top: "rounded-t-none", bottom: "rounded-b-none" } },
-        "rounded-sm": { horizontal: { left: "rounded-s-sm", right: "rounded-e-sm" }, vertical: { top: "rounded-t-sm", bottom: "rounded-b-sm" } },
-        rounded: { horizontal: { left: "rounded-s", right: "rounded-e" }, vertical: { top: "rounded-t", bottom: "rounded-b" } },
-        "rounded-md": { horizontal: { left: "rounded-s-md", right: "rounded-e-md" }, vertical: { top: "rounded-t-md", bottom: "rounded-b-md" } },
-        "rounded-lg": { horizontal: { left: "rounded-s-lg", right: "rounded-e-lg" }, vertical: { top: "rounded-t-lg", bottom: "rounded-b-lg" } },
-        "rounded-xl": { horizontal: { left: "rounded-s-xl", right: "rounded-e-xl" }, vertical: { top: "rounded-t-xl", bottom: "rounded-b-xl" } },
-        "rounded-2xl": { horizontal: { left: "rounded-s-2xl", right: "rounded-e-2xl" }, vertical: { top: "rounded-t-2xl", bottom: "rounded-b-2xl" } },
-        "rounded-3xl": { horizontal: { left: "rounded-s-3xl", right: "rounded-e-3xl" }, vertical: { top: "rounded-t-3xl", bottom: "rounded-b-3xl" } },
-        "rounded-full": { horizontal: { left: "rounded-s-full", right: "rounded-e-full" }, vertical: { top: "rounded-t-full", bottom: "rounded-b-full" } }
-      };
-      return roundedMap[ui.value.rounded][props.orientation];
-    });
-    const clones = computed(() => children.value.map((node, index) => {
-      const vProps = {};
-      if (props.size) {
-        vProps.size = props.size;
-      }
-      vProps.ui = node.props?.ui || {};
-      vProps.ui.rounded = "rounded-none";
-      vProps.ui.base = "!shadow-none";
-      if (index === 0) {
-        vProps.ui.rounded += ` ${rounded.value.left || rounded.value.top}`;
-      }
-      if (index === children.value.length - 1) {
-        vProps.ui.rounded += ` ${rounded.value.right || rounded.value.bottom}`;
-      }
-      return cloneVNode(node, vProps);
-    }));
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper[props.orientation],
@@ -72,6 +44,21 @@ export default defineComponent({
         ui.value.shadow
       ), props.class);
     });
-    return () => h("div", { class: wrapperClass.value, ...attrs.value }, clones.value);
+    const rounded = computed(() => {
+      const roundedMap = {
+        "rounded-none": { horizontal: { start: "rounded-s-none", end: "rounded-e-none" }, vertical: { start: "rounded-t-none", end: "rounded-b-none" } },
+        "rounded-sm": { horizontal: { start: "rounded-s-sm", end: "rounded-e-sm" }, vertical: { start: "rounded-t-sm", end: "rounded-b-sm" } },
+        rounded: { horizontal: { start: "rounded-s", end: "rounded-e" }, vertical: { start: "rounded-t", end: "rounded-b" } },
+        "rounded-md": { horizontal: { start: "rounded-s-md", end: "rounded-e-md" }, vertical: { start: "rounded-t-md", end: "rounded-b-md" } },
+        "rounded-lg": { horizontal: { start: "rounded-s-lg", end: "rounded-e-lg" }, vertical: { start: "rounded-t-lg", end: "rounded-b-lg" } },
+        "rounded-xl": { horizontal: { start: "rounded-s-xl", end: "rounded-e-xl" }, vertical: { start: "rounded-t-xl", end: "rounded-b-xl" } },
+        "rounded-2xl": { horizontal: { start: "rounded-s-2xl", end: "rounded-e-2xl" }, vertical: { start: "rounded-t-2xl", end: "rounded-b-2xl" } },
+        "rounded-3xl": { horizontal: { start: "rounded-s-3xl", end: "rounded-e-3xl" }, vertical: { start: "rounded-t-3xl", end: "rounded-b-3xl" } },
+        "rounded-full": { horizontal: { start: "rounded-s-full", end: "rounded-e-full" }, vertical: { start: "rounded-t-full", end: "rounded-b-full" } }
+      };
+      return roundedMap[ui.value.rounded][props.orientation];
+    });
+    useProvideButtonGroup({ orientation: toRef(props, "orientation"), size: toRef(props, "size"), ui, rounded });
+    return () => h("div", { class: wrapperClass.value, ...attrs.value }, children.value);
   }
 });

package/dist/runtime/components/elements/Chip.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :class="ui.wrapper" v-bind="attrs">
+    <slot />
+
+    <span v-if="show" :class="chipClass">
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed, toRef } from "vue";
+import { twJoin } from "tailwind-merge";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { chip } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.chip, chip);
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: () => config.default.size,
+      validator(value) {
+        return Object.keys(config.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => config.default.color,
+      validator(value) {
+        return ["gray", ...appConfig.ui.colors].includes(value);
+      }
+    },
+    position: {
+      type: String,
+      default: () => config.default.position,
+      validator(value) {
+        return Object.keys(config.position).includes(value);
+      }
+    },
+    text: {
+      type: [String, Number],
+      default: null
+    },
+    inset: {
+      type: Boolean,
+      default: () => config.default.inset
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("chip", toRef(props, "ui"), config, toRef(props, "class"));
+    const chipClass = computed(() => {
+      return twJoin(
+        ui.value.base,
+        ui.value.size[props.size],
+        ui.value.position[props.position],
+        props.inset ? null : ui.value.translate[props.position],
+        ui.value.background.replaceAll("{color}", props.color)
+      );
+    });
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      chipClass
+    };
+  }
+});
+</script>

package/dist/runtime/components/elements/Chip.vue.d.ts

@@ -0,0 +1,90 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    position: {
+        type: PropType<"top-right" | "bottom-right" | "top-left" | "bottom-left">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    text: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    chipClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    position: {
+        type: PropType<"top-right" | "bottom-right" | "top-left" | "bottom-left">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    text: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
+    ui: Partial<any>;
+    color: any;
+    class: any;
+    text: string | number;
+    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
+    inset: boolean;
+    show: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/components/elements/Dropdown.vue

@@ -17,41 +17,48 @@
 
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
-        <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
-          <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-            <HMenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
-              <ULink
-                v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])"
-                :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
-                @click="item.click"
-              >
-                <slot :name="item.slot || 'item'" :item="item">
-                  <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
-                  <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
+        <div>
+          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
+            <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
+                <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
+                  <component
+                    :is="!!href ? 'a' : 'button'"
+                    :href="!itemDisabled ? href : undefined"
+                    :rel="rel"
+                    :target="target"
+                    :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                    @click="onClick($event, item, { href, navigate, close, isExternal })"
+                  >
+                    <slot :name="item.slot || 'item'" :item="item">
+                      <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
+                      <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
-                  <span class="truncate">{{ item.label }}</span>
+                      <span class="truncate">{{ item.label }}</span>
 
-                  <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
-                    <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
-                  </span>
-                </slot>
-              </ULink>
-            </HMenuItem>
-          </div>
-        </HMenuItems>
+                      <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
+                        <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
+                      </span>
+                    </slot>
+                  </component>
+                </HMenuItem>
+              </NuxtLink>
+            </div>
+          </HMenuItems>
+        </div>
       </Transition>
     </div>
   </HMenu>
 </template>
 
 <script>
-import { defineComponent, ref, computed, toRef, onMounted } from "vue";
+import { defineComponent, ref, computed, toRef, onMounted, resolveComponent } from "vue";
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from "@headlessui/vue";
 import { defu } from "defu";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import UKbd from "../elements/Kbd.vue";
-import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
 import { mergeConfig, omit } from "../../utils";
@@ -66,8 +73,7 @@ export default defineComponent({
     HMenuItem,
     UIcon,
     UAvatar,
-    UKbd,
-    ULink
+    UKbd
   },
   inheritAttrs: false,
   props: {
@@ -158,16 +164,30 @@ export default defineComponent({
         closeTimeout = null;
       }, props.closeDelay);
     }
+    function onClick(e, item, { href, navigate, close, isExternal }) {
+      if (item.click) {
+        item.click(e);
+      }
+      if (href && !isExternal) {
+        navigate(e);
+        close();
+      }
+    }
+    const NuxtLink = resolveComponent("NuxtLink");
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       containerStyle,
       onMouseOver,
       onMouseLeave,
-      omit
+      onClick,
+      omit,
+      NuxtLink
     };
   }
 });

package/dist/runtime/components/elements/Dropdown.vue.d.ts

@@ -40,6 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
@@ -51,7 +52,14 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
+    onClick: (e: any, item: any, { href, navigate, close, isExternal }: {
+        href: any;
+        navigate: any;
+        close: any;
+        isExternal: any;
+    }) => void;
     omit: typeof omit;
+    NuxtLink: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<DropdownItem[][]>;

package/dist/runtime/components/elements/Icon.vue

@@ -1,15 +1,29 @@
 <template>
-  <span :class="name" />
+  <Icon v-if="dynamic" :name="name" />
+  <span v-else :class="name" />
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
+import { useAppConfig } from "#imports";
 export default defineComponent({
   props: {
     name: {
       type: String,
       required: true
+    },
+    dynamic: {
+      type: Boolean,
+      default: false
     }
+  },
+  setup(props) {
+    const appConfig = useAppConfig();
+    const dynamic = computed(() => props.dynamic || appConfig.ui?.icons?.dynamic);
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      dynamic
+    };
   }
 });
 </script>

package/dist/runtime/components/elements/Icon.vue.d.ts

@@ -3,10 +3,22 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dynamic: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    dynamic: import("vue").ComputedRef<any>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}, {}>;
+    dynamic: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    dynamic: boolean;
+}, {}>;
 export default _default;

package/dist/runtime/components/elements/Kbd.vue.d.ts

@@ -1,11 +1,12 @@
 import type { PropType } from 'vue';
+import type { KbdSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     value: {
         type: StringConstructor;
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<KbdSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -29,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<KbdSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -42,9 +43,9 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    size: KbdSize;
     ui: Partial<any>;
-    class: any;
     value: string;
-    size: string | number | symbol;
+    class: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Link.vue

@@ -4,7 +4,7 @@
     v-if="!to"
     :disabled="disabled"
     v-bind="$attrs"
-    :class="inactiveClass"
+    :class="active ? activeClass : inactiveClass"
   >
     <slot />
   </component>
@@ -21,7 +21,7 @@
       :role="disabled ? 'link' : undefined"
       :rel="rel"
       :target="target"
-      :class="resolveLinkClass(route, $route, { isActive, isExactActive })"
+      :class="active ? activeClass : resolveLinkClass(route, $route, { isActive, isExactActive })"
       @click="(e) => !isExternal && navigate(e)"
     >
       <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
@@ -68,9 +68,6 @@ export default defineComponent({
   },
   setup(props) {
     function resolveLinkClass(route, $route, { isActive, isExactActive }) {
-      if (props.active) {
-        return props.activeClass;
-      }
       if (props.exactQuery && !isEqual(route.query, $route.query)) {
         return props.inactiveClass;
       }

package/dist/runtime/components/elements/Meter.vue

@@ -0,0 +1,166 @@
+<template>
+  <div :class="ui.wrapper" v-bind="attrs">
+    <template v-if="indicator || $slots.indicator">
+      <slot name="indicator" v-bind="{ percent, value }">
+        <div :class="indicatorContainerClass" :style="{ width: `${percent}%` }">
+          <div :class="indicatorClass">
+            {{ Math.round(percent) }}%
+          </div>
+        </div>
+      </slot>
+    </template>
+
+    <meter
+      :value="value"
+      :min="normalizedMin"
+      :max="normalizedMax"
+      :class="[meterClass, meterAppearanceClass, meterBarClass]"
+    />
+
+    <template v-if="label || $slots.label">
+      <slot name="label" v-bind="{ percent, value }">
+        <div :class="labelClass">
+          <UIcon v-if="icon" :name="icon" /> {{ label }}
+        </div>
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, toRef } from "vue";
+import { twJoin } from "tailwind-merge";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { meter } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.meter, meter);
+export default defineComponent({
+  inheritAttrs: false,
+  slots: Object,
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    indicator: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: () => config.default.size,
+      validator(value) {
+        return Object.keys(config.meter.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => config.default.color,
+      validator(value) {
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
+      }
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("meter", toRef(props, "ui"), config, toRef(props, "class"));
+    function clampPercent(value, min, max) {
+      if (min == max) {
+        return value < min ? 0 : 100;
+      }
+      if (min > max) {
+        max = [min, min = max][0];
+      }
+      const percent2 = (value - min) / (max - min) * 100;
+      return Math.max(0, Math.min(100, percent2));
+    }
+    const indicatorContainerClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.container
+      );
+    });
+    const indicatorClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.text,
+        ui.value.indicator.size[props.size]
+      );
+    });
+    const meterClass = computed(() => {
+      return twJoin(
+        ui.value.meter.base,
+        ui.value.meter.background,
+        ui.value.meter.ring,
+        ui.value.meter.rounded,
+        ui.value.meter.shadow,
+        ui.value.color[props.color] ?? ui.value.meter.color.replaceAll("{color}", props.color),
+        ui.value.meter.size[props.size]
+      );
+    });
+    const meterAppearanceClass = computed(() => {
+      return twJoin(
+        ui.value.meter.appearance.inner,
+        ui.value.meter.appearance.meter,
+        ui.value.meter.appearance.bar,
+        ui.value.meter.appearance.value
+      );
+    });
+    const meterBarClass = computed(() => {
+      return twJoin(
+        ui.value.meter.bar.transition,
+        ui.value.meter.bar.ring,
+        ui.value.meter.bar.rounded,
+        ui.value.meter.bar.size[props.size]
+      );
+    });
+    const labelClass = computed(() => {
+      return twJoin(
+        ui.value.label.base,
+        ui.value.label.text,
+        ui.value.color[props.color] ?? ui.value.label.color.replaceAll("{color}", props.color),
+        ui.value.label.size[props.size]
+      );
+    });
+    const normalizedMin = computed(() => props.min > props.max ? props.max : props.min);
+    const normalizedMax = computed(() => props.max < props.min ? props.min : props.max);
+    const percent = computed(() => clampPercent(Number(props.value), normalizedMin.value, normalizedMax.value));
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      indicatorContainerClass,
+      indicatorClass,
+      meterClass,
+      meterAppearanceClass,
+      meterBarClass,
+      labelClass,
+      normalizedMin,
+      normalizedMax,
+      percent
+    };
+  }
+});
+</script>