bitboss-ui 0.2.76 → 1.0.0

package/dist/index30.js

@@ -1,2 +1,127 @@
-
+import { defineComponent as C, ref as f, computed as b, openBlock as l, createElementBlock as i, mergeProps as g, createElementVNode as r, Fragment as I, renderList as V, normalizeClass as B, toDisplayString as h, renderSlot as M } from "vue";
+import { booleanishToBoolean as x } from "./index222.js";
+import { identity as D } from "./index210.js";
+import { isCssColor as p } from "./index198.js";
+import { isNotNil as F } from "./index125.js";
+const T = { class: "bb-base-rating__inner-container" }, H = { class: "bb-base-rating__label-text" }, N = ["aria-describedby", "autofocus", "checked", "disabled", "id", "name", "value"], j = ["height", "width"], A = /* @__PURE__ */ r("path", {
+  d: "m8.243 7.34l-6.38.925l-.113.023a1 1 0 0 0-.44 1.684l4.622 4.499l-1.09 6.355l-.013.11a1 1 0 0 0 1.464.944l5.706-3l5.693 3l.1.046a1 1 0 0 0 1.352-1.1l-1.091-6.355l4.624-4.5l.078-.085a1 1 0 0 0-.633-1.62l-6.38-.926l-2.852-5.78a1 1 0 0 0-1.794 0L8.243 7.34z",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, null, -1), S = [
+  A
+], Q = /* @__PURE__ */ C({
+  __name: "BaseRating",
+  props: {
+    ariaDescribedby: {},
+    autofocus: {},
+    color: {},
+    disabled: { type: Boolean },
+    hasErrors: { type: Boolean },
+    id: {},
+    modelValue: {},
+    name: {},
+    readonly: {},
+    stars: { default: 5 },
+    size: { default: "md" }
+  },
+  emits: ["blur", "change", "click", "focus", "inactive", "input", "keydown", "mousedown", "mouseup", "update:modelValue"],
+  setup(v, { emit: _ }) {
+    const a = v, s = _, c = f(), o = f(!1), k = {
+      onBlur: (e) => s("blur", e),
+      onChange: (e) => {
+        s("change", e), e.target instanceof HTMLInputElement && e.target.checked && s("update:modelValue", +e.target.value);
+      },
+      onClick: (e) => {
+        s("click", e), e.target instanceof HTMLInputElement && e.target.checked && +e.target.value === a.modelValue && s("update:modelValue", null);
+      },
+      onFocus: (e) => {
+        s("focus", e), o.value || (document.addEventListener("focusin", d, { passive: !0 }), document.addEventListener("click", u, { passive: !0 }), o.value = !0);
+      },
+      onInput: (e) => s("input", e),
+      onKeydown: (e) => s("keydown", e),
+      onMousedown: (e) => s("mousedown", e),
+      onMouseup: (e) => s("mouseup", e)
+    }, d = (e) => {
+      var n;
+      e.target instanceof HTMLElement && ((n = c.value) != null && n.contains(e.target) || (s("inactive"), o.value = !1, document.removeEventListener("focusin", d), document.removeEventListener("click", u)));
+    }, u = (e) => {
+      var n;
+      e.target instanceof HTMLElement && ((n = c.value) != null && n.contains(e.target) || (s("inactive"), o.value = !1, document.removeEventListener("focusin", d), document.removeEventListener("click", u)));
+    }, y = {
+      xs: 12,
+      sm: 16,
+      md: 24,
+      lg: 28,
+      xl: 36,
+      xxl: 40
+    }, w = b(() => {
+      let e;
+      return typeof a.size == "string" ? e = y[a.size] ?? parseInt(a.size, 10) : e = a.size, e;
+    }), z = b(() => new Array(a.stars).fill(0).map((e, n) => n + 1).map((e) => {
+      const n = a.id ? [a.id, e].filter(D).join("_") : void 0, t = e === a.modelValue, m = !!(a.modelValue && e <= a.modelValue), L = !!(a.disabled || F(a.readonly) && x(a.readonly));
+      return {
+        checked: t,
+        disabled: L,
+        highlighted: m,
+        id: n,
+        name: a.name,
+        size: w.value,
+        value: e
+      };
+    })), E = b(() => {
+      let e = {};
+      return a.color && p(a.color) && (e.color = a.color), {
+        class: {
+          "bb-base-rating": !0,
+          "bb-base-rating--has-value": a.modelValue,
+          "bb-base-rating--disabled": a.disabled,
+          "bb-base-rating--errors": a.hasErrors,
+          "bb-base-rating--readonly": a.readonly,
+          [`bb-base-rating--${a.color}`]: a.color && !p(a.color)
+        },
+        style: e
+      };
+    });
+    return (e, n) => (l(), i("span", g(E.value, {
+      ref_key: "container",
+      ref: c
+    }), [
+      r("span", T, [
+        (l(!0), i(I, null, V(z.value, (t, m) => (l(), i("label", {
+          key: t.value,
+          class: B(["bb-base-rating__option", { "bb-base-rating__option--highlighted": t.highlighted }])
+        }, [
+          r("span", H, h(t.value) + " stell" + h(t.value === 1 ? "a" : "e"), 1),
+          r("input", g({
+            "aria-describedby": e.ariaDescribedby,
+            autofocus: e.autofocus && !m,
+            checked: t.checked,
+            disabled: t.disabled,
+            id: t.id,
+            name: t.name,
+            value: t.value,
+            type: "radio"
+          }, k), null, 16, N),
+          M(e.$slots, "icon", {
+            id: t.id,
+            checked: t.checked,
+            disabled: t.disabled,
+            size: t.size,
+            value: t.value
+          }, () => [
+            (l(), i("svg", {
+              height: t.size,
+              viewBox: "0 0 24 24",
+              width: t.size,
+              xmlns: "http://www.w3.org/2000/svg"
+            }, S, 8, j))
+          ])
+        ], 2))), 128))
+      ])
+    ], 16));
+  }
+});
+export {
+  Q as default
+};
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index30.js","sources":["../src/components/BaseRating/BaseRating.vue"],"sourcesContent":["<template>\n\t<span v-bind=\"outerContainerAttributes\" ref=\"container\">\n\t\t<span class=\"bb-base-rating__inner-container\">\n\t\t\t<label\n\t\t\t\tv-for=\"(option, index) in options\"\n\t\t\t\t:key=\"option.value\"\n\t\t\t\tclass=\"bb-base-rating__option\"\n\t\t\t\t:class=\"{ 'bb-base-rating__option--highlighted': option.highlighted }\"\n\t\t\t>\n\t\t\t\t<span class=\"bb-base-rating__label-text\"\n\t\t\t\t\t>{{ option.value }} stell{{ option.value === 1 ? 'a' : 'e' }}</span\n\t\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\t\t:autofocus=\"autofocus && !index\"\n\t\t\t\t\t:checked=\"option.checked\"\n\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\t:id=\"option.id\"\n\t\t\t\t\t:name=\"option.name\"\n\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tv-bind=\"eventListeners\"\n\t\t\t\t/>\n\t\t\t\t<slot\n\t\t\t\t\t:id=\"option.id\"\n\t\t\t\t\t:checked=\"option.checked\"\n\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\tname=\"icon\"\n\t\t\t\t\t:size=\"option.size\"\n\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t:height=\"option.size\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t:width=\"option.size\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"m8.243 7.34l-6.38.925l-.113.023a1 1 0 0 0-.44 1.684l4.622 4.499l-1.09 6.355l-.013.11a1 1 0 0 0 1.464.944l5.706-3l5.693 3l.1.046a1 1 0 0 0 1.352-1.1l-1.091-6.355l4.624-4.5l.078-.085a1 1 0 0 0-.633-1.62l-6.38-.926l-2.852-5.78a1 1 0 0 0-1.794 0L8.243 7.34z\"\n\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t</slot>\n\t\t\t</label>\n\t\t</span>\n\t</span>\n</template>\n\n<script setup lang=\"ts\">\nimport { booleanishToBoolean } from '@/utilities/functions/booleanishToBoolean';\nimport { computed, ref } from 'vue';\nimport { identity } from '@/utilities/functions/identity';\nimport { isCssColor } from '@/utilities/functions/isCssColor';\nimport { isNotNil } from '@/utilities/functions/isNotNil';\nimport type { InputHTMLAttributes, HTMLAttributes } from 'vue';\nimport type { Size, BbIconProps } from '../BbIcon/BbIcon.vue';\n\nexport type BaseRatingProps = {\n\t/**\n\t * Guides to the browser as to the type of information expected in the field.\n\t */\n\tariaDescribedby?: InputHTMLAttributes['aria-describedby'];\n\n\t/**\n\t * Sets autofocus on page load.\n\t */\n\tautofocus?: InputHTMLAttributes['autofocus'];\n\n\t/**\n\t * Define a color for the component.\n\t *\n\t * Either a custom color or a coded color in common HEX, RGB, etc... format.\n\t */\n\tcolor?: string;\n\n\t/**\n\t * Disables the component\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Define if the component should be in an error state.\n\t * It usually attaches a CSS class for styling purposes.\n\t */\n\thasErrors?: boolean;\n\n\t/**\n\t * The identifier of the component.\n\t */\n\tid?: HTMLAttributes['id'];\n\t/**\n\t * Used by v-model\n\t */\n\tmodelValue: null | number;\n\n\t/**\n\t * Defines the name of the input.\n\t */\n\tname: Exclude<InputHTMLAttributes['name'], undefined>;\n\n\t/**\n\t * Sets the input in a readonly state.\n\t */\n\treadonly?: InputHTMLAttributes['readonly'];\n\t/**\n\t * Maximum number of stars to render and maximum value of the component\n\t */\n\tstars?: number;\n} & Pick<BbIconProps, 'size'>;\n\ntype Option = {\n\tchecked: boolean;\n\tdisabled: boolean;\n\thighlighted: boolean;\n\tid?: string;\n\tname: string;\n\tsize: number;\n\tvalue: number;\n};\n\nconst props = withDefaults(defineProps<BaseRatingProps>(), {\n\tsize: 'md',\n\tstars: 5,\n});\n\nexport type BaseRatingEvents = {\n\t(e: 'blur', event: FocusEvent): void;\n\t(e: 'change', event: Event): void;\n\t(e: 'click', event: MouseEvent): void;\n\t(e: 'focus', event: FocusEvent): void;\n\t(e: 'inactive'): void;\n\t(e: 'input', event: Event): void;\n\t(e: 'keydown', event: KeyboardEvent): void;\n\t(e: 'mousedown', event: MouseEvent): void;\n\t(e: 'mouseup', event: MouseEvent): void;\n\t(e: 'update:modelValue', value: number | null): void;\n};\n\nexport type BaseRatingSlots = {\n\ticon?: (props: {\n\t\tchecked: boolean;\n\t\tdisabled: boolean;\n\t\tid?: string;\n\t\tsize: number;\n\t\tvalue: number;\n\t}) => any;\n};\n\ndefineSlots<BaseRatingSlots>();\n\nconst emit = defineEmits<BaseRatingEvents>();\n\nconst container = ref<HTMLElement>();\nconst active = ref(false);\n\nconst onInputChange = (event: Event) => {\n\temit('change', event);\n\tif (event.target instanceof HTMLInputElement) {\n\t\tif (event.target.checked) {\n\t\t\temit('update:modelValue', +event.target.value);\n\t\t}\n\t}\n};\n\nconst onInputClick = (event: MouseEvent) => {\n\temit('click', event);\n\tif (event.target instanceof HTMLInputElement) {\n\t\tif (event.target.checked) {\n\t\t\tif (+event.target.value === props.modelValue) {\n\t\t\t\temit('update:modelValue', null);\n\t\t\t}\n\t\t}\n\t}\n};\n\nconst onInputFocus = (event: FocusEvent) => {\n\temit('focus', event);\n\tif (!active.value) {\n\t\tdocument.addEventListener('focusin', onDocumentFocus, { passive: true });\n\t\tdocument.addEventListener('click', onDocumentClick, { passive: true });\n\t\tactive.value = true;\n\t}\n};\n\nconst eventListeners = {\n\tonBlur: (event: FocusEvent) => emit('blur', event),\n\tonChange: onInputChange,\n\tonClick: onInputClick,\n\tonFocus: onInputFocus,\n\tonInput: (event: Event) => emit('input', event),\n\tonKeydown: (event: KeyboardEvent) => emit('keydown', event),\n\tonMousedown: (event: MouseEvent) => emit('mousedown', event),\n\tonMouseup: (event: MouseEvent) => emit('mouseup', event),\n};\n\nconst onDocumentFocus = (event: FocusEvent) => {\n\tif (event.target instanceof HTMLElement) {\n\t\tif (!container.value?.contains(event.target)) {\n\t\t\temit('inactive');\n\t\t\tactive.value = false;\n\t\t\tdocument.removeEventListener('focusin', onDocumentFocus);\n\t\t\tdocument.removeEventListener('click', onDocumentClick);\n\t\t}\n\t}\n};\n\nconst onDocumentClick = (event: MouseEvent) => {\n\tif (event.target instanceof HTMLElement) {\n\t\tif (!container.value?.contains(event.target)) {\n\t\t\temit('inactive');\n\t\t\tactive.value = false;\n\t\t\tdocument.removeEventListener('focusin', onDocumentFocus);\n\t\t\tdocument.removeEventListener('click', onDocumentClick);\n\t\t}\n\t}\n};\n\nconst sizeMap: Size = {\n\txs: 12,\n\tsm: 16,\n\tmd: 24,\n\tlg: 28,\n\txl: 36,\n\txxl: 40,\n};\n\nconst size = computed(() => {\n\tlet dimension: number;\n\tif (typeof props.size === 'string') {\n\t\tdimension = sizeMap[props.size as keyof Size] ?? parseInt(props.size, 10);\n\t} else {\n\t\tdimension = props.size;\n\t}\n\treturn dimension;\n});\n\nconst options = computed(() => {\n\treturn new Array(props.stars)\n\t\t.fill(0)\n\t\t.map((_, index) => index + 1)\n\t\t.map((number): Option => {\n\t\t\tconst id = props.id\n\t\t\t\t? [props.id, number].filter(identity).join('_')\n\t\t\t\t: undefined;\n\n\t\t\tconst checked = number === props.modelValue;\n\t\t\tconst highlighted = !!(props.modelValue && number <= props.modelValue);\n\n\t\t\tconst disabled = !!(\n\t\t\t\tprops.disabled ||\n\t\t\t\t(isNotNil(props.readonly) ? booleanishToBoolean(props.readonly) : false)\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\tchecked,\n\t\t\t\tdisabled,\n\t\t\t\thighlighted,\n\t\t\t\tid,\n\t\t\t\tname: props.name,\n\t\t\t\tsize: size.value,\n\t\t\t\tvalue: number,\n\t\t\t};\n\t\t});\n});\n\nconst outerContainerAttributes = computed(() => {\n\tlet style: { [key: string]: string } = {};\n\tif (props.color && isCssColor(props.color)) {\n\t\tstyle.color = props.color;\n\t}\n\treturn {\n\t\tclass: {\n\t\t\t'bb-base-rating': true,\n\t\t\t'bb-base-rating--has-value': props.modelValue,\n\t\t\t'bb-base-rating--disabled': props.disabled,\n\t\t\t'bb-base-rating--errors': props.hasErrors,\n\t\t\t'bb-base-rating--readonly': props.readonly,\n\t\t\t[`bb-base-rating--${props.color}`]:\n\t\t\t\tprops.color && !isCssColor(props.color),\n\t\t},\n\t\tstyle,\n\t};\n});\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BaseRating';\n</style>\n"],"names":["props","__props","emit","__emit","container","ref","active","eventListeners","event","onDocumentFocus","onDocumentClick","_a","sizeMap","size","computed","dimension","options","_","index","number","id","identity","checked","highlighted","disabled","isNotNil","booleanishToBoolean","outerContainerAttributes","style","isCssColor"],"mappings":"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"}