@milaboratories/uikit 2.10.37 → 2.10.39

package/dist/components/PlErrorAlert/PlErrorAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlErrorAlert.js","names":[],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlErrorAlert/PlErrorAlert.style.js

@@ -0,0 +1,11 @@
+import './PlErrorAlert.vue.css';var e = {
+	root: "_root_o15c5_2",
+	copy: "_copy_o15c5_15",
+	title: "_title_o15c5_27",
+	titleIcon: "_titleIcon_o15c5_38",
+	titleText: "_titleText_o15c5_42",
+	message: "_message_o15c5_48"
+};
+export { e as default };
+
+//# sourceMappingURL=PlErrorAlert.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlErrorAlert.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlErrorAlert/PlErrorAlert.vue.css

@@ -0,0 +1 @@
+._root_o15c5_2{background:var(--bg-error);border:1px var(--border-color-error) solid;border-radius:var(--border-radius-control);flex-direction:column;gap:12px;padding:12px;display:flex;position:relative;overflow:auto}._copy_o15c5_15{opacity:.4;transition:opacity .3s;position:absolute;top:12px;right:12px}._copy_o15c5_15:hover{opacity:1}._title_o15c5_27{align-items:center;gap:10px;max-width:calc(100% - 20px);min-height:24px;font-weight:700;line-height:24px;display:flex;overflow:hidden}._titleIcon_o15c5_38{--icon-color:var(--txt-error)}._titleText_o15c5_42{text-overflow:ellipsis;width:100%;overflow:hidden}._message_o15c5_48{white-space:pre-wrap;word-break:break-word;max-height:100%;font-family:var(--font-family-monospace);overflow:auto}

package/dist/components/PlErrorAlert/PlErrorAlert.vue2.js

