|
1 | | -export * from './vue-utils' |
2 | | -export * from './layout' |
3 | | -export * from './dom' |
4 | | -export * from './dom-query' |
5 | | -export * from './types' |
6 | | -export * from './timers' |
7 | | -export * from './props' |
| 1 | +import { isObject } from '@chakra-ui/utils'; |
| 2 | +import { isVNode, provide, inject, ref, onBeforeUpdate, unref, customRef } from 'vue'; |
| 3 | + |
| 4 | +/** |
| 5 | + * Creates a named context, provider, and hook. |
| 6 | + * |
| 7 | + * @param options create context options |
| 8 | + */ |
| 9 | +function createContext(options) { |
| 10 | + if (options === void 0) { |
| 11 | + options = {}; |
| 12 | + } |
| 13 | + |
| 14 | + var _options = options, |
| 15 | + _options$strict = _options.strict, |
| 16 | + strict = _options$strict === void 0 ? true : _options$strict, |
| 17 | + _options$errorMessage = _options.errorMessage, |
| 18 | + errorMessage = _options$errorMessage === void 0 ? 'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider' : _options$errorMessage, |
| 19 | + name = _options.name; |
| 20 | + var contextSymbol = Symbol(name + "Symbol"); |
| 21 | + |
| 22 | + function Provider(payload) { |
| 23 | + provide(contextSymbol, payload); |
| 24 | + } |
| 25 | + |
| 26 | + function useContext() { |
| 27 | + var context = inject(contextSymbol, null); |
| 28 | + |
| 29 | + if (!context && strict) { |
| 30 | + throw new Error(errorMessage); |
| 31 | + } |
| 32 | + |
| 33 | + return context; |
| 34 | + } |
| 35 | + |
| 36 | + return [Provider, useContext]; |
| 37 | +} |
| 38 | +/** |
| 39 | + * Gets only the valid children of a component, |
| 40 | + * and ignores any nullish or falsy child. |
| 41 | + * |
| 42 | + * @param slots vue slots |
| 43 | + * |
| 44 | + * see https://github.com/vuejs/vue-next/blob/HEAD/packages/runtime-core/src/helpers/renderSlot.ts |
| 45 | + */ |
| 46 | + |
| 47 | +function getValidChildren(slots) { |
| 48 | + var slotArray = (slots == null ? void 0 : slots["default"] == null ? void 0 : slots["default"]()) || []; |
| 49 | + return slotArray.filter(function (child) { |
| 50 | + return isVNode(child); |
| 51 | + }); |
| 52 | +} |
| 53 | + |
| 54 | +/** Checkes whether a provided object is a component */ |
| 55 | +function isObjectComponent(subject) { |
| 56 | + var validComponentTypes = ['function', 'object']; |
| 57 | + if (!validComponentTypes.includes(typeof subject)) return false; // Is sub |
| 58 | + |
| 59 | + if (isObject(subject)) { |
| 60 | + // Is object component with render function |
| 61 | + if (typeof (subject == null ? void 0 : subject.render) === 'function' && isVNode(subject.render())) return true; // Is object component with setup function |
| 62 | + else if (typeof (subject == null ? void 0 : subject.setup) === 'function') return true; |
| 63 | + } |
| 64 | + |
| 65 | + return false; |
| 66 | +} |
| 67 | + |
| 68 | +function orient(options) { |
| 69 | + var orientation = options.orientation, |
| 70 | + vertical = options.vertical, |
| 71 | + horizontal = options.horizontal; |
| 72 | + if (!orientation) return {}; |
| 73 | + return orientation === 'vertical' ? vertical : horizontal; |
| 74 | +} |
| 75 | + |
| 76 | +/** Debounce function */ |
| 77 | +function debounce(func, wait, immediate) { |
| 78 | + var timeout; |
| 79 | + return function () { |
| 80 | + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { |
| 81 | + args[_key] = arguments[_key]; |
| 82 | + } |
| 83 | + |
| 84 | + if (immediate && !timeout) func.apply(void 0, args); |
| 85 | + clearTimeout(timeout); |
| 86 | + timeout = setTimeout(function () { |
| 87 | + func.apply(void 0, args); |
| 88 | + }, wait); |
| 89 | + }; |
| 90 | +} |
| 91 | + |
| 92 | +/** |
| 93 | + * For internal use |
| 94 | + * |
| 95 | + * Creates refs that will be bound to the template/render function. |
| 96 | + * |
| 97 | + * Why not just use the regular `ref(null)` and bind it to the element? |
| 98 | + * |
| 99 | + * 1. To avoid unwrapping template refs which maybe components. This hook will always |
| 100 | + * give us the actual element being bound the the element, and not the component |
| 101 | + * options. |
| 102 | + * |
| 103 | + * 2. In some cases where we need an up-to-date value of the ref node, |
| 104 | + * from the consuming component, we can use this hook. |
| 105 | + * |
| 106 | + * @returns [] |
| 107 | + */ |
| 108 | +function useRef() { |
| 109 | + var refEl = ref(null); |
| 110 | + onBeforeUpdate(function () { |
| 111 | + // clear refs before DOM updates |
| 112 | + refEl.value = null; |
| 113 | + }); |
| 114 | + /** |
| 115 | + * Getter function to bind ref to value |
| 116 | + * @param el Template ref value provided by Vue |
| 117 | + */ |
| 118 | + |
| 119 | + var _ref = function _ref(el) { |
| 120 | + var _$el; |
| 121 | + |
| 122 | + refEl.value = (_$el = el == null ? void 0 : el.$el) != null ? _$el : el; |
| 123 | + }; |
| 124 | + |
| 125 | + return [_ref, refEl]; |
| 126 | +} |
| 127 | +/** Vue Component HTML Element Instance */ |
| 128 | + |
| 129 | +/** |
| 130 | + * Unwraps element from ref |
| 131 | + * @param elementRef Ref of template node |
| 132 | + */ |
| 133 | +function unrefElement(elementRef) { |
| 134 | + var _$el2; |
| 135 | + |
| 136 | + var node = unref(elementRef); |
| 137 | + return (_$el2 = node == null ? void 0 : node.$el) != null ? _$el2 : node; |
| 138 | +} |
| 139 | +/** |
| 140 | + * Creates a ref whose value updates are debounced |
| 141 | + * |
| 142 | + * @example Simple example |
| 143 | + * |
| 144 | + * ```ts |
| 145 | + * const foo = useDebouncedRef('bar') |
| 146 | + * foo.value = 'baz' |
| 147 | + * |
| 148 | + * // foo.value to be updated to 'baz' after the delay of 300ms |
| 149 | + * ``` |
| 150 | + * |
| 151 | + * @example Custom delay |
| 152 | + * |
| 153 | + * ```ts |
| 154 | + * const foo = useDebouncedRef('bar', 500) |
| 155 | + * foo.value = 'baz' |
| 156 | + * |
| 157 | + * // foo.value to be updated to 'baz' after the delay of 500ms |
| 158 | + * ``` |
| 159 | + */ |
| 160 | + |
| 161 | +function useDebouncedRef(initialValue, delay, immediate) { |
| 162 | + if (delay === void 0) { |
| 163 | + delay = 300; |
| 164 | + } |
| 165 | + |
| 166 | + if (immediate === void 0) { |
| 167 | + immediate = false; |
| 168 | + } |
| 169 | + |
| 170 | + var state = ref(initialValue); |
| 171 | + var debouncedRef = customRef(function (track, trigger) { |
| 172 | + return { |
| 173 | + get: function get() { |
| 174 | + track(); |
| 175 | + return state.value; |
| 176 | + }, |
| 177 | + set: debounce(function (value) { |
| 178 | + state.value = value; |
| 179 | + trigger(); |
| 180 | + }, delay, immediate) |
| 181 | + }; |
| 182 | + }); |
| 183 | + return debouncedRef; |
| 184 | +} |
| 185 | + |
| 186 | +/** |
| 187 | + * Computes the selector of an element from the DOM |
| 188 | + * |
| 189 | + * The motivation for this method is to use it in the |
| 190 | + * resolve the issue where DOM nodes seem to be |
| 191 | + * removed from the DOM during patching for reactivity. |
| 192 | + * |
| 193 | + * This was breaking the behaviour of the `useFocusLock` |
| 194 | + * hook. |
| 195 | + * |
| 196 | + * Adopted from stack overflow: |
| 197 | + * https://stackoverflow.com/questions/22515835/javascript-find-selector-of-an-element |
| 198 | + */ |
| 199 | +function getSelector(node) { |
| 200 | + var id = node.getAttribute('id'); |
| 201 | + if (id) return '#' + id; |
| 202 | + var path = ''; |
| 203 | + |
| 204 | + var _loop = function _loop() { |
| 205 | + var name = node.localName; |
| 206 | + var parent = node.parentNode; |
| 207 | + |
| 208 | + if (!parent) { |
| 209 | + path = name + ' > ' + path; |
| 210 | + return "continue"; |
| 211 | + } |
| 212 | + |
| 213 | + if (node.getAttribute('id')) { |
| 214 | + path = '#' + node.getAttribute('id') + ' > ' + path; |
| 215 | + return "break"; |
| 216 | + } |
| 217 | + |
| 218 | + var sameTagSiblings = []; |
| 219 | + var children = parent.childNodes; |
| 220 | + children = Array.prototype.slice.call(children); |
| 221 | + children.forEach(function (child) { |
| 222 | + // @ts-ignore |
| 223 | + if (child.localName == name) { |
| 224 | + sameTagSiblings.push(child); |
| 225 | + } |
| 226 | + }); // if there are more than one |
| 227 | + // children of that type use nth-of-type |
| 228 | + |
| 229 | + if (sameTagSiblings.length > 1) { |
| 230 | + var index = sameTagSiblings.indexOf(node); |
| 231 | + name += ':nth-of-type(' + (index + 1) + ')'; |
| 232 | + } |
| 233 | + |
| 234 | + if (path) { |
| 235 | + path = name + ' > ' + path; |
| 236 | + } else { |
| 237 | + path = name; |
| 238 | + } |
| 239 | + |
| 240 | + node = parent; |
| 241 | + }; |
| 242 | + |
| 243 | + while (node) { |
| 244 | + var _ret = _loop(); |
| 245 | + |
| 246 | + if (_ret === "continue") continue; |
| 247 | + if (_ret === "break") break; |
| 248 | + } |
| 249 | + |
| 250 | + return path; |
| 251 | +} |
| 252 | + |
| 253 | +var vueThemingProps = { |
| 254 | + colorScheme: String, |
| 255 | + variant: String, |
| 256 | + size: String, |
| 257 | + styleConfig: String |
| 258 | +}; |
| 259 | +var SNA = [Number, String, Array]; |
| 260 | +var SAO = [String, Array, Object]; |
| 261 | +var SNAO = [Number, String, Array, Object]; |
| 262 | + |
| 263 | +export { SAO, SNA, SNAO, createContext, debounce, getSelector, getValidChildren, isObjectComponent, orient, unrefElement, useDebouncedRef, useRef, vueThemingProps }; |
0 commit comments