vueless 0.0.247 → 0.0.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.247",
+  "version": "0.0.249",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.data-list/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDataList from "../ui.data-list";
 import UIcon from "../ui.image-icon";
@@ -42,39 +42,21 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDataList },
+  components: { UDataList, UIcon, URow },
   setup() {
-    const slots = getSlotNames(UDataList.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UDataList v-bind="args" @dragSort="onDragSort">
-      ${allSlotsFragment}
-    </UDataList>
-  `,
-  methods: {
-    onDragSort(value) {
+    function onDragSort(value) {
       this.list = value;
-    },
-  },
-});
+    }
 
-const SlotTemplate = (args) => ({
-  components: { UDataList, UIcon, URow },
-  setup() {
-    return { args };
+    const slots = getSlotNames(UDataList.name);
+
+    return { args, slots, onDragSort };
   },
   template: `
     <UDataList v-bind="args" @dragSort="onDragSort">
-      ${args.slotTemplate}
+      ${args.slotTemplate || getSlotsFragment()}
     </UDataList>
   `,
-  methods: {
-    onDragSort(value) {
-      this.list = value;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
@@ -90,7 +72,7 @@ emptyState.args = {
 export const nesting = DefaultTemplate.bind({});
 nesting.args = { nesting: true };
 
-export const slotLabel = SlotTemplate.bind({});
+export const slotLabel = DefaultTemplate.bind({});
 slotLabel.args = {
   slotTemplate: `
     <template #label="{ item }">
@@ -102,7 +84,7 @@ slotLabel.args = {
   `,
 };
 
-export const slotActions = SlotTemplate.bind({});
+export const slotActions = DefaultTemplate.bind({});
 slotActions.args = {
   slotTemplate: `
     <template #actions>

package/ui.data-table/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 import { getRandomId } from "../service.ui";
 
 import UTable from "../ui.data-table";
@@ -157,7 +157,7 @@ function getRow() {
 }
 
 const DefaultTemplate = (args) => ({
-  components: { UTable },
+  components: { UTable, UButton, ULink, UMoney, UBadge, URow },
   setup() {
     const slots = getSlotNames(UTable.name);
 
@@ -168,6 +168,7 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       :rows="itemsData"
     >
+      ${args.slotTemplate || getSlotsFragment()}
     </UTable>
   `,
   computed: {
@@ -195,32 +196,6 @@ const EmptyTemplate = (args) => ({
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UTable, UButton, ULink, UMoney, UBadge, URow },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UTable
-      v-bind="args"
-      :rows="itemsData"
-    >
-      ${args.slotTemplate}
-    </UTable>
-  `,
-  computed: {
-    itemsData() {
-      let rows = [];
-
-      for (let i = 0; i < args.numberOfRows; i++) {
-        rows.push(args.row());
-      }
-
-      return rows;
-    },
-  },
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
@@ -247,7 +222,7 @@ stickyHeader.args = {
   stickyHeader: true,
 };
 
-export const stickyFooter = SlotTemplate.bind({});
+export const stickyFooter = DefaultTemplate.bind({});
 stickyFooter.parameters = STICKY_PARAMETERS;
 stickyFooter.args = {
   numberOfRows: 50,
@@ -281,7 +256,7 @@ DateDividerCustomLabel.args = {
   ],
 };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
     <template #cell-key_3="{value}">
@@ -290,7 +265,7 @@ slotDefault.args = {
   `,
 };
 
-export const slotHeaderActions = SlotTemplate.bind({});
+export const slotHeaderActions = DefaultTemplate.bind({});
 slotHeaderActions.args = {
   numberOfRows: 50,
   stickyHeader: true,
@@ -316,7 +291,7 @@ slotHeaderActions.args = {
   `,
 };
 
-export const slotBeforeFirstRow = SlotTemplate.bind({});
+export const slotBeforeFirstRow = DefaultTemplate.bind({});
 slotBeforeFirstRow.args = {
   slotTemplate: `
     <template #before-first-row>
@@ -330,7 +305,7 @@ slotBeforeFirstRow.args = {
   `,
 };
 
-export const slotAfterLastRow = SlotTemplate.bind({});
+export const slotAfterLastRow = DefaultTemplate.bind({});
 slotAfterLastRow.args = {
   slotTemplate: `
     <template #after-last-row>
@@ -344,7 +319,7 @@ slotAfterLastRow.args = {
   `,
 };
 
-export const slotFooter = SlotTemplate.bind({});
+export const slotFooter = DefaultTemplate.bind({});
 slotFooter.args = {
   slotTemplate: `
     <template #footer>
@@ -360,7 +335,7 @@ slotFooter.args = {
   `,
 };
 
-export const cellSlots = SlotTemplate.bind({});
+export const cellSlots = DefaultTemplate.bind({});
 cellSlots.args = {
   columns: [
     { key: "link", label: "link" },

package/ui.image-avatar/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UAvatar from "../ui.image-avatar";
 import URow from "../ui.container-row";
@@ -19,94 +19,43 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UAvatar },
   setup() {
-    return { args };
-  },
-  template: `
-    <UAvatar v-bind="args" />
-  `,
-});
+    const slots = getSlotNames(UAvatar.name);
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UCol, URow, UAvatar },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
+    return { args, slots };
   },
   template: `
-    <UCol gap="xl">
-      <URow>
-        <UAvatar
-          v-for="(size, index) in sizes"
-          :key="index"
-          v-bind="args"
-          :size="size"
-          :label="size"
-        />
-      </URow>
-      <URow>
-        <UAvatar
-          v-for="(size, index) in sizes"
-          :key="index"
-          v-bind="args"
-          :size="size"
-          :label="''"
-        />
-      </URow>
-    </UCol>
+    <UAvatar v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UAvatar>
   `,
 });
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCol, URow, UAvatar },
   setup() {
     return {
       args,
-      colors: argTypes.color.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <UCol gap="xl">
       <URow>
         <UAvatar
-          v-for="(color, index) in colors"
-          v-bind="args"
-          :color="color"
-          :key="index"
-          :label="color"
-        />
-      </URow>
-      <URow>
-        <UAvatar
-          v-for="(color, index) in colors"
+          v-for="(option, index) in options"
           :key="index"
           v-bind="args"
-          :color="color"
-          :label="''"
+          :[args.enum]="option"
+          :label="option"
         />
       </URow>
-    </UCol>
-  `,
-});
-
-const RoundedTemplate = (args, { argTypes } = {}) => ({
-  components: { UCol, UAvatar, URow },
-  setup() {
-    return {
-      args,
-      roundedValues: argTypes.rounded.options,
-    };
-  },
-  template: `
-    <UCol>
       <URow>
         <UAvatar
-          v-for="(rounded, index) in roundedValues"
+          v-for="(option, index) in options"
           :key="index"
           v-bind="args"
-          :rounded="rounded"
-          :label="rounded"
+          :[args.enum]="option"
+          :label="''"
         />
       </URow>
     </UCol>
@@ -128,23 +77,23 @@ label.args = { label: "Name Surname", size: "3xl" };
 /**
  * Hold cursor above an avatar to see value.
  */
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
 /**
  * Hold cursor above an avatar to see value.
  */
-export const rounded = RoundedTemplate.bind({});
-rounded.args = { label: "John Doe", color: "orange" };
+export const rounded = EnumVariantTemplate.bind({});
+rounded.args = { enum: "rounded", label: "John Doe", color: "orange" };
 
 /**
  * Hold cursor above an avatar to see value.
  */
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color" };
 
 /**
  * Hold cursor above an avatar to see value.
  */
-export const bordered = ColorsTemplate.bind({});
-bordered.args = { bordered: true };
+export const bordered = EnumVariantTemplate.bind({});
+bordered.args = { enum: "color", bordered: true };

package/ui.image-icon/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UIcon from "../ui.image-icon";
 import URow from "../ui.container-row";
@@ -21,70 +21,31 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UIcon },
   setup() {
-    return { args };
-  },
-  template: `
-    <UIcon v-bind="args"/>
-  `,
-});
+    const slots = getSlotNames(UIcon.name);
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UIcon, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
+    return { args, slots };
   },
   template: `
-    <URow>
-      <UIcon
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        name="close"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UIcon, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UIcon
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        name="close"
-        :key="index"
-      />
-    </URow>
+    <UIcon v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UIcon>
   `,
 });
 
