vueless 0.0.2 → 0.0.3

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

@@ -1,16 +1,20 @@
 import UMoney from "vueless/ui.text-money";
 import UIcon from "vueless/ui.image-icon";
 import URow from "vueless/ui.container-row";
+import DebitIcon from "vueless/ui.text-money/assets/debit.svg?component";
+import CreditIcon from "vueless/ui.text-money/assets/credit.svg?component";
+
 import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 
 const COMPONENT_CLASSES = "flex justify-center w-1/6";
 
 export default {
+  id: "4040",
   title: "Text & Content / Money",
   component: UMoney,
   args: {
     sum: 10,
-    currencySymbol: "$",
+    symbol: "$",
     sign: "positive",
   },
   argTypes: {
@@ -40,8 +44,8 @@ const SlotTemplate = (args) => ({
   components: { UMoney, UIcon },
   setup() {
     const icons = {
-      Debit: require("vueless/ui.text-money/assets/debit.svg"),
-      Credit: require("vueless/ui.text-money/assets/credit.svg"),
+      Debit: DebitIcon,
+      Credit: CreditIcon,
     };
 
     return { args, icons };
@@ -55,7 +59,7 @@ const SlotTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UMoney, URow },
   setup() {
     return {
@@ -66,7 +70,7 @@ const SizesTemplate = (args, { argTypes }) => ({
   template: `
     <URow>
       <div class="${COMPONENT_CLASSES}" v-for="(size, index) in sizes" :key="index">
-        <UMoney :size="size" v-bind="args">
+        <UMoney v-bind="args" :size="size" >
           <template v-for="(slot) in slots" v-slot:[slot]>
             <template v-if="args[slot]">{{ args[slot] }}</template>
           </template>
@@ -76,7 +80,7 @@ const SizesTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const WeightTemplate = (args, { argTypes }) => ({
+const WeightTemplate = (args, { argTypes } = {}) => ({
   components: { UMoney, URow },
   setup() {
     return {
@@ -87,7 +91,7 @@ const WeightTemplate = (args, { argTypes }) => ({
   template: `
     <URow>
      <div class="${COMPONENT_CLASSES}" v-for="(weight, index) in weights" :key="index">
-        <UMoney :weight="weight" v-bind="args">
+        <UMoney v-bind="args" :weight="weight" >
           <template v-for="(slot) in slots" v-slot:[slot]>
             <template v-if="args[slot]">{{ args[slot] }}</template>
           </template>
@@ -97,7 +101,7 @@ const WeightTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
+const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UMoney, URow },
   setup() {
     return {
@@ -108,7 +112,7 @@ const ColorsTemplate = (args, { argTypes }) => ({
   template: `
     <URow>
       <div class="${COMPONENT_CLASSES}"    v-for="(color, index) in colors" :key="index">
-        <UMoney :color="color" v-bind="args">
+        <UMoney v-bind="args" :color="color" >
           <template v-for="(slot) in slots" v-slot:[slot]>
             <template v-if="args[slot]">{{ args[slot] }}</template>
           </template>
@@ -121,7 +125,7 @@ const ColorsTemplate = (args, { argTypes }) => ({
   },
 });
 
-const SignsTemplate = (args, { argTypes }) => ({
+const SignsTemplate = (args, { argTypes } = {}) => ({
   components: { UMoney, URow },
   setup() {
     return {
@@ -132,7 +136,7 @@ const SignsTemplate = (args, { argTypes }) => ({
   template: `
     <URow>
       <div class="${COMPONENT_CLASSES}" v-for="(sign, index) in signs" :key="index">
-        <UMoney :sign="sign" v-bind="args" >
+        <UMoney v-bind="args" :sign="sign"  >
           <template v-for="(slot) in slots" v-slot:[slot]>
             <template v-if="args[slot]">{{ args[slot] }}</template>
           </template>
@@ -145,20 +149,20 @@ const SignsTemplate = (args, { argTypes }) => ({
   },
 });
 
-const SymbolAlignTemplate = (args, { argTypes }) => ({
+const SymbolAlignTemplate = (args, { argTypes } = {}) => ({
   components: { UMoney, URow },
   setup() {
     return {
       args,
-      symbolsAlign: argTypes.currencySymbolAlign.options,
+      symbolsAlign: argTypes.symbolAlign.options,
     };
   },
   template: `
     <URow>
       <div class="${COMPONENT_CLASSES}" v-for="(symbolAlign, index) in symbolsAlign" :key="index">
         <UMoney
-          :currencySymbolAlign="symbolAlign"
           v-bind="args"
+          :symbol-align="symbolAlign"
         >
           <template v-for="(slot) in slots" v-slot:[slot]>
             <template v-if="args[slot]">{{ args[slot] }}</template>
@@ -172,7 +176,7 @@ const SymbolAlignTemplate = (args, { argTypes }) => ({
   },
 });
 
-const AlignTemplate = (args, { argTypes }) => ({
+const AlignTemplate = (args, { argTypes } = {}) => ({
   components: { UMoney, URow },
   setup() {
     return {
@@ -199,14 +203,14 @@ Default.args = {};
 export const otherValues = DefaultTemplate.bind({});
 otherValues.args = {
   sum: 10,
-  currencySymbol: "$",
+  symbol: "$",
   sign: "negative",
 };
 
 export const colors = ColorsTemplate.bind({});
 colors.args = {
   sum: 0,
-  currencySymbol: "$",
+  symbol: "$",
   sign: "default",
 };
 
@@ -219,8 +223,8 @@ weights.args = {};
 export const sign = SignsTemplate.bind({});
 sign.args = {};
 
-export const currencySymbolAlign = SymbolAlignTemplate.bind({});
-currencySymbolAlign.args = {};
+export const symbolAlign = SymbolAlignTemplate.bind({});
+symbolAlign.args = {};
 
 export const planned = DefaultTemplate.bind({});
 planned.args = { planned: true };
@@ -241,8 +245,7 @@ slotLeft.args = {
       <UIcon
         :src="icons.Debit"
         size="xs"
-        color="gray"
-        variant="light"
+        color="grayscale"
       />
     </template>
   `,
@@ -256,7 +259,6 @@ slotRight.args = {
         :src="icons.Credit"
         size="xs"
         color="gray"
-        variant="light"
       />
     </template>
   `,