@henriquepetrelli/hp-design-system 1.1.23 → 1.1.25

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

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, unref, createCommentVNode, createVNode, toDisplayString, createBlock, onMounted, onUnmounted, Fragment, renderList, ref, watch, renderSlot, resolveDynamicComponent, withCtx, Transition, withModifiers, withKeys, withDirectives, vModelCheckbox, onBeforeUnmount, createTextVNode, vModelText, vShow } from 'vue';
+import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, unref, createCommentVNode, createVNode, toDisplayString, createBlock, onMounted, onUnmounted, renderSlot, Fragment, renderList, ref, watch, resolveDynamicComponent, withCtx, Transition, withModifiers, withKeys, withDirectives, vModelCheckbox, onBeforeUnmount, createTextVNode, vModelText, vShow } from 'vue';
 
 var ButtonColor = /* @__PURE__ */ ((ButtonColor2) => {
   ButtonColor2["PRIMARY"] = "primary";
@@ -19,8 +19,8 @@ var ButtonSize = /* @__PURE__ */ ((ButtonSize2) => {
   return ButtonSize2;
 })(ButtonSize || {});
 
-const _hoisted_1$g = ["xlink:href"];
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = ["xlink:href"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     name: {
@@ -54,7 +54,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("use", {
           "xlink:href": `#icon-${__props.name}`
-        }, null, 8, _hoisted_1$g)
+        }, null, 8, _hoisted_1$h)
       ], 6);
     };
   }
