vueless 0.0.201 → 0.0.203

package/ui.text-notify/composables/attrs.composable.js

@@ -1,30 +1,32 @@
 import useUI from "../../composable.ui";
-
+import { computed } from "vue";
 import defaultConfig from "../configs/default.config";
+import { cva } from "../../service.ui";
+
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+      return "";
+    });
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const bodyAttrs = getAttrs("body");
-  const contentAttrs = getAttrs("content");
-  const labelAttrs = getAttrs("label");
-  const descriptionAttrs = getAttrs("description");
-  const successIconAttrs = getAttrs("successIcon");
-  const warningIconAttrs = getAttrs("warningIcon");
-  const errorIconAttrs = getAttrs("errorIcon");
-  const closeIconAttrs = getAttrs("closeIcon");
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    bodyAttrs,
-    contentAttrs,
-    labelAttrs,
-    descriptionAttrs,
-    successIconAttrs,
-    warningIconAttrs,
-    errorIconAttrs,
-    closeIconAttrs,
   };
 }

package/ui.text-notify/index.vue

@@ -83,7 +83,7 @@ import { merge } from "lodash-es";
 import UIService, { globalComponentConfig, cx } from "../service.ui";
 
 import { useLocale } from "../composable.locale";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 import defaultConfig from "./configs/default.config";
 import { UNotify, NOTIFY_TYPE, POSITION } from "./constants";

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.201",
+  "version": "0.0.203",
   "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"
                 }
               ]
@@ -3227,6 +3331,7 @@
               "description": "Use it to add something left.",
               "bindings": [
                 {
+                  "type": "object",
                   "name": "file"
                 }
               ]
@@ -3237,6 +3342,7 @@
               "description": "Use it to add something right.",
               "bindings": [
                 {
+                  "type": "object",
                   "name": "file"
                 }
               ]
@@ -4915,25 +5021,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 +5052,7 @@
             },
             {
               "name": "right",
-              "description": "Use it to add something after text."
+              "description": "Use it to add something after the text."
             }
           ],
           "source": {
@@ -5901,6 +6012,15 @@
               },
               "default": "brand"
             },
+            {
+              "name": "variant",
+              "description": "Progress variant.",
+              "value": {
+                "kind": "expression",
+                "type": "'stepper' | 'progress'"
+              },
+              "default": "progress"
+            },
             {
               "name": "indicator",
               "description": "Progress indicator visibility.",
@@ -5909,6 +6029,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "dataCy",
+              "description": "Sets data-cy attribute for automated testing.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
             }
           ],
           "slots": [
@@ -6699,70 +6828,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 +7675,16 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when toggle item is selected.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "modelValue"
+                }
+              ]
             }
           ],
           "slots": [
@@ -7694,18 +7768,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 = {};