@rebilly/revel 4.5.1 → 4.7.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.7.0](https://github.com/Rebilly/rebilly/compare/revel-v4.6.0...revel-v4.7.0) (2023-05-17)
+
+
+### Features
+
+* **revel:** Update r-button icon loading states ([#264](https://github.com/Rebilly/rebilly/issues/264)) ([97896a5](https://github.com/Rebilly/rebilly/commit/97896a5cabcea9306fe46a377f0cac322661dec1))
+
+## [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,
@@ -1865,18 +1914,39 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
           ? (openBlock(), createBlock(_component_r_icon, {
               key: 0,
               icon: "loading",
-              class: "r-is-spinning r-icon-light-gray r-inline-3"
-            }))
+              class: normalizeClass(["r-is-spinning r-icon-light-gray", { 'r-inline-3': !$props.icon }])
+            }, null, 8, ["class"]))
           : 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 && !$props.loading)
+          ? (openBlock(), createBlock(_component_r_icon, {
+              key: 2,
+              icon: $props.icon
+            }, null, 8, ["icon"]))
+          : (!$props.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))
+            : createCommentVNode("", true),
+        ($props.iconRight && !$props.loading)
+          ? (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]]);
@@ -17248,7 +17318,6 @@ const _sfc_main$b = {
   components: {
     RLoader,
     RButton,
-    RIcon: rIcon,
   },
   props: {
     /**
@@ -17391,7 +17460,6 @@ const _hoisted_8$2 = {
 };
 
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_r_icon = resolveComponent("r-icon");
   const _component_r_button = resolveComponent("r-button");
   const _component_r_loader = resolveComponent("r-loader");
 
@@ -17435,15 +17503,12 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
                               ]))
                             : createCommentVNode("", true),
                           createVNode(_component_r_button, {
-                            type: "link",
+                            type: "plain",
+                            size: "small",
                             class: "r-modal-btn-close",
                             "aria-label": "close",
+                            icon: "close",
                             onClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('close')))
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(_component_r_icon, { icon: "close" })
-                            ]),
-                            _: 1
                           })
                         ]))
                       : createCommentVNode("", true),