vueless 0.0.2 → 0.0.3

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

@@ -4,10 +4,11 @@ import UIcon from "vueless/ui.image-icon";
 import URow from "vueless/ui.container-row";
 
 export default {
+  id: "6010",
   title: "Images & Icons / Icon",
   component: UIcon,
   args: {
-    src: require("vueless/ui.icons-metronic/Close.svg"),
+    name: "close",
   },
   argTypes: {
     ...getArgTypes(UIcon.name),
@@ -24,7 +25,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
+const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UIcon, URow },
   setup() {
     return {
@@ -34,17 +35,18 @@ const ColorsTemplate = (args, { argTypes }) => ({
   },
   template: `
     <URow>
-    <UIcon
-      v-for="(color, index) in colors"
-      :color="color"
-      v-bind="args"
-      :key="index"
-    />
+      <UIcon
+        v-for="(color, index) in colors"
+        v-bind="args"
+        :color="color"
+        name="close"
+        :key="index"
+      />
     </URow>
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UIcon, URow },
   setup() {
     return {
@@ -56,15 +58,16 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <UIcon
         v-for="(size, index) in sizes"
-        :size="size"
         v-bind="args"
+        :size="size"
+        name="close"
         :key="index"
       />
     </URow>
   `,
 });
 
-const VariantsTemplate = (args, { argTypes }) => ({
+const VariantsTemplate = (args, { argTypes } = {}) => ({
   components: { UIcon, URow },
   setup() {
     return {
@@ -77,26 +80,7 @@ const VariantsTemplate = (args, { argTypes }) => ({
       <UIcon
         v-for="(variant, index) in variants"
         :variant="variant"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const PillFilledTemplate = (args, { argTypes }) => ({
-  components: { UIcon, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UIcon
-        v-for="(color, index) in colors"
-        :color="color"
+        name="close"
         v-bind="args"
         :key="index"
       />
@@ -122,8 +106,5 @@ tooltip.args = { tooltip: "Some text" };
 export const interactive = DefaultTemplate.bind({});
 interactive.args = { interactive: true };
 
-export const pill = PillFilledTemplate.bind({});
+export const pill = ColorsTemplate.bind({});
 pill.args = { pill: true };
-
-export const pillFilled = PillFilledTemplate.bind({});
-pillFilled.args = { pillFilled: true };