Flowfile 0.2.2__py3-none-any.whl → 0.3.0.1__py3-none-any.whl

flowfile/web/static/assets/GoogleSheet-92084da7.css

@@ -0,0 +1,233 @@
+
+.context-menu[data-v-f96970aa] {
+  position: fixed;
+  z-index: 1000;
+  border: 1px solid #ccc;
+  background-color: white;
+  padding: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  user-select: none;
+}
+.context-menu button[data-v-f96970aa] {
+  display: block;
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  text-align: left;
+  width: 100%;
+  cursor: pointer;
+  z-index: 1;
+}
+.context-menu button[data-v-f96970aa]:hover {
+  background-color: #f0f0f0;
+}
+.selected[data-v-f96970aa] {
+  background-color: #e0f7fa;
+}
+.table-wrapper[data-v-f96970aa] {
+  position: relative;
+  max-height: 300px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: auto;
+  margin: 5px;
+}
+.buttons-container[data-v-f96970aa] {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  padding: 10px 0;
+  min-width: 250px;
+  z-index: 2;
+}
+button[data-v-f96970aa] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+  z-index: 2;
+}
+button[data-v-f96970aa]:hover {
+  background-color: #b3b5ba;
+}
+button .material-icons[data-v-f96970aa] {
+  margin-right: 8px;
+  font-size: 20px;
+}
+.modal[data-v-f96970aa] {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.modal-content[data-v-f96970aa] {
+  position: relative;
+  background-color: #fefefe;
+  margin: 10% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  z-index: 1001;
+}
+.pagination-buttons[data-v-f96970aa] {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 20px;
+  z-index: 2;
+}
+.grid-container[data-v-f96970aa] {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 10px;
+  padding: 10px;
+  z-index: 1;
+}
+.file-item[data-v-f96970aa] {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  text-align: center;
+  padding: 10px;
+  background-color: #f4f4f4;
+  border-radius: 4px;
+}
+.file-icon[data-v-f96970aa] {
+  width: 24px;
+  height: auto;
+  margin-right: 8px;
+}
+@media (max-width: 800px) {
+.grid-container[data-v-f96970aa] {
+    grid-template-columns: repeat(2, 1fr);
+}
+}
+.breadcrumb[data-v-f96970aa] {
+  margin: 10px 0;
+}
+.breadcrumb a[data-v-f96970aa] {
+  cursor: pointer;
+  color: #0275d8;
+  text-decoration: none;
+}
+.breadcrumb a[data-v-f96970aa]:hover {
+  text-decoration: underline;
+}
+
+/* Additional styles for el-select override */
+.el-select-dropdown .el-select-dropdown__item.selected[data-v-f96970aa] {
+  background-color: #f5f5f5 !important;
+  color: #000000;
+}
+.close[data-v-f96970aa] {
+  position: relative;
+  z-index: 1002;
+}
+
+.context-menu[data-v-dc36d3d0] {
+  position: fixed;
+  z-index: 1000;
+  border: 1px solid #ccc;
+  background-color: white;
+  padding: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  user-select: none;
+}
+.context-menu button[data-v-dc36d3d0] {
+  display: block;
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  text-align: left;
+  width: 100%;
+  cursor: pointer;
+  z-index: 100;
+}
+.context-menu button[data-v-dc36d3d0]:hover {
+  background-color: #f0f0f0;
+}
+.table-wrapper[data-v-dc36d3d0] {
+  max-height: 300px; /* Adjust this value as needed */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* subtle shadow for depth */
+  border-radius: 8px; /* rounded corners */
+  overflow: auto; /* ensures the rounded corners are applied to the child elements */
+  margin: 5px; /* adds a small margin around the table */
+}
+.context-menu[data-v-dc36d3d0] {
+  position: fixed;
+  z-index: 1000;
+  border: 1px solid #ccc;
+  background-color: white;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+.context-menu ul[data-v-dc36d3d0] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.context-menu li[data-v-dc36d3d0] {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+.context-menu li[data-v-dc36d3d0]:hover {
+  background-color: #f0f0f0;
+}
+.file-upload-wrapper[data-v-dc36d3d0] {
+  position: relative;
+  width: 100%;
+}
+.file-upload-input[data-v-dc36d3d0] {
+  width: 100%;
+  height: 40px;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  cursor: pointer;
+}
+.file-upload-label[data-v-dc36d3d0] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 10px 15px;
+  color: #333;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: left;
+  user-select: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+.file-upload-label[data-v-dc36d3d0]:hover {
+  background-color: #e4e4e4;
+}
+.file-icon[data-v-dc36d3d0] {
+  margin-right: 10px;
+  font-size: 20px; /* Slightly larger icon for better visual balance */
+}
+.file-label-text[data-v-dc36d3d0] {
+  flex-grow: 1; /* Ensures text takes the available space */
+  margin-left: 10px; /* Spacing between icon and text */
+}
+
+/* Additional styling to align with Vuestic's modern and minimalistic design */

flowfile/web/static/assets/GraphSolver-0c86bbc6.js

@@ -0,0 +1,382 @@
+import { d as defineComponent, c as openBlock, e as createElementBlock, p as createBaseVNode, F as Fragment, q as renderList, s as normalizeClass, t as toDisplayString, T as normalizeStyle, _ as _export_sfc, g as createTextVNode, i as createCommentVNode, r as ref, l as computed, n as onMounted, R as nextTick, o as onUnmounted, b as resolveComponent, f as createVNode, w as withCtx, v as withModifiers, h as createBlock, a6 as Teleport } from "./index-552863fd.js";
+import { u as useNodeStore } from "./PopOver-b37ff9be.js";
+import { G as GenericNodeSettings } from "./genericNodeSettings-65587f20.js";
+import { N as NodeButton, a as NodeTitle } from "./nodeTitle-cf9bae3c.js";
+import "./designer-e5bbe26f.js";
+const _hoisted_1$3 = ["onClick"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "ContextMenu",
+  props: {
+    position: { type: Object, required: true },
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["select", "close"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const selectOption = (action) => {
+      emit("select", action);
+      emit("close");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "context-menu",
+        style: normalizeStyle({ top: __props.position.y + "px", left: __props.position.x + "px" })
+      }, [
+        createBaseVNode("ul", null, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+            return openBlock(), createElementBlock("li", {
+              key: option.action,
+              class: normalizeClass({ disabled: option.disabled }),
+              onClick: ($event) => !option.disabled && selectOption(option.action)
+            }, toDisplayString(option.label), 11, _hoisted_1$3);
+          }), 128))
+        ])
+      ], 4);
+    };
+  }
+});
+const ContextMenu_vue_vue_type_style_index_0_scoped_d0286fd2_lang = "";
+const ContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d0286fd2"]]);
+const _hoisted_1$2 = { class: "listbox-wrapper" };
+const _hoisted_2$1 = { class: "listbox-row" };
+const _hoisted_3$1 = { class: "listbox-subtitle" };
+const _hoisted_4$1 = { class: "items-container" };
+const _hoisted_5$1 = {
+  key: 0,
+  class: "item-box"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "SettingsSection",
+  props: {
+    title: { type: String, required: true },
+    item: { type: String, required: true }
+    // Changed to a single item
+  },
+  emits: ["removeItem"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const emitRemove = (item) => {
+      emit("removeItem", item);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createBaseVNode("div", _hoisted_2$1, [
+          createBaseVNode("div", _hoisted_3$1, toDisplayString(__props.title), 1),
+          createBaseVNode("div", _hoisted_4$1, [
+            __props.item !== "" ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+              createTextVNode(toDisplayString(__props.item) + " ", 1),
+              createBaseVNode("span", {
+                class: "remove-btn",
+                onClick: _cache[0] || (_cache[0] = ($event) => emitRemove(__props.item))
+              }, "x")
+            ])) : createCommentVNode("", true)
+          ])
+        ])
+      ]);
+    };
+  }
+});
+const SettingsSection_vue_vue_type_style_index_0_scoped_43acf78a_lang = "";
+const SettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-43acf78a"]]);
+const _hoisted_1$1 = {
+  key: 0,
+  class: "listbox-wrapper"
+};
+const _hoisted_2 = { class: "listbox-wrapper" };
+const _hoisted_3 = { class: "listbox" };
+const _hoisted_4 = ["onClick", "onContextmenu", "onDragstart", "onDrop"];
+const _hoisted_5 = { class: "listbox-wrapper" };
+const _hoisted_6 = { class: "listbox-wrapper" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "graphSolver",
+  props: { nodeId: { type: Number, required: true } },
+  setup(__props, { expose: __expose }) {
+    const nodeStore = useNodeStore();
+    const showContextMenu = ref(false);
+    const dataLoaded = ref(false);
+    const contextMenuPosition = ref({ x: 0, y: 0 });
+    const selectedColumns = ref([]);
+    const contextMenuOptions = ref([]);
+    const contextMenuRef = ref(null);
+    const nodeData = ref(null);
+    const draggedColumnName = ref(null);
+    const graphSolverInput = ref({
+      col_from: "",
+      col_to: "",
+      output_column_name: "group_column"
+    });
+    const nodeGraphSolver = ref(null);
+    const singleColumnSelected = computed(() => selectedColumns.value.length === 1);
+    const getColumnClass = (columnName) => {
+      return selectedColumns.value.includes(columnName) ? "is-selected" : "";
+    };
+    const onDragStart = (columnName, event) => {
+      var _a;
+      draggedColumnName.value = columnName;
+      (_a = event.dataTransfer) == null ? void 0 : _a.setData("text/plain", columnName);
+    };
+    const onDrop = (index) => {
+      var _a, _b;
+      if (draggedColumnName.value) {
+        const colSchema = (_b = (_a = nodeData.value) == null ? void 0 : _a.main_input) == null ? void 0 : _b.table_schema;
+        if (colSchema) {
+          const fromIndex = colSchema.findIndex((col) => col.name === draggedColumnName.value);
+          if (fromIndex !== -1 && fromIndex !== index) {
+            const [movedColumn] = colSchema.splice(fromIndex, 1);
+            colSchema.splice(index, 0, movedColumn);
+          }
+        }
+        draggedColumnName.value = null;
+      }
+    };
+    const onDropInSection = (section) => {
+      if (draggedColumnName.value) {
+        removeColumnIfExists(draggedColumnName.value);
+        if (section === "from" && graphSolverInput.value.col_from !== draggedColumnName.value) {
+          graphSolverInput.value.col_from = draggedColumnName.value;
+        } else if (section === "to") {
+          graphSolverInput.value.col_to = draggedColumnName.value;
+        }
+        draggedColumnName.value = null;
+      }
+    };
+    const openContextMenu = (columnName, event) => {
+      selectedColumns.value = [columnName];
+      contextMenuPosition.value = { x: event.clientX, y: event.clientY };
+      contextMenuOptions.value = [
+        {
+          label: "Assign as From",
+          action: "from",
+          disabled: isColumnAssigned(columnName) || !singleColumnSelected.value
+        },
+        {
+          label: "Assign as To",
+          action: "to",
+          disabled: isColumnAssigned(columnName) || !singleColumnSelected.value
+        }
+      ];
+      showContextMenu.value = true;
+    };
+    const handleContextMenuSelect = (action) => {
+      const column = selectedColumns.value[0];
+      if (action === "from" && graphSolverInput.value.col_from !== column) {
+        removeColumnIfExists(column);
+        graphSolverInput.value.col_from = column;
+      } else if (action === "to") {
+        removeColumnIfExists(column);
+        graphSolverInput.value.col_to = column;
+      }
+      closeContextMenu();
+    };
+    const isColumnAssigned = (columnName) => {
+      return graphSolverInput.value.col_from === columnName || graphSolverInput.value.col_to === columnName;
+    };
+    const removeColumnIfExists = (columnName) => {
+      if (graphSolverInput.value.col_from === columnName) {
+        graphSolverInput.value.col_from = "";
+      } else if (graphSolverInput.value.col_to === columnName) {
+        graphSolverInput.value.col_to = "";
+      }
+    };
+    const removeColumn = (type, _) => {
+      if (type === "from") {
+        graphSolverInput.value.col_from = "";
+      } else if (type === "to") {
+        graphSolverInput.value.col_to = "";
+      }
+    };
+    const handleItemClick = (columnName) => {
+      selectedColumns.value = [columnName];
+    };
+    const loadNodeData = async (nodeId) => {
+      var _a;
+      console.log("loadNodeData from groupby");
+      nodeData.value = await nodeStore.getNodeData(nodeId, false);
+      nodeGraphSolver.value = (_a = nodeData.value) == null ? void 0 : _a.setting_input;
+      if (nodeData.value) {
+        if (nodeGraphSolver.value) {
+          if (nodeGraphSolver.value.graph_solver_input) {
+            graphSolverInput.value = nodeGraphSolver.value.graph_solver_input;
+          } else {
+            nodeGraphSolver.value.graph_solver_input = graphSolverInput.value;
+          }
+        }
+      }
+      dataLoaded.value = true;
+      nodeStore.isDrawerOpen = true;
+    };
+    const handleClickOutside = (event) => {
+      const targetEvent = event.target;
+      if (targetEvent.id === "pivot-context-menu")
+        return;
+      showContextMenu.value = false;
+    };
+    const closeContextMenu = () => {
+      showContextMenu.value = false;
+    };
+    const pushNodeData = async () => {
+      if (nodeGraphSolver.value) {
+        nodeStore.updateSettings(nodeGraphSolver);
+      }
+      nodeStore.isDrawerOpen = false;
+    };
+    __expose({
+      loadNodeData,
+      pushNodeData
+    });
+    onMounted(async () => {
+      await nextTick();
+      window.addEventListener("click", handleClickOutside);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("click", handleClickOutside);
+    });
+    return (_ctx, _cache) => {
+      const _component_el_input = resolveComponent("el-input");
+      return dataLoaded.value && nodeGraphSolver.value ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createVNode(GenericNodeSettings, {
+          modelValue: nodeGraphSolver.value,
+          "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => nodeGraphSolver.value = $event)
+        }, {
+          default: withCtx(() => {
+            var _a, _b;
+            return [
+              createBaseVNode("div", _hoisted_2, [
+                createBaseVNode("ul", _hoisted_3, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList((_b = (_a = nodeData.value) == null ? void 0 : _a.main_input) == null ? void 0 : _b.table_schema, (col_schema, index) => {
+                    return openBlock(), createElementBlock("li", {
+                      key: col_schema.name,
+                      class: normalizeClass(getColumnClass(col_schema.name)),
+                      draggable: "true",
+                      onClick: ($event) => handleItemClick(col_schema.name),
+                      onContextmenu: withModifiers(($event) => openContextMenu(col_schema.name, $event), ["prevent"]),
+                      onDragstart: ($event) => onDragStart(col_schema.name, $event),
+                      onDragover: _cache[0] || (_cache[0] = withModifiers(() => {
+                      }, ["prevent"])),
+                      onDrop: ($event) => onDrop(index)
+                    }, toDisplayString(col_schema.name) + " (" + toDisplayString(col_schema.data_type) + ") ", 43, _hoisted_4);
+                  }), 128))
+                ])
+              ]),
+              showContextMenu.value ? (openBlock(), createBlock(ContextMenu, {
+                key: 0,
+                id: "pivot-context-menu",
+                ref_key: "contextMenuRef",
+                ref: contextMenuRef,
+                position: contextMenuPosition.value,
+                options: contextMenuOptions.value,
+                onSelect: handleContextMenuSelect,
+                onClose: closeContextMenu
+              }, null, 8, ["position", "options"])) : createCommentVNode("", true),
+              createBaseVNode("div", _hoisted_5, [
+                createVNode(SettingsSection, {
+                  title: "From Column",
+                  item: graphSolverInput.value.col_from ?? "",
+                  droppable: "true",
+                  onRemoveItem: _cache[1] || (_cache[1] = ($event) => removeColumn("from", $event)),
+                  onDragover: _cache[2] || (_cache[2] = withModifiers(() => {
+                  }, ["prevent"])),
+                  onDrop: _cache[3] || (_cache[3] = ($event) => onDropInSection("from"))
+                }, null, 8, ["item"]),
+                createVNode(SettingsSection, {
+                  title: "To Column",
+                  item: graphSolverInput.value.col_to ?? "",
+                  droppable: "true",
+                  onRemoveItem: _cache[4] || (_cache[4] = ($event) => removeColumn("to", $event)),
+                  onDragover: _cache[5] || (_cache[5] = withModifiers(() => {
+                  }, ["prevent"])),
+                  onDrop: _cache[6] || (_cache[6] = ($event) => onDropInSection("to"))
+                }, null, 8, ["item"]),
+                createBaseVNode("div", _hoisted_6, [
+                  _cache[9] || (_cache[9] = createBaseVNode("div", { class: "listbox-subtitle" }, "Select Output column name", -1)),
+                  createVNode(_component_el_input, {
+                    modelValue: graphSolverInput.value.output_column_name,
+                    "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => graphSolverInput.value.output_column_name = $event),
+                    style: { "width": "240px" },
+                    placeholder: "Please input"
+                  }, null, 8, ["modelValue"])
+                ])
+              ])
+            ];
+          }),
+          _: 1
+        }, 8, ["modelValue"])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const graphSolver_vue_vue_type_style_index_0_scoped_5a467b52_lang = "";
+const readInput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-5a467b52"]]);
+const _hoisted_1 = { ref: "el" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GraphSolver",
+  props: {
+    nodeId: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(__props) {
+    const nodeStore = useNodeStore();
+    const childComp = ref(null);
+    const props = __props;
+    const drawer = ref(false);
+    const closeOnDrawer = () => {
+      var _a;
+      drawer.value = false;
+      (_a = childComp.value) == null ? void 0 : _a.pushNodeData();
+    };
+    const openDrawer = async () => {
+      if (nodeStore.node_id === props.nodeId) {
+        nodeStore.openDrawer(closeOnDrawer);
+        return;
+      }
+      nodeStore.closeDrawer();
+      drawer.value = true;
+      const drawerOpen = nodeStore.isDrawerOpen;
+      nodeStore.isDrawerOpen = true;
+      await nextTick();
+      if (nodeStore.node_id === props.nodeId && drawerOpen) {
+        return;
+      }
+      if (childComp.value) {
+        childComp.value.loadNodeData(props.nodeId);
+        nodeStore.openDrawer(closeOnDrawer);
+      }
+    };
+    onMounted(async () => {
+      await nextTick();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(NodeButton, {
+          ref: "nodeButton",
+          "node-id": __props.nodeId,
+          "image-src": "graph_solver.png",
+          title: `${__props.nodeId}: Graph Solver`,
+          onClick: openDrawer
+        }, null, 8, ["node-id", "title"]),
+        drawer.value ? (openBlock(), createBlock(Teleport, {
+          key: 0,
+          to: "#nodesettings"
+        }, [
+          createVNode(NodeTitle, {
+            title: "Graph Solver",
+            intro: "Find groups in your data"
+          }),
+          createVNode(readInput, {
+            ref_key: "childComp",
+            ref: childComp,
+            "node-id": __props.nodeId
+          }, null, 8, ["node-id"])
+        ])) : createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

flowfile/web/static/assets/GraphSolver-17fd26db.css

@@ -0,0 +1,68 @@
+
+.context-menu[data-v-d0286fd2] {
+  position: fixed;
+  z-index: 1000;
+  border: 1px solid #ccc;
+  background-color: white;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  user-select: none;
+}
+.context-menu ul[data-v-d0286fd2] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.context-menu li[data-v-d0286fd2] {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+.context-menu li.disabled[data-v-d0286fd2] {
+  color: #ccc;
+  cursor: not-allowed;
+}
+.context-menu li[data-v-d0286fd2]:hover:not(.disabled) {
+  background-color: #f0f0f0;
+}
+
+.items-container[data-v-43acf78a] {
+  display: flex;
+  gap: 10px; /* Space between items */
+}
+.item-box[data-v-43acf78a] {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  font-size: 12px; /* Font size set to 12px */
+  position: relative;
+}
+.remove-btn[data-v-43acf78a] {
+  margin-left: 8px;
+  cursor: pointer;
+  color: #100f0f72;
+  font-weight: bold;
+}
+
+.context-menu[data-v-5a467b52] {
+  position: fixed;
+  z-index: 1000;
+  border: 1px solid #ccc;
+  background-color: white;
+  padding: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+.context-menu ul[data-v-5a467b52] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.context-menu li[data-v-5a467b52] {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+.context-menu li[data-v-5a467b52]:hover {
+  background-color: #f0f0f0;
+}