@henriquepetrelli/hp-design-system 1.1.12 → 1.1.14

package/dist/hp-design-system.umd.js

@@ -23,8 +23,8 @@
     return ButtonSize2;
   })(ButtonSize || {});
 
-  const _hoisted_1$f = ["xlink:href"];
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$g = ["xlink:href"];
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "Icon",
     props: {
       name: {
@@ -58,7 +58,7 @@
         }, [
           vue.createElementVNode("use", {
             "xlink:href": `#icon-${__props.name}`
-          }, null, 8, _hoisted_1$f)
+          }, null, 8, _hoisted_1$g)
         ], 6);
       };
     }
@@ -72,10 +72,10 @@
     return target;
   };
 
-  const HpIcon = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-0b477588"]]);
+  const HpIcon = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-0b477588"]]);
 
-  const _hoisted_1$e = ["aria-label", "aria-disabled", "disabled"];
-  const _hoisted_2$d = {
+  const _hoisted_1$f = ["aria-label", "aria-disabled", "disabled"];
+  const _hoisted_2$e = {
     key: 0,
     class: "button-primary__icon--left"
   };
@@ -83,7 +83,7 @@
     key: 1,
     class: "button-primary__icon--right"
   };
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonPrimary",
     props: {
       label: {
@@ -156,7 +156,7 @@
           disabled: __props.disabled,
           onClick: handleClick
         }, [
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$d, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$e, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm",
@@ -174,15 +174,15 @@
               color: computedColor.value
             }, null, 8, ["name", "color"])
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$e);
+        ], 14, _hoisted_1$f);
       };
     }
   });
 
-  const HpButtonPrimary = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-5c29dcce"]]);
+  const HpButtonPrimary = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-5c29dcce"]]);
 
-  const _hoisted_1$d = ["aria-label", "aria-disabled", "disabled"];
-  const _hoisted_2$c = {
+  const _hoisted_1$e = ["aria-label", "aria-disabled", "disabled"];
+  const _hoisted_2$d = {
     key: 0,
     class: "button-secondary__icon--left"
   };
@@ -191,7 +191,7 @@
     key: 1,
     class: "button-secondary__icon--right"
   };
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonSecondary",
     props: {
       label: {
@@ -249,7 +249,7 @@
           disabled: __props.disabled,
           onClick: handleClick
         }, [
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$c, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$d, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
@@ -262,15 +262,15 @@
               size: "sm"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$d);
+        ], 14, _hoisted_1$e);
       };
     }
   });
 
-  const HpButtonSecondary = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-ce9350e4"]]);
+  const HpButtonSecondary = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-ce9350e4"]]);
 
-  const _hoisted_1$c = ["aria-label", "aria-disabled", "disabled"];
-  const _hoisted_2$b = {
+  const _hoisted_1$d = ["aria-label", "aria-disabled", "disabled"];
+  const _hoisted_2$c = {
     key: 0,
     class: "button-tertiary__icon--left"
   };
@@ -279,7 +279,7 @@
     key: 1,
     class: "button-tertiary__icon--right"
   };
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonTertiary",
     props: {
       label: {
@@ -337,7 +337,7 @@
           disabled: __props.disabled,
           onClick: handleClick
         }, [
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$b, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$c, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
@@ -350,12 +350,12 @@
               size: "sm"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$c);
+        ], 14, _hoisted_1$d);
       };
     }
   });
 
