kirbyuse/dist/composables.mjs

Collection of Vue Composition utilities for Kirby CMS

const globalVue = window.Vue;

function usePanel() {
  return window.panel;
}

function useApi() {
  return usePanel().api;
}

function useApp() {
  return usePanel().app;
}

function useBlock(props, emit) {
  const field = (name, fallback = null) => {
    let field2 = null;
    for (const tab of Object.values(
      props.fieldset.tabs ?? {}
    )) {
      if (tab.fields[name]) {
        field2 = tab.fields[name];
      }
    }
    return field2 ?? fallback;
  };
  const open = () => {
    emit?.("open");
  };
  const update = (content) => {
    emit?.("update", {
      ...props.content,
      ...content
    });
  };
  return {
    field,
    open,
    update
  };
}

const isKirby5 = () => window.panel.plugins.viewButtons !== void 0;
const isKirby4 = () => !isKirby5();

function useStore() {
  if (isKirby5()) {
    return new Proxy({}, {
      get() {
        throw new Error(
          "Vuex store is not available. Are you using Kirby 5? Use the `useContent` composable instead."
        );
      }
    });
  }
  const store = usePanel().app.$store;
  return store;
}

function useContent() {
  const panel = usePanel();
  const store = useStore();
  const _isKirby5 = isKirby5();
  if (_isKirby5 && !("diff" in panel.content)) {
    throw new Error(
      "This plugin requires Kirby 5.0.0-rc.1 or higher. Please update your Kirby installation."
    );
  }
  const currentContent = _isKirby5 ? computed(() => panel.content.version("changes")) : computed(() => store.getters["content/values"]());
  const contentChanges = _isKirby5 ? computed(() => panel.content.diff()) : computed(() => store.getters["content/changes"]());
  const hasChanges = _isKirby5 ? computed(() => panel.content.hasDiff()) : computed(() => store.getters["content/hasChanges"]());
  const content = _isKirby5 ? panel.content : new Proxy({}, {
    get() {
      return () => {
      };
    }
  });
  const update = async (values, save = true) => {
    if (!_isKirby5 && values) {
      for (const [key, value] of Object.entries(values)) {
        store.dispatch("content/update", [key, value]);
      }
    }
    const viewContent = content.merge(values);
    if (save) {
      await content.save(viewContent);
    }
  };
  return {
    // Properties
    content,
    // Reactive getters
    currentContent,
    contentChanges,
    hasChanges,
    // Methods
    update
  };
}

function useDialog() {
  function openTextDialog(text) {
    let result = false;
    return new Promise((resolve) => {
      const panel = usePanel();
      panel.dialog.open({
        component: "k-text-dialog",
        props: { text },
        on: {
          // Close event will always be triggered, even on submit
          close: () => {
            setTimeout(() => {
              resolve(result);
            }, 25);
          },
          submit: () => {
            result = true;
            panel.dialog.close();
          }
        }
      });
    });
  }
  function openFieldsDialog(props) {
    let result;
    return new Promise((resolve) => {
      const panel = usePanel();
      panel.dialog.open({
        component: "k-form-dialog",
        props,
        on: {
          // Close event will always be triggered, even on submit
          close: () => {
            setTimeout(() => {
              resolve(result);
            }, 25);
          },
          submit: (event) => {
            result = event;
            panel.dialog.close();
          }
        }
      });
    });
  }
  return {
    openTextDialog,
    openFieldsDialog
  };
}

function useI18n() {
  const panel = usePanel();
  function t(value) {
    if (!value || typeof value === "string") return value;
    return value[panel.translation.code] ?? Object.values(value)[0];
  }
  return {
    t
  };
}

function useSection() {
  const api = useApi();
  const load = ({ parent, name }) => api.get(`${parent}/sections/${name}`);
  return {
    load
  };
}

const LOG_LEVELS = {
  error: 0,
  warn: 1,
  log: 2,
  info: 3,
  success: 3
};
function createLogger(tag) {
  const reporter = new BrowserReporter();
  return new Proxy({}, {
    get(target, prop) {
      return (...args) => {
        reporter.log({
          level: LOG_LEVELS[prop],
          type: prop,
          tag,
          args
        });
      };
    }
  });
}
class BrowserReporter {
  defaultColor = "#7f8c8d";
  // Gray
  levelColorMap = {
    0: "#c0392b",
    // Red
    1: "#f39c12",
    // Yellow
    3: "#00BCD4"
    // Cyan
  };
  typeColorMap = {
    success: "#2ecc71"
    // Green
  };
  constructor() {
  }
  log(logEvent) {
    const consoleLogFn = resolveLogFn(logEvent.level);
    const type = logEvent.type === "log" ? "" : logEvent.type;
    const tag = logEvent.tag || "";
    const color = this.typeColorMap[logEvent.type] || this.levelColorMap[logEvent.level] || this.defaultColor;
    const style = `
background: ${color};
border-radius: 0.5em;
color: white;
font-weight: bold;
padding: 2px 0.5em;
`.trimStart();
    const badge = `%c${[tag, type].filter(Boolean).join(":")}`;
    if (typeof logEvent.args[0] === "string") {
      consoleLogFn(
        `${badge}%c ${logEvent.args[0]}`,
        style,
        // Empty string as style resets to default console style
        "",
        ...logEvent.args.slice(1)
      );
    } else {
      consoleLogFn(badge, style, ...logEvent.args);
    }
  }
}
function resolveLogFn(level) {
  if (level < 1) return console.error;
  return console.log;
}

