bitboss-ui 2.0.5 → 2.0.8

package/dist/index52.js

@@ -1,69 +1,95 @@
-import { defineComponent as z, computed as b, ref as o, onMounted as g, openBlock as l, createElementBlock as i, normalizeProps as h, guardReactiveProps as k, renderSlot as y } from "vue";
-import { isCssColor as _ } from "./index214.js";
-import { wait as C } from "./index126.js";
-const w = ["alt", "sizes", "src", "srcset"], B = {
-  key: 1,
-  class: "bb-avatar__fallback"
-}, P = /* @__PURE__ */ z({
-  __name: "BbAvatar",
+import { defineComponent as h, ref as f, watch as v, openBlock as s, createBlock as a, normalizeClass as k, withCtx as C, createElementVNode as t, createCommentVNode as i, renderSlot as n, normalizeProps as r, guardReactiveProps as c, createTextVNode as d, toDisplayString as m, createElementBlock as w } from "vue";
+import V from "./index122.js";
+/* empty css         */
+import y from "./index123.js";
+/* empty css         */
+const z = {
+  class: "bb-alert__inner-container",
+  role: "alert"
+}, B = { class: "bb-alert__icon-container" }, g = { class: "bb-alert__content" }, $ = { class: "bb-alert__title" }, L = {
+  key: 0,
+  class: "bb-alert__close"
+}, S = ["aria-label"], N = /* @__PURE__ */ t("svg", {
+  fill: "none",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, [
+  /* @__PURE__ */ t("path", {
+    d: "M23 23L1 1M23 1L1 23",
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    "stroke-width": "2"
+  })
+], -1), E = [
+  N
+], M = { class: "bb-alert__text" }, q = /* @__PURE__ */ h({
+  __name: "BbAlert",
   props: {
-    color: {},
-    size: {},
-    alt: {},
-    src: {},
-    srcset: {},
-    sizes: {},
-    timeout: { default: 400 }
+    closeLabel: { default: "Chiudi" },
+    showClose: { type: Boolean },
+    text: {},
+    theme: { default: "default" },
+    title: {},
+    icon: {},
+    iconSize: {},
+    modelValue: {}
   },
-  setup(u) {
-    const s = u, f = {
-      xs: 24,
-      sm: 32,
-      md: 40,
-      lg: 56,
-      xl: 80,
-      xxl: 104
-    }, m = b(() => {
-      const e = {
-        "bb-avatar": !0
-      };
-      let r;
-      s.size && (typeof s.size == "string" ? r = f[s.size] ?? parseInt(s.size, 10) : r = s.size, r += "px");
-      let c = {
-        width: r,
-        height: r
-      };
-      return s.color && (_(s.color) ? c.backgroundColor = s.color : e[`bb-avatar--${s.color}`] = !0), {
-        class: e,
-        style: c
-      };
-    }), d = (e) => !(!e || !e.complete || e.naturalWidth === 0), a = o(), n = o(!1), t = o(!1);
-    g(async () => {
-      !t.value && !n.value && a.value && (await C(s.timeout), t.value = !d(a.value));
-    });
+  emits: ["update:modelValue"],
+  setup(u, { emit: _ }) {
+    const l = u, b = _, o = f(
+      l.modelValue === void 0 ? !0 : !!l.modelValue
+    );
+    v(
+      () => l.modelValue,
+      (e) => {
+        o.value !== !!e && (o.value = !!e);
+      }
+    );
     const p = () => {
-      n.value = !0;
-    }, v = () => {
-      t.value = !0;
+      o.value = !1, b("update:modelValue", !1);
     };
-    return (e, r) => (l(), i("span", h(k(m.value)), [
-      (e.src || e.srcset) && !t.value ? (l(), i("img", {
-        key: 0,
-        ref_key: "image",
-        ref: a,
-        alt: e.alt,
-        sizes: e.sizes,
-        src: e.src,
-        srcset: e.srcset,
-        onError: v,
-        onLoad: p
-      }, null, 40, w)) : (l(), i("span", B, [
-        y(e.$slots, "default")
-      ]))
-    ], 16));
+    return (e, P) => (s(), a(V, {
+      class: k(["bb-alert", { [`bb-alert--${e.theme}`]: e.theme }]),
+      "model-value": o.value
+    }, {
+      default: C(() => [
+        t("div", z, [
+          t("div", B, [
+            e.icon ? (s(), a(y, {
+              key: 0,
+              class: "bb-alert__icon",
+              size: e.iconSize,
+              type: e.icon
+            }, null, 8, ["size", "type"])) : i("", !0)
+          ]),
+          t("div", g, [
+            t("div", $, [
+              n(e.$slots, "title", r(c({ text: e.title })), () => [
+                d(m(e.title), 1)
+              ]),
+              e.showClose ? (s(), w("div", L, [
+                t("button", {
+                  "aria-label": e.closeLabel,
+                  block: "",
+                  class: "bb-alert__close-btn",
+                  type: "button",
+                  onClick: p
+                }, E, 8, S)
+              ])) : i("", !0)
+            ]),
+            t("p", M, [
+              n(e.$slots, "text", r(c({ text: e.text })), () => [
+                d(m(e.text), 1)
+              ])
+            ])
+          ])
+        ])
+      ]),
+      _: 3
+    }, 8, ["class", "model-value"]));
   }
 });
 export {
-  P as default
+  q as default
 };
 //# sourceMappingURL=index52.js.map

package/dist/index52.js.map

@@ -1 +1 @@
-{"version":3,"file":"index52.js","sources":["../src/components/BbAvatar/BbAvatar.vue"],"sourcesContent":["<template>\n\t<span v-bind=\"attributes\">\n\t\t<img\n\t\t\tv-if=\"(src || srcset) && !imageErrored\"\n\t\t\tref=\"image\"\n\t\t\t:alt=\"alt\"\n\t\t\t:sizes=\"sizes\"\n\t\t\t:src=\"src\"\n\t\t\t:srcset=\"srcset\"\n\t\t\t@error=\"onError\"\n\t\t\t@load=\"onLoad\"\n\t\t/>\n\t\t<span v-else class=\"bb-avatar__fallback\">\n\t\t\t<slot></slot>\n\t\t</span>\n\t</span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, type ImgHTMLAttributes, onMounted } from 'vue';\nimport { isCssColor } from '@/utilities/functions/isCssColor';\nimport type { Classes } from '@/types/Classes';\nimport type { CommonProps } from '@/types/CommonProps';\nimport type { BbIconProps, Size } from '../BbIcon/BbIcon.vue';\nimport { wait } from '@/utilities/functions/wait';\n\nexport type BbAvatarProps = Pick<CommonProps, 'color'> &\n\tPick<BbIconProps, 'size'> & {\n\t\talt?: ImgHTMLAttributes['alt'];\n\t\tsrc?: ImgHTMLAttributes['src'];\n\t\tsrcset?: ImgHTMLAttributes['srcset'];\n\t\tsizes?: ImgHTMLAttributes['sizes'];\n\t\ttimeout?: number;\n\t};\n\nconst props = withDefaults(defineProps<BbAvatarProps>(), {\n\ttimeout: 400,\n});\n\ndefineSlots<{\n\tdefault?: (props: object) => any;\n}>();\n\nconst sizeMap: Size = {\n\txs: 24,\n\tsm: 32,\n\tmd: 40,\n\tlg: 56,\n\txl: 80,\n\txxl: 104,\n};\n\nconst attributes = computed(() => {\n\tconst classes: Classes = {\n\t\t'bb-avatar': true,\n\t};\n\tlet dimension: any;\n\tif (props.size) {\n\t\tif (typeof props.size === 'string') {\n\t\t\tdimension = sizeMap[props.size as keyof Size] ?? parseInt(props.size, 10);\n\t\t} else {\n\t\t\tdimension = props.size;\n\t\t}\n\t\tdimension += `px`;\n\t}\n\n\tlet style: { [key: string]: any } = {\n\t\twidth: dimension,\n\t\theight: dimension,\n\t};\n\tif (props.color) {\n\t\tif (isCssColor(props.color)) {\n\t\t\tstyle.backgroundColor = props.color;\n\t\t} else {\n\t\t\tclasses[`bb-avatar--${props.color}`] = true;\n\t\t}\n\t}\n\treturn {\n\t\tclass: classes,\n\t\tstyle,\n\t};\n});\n\nconst imageHasLoadedCorrectly = (img: HTMLImageElement) => {\n\tif (!img) return false;\n\t// During the onload event, IE correctly identifies any images that\n\t// weren’t downloaded as not complete. Others should too. Gecko-based\n\t// browsers act like NS4 in that they report this incorrectly.\n\tif (!img.complete) {\n\t\treturn false;\n\t}\n\n\t// However, they do have two very useful properties: naturalWidth and\n\t// naturalHeight. These give the true size of the image. If it failed\n\t// to load, either of these should be zero.\n\tif (img.naturalWidth === 0) {\n\t\treturn false;\n\t}\n\n\t// No other way of checking: assume it’s ok.\n\treturn true;\n};\n\nconst image = ref<HTMLImageElement | null>();\nconst imageLoaded = ref(false);\nconst imageErrored = ref(false);\n\nonMounted(async () => {\n\t// Only run when events don't fire (when the page is SSR)\n\tif (!imageErrored.value && !imageLoaded.value) {\n\t\tif (image.value) {\n\t\t\tawait wait(props.timeout);\n\t\t\timageErrored.value = !imageHasLoadedCorrectly(image.value);\n\t\t}\n\t}\n});\nconst onLoad = () => {\n\timageLoaded.value = true;\n};\nconst onError = () => {\n\timageErrored.value = true;\n};\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbAvatar';\n</style>\n"],"names":["props","__props","sizeMap","attributes","computed","classes","dimension","style","isCssColor","imageHasLoadedCorrectly","img","image","ref","imageLoaded","imageErrored","onMounted","wait","onLoad","onError"],"mappings":";;;;;;;;;;;;;;;;;;AAmCA,UAAMA,IAAQC,GAQRC,IAAgB;AAAA,MACrB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,IAAA,GAGAC,IAAaC,EAAS,MAAM;AACjC,YAAMC,IAAmB;AAAA,QACxB,aAAa;AAAA,MAAA;AAEV,UAAAC;AACJ,MAAIN,EAAM,SACL,OAAOA,EAAM,QAAS,WACzBM,IAAYJ,EAAQF,EAAM,IAAkB,KAAK,SAASA,EAAM,MAAM,EAAE,IAExEM,IAAYN,EAAM,MAENM,KAAA;AAGd,UAAIC,IAAgC;AAAA,QACnC,OAAOD;AAAA,QACP,QAAQA;AAAA,MAAA;AAET,aAAIN,EAAM,UACLQ,EAAWR,EAAM,KAAK,IACzBO,EAAM,kBAAkBP,EAAM,QAE9BK,EAAQ,cAAcL,EAAM,KAAK,EAAE,IAAI,KAGlC;AAAA,QACN,OAAOK;AAAA,QACP,OAAAE;AAAA,MAAA;AAAA,IACD,CACA,GAEKE,IAA0B,CAACC,MAC5B,GAACA,KAID,CAACA,EAAI,YAOLA,EAAI,iBAAiB,IAQpBC,IAAQC,KACRC,IAAcD,EAAI,EAAK,GACvBE,IAAeF,EAAI,EAAK;AAE9B,IAAAG,EAAU,YAAY;AAErB,MAAI,CAACD,EAAa,SAAS,CAACD,EAAY,SACnCF,EAAM,UACH,MAAAK,EAAKhB,EAAM,OAAO,GACxBc,EAAa,QAAQ,CAACL,EAAwBE,EAAM,KAAK;AAAA,IAE3D,CACA;AACD,UAAMM,IAAS,MAAM;AACpB,MAAAJ,EAAY,QAAQ;AAAA,IAAA,GAEfK,IAAU,MAAM;AACrB,MAAAJ,EAAa,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index52.js","sources":["../src/components/BbAlert/BbAlert.vue"],"sourcesContent":["<template>\n\t<BbCollapsible\n\t\tclass=\"bb-alert\"\n\t\t:class=\"{ [`bb-alert--${theme}`]: theme }\"\n\t\t:model-value=\"innerValue\"\n\t>\n\t\t<div class=\"bb-alert__inner-container\" role=\"alert\">\n\t\t\t<div class=\"bb-alert__icon-container\">\n\t\t\t\t<BbIcon\n\t\t\t\t\tv-if=\"icon\"\n\t\t\t\t\tclass=\"bb-alert__icon\"\n\t\t\t\t\t:size=\"iconSize\"\n\t\t\t\t\t:type=\"icon\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"bb-alert__content\">\n\t\t\t\t<div class=\"bb-alert__title\">\n\t\t\t\t\t<slot name=\"title\" v-bind=\"{ text: title }\">{{ title }}</slot>\n\t\t\t\t\t<div v-if=\"showClose\" class=\"bb-alert__close\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t:aria-label=\"closeLabel\"\n\t\t\t\t\t\t\tblock\n\t\t\t\t\t\t\tclass=\"bb-alert__close-btn\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t@click=\"onClickClose\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M23 23L1 1M23 1L1 23\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<p class=\"bb-alert__text\">\n\t\t\t\t\t<slot name=\"text\" v-bind=\"{ text: text }\">{{ text }}</slot>\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</div>\n\t</BbCollapsible>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport BaseButton from '../BaseButton/BaseButton.vue';\nimport BbCollapsible from '../BbCollapsible/BbCollapsible.vue';\nimport BbIcon from '../BbIcon/BbIcon.vue';\nimport type { BbIconProps } from '../BbIcon/BbIcon.vue';\nimport type { CommonProps } from '@/types/CommonProps';\n\nexport type BbAlertProps = Pick<\n\tCommonProps,\n\t'closeLabel' | 'showClose' | 'text' | 'theme' | 'title'\n> & {\n\t/**\n\t * Name of the icon to use\n\t */\n\ticon?: BbIconProps['type'];\n\t/**\n\t * Size of the icon to use\n\t */\n\ticonSize?: BbIconProps['size'];\n\t/**\n\t * Used by v-model, set type to any to avoid Vue casting it as false\n\t */\n\tmodelValue?: any;\n};\n\nconst props = withDefaults(defineProps<BbAlertProps>(), {\n\tcloseLabel: 'Chiudi',\n\ttheme: 'default',\n});\n\nexport type BbAlertEvents = {\n\t(e: 'update:modelValue', value: boolean): void;\n};\nconst emit = defineEmits<BbAlertEvents>();\n\ndefineSlots<{\n\ttitle?: (props: { text: BbAlertProps['title'] }) => any;\n\ttext?: (props: { text: BbAlertProps['title'] }) => any;\n}>();\n\nconst innerValue = ref(\n\tprops.modelValue === undefined ? true : !!props.modelValue\n);\n\nwatch(\n\t() => props.modelValue,\n\t(value) => {\n\t\tif (innerValue.value !== !!value) {\n\t\t\tinnerValue.value = !!value;\n\t\t}\n\t}\n);\n\nconst onClickClose = () => {\n\tinnerValue.value = false;\n\temit('update:modelValue', false);\n};\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbAlert';\n</style>\n"],"names":["props","__props","emit","__emit","innerValue","ref","watch","value","onClickClose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,UAAMA,IAAQC,GAQRC,IAAOC,GAOPC,IAAaC;AAAA,MAClBL,EAAM,eAAe,SAAY,KAAO,CAAC,CAACA,EAAM;AAAA,IAAA;AAGjD,IAAAM;AAAA,MACC,MAAMN,EAAM;AAAA,MACZ,CAACO,MAAU;AACV,QAAIH,EAAW,UAAU,CAAC,CAACG,MACfH,EAAA,QAAQ,CAAC,CAACG;AAAA,MAEvB;AAAA,IAAA;AAGD,UAAMC,IAAe,MAAM;AAC1B,MAAAJ,EAAW,QAAQ,IACnBF,EAAK,qBAAqB,EAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index54.js

@@ -1,50 +1,69 @@
-import { defineComponent as p, useSlots as d, computed as n, openBlock as m, createElementBlock as u, normalizeClass as g, createElementVNode as s, renderSlot as l, mergeProps as f, createTextVNode as _, toDisplayString as y } from "vue";
-import { isCssColor as r } from "./index214.js";
-import { isNil as B } from "./index124.js";
-const C = { class: "bb-badge__wrapper" }, h = { class: "bb-badge__content-inner" }, S = /* @__PURE__ */ p({
-  __name: "BbBadge",
+import { defineComponent as z, computed as b, ref as o, onMounted as g, openBlock as l, createElementBlock as i, normalizeProps as h, guardReactiveProps as k, renderSlot as y } from "vue";
+import { isCssColor as _ } from "./index219.js";
+import { wait as C } from "./index128.js";
+const w = ["alt", "sizes", "src", "srcset"], B = {
+  key: 1,
+  class: "bb-avatar__fallback"
+}, P = /* @__PURE__ */ z({
+  __name: "BbAvatar",
   props: {
     color: {},
-    bottom: { type: Boolean },
-    content: {},
-    floating: { type: Boolean },
-    left: { type: Boolean }
+    size: {},
+    alt: {},
+    src: {},
+    srcset: {},
+    sizes: {},
+    timeout: { default: 400 }
   },
-  setup(b) {
-    const a = d(), e = b, c = n(() => ({
-      "bb-badge": !0,
-      "bb-badge--bottom": e.bottom,
-      "bb-badge--left": e.left,
-      "bb-badge--positioned": a.default,
-      "bb-badge--floating": e.floating,
-      "bb-badge--empty": B(e.content),
-      [`bb-badge--${e.color}`]: e.color && !r(e.color)
-    })), i = n(() => {
-      let t = {};
-      e.color && r(e.color) && (t.backgroundColor = e.color);
-      let o = {};
-      return a.wrap && (o["aria-atomic"] = !0, o["aria-live"] = "polite", o.role = "status"), {
-        style: t,
-        ...o
+  setup(u) {
+    const s = u, f = {
+      xs: 24,
+      sm: 32,
+      md: 40,
+      lg: 56,
+      xl: 80,
+      xxl: 104
+    }, m = b(() => {
+      const e = {
+        "bb-avatar": !0
       };
+      let r;
+      s.size && (typeof s.size == "string" ? r = f[s.size] ?? parseInt(s.size, 10) : r = s.size, r += "px");
+      let c = {
+        width: r,
+        height: r
+      };
+      return s.color && (_(s.color) ? c.backgroundColor = s.color : e[`bb-avatar--${s.color}`] = !0), {
+        class: e,
+        style: c
+      };
+    }), d = (e) => !(!e || !e.complete || e.naturalWidth === 0), a = o(), n = o(!1), t = o(!1);
+    g(async () => {
+      !t.value && !n.value && a.value && (await C(s.timeout), t.value = !d(a.value));
     });
-    return (t, o) => (m(), u("span", {
-      class: g(c.value)
-    }, [
-      s("span", C, [
-        l(t.$slots, "default"),
-        s("span", f({ class: "bb-badge__content-container" }, i.value), [
-          s("span", h, [
-            l(t.$slots, "content", {}, () => [
-              _(y(t.content), 1)
-            ])
-          ])
-        ], 16)
-      ])
-    ], 2));
+    const p = () => {
+      n.value = !0;
+    }, v = () => {
+      t.value = !0;
+    };
+    return (e, r) => (l(), i("span", h(k(m.value)), [
+      (e.src || e.srcset) && !t.value ? (l(), i("img", {
+        key: 0,
+        ref_key: "image",
+        ref: a,
+        alt: e.alt,
+        sizes: e.sizes,
+        src: e.src,
+        srcset: e.srcset,
+        onError: v,
+        onLoad: p
+      }, null, 40, w)) : (l(), i("span", B, [
+        y(e.$slots, "default")
+      ]))
+    ], 16));
   }
 });
 export {
-  S as default
+  P as default
 };
 //# sourceMappingURL=index54.js.map

package/dist/index54.js.map

@@ -1 +1 @@
-{"version":3,"file":"index54.js","sources":["../src/components/BbBadge/BbBadge.vue"],"sourcesContent":["<template>\n\t<span :class=\"classes\">\n\t\t<span class=\"bb-badge__wrapper\">\n\t\t\t<slot></slot>\n\t\t\t<span class=\"bb-badge__content-container\" v-bind=\"contentAttributes\">\n\t\t\t\t<span class=\"bb-badge__content-inner\"\n\t\t\t\t\t><slot name=\"content\">{{ content }}</slot></span\n\t\t\t\t>\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue';\nimport { isCssColor } from '@/utilities/functions/isCssColor';\nimport { isNil } from '@/utilities/functions/isNil';\nimport type { CommonProps } from '@/types/CommonProps';\n\nconst slots = useSlots();\n\nexport type BbBadgeProps = Pick<CommonProps, 'color'> & {\n\t/**\n\t * Displays the badge on the bottom of the wrapped component.\n\t */\n\tbottom?: boolean;\n\t/**\n\t * Text content of the badge\n\t */\n\tcontent?: string | number | null;\n\t/**\n\t * Renders the badge i little further from the wrapped\n\t * component making it look like it's floating\n\t * and not stacked.\n\t */\n\tfloating?: boolean;\n\t/**\n\t * Displays the badge on the left of the wrapped component.\n\t */\n\tleft?: boolean;\n};\n\nconst props = withDefaults(defineProps<BbBadgeProps>(), {});\n\ndefineSlots<{\n\tdefault?: (props: object) => any;\n\tcontent?: (props: object) => any;\n}>();\n\nconst classes = computed(() => {\n\treturn {\n\t\t'bb-badge': true,\n\t\t'bb-badge--bottom': props.bottom,\n\t\t'bb-badge--left': props.left,\n\t\t'bb-badge--positioned': slots.default,\n\t\t'bb-badge--floating': props.floating,\n\t\t'bb-badge--empty': isNil(props.content),\n\t\t[`bb-badge--${props.color}`]: props.color && !isCssColor(props.color),\n\t};\n});\n\nconst contentAttributes = computed(() => {\n\tlet style: Record<string, string> = {};\n\tif (props.color && isCssColor(props.color)) {\n\t\tstyle.backgroundColor = props.color;\n\t}\n\n\tlet accessibilityAttributes: Record<string, string | boolean> = {};\n\tif (slots.wrap) {\n\t\taccessibilityAttributes['aria-atomic'] = true;\n\t\taccessibilityAttributes['aria-live'] = 'polite';\n\t\taccessibilityAttributes['role'] = 'status';\n\t}\n\treturn {\n\t\tstyle,\n\t\t...accessibilityAttributes,\n\t};\n});\n</script>\n<style lang=\"postcss\">\n@import '@/assets/css/BbBadge';\n</style>\n"],"names":["slots","useSlots","props","__props","classes","computed","isNil","isCssColor","contentAttributes","style","accessibilityAttributes"],"mappings":";;;;;;;;;;;;;AAmBA,UAAMA,IAAQC,KAuBRC,IAAQC,GAORC,IAAUC,EAAS,OACjB;AAAA,MACN,YAAY;AAAA,MACZ,oBAAoBH,EAAM;AAAA,MAC1B,kBAAkBA,EAAM;AAAA,MACxB,wBAAwBF,EAAM;AAAA,MAC9B,sBAAsBE,EAAM;AAAA,MAC5B,mBAAmBI,EAAMJ,EAAM,OAAO;AAAA,MACtC,CAAC,aAAaA,EAAM,KAAK,EAAE,GAAGA,EAAM,SAAS,CAACK,EAAWL,EAAM,KAAK;AAAA,IAAA,EAErE,GAEKM,IAAoBH,EAAS,MAAM;AACxC,UAAII,IAAgC,CAAA;AACpC,MAAIP,EAAM,SAASK,EAAWL,EAAM,KAAK,MACxCO,EAAM,kBAAkBP,EAAM;AAG/B,UAAIQ,IAA4D,CAAA;AAChE,aAAIV,EAAM,SACTU,EAAwB,aAAa,IAAI,IACzCA,EAAwB,WAAW,IAAI,UACvCA,EAAwB,OAAU,WAE5B;AAAA,QACN,OAAAD;AAAA,QACA,GAAGC;AAAA,MAAA;AAAA,IACJ,CACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index54.js","sources":["../src/components/BbAvatar/BbAvatar.vue"],"sourcesContent":["<template>\n\t<span v-bind=\"attributes\">\n\t\t<img\n\t\t\tv-if=\"(src || srcset) && !imageErrored\"\n\t\t\tref=\"image\"\n\t\t\t:alt=\"alt\"\n\t\t\t:sizes=\"sizes\"\n\t\t\t:src=\"src\"\n\t\t\t:srcset=\"srcset\"\n\t\t\t@error=\"onError\"\n\t\t\t@load=\"onLoad\"\n\t\t/>\n\t\t<span v-else class=\"bb-avatar__fallback\">\n\t\t\t<slot></slot>\n\t\t</span>\n\t</span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, type ImgHTMLAttributes, onMounted } from 'vue';\nimport { isCssColor } from '@/utilities/functions/isCssColor';\nimport type { Classes } from '@/types/Classes';\nimport type { CommonProps } from '@/types/CommonProps';\nimport type { BbIconProps, Size } from '../BbIcon/BbIcon.vue';\nimport { wait } from '@/utilities/functions/wait';\n\nexport type BbAvatarProps = Pick<CommonProps, 'color'> &\n\tPick<BbIconProps, 'size'> & {\n\t\talt?: ImgHTMLAttributes['alt'];\n\t\tsrc?: ImgHTMLAttributes['src'];\n\t\tsrcset?: ImgHTMLAttributes['srcset'];\n\t\tsizes?: ImgHTMLAttributes['sizes'];\n\t\ttimeout?: number;\n\t};\n\nconst props = withDefaults(defineProps<BbAvatarProps>(), {\n\ttimeout: 400,\n});\n\ndefineSlots<{\n\tdefault?: (props: object) => any;\n}>();\n\nconst sizeMap: Size = {\n\txs: 24,\n\tsm: 32,\n\tmd: 40,\n\tlg: 56,\n\txl: 80,\n\txxl: 104,\n};\n\nconst attributes = computed(() => {\n\tconst classes: Classes = {\n\t\t'bb-avatar': true,\n\t};\n\tlet dimension: any;\n\tif (props.size) {\n\t\tif (typeof props.size === 'string') {\n\t\t\tdimension = sizeMap[props.size as keyof Size] ?? parseInt(props.size, 10);\n\t\t} else {\n\t\t\tdimension = props.size;\n\t\t}\n\t\tdimension += `px`;\n\t}\n\n\tlet style: { [key: string]: any } = {\n\t\twidth: dimension,\n\t\theight: dimension,\n\t};\n\tif (props.color) {\n\t\tif (isCssColor(props.color)) {\n\t\t\tstyle.backgroundColor = props.color;\n\t\t} else {\n\t\t\tclasses[`bb-avatar--${props.color}`] = true;\n\t\t}\n\t}\n\treturn {\n\t\tclass: classes,\n\t\tstyle,\n\t};\n});\n\nconst imageHasLoadedCorrectly = (img: HTMLImageElement) => {\n\tif (!img) return false;\n\t// During the onload event, IE correctly identifies any images that\n\t// weren’t downloaded as not complete. Others should too. Gecko-based\n\t// browsers act like NS4 in that they report this incorrectly.\n\tif (!img.complete) {\n\t\treturn false;\n\t}\n\n\t// However, they do have two very useful properties: naturalWidth and\n\t// naturalHeight. These give the true size of the image. If it failed\n\t// to load, either of these should be zero.\n\tif (img.naturalWidth === 0) {\n\t\treturn false;\n\t}\n\n\t// No other way of checking: assume it’s ok.\n\treturn true;\n};\n\nconst image = ref<HTMLImageElement | null>();\nconst imageLoaded = ref(false);\nconst imageErrored = ref(false);\n\nonMounted(async () => {\n\t// Only run when events don't fire (when the page is SSR)\n\tif (!imageErrored.value && !imageLoaded.value) {\n\t\tif (image.value) {\n\t\t\tawait wait(props.timeout);\n\t\t\timageErrored.value = !imageHasLoadedCorrectly(image.value);\n\t\t}\n\t}\n});\nconst onLoad = () => {\n\timageLoaded.value = true;\n};\nconst onError = () => {\n\timageErrored.value = true;\n};\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbAvatar';\n</style>\n"],"names":["props","__props","sizeMap","attributes","computed","classes","dimension","style","isCssColor","imageHasLoadedCorrectly","img","image","ref","imageLoaded","imageErrored","onMounted","wait","onLoad","onError"],"mappings":";;;;;;;;;;;;;;;;;;AAmCA,UAAMA,IAAQC,GAQRC,IAAgB;AAAA,MACrB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,IAAA,GAGAC,IAAaC,EAAS,MAAM;AACjC,YAAMC,IAAmB;AAAA,QACxB,aAAa;AAAA,MAAA;AAEV,UAAAC;AACJ,MAAIN,EAAM,SACL,OAAOA,EAAM,QAAS,WACzBM,IAAYJ,EAAQF,EAAM,IAAkB,KAAK,SAASA,EAAM,MAAM,EAAE,IAExEM,IAAYN,EAAM,MAENM,KAAA;AAGd,UAAIC,IAAgC;AAAA,QACnC,OAAOD;AAAA,QACP,QAAQA;AAAA,MAAA;AAET,aAAIN,EAAM,UACLQ,EAAWR,EAAM,KAAK,IACzBO,EAAM,kBAAkBP,EAAM,QAE9BK,EAAQ,cAAcL,EAAM,KAAK,EAAE,IAAI,KAGlC;AAAA,QACN,OAAOK;AAAA,QACP,OAAAE;AAAA,MAAA;AAAA,IACD,CACA,GAEKE,IAA0B,CAACC,MAC5B,GAACA,KAID,CAACA,EAAI,YAOLA,EAAI,iBAAiB,IAQpBC,IAAQC,KACRC,IAAcD,EAAI,EAAK,GACvBE,IAAeF,EAAI,EAAK;AAE9B,IAAAG,EAAU,YAAY;AAErB,MAAI,CAACD,EAAa,SAAS,CAACD,EAAY,SACnCF,EAAM,UACH,MAAAK,EAAKhB,EAAM,OAAO,GACxBc,EAAa,QAAQ,CAACL,EAAwBE,EAAM,KAAK;AAAA,IAE3D,CACA;AACD,UAAMM,IAAS,MAAM;AACpB,MAAAJ,EAAY,QAAQ;AAAA,IAAA,GAEfK,IAAU,MAAM;AACrB,MAAAJ,EAAa,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;"}

package/dist/index56.js

@@ -1,63 +1,50 @@
-import { defineComponent as n, openBlock as a, createElementBlock as t, Fragment as b, renderList as m, createElementVNode as l, renderSlot as r, createVNode as p, mergeProps as u, withCtx as c, createTextVNode as f, toDisplayString as _ } from "vue";
-import h from "./index12.js";
-/* empty css        */
-const B = {
-  "aria-label": "Breadcrumbs",
-  class: "bb-breadcrumbs"
-}, $ = { class: "bb-breadcrumbs__breadcrumb-container" }, k = {
-  "aria-hidden": "true",
-  class: "bb-breadcrumbs__divider"
-}, V = /* @__PURE__ */ n({
-  __name: "BbBreadcrumbs",
+import { defineComponent as p, useSlots as d, computed as n, openBlock as m, createElementBlock as u, normalizeClass as g, createElementVNode as s, renderSlot as l, mergeProps as f, createTextVNode as _, toDisplayString as y } from "vue";
+import { isCssColor as r } from "./index219.js";
+import { isNil as B } from "./index126.js";
+const C = { class: "bb-badge__wrapper" }, h = { class: "bb-badge__content-inner" }, S = /* @__PURE__ */ p({
+  __name: "BbBadge",
   props: {
-    disabled: { type: Boolean },
-    items: {},
-    divider: { default: "/" }
+    color: {},
+    bottom: { type: Boolean },
+    content: {},
+    floating: { type: Boolean },
+    left: { type: Boolean }
   },
-  setup(i) {
-    const o = i;
-    return (e, v) => (a(), t("nav", B, [
-      (a(!0), t(b, null, m(e.items, (s, d) => (a(), t(b, {
-        key: s.key
-      }, [
-        l("span", $, [
-          r(e.$slots, "item:prepend", {
-            disabled: !!(s.disabled || e.disabled),
-            index: d,
-            item: e.items[d],
-            text: s.text
-          }),
-          p(h, u({ ref_for: !0 }, s, {
-            class: "bb-breadcrumbs__breadcrumb",
-            disabled: s.disabled || e.disabled
-          }), {
-            default: c(() => [
-              r(e.$slots, `${s.key}`, {
-                disabled: !!(s.disabled || e.disabled),
-                index: d,
-                item: e.items[d],
-                text: s.text
-              })
-            ]),
-            _: 2
-          }, 1040, ["disabled"]),
-          r(e.$slots, "item:append", {
-            disabled: !!(s.disabled || e.disabled),
-            index: d,
-            item: e.items[d],
-            text: s.text
-          })
-        ]),
-        l("span", k, [
-          r(e.$slots, "divider", {}, () => [
-            f(_(o.divider), 1)
+  setup(b) {
+    const a = d(), e = b, c = n(() => ({
+      "bb-badge": !0,
+      "bb-badge--bottom": e.bottom,
+      "bb-badge--left": e.left,
+      "bb-badge--positioned": a.default,
+      "bb-badge--floating": e.floating,
+      "bb-badge--empty": B(e.content),
+      [`bb-badge--${e.color}`]: e.color && !r(e.color)
+    })), i = n(() => {
+      let t = {};
+      e.color && r(e.color) && (t.backgroundColor = e.color);
+      let o = {};
+      return a.wrap && (o["aria-atomic"] = !0, o["aria-live"] = "polite", o.role = "status"), {
+        style: t,
+        ...o
+      };
+    });
+    return (t, o) => (m(), u("span", {
+      class: g(c.value)
+    }, [
+      s("span", C, [
+        l(t.$slots, "default"),
+        s("span", f({ class: "bb-badge__content-container" }, i.value), [
+          s("span", h, [
+            l(t.$slots, "content", {}, () => [
+              _(y(t.content), 1)
+            ])
           ])
-        ])
-      ], 64))), 128))
-    ]));
+        ], 16)
+      ])
+    ], 2));
   }
 });
 export {
-  V as default
+  S as default
 };
 //# sourceMappingURL=index56.js.map

package/dist/index56.js.map

@@ -1 +1 @@
-{"version":3,"file":"index56.js","sources":["../src/components/BbBreadcrumbs/BbBreadcrumbs.vue"],"sourcesContent":["<template>\n\t<nav aria-label=\"Breadcrumbs\" class=\"bb-breadcrumbs\">\n\t\t<template v-for=\"(item, index) in items\" :key=\"item.key\">\n\t\t\t<span class=\"bb-breadcrumbs__breadcrumb-container\">\n\t\t\t\t<slot\n\t\t\t\t\t:disabled=\"!!(item.disabled || disabled)\"\n\t\t\t\t\t:index=\"index\"\n\t\t\t\t\t:item=\"items[index]\"\n\t\t\t\t\t:name=\"`item:prepend`\"\n\t\t\t\t\t:text=\"item.text\"\n\t\t\t\t></slot>\n\t\t\t\t<BaseButton\n\t\t\t\t\tv-bind=\"item\"\n\t\t\t\t\tclass=\"bb-breadcrumbs__breadcrumb\"\n\t\t\t\t\t:disabled=\"item.disabled || disabled\"\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t:disabled=\"!!(item.disabled || disabled)\"\n\t\t\t\t\t\t:index=\"index\"\n\t\t\t\t\t\t:item=\"items[index]\"\n\t\t\t\t\t\t:name=\"`${item.key}`\"\n\t\t\t\t\t\t:text=\"item.text\"\n\t\t\t\t\t></slot>\n\t\t\t\t</BaseButton>\n\t\t\t\t<slot\n\t\t\t\t\t:disabled=\"!!(item.disabled || disabled)\"\n\t\t\t\t\t:index=\"index\"\n\t\t\t\t\t:item=\"items[index]\"\n\t\t\t\t\t:name=\"`item:append`\"\n\t\t\t\t\t:text=\"item.text\"\n\t\t\t\t></slot>\n\t\t\t</span>\n\t\t\t<span aria-hidden=\"true\" class=\"bb-breadcrumbs__divider\"\n\t\t\t\t><slot name=\"divider\">{{ props.divider }}</slot></span\n\t\t\t>\n\t\t</template>\n\t</nav>\n</template>\n\n<script setup lang=\"ts\">\nimport type { CommonProps } from '@/types/CommonProps';\nimport BaseButton from '../BaseButton/BaseButton.vue';\nimport type { BaseButtonProps } from '../BaseButton/BaseButton.vue';\n\nexport type Item = Omit<BaseButtonProps, 'block' | 'tag' | 'type'> & {\n\t/**\n\t * Click handler of the button\n\t */\n\tonClick?: (...args: any[]) => any;\n\t/**\n\t * Key that uniquely identifies the breadcrumb\n\t */\n\tkey: string | number;\n};\n\nexport type BbBreadcrumbsProps = Pick<CommonProps, 'disabled'> & {\n\t/**\n\t * Array of items that describe how the breadcrumbs\n\t * should behave. It is compatible with navigating\n\t * through `a` or `router-link`.\n\t */\n\titems: Item[];\n\t/**\n\t * Text content of the divider\n\t */\n\tdivider?: string;\n};\n\nconst props = withDefaults(defineProps<BbBreadcrumbsProps>(), {\n\tdivider: '/',\n});\n\ndefineSlots<\n\t{\n\t\t'item:prepend'?: (props: {\n\t\t\tdisabled: boolean;\n\t\t\tindex: number;\n\t\t\titem: Item;\n\t\t\ttext?: string;\n\t\t}) => any;\n\t\t'item:append'?: (props: {\n\t\t\tdisabled: boolean;\n\t\t\tindex: number;\n\t\t\titem: Item;\n\t\t\ttext?: string;\n\t\t}) => any;\n\t\tdivider?: (props: object) => any;\n\t} & {\n\t\t[key: string]: (props: {\n\t\t\tdisabled: boolean;\n\t\t\tindex: number;\n\t\t\titem: Item;\n\t\t\ttext?: string;\n\t\t}) => any;\n\t}\n>();\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbBreadcrumbs';\n</style>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;;;;;;;AAoEA,UAAMA,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index56.js","sources":["../src/components/BbBadge/BbBadge.vue"],"sourcesContent":["<template>\n\t<span :class=\"classes\">\n\t\t<span class=\"bb-badge__wrapper\">\n\t\t\t<slot></slot>\n\t\t\t<span class=\"bb-badge__content-container\" v-bind=\"contentAttributes\">\n\t\t\t\t<span class=\"bb-badge__content-inner\"\n\t\t\t\t\t><slot name=\"content\">{{ content }}</slot></span\n\t\t\t\t>\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue';\nimport { isCssColor } from '@/utilities/functions/isCssColor';\nimport { isNil } from '@/utilities/functions/isNil';\nimport type { CommonProps } from '@/types/CommonProps';\n\nconst slots = useSlots();\n\nexport type BbBadgeProps = Pick<CommonProps, 'color'> & {\n\t/**\n\t * Displays the badge on the bottom of the wrapped component.\n\t */\n\tbottom?: boolean;\n\t/**\n\t * Text content of the badge\n\t */\n\tcontent?: string | number | null;\n\t/**\n\t * Renders the badge i little further from the wrapped\n\t * component making it look like it's floating\n\t * and not stacked.\n\t */\n\tfloating?: boolean;\n\t/**\n\t * Displays the badge on the left of the wrapped component.\n\t */\n\tleft?: boolean;\n};\n\nconst props = withDefaults(defineProps<BbBadgeProps>(), {});\n\ndefineSlots<{\n\tdefault?: (props: object) => any;\n\tcontent?: (props: object) => any;\n}>();\n\nconst classes = computed(() => {\n\treturn {\n\t\t'bb-badge': true,\n\t\t'bb-badge--bottom': props.bottom,\n\t\t'bb-badge--left': props.left,\n\t\t'bb-badge--positioned': slots.default,\n\t\t'bb-badge--floating': props.floating,\n\t\t'bb-badge--empty': isNil(props.content),\n\t\t[`bb-badge--${props.color}`]: props.color && !isCssColor(props.color),\n\t};\n});\n\nconst contentAttributes = computed(() => {\n\tlet style: Record<string, string> = {};\n\tif (props.color && isCssColor(props.color)) {\n\t\tstyle.backgroundColor = props.color;\n\t}\n\n\tlet accessibilityAttributes: Record<string, string | boolean> = {};\n\tif (slots.wrap) {\n\t\taccessibilityAttributes['aria-atomic'] = true;\n\t\taccessibilityAttributes['aria-live'] = 'polite';\n\t\taccessibilityAttributes['role'] = 'status';\n\t}\n\treturn {\n\t\tstyle,\n\t\t...accessibilityAttributes,\n\t};\n});\n</script>\n<style lang=\"postcss\">\n@import '@/assets/css/BbBadge';\n</style>\n"],"names":["slots","useSlots","props","__props","classes","computed","isNil","isCssColor","contentAttributes","style","accessibilityAttributes"],"mappings":";;;;;;;;;;;;;AAmBA,UAAMA,IAAQC,KAuBRC,IAAQC,GAORC,IAAUC,EAAS,OACjB;AAAA,MACN,YAAY;AAAA,MACZ,oBAAoBH,EAAM;AAAA,MAC1B,kBAAkBA,EAAM;AAAA,MACxB,wBAAwBF,EAAM;AAAA,MAC9B,sBAAsBE,EAAM;AAAA,MAC5B,mBAAmBI,EAAMJ,EAAM,OAAO;AAAA,MACtC,CAAC,aAAaA,EAAM,KAAK,EAAE,GAAGA,EAAM,SAAS,CAACK,EAAWL,EAAM,KAAK;AAAA,IAAA,EAErE,GAEKM,IAAoBH,EAAS,MAAM;AACxC,UAAII,IAAgC,CAAA;AACpC,MAAIP,EAAM,SAASK,EAAWL,EAAM,KAAK,MACxCO,EAAM,kBAAkBP,EAAM;AAG/B,UAAIQ,IAA4D,CAAA;AAChE,aAAIV,EAAM,SACTU,EAAwB,aAAa,IAAI,IACzCA,EAAwB,WAAW,IAAI,UACvCA,EAAwB,OAAU,WAE5B;AAAA,QACN,OAAAD;AAAA,QACA,GAAGC;AAAA,MAAA;AAAA,IACJ,CACA;;;;;;;;;;;;;;;;;"}