@deot/vc-hooks 1.0.1

package/README.md

@@ -0,0 +1 @@
+// TODO

package/dist/index.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vue = require('vue');
+
+const useAttrs = (options) => {
+  const attrs = vue.useAttrs();
+  const { merge = true, exclude = [] } = options || {};
+  return vue.computed(() => {
+    if (merge && !exclude.length) return attrs;
+    const result = Object.entries(attrs).reduce((pre, [key, val]) => {
+      if (exclude.includes(key)) return pre;
+      if (!merge && /^on([A-Z])/.test(key)) {
+        pre.listeners[key] = val;
+      } else if (!merge && /(class|style)/.test(key)) {
+        pre[key] = val;
+      } else {
+        pre.attrs[key] = val;
+      }
+      return pre;
+    }, {
+      style: void 0,
+      class: void 0,
+      attrs: {},
+      listeners: {}
+    });
+    return merge ? result.attrs : result;
+  });
+};
+
+const useScrollbar = (visibleRef) => {
+  let original = "";
+  let isMounted = false;
+  const setScrollBar = (v) => {
+    if (!isMounted || original === "hidden") return;
+    if (v) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.removeProperty("overflow");
+    }
+  };
+  vue.watch(
+    () => visibleRef.value,
+    (v) => {
+      setScrollBar(v);
+    },
+    { immediate: false }
+  );
+  vue.onMounted(() => {
+    isMounted = true;
+    original = document.body.style.overflow;
+    visibleRef.value && setScrollBar(true);
+  });
+  vue.onBeforeUnmount(() => {
+    setScrollBar(false);
+  });
+};
+
+const getInstance = (componentName, privateKey) => {
+  const instance = vue.getCurrentInstance();
+  const regex = new RegExp(`${componentName}$`);
+  let parent = instance.parent;
+  /* istanbul ignore next -- @preserve */
+  while (parent && !(parent?.type?.name && regex.test(parent.type.name)) && (!privateKey || !parent?.[privateKey] || !parent?.proxy?.[privateKey])) {
+    parent = parent.parent || parent?.type?.parent;
+  }
+  return parent;
+};
+
+exports.getInstance = getInstance;
+exports.useAttrs = useAttrs;
+exports.useScrollbar = useScrollbar;

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import { ComponentInternalInstance } from 'vue';
+import type { ComputedRef } from 'vue';
+import type { Ref } from 'vue';
+import type { StyleValue } from 'vue';
+
+declare type Attrs = {
+    [key: string]: any;
+    style?: StyleValue;
+    class?: StyleValue;
+    attrs?: Record<string, any>;
+    listeners?: Record<string, (...args: any[]) => any>;
+};
+
+export declare const getInstance: (componentName: string, privateKey: string) => ComponentInternalInstance | null;
+
+declare type Options = {
+    merge?: boolean;
+    exclude?: string[];
+};
+
+export declare const useAttrs: (options?: Options) => ComputedRef<Attrs>;
+
+export declare const useScrollbar: (visibleRef: Ref<boolean> | ComputedRef) => void;
+
+export { }

package/dist/index.iife.js

@@ -0,0 +1,76 @@
+var VcHooks = (function (exports, vue) {
+	'use strict';
+
+	const useAttrs = (options) => {
+	  const attrs = vue.useAttrs();
+	  const { merge = true, exclude = [] } = options || {};
+	  return vue.computed(() => {
+	    if (merge && !exclude.length) return attrs;
+	    const result = Object.entries(attrs).reduce((pre, [key, val]) => {
+	      if (exclude.includes(key)) return pre;
+	      if (!merge && /^on([A-Z])/.test(key)) {
+	        pre.listeners[key] = val;
+	      } else if (!merge && /(class|style)/.test(key)) {
+	        pre[key] = val;
+	      } else {
+	        pre.attrs[key] = val;
+	      }
+	      return pre;
+	    }, {
+	      style: void 0,
+	      class: void 0,
+	      attrs: {},
+	      listeners: {}
+	    });
+	    return merge ? result.attrs : result;
+	  });
+	};
+
+	const useScrollbar = (visibleRef) => {
+	  let original = "";
+	  let isMounted = false;
+	  const setScrollBar = (v) => {
+	    if (!isMounted || original === "hidden") return;
+	    if (v) {
+	      document.body.style.overflow = "hidden";
+	    } else {
+	      document.body.style.removeProperty("overflow");
+	    }
+	  };
+	  vue.watch(
+	    () => visibleRef.value,
+	    (v) => {
+	      setScrollBar(v);
+	    },
+	    { immediate: false }
+	  );
+	  vue.onMounted(() => {
+	    isMounted = true;
+	    original = document.body.style.overflow;
+	    visibleRef.value && setScrollBar(true);
+	  });
+	  vue.onBeforeUnmount(() => {
+	    setScrollBar(false);
+	  });
+	};
+
+	const getInstance = (componentName, privateKey) => {
+	  const instance = vue.getCurrentInstance();
+	  const regex = new RegExp(`${componentName}$`);
+	  let parent = instance.parent;
+	  /* istanbul ignore next -- @preserve */
+	  while (parent && !(parent?.type?.name && regex.test(parent.type.name)) && (!privateKey || !parent?.[privateKey] || !parent?.proxy?.[privateKey])) {
+	    parent = parent.parent || parent?.type?.parent;
+	  }
+	  return parent;
+	};
+
+	exports.getInstance = getInstance;
+	exports.useAttrs = useAttrs;
+	exports.useScrollbar = useScrollbar;
+
+	Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+	return exports;
+
+})({}, Vue);