@@ -1,52 +1,36 @@
-import { defineComponent as c, createElementBlock as p, openBlock as d, normalizeClass as s, normalizeStyle as f, createVNode as o, renderSlot as a, unref as i, createElementVNode as l, toDisplayString as r } from "vue";
-import g from "../PlClipboard/PlClipboard.vue.js";
-import u from "../PlIcon16/PlIcon16.vue.js";
-const y = {
-  name: "PlErrorAlert"
-}, k = /* @__PURE__ */ c({
-  ...y,
-  props: {
-    title: { default: void 0 },
-    message: { default: void 0 },
-    maxHeight: { default: "300px" },
-    copyMessage: { default: void 0 }
-  },
-  setup(n) {
-    const t = n;
-    function m() {
-      const e = t.copyMessage ?? t.message;
-      typeof e == "string" && navigator.clipboard.writeText(e);
-    }
-    return (e, v) => (d(), p("div", {
-      style: f({ maxHeight: t.maxHeight }),
-      class: s(e.$style.root)
-    }, [
-      o(i(g), {
-        class: s(e.$style.copy),
-        onCopy: m
-      }, null, 8, ["class"]),
-      a(e.$slots, "title", {}, () => [
-        l("div", {
-          class: s(e.$style.title)
-        }, [
-          o(i(u), {
-            class: s(e.$style.titleIcon),
-            name: "warning"
-          }, null, 8, ["class"]),
-          l("div", {
-            class: s(e.$style.titleText)
-          }, r(t.title), 3)
-        ], 2)
-      ]),
-      a(e.$slots, "message", {}, () => [
-        l("div", {
-          class: s(e.$style.message)
-        }, r(t.message), 3)
-      ])
-    ], 6));
-  }
+import e from "../PlIcon16/PlIcon16.js";
+import t from "../PlClipboard/PlClipboard.js";
+import { createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d } from "vue";
+var f = /* @__PURE__ */ a({
+	name: "PlErrorAlert",
+	props: {
+		title: { default: void 0 },
+		message: { default: void 0 },
+		maxHeight: { default: "300px" },
+		copyMessage: { default: void 0 }
+	},
+	setup(a) {
+		let f = a;
+		function p() {
+			let e = f.copyMessage ?? f.message;
+			typeof e == "string" && navigator.clipboard.writeText(e);
+		}
+		return (a, m) => (c(), n("div", {
+			style: s({ maxHeight: f.maxHeight }),
+			class: o(a.$style.root)
+		}, [
+			i(d(t), {
+				class: o(a.$style.copy),
+				onCopy: p
+			}, null, 8, ["class"]),
+			l(a.$slots, "title", {}, () => [r("div", { class: o(a.$style.title) }, [i(d(e), {
+				class: o(a.$style.titleIcon),
+				name: "warning"
+			}, null, 8, ["class"]), r("div", { class: o(a.$style.titleText) }, u(f.title), 3)], 2)]),
+			l(a.$slots, "message", {}, () => [r("div", { class: o(a.$style.message) }, u(f.message), 3)])
+		], 6));
+	}
 });
-export {
-  k as default
-};
-//# sourceMappingURL=PlErrorAlert.vue2.js.map
+export { f as default };
+
+//# sourceMappingURL=PlErrorAlert.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlErrorAlert.vue2.js","sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"names":["__default__","props","__props","onCopy","value","_createElementBlock","_normalizeStyle","_normalizeClass","$style","_createVNode","_unref","PlClipboard","_renderSlot","_ctx","_createElementVNode","PlMaskIcon16","_toDisplayString"],"mappings":";;;AACA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;AAOA,UAAMC,IAAQC;AAed,aAASC,IAAS;AAChB,YAAMC,IAAQH,EAAM,eAAeA,EAAM;AACzC,MAAI,OAAOG,KAAU,YACnB,UAAU,UAAU,UAAUA,CAAK;AAAA,IAEvC;2BAIEC,EAaM,OAAA;AAAA,MAbA,OAAKC,EAAA,EAAA,WAAeL,EAAM,WAAS;AAAA,MAAK,OAAKM,EAAEC,EAAAA,OAAO,IAAI;AAAA,IAAA;MAC9DC,EAAmDC,EAAAC,CAAA,GAAA;AAAA,QAArC,OAAKJ,EAAEC,EAAAA,OAAO,IAAI;AAAA,QAAG,QAAAL;AAAA,MAAA;MACnCS,EAKOC,uBALP,MAKO;AAAA,QAJLC,EAGM,OAAA;AAAA,UAHA,OAAKP,EAAEC,EAAAA,OAAO,KAAK;AAAA,QAAA;UACvBC,EAAyDC,EAAAK,CAAA,GAAA;AAAA,YAA1C,OAAKR,EAAEC,EAAAA,OAAO,SAAS;AAAA,YAAE,MAAK;AAAA,UAAA;UAC7CM,EAAsD,OAAA;AAAA,YAAhD,OAAKP,EAAEC,EAAAA,OAAO,SAAS;AAAA,UAAA,GAAKQ,EAAAf,EAAM,KAAK,GAAA,CAAA;AAAA,QAAA;;MAGjDW,EAIOC,yBAJP,MAIO;AAAA,QAHLC,EAEM,OAAA;AAAA,UAFA,OAAKP,EAAEC,EAAAA,OAAO,OAAO;AAAA,QAAA,GACtBQ,EAAAf,EAAM,OAAO,GAAA,CAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"PlErrorAlert.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":";;;;CAEE,MAAM;;;;;;;;EAQR,IAAM,IAAQ;EAed,SAAS,IAAS;GAChB,IAAM,IAAQ,EAAM,eAAe,EAAM;AACzC,GAAI,OAAO,KAAU,YACnB,UAAU,UAAU,UAAU,EAAM;;yBAMtC,EAaM,OAAA;GAbA,OAAK,EAAA,EAAA,WAAe,EAAM,WAAS,CAAA;GAAK,OAAK,EAAEA,EAAAA,OAAO,KAAI;;GAC9D,EAAmD,EAAA,EAAA,EAAA;IAArC,OAAK,EAAEA,EAAAA,OAAO,KAAI;IAAS;;GACzC,EAKO,EAAA,QAAA,SAAA,EAAA,QAAA,CAJL,EAGM,OAAA,EAHA,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAAyD,EAAA,EAAA,EAAA;IAA1C,OAAK,EAAEA,EAAAA,OAAO,UAAS;IAAE,MAAK;2BAC7C,EAAsD,OAAA,EAAhD,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA,EAAK,EAAM,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;GAGjD,EAIO,EAAA,QAAA,WAAA,EAAA,QAAA,CAHL,EAEM,OAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,QAAO,EAAA,EAAA,EACtB,EAAM,QAAO,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/PlErrorBoundary/PlErrorBoundary.js

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

package/dist/components/PlErrorBoundary/PlErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlErrorBoundary.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined | string => {\n  if (err == null) {\n    return undefined;\n  }\n\n  if (isErrorLike(err)) {\n    return err.stack == null || err.stack.length === 0\n      ? err.message\n      : err.stack.includes(err.message)\n        ? err.stack\n        : err.message + \"\\n\" + err.stack;\n  }\n\n  return tryDo(\n    () => JSON.stringify(err, null, 4),\n    () => err.toString(),\n  );\n};\n\nconst data = ref<null | {\n  title: undefined | string;\n  error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n  data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> | null>(null);\n\nonBeforeUpdate(() => {\n  // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n  // reset the error state.\n  if (data.value !== null && errorAlert.value) {\n    reset();\n  }\n});\n\nonErrorCaptured((err, instance) => {\n  data.value = {\n    title: instance?.$?.type?.name ?? undefined,\n    error: err,\n  };\n  // stop error propagation\n  return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n  <slot />\n  <PlErrorAlert v-if=\"error\" ref=\"errorAlert\" :message=\"message\" :title=\"data?.title\" />\n</template>\n"],"mappings":""}

package/dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js

@@ -1,5 +1,33 @@
-import f from "./PlErrorBoundary.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlErrorBoundary.vue2.js.map
+import e from "../PlErrorAlert/PlErrorAlert.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, onBeforeUpdate as s, onErrorCaptured as c, openBlock as l, ref as u, renderSlot as d, unref as f } from "vue";
+import { isErrorLike as p, tryDo as m } from "@milaboratories/helpers";
+var h = /* @__PURE__ */ o({
+	__name: "PlErrorBoundary",
+	setup(o, { expose: h }) {
+		let g = (e) => {
+			if (e != null) return p(e) ? e.stack == null || e.stack.length === 0 ? e.message : e.stack.includes(e.message) ? e.stack : e.message + "\n" + e.stack : m(() => JSON.stringify(e, null, 4), () => e.toString());
+		}, _ = u(null), v = n(() => _.value?.error), y = n(() => g(v.value));
+		function b() {
+			_.value = null;
+		}
+		let x = u(null);
+		return s(() => {
+			_.value !== null && x.value && b();
+		}), c((e, t) => (_.value = {
+			title: t?.$?.type?.name ?? void 0,
+			error: e
+		}, !1)), h({
+			error: v,
+			reset: b
+		}), (n, o) => (l(), a(t, null, [d(n.$slots, "default"), v.value ? (l(), r(f(e), {
+			key: 0,
+			ref_key: "errorAlert",
+			ref: x,
+			message: y.value,
+			title: _.value?.title
+		}, null, 8, ["message", "title"])) : i("", !0)], 64));
+	}
+});
+export { h as default };
+
+//# sourceMappingURL=PlErrorBoundary.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlErrorBoundary.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"PlErrorBoundary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined | string => {\n  if (err == null) {\n    return undefined;\n  }\n\n  if (isErrorLike(err)) {\n    return err.stack == null || err.stack.length === 0\n      ? err.message\n      : err.stack.includes(err.message)\n        ? err.stack\n        : err.message + \"\\n\" + err.stack;\n  }\n\n  return tryDo(\n    () => JSON.stringify(err, null, 4),\n    () => err.toString(),\n  );\n};\n\nconst data = ref<null | {\n  title: undefined | string;\n  error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n  data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> | null>(null);\n\nonBeforeUpdate(() => {\n  // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n  // reset the error state.\n  if (data.value !== null && errorAlert.value) {\n    reset();\n  }\n});\n\nonErrorCaptured((err, instance) => {\n  data.value = {\n    title: instance?.$?.type?.name ?? undefined,\n    error: err,\n  };\n  // stop error propagation\n  return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n  <slot />\n  <PlErrorAlert v-if=\"error\" ref=\"errorAlert\" :message=\"message\" :title=\"data?.title\" />\n</template>\n"],"mappings":";;;;;;EAKA,IAAM,KAAkB,MAAqC;AACvD,YAAO,KAYX,QARI,EAAY,EAAI,GACX,EAAI,SAAS,QAAQ,EAAI,MAAM,WAAW,IAC7C,EAAI,UACJ,EAAI,MAAM,SAAS,EAAI,QAAO,GAC5B,EAAI,QACJ,EAAI,UAAU,OAAO,EAAI,QAG1B,QACC,KAAK,UAAU,GAAK,MAAM,EAAE,QAC5B,EAAI,UAAU,CACrB;KAGG,IAAO,EAGV,KAAK,EAEF,IAAQ,QAAe,EAAK,OAAO,MAAM,EACzC,IAAU,QAAe,EAAe,EAAM,MAAM,CAAC;EAE3D,SAAS,IAAQ;AACf,KAAK,QAAQ;;EAGf,IAAM,IAAa,EAA8C,KAAK;SAEtE,QAAqB;AAGnB,GAAI,EAAK,UAAU,QAAQ,EAAW,SACpC,GAAO;IAET,EAEF,GAAiB,GAAK,OACpB,EAAK,QAAQ;GACX,OAAO,GAAU,GAAG,MAAM,QAAQ,KAAA;GAClC,OAAO;GACR,EAEM,IACP,EAEF,EAAa;GAAE;GAAO;GAAO,CAAC,8BAI5B,EAAQ,EAAA,QAAA,UAAA,EACY,EAAA,SAAA,GAAA,EAApB,EAAsF,EAAA,EAAA,EAAA;;YAAvD;GAAJ,KAAI;GAAc,SAAS,EAAA;GAAU,OAAO,EAAA,OAAM"}

package/dist/components/PlFileDialog/Local.js

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

package/dist/components/PlFileDialog/Local.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Local.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n  importFiles: (value: ImportedFiles) => void;\n  multi?: boolean;\n  extensions?: string[];\n}>();\n\nconst data = reactive({\n  error: undefined as unknown,\n});\n\nconst label = computed(() =>\n  props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n  const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n  if (!fileToImportHandle) {\n    return console.error(\n      \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n    );\n  }\n\n  const extensions = normalizeExtensions(props.extensions);\n\n  const files = await Promise.all(\n    [...(ev.dataTransfer?.files ?? [])]\n      .filter((f) => !!f)\n      .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n      .map((file) => {\n        return fileToImportHandle(file);\n      }),\n  );\n\n  if (files.length) {\n    props.importFiles({\n      files,\n    });\n  }\n};\n\nconst openNativeDialog = async () => {\n  const filters: OpenDialogFilter[] = props.extensions\n    ? [\n        {\n          name: \"All Files\",\n          extensions: [...props.extensions],\n        },\n      ]\n    : [];\n\n  if (props.multi) {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenMultipleFilesDialog({\n        title: \"Select files to import\",\n        filters,\n      })\n      .then(({ files }) => {\n        if (files) {\n          props.importFiles({\n            files,\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  } else {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenSingleFileDialog({\n        title: \"Select file to import\",\n        filters,\n      })\n      .then(({ file }) => {\n        if (file) {\n          props.importFiles({\n            files: [file],\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  }\n};\n</script>\n\n<template>\n  <div :class=\"style.local\" @drop=\"onDrop\" @dragover.prevent @click=\"openNativeDialog\">\n    <PlIcon24 name=\"cloud-upload\" />\n    <span>{{ label }}</span>\n    <span v-if=\"extensions\" :class=\"style.supported\"\n      >Supported formats: {{ extensions.join(\", \") }}</span\n    >\n    <span v-if=\"data.error\" class=\"alert-error\">{{ data.error }}</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlFileDialog/Local.vue2.js

@@ -1,5 +1,57 @@
-import f from "./Local.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=Local.vue2.js.map
+import e from "../PlIcon24/PlIcon24.js";
+import t from "./pl-file-dialog.module.js";
+import { normalizeExtensions as n } from "./utils.js";
+import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, reactive as d, toDisplayString as f, unref as p, withModifiers as m } from "vue";
+import { getRawPlatformaInstance as h } from "@platforma-sdk/model";
+var g = {
+	key: 1,
+	class: "alert-error"
+}, _ = /* @__PURE__ */ c({
+	__name: "Local",
+	props: {
+		importFiles: { type: Function },
+		multi: { type: Boolean },
+		extensions: {}
+	},
+	setup(c) {
+		let _ = c, v = d({ error: void 0 }), y = r(() => _.multi ? "Drag & Drop files here or click to add" : "Drag & Drop file here or click to add"), b = async (e) => {
+			let t = h()?.lsDriver?.fileToImportHandle;
+			if (!t) return console.error("API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available");
+			let r = n(_.extensions), i = await Promise.all([...e.dataTransfer?.files ?? []].filter((e) => !!e).filter((e) => r ? r.some((t) => e.name.endsWith(t)) : !0).map((e) => t(e)));
+			i.length && _.importFiles({ files: i });
+		}, x = async () => {
+			let e = _.extensions ? [{
+				name: "All Files",
+				extensions: [..._.extensions]
+			}] : [];
+			_.multi ? h()?.lsDriver.showOpenMultipleFilesDialog({
+				title: "Select files to import",
+				filters: e
+			}).then(({ files: e }) => {
+				e && _.importFiles({ files: e });
+			}).catch((e) => v.error = e) : h()?.lsDriver.showOpenSingleFileDialog({
+				title: "Select file to import",
+				filters: e
+			}).then(({ file: e }) => {
+				e && _.importFiles({ files: [e] });
+			}).catch((e) => v.error = e);
+		};
+		return (n, r) => (u(), a("div", {
+			class: l(p(t).local),
+			onDrop: b,
+			onDragover: r[0] ||= m(() => {}, ["prevent"]),
+			onClick: x
+		}, [
+			s(p(e), { name: "cloud-upload" }),
+			o("span", null, f(y.value), 1),
+			c.extensions ? (u(), a("span", {
+				key: 0,
+				class: l(p(t).supported)
+			}, "Supported formats: " + f(c.extensions.join(", ")), 3)) : i("", !0),
+			v.error ? (u(), a("span", g, f(v.error), 1)) : i("", !0)
+		], 34));
+	}
+});
+export { _ as default };
+
+//# sourceMappingURL=Local.vue2.js.map

package/dist/components/PlFileDialog/Local.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Local.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"Local.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n  importFiles: (value: ImportedFiles) => void;\n  multi?: boolean;\n  extensions?: string[];\n}>();\n\nconst data = reactive({\n  error: undefined as unknown,\n});\n\nconst label = computed(() =>\n  props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n  const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n  if (!fileToImportHandle) {\n    return console.error(\n      \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n    );\n  }\n\n  const extensions = normalizeExtensions(props.extensions);\n\n  const files = await Promise.all(\n    [...(ev.dataTransfer?.files ?? [])]\n      .filter((f) => !!f)\n      .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n      .map((file) => {\n        return fileToImportHandle(file);\n      }),\n  );\n\n  if (files.length) {\n    props.importFiles({\n      files,\n    });\n  }\n};\n\nconst openNativeDialog = async () => {\n  const filters: OpenDialogFilter[] = props.extensions\n    ? [\n        {\n          name: \"All Files\",\n          extensions: [...props.extensions],\n        },\n      ]\n    : [];\n\n  if (props.multi) {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenMultipleFilesDialog({\n        title: \"Select files to import\",\n        filters,\n      })\n      .then(({ files }) => {\n        if (files) {\n          props.importFiles({\n            files,\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  } else {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenSingleFileDialog({\n        title: \"Select file to import\",\n        filters,\n      })\n      .then(({ file }) => {\n        if (file) {\n          props.importFiles({\n            files: [file],\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  }\n};\n</script>\n\n<template>\n  <div :class=\"style.local\" @drop=\"onDrop\" @dragover.prevent @click=\"openNativeDialog\">\n    <PlIcon24 name=\"cloud-upload\" />\n    <span>{{ label }}</span>\n    <span v-if=\"extensions\" :class=\"style.supported\"\n      >Supported formats: {{ extensions.join(\", \") }}</span\n    >\n    <span v-if=\"data.error\" class=\"alert-error\">{{ data.error }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAMR,IAAO,EAAS,EACpB,OAAO,KAAA,GACR,CAAC,EAEI,IAAQ,QACZ,EAAM,QAAQ,2CAA2C,wCAC1D,EAEK,IAAS,OAAO,MAAkB;GACtC,IAAM,IAAqB,GAAyB,EAAE,UAAU;AAEhE,OAAI,CAAC,EACH,QAAO,QAAQ,MACb,6EACD;GAGH,IAAM,IAAa,EAAoB,EAAM,WAAW,EAElD,IAAQ,MAAM,QAAQ,IAC1B,CAAC,GAAI,EAAG,cAAc,SAAS,EAAE,CAAC,CAC/B,QAAQ,MAAM,CAAC,CAAC,EAAC,CACjB,QAAQ,MAAO,IAAa,EAAW,MAAM,MAAQ,EAAE,KAAK,SAAS,EAAI,CAAC,GAAG,GAAK,CAClF,KAAK,MACG,EAAmB,EAAK,CAC/B,CACL;AAED,GAAI,EAAM,UACR,EAAM,YAAY,EAChB,UACD,CAAC;KAIA,IAAmB,YAAY;GACnC,IAAM,IAA8B,EAAM,aACtC,CACE;IACE,MAAM;IACN,YAAY,CAAC,GAAG,EAAM,WAAW;IAClC,CACH,GACA,EAAE;AAEN,GAAI,EAAM,QACR,GAAwB,EACpB,SAAS,4BAA4B;IACrC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,eAAY;AACnB,IAAI,KACF,EAAM,YAAY,EAChB,UACD,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK,GAErC,GAAwB,EACpB,SAAS,yBAAyB;IAClC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,cAAW;AAClB,IAAI,KACF,EAAM,YAAY,EAChB,OAAO,CAAC,EAAK,EACd,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK;;yBAMvC,EAOM,OAAA;GAPA,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;GAAS;GAAS,YAAQ,AAAA,EAAA,OAAA,QAAT,IAAiB,CAAA,UAAA,CAAA;GAAE,SAAO;;GACjE,EAAgC,EAAA,EAAA,EAAA,EAAtB,MAAK,gBAAc,CAAA;GAC7B,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;GACF,EAAA,cAAA,GAAA,EAAZ,EAEC,QAAA;;IAFwB,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;MAC5C,wBAAmB,EAAG,EAAA,WAAW,KAAI,KAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAE5B,EAAK,SAAA,GAAA,EAAjB,EAAmE,QAAnE,GAAmE,EAApB,EAAK,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/components/PlFileDialog/PlFileDialog.js

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

package/dist/components/PlFileDialog/PlFileDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlFileDialog.js","names":[],"sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport style from \"./pl-file-dialog.module.scss\";\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { notEmpty } from \"@milaboratories/helpers\";\nimport type { ImportedFiles, SimpleOption } from \"../../types\";\nimport { PlDialogModal } from \"../PlDialogModal\";\nimport { PlBtnPrimary } from \"../PlBtnPrimary\";\nimport { PlBtnGhost } from \"../PlBtnGhost\";\nimport { PlBtnGroup } from \"../PlBtnGroup\";\nimport Remote from \"./Remote.vue\";\nimport Local from \"./Local.vue\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the modal.\n     *\n     * When `true`, the modal is open. When `false`, the modal is closed.\n     */\n    modelValue: boolean;\n    /**\n     * Specifies the file extensions that are allowed for selection.\n     *\n     * Provide an array of strings representing file extensions (leading dot can be omitted)\n     * If not specified, all file types are allowed.\n     */\n    extensions?: string[];\n    /**\n     * Enables the selection of multiple files.\n     *\n     * When `true`, the user can select multiple files.\n     * When `false` or not specified, only a single file can be selected.\n     */\n    multi?: boolean;\n    /**\n     * The custom title of the dialog.\n     */\n    title?: string;\n    /**\n     * Automatically selects the initial storage option.\n     * When `true`, the default storage is pre-selected for the user (default: `true`)\n     */\n    autoSelectStorage?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n    closeOnOutsideClick: true,\n  },\n);\n\nconst mode = ref<\"local\" | \"remote\">(\"local\");\n\nconst defaultTitle = computed(() =>\n  props.multi ? \"Select Files to Import\" : \"Select File to Import\",\n);\n\nconst modeOptions = [\n  {\n    label: \"My Computer\",\n    value: \"local\",\n  },\n  {\n    label: \"Remote\",\n    value: \"remote\",\n  },\n] satisfies SimpleOption[];\n\nconst closeModal = () => emit(\"update:modelValue\", false);\n\nconst remoteRef = useTemplateRef(\"remote\");\n\nconst submit = () => {\n  if (remoteRef.value?.isReady) {\n    emit(\"import:files\", notEmpty(remoteRef.value?.getFilesToImport()));\n    closeModal();\n  }\n};\n\nconst importFiles = (importedFiles: ImportedFiles) => {\n  emit(\"import:files\", importedFiles);\n  closeModal();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    :no-content-gutters=\"true\"\n    :close-on-outside-click=\"closeOnOutsideClick\"\n    class=\"pl-dialog-modal\"\n    :class=\"style.component\"\n    :model-value=\"modelValue\"\n    width=\"688px\"\n    height=\"720px\"\n    @update:model-value=\"closeModal\"\n    @click.stop\n  >\n    <template #title>{{ title ?? defaultTitle }}</template>\n    <div style=\"margin: 0 24px\">\n      <PlBtnGroup v-model=\"mode\" :options=\"modeOptions\" />\n    </div>\n    <Remote v-if=\"mode === 'remote'\" ref=\"remote\" v-bind=\"$props\" :submit=\"submit\" />\n    <Local v-if=\"mode === 'local'\" :import-files=\"importFiles\" v-bind=\"$props\" />\n    <template v-if=\"mode === 'remote'\" #actions>\n      <PlBtnPrimary style=\"min-width: 160px\" :disabled=\"!remoteRef?.isReady\" @click.stop=\"submit\"\n        >Import</PlBtnPrimary\n      >\n      <PlBtnGhost :justify-center=\"false\" @click.stop=\"closeModal\">Cancel</PlBtnGhost>\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":""}

package/dist/components/PlFileDialog/PlFileDialog.vue2.js

@@ -1,5 +1,92 @@
-import f from "./PlFileDialog.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlFileDialog.vue2.js.map
+import e from "../PlBtnGhost/PlBtnGhost.js";
+import t from "../PlBtnGroup/PlBtnGroup.js";
+import n from "../PlBtnPrimary/PlBtnPrimary.js";
+import r from "../PlDialogModal/PlDialogModal.js";
+import i from "./pl-file-dialog.module.js";
+import a from "./Remote.js";
+import o from "./Local.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementVNode as u, createSlots as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, openBlock as _, ref as v, toDisplayString as y, unref as b, useTemplateRef as x, withCtx as S, withModifiers as C } from "vue";
+import { notEmpty as w } from "@milaboratories/helpers";
+var T = { style: { margin: "0 24px" } }, E = /* @__PURE__ */ m({
+	__name: "PlFileDialog",
+	props: {
+		modelValue: { type: Boolean },
+		extensions: { default: void 0 },
+		multi: { type: Boolean },
+		title: { default: void 0 },
+		autoSelectStorage: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnOutsideClick: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:modelValue", "import:files"],
+	setup(m, { emit: E }) {
+		let D = E, O = m, k = v("local"), A = s(() => O.multi ? "Select Files to Import" : "Select File to Import"), j = [{
+			label: "My Computer",
+			value: "local"
+		}, {
+			label: "Remote",
+			value: "remote"
+		}], M = () => D("update:modelValue", !1), N = x("remote"), P = () => {
+			N.value?.isReady && (D("import:files", w(N.value?.getFilesToImport())), M());
+		}, F = (e) => {
+			D("import:files", e), M();
+		};
+		return (s, v) => (_(), c(b(r), {
+			"no-content-gutters": !0,
+			"close-on-outside-click": m.closeOnOutsideClick,
+			class: g(["pl-dialog-modal", b(i).component]),
+			"model-value": m.modelValue,
+			width: "688px",
+			height: "720px",
+			"onUpdate:modelValue": M,
+			onClick: v[1] ||= C(() => {}, ["stop"])
+		}, d({
+			title: S(() => [f(y(m.title ?? A.value), 1)]),
+			default: S(() => [
+				u("div", T, [p(b(t), {
+					modelValue: k.value,
+					"onUpdate:modelValue": v[0] ||= (e) => k.value = e,
+					options: j
+				}, null, 8, ["modelValue"])]),
+				k.value === "remote" ? (_(), c(a, h({
+					key: 0,
+					ref: "remote"
+				}, s.$props, { submit: P }), null, 16)) : l("", !0),
+				k.value === "local" ? (_(), c(o, h({
+					key: 1,
+					"import-files": F
+				}, s.$props), null, 16)) : l("", !0)
+			]),
+			_: 2
+		}, [k.value === "remote" ? {
+			name: "actions",
+			fn: S(() => [p(b(n), {
+				style: { "min-width": "160px" },
+				disabled: !N.value?.isReady,
+				onClick: C(P, ["stop"])
+			}, {
+				default: S(() => [...v[2] ||= [f("Import", -1)]]),
+				_: 1
+			}, 8, ["disabled"]), p(b(e), {
+				"justify-center": !1,
+				onClick: C(M, ["stop"])
+			}, {
+				default: S(() => [...v[3] ||= [f("Cancel", -1)]]),
+				_: 1
+			})]),
+			key: "0"
+		} : void 0]), 1032, [
+			"close-on-outside-click",
+			"class",
+			"model-value"
+		]));
+	}
+});
+export { E as default };
+
+//# sourceMappingURL=PlFileDialog.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlFileDialog.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"PlFileDialog.vue_vue_type_script_setup_true_lang.js","names":["$props"],"sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport style from \"./pl-file-dialog.module.scss\";\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { notEmpty } from \"@milaboratories/helpers\";\nimport type { ImportedFiles, SimpleOption } from \"../../types\";\nimport { PlDialogModal } from \"../PlDialogModal\";\nimport { PlBtnPrimary } from \"../PlBtnPrimary\";\nimport { PlBtnGhost } from \"../PlBtnGhost\";\nimport { PlBtnGroup } from \"../PlBtnGroup\";\nimport Remote from \"./Remote.vue\";\nimport Local from \"./Local.vue\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the modal.\n     *\n     * When `true`, the modal is open. When `false`, the modal is closed.\n     */\n    modelValue: boolean;\n    /**\n     * Specifies the file extensions that are allowed for selection.\n     *\n     * Provide an array of strings representing file extensions (leading dot can be omitted)\n     * If not specified, all file types are allowed.\n     */\n    extensions?: string[];\n    /**\n     * Enables the selection of multiple files.\n     *\n     * When `true`, the user can select multiple files.\n     * When `false` or not specified, only a single file can be selected.\n     */\n    multi?: boolean;\n    /**\n     * The custom title of the dialog.\n     */\n    title?: string;\n    /**\n     * Automatically selects the initial storage option.\n     * When `true`, the default storage is pre-selected for the user (default: `true`)\n     */\n    autoSelectStorage?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n    closeOnOutsideClick: true,\n  },\n);\n\nconst mode = ref<\"local\" | \"remote\">(\"local\");\n\nconst defaultTitle = computed(() =>\n  props.multi ? \"Select Files to Import\" : \"Select File to Import\",\n);\n\nconst modeOptions = [\n  {\n    label: \"My Computer\",\n    value: \"local\",\n  },\n  {\n    label: \"Remote\",\n    value: \"remote\",\n  },\n] satisfies SimpleOption[];\n\nconst closeModal = () => emit(\"update:modelValue\", false);\n\nconst remoteRef = useTemplateRef(\"remote\");\n\nconst submit = () => {\n  if (remoteRef.value?.isReady) {\n    emit(\"import:files\", notEmpty(remoteRef.value?.getFilesToImport()));\n    closeModal();\n  }\n};\n\nconst importFiles = (importedFiles: ImportedFiles) => {\n  emit(\"import:files\", importedFiles);\n  closeModal();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    :no-content-gutters=\"true\"\n    :close-on-outside-click=\"closeOnOutsideClick\"\n    class=\"pl-dialog-modal\"\n    :class=\"style.component\"\n    :model-value=\"modelValue\"\n    width=\"688px\"\n    height=\"720px\"\n    @update:model-value=\"closeModal\"\n    @click.stop\n  >\n    <template #title>{{ title ?? defaultTitle }}</template>\n    <div style=\"margin: 0 24px\">\n      <PlBtnGroup v-model=\"mode\" :options=\"modeOptions\" />\n    </div>\n    <Remote v-if=\"mode === 'remote'\" ref=\"remote\" v-bind=\"$props\" :submit=\"submit\" />\n    <Local v-if=\"mode === 'local'\" :import-files=\"importFiles\" v-bind=\"$props\" />\n    <template v-if=\"mode === 'remote'\" #actions>\n      <PlBtnPrimary style=\"min-width: 160px\" :disabled=\"!remoteRef?.isReady\" @click.stop=\"submit\"\n        >Import</PlBtnPrimary\n      >\n      <PlBtnGhost :justify-center=\"false\" @click.stop=\"closeModal\">Cancel</PlBtnGhost>\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,IAAM,IAAO,GAKP,IAAQ,GA4CR,IAAO,EAAwB,QAAQ,EAEvC,IAAe,QACnB,EAAM,QAAQ,2BAA2B,wBAC1C,EAEK,IAAc,CAClB;GACE,OAAO;GACP,OAAO;GACR,EACD;GACE,OAAO;GACP,OAAO;GACR,CACF,EAEK,UAAmB,EAAK,qBAAqB,GAAM,EAEnD,IAAY,EAAe,SAAS,EAEpC,UAAe;AACnB,GAAI,EAAU,OAAO,YACnB,EAAK,gBAAgB,EAAS,EAAU,OAAO,kBAAkB,CAAC,CAAC,EACnE,GAAY;KAIV,KAAe,MAAiC;AAEpD,GADA,EAAK,gBAAgB,EAAc,EACnC,GAAY;;yBAKZ,EAuBgB,EAAA,EAAA,EAAA;GAtBb,sBAAoB;GACpB,0BAAwB,EAAA;GACzB,OAAK,EAAA,CAAC,mBACE,EAAA,EAAK,CAAC,UAAS,CAAA;GACtB,eAAa,EAAA;GACd,OAAM;GACN,QAAO;GACN,uBAAoB;GACpB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;;GAEA,OAAK,QAA4B,CAAA,EAAA,EAAxB,EAAA,SAAS,EAAA,MAAY,EAAA,EAAA,CAAA,CAAA;oBAGnC;IAFN,EAEM,OAFN,GAEM,CADJ,EAAoD,EAAA,EAAA,EAAA;iBAA/B,EAAA;8CAAI,QAAA;KAAG,SAAS;;IAEzB,EAAA,UAAI,YAAA,GAAA,EAAlB,EAAiF,GAAjF,EAAiF;;KAAhD,KAAI;OAAiBA,EAAAA,QAAM,EAAW,WAAM,CAAA,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;IAChE,EAAA,UAAI,WAAA,GAAA,EAAjB,EAA6E,GAA7E,EAA6E;;KAA7C,gBAAc;OAAqBA,EAAAA,OAAM,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;;;MACzD,EAAA,UAAI,WAAA;SAAgB;eAGjC,CAFD,EAEC,EAAA,EAAA,EAAA;IAFa,OAAA,EAAA,aAAA,SAAwB;IAAE,UAAQ,CAAG,EAAA,OAAW;IAAU,SAAK,EAAO,GAAM,CAAA,OAAA,CAAA;;qBACjF,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA;;wBAET,EAAgF,EAAA,EAAA,EAAA;IAAnE,kBAAgB;IAAQ,SAAK,EAAO,GAAU,CAAA,OAAA,CAAA;;qBAAQ,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/PlFileDialog/Remote.js

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

package/dist/components/PlFileDialog/Remote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Remote.js","names":[],"sources":["../../../src/components/PlFileDialog/Remote.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useEventListener } from \"../../composition/useEventListener\";\nimport type { ImportedFiles } from \"../../types\";\nimport { between, notEmpty, tapIf } from \"@milaboratories/helpers\";\nimport { getRawPlatformaInstance, type StorageHandle } from \"@platforma-sdk/model\";\nimport { computed, onMounted, reactive, ref, toRef, watch } from \"vue\";\nimport { PlDropdown } from \"../PlDropdown\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport Shortcuts from \"./Shortcuts.vue\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSearchField } from \"../PlSearchField\";\nimport style from \"./pl-file-dialog.module.scss\";\nimport { defaultData, useVisibleItems, vTextOverflown } from \"./remote-helpers\";\nimport { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from \"./utils\";\n\n// note that on a Mac, a click combined with the control key is intercepted by the operating system and used to open a context menu, so ctrlKey is not detectable on click events.\nconst isCtrlOrMeta = (ev: KeyboardEvent | MouseEvent) => ev.ctrlKey || ev.metaKey;\n\ndefineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean;\n    extensions?: string[]; // with dot, like ['.fastq.gz', '.fastq']\n    multi?: boolean;\n    title?: string;\n    autoSelectStorage?: boolean;\n    submit: () => void;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n  },\n);\n\nconst data = reactive(defaultData());\n\nconst resetData = () => {\n  data.search = \"\";\n  data.error = \"\";\n  data.lastSelected = undefined;\n};\n\nconst extensions = computed(() => normalizeExtensions(props.extensions));\n\nconst visibleItems = useVisibleItems(data);\n\nconst lookup = computed(() => {\n  return {\n    modelValue: props.modelValue,\n    dirPath: data.dirPath,\n    storageHandle: data.storageEntry?.handle,\n  };\n});\n\nconst query = (storageHandle: StorageHandle, dirPath: string) => {\n  if (!getRawPlatformaInstance()) {\n    return;\n  }\n\n  if (data.currentLoadingPath === dirPath) {\n    return;\n  }\n\n  data.currentLoadingPath = dirPath;\n\n  getRawPlatformaInstance()\n    .lsDriver.listFiles(storageHandle, dirPath)\n    .then((res) => {\n      if (dirPath !== data.dirPath) {\n        return;\n      }\n\n      data.items = notEmpty(res)\n        .entries.map((item) => ({\n          path: item.fullPath,\n          name: item.name,\n          isDir: item.type === \"dir\",\n          canBeSelected:\n            item.type === \"file\" &&\n            (!extensions.value || extensions.value.some((ext) => item.fullPath.endsWith(ext))),\n          handle: item.type === \"file\" ? item.handle : undefined,\n          selected: false,\n        }))\n        .sort((a, b) => {\n          if (a.isDir && !b.isDir) return -1;\n          if (!a.isDir && b.isDir) return 1;\n          // localeCompare for unicode alphabets\n          return a.name.localeCompare(b.name);\n        })\n        .map((it, id) => ({ id, ...it }));\n\n      data.lastSelected = undefined;\n    })\n    .catch((err) => (data.error = String(err)))\n    .finally(() => {\n      data.currentLoadingPath = undefined;\n    });\n};\n\nconst load = () => {\n  resetData();\n  const { storageHandle, dirPath, modelValue } = lookup.value;\n  if (storageHandle && modelValue) {\n    query(storageHandle, dirPath);\n  }\n};\n\nconst breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));\n\nconst selectedFiles = computed(() =>\n  data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir),\n);\n\nconst isReady = computed(() => selectedFiles.value.length > 0 && data.storageEntry?.handle);\n\nconst getFilesToImport = () => ({\n  storageHandle: notEmpty(data.storageEntry?.handle),\n  files: selectedFiles.value.map((f) => f.handle!),\n});\n\nconst setDirPath = (dirPath: string) => {\n  data.dirPath = dirPath;\n};\n\nconst selectFile = (ev: MouseEvent, file: FileDialogItem) => {\n  const { shiftKey } = ev;\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  const { lastSelected } = data;\n\n  ev.preventDefault();\n\n  const items = visibleItems.value;\n\n  if (file.canBeSelected) {\n    if (!props.multi) {\n      items.forEach((f) => (f.selected = false));\n    }\n\n    file.selected = !file.selected;\n\n    if (!props.multi) {\n      return;\n    }\n\n    if (!ctrlOrMetaKey && !shiftKey) {\n      items.forEach((f) => {\n        if (f.id !== file.id) {\n          f.selected = false;\n        }\n      });\n    }\n\n    if (shiftKey && lastSelected !== undefined) {\n      items.forEach((f) => {\n        if (between(f.id, lastSelected, file.id)) {\n          f.selected = true;\n        }\n      });\n    }\n\n    if (file.selected) {\n      data.lastSelected = file.id;\n    }\n  }\n};\n\nconst changeAll = (selected: boolean) => {\n  if (selected && !props.multi) {\n    return;\n  }\n\n  visibleItems.value\n    .filter((f) => f.canBeSelected)\n    .forEach((file) => {\n      file.selected = selected;\n    });\n};\n\nconst selectAll = () => changeAll(true);\n\nconst deselectAll = () => changeAll(false);\n\nconst loadAvailableStorages = () => {\n  resetData();\n  deselectAll();\n  if (!getRawPlatformaInstance()) {\n    console.warn(\"platforma API is not found\");\n    return;\n  }\n  getRawPlatformaInstance()\n    .lsDriver.getStorageList()\n    .then((storageEntries) => {\n      // local storage is always returned by the ML, so we need to remove it from remote dialog manually\n      storageEntries = storageEntries.filter(\n        (it) => it.name !== \"local\" && !it.name.startsWith(\"local_disk_\"),\n      );\n\n      data.storageOptions = storageEntries.map((it) => ({\n        text: it.name,\n        value: it,\n      }));\n\n      if (props.autoSelectStorage) {\n        tapIf(storageEntries[0], (entry) => {\n          data.storageEntry = entry;\n        });\n      }\n    })\n    .catch((err) => (data.error = String(err)));\n};\n\nwatch(\n  toRef(data, \"storageEntry\"),\n  (entry) => {\n    resetData();\n    data.dirPath = entry?.initialFullPath ?? \"\";\n  },\n  { immediate: true },\n);\n\nwatch([() => data.dirPath, () => data.storageEntry], () => {\n  load();\n});\n\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (isOpen) {\n      loadAvailableStorages();\n    } else {\n      Object.assign(data, defaultData());\n    }\n  },\n  { immediate: true },\n);\n\nuseEventListener(document, \"keydown\", (ev: KeyboardEvent) => {\n  if (!props.modelValue) {\n    return;\n  }\n\n  if (ev.target !== document.body) {\n    return;\n  }\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  if (ctrlOrMetaKey && ev.code === \"KeyA\") {\n    ev.preventDefault();\n    selectAll();\n  }\n\n  if (ctrlOrMetaKey && ev.shiftKey && ev.code === \"Period\") {\n    ev.preventDefault();\n    data.showHiddenItems = !data.showHiddenItems;\n  }\n\n  if (ev.code === \"Enter\") {\n    props.submit();\n  }\n});\n\ndefineExpose({\n  isReady,\n  getFilesToImport,\n});\n\nonMounted(loadAvailableStorages);\n\nconst lsContainerRef = ref<HTMLElement | undefined>();\n</script>\n\n<template>\n  <div :class=\"style.remote\" @click.stop=\"deselectAll\">\n    <div :class=\"style.search\">\n      <div>\n        <PlDropdown\n          v-model=\"data.storageEntry\"\n          label=\"Select storage\"\n          :options=\"data.storageOptions\"\n        />\n      </div>\n      <div>\n        <PlSearchField v-model=\"data.search\" label=\"Search in folder\" clearable />\n      </div>\n    </div>\n    <div :class=\"style['ls-container']\" ref=\"lsContainerRef\">\n      <div :class=\"style['ls-head']\">\n        <div :class=\"style['breadcrumbs']\">\n          <template v-for=\"(s, i) in breadcrumbs\" :key=\"i\">\n            <div :title=\"s.path\" @click=\"setDirPath(s.path)\">{{ s.name }}</div>\n            <PlIcon16 v-if=\"s.index !== breadcrumbs.length - 1\" name=\"chevron-right\" />\n          </template>\n        </div>\n        <div :class=\"style.selected\">\n          <span>Selected: {{ selectedFiles.length }}</span>\n          <Shortcuts :container=\"lsContainerRef\" />\n        </div>\n      </div>\n      <div v-if=\"data.currentLoadingPath !== undefined\" class=\"ls-loader\">\n        <i class=\"mask-24 mask-loading loader-icon\" />\n      </div>\n      <div v-else-if=\"!data.storageEntry\" :class=\"style['ls-empty']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">Select storage to preview</div>\n      </div>\n      <div v-else-if=\"data.error\" :class=\"style['ls-error']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">{{ data.error }}</div>\n      </div>\n      <div v-else :class=\"style['ls-body']\">\n        <template v-for=\"file in visibleItems\" :key=\"file.id\">\n          <div v-if=\"file.isDir\" :class=\"style.isDir\" @click=\"setDirPath(file.path)\">\n            <PlIcon16 name=\"chevron-right\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n          <div\n            v-else\n            :class=\"{ [style.canBeSelected]: file.canBeSelected, [style.selected]: file.selected }\"\n            @click.stop=\"(ev) => selectFile(ev, file)\"\n          >\n            <PlMaskIcon16 name=\"box\" :class=\"style.isFile\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}