@milaboratories/uikit 2.10.37 → 2.10.39

package/dist/components/PlTextField/PlTextField.vue2.js

@@ -1,5 +1,136 @@
-import f from "./PlTextField.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlTextField.vue2.js.map
+import e from "../PlTooltip/PlTooltip.js";
+import { getErrorMessage as t } from "../../helpers/error.js";
+import n from "../PlSvg/PlSvg.js";
+import r from "../PlIcon24/PlIcon24.js";
+import i from "../PlIcon16/PlIcon16.js";
+import a from "../../utils/DoubleContour.js";
+import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
+import s from "../../assets/images/required.js";
+import { useValidation as c } from "../../utils/useValidation.js";
+import './pl-text-field.css';/* empty css              */
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, reactive as y, ref as b, renderSlot as x, toDisplayString as S, unref as C, useModel as w, useSlots as T, vModelDynamic as E, withCtx as D, withDirectives as O, withModifiers as k } from "vue";
+var A = { class: "pl-text-field__envelope" }, j = {
+	key: 0,
+	ref: "label"
+}, M = {
+	key: 1,
+	class: "pl-text-field__prefix"
+}, N = [
+	"disabled",
+	"placeholder",
+	"type"
+], P = {
+	key: 0,
+	class: "pl-text-field__error"
+}, F = {
+	key: 1,
+	class: "pl-text-field__helper"
+}, I = /* @__PURE__ */ h({
+	name: "PlTextField",
+	props: /* @__PURE__ */ g({
+		label: {},
+		clearable: { type: [Boolean, Function] },
+		parse: { type: Function },
+		required: { type: Boolean },
+		error: {},
+		helper: {},
+		placeholder: {},
+		disabled: { type: Boolean },
+		dashed: { type: Boolean },
+		prefix: {},
+		rules: {},
+		type: {},
+		groupPosition: {}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(h) {
+		let g = T(), I = w(h, "modelValue"), L = h, R = b(void 0), z = b(), B = b(!1), V = y({ cached: void 0 }), H = l({
+			get() {
+				return V.cached ? V.cached.value : I.value === void 0 || I.value === null ? "" : String(I.value);
+			},
+			set(e) {
+				if (V.cached = void 0, L.parse) try {
+					I.value = L.parse(e);
+				} catch (t) {
+					V.cached = {
+						error: t instanceof Error ? t.message : String(t),
+						value: e
+					};
+				}
+				else I.value = e;
+			}
+		}), U = l(() => L.type && L.type === "password" ? B.value ? "text" : L.type : "text"), W = l(() => B.value ? "view-show" : "view-hide"), G = () => {
+			L.clearable && (V.cached = void 0, I.value = L.clearable === !0 ? "" : L.clearable());
+		}, K = c(H, L.rules || []), q = l(() => L.clearable ? L.clearable === !0 ? I.value === "" : I.value === L.clearable() : I.value === ""), J = l(() => !q.value), Y = l(() => {
+			let e = [], n = t(L.error);
+			return n && e.push(n), V.cached && e.push(V.cached.error), K.value.isValid || e.push(...K.value.errors), e;
+		}), X = l(() => Y.value.length > 0), Z = l(() => L.clearable && J.value && L.type !== "password" && !L.disabled), Q = () => B.value = !B.value, $ = () => {
+			V.cached = void 0;
+		}, ee = () => z.value?.focus();
+		return o(R), (t, o) => (v(), f("div", A, [p("div", {
+			ref_key: "rootRef",
+			ref: R,
+			class: _(["pl-text-field", {
+				error: X.value,
+				disabled: h.disabled,
+				dashed: h.dashed,
+				nonEmpty: J.value
+			}])
+		}, [
+			h.label ? (v(), f("label", j, [
+				h.required ? (v(), u(C(n), {
+					key: 0,
+					uri: C(s)
+				}, null, 8, ["uri"])) : d("", !0),
+				p("span", null, S(h.label), 1),
+				C(g).tooltip ? (v(), u(C(e), {
+					key: 1,
+					class: "info",
+					position: "top"
+				}, {
+					tooltip: D(() => [x(t.$slots, "tooltip")]),
+					_: 3
+				})) : d("", !0)
+			], 512)) : d("", !0),
+			h.prefix ? (v(), f("div", M, S(h.prefix), 1)) : d("", !0),
+			O(p("input", {
+				ref_key: "inputRef",
+				ref: z,
+				"onUpdate:modelValue": o[0] ||= (e) => H.value = e,
+				disabled: h.disabled,
+				placeholder: h.placeholder || "...",
+				type: U.value,
+				spellcheck: "false",
+				onFocusout: $
+			}, null, 40, N), [[E, H.value]]),
+			p("div", {
+				class: "pl-text-field__append",
+				onClick: ee
+			}, [
+				Z.value ? (v(), u(C(i), {
+					key: 0,
+					class: "pl-text-field__clearable",
+					name: "delete-clear",
+					onClick: k(G, ["stop"])
+				})) : d("", !0),
+				h.type === "password" ? (v(), u(C(r), {
+					key: 1,
+					name: W.value,
+					style: { cursor: "pointer" },
+					onClick: k(Q, ["stop"])
+				}, null, 8, ["name"])) : d("", !0),
+				x(t.$slots, "append")
+			]),
+			m(a, {
+				class: "pl-text-field__contour",
+				"group-position": h.groupPosition
+			}, null, 8, ["group-position"])
+		], 2), X.value ? (v(), f("div", P, S(Y.value.join(" ")), 1)) : h.helper ? (v(), f("div", F, S(h.helper), 1)) : d("", !0)]));
+	}
+});
+export { I as default };
+
+//# sourceMappingURL=PlTextField.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: \"PlTextField\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M, E = string, C = E\">\nimport type { Equal } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\ntype Model = Equal<M, E | C> extends true ? M : never; // basically in === out\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<Model>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /**\n   * The label to display above the input field.\n   */\n  label?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * Or you can pass a callback that returns a custom \"empty\" value (null | undefined | string)\n   */\n  clearable?: boolean | (() => C);\n  /**\n   * An optional callback to parse and/or cast the value, the return type overrides the model type.\n   * The callback must throw an exception if the value is invalid\n   */\n  parse?: (v: string) => E;\n  /**\n   * If `true`, the input field is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the input field.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the input field when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the input field when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the input field is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the input field has a dashed border.\n   */\n  dashed?: boolean;\n  /**\n   * A prefix text to display inside the input field before the value.\n   */\n  prefix?: string;\n  /**\n   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.\n   */\n  rules?: ((v: string) => boolean | string)[];\n  /**\n   * The string specifies whether the field should be a password or not, value could be \"password\" or undefined.\n   */\n  type?: \"password\";\n  /**\n   * Makes some of corners not rounded\n   * */\n  groupPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst data = reactive({\n  cached: undefined as { error: string; value: string } | undefined,\n});\n\nconst valueRef = computed<string>({\n  get() {\n    if (data.cached) {\n      return data.cached.value;\n    }\n    return model.value === undefined || model.value === null ? \"\" : String(model.value);\n  },\n  set(value) {\n    data.cached = undefined;\n\n    if (props.parse) {\n      try {\n        model.value = props.parse(value) as Model;\n      } catch (err) {\n        data.cached = {\n          error: err instanceof Error ? err.message : String(err),\n          value,\n        };\n      }\n    } else {\n      model.value = value as Model;\n    }\n  },\n});\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === \"password\") {\n    return showPassword.value ? \"text\" : props.type;\n  } else {\n    return \"text\";\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n  if (props.clearable) {\n    data.cached = undefined;\n    model.value = props.clearable === true ? (\"\" as Model) : (props.clearable() as Model);\n  }\n};\n\nconst validationData = useValidation(valueRef, props.rules || []);\n\nconst isEmpty = computed(() => {\n  if (props.clearable) {\n    return props.clearable === true ? model.value === \"\" : model.value === props.clearable();\n  }\n\n  return model.value === \"\";\n});\n\nconst nonEmpty = computed(() => !isEmpty.value);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (data.cached) {\n    errors.push(data.cached.error);\n  }\n  if (!validationData.value.isValid) {\n    errors.push(...validationData.value.errors);\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n  () => props.clearable && nonEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst onFocusOut = () => {\n  data.cached = undefined;\n};\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"valueRef\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n        @focusout=\"onFocusOut\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlTextField/pl-text-field.css

@@ -1 +1 @@
-.pl-text-field{--pl-text-field-text-color: var(--txt-01);--contour-color: var(--txt-01);--label-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--show-clearable: none;width:100%;min-width:160px;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.pl-text-field__envelope{font-family:var(--font-family-base)}.pl-text-field input{font-family:var(--font-family-base);font-weight:500;min-height:calc(var(--control-height) - 2px);line-height:20px;width:100%;padding:0 12px;border:none;font-size:inherit;background-color:transparent;color:var(--pl-text-field-text-color);caret-color:var(--border-color-focus);cursor:inherit}.pl-text-field input:focus{outline:none}.pl-text-field input::placeholder{color:var(--color-placeholder)}.pl-text-field label{display:flex;align-items:center;gap:4px;position:absolute;top:-8px;left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-text-field label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-text-field__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-text-field__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-text-field__append{padding-right:12px;display:flex;flex-direction:row;align-items:center;gap:4px;cursor:text}.pl-text-field__append .icon-16{cursor:pointer}.pl-text-field__append .mask-16{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-text-field__clearable{display:var(--show-clearable)!important;--icon-color: var(--ic-02) !important}.pl-text-field__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field:hover{--contour-color: var(--control-hover-color);--show-clearable: inline-block}.pl-text-field:focus-within{--show-clearable: inline-block}.pl-text-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-text-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-text-field.dashed .pl-text-field__contour{border-style:dashed}.pl-text-field.nonEmpty{--prefix-color: var(--txt-01)}.pl-text-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-text-field.disabled{--contour-color: var(--color-dis-01);--label-color: var(--dis-01);--pl-text-field-text-color: var(--dis-01);--mask-icon-bg-color: var(--dis-01);cursor:not-allowed}
+.pl-text-field{--pl-text-field-text-color:var(--txt-01);--contour-color:var(--txt-01);--label-color:var(--txt-01);--contour-border-width:1px;--contour-box-shadow:none;--label-offset-left-x:8px;--label-offset-right-x:8px;--prefix-color:var(--color-placeholder);--show-clearable:none;width:100%;min-width:160px;min-height:var(--control-height);border-radius:var(--border-radius-control);outline:none;flex-direction:row;align-items:center;display:flex;position:relative}.pl-text-field__envelope{font-family:var(--font-family-base)}.pl-text-field input{font-family:var(--font-family-base);min-height:calc(var(--control-height) - 2px);width:100%;font-weight:500;line-height:20px;font-size:inherit;color:var(--pl-text-field-text-color);caret-color:var(--border-color-focus);cursor:inherit;background-color:#0000;border:none;padding:0 12px}.pl-text-field input:focus{outline:none}.pl-text-field input::placeholder{color:var(--color-placeholder)}.pl-text-field label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-text-field label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-text-field__contour{border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none;border-style:solid;position:absolute;inset:0}.pl-text-field__prefix{white-space:nowrap;color:var(--prefix-color);margin-right:-12px;padding-left:12px}.pl-text-field__append{cursor:text;flex-direction:row;align-items:center;gap:4px;padding-right:12px;display:flex}.pl-text-field__append .icon-16{cursor:pointer}.pl-text-field__append .mask-16{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-text-field__clearable{display:var(--show-clearable)!important;--icon-color:var(--ic-02)!important}.pl-text-field__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-text-field__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-text-field:hover{--contour-color:var(--control-hover-color);--show-clearable:inline-block}.pl-text-field:focus-within{--show-clearable:inline-block}.pl-text-field:focus-within:not(.error){--label-color:var(--txt-focus);--contour-color:var(--border-color-focus);--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--border-color-focus-shadow)}.pl-text-field:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-text-field.dashed .pl-text-field__contour{border-style:dashed}.pl-text-field.nonEmpty{--prefix-color:var(--txt-01)}.pl-text-field.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-text-field.disabled{--contour-color:var(--color-dis-01);--label-color:var(--dis-01);--pl-text-field-text-color:var(--dis-01);--mask-icon-bg-color:var(--dis-01);cursor:not-allowed}

package/dist/components/PlToggleSwitch/PlToggleSwitch.js

@@ -0,0 +1,5 @@
+import e from "./PlToggleSwitch.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=PlToggleSwitch.js.map

package/dist/components/PlToggleSwitch/PlToggleSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlToggleSwitch.js","names":[],"sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for manipulating a boolean value\n */\nexport default {\n  name: \"PlToggleSwitch\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-toggle-switch.scss\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated\n   *\n   * @param value - The new boolean value of the model\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineProps<{\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * The current boolean value of the component (represents 'on' | 'off' states generally).\n   */\n  modelValue?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    tabindex=\"0\"\n    class=\"ui-toggle-switch\"\n    :class=\"{ active: modelValue }\"\n    @click=\"$emit('update:modelValue', !modelValue)\"\n    @keydown.enter=\"$emit('update:modelValue', !modelValue)\"\n  >\n    <div class=\"ui-toggle-switch__body\">\n      <div class=\"ui-toggle-switch__handle\" />\n    </div>\n    <span v-if=\"label\" class=\"label\">{{ label }}</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlToggleSwitch/PlToggleSwitch.vue2.js

@@ -1,5 +1,24 @@
-import f from "./PlToggleSwitch.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlToggleSwitch.vue2.js.map
+import './pl-toggle-switch.css';/* empty css                 */
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, toDisplayString as o, withKeys as s } from "vue";
+var c = {
+	key: 0,
+	class: "label"
+}, l = /* @__PURE__ */ r({
+	name: "PlToggleSwitch",
+	props: {
+		label: {},
+		modelValue: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(r) {
+		return (l, u) => (a(), t("div", {
+			tabindex: "0",
+			class: i(["ui-toggle-switch", { active: r.modelValue }]),
+			onClick: u[0] ||= (e) => l.$emit("update:modelValue", !r.modelValue),
+			onKeydown: u[1] ||= s((e) => l.$emit("update:modelValue", !r.modelValue), ["enter"])
+		}, [u[2] ||= n("div", { class: "ui-toggle-switch__body" }, [n("div", { class: "ui-toggle-switch__handle" })], -1), r.label ? (a(), t("span", c, o(r.label), 1)) : e("", !0)], 34));
+	}
+});
+export { l as default };
+
+//# sourceMappingURL=PlToggleSwitch.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlToggleSwitch.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"PlToggleSwitch.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for manipulating a boolean value\n */\nexport default {\n  name: \"PlToggleSwitch\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-toggle-switch.scss\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated\n   *\n   * @param value - The new boolean value of the model\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineProps<{\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * The current boolean value of the component (represents 'on' | 'off' states generally).\n   */\n  modelValue?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    tabindex=\"0\"\n    class=\"ui-toggle-switch\"\n    :class=\"{ active: modelValue }\"\n    @click=\"$emit('update:modelValue', !modelValue)\"\n    @keydown.enter=\"$emit('update:modelValue', !modelValue)\"\n  >\n    <div class=\"ui-toggle-switch__body\">\n      <div class=\"ui-toggle-switch__handle\" />\n    </div>\n    <span v-if=\"label\" class=\"label\">{{ label }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;CAKE,MAAM;;;;;;;yBA6BN,EAWM,OAAA;GAVJ,UAAS;GACT,OAAK,EAAA,CAAC,oBAAkB,EAAA,QACN,EAAA,YAAU,CAAA,CAAA;GAC3B,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU;GAC7C,WAAO,AAAA,EAAA,OAAA,GAAA,MAAQA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU,EAAA,CAAA,QAAA,CAAA;eAEtD,EAEM,OAAA,EAFD,OAAM,0BAAwB,EAAA,CACjC,EAAwC,OAAA,EAAnC,OAAM,4BAA0B,CAAA,CAAA,EAAA,GAAA,EAE3B,EAAA,SAAA,GAAA,EAAZ,EAAmD,QAAnD,GAAmD,EAAf,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}

package/dist/components/PlToggleSwitch/pl-toggle-switch.css

@@ -1 +1 @@
-.ui-toggle-switch{--handle-ml: 0;--body-bg: var(--bg-base-light);--body-shadow: var(--btn-group-shape-shadow);display:flex;align-items:center;gap:12px;outline:none}.ui-toggle-switch__body{width:40px;height:24px;display:flex;padding:5px;border-radius:12px;border:1px solid var(--color-ic-01);box-shadow:var(--body-shadow);background:var(--body-bg);cursor:pointer}.ui-toggle-switch__handle{width:12px;height:12px;border-radius:12px;border:1px solid var(--color-ic-01);background:var(--color-ic-00);margin-left:var(--handle-ml)}.ui-toggle-switch.active{--body-bg: var(--btn-switcher-bg);--handle-ml: auto}.ui-toggle-switch:focus-visible{--label-color: var(--txt-focus);--body-shadow: var(--btn-group-shape-shadow), 0 0 0 2px #fff, 0 0 0 4px var(--border-color-focus)}
+.ui-toggle-switch{--handle-ml:0;--body-bg:var(--bg-base-light);--body-shadow:var(--btn-group-shape-shadow);outline:none;align-items:center;gap:12px;display:flex}.ui-toggle-switch__body{border:1px solid var(--color-ic-01);width:40px;height:24px;box-shadow:var(--body-shadow);background:var(--body-bg);cursor:pointer;border-radius:12px;padding:5px;display:flex}.ui-toggle-switch__handle{border:1px solid var(--color-ic-01);background:var(--color-ic-00);width:12px;height:12px;margin-left:var(--handle-ml);border-radius:12px}.ui-toggle-switch.active{--body-bg:var(--btn-switcher-bg);--handle-ml:auto}.ui-toggle-switch:focus-visible{--label-color:var(--txt-focus);--body-shadow:var(--btn-group-shape-shadow), 0 0 0 2px #fff, 0 0 0 4px var(--border-color-focus)}

package/dist/components/PlTooltip/PlTooltip.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./PlTooltip.vue2.js";
+import n from "./PlTooltip.style.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=PlTooltip.js.map

package/dist/components/PlTooltip/PlTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlTooltip.js","names":[],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlTooltip/PlTooltip.style.js

@@ -0,0 +1,15 @@
+import './PlTooltip.vue.css';var e = {
+	plTooltipAnchorWrapper: "_plTooltipAnchorWrapper_ttgyk_2",
+	plTooltipContainer: "_plTooltipContainer_ttgyk_16",
+	plTooltipContent: "_plTooltipContent_ttgyk_36",
+	plTooltipBox: "_plTooltipBox_ttgyk_47",
+	plTooltipBeak: "_plTooltipBeak_ttgyk_53",
+	top: "_top_ttgyk_63",
+	bottom: "_bottom_ttgyk_77",
+	left: "_left_ttgyk_91",
+	right: "_right_ttgyk_108",
+	topLeft: "_topLeft_ttgyk_125"
+};
+export { e as default };
+
+//# sourceMappingURL=PlTooltip.style.js.map

package/dist/components/PlTooltip/PlTooltip.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlTooltip.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlTooltip/PlTooltip.vue.css

@@ -0,0 +1 @@
+._plTooltipAnchorWrapper_ttgyk_2{display:inline-block}._plTooltipAnchorWrapper_ttgyk_2>:first-child,._plTooltipAnchorWrapper_ttgyk_2.info{--anchorName:var(--v0ef0814d);anchor-name:var(--anchorName)}._plTooltipContainer_ttgyk_16{--plTooltipMaxWidth:300px;--gap:8px;--tailWidth:8px;--tailHeight:calc(var(--gap) + 2px);--tailClipTop:polygon(0 0, 100% 0, 100% calc(100% - var(--gap)), 50% calc(100% - 3px), 0 calc(100% - var(--gap)));--tailClipBottom:polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));--tailClipLeft:polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);--tailClipRight:polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);z-index:var(--z-tooltip)}._plTooltipContent_ttgyk_36{background:var(--tooltip-bg);word-break:normal;width:max-content;max-width:var(--plTooltipMaxWidth);color:#fff;border-radius:6px;padding:8px 12px 9px;display:inline-block}._plTooltipBox_ttgyk_47{position-anchor:var(--anchorName);z-index:1;position:absolute}._plTooltipBeak_ttgyk_53{position-anchor:var(--anchorName);z-index:0;background:var(--tooltip-bg);width:var(--tailWidth);height:var(--tailHeight);position:absolute}._plTooltipContainer_ttgyk_16._top_ttgyk_63 ._plTooltipBox_ttgyk_47{position-area:top;bottom:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._top_ttgyk_63 ._plTooltipBeak_ttgyk_53{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}._plTooltipContainer_ttgyk_16._bottom_ttgyk_77 ._plTooltipBox_ttgyk_47{position-area:bottom;top:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._bottom_ttgyk_77 ._plTooltipBeak_ttgyk_53{position-area:bottom;top:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipBottom)}._plTooltipContainer_ttgyk_16._left_ttgyk_91 ._plTooltipBox_ttgyk_47{position-area:left;right:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._left_ttgyk_91 ._plTooltipBeak_ttgyk_53{position-area:left;right:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipLeft)}._plTooltipContainer_ttgyk_16._right_ttgyk_108 ._plTooltipBox_ttgyk_47{position-area:right;left:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._right_ttgyk_108 ._plTooltipBeak_ttgyk_53{position-area:right;left:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipRight)}._plTooltipContainer_ttgyk_16._topLeft_ttgyk_125 ._plTooltipBox_ttgyk_47{position-area:top;bottom:var(--gap);left:anchor(var(--anchorName) left)}._plTooltipContainer_ttgyk_16._topLeft_ttgyk_125 ._plTooltipBeak_ttgyk_53{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}.pl-tooltip-fade-leave-active,.pl-tooltip-fade-enter-active{z-index:var(--z-tooltip);transition:opacity .2s ease-in-out}.pl-tooltip-fade-enter-from,.pl-tooltip-fade-leave-to{opacity:0}._plTooltipContent_ttgyk_36 a{color:var(--tooltip-link-color)}._plTooltipContent_ttgyk_36 p{margin-bottom:8px}._plTooltipContent_ttgyk_36 ul,._plTooltipContent_ttgyk_36 li{margin-left:6px;padding-left:6px}._plTooltipContent_ttgyk_36 li{margin-bottom:4px}

package/dist/components/PlTooltip/PlTooltip.vue2.js

@@ -1,135 +1,100 @@
-import { defineComponent as B, useCssVars as w, reactive as D, watch as h, ref as T, onUnmounted as N, createBlock as $, openBlock as k, resolveDynamicComponent as O, mergeProps as E, withCtx as C, renderSlot as b, createVNode as S, Transition as V, createCommentVNode as W, Teleport as q, createElementVNode as i, normalizeStyle as z, normalizeClass as a, withModifiers as A } from "vue";
-import { uniqueId as L } from "@milaboratories/helpers";
-import { tMap as f } from "./global.js";
-import { delay as P, timeout as R } from "../../helpers/utils.js";
-import { useClickOutside as F } from "../../composition/useClickOutside.js";
-const I = {
-  name: "PlTooltip"
-}, J = /* @__PURE__ */ B({
-  ...I,
-  props: {
-    openDelay: { default: 100 },
-    closeDelay: { default: 1e3 },
-    position: { default: "top" },
-    hide: { type: Boolean },
-    gap: { default: 8 },
-    offsetToTheEdge: { default: 8 },
-    element: { default: "div" },
-    maxWidth: { default: "300px" },
-    container: { default: "body" },
-    hoverable: { type: Boolean, default: !0 }
-  },
-  emits: ["tooltip:close"],
-  setup(l, { emit: g }) {
-    w((e) => ({
-      v0ef0814d: v
-    }));
-    const M = g, r = Symbol(), o = l, t = D({
-      open: !1,
-      over: !1,
-      tooltipOpen: !1,
-      key: Symbol()
-    });
-    f.set(r, () => s()), h(
-      () => t.open,
-      (e) => {
-        requestAnimationFrame(() => {
-          t.tooltipOpen = e;
-        });
-      }
-    );
-    let d = () => {
-    };
-    const m = () => {
-      t.open = !0;
-      for (const [e, n] of f.entries())
-        e !== r && n();
-    }, s = () => {
-      t.open = !1, M("tooltip:close");
-    }, p = async () => {
-      o.hide || !o.hoverable || (t.over = !0, d(), await P(o.openDelay ?? 100), t.over && m());
-    }, u = () => {
-      o.hoverable && (t.over = !1, d = R(() => {
-        t.over || s();
-      }, o.closeDelay));
-    };
-    h(
-      () => o.hide,
-      (e) => {
-        e ? s() : o.hoverable || m();
-      }
-    );
-    const c = T(), y = T();
-    F([c, y], () => s()), N(() => {
-      f.delete(r);
-    });
-    const v = `--anchor-${L()}`;
-    return (e, n) => (k(), $(O(l.element), E({
-      class: e.$style.plTooltipAnchorWrapper
-    }, e.$attrs, {
-      ref_key: "rootRef",
-      ref: c,
-      onClick: p,
-      onMouseover: p,
-      onMouseleave: u
-    }), {
-      default: C(() => [
-        b(e.$slots, "default"),
-        S(V, { name: "pl-tooltip-fade" }, {
-          default: C(() => [
-            e.$slots.tooltip && t.tooltipOpen ? (k(), $(q, {
-              key: 0,
-              to: l.container
-            }, [
-              i("div", {
-                class: a([
-                  e.$style.plTooltipContainer,
-                  {
-                    [e.$style.top]: o.position === "top",
-                    [e.$style.bottom]: o.position === "bottom",
-                    [e.$style.left]: o.position === "left",
-                    [e.$style.right]: o.position === "right",
-                    [e.$style.topLeft]: o.position === "top-left"
-                  }
-                ]),
-                style: z({
-                  "--anchorName": v,
-                  "--gap": l.gap + "px",
-                  "--offsetToTheEdge": l.offsetToTheEdge + "px",
-                  "--plTooltipMaxWidth": l.maxWidth
-                })
-              }, [
-                i("div", {
-                  class: a(e.$style.plTooltipBox),
-                  onClick: n[0] || (n[0] = A(() => {
-                  }, ["stop"]))
-                }, [
-                  i("div", {
-                    ref_key: "tooltip",
-                    ref: y,
-                    class: a([e.$style.plTooltipContent, l.position]),
-                    onMouseover: p,
-                    onMouseleave: u
-                  }, [
-                    i("div", null, [
-                      b(e.$slots, "tooltip")
-                    ])
-                  ], 34)
-                ], 2),
-                i("div", {
-                  class: a(e.$style.plTooltipBeak)
-                }, null, 2)
-              ], 6)
-            ], 8, ["to"])) : W("", !0)
-          ]),
-          _: 3
-        })
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
+import { tMap as e } from "./global.js";
+import { delay as t, timeout as n } from "../../helpers/utils.js";
+import { useClickOutside as r } from "../../composition/useClickOutside.js";
+import { Teleport as i, Transition as a, createBlock as o, createCommentVNode as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, onUnmounted as m, openBlock as h, reactive as g, ref as _, renderSlot as v, resolveDynamicComponent as y, useCssVars as b, watch as x, withCtx as S, withModifiers as C } from "vue";
+import { uniqueId as w } from "@milaboratories/helpers";
+var T = /* @__PURE__ */ u({
+	name: "PlTooltip",
+	props: {
+		openDelay: { default: 100 },
+		closeDelay: { default: 1e3 },
+		position: { default: "top" },
+		hide: { type: Boolean },
+		gap: { default: 8 },
+		offsetToTheEdge: { default: 8 },
+		element: { default: "div" },
+		maxWidth: { default: "300px" },
+		container: { default: "body" },
+		hoverable: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["tooltip:close"],
+	setup(u, { emit: T }) {
+		b((e) => ({ v0ef0814d: L }));
+		let E = T, D = Symbol(), O = u, k = g({
+			open: !1,
+			over: !1,
+			tooltipOpen: !1,
+			key: Symbol()
+		});
+		e.set(D, () => M()), x(() => k.open, (e) => {
+			requestAnimationFrame(() => {
+				k.tooltipOpen = e;
+			});
+		});
+		let A = () => {}, j = () => {
+			k.open = !0;
+			for (let [t, n] of e.entries()) t !== D && n();
+		}, M = () => {
+			k.open = !1, E("tooltip:close");
+		}, N = async () => {
+			O.hide || !O.hoverable || (k.over = !0, A(), await t(O.openDelay ?? 100), k.over && j());
+		}, P = () => {
+			O.hoverable && (k.over = !1, A = n(() => {
+				k.over || M();
+			}, O.closeDelay));
+		};
+		x(() => O.hide, (e) => {
+			e ? M() : O.hoverable || j();
+		});
+		let F = _(), I = _();
+		r([F, I], () => M()), m(() => {
+			e.delete(D);
+		});
+		let L = `--anchor-${w()}`;
+		return (e, t) => (h(), o(y(u.element), d({ class: e.$style.plTooltipAnchorWrapper }, e.$attrs, {
+			ref_key: "rootRef",
+			ref: F,
+			onClick: N,
+			onMouseover: N,
+			onMouseleave: P
+		}), {
+			default: S(() => [v(e.$slots, "default"), l(a, { name: "pl-tooltip-fade" }, {
+				default: S(() => [e.$slots.tooltip && k.tooltipOpen ? (h(), o(i, {
+					key: 0,
+					to: u.container
+				}, [c("div", {
+					class: f([e.$style.plTooltipContainer, {
+						[e.$style.top]: O.position === "top",
+						[e.$style.bottom]: O.position === "bottom",
+						[e.$style.left]: O.position === "left",
+						[e.$style.right]: O.position === "right",
+						[e.$style.topLeft]: O.position === "top-left"
+					}]),
+					style: p({
+						"--anchorName": L,
+						"--gap": u.gap + "px",
+						"--offsetToTheEdge": u.offsetToTheEdge + "px",
+						"--plTooltipMaxWidth": u.maxWidth
+					})
+				}, [c("div", {
+					class: f(e.$style.plTooltipBox),
+					onClick: t[0] ||= C(() => {}, ["stop"])
+				}, [c("div", {
+					ref_key: "tooltip",
+					ref: I,
+					class: f([e.$style.plTooltipContent, u.position]),
+					onMouseover: N,
+					onMouseleave: P
+				}, [c("div", null, [v(e.$slots, "tooltip")])], 34)], 2), c("div", { class: f(e.$style.plTooltipBeak) }, null, 2)], 6)], 8, ["to"])) : s("", !0)]),
+				_: 3
+			})]),
+			_: 3
+		}, 16, ["class"]));
+	}
 });
-export {
-  J as default
-};
-//# sourceMappingURL=PlTooltip.vue2.js.map
+export { T as default };
+
+//# sourceMappingURL=PlTooltip.vue2.js.map