@craftile/editor 0.2.1 → 0.3.0

package/dist/PropertyField.vue_vue_type_script_setup_true_lang-D1Yv2X4j.js

@@ -0,0 +1,245 @@
+import { inject as C, computed as l, defineComponent as m, createElementBlock as f, openBlock as d, unref as u, normalizeClass as y, createCommentVNode as _, createElementVNode as c, renderSlot as A, ref as F, onMounted as P, watch as S, createBlock as g, resolveDynamicComponent as w, createTextVNode as B, toDisplayString as V } from "vue";
+const k = Symbol.for("craftile-editor");
+function v(e) {
+  return e && typeof e == "object" && (e.setup || e.render || e.__vccOpts || e.name || e.__v_skip);
+}
+function x(e) {
+  return typeof e == "string";
+}
+function N(e) {
+  return typeof e == "function" && !v(e);
+}
+function M(e) {
+  return "field" in e && "operator" in e;
+}
+function R(e) {
+  return "and" in e || "or" in e;
+}
+function z(e, t) {
+  const { field: r, operator: s, value: i } = e, n = t?.[r];
+  switch (s) {
+    case "equals":
+      return n === i;
+    case "not_equals":
+      return n !== i;
+    case "in":
+      return Array.isArray(i) ? i.includes(n) : !1;
+    case "not_in":
+      return Array.isArray(i) ? !i.includes(n) : !0;
+    case "contains":
+      return Array.isArray(n) || typeof n == "string" && typeof i == "string" ? n.includes(i) : !1;
+    case "greater_than": {
+      const o = Number(n), a = Number(i);
+      return !Number.isFinite(o) || !Number.isFinite(a) ? !1 : o > a;
+    }
+    case "less_than": {
+      const o = Number(n), a = Number(i);
+      return !Number.isFinite(o) || !Number.isFinite(a) ? !1 : o < a;
+    }
+    case "truthy":
+      return !!n;
+    case "falsy":
+      return !n;
+    default:
+      return !1;
+  }
+}
+function p(e, t = {}) {
+  if (Array.isArray(e))
+    return e.every((r) => p(r, t));
+  if (!e || typeof e != "object") return !0;
+  if (R(e)) {
+    if (e.and)
+      return Array.isArray(e.and) ? e.and.every((r) => p(r, t)) : !0;
+    if (e.or)
+      return Array.isArray(e.or) ? e.or.some((r) => p(r, t)) : !1;
+  }
+  return M(e) ? z(e, t) : !0;
+}
+function H() {
+  const e = C(k);
+  if (!e)
+    throw new Error("useUI must be used within a component that has access to CraftileEditor");
+  const t = (r) => {
+    e.ui.state.activeSidebarPanel = r;
+  };
+  return {
+    toaster: e.ui.toaster,
+    sidebarPanels: l(
+      () => Array.from(e.ui.state.sidebarPanels.values()).sort((r, s) => (r.order ?? 0) - (s.order ?? 0))
+    ),
+    activeSidebarPanel: l(() => e.ui.state.activeSidebarPanel),
+    registerSidebarPanel: e.ui.registerSidebarPanel.bind(e.ui),
+    removeSidebarPanel: e.ui.removeSidebarPanel.bind(e.ui),
+    setActiveSidebarPanel: t,
+    headerActions: l(
+      () => Array.from(e.ui.state.headerActions.values()).sort((r, s) => (r.order ?? 0) - (s.order ?? 0))
+    ),
+    registerHeaderAction: e.ui.registerHeaderAction.bind(e.ui),
+    removeHeaderAction: e.ui.removeHeaderAction.bind(e.ui),
+    configurationPanels: l(
+      () => Array.from(e.ui.state.configurationPanels.values()).sort((r, s) => (r.order ?? 0) - (s.order ?? 0))
+    ),
+    registerConfigurationPanel: e.ui.registerConfigurationPanel.bind(e.ui),
+    removeConfigurationPanel: e.ui.removeConfigurationPanel.bind(e.ui),
+    modals: l(() => e.ui.state.modals),
+    openModals: l(() => e.ui.state.openModals),
+    openModal: e.ui.openModal.bind(e.ui),
+    closeModal: e.ui.closeModal.bind(e.ui),
+    propertyFields: l(() => e.ui.state.propertyFields),
+    registerPropertyField: e.ui.registerPropertyField.bind(e.ui),
+    removePropertyField: e.ui.removePropertyField.bind(e.ui),
+    keyboardShortcuts: l(() => e.ui.state.keyboardShortcuts),
+    registerKeyboardShortcut: e.ui.registerKeyboardShortcut.bind(e.ui),
+    removeKeyboardShortcut: e.ui.removeKeyboardShortcut.bind(e.ui)
+  };
+}
+const E = ["type", "disabled"], q = {
+  key: 0,
+  class: "animate-spin h-4 w-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, L = /* @__PURE__ */ m({
+  __name: "Button",
+  props: {
+    variant: { default: "default" },
+    size: { default: "md" },
+    type: { default: "button" },
+    disabled: { type: Boolean, default: !1 },
+    fullWidth: { type: Boolean, default: !1 },
+    square: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = {
+      default: "bg-white text-gray-900 hover:bg-gray-50 border border-gray-200",
+      primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
+      accent: "bg-accent text-accent-foreground hover:bg-accent/90",
+      sutble: "bg-accent-foreground text-accent",
+      destructive: "bg-red-600 text-white hover:bg-red-700"
+    }, r = {
+      sm: "h-6 px-3 text-xs",
+      md: "h-8 px-4",
+      lg: "h-10 px-6 text-base"
+    }, s = {
+      sm: "w-6 h-6 text-xs p-0",
+      md: "w-8 h-8 p-0",
+      lg: "w-10 h-10 text-base p-0"
+    }, i = e, n = l(() => i.disabled || i.loading);
+    return (o, a) => (d(), f("button", {
+      class: y(["inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none cursor-pointer relative", [
+        t[o.variant],
+        i.square ? s[o.size] : r[o.size],
+        o.fullWidth && "w-full"
+      ]]),
+      type: o.type,
+      disabled: u(n)
+    }, [
+      o.loading ? (d(), f("svg", q, [...a[0] || (a[0] = [
+        c("circle", {
+          class: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          "stroke-width": "4"
+        }, null, -1),
+        c("path", {
+          class: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }, null, -1)
+      ])])) : _("", !0),
+      c("span", {
+        class: y(["inline-flex items-center gap-2", { invisible: o.loading }])
+      }, [
+        A(o.$slots, "default")
+      ], 2)
+    ], 10, E));
+  }
+}), I = /* @__PURE__ */ m({
+  __name: "PropertyFieldRenderWrapper",
+  props: {
+    renderFn: { type: Function },
+    field: {},
+    value: {},
+    onChange: { type: Function },
+    onBlur: { type: Function },
+    class: {}
+  },
+  setup(e) {
+    const t = e, r = F(), s = () => {
+      if (r.value && t.renderFn) {
+        r.value.innerHTML = "";
+        const i = t.renderFn({
+          field: t.field,
+          value: t.value,
+          onChange: t.onChange,
+          onBlur: t.onBlur
+        });
+        r.value.appendChild(i);
+      }
+    };
+    return P(() => {
+      s();
+    }), S(
+      () => t.value,
+      () => {
+        s();
+      }
+    ), (i, n) => (d(), f("div", {
+      ref_key: "containerRef",
+      ref: r,
+      class: y(t.class)
+    }, null, 2));
+  }
+}), $ = {
+  key: 2,
+  class: "mb-4 p-3 bg-red-50 border border-red-200 rounded-md"
+}, j = { class: "text-sm text-red-600" }, D = { class: "font-mono" }, T = /* @__PURE__ */ m({
+  __name: "PropertyField",
+  props: {
+    field: {},
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const r = e, s = t, { propertyFields: i } = H(), n = l(() => i.value.get(r.field.type)?.render), o = (a) => {
+      s("update:modelValue", a);
+    };
+    return (a, b) => {
+      const h = I;
+      return d(), f("div", null, [
+        u(v)(u(n)) || u(x)(u(n)) ? (d(), g(w(u(n)), {
+          key: 0,
+          field: a.field,
+          "model-value": a.modelValue,
+          "onUpdate:modelValue": o
+        }, null, 8, ["field", "model-value"])) : u(N)(u(n)) ? (d(), g(h, {
+          key: 1,
+          "render-fn": u(n),
+          field: a.field,
+          value: a.modelValue,
+          "on-change": o
+        }, null, 8, ["render-fn", "field", "value"])) : (d(), f("div", $, [
+          c("p", j, [
+            b[0] || (b[0] = B(" Unknown field type: ", -1)),
+            c("code", D, V(a.field.type), 1)
+          ])
+        ]))
+      ]);
+    };
+  }
+});
+export {
+  k as C,
+  L as _,
+  T as a,
+  x as b,
+  N as c,
+  p as e,
+  v as i,
+  H as u
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './app';
 export * from './types';
+export { evaluateVisibilityRule } from './utils';