@chakra-ui/vue-utils - npm Package Compare versions

Comparing version 2.0.0-beta.1 to 2.0.0-beta.2

CHANGELOG.md

 # @chakra-ui/vue-utils
 
+## 2.0.0-beta.2
+
+### Minor Changes
+
+- 57380d50: Migrate to pnpm
+- ed252d61: Migrate build to pnpm and use rollup build
+
 ## 2.0.0-beta.1
@@ -4,0 +11,0 @@

dist/chakra-ui-vue-utils.cjs.js

@@ -1,7 +0,449 @@
-'use strict';
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./chakra-ui-vue-utils.cjs.prod.js");
-} else {
-  module.exports = require("./chakra-ui-vue-utils.cjs.dev.js");
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Focus: () => Focus,
+  FocusResult: () => FocusResult,
+  Keys: () => Keys,
+  SAO: () => SAO,
+  SNA: () => SNA,
+  SNAO: () => SNAO,
+  camelCase: () => camelCase2,
+  canUseDOM: () => import_utils.canUseDOM,
+  contains: () => contains,
+  createContext: () => createContext,
+  debounce: () => debounce,
+  defaultWindow: () => defaultWindow,
+  extractStyleAttrs: () => extractStyleAttrs,
+  focusElement: () => focusElement,
+  focusIn: () => focusIn,
+  genId: () => genId,
+  getSelector: () => getSelector,
+  getValidChildren: () => getValidChildren,
+  isObjectComponent: () => isObjectComponent,
+  match: () => match,
+  orient: () => orient,
+  tryOnScopeDispose: () => tryOnScopeDispose,
+  unrefElement: () => unrefElement,
+  useDebouncedRef: () => useDebouncedRef,
+  useRef: () => useRef,
+  useThemingProps: () => useThemingProps,
+  vueThemingProps: () => vueThemingProps
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/attrs.ts
+var import_lodash = __toESM(require("lodash.camelcase"));
+var import_styled_system = require("@chakra-ui/styled-system");
+var import_vue = require("vue");
+var import_lodash2 = __toESM(require("lodash.memoize"));
+var camelCaseCache = {};
+var _isStyledProp = (0, import_lodash2.default)((attr) => (0, import_styled_system.isStyleProp)(attr));
+var extractStyleAttrs = /* @__PURE__ */ __name((styleProps) => {
+  const styles = {};
+  const attrs = {};
+  for (const prop in styleProps) {
+    let _attr;
+    if (camelCaseCache[prop]) {
+      _attr = camelCaseCache[prop];
+    } else {
+      _attr = `${prop.startsWith("_") ? "_" : ""}${(0, import_lodash.default)(prop)}`;
+      camelCaseCache[prop] = _attr;
+    }
+    if (_isStyledProp(_attr)) {
+      styles[_attr] = styleProps[prop];
+    } else if (_isStyledProp(prop)) {
+      styles[_attr] = styleProps[prop];
+    } else {
+      attrs[prop] = styleProps[prop];
+    }
+  }
+  return {
+    styles,
+    attrs
+  };
+}, "extractStyleAttrs");
+
+// src/configurable.ts
+var import_utils = require("@chakra-ui/utils");
+var defaultWindow = (0, import_utils.canUseDOM)() ? window : null;
+
+// src/dom-query.ts
+function getSelector(node) {
+  const id = node.getAttribute("id");
+  if (id)
+    return "#" + id;
+  let path = "";
+  while (node) {
+    let name = node.localName;
+    const parent = node.parentNode;
+    if (!parent) {
+      path = name + " > " + path;
+      continue;
+    }
+    if (node.getAttribute("id")) {
+      path = "#" + node.getAttribute("id") + " > " + path;
+      break;
+    }
+    const sameTagSiblings = [];
+    let children = parent.childNodes;
+    children = Array.prototype.slice.call(children);
+    children.forEach((child) => {
+      if (child.localName == name) {
+        sameTagSiblings.push(child);
+      }
+    });
+    if (sameTagSiblings.length > 1) {
+      const index = sameTagSiblings.indexOf(node);
+      name += ":nth-of-type(" + (index + 1) + ")";
+    }
+    if (path) {
+      path = name + " > " + path;
+    } else {
+      path = name;
+    }
+    node = parent;
+  }
+  return path;
 }
+__name(getSelector, "getSelector");
+
+// src/dom.ts
+var import_vue3 = require("vue");
+
+// src/timers.ts
+function debounce(func, wait, immediate) {
+  let timeout;
+  return (...args) => {
+    if (immediate && !timeout)
+      func(...args);
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}
+__name(debounce, "debounce");
+
+// src/types.ts
+var import_vue2 = require("vue");
+
+// src/dom.ts
+function useRef() {
+  const refEl = (0, import_vue3.ref)(null);
+  (0, import_vue3.onBeforeUpdate)(() => {
+    refEl.value = null;
+  });
+  const _ref = /* @__PURE__ */ __name((el) => {
+    var _a;
+    refEl.value = (_a = el == null ? void 0 : el.$el) != null ? _a : el;
+  }, "_ref");
+  return [_ref, refEl];
+}
+__name(useRef, "useRef");
+function unrefElement(elementRef) {
+  var _a;
+  const node = (0, import_vue3.unref)(elementRef);
+  return (_a = node == null ? void 0 : node.$el) != null ? _a : node;
+}
+__name(unrefElement, "unrefElement");
+function useDebouncedRef(initialValue, delay = 300, immediate = false) {
+  const state = (0, import_vue3.ref)(initialValue);
+  const debouncedRef = (0, import_vue3.customRef)((track, trigger) => ({
+    get() {
+      track();
+      return state.value;
+    },
+    set: debounce((value) => {
+      state.value = value;
+      trigger();
+    }, delay, immediate)
+  }));
+  return debouncedRef;
+}
+__name(useDebouncedRef, "useDebouncedRef");
+function contains(containers, element) {
+  for (let container of containers) {
+    if (container.contains(element))
+      return true;
+  }
+  return false;
+}
+__name(contains, "contains");
+
+// src/focus.ts
+var import_utils2 = require("@chakra-ui/utils");
+var Focus = /* @__PURE__ */ ((Focus2) => {
+  Focus2[Focus2["First"] = 1] = "First";
+  Focus2[Focus2["Previous"] = 2] = "Previous";
+  Focus2[Focus2["Next"] = 4] = "Next";
+  Focus2[Focus2["Last"] = 8] = "Last";
+  Focus2[Focus2["WrapAround"] = 16] = "WrapAround";
+  Focus2[Focus2["NoScroll"] = 32] = "NoScroll";
+  return Focus2;
+})(Focus || {});
+var FocusResult = /* @__PURE__ */ ((FocusResult2) => {
+  FocusResult2[FocusResult2["Error"] = 0] = "Error";
+  FocusResult2[FocusResult2["Overflow"] = 1] = "Overflow";
+  FocusResult2[FocusResult2["Success"] = 2] = "Success";
+  FocusResult2[FocusResult2["Underflow"] = 3] = "Underflow";
+  return FocusResult2;
+})(FocusResult || {});
+function focusElement(element) {
+  element == null ? void 0 : element.focus({
+    preventScroll: true
+  });
+}
+__name(focusElement, "focusElement");
+function focusIn(container, focus) {
+  let elements = Array.isArray(container) ? container.slice().sort((a, z) => {
+    let position = a.compareDocumentPosition(z);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+      return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+      return 1;
+    return 0;
+  }) : (() => {
+    const focusables = (0, import_utils2.getAllFocusable)(container).filter((el) => el !== container);
+    return focusables;
+  })();
+  let active = document.activeElement;
+  let direction = (() => {
+    if (focus & (1 /* First */ | 4 /* Next */))
+      return 1 /* Next */;
+    if (focus & (2 /* Previous */ | 8 /* Last */))
+      return -1 /* Previous */;
+    throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
+  })();
+  let startIndex = (() => {
+    if (focus & 1 /* First */)
+      return 0;
+    if (focus & 2 /* Previous */)
+      return Math.max(0, elements.indexOf(active)) - 1;
+    if (focus & 4 /* Next */)
+      return Math.max(0, elements.indexOf(active)) + 1;
+    if (focus & 8 /* Last */)
+      return elements.length - 1;
+    throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
+  })();
+  let focusOptions = focus & 32 /* NoScroll */ ? {
+    preventScroll: true
+  } : {};
+  let offset = 0;
+  let total = elements.length;
+  let next = void 0;
+  do {
+    if (offset >= total || offset + total <= 0)
+      return 0 /* Error */;
+    let nextIdx = startIndex + offset;
+    if (focus & 16 /* WrapAround */) {
+      nextIdx = (nextIdx + total) % total;
+    } else {
+      if (nextIdx < 0)
+        return 3 /* Underflow */;
+      if (nextIdx >= total)
+        return 1 /* Overflow */;
+    }
+    next = elements[nextIdx];
+    next == null ? void 0 : next.focus(focusOptions);
+    offset += direction;
+  } while (next !== document.activeElement);
+  if (!next.hasAttribute("tabindex"))
+    next.setAttribute("tabindex", "0");
+  return 2 /* Success */;
+}
+__name(focusIn, "focusIn");
+
+// src/generate-id.ts
+function genId(size = 3) {
+  let uuid = "";
+  const dictionary = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (let i = 0; i < size; i++) {
+    uuid += dictionary.charAt(Math.floor(Math.random() * dictionary.length));
+  }
+  if (process.env.NODE_ENV === "test")
+    return "EMPTY_STRING";
+  return uuid;
+}
+__name(genId, "genId");
+
+// src/keys.ts
+var Keys = /* @__PURE__ */ ((Keys2) => {
+  Keys2["Space"] = " ";
+  Keys2["Enter"] = "Enter";
+  Keys2["Escape"] = "Escape";
+  Keys2["Backspace"] = "Backspace";
+  Keys2["ArrowLeft"] = "ArrowLeft";
+  Keys2["ArrowUp"] = "ArrowUp";
+  Keys2["ArrowRight"] = "ArrowRight";
+  Keys2["ArrowDown"] = "ArrowDown";
+  Keys2["Home"] = "Home";
+  Keys2["End"] = "End";
+  Keys2["PageUp"] = "PageUp";
+  Keys2["PageDown"] = "PageDown";
+  Keys2["Tab"] = "Tab";
+  return Keys2;
+})(Keys || {});
+
+// src/layout.ts
+function orient(options) {
+  const {
+    orientation,
+    vertical,
+    horizontal
+  } = options;
+  if (!orientation)
+    return {};
+  return orientation === "vertical" ? vertical : horizontal;
+}
+__name(orient, "orient");
+
+// src/match.ts
+function match(value, lookup, ...args) {
+  if (value in lookup) {
+    let returnValue = lookup[value];
+    return typeof returnValue === "function" ? returnValue(...args) : returnValue;
+  }
+  let error = new Error(`Tried to handle "${value}" but there is no handler defined. Only defined handlers are: ${Object.keys(lookup).map((key) => `"${key}"`).join(", ")}.`);
+  if (Error.captureStackTrace)
+    Error.captureStackTrace(error, match);
+  throw error;
+}
+__name(match, "match");
+
+// src/props.ts
+var import_vue4 = require("vue");
+var import_utils3 = require("@chakra-ui/utils");
+var vueThemingProps = {
+  colorScheme: String,
+  variant: String,
+  size: String,
+  styleConfig: String
+};
+var SNA = [Number, String, Array];
+var SAO = [String, Array, Object];
+var SNAO = [Number, String, Array, Object];
+var useThemingProps = /* @__PURE__ */ __name((props) => (0, import_vue4.computed)(() => (0, import_utils3.filterUndefined)({
+  colorScheme: props.colorScheme,
+  variant: props.variant,
+  size: props.size,
+  styleConfig: props.styleConfig
+})), "useThemingProps");
+
+// src/scope.ts
+var import_vue5 = require("vue");
+function tryOnScopeDispose(fn) {
+  if ((0, import_vue5.getCurrentScope)()) {
+    (0, import_vue5.onScopeDispose)(fn);
+    return true;
+  }
+  return false;
+}
+__name(tryOnScopeDispose, "tryOnScopeDispose");
+
+// src/string.ts
+var import_lodash3 = __toESM(require("lodash.camelcase"));
+var import_lodash4 = __toESM(require("lodash.memoize"));
+var camelCase2 = (0, import_lodash4.default)((key) => (0, import_lodash3.default)(key));
+
+// src/vue-utils.ts
+var import_utils4 = require("@chakra-ui/utils");
+var import_vue6 = require("vue");
+function createContext(options = {}, defaults) {
+  const {
+    strict = true,
+    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
+    name
+  } = options;
+  let contextSymbol = Symbol(`${name}Symbol`);
+  function Provider(payload) {
+    (0, import_vue6.provide)(contextSymbol, payload);
+  }
+  __name(Provider, "Provider");
+  function useContext(fallback = null) {
+    const context = (0, import_vue6.inject)(contextSymbol, fallback);
+    if (!context && strict) {
+      throw new Error(errorMessage);
+    }
+    return context;
+  }
+  __name(useContext, "useContext");
+  return [Provider, useContext, contextSymbol];
+}
+__name(createContext, "createContext");
+function getValidChildren(slots) {
+  var _a;
+  const slotArray = ((_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) || [];
+  return slotArray.filter((child) => {
+    return (0, import_vue6.isVNode)(child);
+  });
+}
+__name(getValidChildren, "getValidChildren");
+function isObjectComponent(subject) {
+  const validComponentTypes = ["function", "object"];
+  if (!validComponentTypes.includes(typeof subject))
+    return false;
+  if ((0, import_utils4.isObject)(subject)) {
+    if (typeof (subject == null ? void 0 : subject.render) === "function" && (0, import_vue6.isVNode)(subject.render()))
+      return true;
+    else if (typeof (subject == null ? void 0 : subject.setup) === "function")
+      return true;
+  }
+  return false;
+}
+__name(isObjectComponent, "isObjectComponent");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Focus,
+  FocusResult,
+  Keys,
+  SAO,
+  SNA,
+  SNAO,
+  camelCase,
+  canUseDOM,
+  contains,
+  createContext,
+  debounce,
+  defaultWindow,
+  extractStyleAttrs,
+  focusElement,
+  focusIn,
+  genId,
+  getSelector,
+  getValidChildren,
+  isObjectComponent,
+  match,
+  orient,
+  tryOnScopeDispose,
+  unrefElement,
+  useDebouncedRef,
+  useRef,
+  useThemingProps,
+  vueThemingProps
+});

dist/chakra-ui-vue-utils.esm.js

@@ -1,256 +0,61 @@
-import { isObject, filterUndefined, canUseDOM, getAllFocusable } from '@chakra-ui/utils';
-export { canUseDOM } from '@chakra-ui/utils';
-import { isVNode, provide, inject, ref, onBeforeUpdate, unref, customRef, computed, getCurrentScope, onScopeDispose } from 'vue';
-import camelCase$1 from 'lodash.camelcase';
-import { isStyleProp } from '@chakra-ui/styled-system';
-import memoize from 'lodash.memoize';
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-/**
- * Creates a named context, provider, and hook.
- *
- * @param options create context options
- */
-function createContext(options, defaults) {
-  if (options === void 0) {
-    options = {};
-  }
-  var _options = options,
-    _options$strict = _options.strict,
-    strict = _options$strict === void 0 ? true : _options$strict,
-    _options$errorMessage = _options.errorMessage,
-    errorMessage = _options$errorMessage === void 0 ? "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider" : _options$errorMessage,
-    name = _options.name;
-  var contextSymbol = Symbol(name + "Symbol");
-  function Provider(payload) {
-    provide(contextSymbol, payload);
-  }
-  function useContext(fallback) {
-    if (fallback === void 0) {
-      fallback = null;
+// src/attrs.ts
+import camelCase from "lodash.camelcase";
+import { isStyleProp } from "@chakra-ui/styled-system";
+import "vue";
+import memoize from "lodash.memoize";
+var camelCaseCache = {};
+var _isStyledProp = memoize((attr) => isStyleProp(attr));
+var extractStyleAttrs = /* @__PURE__ */ __name((styleProps) => {
+  const styles = {};
+  const attrs = {};
+  for (const prop in styleProps) {
+    let _attr;
+    if (camelCaseCache[prop]) {
+      _attr = camelCaseCache[prop];
+    } else {
+      _attr = `${prop.startsWith("_") ? "_" : ""}${camelCase(prop)}`;
+      camelCaseCache[prop] = _attr;
     }
-    var context = inject(contextSymbol, fallback);
-    if (!context && strict) {
-      throw new Error(errorMessage);
+    if (_isStyledProp(_attr)) {
+      styles[_attr] = styleProps[prop];
+    } else if (_isStyledProp(prop)) {
+      styles[_attr] = styleProps[prop];
+    } else {
+      attrs[prop] = styleProps[prop];
     }
-    return context;
   }
-  return [Provider, useContext, contextSymbol];
-}
-
-/**
- * Gets only the valid children of a component,
- * and ignores any nullish or falsy child.
- *
- * @param slots vue slots
- *
- * see https://github.com/vuejs/vue-next/blob/HEAD/packages/runtime-core/src/helpers/renderSlot.ts
- */
-function getValidChildren(slots) {
-  var slotArray = (slots == null ? void 0 : slots["default"] == null ? void 0 : slots["default"]()) || [];
-  return slotArray.filter(function (child) {
-    return isVNode(child);
-  });
-}
-/** Checkes whether a provided object is a component */
-function isObjectComponent(subject) {
-  var validComponentTypes = ["function", "object"];
-  if (!validComponentTypes.includes(typeof subject)) return false;
-
-  // Is sub
-  if (isObject(subject)) {
-    // Is object component with render function
-    if (typeof (subject == null ? void 0 : subject.render) === "function" && isVNode(subject.render())) return true;
-    // Is object component with setup function
-    else if (typeof (subject == null ? void 0 : subject.setup) === "function") return true;
-  }
-  return false;
-}
-
-function orient(options) {
-  var orientation = options.orientation,
-    vertical = options.vertical,
-    horizontal = options.horizontal;
-  if (!orientation) return {};
-  return orientation === "vertical" ? vertical : horizontal;
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-/** Debounce function */
-function debounce(func, wait, immediate) {
-  var timeout;
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (immediate && !timeout) func.apply(void 0, args);
-    clearTimeout(timeout);
-    timeout = setTimeout(function () {
-      func.apply(void 0, args);
-    }, wait);
+  return {
+    styles,
+    attrs
   };
-}
+}, "extractStyleAttrs");
 
-/**
- * For internal use
- *
- * Creates refs that will be bound to the template/render function.
- *
- * Why not just use the regular `ref(null)` and bind it to the element?
- *
- * 1. To avoid unwrapping template refs which maybe components. This hook will always
- *    give us the actual element being bound the the element, and not the component
- *    options.
- *
- * 2. In some cases where we need an up-to-date value of the ref node,
- *    from the consuming component, we can use this hook.
- *
- * @returns []
- */
-function useRef() {
-  var refEl = ref(null);
-  onBeforeUpdate(function () {
-    // clear refs before DOM updates
-    refEl.value = null;
-  });
+// src/configurable.ts
+import { canUseDOM } from "@chakra-ui/utils";
+var defaultWindow = canUseDOM() ? window : null;
 
-  /**
-   * Getter function to bind ref to value
-   * @param el Template ref value provided by Vue
-   */
-  var _ref = function _ref(el) {
-    var _$el;
-    refEl.value = (_$el = el == null ? void 0 : el.$el) != null ? _$el : el;
-  };
-  return [_ref, refEl];
-}
-
-/** Vue Component HTML Element Instance */
-
-/**
- * Unwraps element from ref
- * @param elementRef Ref of template node
- */
-function unrefElement(elementRef) {
-  var _$el2;
-  var node = unref(elementRef);
-  return (_$el2 = node == null ? void 0 : node.$el) != null ? _$el2 : node;
-}
-
-/**
- * Creates a ref whose value updates are debounced
- *
- * @example Simple example
- *
- * ```ts
- * const foo = useDebouncedRef('bar')
- * foo.value = 'baz'
- *
- * // foo.value to be updated to 'baz' after the delay of 300ms
- * ```
- *
- * @example Custom delay
- *
- * ```ts
- * const foo = useDebouncedRef('bar', 500)
- * foo.value = 'baz'
- *
- * // foo.value to be updated to 'baz' after the delay of 500ms
- * ```
- */
-function useDebouncedRef(initialValue, delay, immediate) {
-  if (delay === void 0) {
-    delay = 300;
-  }
-  if (immediate === void 0) {
-    immediate = false;
-  }
-  var state = ref(initialValue);
-  var debouncedRef = customRef(function (track, trigger) {
-    return {
-      get: function get() {
-        track();
-        return state.value;
-      },
-      set: debounce(function (value) {
-        state.value = value;
-        trigger();
-      }, delay, immediate)
-    };
-  });
-  return debouncedRef;
-}
-function contains(containers, element) {
-  for (var _iterator = _createForOfIteratorHelperLoose(containers), _step; !(_step = _iterator()).done;) {
-    var container = _step.value;
-    if (container.contains(element)) return true;
-  }
-  return false;
-}
-
-/**
- * Computes the selector of an element from the DOM
- *
- * The motivation for this method is to use it in the
- * resolve the issue where DOM nodes seem to be
- * removed from the DOM during patching for reactivity.
- *
- * This was breaking the behaviour of the `useFocusLock`
- * hook.
- *
- * Adopted from stack overflow:
- * https://stackoverflow.com/questions/22515835/javascript-find-selector-of-an-element
- */
+// src/dom-query.ts
 function getSelector(node) {
-  var id = node.getAttribute("id");
-  if (id) return "#" + id;
-  var path = "";
-  var _loop = function _loop() {
-    var name = node.localName;
-    var parent = node.parentNode;
+  const id = node.getAttribute("id");
+  if (id)
+    return "#" + id;
+  let path = "";
+  while (node) {
+    let name = node.localName;
+    const parent = node.parentNode;
     if (!parent) {
       path = name + " > " + path;
-      return "continue";
+      continue;
     }
     if (node.getAttribute("id")) {
       path = "#" + node.getAttribute("id") + " > " + path;
-      return "break";
+      break;
     }
-    var sameTagSiblings = [];
-    var children = parent.childNodes;
+    const sameTagSiblings = [];
+    let children = parent.childNodes;
     children = Array.prototype.slice.call(children);
-    children.forEach(function (child) {
-      // @ts-ignore
+    children.forEach((child) => {
       if (child.localName == name) {
@@ -260,7 +65,4 @@ sameTagSiblings.push(child);
     });
-
-    // if there are more than one
-    // children of that type use nth-of-type
     if (sameTagSiblings.length > 1) {
-      var index = sameTagSiblings.indexOf(node);
+      const index = sameTagSiblings.indexOf(node);
       name += ":nth-of-type(" + (index + 1) + ")";
@@ -274,105 +76,88 @@ }
     node = parent;
-  };
-  while (node) {
-    var _ret = _loop();
-    if (_ret === "continue") continue;
-    if (_ret === "break") break;
   }
   return path;
 }
+__name(getSelector, "getSelector");
 
-var vueThemingProps = {
-  colorScheme: String,
-  variant: String,
-  size: String,
-  styleConfig: String
-};
-var SNA = [Number, String, Array];
-var SAO = [String, Array, Object];
-var SNAO = [Number, String, Array, Object];
-var useThemingProps = function useThemingProps(props) {
-  return computed(function () {
-    return filterUndefined({
-      colorScheme: props.colorScheme,
-      variant: props.variant,
-      size: props.size,
-      styleConfig: props.styleConfig
-    });
-  });
-};
+// src/dom.ts
+import { customRef, onBeforeUpdate, ref, unref } from "vue";
 
-/**
- * Invokes onScopeDispose() if it's inside a effect scope lifecycle, if not, do nothing
- *
- * @param fn
- */
-function tryOnScopeDispose(fn) {
-  if (getCurrentScope()) {
-    onScopeDispose(fn);
-    return true;
-  }
-  return false;
+// src/timers.ts
+function debounce(func, wait, immediate) {
+  let timeout;
+  return (...args) => {
+    if (immediate && !timeout)
+      func(...args);
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
 }
+__name(debounce, "debounce");
 
-var defaultWindow = canUseDOM() ? window : null;
+// src/types.ts
+import "vue";
 
-/**
- * Pattern matching helper
- * Credit:
- * Adapted from the good folks at @headlessui/vue
- */
-function match(value, lookup) {
-  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    args[_key - 2] = arguments[_key];
+// src/dom.ts
+function useRef() {
+  const refEl = ref(null);
+  onBeforeUpdate(() => {
+    refEl.value = null;
+  });
+  const _ref = /* @__PURE__ */ __name((el) => {
+    var _a;
+    refEl.value = (_a = el == null ? void 0 : el.$el) != null ? _a : el;
+  }, "_ref");
+  return [_ref, refEl];
+}
+__name(useRef, "useRef");
+function unrefElement(elementRef) {
+  var _a;
+  const node = unref(elementRef);
+  return (_a = node == null ? void 0 : node.$el) != null ? _a : node;
+}
+__name(unrefElement, "unrefElement");
+function useDebouncedRef(initialValue, delay = 300, immediate = false) {
+  const state = ref(initialValue);
+  const debouncedRef = customRef((track, trigger) => ({
+    get() {
+      track();
+      return state.value;
+    },
+    set: debounce((value) => {
+      state.value = value;
+      trigger();
+    }, delay, immediate)
+  }));
+  return debouncedRef;
+}
+__name(useDebouncedRef, "useDebouncedRef");
+function contains(containers, element) {
+  for (let container of containers) {
+    if (container.contains(element))
+      return true;
   }
-  if (value in lookup) {
-    var returnValue = lookup[value];
-    return typeof returnValue === "function" ? returnValue.apply(void 0, args) : returnValue;
-  }
-  var error = new Error("Tried to handle \"" + value + "\" but there is no handler defined. Only defined handlers are: " + Object.keys(lookup).map(function (key) {
-    return "\"" + key + "\"";
-  }).join(", ") + ".");
-  if (Error.captureStackTrace) Error.captureStackTrace(error, match);
-  throw error;
+  return false;
 }
+__name(contains, "contains");
 
-var Keys;
-(function (Keys) {
-  Keys["Space"] = " ";
-  Keys["Enter"] = "Enter";
-  Keys["Escape"] = "Escape";
-  Keys["Backspace"] = "Backspace";
-  Keys["ArrowLeft"] = "ArrowLeft";
-  Keys["ArrowUp"] = "ArrowUp";
-  Keys["ArrowRight"] = "ArrowRight";
-  Keys["ArrowDown"] = "ArrowDown";
-  Keys["Home"] = "Home";
-  Keys["End"] = "End";
-  Keys["PageUp"] = "PageUp";
-  Keys["PageDown"] = "PageDown";
-  Keys["Tab"] = "Tab";
-})(Keys || (Keys = {}));
-
-/** Contains some helpers to extend the focus utils in @chakra-ui/utils */
-var Focus;
-(function (Focus) {
-  Focus[Focus["First"] = 1] = "First";
-  Focus[Focus["Previous"] = 2] = "Previous";
-  Focus[Focus["Next"] = 4] = "Next";
-  Focus[Focus["Last"] = 8] = "Last";
-  Focus[Focus["WrapAround"] = 16] = "WrapAround";
-  Focus[Focus["NoScroll"] = 32] = "NoScroll";
-})(Focus || (Focus = {}));
-var FocusResult;
-(function (FocusResult) {
-  FocusResult[FocusResult["Error"] = 0] = "Error";
-  FocusResult[FocusResult["Overflow"] = 1] = "Overflow";
-  FocusResult[FocusResult["Success"] = 2] = "Success";
-  FocusResult[FocusResult["Underflow"] = 3] = "Underflow";
-})(FocusResult || (FocusResult = {}));
-var Direction;
-(function (Direction) {
-  Direction[Direction["Previous"] = -1] = "Previous";
-  Direction[Direction["Next"] = 1] = "Next";
-})(Direction || (Direction = {}));
+// src/focus.ts
+import { getAllFocusable } from "@chakra-ui/utils";
+var Focus = /* @__PURE__ */ ((Focus2) => {
+  Focus2[Focus2["First"] = 1] = "First";
+  Focus2[Focus2["Previous"] = 2] = "Previous";
+  Focus2[Focus2["Next"] = 4] = "Next";
+  Focus2[Focus2["Last"] = 8] = "Last";
+  Focus2[Focus2["WrapAround"] = 16] = "WrapAround";
+  Focus2[Focus2["NoScroll"] = 32] = "NoScroll";
+  return Focus2;
+})(Focus || {});
+var FocusResult = /* @__PURE__ */ ((FocusResult2) => {
+  FocusResult2[FocusResult2["Error"] = 0] = "Error";
+  FocusResult2[FocusResult2["Overflow"] = 1] = "Overflow";
+  FocusResult2[FocusResult2["Success"] = 2] = "Success";
+  FocusResult2[FocusResult2["Underflow"] = 3] = "Underflow";
+  return FocusResult2;
+})(FocusResult || {});
 function focusElement(element) {
@@ -383,113 +168,228 @@ element == null ? void 0 : element.focus({
 }
+__name(focusElement, "focusElement");
 function focusIn(container, focus) {
-  var elements = Array.isArray(container) ? container.slice().sort(function (a, z) {
-    var position = a.compareDocumentPosition(z);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+  let elements = Array.isArray(container) ? container.slice().sort((a, z) => {
+    let position = a.compareDocumentPosition(z);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+      return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+      return 1;
     return 0;
-  }) : function () {
-    var focusables = getAllFocusable(container).filter(function (el) {
-      return el !== container;
-    });
+  }) : (() => {
+    const focusables = getAllFocusable(container).filter((el) => el !== container);
     return focusables;
-  }();
-  var active = document.activeElement;
-  var direction = function () {
-    if (focus & (Focus.First | Focus.Next)) return Direction.Next;
-    if (focus & (Focus.Previous | Focus.Last)) return Direction.Previous;
+  })();
+  let active = document.activeElement;
+  let direction = (() => {
+    if (focus & (1 /* First */ | 4 /* Next */))
+      return 1 /* Next */;
+    if (focus & (2 /* Previous */ | 8 /* Last */))
+      return -1 /* Previous */;
     throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
-  }();
-  var startIndex = function () {
-    if (focus & Focus.First) return 0;
-    if (focus & Focus.Previous) return Math.max(0, elements.indexOf(active)) - 1;
-    if (focus & Focus.Next) return Math.max(0, elements.indexOf(active)) + 1;
-    if (focus & Focus.Last) return elements.length - 1;
+  })();
+  let startIndex = (() => {
+    if (focus & 1 /* First */)
+      return 0;
+    if (focus & 2 /* Previous */)
+      return Math.max(0, elements.indexOf(active)) - 1;
+    if (focus & 4 /* Next */)
+      return Math.max(0, elements.indexOf(active)) + 1;
+    if (focus & 8 /* Last */)
+      return elements.length - 1;
     throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
-  }();
-  var focusOptions = focus & Focus.NoScroll ? {
+  })();
+  let focusOptions = focus & 32 /* NoScroll */ ? {
     preventScroll: true
   } : {};
-  var offset = 0;
-  var total = elements.length;
-  var next = undefined;
+  let offset = 0;
+  let total = elements.length;
+  let next = void 0;
   do {
-    var _next;
-    // Guard against infinite loops
-    if (offset >= total || offset + total <= 0) return FocusResult.Error;
-    var nextIdx = startIndex + offset;
-    if (focus & Focus.WrapAround) {
+    if (offset >= total || offset + total <= 0)
+      return 0 /* Error */;
+    let nextIdx = startIndex + offset;
+    if (focus & 16 /* WrapAround */) {
       nextIdx = (nextIdx + total) % total;
     } else {
-      if (nextIdx < 0) return FocusResult.Underflow;
-      if (nextIdx >= total) return FocusResult.Overflow;
+      if (nextIdx < 0)
+        return 3 /* Underflow */;
+      if (nextIdx >= total)
+        return 1 /* Overflow */;
     }
     next = elements[nextIdx];
-
-    // Try the focus the next element, might not work if it is "hidden" to the user.
-    (_next = next) == null ? void 0 : _next.focus(focusOptions);
-
-    // Try the next one in line
+    next == null ? void 0 : next.focus(focusOptions);
     offset += direction;
   } while (next !== document.activeElement);
+  if (!next.hasAttribute("tabindex"))
+    next.setAttribute("tabindex", "0");
+  return 2 /* Success */;
+}
+__name(focusIn, "focusIn");
 
-  // This is a little weird, but let me try and explain: There are a few scenario's
-  // in chrome for example where a focused `<a>` tag does not get the default focus
-  // styles and sometimes they do. This highly depends on whether you started by
-  // clicking or by using your keyboard. When you programmatically add focus `anchor.focus()`
-  // then the active element (document.activeElement) is this anchor, which is expected.
-  // However in that case the default focus styles are not applied *unless* you
-  // also add this tabindex.
-  if (!next.hasAttribute("tabindex")) next.setAttribute("tabindex", "0");
-  return FocusResult.Success;
+// src/generate-id.ts
+function genId(size = 3) {
+  let uuid = "";
+  const dictionary = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (let i = 0; i < size; i++) {
+    uuid += dictionary.charAt(Math.floor(Math.random() * dictionary.length));
+  }
+  if (process.env.NODE_ENV === "test")
+    return "EMPTY_STRING";
+  return uuid;
 }
+__name(genId, "genId");
 
-var camelCaseCache = {};
-var _isStyledProp = memoize(function (attr) {
-  return isStyleProp(attr);
-});
+// src/keys.ts
+var Keys = /* @__PURE__ */ ((Keys2) => {
+  Keys2["Space"] = " ";
+  Keys2["Enter"] = "Enter";
+  Keys2["Escape"] = "Escape";
+  Keys2["Backspace"] = "Backspace";
+  Keys2["ArrowLeft"] = "ArrowLeft";
+  Keys2["ArrowUp"] = "ArrowUp";
+  Keys2["ArrowRight"] = "ArrowRight";
+  Keys2["ArrowDown"] = "ArrowDown";
+  Keys2["Home"] = "Home";
+  Keys2["End"] = "End";
+  Keys2["PageUp"] = "PageUp";
+  Keys2["PageDown"] = "PageDown";
+  Keys2["Tab"] = "Tab";
+  return Keys2;
+})(Keys || {});
 
-/** Extracts CSS style properties and HTML attributes from merged component attributs */
-var extractStyleAttrs = function extractStyleAttrs(styleProps) {
-  var styles = {};
-  var attrs = {};
-  for (var prop in styleProps) {
-    var _attr = void 0;
-    if (camelCaseCache[prop]) {
-      _attr = camelCaseCache[prop];
-    } else {
-      _attr = "" + (prop.startsWith("_") ? "_" : "") + camelCase$1(prop);
-      camelCaseCache[prop] = _attr;
-    }
-    if (_isStyledProp(_attr)) {
-      styles[_attr] = styleProps[prop];
-    } else if (_isStyledProp(prop)) {
-      styles[_attr] = styleProps[prop];
-    } else {
-      // @ts-expect-error Not sure how to cast returned string into typeof key of U
-      attrs[prop] = styleProps[prop];
-    }
+// src/layout.ts
+function orient(options) {
+  const {
+    orientation,
+    vertical,
+    horizontal
+  } = options;
+  if (!orientation)
+    return {};
+  return orientation === "vertical" ? vertical : horizontal;
+}
+__name(orient, "orient");
+
+// src/match.ts
+function match(value, lookup, ...args) {
+  if (value in lookup) {
+    let returnValue = lookup[value];
+    return typeof returnValue === "function" ? returnValue(...args) : returnValue;
   }
-  return {
-    styles: styles,
-    attrs: attrs
-  };
+  let error = new Error(`Tried to handle "${value}" but there is no handler defined. Only defined handlers are: ${Object.keys(lookup).map((key) => `"${key}"`).join(", ")}.`);
+  if (Error.captureStackTrace)
+    Error.captureStackTrace(error, match);
+  throw error;
+}
+__name(match, "match");
+
+// src/props.ts
+import { computed } from "vue";
+import { filterUndefined } from "@chakra-ui/utils";
+var vueThemingProps = {
+  colorScheme: String,
+  variant: String,
+  size: String,
+  styleConfig: String
 };
+var SNA = [Number, String, Array];
+var SAO = [String, Array, Object];
+var SNAO = [Number, String, Array, Object];
+var useThemingProps = /* @__PURE__ */ __name((props) => computed(() => filterUndefined({
+  colorScheme: props.colorScheme,
+  variant: props.variant,
+  size: props.size,
+  styleConfig: props.styleConfig
+})), "useThemingProps");
 
-function genId(size) {
-  if (size === void 0) {
-    size = 3;
+// src/scope.ts
+import { getCurrentScope, onScopeDispose } from "vue";
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
   }
-  var uuid = "";
-  var dictionary = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  for (var i = 0; i < size; i++) {
-    uuid += dictionary.charAt(Math.floor(Math.random() * dictionary.length));
-  }
-  if (process.env.NODE_ENV === "test") return "EMPTY_STRING";
-  return uuid;
+  return false;
 }
+__name(tryOnScopeDispose, "tryOnScopeDispose");
 
-var camelCase = memoize(function (key) {
-  return camelCase$1(key);
-});
+// src/string.ts
+import _camelCase from "lodash.camelcase";
+import memoize2 from "lodash.memoize";
+var camelCase2 = memoize2((key) => _camelCase(key));
 
-export { Focus, FocusResult, Keys, SAO, SNA, SNAO, camelCase, contains, createContext, debounce, defaultWindow, extractStyleAttrs, focusElement, focusIn, genId, getSelector, getValidChildren, isObjectComponent, match, orient, tryOnScopeDispose, unrefElement, useDebouncedRef, useRef, useThemingProps, vueThemingProps };
+// src/vue-utils.ts
+import { isObject } from "@chakra-ui/utils";
+import { inject, provide, isVNode } from "vue";
+function createContext(options = {}, defaults) {
+  const {
+    strict = true,
+    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
+    name
+  } = options;
+  let contextSymbol = Symbol(`${name}Symbol`);
+  function Provider(payload) {
+    provide(contextSymbol, payload);
+  }
+  __name(Provider, "Provider");
+  function useContext(fallback = null) {
+    const context = inject(contextSymbol, fallback);
+    if (!context && strict) {
+      throw new Error(errorMessage);
+    }
+    return context;
+  }
+  __name(useContext, "useContext");
+  return [Provider, useContext, contextSymbol];
+}
+__name(createContext, "createContext");
+function getValidChildren(slots) {
+  var _a;
+  const slotArray = ((_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) || [];
+  return slotArray.filter((child) => {
+    return isVNode(child);
+  });
+}
+__name(getValidChildren, "getValidChildren");
+function isObjectComponent(subject) {
+  const validComponentTypes = ["function", "object"];
+  if (!validComponentTypes.includes(typeof subject))
+    return false;
+  if (isObject(subject)) {
+    if (typeof (subject == null ? void 0 : subject.render) === "function" && isVNode(subject.render()))
+      return true;
+    else if (typeof (subject == null ? void 0 : subject.setup) === "function")
+      return true;
+  }
+  return false;
+}
+__name(isObjectComponent, "isObjectComponent");
+export {
+  Focus,
+  FocusResult,
+  Keys,
+  SAO,
+  SNA,
+  SNAO,
+  camelCase2 as camelCase,
+  canUseDOM,
+  contains,
+  createContext,
+  debounce,
+  defaultWindow,
+  extractStyleAttrs,
+  focusElement,
+  focusIn,
+  genId,
+  getSelector,
+  getValidChildren,
+  isObjectComponent,
+  match,
+  orient,
+  tryOnScopeDispose,
+  unrefElement,
+  useDebouncedRef,
+  useRef,
+  useThemingProps,
+  vueThemingProps
+};

package.json

 {
   "name": "@chakra-ui/vue-utils",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "main": "dist/chakra-ui-vue-utils.cjs.js",
@@ -39,4 +39,9 @@ "module": "dist/chakra-ui-vue-utils.esm.js",
   "scripts": {
-    "clean": "rimraf dist"
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "types:check": "tsc --noEmit",
+    "dev": "tsup --watch",
+    "build:types": "tsup src --dts-only"
   }
 }

src/props.ts

@@ -1,2 +0,2 @@
-import { DOMElements, ThemingProps } from "@chakra-ui/vue-system"
+import type { ThemingProps } from "@chakra-ui/styled-system"
 import { computed, PropType } from "vue"
@@ -20,5 +20,3 @@ import { filterUndefined } from "@chakra-ui/utils"
     "colorScheme" | "variant" | "size" | "styleConfig"
-  > {
-  as?: DOMElements | "router-link" | "nuxt-link"
-}
+  > {}
 
@@ -25,0 +23,0 @@ export const useThemingProps = <O extends ThemingProps & {}>(props: O) =>

src/string.ts

 import _camelCase from "lodash.camelcase"
 import memoize from "lodash.memoize"
 
-export const camelCase = memoize((key: string) => _camelCase(key))
+export const camelCase: (key: string) => string = memoize((key: string) =>
+  _camelCase(key)
+)

src/vue-utils.ts

@@ -1,3 +0,2 @@
-import { isFunction, isObject, Dict } from "@chakra-ui/utils"
-import { SystemStyleObject } from "@chakra-ui/styled-system"
+import { isObject } from "@chakra-ui/utils"
 import { inject, InjectionKey, provide, isVNode, Slots, VNode } from "vue"
@@ -4,0 +3,0 @@

tests/vue-helpers.test.ts

@@ -1,3 +0,3 @@
-import { render } from "@chakra-ui/vue-test-utils"
-import { createContext } from "@chakra-ui/vue-utils"
+import { render } from "../../test-utils"
+import { createContext } from "../../utils"
 import { defineComponent, h } from "vue"
@@ -4,0 +4,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110973

increased by20.62%

Number of low supply chain risk alerts

3

decreased by-25%

Worsened metrics

Number of package files

45

decreased by-25%

Lines of code

1731

decreased by-26.12%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes