@henriquepetrelli/hp-design-system 1.1.12 → 1.1.14

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

@@ -19,8 +19,8 @@ var ButtonSize = /* @__PURE__ */ ((ButtonSize2) => {
   return ButtonSize2;
 })(ButtonSize || {});
 
-const _hoisted_1$f = ["xlink:href"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$g = ["xlink:href"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     name: {
@@ -54,7 +54,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("use", {
           "xlink:href": `#icon-${__props.name}`
-        }, null, 8, _hoisted_1$f)
+        }, null, 8, _hoisted_1$g)
       ], 6);
     };
   }
@@ -68,10 +68,10 @@ const _export_sfc = (sfc, props) => {
   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"
 };
@@ -79,7 +79,7 @@ const _hoisted_3$c = {
   key: 1,
   class: "button-primary__icon--right"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "ButtonPrimary",
   props: {
     label: {
@@ -152,7 +152,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         disabled: __props.disabled,
         onClick: handleClick
       }, [
-        __props.icon && __props.iconPosition === unref(IconPosition).LEFT ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
+        __props.icon && __props.iconPosition === unref(IconPosition).LEFT ? (openBlock(), createElementBlock("span", _hoisted_2$e, [
           createVNode(HpIcon, {
             name: __props.icon,
             size: "sm",
@@ -170,15 +170,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             color: computedColor.value
           }, null, 8, ["name", "color"])
         ])) : 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"
 };
@@ -187,7 +187,7 @@ const _hoisted_4$7 = {
   key: 1,
   class: "button-secondary__icon--right"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ButtonSecondary",
   props: {
     label: {
@@ -245,7 +245,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         disabled: __props.disabled,
         onClick: handleClick
       }, [
-        __props.icon && __props.iconPosition === unref(IconPosition).LEFT ? (openBlock(), createElementBlock("span", _hoisted_2$c, [
+        __props.icon && __props.iconPosition === unref(IconPosition).LEFT ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
           createVNode(HpIcon, {
             name: __props.icon,
             size: "sm"
@@ -258,15 +258,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             size: "sm"
           }, null, 8, ["name"])
         ])) : 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"
 };
@@ -275,7 +275,7 @@ const _hoisted_4$6 = {
   key: 1,
   class: "button-tertiary__icon--right"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ButtonTertiary",
   props: {
     label: {
@@ -333,7 +333,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         disabled: __props.disabled,
         onClick: handleClick
       }, [
-        __props.icon && __props.iconPosition === unref(IconPosition).LEFT ? (openBlock(), createElementBlock("span", _hoisted_2$b, [
+        __props.icon && __props.iconPosition === unref(IconPosition).LEFT ? (openBlock(), createElementBlock("span", _hoisted_2$c, [
           createVNode(HpIcon, {
             name: __props.icon,
             size: "sm"
@@ -346,12 +346,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             size: "sm"
           }, null, 8, ["name"])
         ])) : 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";
@@ -361,7 +361,10 @@ var ButtonIconSize = /* @__PURE__ */ ((ButtonIconSize2) => {
 })(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);
@@ -369,14 +372,14 @@ const convertHexToRgb = (color) => {
     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__ */ defineComponent({
+const _hoisted_1$c = ["aria-label", "tabindex", "aria-disabled", "disabled"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "ButtonIcon",
   props: {
     label: {
@@ -427,7 +430,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     const computedIconColor = computed(() => {
       if (props.backgroundColor || props.hasBackground)
-        return props.iconColor || "#fff";
+        return props.iconColor || "#000000";
       else return props.iconColor || "var(--color-primary)";
     });
     const computedBackgroundColor = computed(() => {
@@ -461,7 +464,114 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         }, null, 8, ["name", "size", "color"])) : (openBlock(), createBlock(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__ */ 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 = computed(() => {
+      if (props.hasBackground || props.backgroundColor) {
+        return props.letterColor || "#000000";
+      }
+      return props.letterColor || "var(--color-primary)";
+    });
+    const computedBackgroundColor = computed(() => {
+      if (props.backgroundColor) return props.backgroundColor;
+      if (props.hasBackground) return "var(--color-primary)";
+      return "transparent";
+    });
+    const letterColorRgb = computed(() => {
+      const color = computedLetterColor.value;
+      return color ? convertHexToRgb(color) : "";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), 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: normalizeClass(["button-letter", {
+          "button-letter--sm": __props.size === unref(ButtonLetterSize).SMALL,
+          "button-letter--lg": __props.size === unref(ButtonLetterSize).LARGE,
+          "button-letter--disabled": __props.disabled,
+          "button-letter--is-loading": __props.isLoading
+        }]),
+        style: normalizeStyle({
+          "--background-color": computedBackgroundColor.value,
+          "--letter-color-rgb": letterColorRgb.value,
+          color: computedLetterColor.value
+        })
+      }, [
+        !__props.isLoading ? (openBlock(), createElementBlock("span", _hoisted_2$b, toDisplayString(__props.letter), 1)) : (openBlock(), createBlock(unref(_sfc_main$b), {
+          key: 1,
+          type: "circle1",
+          color: computedLetterColor.value || "var(--color-primary)",
           secondaryColor: computedBackgroundColor.value,
           size: __props.size,
           speed: 0.8
@@ -471,7 +581,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-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";
@@ -2589,6 +2699,7 @@ const components = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty
   __proto__: null,
   HpAlert: Alert,
   HpButtonIcon,
+  HpButtonLetter: ButtonLetter,
   HpButtonPrimary,
   HpButtonSecondary,
   HpButtonTertiary: ButtonTertiary,
@@ -2642,5 +2753,5 @@ const index = {
   ...components
 };
 
-export { Alert as HpAlert, HpButtonIcon, HpButtonPrimary, HpButtonSecondary, ButtonTertiary as HpButtonTertiary, Checkbox as HpCheckbox, Heading as HpHeading, HpIcon, InputNumber as HpInputNumber, InputRange as HpInputRange, InputSelect as HpInputSelect, InputText as HpInputText, Modal as HpModal, RadioButton as HpRadioButton, _sfc_main$b as HpSpinnerLoader, Text as HpText, ThemeSwitcher as HpThemeSwitcher, ToggleSwitch as HpToggleSwitch, index as default };
+export { Alert as HpAlert, HpButtonIcon, ButtonLetter as HpButtonLetter, HpButtonPrimary, HpButtonSecondary, ButtonTertiary as HpButtonTertiary, Checkbox as HpCheckbox, Heading as HpHeading, HpIcon, InputNumber as HpInputNumber, InputRange as HpInputRange, InputSelect as HpInputSelect, InputText as HpInputText, Modal as HpModal, RadioButton as HpRadioButton, _sfc_main$b as HpSpinnerLoader, Text as HpText, ThemeSwitcher as HpThemeSwitcher, ToggleSwitch as HpToggleSwitch, index as default };
 //# sourceMappingURL=hp-design-system.es.js.map