@henriquepetrelli/hp-design-system 1.1.23 → 1.1.25

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

@@ -23,8 +23,8 @@
     return ButtonSize2;
   })(ButtonSize || {});
 
-  const _hoisted_1$g = ["xlink:href"];
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$h = ["xlink:href"];
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "Icon",
     props: {
       name: {
@@ -58,7 +58,7 @@
         }, [
           vue.createElementVNode("use", {
             "xlink:href": `#icon-${__props.name}`
-          }, null, 8, _hoisted_1$g)
+          }, null, 8, _hoisted_1$h)
         ], 6);
       };
     }
@@ -72,18 +72,18 @@
     return target;
   };
 
-  const HpIcon = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-0b477588"]]);
+  const HpIcon = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-0b477588"]]);
 
-  const _hoisted_1$f = ["aria-label", "aria-disabled", "disabled"];
-  const _hoisted_2$e = {
+  const _hoisted_1$g = ["aria-label", "aria-disabled", "disabled"];
+  const _hoisted_2$f = {
     key: 0,
     class: "button-primary__icon--left"
   };
-  const _hoisted_3$c = {
+  const _hoisted_3$d = {
     key: 1,
     class: "button-primary__icon--right"
   };
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__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$e, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$f, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm",
@@ -167,31 +167,31 @@
             class: "button-primary__label",
             style: vue.normalizeStyle({ color: computedColor.value })
           }, vue.toDisplayString(__props.label), 5),
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$c, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$d, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm",
               color: computedColor.value
             }, null, 8, ["name", "color"])
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$f);
+        ], 14, _hoisted_1$g);
       };
     }
   });
 
-  const HpButtonPrimary = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-5c29dcce"]]);
+  const HpButtonPrimary = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-5c29dcce"]]);
 
-  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-secondary__icon--left"
   };
-  const _hoisted_3$b = { class: "button-secondary__label" };
+  const _hoisted_3$c = { class: "button-secondary__label" };
   const _hoisted_4$8 = {
     key: 1,
     class: "button-secondary__icon--right"
   };
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonSecondary",
     props: {
       label: {
@@ -249,37 +249,37 @@
           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"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("span", _hoisted_3$b, vue.toDisplayString(__props.label), 1),
+          vue.createElementVNode("span", _hoisted_3$c, vue.toDisplayString(__props.label), 1),
           __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$8, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$e);
+        ], 14, _hoisted_1$f);
       };
     }
   });
 
-  const HpButtonSecondary = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-ce9350e4"]]);
+  const HpButtonSecondary = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-ce9350e4"]]);
 
-  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-tertiary__icon--left"
   };
-  const _hoisted_3$a = { class: "button-tertiary__label" };
+  const _hoisted_3$b = { class: "button-tertiary__label" };
   const _hoisted_4$7 = {
     key: 1,
     class: "button-tertiary__icon--right"
   };
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonTertiary",
     props: {
       label: {
@@ -337,25 +337,25 @@
           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"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("span", _hoisted_3$a, vue.toDisplayString(__props.label), 1),
+          vue.createElementVNode("span", _hoisted_3$b, vue.toDisplayString(__props.label), 1),
           __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$7, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$d);
+        ], 14, _hoisted_1$e);
       };
     }
   });
 
-  const ButtonTertiary = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-0401b00e"]]);
+  const ButtonTertiary = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-0401b00e"]]);
 
   var ButtonIconSize = /* @__PURE__ */ ((ButtonIconSize2) => {
     ButtonIconSize2["SMALL"] = "sm";
@@ -382,8 +382,8 @@
     return "";
   };
 
-  const _hoisted_1$c = ["aria-label", "tabindex", "aria-disabled", "disabled"];
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$d = ["aria-label", "tabindex", "aria-disabled", "disabled"];
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonIcon",
     props: {
       label: {
@@ -473,12 +473,12 @@
             size: __props.size,
             speed: 0.8
           }, null, 8, ["color", "secondaryColor", "size"]))
-        ], 14, _hoisted_1$c);
+        ], 14, _hoisted_1$d);
       };
     }
   });
 
