directix 1.11.0 → 2.1.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /*!
- * directix v1.11.0
- * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
+ * directix v2.1.0
+ * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3, with Web Components support
  * (c) 2021-present saqqdy <https://github.com/saqqdy>
  * Released under the MIT License.
  */
@@ -58,13 +58,13 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 /*!
- * directix v1.11.0
- * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
+ * directix v2.1.0
+ * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3, with Web Components support
  * (c) 2021-present saqqdy <https://github.com/saqqdy>
  * Released under the MIT License.
  */
 var _a;
-import { ref, unref, onUnmounted, watch, readonly, shallowRef, computed, onMounted, reactive, watchEffect, isRef, toRaw, markRaw } from "vue";
+import { markRaw, shallowReactive, ref, unref, onUnmounted, watch, readonly, shallowRef, computed, onMounted, reactive, watchEffect, isRef, toRaw } from "vue";
 function createVue2Directive(hooks) {
   const directive = {
     bind(el, binding, vnode) {
@@ -77,7 +77,7 @@ function createVue2Directive(hooks) {
     },
     inserted(el, binding, vnode) {
       if (hooks.mounted) {
-        hooks.mounted(el, normalizeBinding$1(binding), vnode);
+        hooks.mounted(el, normalizeBinding$2(binding), vnode);
       }
     },
     update(el, binding, vnode, oldVnode) {
@@ -85,9 +85,9 @@ function createVue2Directive(hooks) {
       if (hooks.updated) {
         hooks.updated(
           el,
-          normalizeBinding$1(binding),
+          normalizeBinding$2(binding),
           vnode,
-          normalizeBinding$1(__spreadProps(__spreadValues({}, binding), { value: binding.oldValue })),
+          normalizeBinding$2(__spreadProps(__spreadValues({}, binding), { value: binding.oldValue })),
           oldVnode
         );
       }
@@ -100,7 +100,7 @@ function createVue2Directive(hooks) {
     },
     unbind(el, binding, vnode) {
       if (hooks.unmounted) {
-        hooks.unmounted(el, normalizeBinding$1(binding), vnode);
+        hooks.unmounted(el, normalizeBinding$2(binding), vnode);
       }
       const state2 = el.__directix_state__;
       if (state2 == null ? void 0 : state2.cleanup) {
@@ -111,7 +111,7 @@ function createVue2Directive(hooks) {
   };
   return directive;
 }
-function normalizeBinding$1(binding) {
+function normalizeBinding$2(binding) {
   var _a2;
   return {
     value: binding.value,
@@ -128,20 +128,20 @@ function addCleanup$1(el, fn) {
   }
 }
 function createVue3Directive(hooks) {
-  const directive = {
+  return {
     created(el, binding, vnode) {
-      const state2 = {
-        value: binding.value,
+      const state2 = shallowReactive({
+        value: binding.value != null ? markRaw(binding.value) : binding.value,
         vnode,
         cleanup: []
-      };
+      });
       el.__directix_state__ = state2;
     },
     beforeMount(_el, _binding, _vnode) {
     },
     mounted(el, binding, vnode) {
       if (hooks.mounted) {
-        hooks.mounted(el, normalizeBindingVue3(binding), vnode);
+        hooks.mounted(el, normalizeBinding$1(binding), vnode);
       }
     },
     beforeUpdate(_el, _binding, _vnode, _prevVnode) {
@@ -151,14 +151,14 @@ function createVue3Directive(hooks) {
       if (hooks.updated) {
         hooks.updated(
           el,
-          normalizeBindingVue3(binding),
+          normalizeBinding$1(binding),
           vnode,
-          normalizeBindingVue3(__spreadProps(__spreadValues({}, binding), { value: binding.oldValue })),
+          normalizeBinding$1(__spreadProps(__spreadValues({}, binding), { value: binding.oldValue })),
           prevVnode
         );
       }
       if (state2) {
-        state2.value = binding.value;
+        state2.value = binding.value != null ? markRaw(binding.value) : binding.value;
         state2.vnode = vnode;
       }
     },
@@ -166,7 +166,7 @@ function createVue3Directive(hooks) {
     },
     unmounted(el, binding, vnode) {
       if (hooks.unmounted) {
-        hooks.unmounted(el, normalizeBindingVue3(binding), vnode);
+        hooks.unmounted(el, normalizeBinding$1(binding), vnode);
       }
       const state2 = el.__directix_state__;
       if (state2 == null ? void 0 : state2.cleanup) {
@@ -175,9 +175,8 @@ function createVue3Directive(hooks) {
       delete el.__directix_state__;
     }
   };
-  return directive;
 }
-function normalizeBindingVue3(binding) {
+function normalizeBinding$1(binding) {
   var _a2;
   return {
     value: binding.value,
@@ -21951,6 +21950,163 @@ function teleportContent(content, options) {
     }
   };
 }
+function isCustomElement(el) {
+  return el.tagName.includes("-") || customElements.get(el.tagName.toLowerCase()) !== void 0;
+}
+function applyDirectiveToCustomElement(el, directive, value, options) {
+  const binding = {
+    value,
+    oldValue: null,
+    arg: options == null ? void 0 : options.arg,
+    modifiers: (options == null ? void 0 : options.modifiers) || {},
+    instance: null
+  };
+  const vnode = { el };
+  const mountedHook = directive.mounted;
+  if (mountedHook) {
+    mountedHook(el, binding, vnode, null);
+  }
+  return () => {
+    const unmountedHook = directive.unmounted;
+    if (unmountedHook) {
+      unmountedHook(el, binding, vnode, null);
+    }
+  };
+}
+function defineCustomElementDirective(options) {
+  const { name, directive, defaultValue, shadow = false, shadowMode = "open" } = options;
+  class DirectiveCustomElement extends HTMLElement {
+    constructor() {
+      super();
+      __publicField(this, "cleanup");
+      __publicField(this, "currentValue", defaultValue);
+      if (shadow) {
+        this.attachShadow({ mode: shadowMode });
+      }
+    }
+    connectedCallback() {
+      this.cleanup = applyDirectiveToCustomElement(
+        this,
+        directive,
+        this.currentValue
+      );
+    }
+    disconnectedCallback() {
+      if (this.cleanup) {
+        this.cleanup();
+        this.cleanup = void 0;
+      }
+    }
+    // Allow setting value via attribute
+    static get observedAttributes() {
+      return ["value"];
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      if (attrName === "value" && oldValue !== newValue) {
+        this.currentValue = newValue;
+        if (this.cleanup) {
+          this.cleanup();
+        }
+        this.cleanup = applyDirectiveToCustomElement(
+          this,
+          directive,
+          this.currentValue
+        );
+      }
+    }
+  }
+  customElements.define(name, DirectiveCustomElement);
+}
+function createDirectiveElement(_name, directive, options) {
+  const { defaultValue, shadow = false, shadowMode = "open" } = options || {};
+  return class extends HTMLElement {
+    constructor() {
+      super();
+      __publicField(this, "cleanup");
+      __publicField(this, "currentValue", defaultValue);
+      if (shadow) {
+        this.attachShadow({ mode: shadowMode });
+      }
+    }
+    connectedCallback() {
+      this.cleanup = applyDirectiveToCustomElement(
+        this,
+        directive,
+        this.currentValue
+      );
+    }
+    disconnectedCallback() {
+      if (this.cleanup) {
+        this.cleanup();
+        this.cleanup = void 0;
+      }
+    }
+    static get observedAttributes() {
+      return ["value"];
+    }
+    attributeChangedCallback(_attrName, oldValue, newValue) {
+      if (oldValue !== newValue) {
+        this.currentValue = newValue;
+        if (this.cleanup) {
+          this.cleanup();
+        }
+        this.cleanup = applyDirectiveToCustomElement(
+          this,
+          directive,
+          this.currentValue
+        );
+      }
+    }
+  };
+}
+function registerDirectiveElements(elements) {
+  Object.entries(elements).forEach(([elementName, elementDirective]) => {
+    const elementClass = createDirectiveElement(elementName, elementDirective);
+    customElements.define(elementName, elementClass);
+  });
+}
+function isCustomElementDefined(name) {
+  return customElements.get(name) !== void 0;
+}
+function whenCustomElementDefined(name) {
+  return __async(this, null, function* () {
+    yield customElements.whenDefined(name);
+  });
+}
+function getRegisteredCustomElements() {
+  const registry = customElements.__registry;
+  if (registry && typeof registry.keys === "function") {
+    return Array.from(registry.keys());
+  }
+  return [];
+}
+function hydrateCustomElements(root = document.body) {
+  const customElementsList = root.querySelectorAll("*");
+  customElementsList.forEach((el) => {
+    var _a2;
+    if (isCustomElement(el)) {
+      const clone = el.cloneNode(true);
+      (_a2 = el.parentNode) == null ? void 0 : _a2.replaceChild(clone, el);
+    }
+  });
+}
+function createSSRSafeCustomElement(name, directive, options) {
+  const { styles, shadow = false } = options || {};
+  const ssrRender = (attrs = {}) => {
+    const attrString = Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
+    if (shadow) {
+      const stylesString = styles ? `<style>${Array.isArray(styles) ? styles.join("") : styles}</style>` : "";
+      return `<${name} ${attrString}><template shadowroot="open">${stylesString}<slot></slot></template></${name}>`;
+    }
+    return `<${name} ${attrString}></${name}>`;
+  };
+  const elementClass = typeof window === "undefined" ? class extends HTMLElement {
+  } : createDirectiveElement(name, directive, options);
+  return {
+    elementClass,
+    ssrRender
+  };
+}
 const zhCN = {
   directives: {
     debounce: {
@@ -24066,6 +24222,7 @@ export {
   addPassiveListener,
   announce,
   applyAriaAttributes,
+  applyDirectiveToCustomElement,
   assert,
   assertPositive,
   assertRange,
@@ -24113,6 +24270,7 @@ export {
   createDelayedClick,
   createDeprecationWarning,
   createDirectiveBenchmark,
+  createDirectiveElement,
   createDirectiveTemplate,
   createEventDirective,
   createI18n,
@@ -24123,6 +24281,7 @@ export {
   createPerformanceBudget,
   createPermissionCheck,
   createPermissionChecker,
+  createSSRSafeCustomElement,
   createSafeContentHandler,
   createSafeDirectiveWrapper,
   createStyleDirective,
@@ -24137,6 +24296,7 @@ export {
   deepMerge,
   deferNonCriticalDirective,
   deferTask,
+  defineCustomElementDirective,
   defineDirective,
   defineDirectiveGroup,
   definePlugin,
@@ -24242,6 +24402,7 @@ export {
   getPluginManager,
   getPluginRegistry,
   getPolyfillStatus,
+  getRegisteredCustomElements,
   getSlowestDirectives,
   getSupportedRegions,
   getTimezoneInfo,
@@ -24252,6 +24413,7 @@ export {
   handleTouchConflict,
   hasPermission$2 as hasPermission,
   hasPermissionSync,
+  hydrateCustomElements,
   importConfig,
   incrementCounter,
   info,
@@ -24265,6 +24427,8 @@ export {
   isBoolean,
   isBrowser,
   isBrowserSupported,
+  isCustomElement,
+  isCustomElementDefined,
   isDOMReady,
   isDevtoolsAvailable,
   isEmpty,
@@ -24314,6 +24478,7 @@ export {
   preloadModule,
   quickPrint,
   recordHistogram,
+  registerDirectiveElements,
   registerPolyfill,
   removeHealthCheck,
   requestIdleCallback,
@@ -24501,6 +24666,7 @@ export {
   warnUnsupportedFeatures,
   watchConfig,
   watchEffectBinding,
+  whenCustomElementDefined,
   withAuditLog,
   withErrorRecovery,
   withPerformanceMonitoring,