@semplice-studio/pa-design-system 0.1.0

package/dist/components/PaHero/PaHero.vue.d.ts

@@ -0,0 +1,36 @@
+import type { PaImageRatio } from '../PaImage/PaImage.vue';
+export type PaHeroImagePosition = 'left' | 'right';
+export type PaHeroTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface PaHeroProps {
+    title?: string;
+    titleLevel?: PaHeroTitleLevel;
+    subtitle?: string;
+    body?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    imageRatio?: PaImageRatio;
+    imagePosition?: PaHeroImagePosition;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaHeroProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PaHeroProps> & Readonly<{}>, {
+    titleLevel: PaHeroTitleLevel;
+    imageRatio: PaImageRatio;
+    imagePosition: PaHeroImagePosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    breadcrumb?: (props: {}) => any;
+} & {
+    label?: (props: {}) => any;
+} & {
+    title?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+} & {
+    body?: (props: {}) => any;
+} & {
+    cta?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/PaHero/PaHero.vue.js

@@ -0,0 +1,8 @@
+import o from "./PaHero.vue2.js";
+/* empty css            */
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-bea851f8"]]);
+export {
+  f as default
+};
+//# sourceMappingURL=PaHero.vue.js.map

package/dist/components/PaHero/PaHero.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaHero.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/PaHero/PaHero.vue2.js

@@ -0,0 +1,101 @@
+import { defineComponent as k, useSlots as f, computed as s, openBlock as l, createElementBlock as o, createElementVNode as v, normalizeClass as p, renderSlot as i, createCommentVNode as a, createBlock as $, resolveDynamicComponent as S, withCtx as B, createTextVNode as n, toDisplayString as u, createVNode as C } from "vue";
+import N from "../PaImage/PaImage.vue.js";
+const P = ["aria-labelledby"], T = { class: "pa-hero__text" }, V = {
+  key: 0,
+  class: "pa-hero__breadcrumb"
+}, I = {
+  key: 1,
+  class: "pa-hero__label"
+}, A = {
+  key: 2,
+  class: "pa-hero__title-block"
+}, D = {
+  key: 1,
+  class: "pa-hero__subtitle"
+}, E = {
+  key: 2,
+  class: "pa-hero__body"
+}, H = {
+  key: 3,
+  class: "pa-hero__cta"
+}, L = {
+  key: 0,
+  class: "pa-hero__image-col"
+};
+let R = 0;
+function w() {
+  return ++R;
+}
+const q = /* @__PURE__ */ k({
+  __name: "PaHero",
+  props: {
+    title: {},
+    titleLevel: { default: 1 },
+    subtitle: {},
+    body: {},
+    imageSrc: {},
+    imageAlt: {},
+    imageRatio: { default: "3:2" },
+    imagePosition: { default: "right" }
+  },
+  setup(e) {
+    const r = e, c = f(), h = `pa-hero-${w()}__title`, d = s(() => !!c.title || !!r.title), m = s(() => !!c.subtitle || !!r.subtitle), b = s(() => !!c.body || !!r.body), _ = s(
+      () => d.value || m.value || b.value
+    ), y = s(() => d.value ? h : void 0), g = s(() => `h${r.titleLevel}`);
+    return (t, z) => (l(), o("section", {
+      class: "pa-hero",
+      "aria-labelledby": y.value
+    }, [
+      v("div", {
+        class: p(["pa-hero__inner", { "pa-hero__inner--image-left": e.imagePosition === "left" }])
+      }, [
+        v("div", T, [
+          t.$slots.breadcrumb ? (l(), o("div", V, [
+            i(t.$slots, "breadcrumb", {}, void 0, !0)
+          ])) : a("", !0),
+          t.$slots.label ? (l(), o("div", I, [
+            i(t.$slots, "label", {}, void 0, !0)
+          ])) : a("", !0),
+          _.value ? (l(), o("div", A, [
+            d.value ? (l(), $(S(g.value), {
+              key: 0,
+              id: h,
+              class: "pa-hero__title"
+            }, {
+              default: B(() => [
+                i(t.$slots, "title", {}, () => [
+                  n(u(e.title), 1)
+                ], !0)
+              ]),
+              _: 3
+            })) : a("", !0),
+            m.value ? (l(), o("h4", D, [
+              i(t.$slots, "subtitle", {}, () => [
+                n(u(e.subtitle), 1)
+              ], !0)
+            ])) : a("", !0),
+            b.value ? (l(), o("p", E, [
+              i(t.$slots, "body", {}, () => [
+                n(u(e.body), 1)
+              ], !0)
+            ])) : a("", !0)
+          ])) : a("", !0),
+          t.$slots.cta ? (l(), o("div", H, [
+            i(t.$slots, "cta", {}, void 0, !0)
+          ])) : a("", !0)
+        ]),
+        e.imageSrc ? (l(), o("div", L, [
+          C(N, {
+            src: e.imageSrc,
+            alt: e.imageAlt ?? "",
+            ratio: e.imageRatio
+          }, null, 8, ["src", "alt", "ratio"])
+        ])) : a("", !0)
+      ], 2)
+    ], 8, P));
+  }
+});
+export {
+  q as default
+};
+//# sourceMappingURL=PaHero.vue2.js.map

package/dist/components/PaHero/PaHero.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaHero.vue2.js","sources":["../../../src/components/PaHero/PaHero.vue"],"sourcesContent":["<script lang=\"ts\">\nlet heroUid = 0\nfunction nextHeroId() {\n  return ++heroUid\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport PaImage from '../PaImage/PaImage.vue'\nimport type { PaImageRatio } from '../PaImage/PaImage.vue'\n\nexport type PaHeroImagePosition = 'left' | 'right'\nexport type PaHeroTitleLevel = 1 | 2 | 3 | 4 | 5 | 6\n\nexport interface PaHeroProps {\n  title?: string\n  titleLevel?: PaHeroTitleLevel\n  subtitle?: string\n  body?: string\n  imageSrc?: string\n  imageAlt?: string\n  imageRatio?: PaImageRatio\n  imagePosition?: PaHeroImagePosition\n}\n\nconst props = withDefaults(defineProps<PaHeroProps>(), {\n  titleLevel: 1,\n  imageRatio: '3:2',\n  imagePosition: 'right',\n})\n\nconst slots = useSlots()\n\nconst titleId = `pa-hero-${nextHeroId()}__title`\n\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasSubtitle = computed(() => !!slots.subtitle || !!props.subtitle)\nconst hasBody = computed(() => !!slots.body || !!props.body)\nconst hasTitleBlock = computed(\n  () => hasTitle.value || hasSubtitle.value || hasBody.value,\n)\nconst labelledBy = computed(() => (hasTitle.value ? titleId : undefined))\nconst titleTag = computed(() => `h${props.titleLevel}` as const)\n</script>\n\n<template>\n  <section class=\"pa-hero\"\n           :aria-labelledby=\"labelledBy\">\n    <div class=\"pa-hero__inner\"\n         :class=\"{ 'pa-hero__inner--image-left': imagePosition === 'left' }\">\n      <div class=\"pa-hero__text\">\n        <div v-if=\"$slots.breadcrumb\"\n             class=\"pa-hero__breadcrumb\">\n          <slot name=\"breadcrumb\" />\n        </div>\n\n        <div v-if=\"$slots.label\"\n             class=\"pa-hero__label\">\n          <slot name=\"label\" />\n        </div>\n\n        <div v-if=\"hasTitleBlock\"\n             class=\"pa-hero__title-block\">\n          <component :is=\"titleTag\"\n                     v-if=\"hasTitle\"\n                     :id=\"titleId\"\n                     class=\"pa-hero__title\">\n            <slot name=\"title\">{{ title }}</slot>\n          </component>\n          <h4 v-if=\"hasSubtitle\"\n              class=\"pa-hero__subtitle\">\n            <slot name=\"subtitle\">{{ subtitle }}</slot>\n          </h4>\n          <p v-if=\"hasBody\"\n             class=\"pa-hero__body\">\n            <slot name=\"body\">{{ body }}</slot>\n          </p>\n        </div>\n\n        <div v-if=\"$slots.cta\"\n             class=\"pa-hero__cta\">\n          <slot name=\"cta\" />\n        </div>\n      </div>\n\n      <div v-if=\"imageSrc\"\n           class=\"pa-hero__image-col\">\n        <PaImage :src=\"imageSrc\"\n                 :alt=\"imageAlt ?? ''\"\n                 :ratio=\"imageRatio\" />\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped>\n.pa-hero {\n  display: block;\n  container-type: inline-size;\n  background-color: var(--pa-color-bg-white);\n}\n\n.pa-hero__title {\n  font-family: var(--pa-font-family-base);\n  font-weight: var(--pa-font-h2-weight);\n  font-size: var(--pa-font-h2-size);\n  line-height: var(--pa-font-h2-line-height);\n  letter-spacing: var(--pa-font-h2-letter-spacing);\n  color: var(--pa-color-bg-primary-dark-110);\n}\n\n.pa-hero__subtitle {\n  font-family: var(--pa-font-family-base);\n  font-weight: var(--pa-font-h4-weight);\n  font-size: var(--pa-font-h4-size);\n  line-height: var(--pa-font-h4-line-height);\n  letter-spacing: var(--pa-font-h4-letter-spacing);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-hero__body {\n  font-family: var(--pa-font-family-base);\n  font-weight: var(--pa-font-body-weight);\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-hero__body :deep(a) {\n  color: var(--pa-hero-body-link-color, #2f6dd5);\n  text-decoration: none;\n}\n\n.pa-hero__body :deep(a:hover) {\n  text-decoration: underline;\n}\n\n.pa-hero__inner {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--pa-space-md);\n}\n\n.pa-hero__inner--image-left {\n  flex-direction: row-reverse;\n}\n\n.pa-hero__text {\n  flex: 1 0 0;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding-bottom: var(--pa-space-md);\n}\n\n.pa-hero__breadcrumb {\n  width: 100%;\n  padding: 10px 0 8px 0;\n}\n\n.pa-hero__label {\n  padding: 8px 0;\n}\n\n.pa-hero__title-block {\n  width: 100%;\n  padding: 10px 0 24px 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.pa-hero__title,\n.pa-hero__subtitle,\n.pa-hero__body {\n  margin: 0;\n  width: 100%;\n}\n\n.pa-hero__subtitle:not(:first-child) {\n  margin-top: 8px;\n}\n\n.pa-hero__body:not(:first-child) {\n  margin-top: var(--pa-space-md);\n}\n\n.pa-hero__cta {\n  align-self: flex-start;\n}\n\n.pa-hero__image-col {\n  flex: 1 0 0;\n  min-width: 0;\n  align-self: center;\n}\n\n@container (max-width: 720px) {\n  .pa-hero {\n    padding: var(--pa-space-sm);\n    border-bottom: var(--pa-border-xs) solid var(--pa-color-bg-primary-light-50);\n  }\n\n  .pa-hero__inner,\n  .pa-hero__inner--image-left {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .pa-hero__image-col {\n    flex: 0 0 auto;\n    align-self: auto;\n    width: 100%;\n  }\n}\n</style>\n"],"names":["heroUid","nextHeroId","props","__props","slots","useSlots","titleId","hasTitle","computed","hasSubtitle","hasBody","hasTitleBlock","labelledBy","titleTag","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","$slots","_openBlock","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_hoisted_5","_createBlock","_resolveDynamicComponent","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_createVNode","PaImage"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAIA,IAAU;AACd,SAASC,IAAa;AACpB,SAAO,EAAED;AACX;;;;;;;;;;;;;;AAsBA,UAAME,IAAQC,GAMRC,IAAQC,EAAA,GAERC,IAAU,WAAWL,EAAA,CAAY,WAEjCM,IAAWC,EAAS,MAAM,CAAC,CAACJ,EAAM,SAAS,CAAC,CAACF,EAAM,KAAK,GACxDO,IAAcD,EAAS,MAAM,CAAC,CAACJ,EAAM,YAAY,CAAC,CAACF,EAAM,QAAQ,GACjEQ,IAAUF,EAAS,MAAM,CAAC,CAACJ,EAAM,QAAQ,CAAC,CAACF,EAAM,IAAI,GACrDS,IAAgBH;AAAA,MACpB,MAAMD,EAAS,SAASE,EAAY,SAASC,EAAQ;AAAA,IAAA,GAEjDE,IAAaJ,EAAS,MAAOD,EAAS,QAAQD,IAAU,MAAU,GAClEO,IAAWL,EAAS,MAAM,IAAIN,EAAM,UAAU,EAAW;2BAI7DY,EA8CU,WAAA;AAAA,MA9CD,OAAM;AAAA,MACL,mBAAiBF,EAAA;AAAA,IAAA;MACzBG,EA2CM,OAAA;AAAA,QA3CD,OAAKC,EAAA,CAAC,kBAAgB,EAAA,8BACkBb,EAAA,kBAAa,QAAA,CAAA;AAAA,MAAA;QACxDY,EAiCM,OAjCNE,GAiCM;AAAA,UAhCOC,EAAAA,OAAO,cAAlBC,KAAAL,EAGM,OAHNM,GAGM;AAAA,YADJC,EAA0BC,EAAA,QAAA,cAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;UAGjBJ,EAAAA,OAAO,SAAlBC,KAAAL,EAGM,OAHNS,GAGM;AAAA,YADJF,EAAqBC,EAAA,QAAA,SAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;UAGZX,EAAA,SAAXQ,EAAA,GAAAL,EAgBM,OAhBNU,GAgBM;AAAA,YAbajB,EAAA,SADjBY,EAAA,GAAAM,EAKYC,EALIb,EAAA,KAAQ,GAAA;AAAA;cAEZ,IAAIP;AAAA,cACL,OAAM;AAAA,YAAA;yBACf,MAAqC;AAAA,gBAArCe,EAAqCC,uBAArC,MAAqC;AAAA,sBAAfnB,EAAA,KAAK,GAAA,CAAA;AAAA,gBAAA;;;;YAEnBM,EAAA,SAAVU,EAAA,GAAAL,EAGK,MAHLa,GAGK;AAAA,cADHN,EAA2CC,0BAA3C,MAA2C;AAAA,oBAAlBnB,EAAA,QAAQ,GAAA,CAAA;AAAA,cAAA;;YAE1BO,EAAA,SAATS,EAAA,GAAAL,EAGI,KAHJc,GAGI;AAAA,cADFP,EAAmCC,sBAAnC,MAAmC;AAAA,oBAAdnB,EAAA,IAAI,GAAA,CAAA;AAAA,cAAA;;;UAIlBe,EAAAA,OAAO,OAAlBC,KAAAL,EAGM,OAHNe,GAGM;AAAA,YADJR,EAAmBC,EAAA,QAAA,OAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;;QAIZnB,EAAA,YAAXgB,EAAA,GAAAL,EAKM,OALNgB,GAKM;AAAA,UAHJC,EAE+BC,GAAA;AAAA,YAFrB,KAAK7B,EAAA;AAAA,YACL,KAAKA,EAAA,YAAQ;AAAA,YACb,OAAOA,EAAA;AAAA,UAAA;;;;;;"}

package/dist/components/PaHero/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as PaHero } from './PaHero.vue';
+export type { PaHeroProps, PaHeroImagePosition, PaHeroTitleLevel, } from './PaHero.vue';

package/dist/components/PaHero/index.js

@@ -0,0 +1,6 @@
+import { default as f, default as o } from "./PaHero.vue.js";
+export {
+  f as PaHero,
+  o as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/PaHero/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}