package/dist/index.js

@@ -0,0 +1,67 @@
+import { useAttrs as useAttrs$1, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
+
+const useAttrs = (options) => {
+  const attrs = useAttrs$1();
+  const { merge = true, exclude = [] } = options || {};
+  return computed(() => {
+    if (merge && !exclude.length) return attrs;
+    const result = Object.entries(attrs).reduce((pre, [key, val]) => {
+      if (exclude.includes(key)) return pre;
+      if (!merge && /^on([A-Z])/.test(key)) {
+        pre.listeners[key] = val;
+      } else if (!merge && /(class|style)/.test(key)) {
+        pre[key] = val;
+      } else {
+        pre.attrs[key] = val;
+      }
+      return pre;
+    }, {
+      style: void 0,
+      class: void 0,
+      attrs: {},
+      listeners: {}
+    });
+    return merge ? result.attrs : result;
+  });
+};
+
+const useScrollbar = (visibleRef) => {
+  let original = "";
+  let isMounted = false;
+  const setScrollBar = (v) => {
+    if (!isMounted || original === "hidden") return;
+    if (v) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.removeProperty("overflow");
+    }
+  };
+  watch(
+    () => visibleRef.value,
+    (v) => {
+      setScrollBar(v);
+    },
+    { immediate: false }
+  );
+  onMounted(() => {
+    isMounted = true;
+    original = document.body.style.overflow;
+    visibleRef.value && setScrollBar(true);
+  });
+  onBeforeUnmount(() => {
+    setScrollBar(false);
+  });
+};
+
+const getInstance = (componentName, privateKey) => {
+  const instance = getCurrentInstance();
+  const regex = new RegExp(`${componentName}$`);
+  let parent = instance.parent;
+  /* istanbul ignore next -- @preserve */
+  while (parent && !(parent?.type?.name && regex.test(parent.type.name)) && (!privateKey || !parent?.[privateKey] || !parent?.proxy?.[privateKey])) {
+    parent = parent.parent || parent?.type?.parent;
+  }
+  return parent;
+};
+
+export { getInstance, useAttrs, useScrollbar };

package/dist/index.umd.cjs

@@ -0,0 +1,77 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VcHooks = {}, global.Vue));
+})(this, (function (exports, vue) { 'use strict';
+
+	const useAttrs = (options) => {
+	  const attrs = vue.useAttrs();
+	  const { merge = true, exclude = [] } = options || {};
+	  return vue.computed(() => {
+	    if (merge && !exclude.length) return attrs;
+	    const result = Object.entries(attrs).reduce((pre, [key, val]) => {
+	      if (exclude.includes(key)) return pre;
+	      if (!merge && /^on([A-Z])/.test(key)) {
+	        pre.listeners[key] = val;
+	      } else if (!merge && /(class|style)/.test(key)) {
+	        pre[key] = val;
+	      } else {
+	        pre.attrs[key] = val;
+	      }
+	      return pre;
+	    }, {
+	      style: void 0,
+	      class: void 0,
+	      attrs: {},
+	      listeners: {}
+	    });
+	    return merge ? result.attrs : result;
+	  });
+	};
+
+	const useScrollbar = (visibleRef) => {
+	  let original = "";
+	  let isMounted = false;
+	  const setScrollBar = (v) => {
+	    if (!isMounted || original === "hidden") return;
+	    if (v) {
+	      document.body.style.overflow = "hidden";
+	    } else {
+	      document.body.style.removeProperty("overflow");
+	    }
+	  };
+	  vue.watch(
+	    () => visibleRef.value,
+	    (v) => {
+	      setScrollBar(v);
+	    },
+	    { immediate: false }
+	  );
+	  vue.onMounted(() => {
+	    isMounted = true;
+	    original = document.body.style.overflow;
+	    visibleRef.value && setScrollBar(true);
+	  });
+	  vue.onBeforeUnmount(() => {
+	    setScrollBar(false);
+	  });
+	};
+
+	const getInstance = (componentName, privateKey) => {
+	  const instance = vue.getCurrentInstance();
+	  const regex = new RegExp(`${componentName}$`);
+	  let parent = instance.parent;
+	  /* istanbul ignore next -- @preserve */
+	  while (parent && !(parent?.type?.name && regex.test(parent.type.name)) && (!privateKey || !parent?.[privateKey] || !parent?.proxy?.[privateKey])) {
+	    parent = parent.parent || parent?.type?.parent;
+	  }
+	  return parent;
+	};
+
+	exports.getInstance = getInstance;
+	exports.useAttrs = useAttrs;
+	exports.useScrollbar = useScrollbar;
+
+	Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+}));

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@deot/vc-hooks",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "*"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}