@orchidui/dashboard 0.6.0 → 0.7.0

package/dist/OcDraggableList-BUu5SgoA-CFkaqmpK.js

@@ -0,0 +1,157 @@
+import { ref as x, openBlock as r, createBlock as f, unref as s, withCtx as d, createElementBlock as y, Fragment as K, renderList as C, normalizeClass as i, createElementVNode as t, createCommentVNode as h, renderSlot as u, toDisplayString as b, createVNode as p } from "vue";
+import { h as S, g as v, l as M, b as $ } from "./index-DyVteXE3-BhWmKQss.js";
+const B = ["onMouseleave", "onMouseover", "onClick"], _ = { class: "flex justify-evenly w-full" }, L = { class: "flex w-full" }, N = { class: "ml-4 flex w-full" }, U = { class: "flex items-center flex-wrap w-full" }, E = ["href"], W = { class: "min-w-[120px]" }, j = { class: "truncate w-[200px]" }, z = { class: "flex items-center ml-4" }, A = { class: "flex w-full" }, F = {
+  __name: "OcDraggableList",
+  props: {
+    modelValue: Array,
+    iconKey: {
+      type: String,
+      default: "icon"
+    },
+    isChildren: Boolean,
+    childrenKey: {
+      type: String,
+      default: "children"
+    },
+    isLink: Boolean,
+    linkKey: {
+      type: String,
+      default: "link"
+    },
+    isDisabled: Boolean,
+    classes: {
+      type: String,
+      default: ""
+    },
+    titleWidth: String
+  },
+  emits: {
+    "update:modelValue": [],
+    "click:element": [],
+    detectMove: null
+  },
+  setup(l, { emit: w }) {
+    const V = w, o = x([]), m = x([]), D = (a, n) => {
+      V("update:modelValue", a, n);
+    };
+    return (a, n) => (r(), f(s(S), {
+      "model-value": l.modelValue,
+      class: "grid gap-3",
+      "onUpdate:modelValue": n[0] || (n[0] = (c, e) => D(c, e)),
+      onDetectMove: n[1] || (n[1] = (c) => a.$emit("detectMove", c))
+    }, {
+      default: d(({ list: c }) => [
+        (r(!0), y(K, null, C(c, (e, k) => (r(), y("div", {
+          key: e.id,
+          class: i([
+            "group text-oc-text-500 p-4 flex flex-col w-full rounded border border-gray-200 cursor-pointer",
+            e[l.childrenKey] ? "hover:shadow bg-oc-gray-50" : l.isChildren && !o.value[e.id] ? "bg-oc-accent-1-50" : l.classes ? l.classes : "hover:shadow bg-oc-accent-1-50 hover:bg-oc-gray-50"
+          ]),
+          onMouseleave: () => {
+            m.value[e.id] = !1, o.value[e.id] = !1;
+          },
+          onMouseover: (g) => o.value[e.id] = !0,
+          onClick: (g) => a.$emit("click:element", e)
+        }, [
+          t("div", _, [
+            t("div", L, [
+              t("div", {
+                class: i(["px-2 flex items-center", !l.isDisabled && !e.isDisable ? "drag-el cursor-move" : ""])
+              }, [
+                !l.isDisabled && !e.isDisable ? (r(), f(s(v), {
+                  key: 0,
+                  name: "draggable",
+                  class: i(
+                    e[l.iconKey] ? l.isChildren && !o.value[e.id] ? "hidden" : "hidden group-hover:block" : l.isChildren && !o.value[e.id] ? "opacity-0" : "opacity-0 group-hover:opacity-100 "
+                  )
+                }, null, 8, ["class"])) : h("", !0),
+                e[l.iconKey] ? (r(), f(s(v), {
+                  key: 1,
+                  name: e[l.iconKey],
+                  class: i(
+                    !l.isDisabled && !e.isDisable && o.value[e.id] ? "group-hover:hidden" : ""
+                  )
+                }, null, 8, ["name", "class"])) : h("", !0)
+              ], 2),
+              t("div", N, [
+                t("div", U, [
+                  u(a.$slots, "title", { item: e }, () => [
+                    t("div", {
+                      class: i(["truncate", l.titleWidth])
+                    }, b(e.title), 3)
+                  ]),
+                  l.isLink && e[l.linkKey] && e.type === "link" ? (r(), y("a", {
+                    key: 0,
+                    href: e[l.linkKey],
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    class: "w-full flex items-center text-oc-text-300 mt-2"
+                  }, [
+                    p(s(M), {
+                      distance: "2",
+                      position: "bottom-start",
+                      "popper-class": "bg-oc-bg-light text-oc-text-500 p-4 rounded"
+                    }, {
+                      popper: d(() => [
+                        t("div", W, b(e[l.linkKey]), 1)
+                      ]),
+                      default: d(() => [
+                        p(s(v), {
+                          width: "12",
+                          height: "12",
+                          class: "mr-2",
+                          name: "link"
+                        })
+                      ]),
+                      _: 2
+                    }, 1024),
+                    t("span", j, b(e[l.linkKey]), 1)
+                  ], 8, E)) : h("", !0)
+                ])
+              ])
+            ]),
+            t("div", z, [
+              u(a.$slots, "before-action", { item: e }),
+              u(a.$slots, "action", { item: e }, () => [
+                p(s($), {
+                  modelValue: m.value[e.id],
+                  "onUpdate:modelValue": (g) => m.value[e.id] = g,
+                  placement: "bottom-end",
+                  class: i([
+                    "cursor-pointer",
+                    l.isChildren && !o.value[e.id] ? "opacity-0" : "opacity-0 group-hover:opacity-100"
+                  ])
+                }, {
+                  menu: d(() => [
+                    u(a.$slots, "action-item", {
+                      item: e,
+                      index: k
+                    })
+                  ]),
+                  default: d(() => [
+                    t("div", {
+                      class: i(["hover:bg-oc-gray-100 p-1 rounded", m.value[e.id] ? "bg-oc-gray-100" : ""])
+                    }, [
+                      p(s(v), { name: "dots-vertical" })
+                    ], 2)
+                  ]),
+                  _: 2
+                }, 1032, ["modelValue", "onUpdate:modelValue", "class"])
+              ])
+            ])
+          ]),
+          t("div", A, [
+            u(a.$slots, "content", {
+              item: e,
+              index: k
+            })
+          ])
+        ], 42, B))), 128))
+      ]),
+      _: 3
+    }, 8, ["model-value"]));
+  }
+};
+export {
+  F as default
+};