vueless 0.0.201 → 0.0.202

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.201",
+  "version": "0.0.202",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -181,6 +181,64 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "StepperProgress",
+          "description": "",
+          "attributes": [
+            {
+              "name": "progressPercent",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "value",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            },
+            {
+              "name": "color",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "max",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "null"
+            },
+            {
+              "name": "config",
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              },
+              "default": "{}"
+            },
+            {
+              "name": "dataCy",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            }
+          ],
+          "source": {
+            "module": "./src/ui.navigation-progress/components/StepperProgress.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "TableRow",
           "description": "",
@@ -454,19 +512,22 @@
           ],
           "events": [
             {
-              "name": "hidden"
+              "name": "hidden",
+              "description": "Triggers when the alert is hidden."
             }
           ],
           "slots": [
             {
               "name": "top",
-              "description": "Use it to add something above text."
+              "description": "Use it to add something above the text."
             },
             {
               "name": "title",
               "scoped": true,
+              "description": "Use it to add something instead of the title.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "title"
                 }
               ]
@@ -477,13 +538,14 @@
               "description": "Use it to add something instead of the description.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "description"
                 }
               ]
             },
             {
               "name": "left",
-              "description": "Use it to add something before text."
+              "description": "Use it to add something before the text."
             },
             {
               "name": "default",
@@ -491,11 +553,11 @@
             },
             {
               "name": "right",
-              "description": "Use it to add something after text."
+              "description": "Use it to add something after the text."
             },
             {
               "name": "bottom",
-              "description": "Use it to add something under text."
+              "description": "Use it to add something under the text."
             }
           ],
           "source": {
@@ -670,16 +732,20 @@
           ],
           "events": [
             {
-              "name": "focus"
+              "name": "focus",
+              "description": "Triggers when the badge is focused."
             },
             {
-              "name": "keydown"
+              "name": "keydown",
+              "description": "Triggers when the badge is pressed."
             },
             {
-              "name": "blur"
+              "name": "blur",
+              "description": "Triggers when the badge loses focus."
             },
             {
-              "name": "click"
+              "name": "click",
+              "description": "Triggers when the badge is clicked."
             }
           ],
           "slots": [
@@ -2437,7 +2503,16 @@
           ],
           "events": [
             {
-              "name": "select"
+              "name": "select",
+              "description": "Triggers when dropdown option is selected.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "value"
+                }
+              ]
             }
           ],
           "slots": [
@@ -2620,7 +2695,16 @@
           ],
           "events": [
             {
-              "name": "select"
+              "name": "select",
+              "description": "Triggers when dropdown option is selected.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "value"
+                }
+              ]
             }
           ],
           "slots": [
@@ -2668,7 +2752,16 @@
           ],
           "events": [
             {
-              "name": "click"
+              "name": "click",
+              "description": "Triggers when dropdown item is clicked.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "value"
+                }
+              ]
             }
           ],
           "slots": [
@@ -2831,7 +2924,16 @@
           ],
           "events": [
             {
-              "name": "select"
+              "name": "select",
+              "description": "Triggers when dropdown option is selected.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "value"
+                }
+              ]
             }
           ],
           "slots": [
@@ -2950,19 +3052,18 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
-            },
-            {
-              "name": "addOption"
+              "name": "addOption",
+              "description": "Triggers when option is added."
             }
           ],
           "slots": [
             {
               "name": "before-option",
               "scoped": true,
-              "description": "Use it to add something before option.",
+              "description": "Use it to add something before the option.",
               "bindings": [
                 {
+                  "type": "other",
                   "name": "option"
                 }
               ]
@@ -2970,12 +3071,14 @@
             {
               "name": "option",
               "scoped": true,
-              "description": "Use it to add something before option.",
+              "description": "Use it to add something instead of the option.",
               "bindings": [
                 {
+                  "type": "other",
                   "name": "option"
                 },
                 {
+                  "type": "number",
                   "name": "index"
                 }
               ]
@@ -2983,9 +3086,10 @@
             {
               "name": "after-option",
               "scoped": true,
-              "description": "Use it to add something after option.",
+              "description": "Use it to add something after the option.",
               "bindings": [
                 {
+                  "type": "other",
                   "name": "option"
                 }
               ]
@@ -4915,25 +5019,30 @@
           ],
           "events": [
             {
-              "name": "click"
+              "name": "click",
+              "description": "Triggers when link is clicked."
             },
             {
-              "name": "mouseover"
+              "name": "mouseover",
+              "description": "Triggers when cursor is on the link."
             },
             {
-              "name": "focus"
+              "name": "focus",
+              "description": "Triggers when link is focused."
             },
             {
-              "name": "blur"
+              "name": "blur",
+              "description": "Triggers when link loses focus."
             },
             {
-              "name": "keydown"
+              "name": "keydown",
+              "description": "Triggers when link is clicked."
             }
           ],
           "slots": [
             {
               "name": "left",
-              "description": "Use it to add something before text."
+              "description": "Use it to add something before the text."
             },
             {
               "name": "default",
@@ -4941,7 +5050,7 @@
             },
             {
               "name": "right",
-              "description": "Use it to add something after text."
+              "description": "Use it to add something after the text."
             }
           ],
           "source": {
@@ -5901,6 +6010,15 @@
               },
               "default": "brand"
             },
+            {
+              "name": "variant",
+              "description": "Progress variant.",
+              "value": {
+                "kind": "expression",
+                "type": "'stepper' | 'progress'"
+              },
+              "default": "progress"
+            },
             {
               "name": "indicator",
               "description": "Progress indicator visibility.",
@@ -5909,6 +6027,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "dataCy",
+              "description": "Sets data-cy attribute for automated testing.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
             }
           ],
           "slots": [
@@ -6699,70 +6826,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "UStepper",
-          "description": "",
-          "attributes": [
-            {
-              "name": "title",
-              "description": "Set component title.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "step",
-              "description": "Set step number.",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "1"
-            },
-            {
-              "name": "color",
-              "description": "Icon color.",
-              "value": {
-                "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
-              },
-              "default": "brand"
-            },
-            {
-              "name": "totalSteps",
-              "description": "Set total number of steps.",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "null"
-            },
-            {
-              "name": "config",
-              "description": "Component ui config object.",
-              "value": {
-                "kind": "expression",
-                "type": "object"
-              },
-              "default": "{}"
-            },
-            {
-              "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            }
-          ],
-          "source": {
-            "module": "./src/ui.navigation-stepper/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "USwitch",
           "description": "",
@@ -7610,7 +7673,16 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when toggle item is selected.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "modelValue"
+                }
+              ]
             }
           ],
           "slots": [
@@ -7694,18 +7766,30 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when new value is set.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "modelValue"
+                }
+              ]
             }
           ],
           "slots": [
             {
-              "name": "left"
+              "name": "left",
+              "description": "Use it to add something before the text."
             },
             {
-              "name": "default"
+              "name": "default",
+              "description": "Use it to add something instead of the text."
             },
             {
-              "name": "right"
+              "name": "right",
+              "description": "Use it to add something after the text."
             }
           ],
           "source": {

package/ui.navigation-stepper/Docs.mdx

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
-
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
-
-<Meta of={stories} />
-<Title of={stories} />
-<Subtitle of={stories} />
-<Description of={stories} />
-<Primary of={stories}  />
-<Controls of={stories.Default} />
-<Stories of={stories} />
-
-## Default config
-<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-stepper/composables/attrs.composable.js

@@ -1,25 +0,0 @@
-import useUI from "../../composable.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const stepperAttrs = getAttrs("stepper");
-  const titleAttrs = getAttrs("title", { isComponent: true });
-  const ringAttrs = getAttrs("ring");
-  const countAttrs = getAttrs("count");
-  const gradientAttrs = getAttrs("gradient");
-  const svgAttrs = getAttrs("svg");
-
-  return {
-    wrapperAttrs,
-    titleAttrs,
-    stepperAttrs,
-    ringAttrs,
-    countAttrs,
-    gradientAttrs,
-    svgAttrs,
-  };
-}

