@craftile/editor 0.3.1 → 0.4.0

package/dist/ui.js

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

package/dist/utils/responsive.d.ts

@@ -0,0 +1,42 @@
+import { ResponsiveValue } from '@craftile/types';
+/**
+ * Check if a value is a responsive value object
+ */
+export declare function isResponsiveValue(value: any): value is ResponsiveValue;
+/**
+ * Get value for a specific device, falling back to _default if not set
+ * @param value - The property value (responsive or simple)
+ * @param deviceId - The device preset ID
+ * @returns The value for the device or the base value
+ */
+export declare function getDeviceValue<T = any>(value: ResponsiveValue<T> | T, deviceId: string): T;
+/**
+ * Set value for a specific device
+ * Converts simple values to responsive format if needed
+ * @param currentValue - The current property value
+ * @param deviceId - The device preset ID
+ * @param newValue - The new value to set for this device
+ * @returns Updated responsive value
+ */
+export declare function setDeviceValue<T = any>(currentValue: ResponsiveValue<T> | T, deviceId: string, newValue: T): ResponsiveValue<T>;
+/**
+ * Check if a device has a custom override value
+ * @param value - The property value
+ * @param deviceId - The device preset ID
+ * @returns true if the device has a custom value
+ */
+export declare function hasDeviceOverride(value: any, deviceId: string): boolean;
+/**
+ * Clear device override (remove device-specific value)
+ * The device will inherit from _default after this
+ * @param value - The responsive value
+ * @param deviceId - The device preset ID to clear
+ * @returns Updated responsive value without the device override
+ */
+export declare function clearDeviceOverride<T = any>(value: ResponsiveValue<T>, deviceId: string): ResponsiveValue<T>;
+/**
+ * Get list of all devices that have custom overrides
+ * @param value - The responsive value
+ * @returns Array of device IDs that have custom values
+ */
+export declare function getOverriddenDevices(value: ResponsiveValue): string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@craftile/editor",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "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/event-bus": "0.3.1",
-    "@craftile/core": "0.3.1",
-    "@craftile/messenger": "0.3.1",
-    "@craftile/types": "0.3.1"
+    "@craftile/core": "0.4.0",
+    "@craftile/event-bus": "0.4.0",
+    "@craftile/messenger": "0.4.0",
+    "@craftile/types": "0.4.0"
   },
   "devDependencies": {
     "@ark-ui/vue": "^5.24.1",

package/dist/PropertyField.vue_vue_type_script_setup_true_lang-D1Yv2X4j.js

@@ -1,245 +0,0 @@
-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
-};