vueless 0.0.316 → 0.0.318

package/ui.text-alert/index.vue

@@ -136,7 +136,7 @@ const props = defineProps({
   },
 
   /**
-   * Show Alert with a border.
+   * Add border to the `thirdary` variant.
    */
   bordered: {
     type: Boolean,

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

@@ -1,10 +1,12 @@
+import { computed, useSlots } from "vue";
+
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
 
 export default function useAttrs(props) {
+  const slots = useSlots();
   const { config, getAttrs, hasSlotContent, getColor, setColor, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
@@ -21,6 +23,9 @@ export default function useAttrs(props) {
         value = cva(value)({
           ...props,
           color: getColor(props.color),
+          tabindex: Boolean(~props.tabindex),
+          leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
+          rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
         });
       }
 

package/ui.text-badge/configs/default.config.js

@@ -1,30 +1,42 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "border rounded-full inline-block py-1 !leading-none",
+  badge: {
+    base: "border rounded-dynamic inline-block py-1 !leading-none outline-none",
     variants: {
       variant: {
-        primary: "bg-{color}-50 text-{color}-600 border-transparent",
+        primary: "bg-{color}-600 text-white border-transparent",
         secondary: "border-{color}-600 text-{color}-600",
-        thirdary: "text-{color}-600 border-transparent",
+        thirdary: "bg-{color}-50 text-{color}-600 border-transparent",
       },
       size: {
         sm: "px-2 text-2xs",
         md: "px-2.5 text-xs",
         lg: "px-3 text-sm",
       },
-      weight: {
-        regular: "font-normal",
-        medium: "font-medium",
-        bold: "font-bold",
+      round: {
+        true: "rounded-full",
+      },
+      tabindex: {
+        true: "cursor-pointer focus:ring-dynamic focus:ring-offset-dynamic focus:ring-{color}-700/15",
+      },
+      color: {
+        grayscale: "focus:ring-gray-700/15",
+        white: "focus:ring-gray-700/15",
       },
     },
     compoundVariants: [
-      { color: "grayscale", variant: "primary", class: "bg-gray-100 text-gray-900" },
+      { variant: "thirdary", bordered: true, class: "border-{color}-100" },
+      { color: "grayscale", variant: "primary", class: "bg-gray-900" },
       { color: "grayscale", variant: "secondary", class: "border-gray-900 text-gray-900" },
-      { color: "grayscale", variant: "thirdary", class: "text-gray-900" },
+      { color: "grayscale", variant: "thirdary", class: "bg-gray-100 text-gray-900" },
       { color: "white", variant: "primary", class: "bg-white text-gray-900" },
       { color: "white", variant: "secondary", class: "border-white text-white" },
-      { color: "white", variant: "thirdary", class: "text-white" },
+      { color: "white", variant: "thirdary", class: "text-white bg-white/15" },
+      { leftIcon: true, size: "sm", class: "pl-1.5" },
+      { leftIcon: true, size: "md", class: "pl-1.5" },
+      { leftIcon: true, size: "lg", class: "pl-2" },
+      { rightIcon: true, size: "sm", class: "pr-1.5" },
+      { rightIcon: true, size: "md", class: "pr-1.5" },
+      { rightIcon: true, size: "lg", class: "pr-2" },
     ],
   },
   body: {
@@ -32,22 +44,26 @@ export default /*tw*/ {
     variants: {
       size: {
         sm: "gap-0.5",
-        md: "gap-x-0.5",
-        lg: "gap-x-0.5",
+        md: "gap-0.5",
+        lg: "gap-0.5",
       },
     },
   },
   leftIcon: "{UIcon}",
+  centerIcon: "{UIcon}",
   rightIcon: "{UIcon}",
   defaults: {
     color: "brand",
     size: "md",
-    weight: "medium",
     variant: "primary",
+    tabindex: "-1",
+    round: false,
+    bordered: false,
   },
   safelist: (colors) => [
     { pattern: `bg-(${colors})-50` },
     { pattern: `border-(${colors})-600` },
     { pattern: `text-(${colors})-600` },
+    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
   ],
 };

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

@@ -90,9 +90,6 @@ Variants.args = { enum: "variant" };
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Weight = EnumVariantTemplate.bind({});
-Weight.args = { enum: "weight" };
-
 export const Colors = ColorsTemplate.bind({});
 Colors.args = {};
 

package/ui.text-badge/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     ref="wrapperRef"
-    tabindex="1"
     :data-test="dataTest"
-    v-bind="wrapperAttrs"
+    v-bind="badgeAttrs"
+    :tabindex="tabindex"
     @blur="onBlur"
     @focus="onFocus"
     @keydown="onKeydown"
@@ -16,20 +16,42 @@
           @binding {string} icon-size
           @binding {string} icon-color
         -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="color">
+      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="iconColor">
         <UIcon
           v-if="leftIcon"
+          internal
           :name="leftIcon"
           :size="iconSize"
-          :color="color"
-          internal
+          :color="iconColor"
           v-bind="leftIconAttrs"
         />
       </slot>
 
-      <!-- @slot Use it to add something instead of text. -->
-      <slot>
-        {{ label }}
+      <!--
+        @slot Use it to add something instead of the label.
+        @binding {string} label
+        @binding {string} icon-name
+        @binding {string} icon-size
+        @binding {string} icon-color
+      -->
+      <slot
+        name="default"
+        :label="label"
+        :icon-name="icon"
+        :icon-size="iconSize"
+        :icon-color="iconColor"
+      >
+        <UIcon
+          v-if="icon"
+          internal
+          :name="icon"
+          :size="iconSize"
+          :color="iconColor"
+          v-bind="centerIconAttrs"
+        />
+        <template v-else>
+          {{ label }}
+        </template>
       </slot>
 
       <!--
@@ -38,12 +60,12 @@
           @binding {string} icon-size
           @binding {string} icon-color
         -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="color">
+      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="iconColor">
         <UIcon
           v-if="rightIcon"
           :name="rightIcon"
           :size="iconSize"
-          :color="color"
+          :color="iconColor"
           internal
           v-bind="rightIconAttrs"
         />
@@ -71,7 +93,6 @@ const props = defineProps({
    */
   label: {
     type: String,
-    required: true,
     default: "",
   },
 
@@ -84,6 +105,14 @@ const props = defineProps({
     default: getDefault(defaultConfig, UBadge).variant,
   },
 
+  /**
+   * Add border to the `thirdary` variant.
+   */
+  bordered: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UBadge).bordered,
+  },
+
   /**
    * Badge size.
    * @values sm, md, lg
@@ -93,6 +122,23 @@ const props = defineProps({
     default: getDefault(defaultConfig, UBadge).size,
   },
 
+  /**
+   * Badge 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: getDefault(defaultConfig, UBadge).color,
+  },
+
+  /**
+   * Icon name (appears instead of label).
+   */
+  icon: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Left side icon name.
    */
@@ -110,21 +156,19 @@ const props = defineProps({
   },
 
   /**
-   * Badge font weight.
-   * @values regular, medium, bold
+   * Controls the keyboard “Tab” focus order of elements.
    */
-  weight: {
-    type: String,
-    default: getDefault(defaultConfig, UBadge).weight,
+  tabindex: {
+    type: [String, Number],
+    default: getDefault(defaultConfig, UBadge).tabindex,
   },
 
   /**
-   * Badge color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   * Set badge corners rounded.
    */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, UBadge).color,
+  round: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UBadge).round,
   },
 
   /**
@@ -166,7 +210,7 @@ const emit = defineEmits([
   "click",
 ]);
 
-const { bodyAttrs, wrapperAttrs, leftIconAttrs, rightIconAttrs } = useAttrs(props);
+const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs } = useAttrs(props);
 
 const wrapperRef = ref(null);
 
@@ -174,14 +218,18 @@ defineExpose({ wrapperRef });
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
+    sm: "3xs",
+    md: "2xs",
+    lg: "xs",
   };
 
   return sizes[props.size];
 });
 
+const iconColor = computed(() => {
+  return props.variant === "primary" ? "white" : props.color;
+});
+
 function onFocus() {
   emit("focus");
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.316",
+  "version": "0.0.318",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -479,7 +479,7 @@
             },
             {
               "name": "bordered",
-              "description": "Show Alert with a border.",
+              "description": "Add border to the `thirdary` variant.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -718,7 +718,6 @@
           "attributes": [
             {
               "name": "label",
-              "required": true,
               "description": "Badge label.",
               "value": {
                 "kind": "expression",
@@ -735,6 +734,15 @@
               },
               "default": "primary"
             },
+            {
+              "name": "bordered",
+              "description": "Add border to the `thirdary` variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "size",
               "description": "Badge size.",
@@ -744,6 +752,24 @@
               },
               "default": "md"
             },
+            {
+              "name": "color",
+              "description": "Badge 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": "icon",
+              "description": "Icon name (appears instead of label).",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "leftIcon",
               "description": "Left side icon name.",
@@ -763,22 +789,22 @@
               "default": "\"\""
             },
             {
-              "name": "weight",
-              "description": "Badge font weight.",
+              "name": "tabindex",
+              "description": "Controls the keyboard “Tab” focus order of elements.",
               "value": {
                 "kind": "expression",
-                "type": "'regular' | 'medium' | 'bold'"
+                "type": "string|number"
               },
-              "default": "medium"
+              "default": "-1"
             },
             {
-              "name": "color",
-              "description": "Badge color.",
+              "name": "round",
+              "description": "Set badge corners rounded.",
               "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'"
+                "type": "boolean"
               },
-              "default": "brand"
+              "default": "false"
             },
             {
               "name": "config",
@@ -839,7 +865,26 @@
             },
             {
               "name": "default",
-              "description": "Use it to add something instead of text."
+              "scoped": true,
+              "description": "Use it to add something instead of the label.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "label"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-color"
+                }
+              ]
             },
             {
               "name": "right",
@@ -2868,6 +2913,33 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "options",
+              "description": "Options list.",
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              },
+              "default": "[]"
+            },
+            {
+              "name": "labelKey",
+              "description": "Label key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "label"
+            },
+            {
+              "name": "valueKey",
+              "description": "Value key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "id"
+            },
             {
               "name": "variant",
               "description": "Badge variant.",
@@ -2896,13 +2968,13 @@
               "default": "md"
             },
             {
-              "name": "weight",
-              "description": "Badge font weight.",
+              "name": "round",
+              "description": "Set badge corners rounded.",
               "value": {
                 "kind": "expression",
-                "type": "'regular' | 'medium' | 'bold'"
+                "type": "boolean"
               },
-              "default": "medium"
+              "default": "false"
             },
             {
               "name": "noIcon",
@@ -2913,33 +2985,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "options",
-              "description": "Options list.",
-              "value": {
-                "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
-            },
-            {
-              "name": "labelKey",
-              "description": "Label key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "label"
-            },
-            {
-              "name": "valueKey",
-              "description": "Value key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "id"
-            },
             {
               "name": "listYPosition",
               "description": "The position of dropdown list on the y-axis.",
@@ -3049,22 +3094,40 @@
           "description": "",
           "attributes": [
             {
-              "name": "modelValue",
-              "description": "Selected value.",
+              "name": "label",
+              "description": "Button label.",
               "value": {
                 "kind": "expression",
-                "type": "string|number"
+                "type": "string"
               },
               "default": "\"\""
             },
             {
-              "name": "label",
-              "description": "Button label.",
+              "name": "options",
+              "description": "Options list.",
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              },
+              "default": "[]"
+            },
+            {
+              "name": "labelKey",
+              "description": "Label key in the item object of options.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "label"
+            },
+            {
+              "name": "valueKey",
+              "description": "Value key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "id"
             },
             {
               "name": "variant",
@@ -3138,33 +3201,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "options",
-              "description": "Options list.",
-              "value": {
-                "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
-            },
-            {
-              "name": "labelKey",
-              "description": "Label key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "label"
-            },
-            {
-              "name": "valueKey",
-              "description": "Value key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "id"
-            },
             {
               "name": "listYPosition",
               "description": "The position of dropdown list on the y-axis.",
@@ -3279,6 +3315,33 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "options",
+              "description": "Options list.",
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              },
+              "default": "[]"
+            },
+            {
+              "name": "labelKey",
+              "description": "Label key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "label"
+            },
+            {
+              "name": "valueKey",
+              "description": "Value key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "id"
+            },
             {
               "name": "color",
               "description": "Link color.",
@@ -3341,33 +3404,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "options",
-              "description": "Options list.",
-              "value": {
-                "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
-            },
-            {
-              "name": "labelKey",
-              "description": "Label key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "label"
-            },
-            {
-              "name": "valueKey",
-              "description": "Value key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "id"
-            },
             {
               "name": "listYPosition",
               "description": "The position of dropdown list on the y-axis.",