package/ui.navigation-stepper/configs/default.config.js

@@ -1,13 +0,0 @@
-export default /*tw*/ {
-  wrapper: "flex items-center justify-between",
-  stepper: "h-12 w-12",
-  ring: "stroke-current text-gray-100",
-  count: "text-xl font-bold text-gray-900 translate-y-2 transform",
-  title: "",
-  gradient: "",
-  svg: "",
-  defaultVariants: {
-    step: 1,
-    color: "brand",
-  },
-};

package/ui.navigation-stepper/constants/index.js

@@ -1,5 +0,0 @@
-/*
-  This const is needed to prevent the issue in script setup:
- `defineProps` is referencing locally declared variables. (vue/valid-define-props)
- */
-export const UStepper = "UStepper";

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

@@ -1,33 +0,0 @@
-import { getArgTypes } from "../service.storybook";
-
-import UStepper from "../ui.navigation-stepper";
-
-/**
- * The `UStepper` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-stepper)
- */
-export default {
-  id: "8030",
-  title: "Navigation / Stepper",
-  component: UStepper,
-  args: {
-    title: "Title",
-    step: 1,
-    totalSteps: 10,
-  },
-  argTypes: {
-    ...getArgTypes(UStepper.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UStepper },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UStepper v-bind="args" />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.navigation-stepper/index.vue

@@ -1,126 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <UHeader :label="title" size="xs" v-bind="titleAttrs" />
-
-    <div v-bind="stepperAttrs">
-      <svg width="100%" height="100%" viewBox="0 0 40 40" v-bind="svgAttrs">
-        <defs>
-          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" v-bind="gradientAttrs">
-            <stop offset="0%" :stop-color="setStepperColor" />
-            <stop offset="100%" :stop-color="setStepperColor" />
-          </linearGradient>
-        </defs>
-
-        <circle
-          cx="20"
-          cy="20"
-          r="15.91549430918954"
-          fill="transparent"
-          stroke-width="4"
-          v-bind="ringAttrs"
-        ></circle>
-
-        <circle
-          cx="20"
-          cy="20"
-          r="15.91549430918954"
-          fill="transparent"
-          stroke="url(#gradient)"
-          stroke-width="4"
-          :stroke-dasharray="fillPercentage"
-          stroke-dashoffset="0"
-        ></circle>
-        <g v-bind="countAttrs">
-          <text y="45%" transform="translate(0, 2)">
-            <tspan x="50%" text-anchor="middle">{{ step }}</tspan>
-          </text>
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-import colors from "tailwindcss/colors";
-
-import UHeader from "../ui.text-header";
-import UIService from "../service.ui";
-import { GRAY_COLORS } from "../preset.tailwind/constants";
-
-import { UStepper } from "./constants/index";
-import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UStepper", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Set component title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set step number.
-   */
-  step: {
-    type: Number,
-    default: UIService.get(defaultConfig, UStepper).default.step,
-  },
-
-  /**
-   * Icon color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, UStepper).default.color,
-  },
-
-  /**
-   * Set total number of steps.
-   */
-  totalSteps: {
-    type: Number,
-    default: null,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { wrapperAttrs, titleAttrs, stepperAttrs, ringAttrs, countAttrs, gradientAttrs, svgAttrs } =
-  useAttrs(props);
-
-const setStepperColor = computed(() => {
-  return colors[props.color]
-    ? colors[props.color][500]
-    : GRAY_COLORS.includes(props.color)
-      ? colors[props.color][900]
-      : colors.zinc[900];
-});
-
-const fillPercentage = computed(() => {
-  const maxCountPercent = 100;
-  const activePercent = (props.step / props.totalSteps) * maxCountPercent;
-
-  return `${activePercent} ${maxCountPercent}`;
-});
-</script>