@milaboratories/uikit 2.6.0 → 2.6.2

package/dist/components/PlElementList/PlElementListItem.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent as c, useSlots as E, computed as C, createElementBlock as o, openBlock as n, normalizeClass as l, createElementVNode as p, createCommentVNode as t, createBlock as P, createVNode as r, unref as a, renderSlot as v, withModifiers as m } from "vue";
-import g from "../PlIcon16/PlIcon16.vue.js";
-import b from "../PlIcon24/PlIcon24.vue.js";
-const f = ["data-draggable"], h = /* @__PURE__ */ c({
+import { defineComponent as E, useSlots as P, computed as $, createElementBlock as n, openBlock as i, createCommentVNode as o, createElementVNode as r, normalizeClass as l, renderSlot as y, createBlock as w, createVNode as m, unref as a, withModifiers as g } from "vue";
+import b from "../PlIcon16/PlIcon16.vue.js";
+import k from "../PlIcon24/PlIcon24.vue.js";
+const h = ["data-draggable"], A = /* @__PURE__ */ E({
+  inheritAttrs: !1,
   __name: "PlElementListItem",
   props: {
     item: {},
@@ -15,93 +16,117 @@ const f = ["data-draggable"], h = /* @__PURE__ */ c({
     isToggable: { type: Boolean },
     isToggled: { type: Boolean },
     isPinnable: { type: Boolean },
-    isPinned: { type: Boolean }
+    isPinned: { type: Boolean },
+    titleClass: {},
+    contentClass: {},
+    afterClass: {},
+    beforeClass: {}
   },
   emits: ["expand", "toggle", "pin", "remove"],
-  setup(k, { emit: u }) {
-    const s = k, B = E(), $ = C(() => B.content !== void 0), d = u;
-    return (e, i) => (n(), o("div", {
-      class: l([e.$style.root, {
-        [e.$style.active]: s.isActive,
-        [e.$style.pinned]: s.isPinned,
-        [e.$style.opened]: s.isExpanded,
-        [e.$style.disabled]: s.isToggled
-      }])
-    }, [
-      p("div", {
-        class: l([e.$style.head, {
-          [e.$style.clickable]: $.value
-        }]),
-        onClick: i[3] || (i[3] = (y) => e.isExpandable && d("expand", s.item, s.index))
+  setup(f, { emit: C }) {
+    const s = f, p = P(), u = $(() => p.content !== void 0), B = $(() => p.after !== void 0), c = $(() => p.before !== void 0), d = C;
+    return (e, t) => (i(), n("div", null, [
+      c.value ? (i(), n("div", {
+        key: 0,
+        class: l(e.beforeClass)
       }, [
-        s.showDragHandle ? (n(), o("div", {
-          key: 0,
-          class: l([e.$style.action, e.$style.draggable, { [e.$style.disable]: !s.isDraggable }]),
-          "data-draggable": s.isDraggable
-        }, [
-          r(a(g), { name: "drag-dots" })
-        ], 10, f)) : t("", !0),
-        e.isExpandable ? (n(), P(a(g), {
-          key: 1,
-          class: l([e.$style.contentChevron, { [e.$style.opened]: s.isExpanded }]),
-          name: "chevron-down"
-        }, null, 8, ["class"])) : t("", !0),
-        p("div", {
-          class: l(e.$style.title)
-        }, [
-          v(e.$slots, "title", {
-            item: s.item,
-            index: s.index
-          })
-        ], 2),
-        p("div", {
-          class: l([e.$style.actions, e.$style.showOnHover])
+        y(e.$slots, "before", {
+          item: s.item,
+          index: s.index
+        })
+      ], 2)) : o("", !0),
+      r("div", {
+        class: l([e.$style.root, e.$attrs.class, {
+          [e.$style.active]: s.isActive,
+          [e.$style.pinned]: s.isPinned,
+          [e.$style.opened]: s.isExpanded,
+          [e.$style.disabled]: s.isToggled
+        }])
+      }, [
+        r("div", {
+          class: l([e.$style.head, e.titleClass, {
+            [e.$style.clickable]: u.value
+          }]),
+          onClick: t[3] || (t[3] = (v) => e.isExpandable && d("expand", s.item, s.index))
         }, [
-          s.isToggable ? (n(), o("div", {
+          s.showDragHandle ? (i(), n("div", {
             key: 0,
-            class: l([e.$style.action, e.$style.clickable, { [e.$style.disable]: !s.isToggable }]),
-            onClick: i[0] || (i[0] = m((y) => d("toggle", s.item, s.index), ["stop"]))
+            class: l([e.$style.action, e.$style.draggable, { [e.$style.disable]: !s.isDraggable }]),
+            "data-draggable": s.isDraggable
           }, [
-            r(a(b), {
-              name: s.isToggled === !0 ? "view-hide" : "view-show",
-              size: "16"
-            }, null, 8, ["name"])
-          ], 2)) : t("", !0),
-          s.isPinnable ? (n(), o("div", {
+            m(a(b), { name: "drag-dots" })
+          ], 10, h)) : o("", !0),
+          e.isExpandable ? (i(), w(a(b), {
             key: 1,
-            class: l([e.$style.action, e.$style.clickable, {
-              [e.$style.disable]: !s.isPinnable,
-              [e.$style.activated]: s.isPinned
-            }]),
-            onClick: i[1] || (i[1] = m((y) => d("pin", s.item, s.index), ["stop"]))
+            class: l([e.$style.contentChevron, { [e.$style.opened]: s.isExpanded }]),
+            name: "chevron-down"
+          }, null, 8, ["class"])) : o("", !0),
+          r("div", {
+            class: l(e.$style.title)
           }, [
-            r(a(b), {
-              name: "pin",
-              size: "16"
+            y(e.$slots, "title", {
+              item: s.item,
+              index: s.index
             })
-          ], 2)) : t("", !0),
-          s.isRemovable ? (n(), o("div", {
-            key: 2,
-            class: l([e.$style.action, e.$style.clickable]),
-            onClick: i[2] || (i[2] = m((y) => d("remove", s.item, s.index), ["stop"]))
+          ], 2),
+          r("div", {
+            class: l([e.$style.actions, e.$style.showOnHover])
           }, [
-            r(a(g), { name: "close" })
-          ], 2)) : t("", !0)
-        ], 2)
+            s.isToggable ? (i(), n("div", {
+              key: 0,
+              class: l([e.$style.action, e.$style.clickable, { [e.$style.disable]: !s.isToggable }]),
+              onClick: t[0] || (t[0] = g((v) => d("toggle", s.item, s.index), ["stop"]))
+            }, [
+              m(a(k), {
+                name: s.isToggled === !0 ? "view-hide" : "view-show",
+                size: "16"
+              }, null, 8, ["name"])
+            ], 2)) : o("", !0),
+            s.isPinnable ? (i(), n("div", {
+              key: 1,
+              class: l([e.$style.action, e.$style.clickable, {
+                [e.$style.disable]: !s.isPinnable,
+                [e.$style.activated]: s.isPinned
+              }]),
+              onClick: t[1] || (t[1] = g((v) => d("pin", s.item, s.index), ["stop"]))
+            }, [
+              m(a(k), {
+                name: "pin",
+                size: "16"
+              })
+            ], 2)) : o("", !0),
+            s.isRemovable ? (i(), n("div", {
+              key: 2,
+              class: l([e.$style.action, e.$style.clickable]),
+              onClick: t[2] || (t[2] = g((v) => d("remove", s.item, s.index), ["stop"]))
+            }, [
+              m(a(b), { name: "close" })
+            ], 2)) : o("", !0)
+          ], 2)
+        ], 2),
+        u.value && s.isExpanded ? (i(), n("div", {
+          key: 0,
+          class: l([e.$style.body, e.contentClass, { [e.$style.disabled]: s.isToggled }])
+        }, [
+          y(e.$slots, "content", {
+            item: s.item,
+            index: s.index
+          })
+        ], 2)) : o("", !0)
       ], 2),
-      $.value && s.isExpanded ? (n(), o("div", {
-        key: 0,
-        class: l([e.$style.body, { [e.$style.disabled]: s.isToggled }])
+      B.value ? (i(), n("div", {
+        key: 1,
+        class: l(e.afterClass)
       }, [
-        v(e.$slots, "content", {
+        y(e.$slots, "after", {
           item: s.item,
           index: s.index
         })
-      ], 2)) : t("", !0)
-    ], 2));
+      ], 2)) : o("", !0)
+    ]));
   }
 });
 export {
-  h as default
+  A as default
 };
 //# sourceMappingURL=PlElementListItem.vue2.js.map

package/dist/components/PlElementList/PlElementListItem.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n}>();\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\n\nconst emit = defineEmits<{\n  (e: 'expand', item: T, index: number): void;\n  (e: 'toggle', item: T, index: number): void;\n  (e: 'pin', item: T, index: number): void;\n  (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div\n    :class=\"[$style.root, {\n      [$style.active]: props.isActive,\n      [$style.pinned]: props.isPinned,\n      [$style.opened]: props.isExpanded,\n      [$style.disabled]: props.isToggled,\n    }]\"\n  >\n    <div\n      :class=\"[$style.head, {\n        [$style.clickable]: hasContentSlot,\n      }]\"\n      @click=\"isExpandable && emit('expand', props.item, props.index)\"\n    >\n      <div\n        v-if=\"props.showDragHandle\"\n        :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n        :data-draggable=\"props.isDraggable\"\n      >\n        <PlIcon16 name=\"drag-dots\" />\n      </div>\n      <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n      <div :class=\"$style.title\">\n        <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n\n      <div :class=\"[$style.actions, $style.showOnHover]\">\n        <div\n          v-if=\"props.isToggable\"\n          :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n          @click.stop=\"emit('toggle', props.item, props.index)\"\n        >\n          <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n        </div>\n        <div\n          v-if=\"props.isPinnable\"\n          :class=\"[$style.action, $style.clickable, {\n            [$style.disable]: !props.isPinnable,\n            [$style.activated]: props.isPinned,\n          }]\"\n          @click.stop=\"emit('pin', props.item, props.index)\"\n        >\n          <PlIcon24 name=\"pin\" size=\"16\" />\n        </div>\n        <div\n          v-if=\"props.isRemovable\"\n          :class=\"[$style.action, $style.clickable]\"\n          @click.stop=\"emit('remove', props.item, props.index)\"\n        >\n          <PlIcon16 name=\"close\" />\n        </div>\n      </div>\n    </div>\n    <div\n      v-if=\"hasContentSlot && props.isExpanded\"\n      :class=\"[$style.body, { [$style.disabled]: props.isToggled }]\"\n    >\n      <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active)\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);;\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  text-overflow: ellipsis;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","emit","__emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAeRC,IAAQC,EAAA,GAIRC,IAAiBC,EAAS,MAAMH,EAAM,YAAe,MAAS,GAE9DI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\nconst hasAfterSlot = computed(() => slots['after'] !== undefined);\nconst hasBeforeSlot = computed(() => slots['before'] !== undefined);\n\nconst emit = defineEmits<{\n  (e: 'expand', item: T, index: number): void;\n  (e: 'toggle', item: T, index: number): void;\n  (e: 'pin', item: T, index: number): void;\n  (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div>\n    <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      :class=\"[$style.root, $attrs.class, {\n        [$style.active]: props.isActive,\n        [$style.pinned]: props.isPinned,\n        [$style.opened]: props.isExpanded,\n        [$style.disabled]: props.isToggled,\n      }]\"\n    >\n      <div\n        :class=\"[$style.head, titleClass, {\n          [$style.clickable]: hasContentSlot,\n        }]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div\n          v-if=\"props.showDragHandle\"\n          :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n          :data-draggable=\"props.isDraggable\"\n        >\n          <PlIcon16 name=\"drag-dots\" />\n        </div>\n        <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n        <div :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div :class=\"[$style.actions, $style.showOnHover]\">\n          <div\n            v-if=\"props.isToggable\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            :class=\"[$style.action, $style.clickable, {\n              [$style.disable]: !props.isPinnable,\n              [$style.activated]: props.isPinned,\n            }]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active)\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);;\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  text-overflow: ellipsis;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","hasAfterSlot","hasBeforeSlot","emit","__emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAoBRC,IAAQC,EAAA,GAMRC,IAAiBC,EAAS,MAAMH,EAAM,YAAe,MAAS,GAC9DI,IAAeD,EAAS,MAAMH,EAAM,UAAa,MAAS,GAC1DK,IAAgBF,EAAS,MAAMH,EAAM,WAAc,MAAS,GAE5DM,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlFileInput/PlFileInput.vue.js

@@ -1,10 +1,12 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".pl-file-input{--contour-color: var(--txt-01);--label-color: var(--txt-01);--text-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);--contour-offset: 2px;--icon-color: #000;position:relative;z-index:0;width:100%;height:var(--control-height, 40px);border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none;padding:0 8px;gap:8px;cursor:pointer}.pl-file-input__envelope{font-family:var(--font-family-base);display:flex;flex-direction:column;min-width:160px}.pl-file-input .mask-24{display:block;min-width:24px}.pl-file-input .mask-close{cursor:pointer}.pl-file-input__progress{position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fff,#d8fac8);pointer-events:none;width:0}.pl-file-input__clear{--icon-color: var(--ic-02)}.pl-file-input__filename{width:100%;border:none;font-size:inherit;background-color:transparent;color:var(--text-color);caret-color:var(--border-color-focus);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}.pl-file-input__filename:empty:before{color:var(--color-placeholder);content:attr(data-placeholder);color:var(--txt-03);font-size:14px;font-weight:500;line-height:20px}.pl-file-input__stats{white-space:nowrap;z-index:1;font-size:11px;font-weight:600;letter-spacing:.44px;text-transform:uppercase;color:var(--txt-03)}.pl-file-input label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);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-file-input label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-file-input__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-file-input__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-file-input__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-file-input__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-file-input:hover{--contour-color: var(--control-hover-color)}.pl-file-input: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-file-input:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-file-input.dashed .pl-file-input__contour{border-style:dashed}.pl-file-input.nonEmpty{--prefix-color: var(--txt-01)}.pl-file-input.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--text-color: var(--txt-error);--icon-color: var(--txt-error)}.pl-file-input.error .pl-file-input__progress{display:none}.pl-file-input.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed}.pl-file-input__cell-style{--border-radius-control: 0px;--input-active-color: var(--bg-base-light);--border-color: var(--border-color-div-grey);background-color:var(--input-active-color);padding:4px;height:100%;position:relative}.pl-file-input__cell-style .mask-paper-clip{display:none}.pl-file-input__cell-style .pl-file-input{height:100%!important;position:unset}.pl-file-input__cell-style .pl-file-input .double-contour{top:2px;right:2px;bottom:2px;left:2px}.pl-file-input__cell-style .pl-file-input__contour{border-width:1px;box-shadow:unset!important;border-color:var(--border-color);border-style:dashed}.pl-file-input__cell-style .pl-file-input__filename{text-align:center!important}.pl-file-input__cell-style .pl-file-input__error{margin-top:0;margin-right:8px}.pl-file-input__cell-style:hover{--border-color: var(--border-color-focus);background-color:#d9f8ca}.pl-file-input__cell-style:hover .pl-file-input__filename:before{color:#110529!important}.pl-file-input__cell-style.has-file:hover{background-color:var(--input-active-color)}.pl-file-input__cell-style.has-file{padding-left:0;padding-right:0}.pl-file-input__cell-style.has-file .pl-file-input__contour{border:unset}.pl-file-input__cell-style.has-file .pl-file-input__filename{text-align:left!important}.pl-file-input__cell-style.has-file .mask-paper-clip{display:block}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { defineComponent as q, reactive as R, useSlots as U, computed as s, watch as $, ref as z, createElementBlock as n, openBlock as l, Fragment as D, createElementVNode as c, createVNode as B, normalizeClass as O, createCommentVNode as u, withModifiers as F, withKeys as H, createBlock as i, normalizeStyle as K, unref as t, toDisplayString as p, withCtx as L, renderSlot as j, createTextVNode as A } from "vue";
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-file-input{--contour-color: var(--txt-01);--label-color: var(--txt-01);--text-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);--contour-offset: 2px;--icon-color: #000;position:relative;z-index:0;width:100%;height:var(--control-height, 40px);border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none;padding:0 8px;gap:8px;cursor:pointer}.pl-file-input__envelope{font-family:var(--font-family-base);display:flex;flex-direction:column;min-width:160px}.pl-file-input .mask-24{display:block;min-width:24px}.pl-file-input .mask-close{cursor:pointer}.pl-file-input__progress{position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fff,#d8fac8);pointer-events:none;width:0}.pl-file-input__clear{--icon-color: var(--ic-02)}.pl-file-input__filename{width:100%;border:none;font-size:inherit;background-color:transparent;color:var(--text-color);caret-color:var(--border-color-focus);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}.pl-file-input__filename:empty:before{color:var(--color-placeholder);content:attr(data-placeholder);color:var(--txt-03);font-size:14px;font-weight:500;line-height:20px}.pl-file-input__stats{white-space:nowrap;z-index:1;font-size:11px;font-weight:600;letter-spacing:.44px;text-transform:uppercase;color:var(--txt-03)}.pl-file-input label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);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-file-input label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-file-input__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-file-input__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-file-input__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-file-input__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-file-input:hover{--contour-color: var(--control-hover-color)}.pl-file-input: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-file-input:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-file-input.dashed .pl-file-input__contour{border-style:dashed}.pl-file-input.nonEmpty{--prefix-color: var(--txt-01)}.pl-file-input.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--text-color: var(--txt-error);--icon-color: var(--txt-error)}.pl-file-input.error .pl-file-input__progress{display:none}.pl-file-input.disabled{--contour-color: var(--color-dis-01);cursor:not-allowed}.pl-file-input__cell-style{--border-radius-control: 0px;--input-active-color: var(--bg-base-light);--border-color: var(--border-color-div-grey);background-color:var(--input-active-color);padding:4px;height:100%;position:relative}.pl-file-input__cell-style .mask-paper-clip{display:none}.pl-file-input__cell-style .pl-file-input{height:100%!important;position:unset}.pl-file-input__cell-style .pl-file-input .double-contour{top:2px;right:2px;bottom:2px;left:2px}.pl-file-input__cell-style .pl-file-input__contour{border-width:1px;box-shadow:unset!important;border-color:var(--border-color);border-style:dashed}.pl-file-input__cell-style .pl-file-input__filename{text-align:center!important}.pl-file-input__cell-style .pl-file-input__error{margin-top:0;margin-right:8px}.pl-file-input__cell-style:hover{--border-color: var(--border-color-focus);background-color:#d9f8ca}.pl-file-input__cell-style:hover .pl-file-input__filename:before{color:#110529!important}.pl-file-input__cell-style.has-file:hover{background-color:var(--input-active-color)}.pl-file-input__cell-style.has-file{padding-left:0;padding-right:0}.pl-file-input__cell-style.has-file .pl-file-input__contour{border:unset}.pl-file-input__cell-style.has-file .pl-file-input__filename{text-align:left!important}.pl-file-input__cell-style.has-file .mask-paper-clip{display:block}
+.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { defineComponent as $, reactive as q, useSlots as R, computed as s, watch as U, ref as z, createElementBlock as n, openBlock as l, Fragment as D, createElementVNode as c, createVNode as B, normalizeClass as O, createCommentVNode as p, withModifiers as F, withKeys as H, createBlock as i, normalizeStyle as K, unref as t, toDisplayString as u, withCtx as L, renderSlot as j, createTextVNode as A } from "vue";
 
 import { prettyBytes as y } from "@milaboratories/helpers";
 import { getFileNameFromHandle as G, getFilePathFromHandle as J } from "@platforma-sdk/model";
 import { getErrorMessage as Q } from "../../helpers/error.js";
 import W from "../../utils/DoubleContour.vue.js";
+
 import { useLabelNotch as X } from "../../utils/useLabelNotch.js";
 import Y from "../PlFileDialog/PlFileDialog.vue.js";
 import f from "../PlIcon24/PlIcon24.vue.js";
@@ -23,7 +25,7 @@ const le = {
 }, se = {
   key: 1,
   class: "pl-file-input__helper"
-}, he = /* @__PURE__ */ q({
+}, _e = /* @__PURE__ */ $({
   __name: "PlFileInput",
   props: {
     modelValue: {},
@@ -41,17 +43,17 @@ const le = {
   },
   emits: ["update:modelValue"],
   setup(N, { emit: P }) {
-    const a = R({
+    const a = q({
       fileDialogOpen: !1,
       error: void 0
-    }), g = U(), v = P, o = N, h = (e, r) => {
+    }), g = R(), v = P, o = N, h = (e, r) => {
       if (e)
         try {
           return r(e);
         } catch (d) {
           return a.error = d instanceof Error ? d.message : String(d), e;
         }
-    }, k = s(() => h(o.modelValue, G)), _ = s(() => h(o.modelValue, J)), E = s(() => o.progress && !o.progress.done), T = s(() => o.progress && o.progress.done), V = s(() => Q(a.error, o.error)), m = s(() => typeof V.value == "string"), b = s(() => {
+    }, _ = s(() => h(o.modelValue, G)), k = s(() => h(o.modelValue, J)), E = s(() => o.progress && !o.progress.done), T = s(() => o.progress && o.progress.done), V = s(() => Q(a.error, o.error)), m = s(() => typeof V.value == "string"), S = s(() => {
       const { status: e, done: r } = o.progress ?? {};
       return !e || !e.bytesTotal ? "" : e.bytesProcessed && !r ? y(e.bytesProcessed, {}) + " / " + y(e.bytesTotal, {}) : y(e.bytesTotal, {});
     }), w = s(() => {
@@ -60,12 +62,12 @@ const le = {
       return e ? {
         width: e.done ? "100%" : Math.round((((r = e.status) == null ? void 0 : r.progress) ?? 0) * 100) + "%"
       } : {};
-    }), S = () => {
+    }), b = () => {
       a.fileDialogOpen = !0;
     }, M = (e) => {
       e.files.length && v("update:modelValue", e.files[0]);
     }, I = () => v("update:modelValue", void 0);
-    $(
+    U(
       () => o.modelValue,
       () => a.error = void 0,
       { immediate: !0 }
@@ -73,15 +75,15 @@ const le = {
     const C = z();
     return o.cellStyle || X(C), (e, r) => (l(), n(D, null, [
       c("div", {
-        class: O([{ "pl-file-input__cell-style": !!e.cellStyle, "has-file": !!k.value }, "pl-file-input__envelope"])
+        class: O([{ "pl-file-input__cell-style": !!e.cellStyle, "has-file": !!_.value }, "pl-file-input__envelope"])
       }, [
         c("div", {
           ref_key: "rootRef",
           ref: C,
           class: O([{ dashed: e.dashed, error: m.value }, "pl-file-input"]),
           tabindex: "0",
-          onKeyup: H(S, ["enter"]),
-          onClick: F(S, ["stop"])
+          onKeyup: H(b, ["enter"]),
+          onClick: F(b, ["stop"])
         }, [
           c("div", {
             style: K(w.value),
@@ -91,21 +93,21 @@ const le = {
             e.required ? (l(), i(t(ee), {
               key: 0,
               uri: t(x)
-            }, null, 8, ["uri"])) : u("", !0),
-            c("span", null, p(e.label), 1),
-            t(g).tooltip || _.value ? (l(), i(t(Z), {
+            }, null, 8, ["uri"])) : p("", !0),
+            c("span", null, u(e.label), 1),
+            t(g).tooltip || k.value ? (l(), i(t(Z), {
               key: 1,
               class: "info",
               position: "top"
             }, {
               tooltip: L(() => [
                 t(g).tooltip ? j(e.$slots, "tooltip", { key: 0 }) : (l(), n(D, { key: 1 }, [
-                  A(p(_.value), 1)
+                  A(u(k.value), 1)
                 ], 64))
               ]),
               _: 3
-            })) : u("", !0)
-          ], 512)) : u("", !0),
+            })) : p("", !0)
+          ], 512)) : p("", !0),
           m.value ? (l(), i(t(f), {
             key: 1,
             name: "restart"
@@ -122,17 +124,17 @@ const le = {
           c("div", {
             "data-placeholder": e.placeholder ?? "Choose file",
             class: "pl-file-input__filename"
-          }, p(k.value), 9, oe),
-          b.value ? (l(), n("div", te, p(b.value), 1)) : u("", !0),
+          }, u(_.value), 9, oe),
+          S.value ? (l(), n("div", te, u(S.value), 1)) : p("", !0),
           e.modelValue ? (l(), i(t(f), {
             key: 6,
             class: "pl-file-input__clear",
             name: "close",
             onClick: F(I, ["stop"])
-          })) : u("", !0),
+          })) : p("", !0),
           B(W, { class: "pl-file-input__contour" })
         ], 34),
-        m.value ? (l(), n("div", re, p(V.value), 1)) : e.helper ? (l(), n("div", se, p(e.helper), 1)) : u("", !0)
+        m.value ? (l(), n("div", re, u(V.value), 1)) : e.helper ? (l(), n("div", se, u(e.helper), 1)) : p("", !0)
       ], 2),
       B(t(Y), {
         modelValue: a.fileDialogOpen,
@@ -146,6 +148,6 @@ const le = {
   }
 });
 export {
-  he as default
+  _e as default
 };
 //# sourceMappingURL=PlFileInput.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlFileInput.vue.js","sources":["../../../src/components/PlFileInput/PlFileInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport './pl-file-input.scss';\n\nimport { prettyBytes } from '@milaboratories/helpers';\nimport type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';\nimport { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';\nimport { computed, reactive, ref, useSlots, watch } from 'vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport type { ImportedFiles } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { PlFileDialog } from '../PlFileDialog';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { PlTooltip } from '../PlTooltip';\n\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { PlSvg } from '../PlSvg';\n\nconst data = reactive({\n  fileDialogOpen: false,\n  error: undefined as undefined | string,\n});\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: ImportFileHandle | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current import file handle.\n     */\n    modelValue: ImportFileHandle | undefined;\n    /**\n     * The label to display above the input field.\n     */\n    label?: string;\n    /**\n     * If `true`, the input field is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the component border is dashed.\n     */\n    dashed?: boolean;\n    /**\n     * Allowed file extensions (should start with `.`)\n     */\n    extensions?: string[];\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * Import/Upload progress\n     */\n    progress?: ImportProgress;\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     * Remove rounded border and change styles\n     */\n    cellStyle?: boolean;\n    /**\n     * File dialog title\n     */\n    fileDialogTitle?: string;\n    /**\n     * If `true`, the file dialog window closes when clicking outside the modal area (default: `true`)\n     */\n    fileDialogCloseOnOutsideClick?: boolean;\n  }>(),\n  {\n    label: undefined,\n    extensions: undefined,\n    fileDialogTitle: undefined,\n    placeholder: undefined,\n    progress: undefined,\n    error: undefined,\n    helper: undefined,\n    cellStyle: false,\n    fileDialogCloseOnOutsideClick: true,\n  },\n);\n\nconst tryValue = <T extends ImportFileHandle>(v: T | undefined, cb: (v: T) => string | undefined) => {\n  if (!v) {\n    return undefined;\n  }\n\n  try {\n    return cb(v);\n  } catch (err) {\n    data.error = err instanceof Error ? err.message : String(err);\n    return v;\n  }\n};\n\nconst fileName = computed(() => tryValue(props.modelValue, getFileNameFromHandle));\n\nconst filePath = computed(() => tryValue(props.modelValue, getFilePathFromHandle));\n\nconst isUploading = computed(() => props.progress && !props.progress.done);\n\nconst isUploaded = computed(() => props.progress && props.progress.done);\n\nconst computedErrorMessage = computed(() => getErrorMessage(data.error, props.error));\n\nconst hasErrors = computed(() => typeof computedErrorMessage.value === 'string');\n\nconst uploadStats = computed(() => {\n  const { status, done } = props.progress ?? {};\n\n  if (!status || !status.bytesTotal) {\n    return '';\n  }\n\n  if (status.bytesProcessed && !done) {\n    return prettyBytes(status.bytesProcessed, {}) + ' / ' + prettyBytes(status.bytesTotal, {});\n  }\n\n  return prettyBytes(status.bytesTotal, {});\n});\n\nconst progressStyle = computed(() => {\n  const { progress } = props;\n\n  if (!progress) {\n    return {};\n  }\n\n  return {\n    width: progress.done ? '100%' : Math.round((progress.status?.progress ?? 0) * 100) + '%',\n  };\n});\n\nconst openFileDialog = () => {\n  data.fileDialogOpen = true;\n};\n\nconst onImport = (v: ImportedFiles) => {\n  if (v.files.length) {\n    emit('update:modelValue', v.files[0]);\n  }\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nwatch(\n  () => props.modelValue,\n  () => (data.error = undefined),\n  { immediate: true },\n);\n\nconst rootRef = ref();\n\nif (!props.cellStyle) {\n  useLabelNotch(rootRef);\n}\n</script>\n\n<template>\n  <div :class=\"{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }\" class=\"pl-file-input__envelope\">\n    <div\n      ref=\"rootRef\"\n      :class=\"{ dashed, error: hasErrors }\"\n      class=\"pl-file-input\"\n      tabindex=\"0\"\n      @keyup.enter=\"openFileDialog\"\n      @click.stop=\"openFileDialog\"\n    >\n      <div :style=\"progressStyle\" class=\"pl-file-input__progress\" />\n      <label v-if=\"!cellStyle && label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip || filePath\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot v-if=\"slots.tooltip\" name=\"tooltip\" />\n            <template v-else>{{ filePath }}</template>\n          </template>\n        </PlTooltip>\n      </label>\n      <PlMaskIcon24 v-if=\"hasErrors\" name=\"restart\" />\n      <PlMaskIcon24 v-else-if=\"isUploading\" name=\"cloud-upload\" />\n      <PlMaskIcon24 v-else-if=\"isUploaded\" name=\"success\" />\n      <PlMaskIcon24 v-else name=\"paper-clip\" />\n      <div :data-placeholder=\"placeholder ?? 'Choose file'\" class=\"pl-file-input__filename\">\n        {{ fileName }}\n      </div>\n      <div v-if=\"uploadStats\" class=\"pl-file-input__stats\">{{ uploadStats }}</div>\n      <PlMaskIcon24 v-if=\"modelValue\" class=\"pl-file-input__clear\" name=\"close\" @click.stop=\"clear\" />\n      <DoubleContour class=\"pl-file-input__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-file-input__error\">\n      {{ computedErrorMessage }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-file-input__helper\">{{ helper }}</div>\n  </div>\n  <PlFileDialog\n    v-model=\"data.fileDialogOpen\"\n    :close-on-outside-click=\"fileDialogCloseOnOutsideClick\"\n    :extensions=\"extensions\"\n    :title=\"fileDialogTitle\"\n    @import:files=\"onImport\"\n  />\n</template>\n"],"names":["data","reactive","slots","useSlots","emit","__emit","props","__props","tryValue","v","cb","err","fileName","computed","getFileNameFromHandle","filePath","getFilePathFromHandle","isUploading","isUploaded","computedErrorMessage","getErrorMessage","hasErrors","uploadStats","status","done","prettyBytes","progressStyle","progress","_a","openFileDialog","onImport","clear","watch","rootRef","ref","useLabelNotch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,UAAMA,IAAOC,EAAS;AAAA,MACpB,gBAAgB;AAAA,MAChB,OAAO;AAAA,IAAA,CACR,GAEKC,IAAQC,EAAA,GAERC,IAAOC,GAIPC,IAAQC,GAgERC,IAAW,CAA6BC,GAAkBC,MAAqC;AACnG,UAAKD;AAIL,YAAI;AACF,iBAAOC,EAAGD,CAAC;AAAA,QACb,SAASE,GAAK;AACZ,iBAAAX,EAAK,QAAQW,aAAe,QAAQA,EAAI,UAAU,OAAOA,CAAG,GACrDF;AAAA,QACT;AAAA,IACF,GAEMG,IAAWC,EAAS,MAAML,EAASF,EAAM,YAAYQ,CAAqB,CAAC,GAE3EC,IAAWF,EAAS,MAAML,EAASF,EAAM,YAAYU,CAAqB,CAAC,GAE3EC,IAAcJ,EAAS,MAAMP,EAAM,YAAY,CAACA,EAAM,SAAS,IAAI,GAEnEY,IAAaL,EAAS,MAAMP,EAAM,YAAYA,EAAM,SAAS,IAAI,GAEjEa,IAAuBN,EAAS,MAAMO,EAAgBpB,EAAK,OAAOM,EAAM,KAAK,CAAC,GAE9Ee,IAAYR,EAAS,MAAM,OAAOM,EAAqB,SAAU,QAAQ,GAEzEG,IAAcT,EAAS,MAAM;AACjC,YAAM,EAAE,QAAAU,GAAQ,MAAAC,EAAA,IAASlB,EAAM,YAAY,CAAA;AAE3C,aAAI,CAACiB,KAAU,CAACA,EAAO,aACd,KAGLA,EAAO,kBAAkB,CAACC,IACrBC,EAAYF,EAAO,gBAAgB,CAAA,CAAE,IAAI,QAAQE,EAAYF,EAAO,YAAY,EAAE,IAGpFE,EAAYF,EAAO,YAAY,EAAE;AAAA,IAC1C,CAAC,GAEKG,IAAgBb,EAAS,MAAM;;AACnC,YAAM,EAAE,UAAAc,MAAarB;AAErB,aAAKqB,IAIE;AAAA,QACL,OAAOA,EAAS,OAAO,SAAS,KAAK,SAAOC,IAAAD,EAAS,WAAT,gBAAAC,EAAiB,aAAY,KAAK,GAAG,IAAI;AAAA,MAAA,IAJ9E,CAAA;AAAA,IAMX,CAAC,GAEKC,IAAiB,MAAM;AAC3B,MAAA7B,EAAK,iBAAiB;AAAA,IACxB,GAEM8B,IAAW,CAACrB,MAAqB;AACrC,MAAIA,EAAE,MAAM,UACVL,EAAK,qBAAqBK,EAAE,MAAM,CAAC,CAAC;AAAA,IAExC,GAEMsB,IAAQ,MAAM3B,EAAK,qBAAqB,MAAS;AAEvD,IAAA4B;AAAA,MACE,MAAM1B,EAAM;AAAA,MACZ,MAAON,EAAK,QAAQ;AAAA,MACpB,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAMiC,IAAUC,EAAA;AAEhB,WAAK5B,EAAM,aACT6B,EAAcF,CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlFileInput.vue.js","sources":["../../../src/components/PlFileInput/PlFileInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport './pl-file-input.scss';\n\nimport { prettyBytes } from '@milaboratories/helpers';\nimport type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';\nimport { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';\nimport { computed, reactive, ref, useSlots, watch } from 'vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport type { ImportedFiles } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { PlFileDialog } from '../PlFileDialog';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { PlTooltip } from '../PlTooltip';\n\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { PlSvg } from '../PlSvg';\n\nconst data = reactive({\n  fileDialogOpen: false,\n  error: undefined as undefined | string,\n});\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: ImportFileHandle | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current import file handle.\n     */\n    modelValue: ImportFileHandle | undefined;\n    /**\n     * The label to display above the input field.\n     */\n    label?: string;\n    /**\n     * If `true`, the input field is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the component border is dashed.\n     */\n    dashed?: boolean;\n    /**\n     * Allowed file extensions (should start with `.`)\n     */\n    extensions?: string[];\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * Import/Upload progress\n     */\n    progress?: ImportProgress;\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     * Remove rounded border and change styles\n     */\n    cellStyle?: boolean;\n    /**\n     * File dialog title\n     */\n    fileDialogTitle?: string;\n    /**\n     * If `true`, the file dialog window closes when clicking outside the modal area (default: `true`)\n     */\n    fileDialogCloseOnOutsideClick?: boolean;\n  }>(),\n  {\n    label: undefined,\n    extensions: undefined,\n    fileDialogTitle: undefined,\n    placeholder: undefined,\n    progress: undefined,\n    error: undefined,\n    helper: undefined,\n    cellStyle: false,\n    fileDialogCloseOnOutsideClick: true,\n  },\n);\n\nconst tryValue = <T extends ImportFileHandle>(v: T | undefined, cb: (v: T) => string | undefined) => {\n  if (!v) {\n    return undefined;\n  }\n\n  try {\n    return cb(v);\n  } catch (err) {\n    data.error = err instanceof Error ? err.message : String(err);\n    return v;\n  }\n};\n\nconst fileName = computed(() => tryValue(props.modelValue, getFileNameFromHandle));\n\nconst filePath = computed(() => tryValue(props.modelValue, getFilePathFromHandle));\n\nconst isUploading = computed(() => props.progress && !props.progress.done);\n\nconst isUploaded = computed(() => props.progress && props.progress.done);\n\nconst computedErrorMessage = computed(() => getErrorMessage(data.error, props.error));\n\nconst hasErrors = computed(() => typeof computedErrorMessage.value === 'string');\n\nconst uploadStats = computed(() => {\n  const { status, done } = props.progress ?? {};\n\n  if (!status || !status.bytesTotal) {\n    return '';\n  }\n\n  if (status.bytesProcessed && !done) {\n    return prettyBytes(status.bytesProcessed, {}) + ' / ' + prettyBytes(status.bytesTotal, {});\n  }\n\n  return prettyBytes(status.bytesTotal, {});\n});\n\nconst progressStyle = computed(() => {\n  const { progress } = props;\n\n  if (!progress) {\n    return {};\n  }\n\n  return {\n    width: progress.done ? '100%' : Math.round((progress.status?.progress ?? 0) * 100) + '%',\n  };\n});\n\nconst openFileDialog = () => {\n  data.fileDialogOpen = true;\n};\n\nconst onImport = (v: ImportedFiles) => {\n  if (v.files.length) {\n    emit('update:modelValue', v.files[0]);\n  }\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nwatch(\n  () => props.modelValue,\n  () => (data.error = undefined),\n  { immediate: true },\n);\n\nconst rootRef = ref();\n\nif (!props.cellStyle) {\n  useLabelNotch(rootRef);\n}\n</script>\n\n<template>\n  <div :class=\"{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }\" class=\"pl-file-input__envelope\">\n    <div\n      ref=\"rootRef\"\n      :class=\"{ dashed, error: hasErrors }\"\n      class=\"pl-file-input\"\n      tabindex=\"0\"\n      @keyup.enter=\"openFileDialog\"\n      @click.stop=\"openFileDialog\"\n    >\n      <div :style=\"progressStyle\" class=\"pl-file-input__progress\" />\n      <label v-if=\"!cellStyle && label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip || filePath\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot v-if=\"slots.tooltip\" name=\"tooltip\" />\n            <template v-else>{{ filePath }}</template>\n          </template>\n        </PlTooltip>\n      </label>\n      <PlMaskIcon24 v-if=\"hasErrors\" name=\"restart\" />\n      <PlMaskIcon24 v-else-if=\"isUploading\" name=\"cloud-upload\" />\n      <PlMaskIcon24 v-else-if=\"isUploaded\" name=\"success\" />\n      <PlMaskIcon24 v-else name=\"paper-clip\" />\n      <div :data-placeholder=\"placeholder ?? 'Choose file'\" class=\"pl-file-input__filename\">\n        {{ fileName }}\n      </div>\n      <div v-if=\"uploadStats\" class=\"pl-file-input__stats\">{{ uploadStats }}</div>\n      <PlMaskIcon24 v-if=\"modelValue\" class=\"pl-file-input__clear\" name=\"close\" @click.stop=\"clear\" />\n      <DoubleContour class=\"pl-file-input__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-file-input__error\">\n      {{ computedErrorMessage }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-file-input__helper\">{{ helper }}</div>\n  </div>\n  <PlFileDialog\n    v-model=\"data.fileDialogOpen\"\n    :close-on-outside-click=\"fileDialogCloseOnOutsideClick\"\n    :extensions=\"extensions\"\n    :title=\"fileDialogTitle\"\n    @import:files=\"onImport\"\n  />\n</template>\n"],"names":["data","reactive","slots","useSlots","emit","__emit","props","__props","tryValue","v","cb","err","fileName","computed","getFileNameFromHandle","filePath","getFilePathFromHandle","isUploading","isUploaded","computedErrorMessage","getErrorMessage","hasErrors","uploadStats","status","done","prettyBytes","progressStyle","progress","_a","openFileDialog","onImport","clear","watch","rootRef","ref","useLabelNotch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,UAAMA,IAAOC,EAAS;AAAA,MACpB,gBAAgB;AAAA,MAChB,OAAO;AAAA,IAAA,CACR,GAEKC,IAAQC,EAAA,GAERC,IAAOC,GAIPC,IAAQC,GAgERC,IAAW,CAA6BC,GAAkBC,MAAqC;AACnG,UAAKD;AAIL,YAAI;AACF,iBAAOC,EAAGD,CAAC;AAAA,QACb,SAASE,GAAK;AACZ,iBAAAX,EAAK,QAAQW,aAAe,QAAQA,EAAI,UAAU,OAAOA,CAAG,GACrDF;AAAA,QACT;AAAA,IACF,GAEMG,IAAWC,EAAS,MAAML,EAASF,EAAM,YAAYQ,CAAqB,CAAC,GAE3EC,IAAWF,EAAS,MAAML,EAASF,EAAM,YAAYU,CAAqB,CAAC,GAE3EC,IAAcJ,EAAS,MAAMP,EAAM,YAAY,CAACA,EAAM,SAAS,IAAI,GAEnEY,IAAaL,EAAS,MAAMP,EAAM,YAAYA,EAAM,SAAS,IAAI,GAEjEa,IAAuBN,EAAS,MAAMO,EAAgBpB,EAAK,OAAOM,EAAM,KAAK,CAAC,GAE9Ee,IAAYR,EAAS,MAAM,OAAOM,EAAqB,SAAU,QAAQ,GAEzEG,IAAcT,EAAS,MAAM;AACjC,YAAM,EAAE,QAAAU,GAAQ,MAAAC,EAAA,IAASlB,EAAM,YAAY,CAAA;AAE3C,aAAI,CAACiB,KAAU,CAACA,EAAO,aACd,KAGLA,EAAO,kBAAkB,CAACC,IACrBC,EAAYF,EAAO,gBAAgB,CAAA,CAAE,IAAI,QAAQE,EAAYF,EAAO,YAAY,EAAE,IAGpFE,EAAYF,EAAO,YAAY,EAAE;AAAA,IAC1C,CAAC,GAEKG,IAAgBb,EAAS,MAAM;;AACnC,YAAM,EAAE,UAAAc,MAAarB;AAErB,aAAKqB,IAIE;AAAA,QACL,OAAOA,EAAS,OAAO,SAAS,KAAK,SAAOC,IAAAD,EAAS,WAAT,gBAAAC,EAAiB,aAAY,KAAK,GAAG,IAAI;AAAA,MAAA,IAJ9E,CAAA;AAAA,IAMX,CAAC,GAEKC,IAAiB,MAAM;AAC3B,MAAA7B,EAAK,iBAAiB;AAAA,IACxB,GAEM8B,IAAW,CAACrB,MAAqB;AACrC,MAAIA,EAAE,MAAM,UACVL,EAAK,qBAAqBK,EAAE,MAAM,CAAC,CAAC;AAAA,IAExC,GAEMsB,IAAQ,MAAM3B,EAAK,qBAAqB,MAAS;AAEvD,IAAA4B;AAAA,MACE,MAAM1B,EAAM;AAAA,MACZ,MAAON,EAAK,QAAQ;AAAA,MACpB,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAMiC,IAAUC,EAAA;AAEhB,WAAK5B,EAAM,aACT6B,EAAcF,CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlLogView/PlLogView.vue.js

@@ -1,11 +1,13 @@
-(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('.pl-log-view{--log-background: var(--bg-base-light);--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--border-color-log-view: var(--border-color-div-grey);height:100%;max-height:calc(100% - var(--contour-offset));max-width:calc(100% - var(--contour-offset));border-radius:6px;background:var(--log-background);display:flex;position:relative;min-height:44px;padding-right:40px}.pl-log-view__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(--border-color-log-view);border-style:solid;box-shadow:none;z-index:0;pointer-events:none}.pl-log-view label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);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-log-view label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-log-view.has-error{--log-background: linear-gradient(90deg, #FFEBEB 0%, #FFFFFF 100%);--border-color-log-view: var(--border-color-error)}.pl-log-view__copy{position:absolute;top:12px;right:12px;cursor:pointer;--icon-color: var(--ic-02)}.pl-log-view__copy>*:hover{--icon-color: var(--txt-01)}.pl-log-view__content{margin:12px;max-height:100%;max-width:100%;flex:1;color:var(--txt-01);font-feature-settings:"ss11" on,"ss15" on,"ss17" on;font-family:var(--font-family-monospace);white-space:pre;font-size:14px;font-weight:400;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.pl-log-view__content::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-log-view__content::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-log-view__content::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-log-view__error{margin:12px;max-height:100%;max-width:100%;flex:1;color:var(--txt-01);font-feature-settings:"ss11" on,"ss15" on,"ss17" on;font-family:var(--font-family-monospace);white-space:pre;font-size:14px;font-weight:400;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.pl-log-view__error::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-log-view__error::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-log-view__error::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}')),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import { defineComponent as F, useSlots as L, ref as s, computed as c, watch as P, createElementBlock as u, openBlock as l, normalizeClass as x, createCommentVNode as f, createVNode as p, createElementVNode as C, createBlock as b, toDisplayString as d, unref as r, withCtx as a, renderSlot as R, createTextVNode as S } from "vue";
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-log-view{--log-background: var(--bg-base-light);--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--border-color-log-view: var(--border-color-div-grey);height:100%;max-height:calc(100% - var(--contour-offset));max-width:calc(100% - var(--contour-offset));border-radius:6px;background:var(--log-background);display:flex;position:relative;min-height:44px;padding-right:40px}.pl-log-view__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(--border-color-log-view);border-style:solid;box-shadow:none;z-index:0;pointer-events:none}.pl-log-view label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);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-log-view label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-log-view.has-error{--log-background: linear-gradient(90deg, #FFEBEB 0%, #FFFFFF 100%);--border-color-log-view: var(--border-color-error)}.pl-log-view__copy{position:absolute;top:12px;right:12px;cursor:pointer;--icon-color: var(--ic-02)}.pl-log-view__copy>*:hover{--icon-color: var(--txt-01)}.pl-log-view__content{margin:12px;max-height:100%;max-width:100%;flex:1;color:var(--txt-01);font-feature-settings:"ss11" on,"ss15" on,"ss17" on;font-family:var(--font-family-monospace);white-space:pre;font-size:14px;font-weight:400;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.pl-log-view__content::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-log-view__content::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-log-view__content::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-log-view__error{margin:12px;max-height:100%;max-width:100%;flex:1;color:var(--txt-01);font-feature-settings:"ss11" on,"ss15" on,"ss17" on;font-family:var(--font-family-monospace);white-space:pre;font-size:14px;font-weight:400;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.pl-log-view__error::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-log-view__error::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-log-view__error::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}
+.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { defineComponent as F, useSlots as L, ref as s, computed as c, watch as P, createElementBlock as p, openBlock as l, normalizeClass as x, createCommentVNode as f, createVNode as u, createElementVNode as C, createBlock as b, toDisplayString as d, unref as r, withCtx as a, renderSlot as R, createTextVNode as S } from "vue";
 import T from "../PlIcon24/PlIcon24.vue.js";
 
-import { okOptional as I, tapIf as O } from "@milaboratories/helpers";
-import { useLogHandle as $ } from "./useLogHandle.js";
+import { okOptional as $, tapIf as I } from "@milaboratories/helpers";
+import { useLogHandle as O } from "./useLogHandle.js";
 import { useLabelNotch as j } from "../../utils/useLabelNotch.js";
 import q from "../../utils/DoubleContour.vue.js";
+
 import v from "../PlTooltip/PlTooltip.vue.js";
 import { downloadContent as z } from "../../helpers/downloadContent.js";
 const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
@@ -13,7 +15,7 @@ const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
   class: "pl-log-view__error"
 }, K = {
   name: "PlLogView"
-}, lo = /* @__PURE__ */ F({
+}, ro = /* @__PURE__ */ F({
   ...K,
   props: {
     value: {},
@@ -33,12 +35,12 @@ const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
       if (o && o.ok === !1)
         return o.errors.join(`
 `);
-    }, N = L(), t = h, y = $(t), _ = s(!0), g = s(), k = s(), m = c(() => {
+    }, N = L(), t = h, y = O(t), _ = s(!0), g = s(), k = s(), m = c(() => {
       var o;
       return ((o = y.value) == null ? void 0 : o.error) ?? t.error ?? V(t.output);
     }), n = c(() => {
       var o;
-      return ((o = y.value) == null ? void 0 : o.lines) ?? t.value ?? I(t.output);
+      return ((o = y.value) == null ? void 0 : o.lines) ?? t.value ?? $(t.output);
     }), w = c(() => {
       if (t.valueToCopy)
         return t.valueToCopy;
@@ -46,17 +48,17 @@ const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
         return n.value;
     }), i = s(!1);
     j(k);
-    const A = c(() => i.value ? "clipboard-copied" : "clipboard"), D = () => {
+    const A = c(() => i.value ? "clipboard-copied" : "clipboard"), H = () => {
       i.value = !0, setTimeout(() => {
         i.value = !1;
       }, 1200);
       const o = w.value;
       o !== void 0 && navigator.clipboard.writeText(o);
-    }, H = (o) => {
+    }, B = (o) => {
       const e = w.value;
       e !== void 0 && z([e, "text/plain"], o);
-    }, B = () => {
-      t.disableAutoScroll || O(g.value, (o) => {
+    }, D = () => {
+      t.disableAutoScroll || I(g.value, (o) => {
         _.value && o.scrollTo(o.scrollLeft, o.scrollHeight);
       });
     };
@@ -64,7 +66,7 @@ const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
       n,
       () => {
         requestAnimationFrame(() => {
-          B();
+          D();
         });
       },
       { immediate: !0 }
@@ -73,12 +75,12 @@ const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
       const e = o.target;
       _.value = e.scrollTop + 20 >= e.scrollHeight - e.offsetHeight;
     };
-    return (o, e) => (l(), u("div", {
+    return (o, e) => (l(), p("div", {
       ref_key: "root",
       ref: k,
       class: x(["pl-log-view", { "has-error": m.value }])
     }, [
-      o.label ? (l(), u("label", M, [
+      o.label ? (l(), p("label", M, [
         C("span", null, d(o.label), 1),
         r(N).tooltip ? (l(), b(r(v), {
           key: 0,
@@ -91,9 +93,9 @@ const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
           _: 3
         })) : f("", !0)
       ])) : f("", !0),
-      p(q, { class: "pl-log-view__contour" }),
+      u(q, { class: "pl-log-view__contour" }),
       C("div", G, [
-        p(r(v), {
+        u(r(v), {
           "close-delay": 800,
           position: "top"
         }, {
@@ -101,10 +103,10 @@ const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
             S(d(i.value ? "copied" : "copy"), 1)
           ]),
           default: a(() => [
-            p(r(T), {
+            u(r(T), {
               title: "Copy content",
               name: A.value,
-              onClick: D
+              onClick: H
             }, null, 8, ["name"])
           ]),
           _: 1
@@ -118,15 +120,15 @@ const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
             S("download")
           ])),
           default: a(() => [
-            p(r(T), {
+            u(r(T), {
               name: "download",
-              onClick: e[0] || (e[0] = () => H(o.downloadFilename))
+              onClick: e[0] || (e[0] = () => B(o.downloadFilename))
             })
           ]),
           _: 1
         })) : f("", !0)
       ]),
-      m.value ? (l(), u("div", J, d(m.value), 1)) : (l(), u("div", {
+      m.value ? (l(), p("div", J, d(m.value), 1)) : (l(), p("div", {
         key: 2,
         ref_key: "contentRef",
         ref: g,
@@ -137,6 +139,6 @@ const M = { key: 0 }, G = { class: "pl-log-view__copy" }, J = {
   }
 });
 export {
-  lo as default
+  ro as default
 };
 //# sourceMappingURL=PlLogView.vue.js.map