vueless 0.0.235 → 0.0.237

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

@@ -4,7 +4,7 @@ import URow from "../ui.container-row";
 import DebitIcon from "../ui.text-money/assets/debit.svg?component";
 import CreditIcon from "../ui.text-money/assets/credit.svg?component";
 
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 const COMPONENT_CLASSES = "flex justify-center w-1/6";
 
@@ -26,145 +26,41 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UMoney },
+  components: { UMoney, UIcon },
   setup() {
     const slots = getSlotNames(UMoney.name);
 
-    return { args, slots };
-  },
-  template: `
-    <div class="${COMPONENT_CLASSES}">
-      <UMoney v-bind="args">
-        ${allSlotsFragment}
-      </UMoney>
-    </div>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UMoney, UIcon },
-  setup() {
     const icons = {
       Debit: DebitIcon,
       Credit: CreditIcon,
     };
 
-    return { args, icons };
+    return { args, slots, icons };
   },
   template: `
     <div class="${COMPONENT_CLASSES}">
       <UMoney v-bind="args">
-        ${args.slotTemplate}
+        ${args.slotTemplate || getSlotsFragment()}
       </UMoney>
     </div>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UMoney, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <div class="${COMPONENT_CLASSES}" v-for="(size, index) in sizes" :key="index">
-        <UMoney v-bind="args" :size="size" >
-          <template v-for="(slot) in slots" v-slot:[slot]>
-            <template v-if="args[slot]">{{ args[slot] }}</template>
-          </template>
-        </UMoney>
-      </div>
-    </URow>
-  `,
-});
-
-const WeightTemplate = (args, { argTypes } = {}) => ({
-  components: { UMoney, URow },
-  setup() {
-    return {
-      args,
-      weights: argTypes.weight.options,
-    };
-  },
-  template: `
-    <URow>
-     <div class="${COMPONENT_CLASSES}" v-for="(weight, index) in weights" :key="index">
-        <UMoney v-bind="args" :weight="weight" >
-          <template v-for="(slot) in slots" v-slot:[slot]>
-            <template v-if="args[slot]">{{ args[slot] }}</template>
-          </template>
-        </UMoney>
-      </div>
-    </URow>
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UMoney, URow },
   setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <div class="${COMPONENT_CLASSES}"    v-for="(color, index) in colors" :key="index">
-        <UMoney v-bind="args" :color="color" >
-          <template v-for="(slot) in slots" v-slot:[slot]>
-            <template v-if="args[slot]">{{ args[slot] }}</template>
-          </template>
-        </UMoney>
-      </div>
-    </URow>
-  `,
-  created() {
-    this.mxArgTypes = argTypes;
-  },
-});
-
-const SignsTemplate = (args, { argTypes } = {}) => ({
-  components: { UMoney, URow },
-  setup() {
-    return {
-      args,
-      signs: argTypes.sign.options,
-    };
-  },
-  template: `
-    <URow>
-      <div class="${COMPONENT_CLASSES}" v-for="(sign, index) in signs" :key="index">
-        <UMoney v-bind="args" :sign="sign"  >
-          <template v-for="(slot) in slots" v-slot:[slot]>
-            <template v-if="args[slot]">{{ args[slot] }}</template>
-          </template>
-        </UMoney>
-      </div>
-    </URow>
-  `,
-  created() {
-    this.mxArgTypes = argTypes;
-  },
-});
+    const slots = getSlotNames(UMoney.name);
 
-const SymbolAlignTemplate = (args, { argTypes } = {}) => ({
-  components: { UMoney, URow },
-  setup() {
     return {
       args,
-      symbolsAlign: argTypes.symbolAlign.options,
+      slots,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
-      <div class="${COMPONENT_CLASSES}" v-for="(symbolAlign, index) in symbolsAlign" :key="index">
-        <UMoney
-          v-bind="args"
-          :symbol-align="symbolAlign"
-        >
+      <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>
@@ -177,27 +73,6 @@ const SymbolAlignTemplate = (args, { argTypes } = {}) => ({
   },
 });
 
-const AlignTemplate = (args, { argTypes } = {}) => ({
-  components: { UMoney, URow },
-  setup() {
-    return {
-      args,
-      aligns: argTypes.align.options,
-    };
-  },
-  template: `
-    <URow>
-      <div class="${COMPONENT_CLASSES}" v-for="(align, index) in aligns" :key="index">
-        <UMoney :align="align" v-bind="args" >
-          <template v-for="(slot) in slots" v-slot:[slot]>
-            <template v-if="args[slot]">{{ args[slot] }}</template>
-          </template>
-        </UMoney>
-      </div>
-    </URow>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
@@ -208,24 +83,25 @@ otherValues.args = {
   sign: "negative",
 };
 
-export const colors = ColorsTemplate.bind({});
+export const colors = EnumVariantTemplate.bind({});
 colors.args = {
+  enum: "color",
   sum: 0,
   symbol: "$",
   sign: "default",
 };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const weights = WeightTemplate.bind({});
-weights.args = {};
+export const weights = EnumVariantTemplate.bind({});
+weights.args = { enum: "weight" };
 
-export const sign = SignsTemplate.bind({});
-sign.args = {};
+export const sign = EnumVariantTemplate.bind({});
+sign.args = { enum: "sign" };
 