-const VariantsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UIcon, URow },
   setup() {
     return {
       args,
-      variants: argTypes.variant.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UIcon
-        v-for="(variant, index) in variants"
-        :variant="variant"
-        name="close"
+        v-for="(option, index) in options"
         v-bind="args"
+        :[args.enum]="option"
         :key="index"
       />
     </URow>
@@ -94,14 +55,14 @@ const VariantsTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const variants = VariantsTemplate.bind({});
-variants.args = { color: "red" };
+export const variants = EnumVariantTemplate.bind({});
+variants.args = { enum: "variant", color: "red" };
 
 export const tooltip = DefaultTemplate.bind({});
 tooltip.args = { tooltip: "Some text" };
@@ -109,5 +70,5 @@ tooltip.args = { tooltip: "Some text" };
 export const interactive = DefaultTemplate.bind({});
 interactive.args = { interactive: true };
 
-export const pill = ColorsTemplate.bind({});
-pill.args = { pill: true };
+export const pill = EnumVariantTemplate.bind({});
+pill.args = { enum: "color", pill: true };

package/ui.loader/index.stories.js

@@ -1,8 +1,9 @@
 import ULoader from "../ui.loader";
 import URow from "../ui.container-row";
 import UButton from "../ui.button";
+import { ref } from "vue";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 /**
  * The `ULoader` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader)
@@ -22,48 +23,32 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoader },
   setup() {
-    return { args };
-  },
-  template: `
-    <ULoader v-bind="args" />
-  `,
-});
+    const slots = getSlotNames(ULoader.name);
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { ULoader, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
+    return { args, slots };
   },
   template: `
-    <URow class="flex-wrap">
-      <ULoader
-        v-for="(color, index) in colors"
-        :key="index"
-        v-bind="args"
-        :color="color"
-      />
-    </URow>
+    <ULoader v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </ULoader>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { ULoader, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <URow>
+    <URow class="flex-wrap">
       <ULoader
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        :size="size"
+        :[args.enum]="option"
       />
     </URow>
   `,
@@ -72,17 +57,13 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 const LoadingTemplate = (args) => ({
   components: { ULoader, UButton, URow },
   setup() {
-    return { args };
-  },
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-  methods: {
-    toggleLoader() {
-      this.isLoading = !this.isLoading;
-    },
+    function toggleLoader() {
+      isLoading.value = !isLoading.value;
+    }
+
+    const isLoading = ref(false);
+
+    return { args, isLoading, toggleLoader };
   },
   template: `
     <URow>
@@ -95,11 +76,11 @@ const LoadingTemplate = (args) => ({
 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 loading = LoadingTemplate.bind({});
 loading.args = {};

package/ui.loader-rendering/index.stories.js

@@ -4,7 +4,7 @@ import UCol from "../ui.container-col";
 
 import { useLoaderRendering } from "./composables/useLoaderRendering";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 /**
  * The `ULoaderRendering` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-rendering)
@@ -28,10 +28,14 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoaderRendering },
   setup() {
-    return { args };
+    const slots = getSlotNames(ULoaderRendering.name);
+
+    return { args, slots };
   },
   template: `
-    <ULoaderRendering v-bind="args" class="w-full h-full" />
+    <ULoaderRendering v-bind="args" class="w-full h-full">
+      ${args.slotTemplate || getSlotsFragment()}
+    </ULoaderRendering>
   `,
 });
 
@@ -40,12 +44,11 @@ const LoadingTemplate = (args) => ({
   setup() {
     const { loaderRenderingOn, loaderRenderingOff, isLoading } = useLoaderRendering();
 
-    return { args, loaderRenderingOn, loaderRenderingOff, isLoading };
-  },
-  methods: {
-    toggleLoading() {
-      this.isLoading ? this.loaderRenderingOff() : this.loaderRenderingOn();
-    },
+    function toggleLoading() {
+      isLoading.value ? loaderRenderingOff() : loaderRenderingOn();
+    }
+
+    return { args, loaderRenderingOn, loaderRenderingOff, isLoading, toggleLoading };
   },
   template: `
     <UCol align="center" class="pb-4">

package/ui.loader-top/index.stories.js

@@ -7,7 +7,7 @@ import UBadge from "../ui.text-badge";
 import { useLoaderTop } from "./composables/useLoaderTop";
 import { loaderTopOff, loaderTopOn } from "./services/loaderTop.service";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
 /**
  * The `ULoaderTop` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-top)
@@ -26,7 +26,9 @@ const DefaultTemplate = (args) => ({
   setup() {
     const { loaderTopOn, loaderTopOff } = useLoaderTop();
 
-    return { args, loaderTopOn, loaderTopOff };
+    const slots = getSlotNames(ULoaderTop.name);
+
+    return { args, slots, loaderTopOn, loaderTopOff };
   },
   template: `
     <ULoaderTop color="blue" v-bind="args" resources="https://api.publicapis.org/entries"/>
@@ -38,14 +40,14 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { ULoaderTop, UButton, UCol, URow, UBadge },
   setup() {
     return {
       args,
       loaderTopOff,
       loaderTopOn,
-      colors: argTypes.color.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
@@ -55,12 +57,19 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
         <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/images')" />
       </URow>
 
-      <URow align="center" v-for="(color, index) in colors" :key="index">
-        <UBadge :label="color" :color="color" />
+      <URow
+        align="center"
+        v-for="(option, index) in options"
+        :key="index"
+      >
+        <UBadge
+          :label="option"
+          :[args.enum]="option"
+        />
         <ULoaderTop
           resources="https://api.publicapis.org/images"
           class="static"
-          :color="color"
+          :[args.enum]="option"
           v-bind="args"
         />
       </URow>
@@ -72,5 +81,5 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Color = ColorsTemplate.bind({});
-Color.args = {};
+export const Color = EnumVariantTemplate.bind({});
+Color.args = { enum: "color" };

package/ui.other-dot/index.stories.js

@@ -3,7 +3,7 @@ import URow from "../ui.container-row";
 import UCol from "../ui.container-col";
 import UBadge from "../ui.text-badge";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 /**
  * The `UDot` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.other-dot)
@@ -20,44 +20,35 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDot },
   setup() {
-    return { args };
-  },
-  template: `
-    <UDot v-bind="args" />
-  `,
-});
+    const slots = getSlotNames(UDot.name);
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UCol, URow, UDot, UBadge },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
+    return { args, slots };
   },
   template: `
-    <UCol>
-      <URow v-for="(color, index) in colors" :key="index" gap="none" align="center">
-        <UDot v-bind="args" :color="color"/>
-        <UBadge :label="color" :color="color" variant="thirdary" />
-      </URow>
-    </UCol>
+    <UDot v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UDot>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCol, URow, UDot, UBadge },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <UCol>
-      <URow v-for="(size, index) in sizes" :key="index" gap="none" align="center">
-        <UDot v-bind="args" :size="size"/>
-        <UBadge :label="size" variant="thirdary" />
+      <URow
+        v-for="(color, index) in colors"
+        :key="index"
+        gap="none"
+        align="center"
+      >
+        <UDot v-bind="args" :[args.enum]="option"/>
+        <UBadge :label="option" :[args.enum]="option" variant="thirdary" />
       </URow>
     </UCol>
   `,
@@ -66,8 +57,8 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color" };
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };

package/ui.text-alert/configs/default.config.js

@@ -27,7 +27,7 @@ export default /*tw*/ {
     ],
   },
   text: "{UText}",
-  body: "flex items-start justify-between",
+  body: "flex items-baseline justify-between",
   content: "",
   innerWrapper: "flex gap-2",
   title: {

package/ui.text-alert/index.stories.js

@@ -30,7 +30,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UAlert v-bind="args">
-      ${args.slotTemplate || getSlotsFragment(args.defaultTemplate)}
+      ${args.slotTemplate || getSlotsFragment()}
     </UAlert>
   `,
 });
@@ -38,17 +38,16 @@ const DefaultTemplate = (args) => ({
 const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UAlert, UCol },
   setup() {
-    const options = argTypes[args.enum].options;
-    let prefixedOptions = options;
-
-    if (argTypes[args.enum].name === "size") {
-      prefixedOptions = options.map((option) => getText(option));
-    }
-
     function getText(value) {
       return `This is Alert's ${value} size`;
     }
 
+    let prefixedOptions = argTypes[args.enum].options;
+
+    if (argTypes[args.enum].name === "size") {
+      prefixedOptions = prefixedOptions.map((option) => getText(option));
+    }
+
     return { args, options: argTypes[args.enum].options, prefixedOptions };
   },
   template: `
@@ -80,7 +79,7 @@ export const HTML = DefaultTemplate.bind({});
 HTML.args = {
   title: "",
   description: "",
-  defaultTemplate: `
+  slotTemplate: `
     <h3 class="text-lg font-medium mb-2">Important Security Update</h3>
     <p class="mb-0.5">
       <b>Your account password will expire in 10 days,</b> please update it to maintain account security.

package/ui.text-money/index.stories.js

@@ -60,11 +60,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   template: `
     <URow>
       <div class="${COMPONENT_CLASSES}" v-for="(option, index) in options" :key="index">
-        <UMoney v-bind="args" :[args.enum]="option" >
-          <template v-for="(slot) in slots" v-slot:[slot]>
-            <template v-if="args[slot]">{{ args[slot] }}</template>
-          </template>
-        </UMoney>
+        <UMoney v-bind="args" :[args.enum]="option" />
       </div>
     </URow>
   `,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.247",
+  "version": "0.0.249",
   "contributions": {
     "html": {
       "description-markup": "markdown",