npm - vue-seat-designer - Versions diffs - 1.0.0 - Mend

vue-seat-designer 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/style.css +1 -0
package/dist/vue-seat-designer.es.js +333 -0
package/dist/vue-seat-designer.umd.js +1 -0
package/package.json +46 -0

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .designer-container[data-v-33b6094b]{display:flex;height:100vh;width:100vw}.toolbar[data-v-33b6094b]{width:200px;background-color:#fff;border-right:1px solid #e8e8e8;padding:20px;overflow-y:auto}.toolbar h3[data-v-33b6094b]{margin-bottom:20px;color:#333}.tool-item[data-v-33b6094b]{display:flex;align-items:center;padding:10px;margin-bottom:10px;background-color:#f5f5f5;border-radius:4px;cursor:move;transition:all .3s ease}.tool-item[data-v-33b6094b]:hover{background-color:#e6f7ff}.tool-icon[data-v-33b6094b]{width:30px;height:30px;margin-right:10px;background-color:#1890ff;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff}.canvas-area[data-v-33b6094b]{flex:1;background-color:#fafafa;position:relative;overflow:hidden}.canvas[data-v-33b6094b]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border:2px dashed #d9d9d9;min-width:600px;min-height:400px}.canvas-item[data-v-33b6094b]{position:absolute;cursor:move;border:2px solid transparent;transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:4px}.canvas-item[data-v-33b6094b]:hover{border-color:#1890ff}.canvas-item.selected[data-v-33b6094b]{border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33}.config-panel[data-v-33b6094b]{width:300px;background-color:#fff;border-left:1px solid #e8e8e8;padding:20px;overflow-y:auto}.config-section[data-v-33b6094b]{margin-bottom:30px}.config-section h3[data-v-33b6094b]{margin-bottom:15px;color:#333;font-size:14px}.config-item[data-v-33b6094b]{margin-bottom:15px}.config-label[data-v-33b6094b]{display:block;margin-bottom:5px;font-size:12px;color:#666}.config-input[data-v-33b6094b]{width:100%;padding:8px;border:1px solid #d9d9d9;border-radius:4px;font-size:14px}.config-checkbox[data-v-33b6094b]{margin-right:5px}.color-picker[data-v-33b6094b]{display:flex;align-items:center}.color-preview[data-v-33b6094b]{width:30px;height:30px;margin-right:10px;border:1px solid #d9d9d9;border-radius:4px}.canvas-size[data-v-33b6094b]{display:flex;gap:10px}.canvas-size input[data-v-33b6094b]{flex:1}.action-buttons[data-v-33b6094b]{display:flex;gap:10px;margin-top:20px}.btn[data-v-33b6094b]{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px}.btn-primary[data-v-33b6094b]{background-color:#1890ff;color:#fff}.btn-default[data-v-33b6094b]{background-color:#f5f5f5;color:#333}.btn[data-v-33b6094b]:disabled{opacity:.6;cursor:not-allowed}.preview-container[data-v-b969ea97]{display:flex;align-items:center;justify-content:center;min-height:100vh;background-color:#f0f2f5;padding:20px}.preview-content[data-v-b969ea97]{display:flex;flex-direction:column;align-items:center;max-width:100%}.preview-title[data-v-b969ea97]{margin-bottom:20px;font-size:18px;color:#333}.preview-canvas[data-v-b969ea97]{background-color:#fff;border:1px solid #e8e8e8;box-shadow:0 2px 8px #00000026;position:relative;overflow:hidden;margin:0 auto}.preview-item[data-v-b969ea97]{position:absolute;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:4px;transition:all .3s ease;border:2px solid transparent}.preview-item[data-v-b969ea97]:hover{border-color:#1890ff80}.preview-item.selected[data-v-b969ea97]{border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33}@media (max-width: 768px){.preview-canvas[data-v-b969ea97]{max-width:100%}}

package/dist/vue-seat-designer.es.js ADDED Viewed

@@ -0,0 +1,333 @@
+import { defineComponent as B, ref as _, watch as z, openBlock as h, createElementBlock as g, createElementVNode as o, Fragment as T, renderList as M, toDisplayString as $, normalizeStyle as C, unref as i, withModifiers as F, normalizeClass as X, withDirectives as w, vModelText as D, vModelCheckbox as H, createTextVNode as W, createCommentVNode as j } from "vue";
+function A() {
+  return Math.random().toString(36).substr(2, 9);
+}
+function G(d, p) {
+  const c = p.getBoundingClientRect();
+  return {
+    x: d.clientX - c.left,
+    y: d.clientY - c.top
+  };
+}
+function V(d, p, c) {
+  return {
+    ...d,
+    x: Math.max(0, Math.min(d.x, p - d.width)),
+    y: Math.max(0, Math.min(d.y, c - d.height))
+  };
+}
+const J = { class: "designer-container" }, K = { class: "toolbar" }, Q = ["onDragstart"], Z = { class: "tool-icon" }, ee = { class: "canvas-area" }, te = ["onClick", "onMousedown"], oe = { class: "config-panel" }, ne = { class: "config-section" }, le = { class: "canvas-size" }, se = { class: "config-item" }, ie = { class: "config-item" }, ae = {
+  key: 0,
+  class: "config-section"
+}, de = { class: "config-item" }, ce = { class: "config-label" }, re = { class: "config-item" }, ue = { class: "color-picker" }, pe = { class: "config-item" }, ve = { class: "color-picker" }, fe = { class: "action-buttons" }, he = ["disabled"], ge = /* @__PURE__ */ B({
+  __name: "SeatDesigner",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue", "save"],
+  setup(d, { emit: p }) {
+    const c = d, m = p, n = _({
+      width: 800,
+      height: 600,
+      items: []
+    }), l = _(null), b = _(!1), x = _({ x: 0, y: 0 }), k = [
+      { type: "seat", name: "座位", icon: "S" },
+      { type: "bookshelf", name: "书架", icon: "B" },
+      { type: "toilet", name: "卫生间", icon: "T" }
+    ], u = {
+      seat: { width: 40, height: 40, defaultColor: "#52c41a", selectedColor: "#1890ff" },
+      bookshelf: { width: 80, height: 120, defaultColor: "#faad14", selectedColor: "#1890ff" },
+      toilet: { width: 60, height: 60, defaultColor: "#f5222d", selectedColor: "#1890ff" }
+    };
+    z(() => c.modelValue, (s) => {
+      s && (n.value = { ...s });
+    }, { deep: !0 }), z(n, (s) => {
+      m("update:modelValue", { ...s });
+    }, { deep: !0 });
+    function f(s, e) {
+      s.dataTransfer && s.dataTransfer.setData("text/plain", e);
+    }
+    function a(s) {
+      if (s.preventDefault(), !s.dataTransfer)
+        return;
+      const e = s.dataTransfer.getData("text/plain");
+      if (!e)
+        return;
+      const t = s.currentTarget, v = G(s, t), r = u[e], y = {
+        id: A(),
+        type: e,
+        x: v.x - r.width / 2,
+        y: v.y - r.height / 2,
+        width: r.width,
+        height: r.height,
+        selectable: !0,
+        defaultColor: r.defaultColor,
+        selectedColor: r.selectedColor
+      }, I = V(y, n.value.width, n.value.height);
+      n.value.items.push(I);
+    }
+    function E(s) {
+      l.value = s;
+    }
+    function N(s, e) {
+      s.stopPropagation(), b.value = !0, l.value = e;
+      const t = s.currentTarget.getBoundingClientRect();
+      x.value = {
+        x: s.clientX - t.left,
+        y: s.clientY - t.top
+      }, document.addEventListener("mousemove", P), document.addEventListener("mouseup", L);
+    }
+    function P(s) {
+      if (!b.value || !l.value)
+        return;
+      const e = document.querySelector(".canvas");
+      if (!e)
+        return;
+      const t = e.getBoundingClientRect();
+      let v = s.clientX - t.left - x.value.x, r = s.clientY - t.top - x.value.y;
+      const y = {
+        ...l.value,
+        x: v,
+        y: r
+      }, I = V(y, n.value.width, n.value.height);
+      l.value.x = I.x, l.value.y = I.y;
+    }
+    function L() {
+      b.value = !1, document.removeEventListener("mousemove", P), document.removeEventListener("mouseup", L);
+    }
+    function U() {
+      n.value.width < 200 && (n.value.width = 200), n.value.height < 200 && (n.value.height = 200), n.value.items = n.value.items.map(
+        (s) => V(s, n.value.width, n.value.height)
+      );
+    }
+    function S() {
+    }
+    function O() {
+      l.value && (n.value.items = n.value.items.filter(
+        (s) => {
+          var e;
+          return s.id !== ((e = l.value) == null ? void 0 : e.id);
+        }
+      ), l.value = null);
+    }
+    function R() {
+      m("save", { ...n.value });
+    }
+    function q(s) {
+      var e;
+      return ((e = k.find((t) => t.type === s)) == null ? void 0 : e.icon) || "";
+    }
+    return (s, e) => (h(), g("div", J, [
+      o("div", K, [
+        e[7] || (e[7] = o("h3", null, "工具栏", -1)),
+        (h(), g(T, null, M(k, (t) => o("div", {
+          key: t.type,
+          class: "tool-item",
+          draggable: "true",
+          onDragstart: (v) => f(v, t.type)
+        }, [
+          o("div", Z, $(t.icon), 1),
+          o("span", null, $(t.name), 1)
+        ], 40, Q)), 64))
+      ]),
+      o("div", ee, [
+        o("div", {
+          class: "canvas",
+          style: C({ width: `${i(n).width}px`, height: `${i(n).height}px` }),
+          onDragover: e[0] || (e[0] = F(() => {
+          }, ["prevent"])),
+          onDrop: e[1] || (e[1] = (t) => a(t))
+        }, [
+          (h(!0), g(T, null, M(i(n).items, (t) => {
+            var v, r;
+            return h(), g("div", {
+              key: t.id,
+              class: X(["canvas-item", { selected: ((v = i(l)) == null ? void 0 : v.id) === t.id, [t.type]: !0 }]),
+              style: C({
+                left: `${t.x}px`,
+                top: `${t.y}px`,
+                width: `${t.width}px`,
+                height: `${t.height}px`,
+                backgroundColor: ((r = i(l)) == null ? void 0 : r.id) === t.id ? t.selectedColor : t.defaultColor
+              }),
+              onClick: (y) => E(t),
+              onMousedown: (y) => N(y, t)
+            }, $(q(t.type)), 47, te);
+          }), 128))
+        ], 36)
+      ]),
+      o("div", oe, [
+        o("div", ne, [
+          e[10] || (e[10] = o("h3", null, "画布设置", -1)),
+          o("div", le, [
+            o("div", se, [
+              e[8] || (e[8] = o("label", { class: "config-label" }, "宽度", -1)),
+              w(o("input", {
+                type: "number",
+                class: "config-input",
+                "onUpdate:modelValue": e[2] || (e[2] = (t) => i(n).width = t),
+                onChange: U
+              }, null, 544), [
+                [
+                  D,
+                  i(n).width,
+                  void 0,
+                  { number: !0 }
+                ]
+              ])
+            ]),
+            o("div", ie, [
+              e[9] || (e[9] = o("label", { class: "config-label" }, "高度", -1)),
+              w(o("input", {
+                type: "number",
+                class: "config-input",
+                "onUpdate:modelValue": e[3] || (e[3] = (t) => i(n).height = t),
+                onChange: U
+              }, null, 544), [
+                [
+                  D,
+                  i(n).height,
+                  void 0,
+                  { number: !0 }
+                ]
+              ])
+            ])
+          ])
+        ]),
+        i(l) ? (h(), g("div", ae, [
+          e[14] || (e[14] = o("h3", null, "元素配置", -1)),
+          o("div", de, [
+            o("label", ce, [
+              w(o("input", {
+                type: "checkbox",
+                class: "config-checkbox",
+                "onUpdate:modelValue": e[4] || (e[4] = (t) => i(l).selectable = t),
+                onChange: S
+              }, null, 544), [
+                [H, i(l).selectable]
+              ]),
+              e[11] || (e[11] = W(" 可选择 ", -1))
+            ])
+          ]),
+          o("div", re, [
+            e[12] || (e[12] = o("label", { class: "config-label" }, "默认颜色", -1)),
+            o("div", ue, [
+              o("div", {
+                class: "color-preview",
+                style: C({ backgroundColor: i(l).defaultColor })
+              }, null, 4),
+              w(o("input", {
+                type: "color",
+                class: "config-input",
+                "onUpdate:modelValue": e[5] || (e[5] = (t) => i(l).defaultColor = t),
+                onChange: S
+              }, null, 544), [
+                [D, i(l).defaultColor]
+              ])
+            ])
+          ]),
+          o("div", pe, [
+            e[13] || (e[13] = o("label", { class: "config-label" }, "选择后颜色", -1)),
+            o("div", ve, [
+              o("div", {
+                class: "color-preview",
+                style: C({ backgroundColor: i(l).selectedColor })
+              }, null, 4),
+              w(o("input", {
+                type: "color",
+                class: "config-input",
+                "onUpdate:modelValue": e[6] || (e[6] = (t) => i(l).selectedColor = t),
+                onChange: S
+              }, null, 544), [
+                [D, i(l).selectedColor]
+              ])
+            ])
+          ])
+        ])) : j("", !0),
+        o("div", fe, [
+          o("button", {
+            class: "btn btn-primary",
+            onClick: R
+          }, "保存"),
+          o("button", {
+            class: "btn btn-default",
+            onClick: O,
+            disabled: !i(l)
+          }, " 删除选中 ", 8, he)
+        ])
+      ])
+    ]));
+  }
+});
+const Y = (d, p) => {
+  const c = d.__vccOpts || d;
+  for (const [m, n] of p)
+    c[m] = n;
+  return c;
+}, me = /* @__PURE__ */ Y(ge, [["__scopeId", "data-v-33b6094b"]]), ye = { class: "preview-container" }, _e = { class: "preview-content" }, Ce = ["onClick"], be = /* @__PURE__ */ B({
+  __name: "SeatPreview",
+  props: {
+    modelValue: {},
+    selectedItems: {}
+  },
+  emits: ["update:selectedItems", "itemClick"],
+  setup(d, { emit: p }) {
+    const c = d, m = p, n = _({
+      width: 800,
+      height: 600,
+      items: []
+    }), l = _(c.selectedItems || []), b = [
+      { type: "seat", name: "座位", icon: "S" },
+      { type: "bookshelf", name: "书架", icon: "B" },
+      { type: "toilet", name: "卫生间", icon: "T" }
+    ];
+    c.modelValue && (n.value = { ...c.modelValue }), c.selectedItems && (l.value = [...c.selectedItems]);
+    function x(u) {
+      if (!u.selectable)
+        return;
+      l.value.indexOf(u.id) > -1 ? l.value = l.value.filter((a) => a !== u.id) : l.value.push(u.id), m("update:selectedItems", [...l.value]), m("itemClick", u);
+    }
+    function k(u) {
+      var f;
+      return ((f = b.find((a) => a.type === u)) == null ? void 0 : f.icon) || "";
+    }
+    return (u, f) => (h(), g("div", ye, [
+      o("div", _e, [
+        f[0] || (f[0] = o("h2", { class: "preview-title" }, "预览", -1)),
+        o("div", {
+          class: "preview-canvas",
+          style: C({
+            width: `${i(n).width}px`,
+            height: `${i(n).height}px`,
+            maxWidth: "100%",
+            maxHeight: "80vh"
+          })
+        }, [
+          (h(!0), g(T, null, M(i(n).items, (a) => (h(), g("div", {
+            key: a.id,
+            class: X(["preview-item", { [a.type]: !0, selected: i(l).includes(a.id) }]),
+            style: C({
+              left: `${a.x}px`,
+              top: `${a.y}px`,
+              width: `${a.width}px`,
+              height: `${a.height}px`,
+              backgroundColor: i(l).includes(a.id) ? a.selectedColor : a.defaultColor,
+              cursor: a.selectable ? "pointer" : "default"
+            }),
+            onClick: (E) => x(a)
+          }, $(k(a.type)), 15, Ce))), 128))
+        ], 4)
+      ])
+    ]));
+  }
+});
+const xe = /* @__PURE__ */ Y(be, [["__scopeId", "data-v-b969ea97"]]), ke = B({
+  install: (d) => {
+    d.component("SeatDesigner", me), d.component("SeatPreview", xe);
+  }
+});
+export {
+  me as SeatDesigner,
+  xe as SeatPreview,
+  ke as default
+};

package/dist/vue-seat-designer.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,46 @@
+{
+  "name": "vue-seat-designer",
+  "version": "1.0.0",
+  "description": "A Vue component for designing seat layouts with drag-and-drop functionality",
+  "main": "dist/vue-seat-designer.umd.js",
+  "module": "dist/vue-seat-designer.es.js",
+  "unpkg": "dist/vue-seat-designer.umd.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --mode lib",
+    "build:types": "tsc --emitDeclarationOnly",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.2.1",
+    "vue-demi": "^0.14.7"
+  },
+  "peerDependencies": {
+    "vue": ">=2.6.12 || >=3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "eslint": "^8.46.0",
+    "eslint-plugin-vue": "^9.16.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.3",
+    "vue": "^3.3.4"
+  },
+  "keywords": [
+    "vue",
+    "seat",
+    "designer",
+    "drag-and-drop",
+    "layout"
+  ],
+  "author": "",
+  "license": "MIT"
+}