@henriquepetrelli/hp-design-system 1.1.12 → 1.1.13

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";
@@ -375,8 +375,8 @@ const convertHexToRgb = (color) => {
   return "0, 0, 0";
 };
 
-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: {
@@ -466,12 +466,113 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           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-32ab443d"]]);
+
+var ButtonLetterSize = /* @__PURE__ */ ((ButtonLetterSize2) => {
+  ButtonLetterSize2["SMALL"] = "sm";
+  ButtonLetterSize2["REGULAR"] = "md";
+  ButtonLetterSize2["LARGE"] = "lg";
+  return ButtonLetterSize2;
+})(ButtonLetterSize || {});
+
+const _hoisted_1$b = ["aria-label", "tabindex", "aria-disabled", "disabled"];
+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,
+      defualt: 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) {
+        emit("action:click", event);
+      }
+    };
+    const computedLetterColor = computed(() => {
+      if (props.backgroundColor || props.hasBackground)
+        return props.letterColor || "#fff";
+      else return props.letterColor || "var(--color-primary)";
+    });
+    const computedBackgroundColor = computed(() => {
+      if (props.backgroundColor) return props.backgroundColor;
+      if (props.hasBackground) return "var(--color-primary)";
+      return "transparent";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        onClick: handleClick,
+        "aria-label": __props.label,
+        tabindex: __props.tabindex,
+        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": unref(convertHexToRgb)(computedLetterColor.value)
+        }),
+        "aria-disabled": __props.disabled || __props.isLoading,
+        disabled: __props.disabled || __props.isLoading
+      }, [
+        !__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
+        }, null, 8, ["color", "secondaryColor", "size"]))
       ], 14, _hoisted_1$b);
     };
   }
 });
 
-const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-32ab443d"]]);
+const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-4df7cc96"]]);
 
 var AlertType = /* @__PURE__ */ ((AlertType2) => {
   AlertType2["WARNING"] = "warning";
@@ -2589,6 +2690,7 @@ const components = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty
   __proto__: null,
   HpAlert: Alert,
   HpButtonIcon,
+  HpButtonLetter: ButtonLetter,
   HpButtonPrimary,
   HpButtonSecondary,
   HpButtonTertiary: ButtonTertiary,
@@ -2642,5 +2744,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