@craftile/editor 0.2.1 → 0.3.1

package/dist/ui.js

@@ -1,4 +1,4 @@
-import { _ as t, a } from "./PropertyField.vue_vue_type_script_setup_true_lang-DgXjnxE2.js";
+import { _ as t, a } from "./PropertyField.vue_vue_type_script_setup_true_lang-D1Yv2X4j.js";
 export {
   t as Button,
   a as PropertyField

package/dist/utils.d.ts

@@ -1,7 +1,34 @@
 import { Component } from 'vue';
+import { VisibilityRule, BlockProperties } from '@craftile/types';
 /**
  * Check if a render value is a Vue component
  */
 export declare function isVueComponent(render: any): render is Component;
 export declare function isComponentString(render: any): render is string;
 export declare function isHtmlRenderFunction(render: any): render is (context: any) => HTMLElement;
+/**
+ * Evaluate a JSON visibility rule against a context object (block properties).
+ *
+ * @param rule - Rule object, logic group, or array (array === implicit AND)
+ * @param context - Block properties object
+ * @returns boolean indicating whether the field should be visible
+ *
+ * @example
+ * ```ts
+ * // Simple condition
+ * evaluateVisibilityRule(
+ *   { field: 'layout', operator: 'equals', value: 'grid' },
+ *   { layout: 'grid' }
+ * ) // true
+ *
+ * // Logical AND
+ * evaluateVisibilityRule(
+ *   { and: [
+ *     { field: 'type', operator: 'equals', value: 'image' },
+ *     { field: 'status', operator: 'equals', value: 'published' }
+ *   ]},
+ *   { type: 'image', status: 'published' }
+ * ) // true
+ * ```
+ */
+export declare function evaluateVisibilityRule(rule: VisibilityRule | VisibilityRule[], context?: BlockProperties): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@craftile/editor",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Vue.js-based editor UI components for craftile blocks engine",
   "keywords": [
     "craftile",
@@ -38,10 +38,10 @@
   "dependencies": {
     "vue": "^3.5.17",
     "vue-draggable-plus": "^0.6.0",
-    "@craftile/core": "0.2.1",
-    "@craftile/event-bus": "0.2.1",
-    "@craftile/messenger": "0.2.1",
-    "@craftile/types": "0.2.1"
+    "@craftile/event-bus": "0.3.1",
+    "@craftile/core": "0.3.1",
+    "@craftile/messenger": "0.3.1",
+    "@craftile/types": "0.3.1"
   },
   "devDependencies": {
     "@ark-ui/vue": "^5.24.1",

package/dist/PropertyField.vue_vue_type_script_setup_true_lang-DgXjnxE2.js

@@ -1,197 +0,0 @@
-import { inject as h, computed as a, defineComponent as m, createElementBlock as p, openBlock as u, unref as s, normalizeClass as f, createCommentVNode as C, createElementVNode as c, renderSlot as P, ref as _, onMounted as F, watch as S, createBlock as y, resolveDynamicComponent as w, createTextVNode as x, toDisplayString as k } from "vue";
-const B = Symbol.for("craftile-editor");
-function g(e) {
-  return e && typeof e == "object" && (e.setup || e.render || e.__vccOpts || e.name || e.__v_skip);
-}
-function A(e) {
-  return typeof e == "string";
-}
-function V(e) {
-  return typeof e == "function" && !g(e);
-}
-function M() {
-  const e = h(B);
-  if (!e)
-    throw new Error("useUI must be used within a component that has access to CraftileEditor");
-  const r = (t) => {
-    e.ui.state.activeSidebarPanel = t;
-  };
-  return {
-    toaster: e.ui.toaster,
-    sidebarPanels: a(
-      () => Array.from(e.ui.state.sidebarPanels.values()).sort((t, o) => (t.order ?? 0) - (o.order ?? 0))
-    ),
-    activeSidebarPanel: a(() => e.ui.state.activeSidebarPanel),
-    registerSidebarPanel: e.ui.registerSidebarPanel.bind(e.ui),
-    removeSidebarPanel: e.ui.removeSidebarPanel.bind(e.ui),
-    setActiveSidebarPanel: r,
-    headerActions: a(
-      () => Array.from(e.ui.state.headerActions.values()).sort((t, o) => (t.order ?? 0) - (o.order ?? 0))
-    ),
-    registerHeaderAction: e.ui.registerHeaderAction.bind(e.ui),
-    removeHeaderAction: e.ui.removeHeaderAction.bind(e.ui),
-    configurationPanels: a(
-      () => Array.from(e.ui.state.configurationPanels.values()).sort((t, o) => (t.order ?? 0) - (o.order ?? 0))
-    ),
-    registerConfigurationPanel: e.ui.registerConfigurationPanel.bind(e.ui),
-    removeConfigurationPanel: e.ui.removeConfigurationPanel.bind(e.ui),
-    modals: a(() => e.ui.state.modals),
-    openModals: a(() => e.ui.state.openModals),
-    openModal: e.ui.openModal.bind(e.ui),
-    closeModal: e.ui.closeModal.bind(e.ui),
-    propertyFields: a(() => e.ui.state.propertyFields),
-    registerPropertyField: e.ui.registerPropertyField.bind(e.ui),
-    removePropertyField: e.ui.removePropertyField.bind(e.ui),
-    keyboardShortcuts: a(() => e.ui.state.keyboardShortcuts),
-    registerKeyboardShortcut: e.ui.registerKeyboardShortcut.bind(e.ui),
-    removeKeyboardShortcut: e.ui.removeKeyboardShortcut.bind(e.ui)
-  };
-}
-const z = ["type", "disabled"], R = {
-  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"
-}, K = /* @__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 r = {
-      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"
-    }, t = {
-      sm: "h-6 px-3 text-xs",
-      md: "h-8 px-4",
-      lg: "h-10 px-6 text-base"
-    }, o = {
-      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"
-    }, l = e, d = a(() => l.disabled || l.loading);
-    return (n, i) => (u(), p("button", {
-      class: f(["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", [
-        r[n.variant],
-        l.square ? o[n.size] : t[n.size],
-        n.fullWidth && "w-full"
-      ]]),
-      type: n.type,
-      disabled: s(d)
-    }, [
-      n.loading ? (u(), p("svg", R, [...i[0] || (i[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)
-      ])])) : C("", !0),
-      c("span", {
-        class: f(["inline-flex items-center gap-2", { invisible: n.loading }])
-      }, [
-        P(n.$slots, "default")
-      ], 2)
-    ], 10, z));
-  }
-}), H = /* @__PURE__ */ m({
-  __name: "PropertyFieldRenderWrapper",
-  props: {
-    renderFn: { type: Function },
-    field: {},
-    value: {},
-    onChange: { type: Function },
-    onBlur: { type: Function },
-    class: {}
-  },
-  setup(e) {
-    const r = e, t = _(), o = () => {
-      if (t.value && r.renderFn) {
-        t.value.innerHTML = "";
-        const l = r.renderFn({
-          field: r.field,
-          value: r.value,
-          onChange: r.onChange,
-          onBlur: r.onBlur
-        });
-        t.value.appendChild(l);
-      }
-    };
-    return F(() => {
-      o();
-    }), S(
-      () => r.value,
-      () => {
-        o();
-      }
-    ), (l, d) => (u(), p("div", {
-      ref_key: "containerRef",
-      ref: t,
-      class: f(r.class)
-    }, null, 2));
-  }
-}), E = {
-  key: 2,
-  class: "mb-4 p-3 bg-red-50 border border-red-200 rounded-md"
-}, I = { class: "text-sm text-red-600" }, $ = { class: "font-mono" }, T = /* @__PURE__ */ m({
-  __name: "PropertyField",
-  props: {
-    field: {},
-    modelValue: {}
-  },
-  emits: ["update:modelValue"],
-  setup(e, { emit: r }) {
-    const t = e, o = r, { propertyFields: l } = M(), d = a(() => l.value.get(t.field.type)?.render), n = (i) => {
-      o("update:modelValue", i);
-    };
-    return (i, b) => {
-      const v = H;
-      return u(), p("div", null, [
-        s(g)(s(d)) || s(A)(s(d)) ? (u(), y(w(s(d)), {
-          key: 0,
-          field: i.field,
-          "model-value": i.modelValue,
-          "onUpdate:modelValue": n
-        }, null, 8, ["field", "model-value"])) : s(V)(s(d)) ? (u(), y(v, {
-          key: 1,
-          "render-fn": s(d),
-          field: i.field,
-          value: i.modelValue,
-          "on-change": n
-        }, null, 8, ["render-fn", "field", "value"])) : (u(), p("div", E, [
-          c("p", I, [
-            b[0] || (b[0] = x(" Unknown field type: ", -1)),
-            c("code", $, k(i.field.type), 1)
-          ])
-        ]))
-      ]);
-    };
-  }
-});
-export {
-  B as C,
-  K as _,
-  T as a,
-  A as b,
-  V as c,
-  g as i,
-  M as u
-};