vueless 0.0.244 → 0.0.246

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.244",
+  "version": "0.0.246",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.44",
+    "@vueless/plugin-vite": "^0.0.45",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

package/ui.button/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UButton from "../ui.button";
 import UIcon from "../ui.image-icon";
@@ -29,50 +29,28 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${args.slotTemplate || allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UButton>
   `,
 });
 
-const VariantsTemplate = (args, { argTypes } = {}) => ({
-  components: { UButton, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UButton, URow, UCol },
   setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
+    return { args, options: argTypes[args.enum].options };
   },
   template: `
-    <URow>
-      <UButton
-        v-for="(variant, index) in variants"
-        v-bind="args"
-        :variant="variant"
-        :label="variant"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UButton, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UButton
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :label="size"
-        :key="index"
-      />
-    </URow>
+    <UCol>
+      <URow>
+        <UButton
+          v-for="(option, index) in options"
+          v-bind="args"
+          :[args.enum]="option"
+          :label="option"
+          :key="index"
+        />
+      </URow>
+    </UCol>
   `,
 });
 
@@ -104,17 +82,17 @@ const ColorTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const variants = VariantsTemplate.bind({});
-variants.args = {};
+export const variants = EnumVariantTemplate.bind({});
+variants.args = { enum: "variant" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const pilled = VariantsTemplate.bind({});
-pilled.args = { pill: true };
+export const pilled = EnumVariantTemplate.bind({});
+pilled.args = { enum: "variant", pill: true };
 
-export const disabled = VariantsTemplate.bind({});
-disabled.args = { disabled: true };
+export const disabled = EnumVariantTemplate.bind({});
+disabled.args = { enum: "variant", disabled: true };
 
 export const noRing = DefaultTemplate.bind({});
 noRing.args = { noRing: true };

package/ui.button-link/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import ULink from "../ui.button-link";
 import UButton from "../ui.button";
@@ -21,7 +21,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { ULink },
+  components: { ULink, UButton },
   setup() {
     const slots = getSlotNames(ULink.name);
 
@@ -29,108 +29,56 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <ULink v-bind="args">
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </ULink>
   `,
 });
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { ULink, URow },
   setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULink
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        :label="color"
-        :key="index"
-      />
-    </URow>
-  `,
-});
+    function getText(value) {
+      return `Link ${value}`;
+    }
 
-const TypesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULink, URow },
-  setup() {
-    return {
-      args,
-      types: argTypes.type.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULink
-        v-for="(type, index) in types"
-        v-bind="args"
-        :label="type"
-        :type="type"
-        :key="index"
-      />
-    </URow>
-  `,
-});
+    let prefixedOptions = argTypes[args.enum].options;
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULink, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
+    if (argTypes[args.enum].name === "size") {
+      prefixedOptions = prefixedOptions.map((option) => getText(option));
+    }
+
+    return { args, options: argTypes[args.enum].options, prefixedOptions };
   },
   template: `
     <URow>
       <ULink
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
-        :label="getText(size)"
+        :[args.enum]="option"
+        :label="prefixedOptions[index]"
         :key="index"
       />
     </URow>
   `,