-export const symbolAlign = SymbolAlignTemplate.bind({});
-symbolAlign.args = {};
+export const symbolAlign = EnumVariantTemplate.bind({});
+symbolAlign.args = { enum: "symbolAlign" };
 
 export const planned = DefaultTemplate.bind({});
 planned.args = { planned: true };
@@ -236,10 +112,10 @@ integer.args = { integer: true };
 export const numeralDecimalScale3 = DefaultTemplate.bind({});
 numeralDecimalScale3.args = { numeralDecimalScale: 3 };
 
-export const align = AlignTemplate.bind({});
-align.args = {};
+export const align = EnumVariantTemplate.bind({});
+align.args = { enum: "align" };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
@@ -248,7 +124,7 @@ slotLeft.args = {
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>

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

@@ -4,7 +4,7 @@ import UNotify from "../ui.text-notify";
 import UButton from "../ui.button";
 import UGroup from "../ui.container-group";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotsFragment } from "../service.storybook";
 
 /**
  * The `UNotify` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-notify)
@@ -28,39 +28,28 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UNotify, UButton },
   setup() {
-    return { args };
-  },
-  template: `
-    <UNotify class="m-4" v-bind="args" />
-    <UButton label="Show notify" @click="onClick"/>
- `,
-  methods: {
-    onClick() {
+    function onClick() {
       notify({
         type: "success",
         label: "Hurray!",
         description: "The file successfully downloaded.",
       });
-    },
+    }
+
+    return { args, onClick };
   },
+  template: `
+    <UNotify class="m-4" v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UNotify>
+    <UButton label="Show notify" @click="onClick"/>
+  `,
 });
 
 const TypesTemplate = (args) => ({
   components: { UNotify, UButton, UGroup },
   setup() {
-    return { args };
-  },
-  template: `
-    <UNotify class="m-4" />
-
-    <UGroup>
-      <UButton label="Success" color="green" @click="onClick('success')"/>
-      <UButton label="Warning" color="orange" @click="onClick('warning')"/>
-      <UButton label="Error" color="red" @click="onClick('error')"/>
-    </UGroup>
- `,
-  methods: {
-    onClick(type) {
+    function onClick(type) {
       if (type === "success") {
         notify({
           type,
@@ -84,8 +73,19 @@ const TypesTemplate = (args) => ({
           description: "The file can't be downloaded, please check the fields and try again.",
         });
       }
-    },
+    }
+
+    return { args, onClick };
   },
+  template: `
+    <UNotify class="m-4" />
+
+    <UGroup>
+      <UButton label="Success" color="green" @click="onClick('success')"/>
+      <UButton label="Warning" color="orange" @click="onClick('warning')"/>
+      <UButton label="Error" color="red" @click="onClick('error')"/>
+    </UGroup>
+  `,
 });
 
 export const Default = DefaultTemplate.bind({});

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.235",
+  "version": "0.0.237",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -413,21 +413,31 @@
           "description": "",
           "attributes": [
             {
-              "name": "variant",
-              "description": "Alert variant.",
+              "name": "title",
+              "description": "Alert title.",
               "value": {
                 "kind": "expression",
-                "type": "'primary' | 'secondary' | 'thirdary'"
+                "type": "string"
               },
-              "default": "thirdary"
+              "default": "\"\""
             },
             {
-              "name": "html",
-              "description": "HTML or plain text.",
+              "name": "description",
+              "description": "Alert description.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "variant",
+              "description": "Alert variant.",
+              "value": {
+                "kind": "expression",
+                "type": "'primary' | 'secondary' | 'thirdary'"
+              },
+              "default": "primary"
             },
             {
               "name": "size",
@@ -491,24 +501,6 @@
                 "type": "string"
               },
               "default": "\"\""
-            },
-            {
-              "name": "title",
-              "description": "Alert title.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "description",
-              "description": "Alert description.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
             }
           ],
           "events": [
@@ -522,6 +514,10 @@
               "name": "top",
               "description": "Use it to add something above the text."
             },
+            {
+              "name": "left",
+              "description": "Use it to add something before the text."
+            },
             {
               "name": "title",
               "scoped": true,
@@ -545,12 +541,7 @@
               ]
             },
             {
-              "name": "left",
-              "description": "Use it to add something before the text."
-            },
-            {
-              "name": "default",
-              "description": "Use it to add something inside."
+              "name": "default"
             },
             {
               "name": "right",
@@ -4184,6 +4175,10 @@
             }
           ],
           "slots": [
+            {
+              "name": "left",
+              "description": "Use it to add something before the text."
+            },
             {
               "name": "icon-left",
               "scoped": true,
@@ -4199,14 +4194,6 @@
                 }
               ]
             },
-            {
-              "name": "left",
-              "description": "Use it to add something before the text."
-            },
-            {
-              "name": "right",
-              "description": "Use it to add something after the text."
-            },
             {
               "name": "icon-right",
               "scoped": true,
@@ -4221,6 +4208,10 @@
                   "name": "icon-size"
                 }
               ]
+            },
+            {
+              "name": "right",
+              "description": "Use it to add something after the text."
             }
           ],
           "source": {