vueless 0.0.283 → 0.0.284

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.283",
+  "version": "0.0.284",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

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

@@ -37,6 +37,8 @@ export default /*tw*/ {
       },
     },
   },
+  leftIcon: "{UIcon}",
+  rightIcon: "{UIcon}",
   defaultVariants: {
     color: "brand",
     size: "md",

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

@@ -96,28 +96,54 @@ Weight.args = { enum: "weight" };
 export const Colors = ColorsTemplate.bind({});
 Colors.args = {};
 
-export const slotRight = DefaultTemplate.bind({});
-slotRight.args = {
+export const leftIcon = DefaultTemplate.bind({});
+leftIcon.args = {
+  leftIcon: "star",
+};
+
+export const rightIcon = DefaultTemplate.bind({});
+rightIcon.args = {
+  rightIcon: "star",
+};
+
+export const leftIconSlot = DefaultTemplate.bind({});
+leftIconSlot.args = {
   slotTemplate: `
-    <template #right>
+    <template #left-icon>
       <UIcon
-        tooltip="tooltip text"
         name="info"
-        size="xs"
+        color="red"
       />
     </template>
   `,
 };
 
-export const slotLeft = DefaultTemplate.bind({});
-slotLeft.args = {
+export const rightIconSlot = DefaultTemplate.bind({});
+rightIconSlot.args = {
   slotTemplate: `
-    <template #left>
+    <template #right-icon>
       <UIcon
-        tooltip="tooltip text"
         name="info"
-        size="xs"
+        color="red"
       />
     </template>
   `,
 };
+
+export const slotLeft = DefaultTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      🤘
+    </template>
+  `,
+};
+
+export const slotRight = DefaultTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      🤘
+    </template>
+  `,
+};

package/ui.text-badge/index.vue

@@ -13,6 +13,25 @@
       <!-- @slot Use it to add something before text. -->
       <slot name="left" />
 
+      <div v-if="hasSlotContent($slots['left-icon']) || leftIcon">
+        <!--
+          @slot Use it to add icon before the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+          @binding {string} icon-color
+        -->
+        <slot name="left-icon" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="color">
+          <UIcon
+            v-if="leftIcon"
+            :name="leftIcon"
+            :size="iconSize"
+            :color="color"
+            internal
+            v-bind="leftIconAttrs"
+          />
+        </slot>
+      </div>
+
       <!-- @slot Use it to add something instead of text. -->
       <slot>
         <div v-if="!hasSlotContent($slots['default'])">
@@ -20,6 +39,25 @@
         </div>
       </slot>
 
+      <div v-if="hasSlotContent($slots['right-icon']) || rightIcon">
+        <!--
+          @slot Use it to add icon after the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+          @binding {string} icon-color
+        -->
+        <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="color">
+          <UIcon
+            v-if="rightIcon"
+            :name="rightIcon"
+            :size="iconSize"
+            :color="color"
+            internal
+            v-bind="rightIconAttrs"
+          />
+        </slot>
+      </div>
+
       <!-- @slot Use it to add something after text. -->
       <slot name="right" />
     </div>
@@ -27,9 +65,10 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 
 import { getDefault } from "../service.ui";
+import UIcon from "../ui.image-icon";
 
 import { UBadge } from "./constants";
 import useAttrs from "./composables/attrs.composable";
@@ -66,6 +105,22 @@ const props = defineProps({
     default: getDefault(defaultConfig, UBadge).size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  leftIcon: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  rightIcon: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Badge font weight.
    * @values regular, medium, bold
@@ -123,12 +178,22 @@ const emit = defineEmits([
   "click",
 ]);
 
-const { bodyAttrs, wrapperAttrs, hasSlotContent } = useAttrs(props);
+const { bodyAttrs, wrapperAttrs, leftIconAttrs, rightIconAttrs, hasSlotContent } = useAttrs(props);
 
 const wrapperRef = ref(null);
 
 defineExpose({ wrapperRef });
 
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
 function onFocus() {
   emit("focus");
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.283",
+  "version": "0.0.284",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -686,6 +686,24 @@
               },
               "default": "md"
             },
+            {
+              "name": "leftIcon",
+              "description": "Left side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "rightIcon",
+              "description": "Right side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "weight",
               "description": "Badge font weight.",
@@ -746,10 +764,48 @@
               "name": "left",
               "description": "Use it to add something before text."
             },
+            {
+              "name": "left-icon",
+              "scoped": true,
+              "description": "Use it to add icon before the text.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-color"
+                }
+              ]
+            },
             {
               "name": "default",
               "description": "Use it to add something instead of text."
             },
+            {
+              "name": "right-icon",
+              "scoped": true,
+              "description": "Use it to add icon after the text.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-color"
+                }
+              ]
+            },
             {
               "name": "right",
               "description": "Use it to add something after text."