const registeredAssets = [];
const moduleCache = /* @__PURE__ */ new Map();
async function registerPluginAssets(assets) {
  if (!Array.isArray(assets)) {
    throw new TypeError(`Expected an array, got ${typeof assets}`);
  }
  for (const asset of assets) {
    if (!registeredAssets.some((existing) => existing.filename === asset.filename)) {
      registeredAssets.push(asset);
    }
  }
}
function resolvePluginAsset(filename) {
  if (registeredAssets.length === 0) {
    throw new Error("Plugin assets not registered");
  }
  const asset = registeredAssets.find((asset2) => asset2.filename === filename);
  if (!asset) {
    throw new Error(`Plugin asset "${filename}" not found`);
  }
  return asset;
}
async function loadPluginModule(filename) {
  if (!filename.endsWith(".js")) {
    filename += ".js";
  }
  if (moduleCache.has(filename)) {
    return moduleCache.get(filename);
  }
  const asset = resolvePluginAsset(filename);
  const mod = await import(
    /* @vite-ignore */
    asset.url
  );
  moduleCache.set(filename, mod);
  return mod;
}

const computed = globalVue.computed;
const customRef = globalVue.customRef;
const defineAsyncComponent = globalVue.defineAsyncComponent;
const defineComponent = globalVue.defineComponent;
const effectScope = globalVue.effectScope;
const getCurrentInstance = globalVue.getCurrentInstance;
const getCurrentScope = globalVue.getCurrentScope;
const h = globalVue.h;
const inject = globalVue.inject;
const isProxy = globalVue.isProxy;
const isReactive = globalVue.isReactive;
const isReadonly = globalVue.isReadonly;
const isRef = globalVue.isRef;
const isShallow = globalVue.isShallow;
const markRaw = globalVue.markRaw;
const nextTick = globalVue.nextTick;
const onActivated = globalVue.onActivated;
const onBeforeMount = globalVue.onBeforeMount;
const onBeforeUnmount = globalVue.onBeforeUnmount;
const onBeforeUpdate = globalVue.onBeforeUpdate;
const onDeactivated = globalVue.onDeactivated;
const onErrorCaptured = globalVue.onErrorCaptured;
const onMounted = globalVue.onMounted;
const onRenderTracked = globalVue.onRenderTracked;
const onRenderTriggered = globalVue.onRenderTriggered;
const onScopeDispose = globalVue.onScopeDispose;
const onServerPrefetch = globalVue.onServerPrefetch;
const onUnmounted = globalVue.onUnmounted;
const onUpdated = globalVue.onUpdated;
const provide = globalVue.provide;
const proxyRefs = globalVue.proxyRefs;
const reactive = globalVue.reactive;
const readonly = globalVue.readonly;
const ref = globalVue.ref;
const shallowReactive = globalVue.shallowReactive;
const shallowReadonly = globalVue.shallowReadonly;
const shallowRef = globalVue.shallowRef;
const toRaw = globalVue.toRaw;
const toRef = globalVue.toRef;
const toRefs = globalVue.toRefs;
const triggerRef = globalVue.triggerRef;
const unref = globalVue.unref;
const useAttrs = globalVue.useAttrs;
const useCssModule = globalVue.useCssModule;
const useCssVars = globalVue.useCssVars;
const useListeners = globalVue.useListeners;
const useSlots = globalVue.useSlots;
const watch = globalVue.watch;
const watchEffect = globalVue.watchEffect;
const watchPostEffect = globalVue.watchPostEffect;
const watchSyncEffect = globalVue.watchSyncEffect;

export { registerPluginAssets as $, onServerPrefetch as A, onUnmounted as B, onUpdated as C, provide as D, proxyRefs as E, reactive as F, readonly as G, ref as H, shallowReactive as I, shallowReadonly as J, shallowRef as K, toRaw as L, toRef as M, toRefs as N, triggerRef as O, unref as P, useAttrs as Q, useCssModule as R, useCssVars as S, useListeners as T, useSlots as U, watch as V, watchEffect as W, watchPostEffect as X, watchSyncEffect as Y, globalVue as Z, createLogger as _, customRef as a, resolvePluginAsset as a0, loadPluginModule as a1, defineComponent as b, computed as c, defineAsyncComponent as d, effectScope as e, getCurrentScope as f, getCurrentInstance as g, h, inject as i, isKirby4, isKirby5, isProxy as j, isReactive as k, isReadonly as l, isRef as m, isShallow as n, markRaw as o, nextTick as p, onActivated as q, onBeforeMount as r, onBeforeUnmount as s, onBeforeUpdate as t, onDeactivated as u, useApi, useApp, useBlock, useContent, useDialog, useI18n, usePanel, useSection, useStore, onErrorCaptured as v, onMounted as w, onRenderTracked as x, onRenderTriggered as y, onScopeDispose as z };