@dcodegroup-au/page-builder 0.3.2 → 0.3.3

package/dist/page-builder.es.js

@@ -29010,35 +29010,42 @@ const T5e = { render: L5e }, E5e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */
   }
 }, Li = /* @__PURE__ */ Object.assign(z5e, {
   __name: "IconSelector",
-  setup(t) {
-    const e = ye(null), n = ye(""), r = ye([]), l = ye(!1);
-    function u() {
-      l.value = !l.value;
+  props: {
+    modelValue: {
+      type: String,
+      default: null
     }
-    V0(n, (a) => {
-      r.value = Po.filter(
-        (h) => h.name.toLowerCase().includes(a.toLowerCase())
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: e }) {
+    const r = ye(t.modelValue), l = ye(""), u = ye([]), c = ye(!1), d = e;
+    function a() {
+      c.value = !c.value;
+    }
+    V0(l, (m) => {
+      u.value = Po.filter(
+        (p) => p.name.toLowerCase().includes(m.toLowerCase())
       );
     });
-    function c(a) {
-      e.value = a, l.value = !1;
+    function h(m) {
+      r.value = m, d("update:modelValue", r.value), c.value = !1;
     }
-    function d() {
-      l.value && u();
+    function f() {
+      c.value && a();
     }
     return h0(() => {
-      r.value = Po.slice(0, 30);
-    }), (a, h) => {
-      const f = Zs("click-outside");
+      u.value = Po.slice(0, 30);
+    }), (m, p) => {
+      const w = Zs("click-outside");
       return mt((s(), i("div", H5e, [
         o("div", {
           class: "flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white hover:border-brand-300 active:border-brand-300 active:ring-4 active:ring-brand-700/[.24]",
-          onClick: u
+          onClick: a
         }, [
-          e.value ? (s(), Qe(hr, {
-            icon: e.value,
+          r.value ? (s(), Qe(hr, {
+            icon: r.value,
             "icon-classes": "w-5 h-5",
-            key: e.value
+            key: r.value
           }, null, 8, ["icon"])) : (s(), Qe($e(f0), {
             key: 1,
             class: "h-5 w-5"
@@ -29048,35 +29055,35 @@ const T5e = { render: L5e }, E5e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */
           o("div", R5e, [
             o("div", N5e, [
               mt(o("input", {
-                "onUpdate:modelValue": h[0] || (h[0] = (m) => n.value = m),
+                "onUpdate:modelValue": p[0] || (p[0] = (v) => l.value = v),
                 type: "text",
                 placeholder: "Search all 1000+ icons",
                 class: "w-full border border-gray-300 rounded px-3 py-2"
               }, null, 512), [
-                [Pt, n.value]
+                [Pt, l.value]
               ]),
-              n.value.length > 0 ? (s(), i("button", {
+              l.value.length > 0 ? (s(), i("button", {
                 key: 0,
-                onClick: h[1] || (h[1] = (m) => n.value = ""),
+                onClick: p[1] || (p[1] = (v) => l.value = ""),
                 class: "absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 cursor-pointer"
               }, " ✕ ")) : ke("", !0)
             ]),
             o("div", V5e, [
               o("p", P5e, [
-                r.value.length > 0 && n.value.length > 0 ? (s(), i("span", I5e, " Search result ")) : r.value.length < 1 && n.value.length > 0 ? (s(), i("span", D5e, " No search result ")) : n.value.length < 1 && r.value.length > 0 ? (s(), i("span", F5e, " Frequently used icons ")) : ke("", !0)
+                u.value.length > 0 && l.value.length > 0 ? (s(), i("span", I5e, " Search result ")) : u.value.length < 1 && l.value.length > 0 ? (s(), i("span", D5e, " No search result ")) : l.value.length < 1 && u.value.length > 0 ? (s(), i("span", F5e, " Frequently used icons ")) : ke("", !0)
               ]),
               o("div", U5e, [
-                (s(!0), i(We, null, st(r.value, (m) => (s(), Qe(hr, {
+                (s(!0), i(We, null, st(u.value, (v) => (s(), Qe(hr, {
                   class: "cursor-pointer rounded p-1 hover:bg-gray-100",
                   "icon-classes": "w-8 h-8",
-                  icon: m.name,
-                  key: m.name,
-                  onSelectIcon: c
+                  icon: v.name,
+                  key: v.name,
+                  onSelectIcon: h
                 }, null, 8, ["icon"]))), 128))
               ])
             ])
           ]),
-          h[2] || (h[2] = o("div", { class: "flex items-center justify-between rounded-b-xl bg-gray-100 px-4 py-3" }, [
+          p[2] || (p[2] = o("div", { class: "flex items-center justify-between rounded-b-xl bg-gray-100 px-4 py-3" }, [
             o("p", { class: "text-sm font-medium text-gray-900" }, "Not sure about the icon names?"),
             o("a", {
               href: "https://www.untitledui.com/free-icons",
@@ -29085,10 +29092,10 @@ const T5e = { render: L5e }, E5e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */
             }, " View all icons ")
           ], -1))
         ], 512), [
-          [ei, l.value]
+          [ei, c.value]
         ])
       ])), [
-        [f, d]
+        [w, f]
       ]);
     };
   }