vueless 0.0.207 → 0.0.209

package/ui.loader/index.stories.js

@@ -1,5 +1,6 @@
 import ULoader from "../ui.loader";
 import URow from "../ui.container-row";
+import UButton from "../ui.button";
 
 import { getArgTypes } from "../service.storybook";
 
@@ -10,6 +11,9 @@ export default {
   id: "9010",
   title: "Loaders and Skeletons / Loader",
   component: ULoader,
+  args: {
+    loading: true,
+  },
   argTypes: {
     ...getArgTypes(ULoader.name),
   },
@@ -37,9 +41,9 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     <URow class="flex-wrap">
       <ULoader
         v-for="(color, index) in colors"
-        :color="color"
-        v-bind="args"
         :key="index"
+        v-bind="args"
+        :color="color"
       />
     </URow>
   `,
@@ -65,6 +69,29 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
+const LoadingTemplate = (args) => ({
+  components: { ULoader, UButton, URow },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  methods: {
+    toggleLoader() {
+      this.isLoading = !this.isLoading;
+    },
+  },
+  template: `
+    <URow>
+      <ULoader v-bind="args" :loading="isLoading" />
+      <UButton @click="toggleLoader" size="sm">ToggleLoader</UButton>
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
@@ -73,3 +100,6 @@ sizes.args = {};
 
 export const colors = ColorsTemplate.bind({});
 colors.args = {};
+
+export const loading = LoadingTemplate.bind({});
+loading.args = {};

package/ui.navigation-progress/index.stories.js

@@ -1,9 +1,9 @@
+import { getArgTypes, allSlotsFragment, getSlotNames } from "../service.storybook";
+
 import UProgress from "./index.vue";
-import UButton from "../ui.button/index.vue";
+import UGroup from "../ui.container-group";
+import UButton from "../ui.button";
 import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
-
-import { getArgTypes } from "../service.storybook";
 
 /**
  * The `UProgress` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-progress)
@@ -18,131 +18,72 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UProgress, UButton, UIcon },
+  components: { UGroup, UProgress, UButton, UIcon },
   setup() {
-    return { args };
-  },
-  data() {
-    return {
-      progress: 10,
-    };
-  },
-  methods: {
-    updateProgress() {
-      this.progress += 10;
-
-      if (this.progress > 100) {
-        this.progress = 0;
-      }
-    },
-  },
-  template: `
-    <UProgress v-bind="args" :value="progress">
-      ${args.slotTemplate}
-    </UProgress>
+    const slots = getSlotNames(UProgress.name);
 
-    <UButton class="mt-4" @click="updateProgress">Update Progress</UButton>
-  `,
-});
+    args.value = args.max ? 1 : 10;
+    args.iterator = args.max ? 1 : 10;
 
-const StepsTemplate = (args) => ({
-  components: { UProgress, UButton, UIcon },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      progress: 1,
-      max: ["Step 1", "Step 2", "Step 3"],
-    };
-  },
-  methods: {
-    updateProgress() {
-      this.progress += 1;
-
-      if (this.progress > 3) {
-        this.progress = 0;
-      }
-    },
-  },
-  template: `
-    <UProgress v-bind="args" :max="max" :value="progress">
-      ${args.slotTemplate}
-    </UProgress>
-
-    <UButton class="mt-4" @click="updateProgress">Update Progress</UButton>
-  `,
-});
+    function updateProgress() {
+      args.value = args.value < (args.max?.length || 100) ? args.value + args.iterator : 0;
+    }
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UProgress, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  data() {
-    return {
-      progress: 10,
-    };
+    return { slots, args, updateProgress };
   },
   template: `
-    <URow class="!flex-col">
-      <UProgress
-        v-for="(color, index) in colors"
-        :key="index"
-        :color="color"
-        v-bind="args" 
-        :value="progress" 
-      />
-    </URow>
+    <UGroup align="start">
+      <UProgress v-bind="args">${args.slotTemplate || allSlotsFragment}</UProgress>
+      <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
+    </UGroup>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UProgress, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UGroup, UButton, UProgress },
   setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  data() {
-    return {
-      progress: 10,
-    };
+    args.progress = 10;
+
+    function updateProgress() {
+      args.progress = args.progress < 100 ? args.progress + 10 : 0;
+    }
+
+    return { args, updateProgress, options: argTypes[args.enum].options };
   },
   template: `
-    <URow class="!flex-col">
-      <UProgress
-        v-for="(size, index) in sizes"
-        :key="index"
-        :size="size"
-        v-bind="args" 
-        :value="progress" 
-      />
-    </URow>
+    <UGroup align="start">
+      <UGroup>
+        <UProgress
+          v-for="(option, index) in options"
+          :key="index"
+          :[args.enum]="option"
+          v-bind="args"
+          :value="args.progress"
+        />
+      </UGroup>
+
+      <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
+      </UGroup>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Variant = StepsTemplate.bind({});
-Variant.args = { variant: "stepper" };
+export const VariantStepper = DefaultTemplate.bind({});
+VariantStepper.args = { variant: "stepper", max: ["Step 1", "Step 2", "Step 3"] };
 
 export const Indicator = DefaultTemplate.bind({});
 Indicator.args = { indicator: true };
 
-export const Steps = StepsTemplate.bind({});
-Steps.args = {};
+export const Steps = DefaultTemplate.bind({});
+Steps.args = { max: ["Step 1", "Step 2", "Step 3"] };
 
-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 IndicatorSlot = DefaultTemplate.bind({});
 IndicatorSlot.args = {
@@ -157,8 +98,9 @@ IndicatorSlot.args = {
 `,
 };
 
-export const stepSlot = StepsTemplate.bind({});
+export const stepSlot = DefaultTemplate.bind({});
 stepSlot.args = {
+  max: ["Step 1", "Step 2", "Step 3"],
   slotTemplate: `
   <template #step-0>
     💻

package/ui.navigation-progress/index.vue

@@ -104,7 +104,15 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.207",
+  "version": "0.0.209",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -399,7 +399,16 @@
           ],
           "events": [
             {
-              "name": "click"
+              "name": "click",
+              "description": "Triggers when the accordion item is toggled.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "name"
+                }
+              ]
             }
           ],
           "source": {
@@ -653,7 +662,8 @@
           ],
           "events": [
             {
-              "name": "click"
+              "name": "click",
+              "description": "Triggers when the avatar is clicked."
             }
           ],
           "source": {
@@ -3428,11 +3438,11 @@
             },
             {
               "name": "before-title",
-              "description": "Use it to add something before title."
+              "description": "Use it to add something before the title."
             },
             {
               "name": "after-title",
-              "description": "Use it to add something after title."
+              "description": "Use it to add something after the title."
             },
             {
               "name": "right",
@@ -3440,7 +3450,7 @@
             },
             {
               "name": "default",
-              "description": "Use it to add something instead form."
+              "description": "Use it to add something inside."
             }
           ],
           "source": {
@@ -3702,13 +3712,16 @@
           ],
           "events": [
             {
-              "name": "click"
+              "name": "click",
+              "description": "Triggers when the icon is clicked."
             },
             {
-              "name": "focus"
+              "name": "focus",
+              "description": "Triggers when the icon is focused."
             },
             {
-              "name": "blur"
+              "name": "blur",
+              "description": "Triggers when the icon loses focus."
             }
           ],
           "source": {
@@ -5304,10 +5317,20 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when the modal is toggled.",
+              "properties": [
+                {
+                  "type": [
+                    "Boolean"
+                  ],
+                  "name": "value"
+                }
+              ]
             },
             {
-              "name": "back"
+              "name": "back",
+              "description": "Triggers when back link in modal is clicked."
             }
           ],
           "slots": [
@@ -5433,13 +5456,24 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when the modal is toggled.",
+              "properties": [
+                {
+                  "type": [
+                    "Boolean"
+                  ],
+                  "name": "value"
+                }
+              ]
             },
             {
-              "name": "confirm"
+              "name": "confirm",
+              "description": "Triggers when the action is confirmed."
             },
             {
-              "name": "close"
+              "name": "close",
+              "description": "Triggers when the action is declined or modal is closed."
             }
           ],
           "slots": [
@@ -6030,9 +6064,18 @@
               },
               "default": "false"
             },
+            {
+              "name": "config",
+              "description": "Component ui config object.",
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              },
+              "default": "{}"
+            },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -6289,12 +6332,12 @@
             },
             {
               "name": "name",
-              "description": "Radio group name (sets for each radio).",
+              "required": true,
+              "description": "Unique radio group name (sets for each radio).",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "\"\""
+              }
             },
             {
               "name": "disabled",