tsviewer 1.0.27 → 1.0.29

package/dist/TSViewerLayerWindow-MwCEfh1O.mjs

@@ -0,0 +1,262 @@
+import "./base-CIy5gWpu.mjs";
+import { E as _ } from "./el-overlay-_Fd7WVZL.mjs";
+import { g as f, a as y, b as h } from "./el-input-DNjlHApm.mjs";
+import { createElementBlock as F, openBlock as s, renderSlot as S, resolveComponent as A, createBlock as u, withCtx as t, createElementVNode as l, createVNode as r, createTextVNode as i, Fragment as E, renderList as k, normalizeStyle as D, toDisplayString as V } from "vue";
+import { g as C } from "./index-B7dOp-ew.mjs";
+import w from "./BFButton-DpIwbJXR.mjs";
+const L = {
+  name: "CircleIcon",
+  props: {
+    icon: {
+      type: String
+    },
+    height: {
+      type: String,
+      default: "16"
+    },
+    width: {
+      type: String,
+      default: "16"
+    },
+    currentColor: {
+      type: String,
+      default: "#71747C"
+    }
+  }
+}, $ = { class: "circle-icon" };
+function O(n, e, c, B, m, a) {
+  return s(), F("div", $, [
+    S(n.$slots, "icon", {}, void 0, !0)
+  ]);
+}
+const I = /* @__PURE__ */ C(L, [["render", O], ["__scopeId", "data-v-46dcef49"]]), N = {
+  name: "AnnotationLayerWindow",
+  components: {
+    CircleIcon: I,
+    BfButton: w
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data: function() {
+    return {
+      name: "",
+      selectedColor: "",
+      colorOptions: [
+        {
+          label: "Green",
+          value: "#18BA62",
+          iconBgColor: "#18BA62"
+        },
+        {
+          label: "Gold",
+          value: "#FFBC27",
+          iconBgColor: "#FFBC27"
+        },
+        {
+          label: "Red",
+          value: "#E94B4B",
+          iconBgColor: "#E94B4B"
+        },
+        {
+          label: "Light Blue",
+          value: "#2760FF",
+          iconBgColor: "#2760FF"
+        },
+        {
+          label: "Magenta",
+          value: "#FF4FFF",
+          iconBgColor: "#FF4FFF"
+        },
+        {
+          label: "Cyan",
+          value: "#50FFFF",
+          iconBgColor: "#50FFFF"
+        },
+        {
+          label: "Yellow",
+          value: "#FFFF4E",
+          iconBgColor: "#FFFF4E"
+        },
+        {
+          label: "Purple",
+          value: "#512BAF",
+          iconBgColor: "#512BAF"
+        },
+        {
+          label: "Lavendar",
+          value: "#8A6ECF",
+          iconBgColor: "#8A6ECF"
+        },
+        {
+          label: "Teal",
+          value: "#389BAD",
+          iconBgColor: "#389BAD"
+        },
+        {
+          label: "Dark Green",
+          value: "#187D46",
+          iconBgColor: "#187D46"
+        },
+        {
+          label: "Brick Red",
+          value: "#B12800",
+          iconBgColor: "#B12800"
+        },
+        {
+          label: "Dark Blue",
+          value: "#0C2475",
+          iconBgColor: "#0C2475"
+        },
+        {
+          label: "Bright Orange",
+          value: "#FF5321",
+          iconBgColor: "#FF5321"
+        },
+        {
+          label: "Pink",
+          value: "#FF99CC",
+          iconBgColor: "#FF99CC"
+        },
+        {
+          label: "Tan",
+          value: "#DCC180",
+          iconBgColor: "#DCC180"
+        },
+        {
+          label: "Medium Blue",
+          value: "#0D4EFF",
+          iconBgColor: "#0D4EFF"
+        },
+        {
+          label: "Orange",
+          value: "#FF6C21",
+          iconBgColor: "#FF6C21"
+        },
+        {
+          label: "Black",
+          value: "#000000",
+          iconBgColor: "#000000"
+        },
+        {
+          label: "Gray",
+          value: "#9B9B9B",
+          iconBgColor: "#9B9B9B"
+        },
+        {
+          label: "Lime",
+          value: "#00FF00",
+          iconBgColor: "#00FF00"
+        },
+        {
+          label: "Salmon",
+          value: "#FA8072",
+          iconBgColor: "#FA8072"
+        },
+        {
+          label: "Olive",
+          value: "#808000",
+          iconBgColor: "#808000"
+        },
+        {
+          label: "Sienna",
+          value: "#A0522D",
+          iconBgColor: "#A0522D"
+        }
+      ]
+    };
+  },
+  methods: {
+    close: function() {
+      this.$emit("close-window");
+    },
+    handleFormSubmit: function() {
+      this.$emit("createLayer", { name: this.name, color: this.selectedColor });
+    },
+    handleFormCancel: function() {
+      this.close();
+    }
+  }
+}, G = { slot: "body" }, T = { class: "input-section" }, x = { class: "input-section" }, R = { class: "color-option" }, U = { style: { float: "right", color: "#8492a6", "font-size": "13px" } }, z = { slot: "footer" }, M = { class: "button-wrapper" }, P = { class: "buttons" };
+function W(n, e, c, B, m, a) {
+  const p = f, v = h, b = y, d = A("bf-button"), g = _;
+  return s(), u(g, {
+    "onUpdate:modelValue": e[2] || (e[2] = (o) => c.visible = o),
+    "model-value": c.visible,
+    onClose: a.close,
+    class: "timeseries-annotation-layer-modal",
+    ref: "timeseries-filter-modal",
+    title: "Annotation Layers"
+  }, {
+    default: t(() => [
+      l("div", G, [
+        l("div", T, [
+          e[3] || (e[3] = i(" Layer Name: ")),
+          r(p, {
+            placeholder: "Add a Layer Name",
+            modelValue: n.name,
+            "onUpdate:modelValue": e[0] || (e[0] = (o) => n.name = o),
+            ref: "input"
+          }, null, 8, ["modelValue"])
+        ]),
+        l("div", x, [
+          e[4] || (e[4] = i(" Select Color: ")),
+          r(b, {
+            modelValue: n.selectedColor,
+            "onUpdate:modelValue": e[1] || (e[1] = (o) => n.selectedColor = o),
+            placeholder: "Select"
+          }, {
+            default: t(() => [
+              (s(!0), F(E, null, k(n.colorOptions, (o) => (s(), u(v, {
+                key: o.value,
+                label: o.label,
+                value: o.value
+              }, {
+                default: t(() => [
+                  l("div", R, [
+                    l("div", {
+                      style: D({ backgroundColor: o.value, height: "30px", width: "30px", borderRadius: "50%" })
+                    }, null, 4),
+                    l("div", U, V(o.label), 1)
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["label", "value"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])
+      ])
+    ]),
+    footer: t(() => [
+      l("div", z, [
+        l("div", M, [
+          l("div", P, [
+            r(d, { onClick: a.handleFormCancel }, {
+              default: t(() => e[5] || (e[5] = [
+                i("Cancel ")
+              ])),
+              _: 1,
+              __: [5]
+            }, 8, ["onClick"]),
+            r(d, { onClick: a.handleFormSubmit }, {
+              default: t(() => e[6] || (e[6] = [
+                i("Save ")
+              ])),
+              _: 1,
+              __: [6]
+            }, 8, ["onClick"])
+          ])
+        ])
+      ])
+    ]),
+    _: 1
+  }, 8, ["model-value", "onClose"]);
+}
+const Q = /* @__PURE__ */ C(N, [["render", W], ["__scopeId", "data-v-e5b3e8c2"]]);
+export {
+  Q as default
+};