-  const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-8cf8a123"]]);
+  const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-8cf8a123"]]);
 
   var ButtonLetterSize = /* @__PURE__ */ ((ButtonLetterSize2) => {
     ButtonLetterSize2["SMALL"] = "sm";
@@ -487,9 +487,9 @@
     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({
+  const _hoisted_1$c = ["aria-label", "aria-disabled", "disabled", "tabindex"];
+  const _hoisted_2$c = { key: 0 };
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonLetter",
     props: {
       label: {
@@ -572,7 +572,7 @@
             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), {
+          !__props.isLoading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$c, vue.toDisplayString(__props.letter), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$b), {
             key: 1,
             type: "circle1",
             color: computedLetterColor.value || "var(--color-primary)",
@@ -580,12 +580,12 @@
             size: __props.size,
             speed: 0.8
           }, null, 8, ["color", "secondaryColor", "size"]))
-        ], 14, _hoisted_1$b);
+        ], 14, _hoisted_1$c);
       };
     }
   });
 
-  const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-13b75270"]]);
+  const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-13b75270"]]);
 
   var AlertType = /* @__PURE__ */ ((AlertType2) => {
     AlertType2["WARNING"] = "warning";
@@ -595,9 +595,9 @@
     return AlertType2;
   })(AlertType || {});
 
-  const _hoisted_1$a = { class: "alert" };
-  const _hoisted_2$a = { class: "alert__container__message" };
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$b = { class: "alert" };
+  const _hoisted_2$b = { class: "alert__container__message" };
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "Alert",
     props: {
       message: {
@@ -660,7 +660,7 @@
         return props.type;
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("section", _hoisted_1$a, [
+        return vue.openBlock(), vue.createElementBlock("section", _hoisted_1$b, [
           vue.createElementVNode("div", {
             class: "alert__container",
             style: vue.normalizeStyle({
@@ -668,7 +668,7 @@
               "--color": computedColorType.value
             })
           }, [
-            vue.createElementVNode("p", _hoisted_2$a, vue.toDisplayString(__props.message), 1),
+            vue.createElementVNode("p", _hoisted_2$b, vue.toDisplayString(__props.message), 1),
             vue.createVNode(vue.unref(HpButtonIcon), {
               class: "alert__container__icon",
               label: "Fechar modal",
@@ -684,7 +684,64 @@
     }
   });
 
-  const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-10dcca72"]]);
+  const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-10dcca72"]]);
+
+  const _hoisted_1$a = {
+    key: 0,
+    class: "card__header"
+  };
+  const _hoisted_2$a = { class: "card__body" };
+  const _hoisted_3$a = {
+    key: 1,
+    class: "card__footer"
+  };
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+    __name: "Card",
+    props: {
+      title: { type: String, default: "" },
+      description: { type: String, default: "" },
+      variant: { type: String, default: "default" },
+      interactive: { type: Boolean, default: false }
+    },
+    setup(__props) {
+      const props = __props;
+      const titleId = `card-title-${Math.random().toString(36).slice(2)}`;
+      const descriptionId = `card-desc-${Math.random().toString(36).slice(2)}`;
+      const cardClasses = vue.computed(() => ({
+        [`card--${props.variant}`]: true,
+        "card--interactive": props.interactive
+      }));
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("article", {
+          class: vue.normalizeClass(["card", cardClasses.value]),
+          "aria-labelledby": titleId,
+          "aria-describedby": descriptionId
+        }, [
+          _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$a, [
+            vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_2$a, [
+            __props.title ? (vue.openBlock(), vue.createElementBlock("h3", {
+              key: 0,
+              id: titleId,
+              class: "card__title"
+            }, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true),
+            __props.description ? (vue.openBlock(), vue.createElementBlock("p", {
+              key: 1,
+              id: descriptionId,
+              class: "card__description"
+            }, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true),
+            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_3$a, [
+            vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+          ])) : vue.createCommentVNode("", true)
+        ], 2);
+      };
+    }
+  });
+
+  const Card = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-2b489100"]]);
 
   var SpinnerLoaderSize = /* @__PURE__ */ ((SpinnerLoaderSize2) => {
     SpinnerLoaderSize2["SMALL"] = "sm";
@@ -2771,6 +2828,7 @@
     HpButtonPrimary,
     HpButtonSecondary,
     HpButtonTertiary: ButtonTertiary,
+    HpCard: Card,
     HpCheckbox: Checkbox,
     HpHeading: Heading,
     HpIcon,
@@ -2827,6 +2885,7 @@
   exports.HpButtonPrimary = HpButtonPrimary;
   exports.HpButtonSecondary = HpButtonSecondary;
   exports.HpButtonTertiary = ButtonTertiary;
+  exports.HpCard = Card;
   exports.HpCheckbox = Checkbox;
   exports.HpHeading = Heading;
   exports.HpIcon = HpIcon;