-  methods: {
-    getText(value) {
-      return `Link ${value}`;
-    },
-  },
-});
-
-const SlotTemplate = (args) => ({
-  components: { UButton, ULink },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ULink>
-      ${args.slotTemplate}
-    </ULink>
-  `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color" };
 
-export const types = TypesTemplate.bind({});
-types.args = {};
+export const types = EnumVariantTemplate.bind({});
+types.args = { enum: "type" };
 
-export const underlined = ColorsTemplate.bind({});
-underlined.args = { underlined: true, dashed: false };
+export const underlined = EnumVariantTemplate.bind({});
+underlined.args = { enum: "color", underlined: true, dashed: false };
 
-export const dashed = ColorsTemplate.bind({});
-dashed.args = { dashed: true };
+export const dashed = EnumVariantTemplate.bind({});
+dashed.args = { enum: "color", dashed: true };
 
 export const url = DefaultTemplate.bind({});
 url.args = { url: "https://storybook.js.org/docs/react/get-started/introduction" };
@@ -150,7 +98,7 @@ disabled.args = { disabled: true };
 export const noRing = DefaultTemplate.bind({});
 noRing.args = { noRing: true };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
     <template #default>

package/ui.button-toggle/index.stories.js

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UToggle from "../ui.button-toggle";
 import UIcon from "../ui.image-icon";
@@ -27,76 +27,26 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UToggle },
-  data() {
-    return {
-      value: "",
-    };
-  },
+  components: { UToggle, UIcon, UToggleItem },
   setup() {
-    return { args, OPTIONS };
-  },
-  template: `
-    <UToggle
-      v-model="value"
-      v-bind="args"
-      :options="OPTIONS"
-    />
-  `,
-});
+    const value = ref("");
 
-const multipleTemplate = (args) => ({
-  components: { UToggle },
-  data() {
-    return {
-      value: [],
-    };
-  },
-  setup() {
-    return { args, OPTIONS };
+    const slots = getSlotNames(UToggle.name);
+
+    return { args, slots, value, OPTIONS };
   },
   template: `
     <UToggle
       v-model="value"
       v-bind="args"
-      multiple
       :options="OPTIONS"
-      name="multipleTemplate"
-    />
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UToggle, URow },
-  setup() {
-    const value = ref("");
-
-    return {
-      args,
-      value,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UToggle
-        v-for="(size, index) in sizes"
-        :key="index"
-        name="sizeTemplate"
-        v-model="value"
-        v-bind="args"
-        :size="size"
-        :label="size"
-        :options="[
-          { value: size + 1, label: size },
-          { value: size + 2, label: size },
-        ]"
-      />
-    </URow>
+    >
+      ${args.slotTemplate || getSlotsFragment()}
+    </UToggle>
   `,
 });
 
-const VariantsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UToggle, URow },
   setup() {
     const value = ref("");
@@ -104,45 +54,27 @@ const VariantsTemplate = (args, { argTypes } = {}) => ({
     return {
       args,
       value,
-      variants: argTypes.variant.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UToggle
-        v-for="(variant, index) in variants"
+        v-for="(option, index) in options"
         :key="index"
-        name="sizeTemplate"
         v-model="value"
         v-bind="args"
-        :variant="variant"
-        :label="variant"
+        :[args.enum]="option"
+        :label="option"
         :options="[
-          { value: variant + 1, label: variant },
-          { value: variant + 2, label: variant },
+          { value: option + 1, label: option },
+          { value: option + 2, label: option },
         ]"
       />
     </URow>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UToggle, UIcon, UToggleItem },
-  setup() {
-    const selected = ref("");
-
-    return {
-      args,
-      selected,
-    };
-  },
-  template: `
-    <UToggle v-bind="args" name="slotTemplate" v-model="selected">
-      ${args.slotTemplate}
-    </UToggle>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   name: "Default",
@@ -161,19 +93,22 @@ label.args = {
   description: "description",
 };
 
-export const sizes = SizesTemplate.bind({});
+export const sizes = EnumVariantTemplate.bind({});
 sizes.args = {
-  name: "sizes",
+  name: "sizeTemplate",
+  enum: "size",
 };
 
-export const variants = VariantsTemplate.bind({});
+export const variants = EnumVariantTemplate.bind({});
 variants.args = {
-  name: "variants",
+  name: "sizeTemplate",
+  enum: "variant",
 };
 
-export const multiple = multipleTemplate.bind({});
+export const multiple = DefaultTemplate.bind({});
 multiple.args = {
-  name: "multiple",
+  name: "multipleTemplate",
+  multiple: true,
 };
 
 export const block = DefaultTemplate.bind({});
@@ -195,7 +130,7 @@ pill.args = {
   separated: true,
 };
 
-export const square = SlotTemplate.bind({});
+export const square = DefaultTemplate.bind({});
 square.args = {
   name: "square",
   variant: "secondary",
@@ -217,7 +152,7 @@ square.args = {
   `,
 };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   name: "slotDefault",
   slotTemplate: `

package/ui.button-toggle-item/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UToggleItem from "../ui.button-toggle-item";
 import UIcon from "../ui.image-icon";
@@ -21,27 +21,15 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UToggleItem },
+  components: { UToggleItem, UIcon },
   setup() {
     const slots = getSlotNames(UToggleItem.name);
 
     return { args, slots };
   },
   template: `
-    <UToggleItem v-bind="args" name="toggle">
-      ${allSlotsFragment}
-    </UToggleItem>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UToggleItem, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UToggleItem v-bind="args" >
-      ${args.slotTemplate}
+    <UToggleItem v-bind="args" name="toggle" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
     </UToggleItem>
   `,
 });
@@ -52,7 +40,7 @@ Default.args = {};
 export const disabled = DefaultTemplate.bind({});
 disabled.args = { disabled: true };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
@@ -64,14 +52,14 @@ slotLeft.args = {
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>
       <UIcon
         name="star"
         color="green"
-       />
+      />
     </template>
   `,
 };

package/ui.container-group/configs/default.config.js

@@ -12,8 +12,22 @@ export default /*tw*/ {
   headerFallback: "flex items-center",
   title: "{UHeader} pr-2",
   underline: "{UDivider} pt-1.5",
+  content: {
+    base: "flex flex-col items-stretch",
+    variants: {
+      gap: {
+        none: "gap-0",
+        xs: "gap-8",
+        sm: "gap-10",
+        md: "gap-12",
+        lg: "gap-14",
+        xl: "gap-16",
+      },
+    },
+  },
   defaultVariants: {
-    upperlined: true,
+    gap: "md",
+    upperlined: false,
     underlined: false,
   },
 };

package/ui.container-group/index.stories.js

@@ -60,12 +60,23 @@ upperlined.args = { upperlined: false, underlined: true };
 export const underlined = DefaultTemplate.bind({});
 underlined.args = { upperlined: true, underlined: false };
 
+export const nestedGroups = DefaultTemplate.bind({});
+nestedGroups.args = {
+  title: "",
+  slotTemplate: `
+    <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
+      <UCol>
+        <UInput placeholder="input" label="Label" />
+        <UInput placeholder="input" label="Label" />
+      </UCol>
+    </UGroup>
+  `,
+};
+
 export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
-    <template #default>
-      <UInput placeholder="placeholder" label="Label" />
-    </template>
+    <UInput placeholder="placeholder" label="Label" />
   `,
 };
 slotDefault.parameters = {
@@ -79,10 +90,10 @@ slotDefault.parameters = {
 export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
-    ${defaultTemplate}
     <template #right>
       <UButton size="sm" label="Edit"/>
     </template>
+    ${defaultTemplate}
   `,
 };
 slotRight.parameters = {

package/ui.container-group/index.vue

@@ -24,8 +24,10 @@
       <UDivider v-if="underlined" size="xl" v-bind="underlineAttrs" />
     </template>
 
-    <!-- @slot Use it to add something inside. -->
-    <slot />
+    <div v-bind="contentAttrs">
+      <!-- @slot Use it to add something inside. -->
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -50,6 +52,15 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * The distance between nested elements.
+   * @values none, xs, sm, md, lg, xl
+   */
+  gap: {
+    type: String,
+    default: UIService.get(defaultConfig, UGroup).default.gap,
+  },
+
   /**
    * Show line above the header.
    */
@@ -90,5 +101,6 @@ const {
   titleAttrs,
   upperlineAttrs,
   underlineAttrs,
+  contentAttrs,
 } = useAttrs(props);
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.244",
+  "version": "0.0.246",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3645,6 +3645,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "gap",
+              "description": "The distance between nested elements.",
+              "value": {
+                "kind": "expression",
+                "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+              },
+              "default": "md"
+            },
             {
               "name": "upperlined",
               "description": "Show line above the header.",
@@ -3652,7 +3661,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "true"
+              "default": "false"
             },
             {
               "name": "underlined",
@@ -3709,58 +3718,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "UGroups",
-          "description": "",
-          "attributes": [
-            {
-              "name": "gap",
-              "description": "The distance between nested elements.",
-              "value": {
-                "kind": "expression",
-                "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
-              },
-              "default": "md"
-            },
-            {
-              "name": "align",
-              "description": "Nested items align (flex align-items).",
-              "value": {
-                "kind": "expression",
-                "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
-              },
-              "default": "start"
-            },
-            {
-              "name": "config",
-              "description": "Component ui config object.",
-              "value": {
-                "kind": "expression",
-                "type": "object"
-              },
-              "default": "{}"
-            },
-            {
-              "name": "dataCy",
-              "description": "Data-cy attribute for automated testing.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Use it to add something inside."
-            }
-          ],
-          "source": {
-            "module": "./src/ui.container-groups/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "UHeader",
           "description": "",

package/ui.container-groups/Docs.mdx

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
-
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
-
-<Meta of={stories} />
-<Title of={stories} />
-<Subtitle of={stories} />
-<Description of={stories} />
-<Primary of={stories}  />
-<Controls of={stories.Default} />
-<Stories of={stories} />
-
-## Default config
-<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-groups/composables/attrs.composable.js

@@ -1,33 +0,0 @@
-import { computed } from "vue";
-
-import { cva } from "../../service.ui";
-import useUI from "../../composable.ui";
-import defaultConfig from "../configs/default.config";
-
-export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
-  const attrs = {};
-
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
-          ...props,
-        });
-      }
-
-      return "";
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
-
-  return {
-    ...attrs,
-    config,
-  };
-}

package/ui.container-groups/configs/default.config.js

@@ -1,26 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: "flex flex-col",
-    variants: {
-      gap: {
-        none: "space-y-0",
-        xs: "space-y-10",
-        sm: "space-y-12",
-        md: "space-y-14",
-        lg: "space-y-16",
-        xl: "space-y-20",
-      },
-      align: {
-        end: "items-end",
-        start: "items-start",
-        center: "items-center",
-        stretch: "items-stretch",
-        baseline: "items-baseline",
-      },
-    },
-  },
-  defaultVariants: {
-    gap: "md",
-    align: "start",
-  },
-};

package/ui.container-groups/constants/index.js

@@ -1,5 +0,0 @@
-/*
-  This const is needed to prevent the issue in script setup:
- `defineProps` is referencing locally declared variables. (vue/valid-define-props)
- */
-export const UGroups = "UGroups";

package/ui.container-groups/index.stories.js

@@ -1,52 +0,0 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
-
-import UGroups from "../ui.container-groups";
-import UGroup from "../ui.container-group";
-import UCol from "../ui.container-col";
-import UInput from "../ui.form-input";
-
-/**
- * The `UGroups` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-groups)
- */
-export default {
-  id: "5040",
-  title: "Containers / Groups",
-  component: UGroups,
-  args: {},
-  argTypes: {
-    ...getArgTypes(UGroups.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        iframeHeight: 760,
-      },
-    },
-  },
-};
-
-const defaultTemplate = `
-  <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
-    <UCol>
-      <UInput placeholder="input" label="Label" />
-      <UInput placeholder="input" label="Label" />
-    </UCol>
-  </UGroup>
-`;
-
-const DefaultTemplate = (args) => ({
-  components: { UGroups, UGroup, UCol, UInput },
-  setup() {
-    const slots = getSlotNames(UGroups.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UGroups v-bind="args">
-      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
-    </UGroups>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.container-groups/index.vue

@@ -1,55 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <!-- @slot Use it to add something inside. -->
-    <slot />
-  </div>
-</template>
-
-<script setup>
-import UIService from "../service.ui";
-
-import { UGroups } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UGroups", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * The distance between nested elements.
-   * @values none, xs, sm, md, lg, xl
-   */
-  gap: {
-    type: String,
-    default: UIService.get(defaultConfig, UGroups).default.gap,
-  },
-
-  /**
-   * Nested items align (flex align-items).
-   * @values start, end, center, stretch, baseline
-   */
-  align: {
-    type: String,
-    default: UIService.get(defaultConfig, UGroups).default.align,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { wrapperAttrs } = useAttrs(props);
-</script>