-  const ButtonTertiary = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-0401b00e"]]);
+  const ButtonTertiary = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-0401b00e"]]);
 
   var ButtonIconSize = /* @__PURE__ */ ((ButtonIconSize2) => {
     ButtonIconSize2["SMALL"] = "sm";
@@ -365,7 +365,10 @@
   })(ButtonIconSize || {});
 
   const convertHexToRgb = (color) => {
-    if (color.startsWith("var(--")) return "120, 120, 120";
+    if (!color) return "";
+    if (color.startsWith("var(")) {
+      return color;
+    }
     if (color.startsWith("#")) {
       const hex = color.replace("#", "");
       const r = parseInt(hex.substring(0, 2), 16);
@@ -373,14 +376,14 @@
       const b = parseInt(hex.substring(4, 6), 16);
       return `${r}, ${g}, ${b}`;
     }
-    if (color.includes("rgb(")) {
+    if (color.startsWith("rgb")) {
       return color.replace(/rgba?\(|\s|\)/g, "").split(",").slice(0, 3).join(", ");
     }
-    return "0, 0, 0";
+    return "";
   };
 
-  const _hoisted_1$b = ["aria-label", "tabindex", "aria-disabled", "disabled"];
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$c = ["aria-label", "tabindex", "aria-disabled", "disabled"];
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonIcon",
     props: {
       label: {
@@ -431,7 +434,7 @@
       };
       const computedIconColor = vue.computed(() => {
         if (props.backgroundColor || props.hasBackground)
-          return props.iconColor || "#fff";
+          return props.iconColor || "#000000";
         else return props.iconColor || "var(--color-primary)";
       });
       const computedBackgroundColor = vue.computed(() => {
@@ -465,7 +468,114 @@
           }, null, 8, ["name", "size", "color"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$b), {
             key: 1,
             type: "circle1",
-            color: computedIconColor.value || "var(--color-primary)",
+            color: computedIconColor.value || "#000",
+            secondaryColor: computedBackgroundColor.value,
+            size: __props.size,
+            speed: 0.8
+          }, null, 8, ["color", "secondaryColor", "size"]))
+        ], 14, _hoisted_1$c);
+      };
+    }
+  });
+
+  const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-8cf8a123"]]);
+
+  var ButtonLetterSize = /* @__PURE__ */ ((ButtonLetterSize2) => {
+    ButtonLetterSize2["SMALL"] = "sm";
+    ButtonLetterSize2["REGULAR"] = "md";
+    ButtonLetterSize2["LARGE"] = "lg";
+    return ButtonLetterSize2;
+  })(ButtonLetterSize || {});
+
+  const _hoisted_1$b = ["aria-label", "aria-disabled", "disabled", "tabindex"];
+  const _hoisted_2$b = { key: 0 };
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+    __name: "ButtonLetter",
+    props: {
+      label: {
+        type: String,
+        required: true
+      },
+      letter: {
+        type: String,
+        required: true
+      },
+      hasBackground: {
+        type: Boolean,
+        default: false
+      },
+      backgroundColor: {
+        type: String,
+        default: ""
+      },
+      letterColor: {
+        type: String,
+        default: ""
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      tabindex: {
+        type: Number,
+        default: 0
+      },
+      isLoading: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: String,
+        default: ButtonLetterSize.REGULAR
+      }
+    },
+    emits: ["action:click"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const handleClick = (event) => {
+        if (!props.disabled && !props.isLoading) {
+          emit("action:click", event);
+        }
+      };
+      const computedLetterColor = vue.computed(() => {
+        if (props.hasBackground || props.backgroundColor) {
+          return props.letterColor || "#000000";
+        }
+        return props.letterColor || "var(--color-primary)";
+      });
+      const computedBackgroundColor = vue.computed(() => {
+        if (props.backgroundColor) return props.backgroundColor;
+        if (props.hasBackground) return "var(--color-primary)";
+        return "transparent";
+      });
+      const letterColorRgb = vue.computed(() => {
+        const color = computedLetterColor.value;
+        return color ? convertHexToRgb(color) : "";
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("button", {
+          onClick: handleClick,
+          "aria-label": __props.label,
+          "aria-disabled": __props.disabled || __props.isLoading,
+          disabled: __props.disabled || __props.isLoading,
+          tabindex: __props.disabled ? -1 : 0,
+          class: vue.normalizeClass(["button-letter", {
+            "button-letter--sm": __props.size === vue.unref(ButtonLetterSize).SMALL,
+            "button-letter--lg": __props.size === vue.unref(ButtonLetterSize).LARGE,
+            "button-letter--disabled": __props.disabled,
+            "button-letter--is-loading": __props.isLoading
+          }]),
+          style: vue.normalizeStyle({
+            "--background-color": computedBackgroundColor.value,
+            "--letter-color-rgb": letterColorRgb.value,
+            color: computedLetterColor.value
+          })
+        }, [
+          !__props.isLoading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$b, vue.toDisplayString(__props.letter), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$b), {
+            key: 1,
+            type: "circle1",
+            color: computedLetterColor.value || "var(--color-primary)",
             secondaryColor: computedBackgroundColor.value,
             size: __props.size,
             speed: 0.8
@@ -475,7 +585,7 @@
     }
   });
 
-  const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-32ab443d"]]);
+  const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-13b75270"]]);
 
   var AlertType = /* @__PURE__ */ ((AlertType2) => {
     AlertType2["WARNING"] = "warning";
@@ -2593,6 +2703,7 @@
     __proto__: null,
     HpAlert: Alert,
     HpButtonIcon,
+    HpButtonLetter: ButtonLetter,
     HpButtonPrimary,
     HpButtonSecondary,
     HpButtonTertiary: ButtonTertiary,
@@ -2648,6 +2759,7 @@
 
   exports.HpAlert = Alert;
   exports.HpButtonIcon = HpButtonIcon;
+  exports.HpButtonLetter = ButtonLetter;
   exports.HpButtonPrimary = HpButtonPrimary;
   exports.HpButtonSecondary = HpButtonSecondary;
   exports.HpButtonTertiary = ButtonTertiary;