@sfxcode/formkit-openvue 0.0.0-stage → 0.9.0

package/dist/plugins/autoAnimate.d.ts

@@ -0,0 +1,9 @@
+import type { AutoAnimateOptions } from '@formkit/auto-animate';
+import type { FormKitNode } from '@formkit/core';
+/** Sections to animate, per input type. `global` applies to every input. */
+export type AutoAnimateTargets = Record<string, string[]>;
+/**
+ * Drop-in replacement for `createAutoAnimatePlugin` from `@formkit/addons` with the same
+ * arguments, that does not stack animations on an element after inputs are added to it.
+ */
+export declare function createAutoAnimatePlugin(options?: Partial<AutoAnimateOptions>, targets?: AutoAnimateTargets): (node: FormKitNode) => void;

package/dist/plugins/autoAnimate.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutoAnimatePlugin = createAutoAnimatePlugin;
+var _autoAnimate = _interopRequireDefault(require("@formkit/auto-animate"));
+var _core = require("@formkit/core");
+var _inputs = require("@formkit/inputs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_KEY = "true";
+const optionsByKey = /* @__PURE__ */new Map();
+const attached = /* @__PURE__ */new WeakSet();
+const pendingIds = /* @__PURE__ */new Set();
+let observer = null;
+let attachTimer;
+function attachNewTargets() {
+  if (typeof document === "undefined") return;
+  document.querySelectorAll("[data-auto-animate]").forEach(target => {
+    if (attached.has(target)) return;
+    attached.add(target);
+    (0, _autoAnimate.default)(target, optionsByKey.get(target.getAttribute("data-auto-animate") ?? "") ?? {});
+  });
+}
+function checkPendingIds() {
+  if (typeof document === "undefined") return;
+  pendingIds.forEach(id => {
+    if (!document.getElementById(id)) return;
+    pendingIds.delete(id);
+    clearTimeout(attachTimer);
+    attachTimer = setTimeout(attachNewTargets, 250);
+  });
+}
+function observeUntilRendered() {
+  if (observer || typeof document === "undefined") return;
+  checkPendingIds();
+  if (!pendingIds.size) return;
+  observer = new MutationObserver(() => {
+    checkPendingIds();
+    if (!pendingIds.size) {
+      observer?.disconnect();
+      observer = null;
+    }
+  });
+  observer.observe(document, {
+    childList: true,
+    subtree: true
+  });
+}
+function createAutoAnimatePlugin(options = {}, targets = {}) {
+  optionsByKey.set(DEFAULT_KEY, options);
+  return node => {
+    node.on("created", () => {
+      if (typeof node.props.definition?.schema !== "function") return;
+      const typeTargets = targets[node.props.type] ?? [];
+      const originalSchema = node.props.definition.schema;
+      node.props.definition.schema = extensions => {
+        const schema = originalSchema(extensions);
+        const finalSchema = Array.isArray(schema) ? schema[0] : schema;
+        let marked = false;
+        (0, _inputs.eachSection)(finalSchema, section => {
+          if (!(0, _core.isDOM)(section)) return;
+          let key;
+          const meta = section.meta;
+          if (meta?.autoAnimate) {
+            key = DEFAULT_KEY;
+            if (typeof meta.autoAnimate === "object") {
+              key = `${node.props.id}-${meta.section ?? "section"}`;
+              optionsByKey.set(key, {
+                ...options,
+                ...meta.autoAnimate
+              });
+            }
+          } else {
+            const sectionName = meta?.section;
+            if (typeof sectionName === "string" && (targets.global?.includes(sectionName) || typeTargets.includes(sectionName))) key = DEFAULT_KEY;
+          }
+          if (key === void 0) return;
+          section.attrs = {
+            ...section.attrs,
+            "data-auto-animate": key
+          };
+          marked = true;
+        });
+        if (marked && node.props.id && typeof window !== "undefined") {
+          pendingIds.add(node.props.id);
+          observeUntilRendered();
+        }
+        return finalSchema;
+      };
+    });
+  };
+}

package/dist/plugins/autoAnimate.mjs

@@ -0,0 +1,87 @@
+import autoAnimate from "@formkit/auto-animate";
+import { isDOM } from "@formkit/core";
+import { eachSection } from "@formkit/inputs";
+const DEFAULT_KEY = "true";
+const optionsByKey = /* @__PURE__ */ new Map();
+const attached = /* @__PURE__ */ new WeakSet();
+const pendingIds = /* @__PURE__ */ new Set();
+let observer = null;
+let attachTimer;
+function attachNewTargets() {
+  if (typeof document === "undefined")
+    return;
+  document.querySelectorAll("[data-auto-animate]").forEach((target) => {
+    if (attached.has(target))
+      return;
+    attached.add(target);
+    autoAnimate(target, optionsByKey.get(target.getAttribute("data-auto-animate") ?? "") ?? {});
+  });
+}
+function checkPendingIds() {
+  if (typeof document === "undefined")
+    return;
+  pendingIds.forEach((id) => {
+    if (!document.getElementById(id))
+      return;
+    pendingIds.delete(id);
+    clearTimeout(attachTimer);
+    attachTimer = setTimeout(attachNewTargets, 250);
+  });
+}
+function observeUntilRendered() {
+  if (observer || typeof document === "undefined")
+    return;
+  checkPendingIds();
+  if (!pendingIds.size)
+    return;
+  observer = new MutationObserver(() => {
+    checkPendingIds();
+    if (!pendingIds.size) {
+      observer?.disconnect();
+      observer = null;
+    }
+  });
+  observer.observe(document, { childList: true, subtree: true });
+}
+export function createAutoAnimatePlugin(options = {}, targets = {}) {
+  optionsByKey.set(DEFAULT_KEY, options);
+  return (node) => {
+    node.on("created", () => {
+      if (typeof node.props.definition?.schema !== "function")
+        return;
+      const typeTargets = targets[node.props.type] ?? [];
+      const originalSchema = node.props.definition.schema;
+      node.props.definition.schema = (extensions) => {
+        const schema = originalSchema(extensions);
+        const finalSchema = Array.isArray(schema) ? schema[0] : schema;
+        let marked = false;
+        eachSection(finalSchema, (section) => {
+          if (!isDOM(section))
+            return;
+          let key;
+          const meta = section.meta;
+          if (meta?.autoAnimate) {
+            key = DEFAULT_KEY;
+            if (typeof meta.autoAnimate === "object") {
+              key = `${node.props.id}-${meta.section ?? "section"}`;
+              optionsByKey.set(key, { ...options, ...meta.autoAnimate });
+            }
+          } else {
+            const sectionName = meta?.section;
+            if (typeof sectionName === "string" && (targets.global?.includes(sectionName) || typeTargets.includes(sectionName)))
+              key = DEFAULT_KEY;
+          }
+          if (key === void 0)
+            return;
+          section.attrs = { ...section.attrs, "data-auto-animate": key };
+          marked = true;
+        });
+        if (marked && node.props.id && typeof window !== "undefined") {
+          pendingIds.add(node.props.id);
+          observeUntilRendered();
+        }
+        return finalSchema;
+      };
+    });
+  };
+}

package/dist/plugins/index.d.ts

@@ -0,0 +1,5 @@
+import type { FormKitNode } from '@formkit/core';
+export declare function addFormAsteriskPlugin(node: FormKitNode): void;
+export declare function addLabelPlugin(node: FormKitNode): void;
+export { createAutoAnimatePlugin } from './autoAnimate';
+export type { AutoAnimateTargets } from './autoAnimate';

package/dist/plugins/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addFormAsteriskPlugin = addFormAsteriskPlugin;
+exports.addLabelPlugin = addLabelPlugin;
+Object.defineProperty(exports, "createAutoAnimatePlugin", {
+  enumerable: true,
+  get: function () {
+    return _autoAnimate.createAutoAnimatePlugin;
+  }
+});
+var _autoAnimate = require("./autoAnimate");
+function addFormAsteriskPlugin(node) {
+  if (!/^form[A-Z]/.test(node.props.type) || node.props.type.startsWith("formOutput")) return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: ["$label", {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "p-formkit-asterisk"
+            },
+            children: ["*"]
+          }]
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}
+function addLabelPlugin(node) {
+  if (!/^form[A-Z]/.test(node.props.type)) return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: [{
+            $el: "span",
+            attrs: {
+              title: "$help",
+              class: "p-formkit-label"
+            },
+            children: ["$label"]
+          }, {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "p-formkit-required",
+              title: "$help"
+            },
+            children: ["*"]
+          }]
+        };
+        sectionsSchema.help = {
+          children: []
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}

package/dist/plugins/index.mjs

@@ -0,0 +1,56 @@
+export function addFormAsteriskPlugin(node) {
+  if (!/^form[A-Z]/.test(node.props.type) || node.props.type.startsWith("formOutput"))
+    return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: ["$label", {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "p-formkit-asterisk"
+            },
+            children: ["*"]
+          }]
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}
+export function addLabelPlugin(node) {
+  if (!/^form[A-Z]/.test(node.props.type))
+    return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: [{
+            $el: "span",
+            attrs: {
+              title: "$help",
+              class: "p-formkit-label"
+            },
+            children: ["$label"]
+          }, {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "p-formkit-required",
+              title: "$help"
+            },
+            children: ["*"]
+          }]
+        };
+        sectionsSchema.help = {
+          children: []
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}
+export { createAutoAnimatePlugin } from "./autoAnimate.mjs";