@@ -68,18 +68,18 @@ const _export_sfc = (sfc, props) => {
   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__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "ButtonPrimary",
   props: {
     label: {
@@ -152,7 +152,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         disabled: __props.disabled,
         onClick: handleClick
       }, [
-        __props.icon && __props.iconPosition === unref(IconPosition).LEFT ? (openBlock(), createElementBlock("span", _hoisted_2$e, [
+        __props.icon && __props.iconPosition === unref(IconPosition).LEFT ? (openBlock(), createElementBlock("span", _hoisted_2$f, [
           createVNode(HpIcon, {
             name: __props.icon,
             size: "sm",
@@ -163,31 +163,31 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           class: "button-primary__label",
           style: normalizeStyle({ color: computedColor.value })
         }, toDisplayString(__props.label), 5),
-        __props.icon && __props.iconPosition === unref(IconPosition).RIGHT ? (openBlock(), createElementBlock("span", _hoisted_3$c, [
+        __props.icon && __props.iconPosition === unref(IconPosition).RIGHT ? (openBlock(), createElementBlock("span", _hoisted_3$d, [
           createVNode(HpIcon, {
             name: __props.icon,
             size: "sm",
             color: computedColor.value
           }, null, 8, ["name", "color"])
         ])) : 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__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "ButtonSecondary",
   props: {
     label: {
@@ -245,37 +245,37 @@ 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"
           }, null, 8, ["name"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$b, toDisplayString(__props.label), 1),
+        createElementVNode("span", _hoisted_3$c, toDisplayString(__props.label), 1),
         __props.icon && __props.iconPosition === unref(IconPosition).RIGHT ? (openBlock(), createElementBlock("span", _hoisted_4$8, [
           createVNode(HpIcon, {
             name: __props.icon,
             size: "sm"
           }, null, 8, ["name"])
         ])) : 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__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ButtonTertiary",
   props: {
     label: {
@@ -333,25 +333,25 @@ 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"
           }, null, 8, ["name"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$a, toDisplayString(__props.label), 1),
+        createElementVNode("span", _hoisted_3$b, toDisplayString(__props.label), 1),
         __props.icon && __props.iconPosition === unref(IconPosition).RIGHT ? (openBlock(), createElementBlock("span", _hoisted_4$7, [
           createVNode(HpIcon, {
             name: __props.icon,
             size: "sm"
           }, null, 8, ["name"])
         ])) : 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";
@@ -378,8 +378,8 @@ const convertHexToRgb = (color) => {
   return "";
 };
 
-const _hoisted_1$c = ["aria-label", "tabindex", "aria-disabled", "disabled"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = ["aria-label", "tabindex", "aria-disabled", "disabled"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ButtonIcon",
   props: {
     label: {
@@ -469,12 +469,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           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";
@@ -483,9 +483,9 @@ var ButtonLetterSize = /* @__PURE__ */ ((ButtonLetterSize2) => {
   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({
+const _hoisted_1$c = ["aria-label", "aria-disabled", "disabled", "tabindex"];
+const _hoisted_2$c = { key: 0 };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "ButtonLetter",
   props: {
     label: {
@@ -568,7 +568,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           color: computedLetterColor.value
         })
       }, [
-        !__props.isLoading ? (openBlock(), createElementBlock("span", _hoisted_2$b, toDisplayString(__props.letter), 1)) : (openBlock(), createBlock(unref(_sfc_main$b), {
+        !__props.isLoading ? (openBlock(), createElementBlock("span", _hoisted_2$c, toDisplayString(__props.letter), 1)) : (openBlock(), createBlock(unref(_sfc_main$b), {
           key: 1,
           type: "circle1",
           color: computedLetterColor.value || "var(--color-primary)",
@@ -576,12 +576,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           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";
@@ -591,9 +591,9 @@ var AlertType = /* @__PURE__ */ ((AlertType2) => {
   return AlertType2;
 })(AlertType || {});
 
-const _hoisted_1$a = { class: "alert" };
-const _hoisted_2$a = { class: "alert__container__message" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b = { class: "alert" };
+const _hoisted_2$b = { class: "alert__container__message" };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Alert",
   props: {
     message: {
@@ -656,7 +656,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return props.type;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("section", _hoisted_1$a, [
+      return openBlock(), createElementBlock("section", _hoisted_1$b, [
         createElementVNode("div", {
           class: "alert__container",
           style: normalizeStyle({
@@ -664,7 +664,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             "--color": computedColorType.value
           })
         }, [
-          createElementVNode("p", _hoisted_2$a, toDisplayString(__props.message), 1),
+          createElementVNode("p", _hoisted_2$b, toDisplayString(__props.message), 1),
           createVNode(unref(HpButtonIcon), {
             class: "alert__container__icon",
             label: "Fechar modal",
@@ -680,7 +680,64 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ 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 = computed(() => ({
+      [`card--${props.variant}`]: true,
+      "card--interactive": props.interactive
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("article", {
+        class: normalizeClass(["card", cardClasses.value]),
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId
+      }, [
+        _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1$a, [
+          renderSlot(_ctx.$slots, "header", {}, void 0, true)
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$a, [
+          __props.title ? (openBlock(), createElementBlock("h3", {
+            key: 0,
+            id: titleId,
+            class: "card__title"
+          }, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+          __props.description ? (openBlock(), createElementBlock("p", {
+            key: 1,
+            id: descriptionId,
+            class: "card__description"
+          }, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$a, [
+          renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+const Card = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-2b489100"]]);
 
 var SpinnerLoaderSize = /* @__PURE__ */ ((SpinnerLoaderSize2) => {
   SpinnerLoaderSize2["SMALL"] = "sm";
@@ -2767,6 +2824,7 @@ const components = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty
   HpButtonPrimary,
   HpButtonSecondary,
   HpButtonTertiary: ButtonTertiary,
+  HpCard: Card,
   HpCheckbox: Checkbox,
   HpHeading: Heading,
   HpIcon,
@@ -2817,5 +2875,5 @@ const index = {
   ...components
 };
 
-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 };
+export { Alert as HpAlert, HpButtonIcon, ButtonLetter as HpButtonLetter, HpButtonPrimary, HpButtonSecondary, ButtonTertiary as HpButtonTertiary, Card as HpCard, 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