@rebilly/revel 4.5.1 → 4.6.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [4.6.0](https://github.com/Rebilly/rebilly/compare/revel-v4.5.1...revel-v4.6.0) (2023-05-16)
+
+
+### Features
+
+* **revel:** Add icon to r-button component ([#254](https://github.com/Rebilly/rebilly/issues/254)) ([e1aa0c6](https://github.com/Rebilly/rebilly/commit/e1aa0c6ff545f4f14caf8990cedea44bdc4583a5))
+
 ## [4.5.1](https://github.com/Rebilly/rebilly/compare/revel-v4.5.0...revel-v4.5.1) (2023-05-12)
 
 

package/dist/revel.es.js

@@ -1,4 +1,4 @@
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, resolveDirective, mergeProps, withDirectives, renderSlot, vShow, resolveComponent, toDisplayString, createCommentVNode, createVNode, createTextVNode, createBlock, withKeys, withModifiers, reactive, computed, h, Transition, withCtx, normalizeStyle, Fragment, renderList, resolveDynamicComponent, toHandlers, vModelText, inject, toRefs, ref, render } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, resolveDirective, mergeProps, withDirectives, renderSlot, vShow, resolveComponent, toDisplayString, createCommentVNode, createVNode, createTextVNode, createBlock, withKeys, withModifiers, Fragment, reactive, computed, h, Transition, withCtx, normalizeStyle, renderList, resolveDynamicComponent, toHandlers, vModelText, inject, toRefs, ref, render } from 'vue';
 import moment$2 from 'moment';
 
 var tokens$1 = '';
@@ -1778,6 +1778,27 @@ const _sfc_main$t = {
       type: Boolean,
       default: true,
     },
+    /**
+     * Append icon to the left side of the button
+     */
+    iconLeft: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Append icon to the right side of the button
+     */
+    iconRight: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Displays only icon
+     */
+    icon: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
@@ -1789,14 +1810,23 @@ const _sfc_main$t = {
   },
   computed: {
     classes() {
+      const iconStyles = {
+        'r-has-icon-left': Boolean(this.iconLeft),
+        'r-has-icon-right': Boolean(this.iconRight),
+        'r-has-icon': Boolean(this.icon),
+      };
       if (this.link && this.type === 'unstyled') {
-        return 'r-button-type-link';
+        return {
+          'r-button-type-link': true,
+          ...iconStyles,
+        };
       }
       return {
         [`r-button-size-${this.size}`]: !!this.size,
         [`r-button-type-${this.type}`]: !!this.type,
         'r-button-fluid': !!this.fluid,
         'r-is-active': !!this.active,
+        ...iconStyles,
       };
     },
     title() {
@@ -1829,7 +1859,7 @@ const _hoisted_2$i = {
 };
 const _hoisted_3$c = ["role", "disabled", "title"];
 const _hoisted_4$c = {
-  key: 1,
+  key: 0,
   class: "r-capitalize-first-letter",
   role: "button"
 };
@@ -1840,20 +1870,39 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return ($props.link)
     ? (openBlock(), createElementBlock("a", {
         key: 0,
-        role: "button",
+        role: "link",
         class: normalizeClass(["r-button", $options.classes]),
         href: $options.href,
         target: _ctx.$attrs.href ? '_target' : _ctx.$attrs.target || ''
       }, [
-        ($props.capitalizeFirstLetter)
-          ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
-              renderSlot(_ctx.$slots, "default", {}, () => [
-                createTextVNode("Link")
-              ])
-            ]))
-          : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
-              createTextVNode("Apply")
-            ])
+        ($props.iconLeft)
+          ? (openBlock(), createBlock(_component_r_icon, {
+              key: 0,
+              icon: $props.iconLeft
+            }, null, 8, ["icon"]))
+          : createCommentVNode("", true),
+        ($props.icon)
+          ? (openBlock(), createBlock(_component_r_icon, {
+              key: 1,
+              icon: $props.icon
+            }, null, 8, ["icon"]))
+          : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              ($props.capitalizeFirstLetter)
+                ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
+                    renderSlot(_ctx.$slots, "default", {}, () => [
+                      createTextVNode("Link")
+                    ])
+                  ]))
+                : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
+                    createTextVNode("Apply")
+                  ])
+            ], 64)),
+        ($props.iconRight)
+          ? (openBlock(), createBlock(_component_r_icon, {
+              key: 3,
+              icon: $props.iconRight
+            }, null, 8, ["icon"]))
+          : createCommentVNode("", true)
       ], 10, _hoisted_1$o))
     : (openBlock(), createElementBlock("button", mergeProps({
         key: 1,
@@ -1868,15 +1917,34 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
               class: "r-is-spinning r-icon-light-gray r-inline-3"
             }))
           : createCommentVNode("", true),
-        ($props.capitalizeFirstLetter)
-          ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
-              renderSlot(_ctx.$slots, "default", {}, () => [
-                createTextVNode("Apply")
-              ])
-            ]))
-          : renderSlot(_ctx.$slots, "default", { key: 2 }, () => [
-              createTextVNode("Apply")
-            ])
+        ($props.iconLeft && !$props.loading)
+          ? (openBlock(), createBlock(_component_r_icon, {
+              key: 1,
+              icon: $props.iconLeft
+            }, null, 8, ["icon"]))
+          : createCommentVNode("", true),
+        ($props.icon)
+          ? (openBlock(), createBlock(_component_r_icon, {
+              key: 2,
+              icon: $props.icon
+            }, null, 8, ["icon"]))
+          : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+              ($props.capitalizeFirstLetter)
+                ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
+                    renderSlot(_ctx.$slots, "default", {}, () => [
+                      createTextVNode("Apply")
+                    ])
+                  ]))
+                : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
+                    createTextVNode("Apply")
+                  ])
+            ], 64)),
+        ($props.iconRight)
+          ? (openBlock(), createBlock(_component_r_icon, {
+              key: 4,
+              icon: $props.iconRight
+            }, null, 8, ["icon"]))
+          : createCommentVNode("", true)
       ], 16, _hoisted_3$c))
 }
 var RButton = /*#__PURE__*/_export_sfc$1(_sfc_main$t, [['render',_sfc_render$t]]);