vueless 0.0.177 → 0.0.178

package/package.json

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

package/ui.button/index.stories.js

@@ -21,7 +21,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UButton },
+  components: { UButton, UIcon },
   setup() {
     const slots = getSlotNames(UButton.name);
 
@@ -43,7 +43,7 @@ const SlotTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || ""}
     </UButton>
   `,
 });
@@ -133,6 +133,16 @@ disabled.args = { disabled: true };
 export const colors = ColorTemplate.bind({});
 colors.args = {};
 
+export const iconLeft = DefaultTemplate.bind({});
+iconLeft.args = {
+  iconLeft: "star",
+};
+
+export const iconRight = DefaultTemplate.bind({});
+iconRight.args = {
+  iconRight: "star",
+};
+
 export const slotDefault = SlotTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
@@ -142,26 +152,26 @@ slotDefault.args = {
   `,
 };
 
-export const slotLeft = SlotTemplate.bind({});
-slotLeft.args = {
+export const iconLeftSlot = SlotTemplate.bind({});
+iconLeftSlot.args = {
   slotTemplate: `
     <template #left>
       <UIcon
         name="star"
-        color="gray"
-       />
+        color="green"
+      />
     </template>
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
+export const iconRightSlot = SlotTemplate.bind({});
+iconRightSlot.args = {
   slotTemplate: `
     <template #right>
       <UIcon
         name="star"
-        color="gray"
-       />
+        color="green"
+      />
     </template>
   `,
 };

package/ui.button/index.vue

@@ -11,19 +11,23 @@
     <template v-if="loading">
       <!-- Label is needed to prevent changing button height -->
       <div v-bind="textAttrs" tabindex="-1" class="invisible w-0" v-text="label" />
-      <ULoader :size="loaderSize" :color="loaderColor" v-bind="loaderAttrs" />
+      <ULoader :size="loaderSize" :color="componentColor" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>
-      <!-- @slot Use it to add something before text. -->
-      <slot name="left" />
+      <!-- @slot Use it to add icon before text. -->
+      <slot name="left">
+        <UIcon v-if="iconLeft" :name="iconLeft" :color="componentColor" />
+      </slot>
 
       <!-- @slot Use it to add something instead of text. -->
       <slot />
       <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
 
-      <!-- @slot Use it to add something after text. -->
-      <slot name="right" />
+      <!-- @slot Use it to add icon after text. -->
+      <slot name="right">
+        <UIcon v-if="iconRight" :name="iconRight" :color="componentColor" />
+      </slot>
     </template>
   </component>
 </template>
@@ -33,6 +37,7 @@ import { computed, ref } from "vue";
 
 import UIService, { getRandomId } from "../service.ui";
 import ULoader from "../ui.loader";
+import UIcon from "../ui.image-icon";
 
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
@@ -157,6 +162,22 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  /**
+   * Left side icon name.
+   */
+  iconLeft: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  iconRight: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits(["click"]);
@@ -180,7 +201,7 @@ const loaderSize = computed(() => {
   return sizes[props.size];
 });
 
-const loaderColor = computed(() => {
+const componentColor = computed(() => {
   return props.variant === "primary" ? "white" : props.color;
 });
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.177",
+  "version": "0.0.178",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -806,6 +806,24 @@
                 "type": "string"
               },
               "default": "\"\""
+            },
+            {
+              "name": "iconLeft",
+              "description": "Left side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "iconRight",
+              "description": "Right side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
             }
           ],
           "events": [
@@ -816,7 +834,7 @@
           "slots": [
             {
               "name": "left",
-              "description": "Use it to add something before text."
+              "description": "Use it to add icon before text."
             },
             {
               "name": "default",
@@ -824,7 +842,7 @@
             },
             {
               "name": "right",
-              "description": "Use it to add something after text."
+              "description": "Use it to add icon after text."
             }
           ],
           "source": {