@feugene/granularity 0.4.0 → 0.4.1

package/dist/chunks/directives-Cuib0yOO.js

@@ -0,0 +1,728 @@
+import { l as runFileValidators, u as FileValidationError } from "./fileValidation-CgjTGoUx.js";
+import { t as GrLoading_default } from "../components/GrLoading/chunks/GrLoading-DihGX3ol.js";
+import { createVNode, nextTick, render } from "vue";
+//#region src/directives/autofocus.ts
+function resolveOptions(value) {
+	if (value === false) return {
+		enabled: false,
+		selector: "",
+		preventScroll: true
+	};
+	if (typeof value === "string") return {
+		enabled: true,
+		selector: value,
+		preventScroll: true
+	};
+	if (value && typeof value === "object") return {
+		enabled: value.disabled !== true,
+		selector: value.selector,
+		preventScroll: value.preventScroll ?? true
+	};
+	return {
+		enabled: true,
+		selector: void 0,
+		preventScroll: true
+	};
+}
+function tryFocus(target, preventScroll) {
+	if (!target) return;
+	const focusable = target;
+	if (typeof focusable.focus !== "function") return;
+	try {
+		focusable.focus({ preventScroll });
+	} catch {
+		focusable.focus();
+	}
+}
+/**
+* `v-autofocus` — универсальный автофокус.
+* Работает как на нативных элементах, так и на компонентах-обёртках (фокусирует вложенный `input/textarea/...`).
+*/
+var vAutofocus = { mounted(el, binding) {
+	const { enabled, selector, preventScroll } = resolveOptions(binding.value);
+	if (!enabled) return;
+	nextTick().then(() => {
+		requestAnimationFrame(() => {
+			const finalSelector = selector || "input, textarea, select, button, [tabindex]:not([tabindex=\"-1\"])";
+			if (el.matches?.(finalSelector)) {
+				tryFocus(el, preventScroll);
+				return;
+			}
+			const inner = el.querySelector?.(finalSelector);
+			tryFocus(inner, preventScroll);
+		});
+	});
+} };
+//#endregion
+//#region src/directives/autosize.ts
+var states$3 = /* @__PURE__ */ new WeakMap();
+function normalize$2(value) {
+	if (value === false) return { enabled: false };
+	if (value && typeof value === "object") return { enabled: value.enabled ?? true };
+	return { enabled: true };
+}
+function resolveTextarea(el) {
+	if (el instanceof HTMLTextAreaElement) return el;
+	return el.querySelector("textarea");
+}
+function toNumber(input) {
+	const n = Number.parseFloat(input);
+	return Number.isFinite(n) ? n : 0;
+}
+function autosize(textarea) {
+	textarea.style.height = "auto";
+	const style = getComputedStyle(textarea);
+	const border = toNumber(style.borderTopWidth) + toNumber(style.borderBottomWidth);
+	const height = style.boxSizing === "border-box" ? textarea.scrollHeight + border : textarea.scrollHeight;
+	textarea.style.height = `${height}px`;
+}
+function scheduleAutosize(textarea) {
+	nextTick().then(() => {
+		requestAnimationFrame(() => autosize(textarea));
+	});
+}
+/**
+* `v-autosize` — автоподстройка высоты `textarea`.
+*
+* Пример:
+* ```vue
+* <textarea v-autosize />
+* ```
+*/
+var vAutosize = {
+	mounted(el, binding) {
+		const { enabled } = normalize$2(binding.value);
+		const textarea = resolveTextarea(el);
+		const state = {
+			textarea,
+			onInput: null,
+			prevOverflowY: textarea ? textarea.style.overflowY : null
+		};
+		states$3.set(el, state);
+		if (!enabled || !textarea) return;
+		textarea.style.overflowY = "hidden";
+		autosize(textarea);
+		scheduleAutosize(textarea);
+		const onInput = () => {
+			const current = states$3.get(el);
+			if (!current?.textarea) return;
+			autosize(current.textarea);
+		};
+		state.onInput = onInput;
+		textarea.addEventListener("input", onInput);
+	},
+	updated(el, binding) {
+		const { enabled } = normalize$2(binding.value);
+		const state = states$3.get(el);
+		if (!state) return;
+		const nextTextarea = resolveTextarea(el);
+		if (state.textarea !== nextTextarea) {
+			if (state.textarea && state.onInput) state.textarea.removeEventListener("input", state.onInput);
+			state.textarea = nextTextarea;
+			state.prevOverflowY = nextTextarea ? nextTextarea.style.overflowY : null;
+			state.onInput = null;
+			if (enabled && nextTextarea) {
+				nextTextarea.style.overflowY = "hidden";
+				autosize(nextTextarea);
+				scheduleAutosize(nextTextarea);
+				const onInput = () => {
+					const current = states$3.get(el);
+					if (!current?.textarea) return;
+					autosize(current.textarea);
+				};
+				state.onInput = onInput;
+				nextTextarea.addEventListener("input", onInput);
+			}
+			return;
+		}
+		if (!state.textarea) return;
+		if (!enabled) {
+			if (state.onInput) {
+				state.textarea.removeEventListener("input", state.onInput);
+				state.onInput = null;
+			}
+			if (state.prevOverflowY !== null) state.textarea.style.overflowY = state.prevOverflowY;
+			return;
+		}
+		if (!state.onInput) {
+			state.prevOverflowY = state.textarea.style.overflowY;
+			state.textarea.style.overflowY = "hidden";
+			const onInput = () => {
+				const current = states$3.get(el);
+				if (!current?.textarea) return;
+				autosize(current.textarea);
+			};
+			state.onInput = onInput;
+			state.textarea.addEventListener("input", onInput);
+		}
+		autosize(state.textarea);
+		scheduleAutosize(state.textarea);
+	},
+	unmounted(el) {
+		const state = states$3.get(el);
+		if (!state) return;
+		if (state.textarea && state.onInput) {
+			state.textarea.removeEventListener("input", state.onInput);
+			if (state.prevOverflowY !== null) state.textarea.style.overflowY = state.prevOverflowY;
+		}
+		states$3.delete(el);
+	}
+};
+//#endregion
+//#region src/directives/clickOutside.ts
+function normalize$1(value) {
+	if (typeof value === "function") return {
+		enabled: true,
+		capture: true,
+		events: ["click"],
+		handler: value,
+		exclude: []
+	};
+	if (value && typeof value === "object") return {
+		enabled: value.enabled ?? true,
+		capture: value.capture ?? true,
+		events: value.events?.length ? value.events : ["click"],
+		handler: value.handler,
+		exclude: value.exclude ?? []
+	};
+	return {
+		enabled: false,
+		capture: true,
+		events: ["click"],
+		handler: void 0,
+		exclude: []
+	};
+}
+function isEventInside(el, event) {
+	const target = event.target;
+	if (!target) return false;
+	const composedPath = event.composedPath?.();
+	if (Array.isArray(composedPath)) return composedPath.includes(el);
+	return el.contains(target);
+}
+function resolveExclude(doc, exclude) {
+	const resolved = [];
+	for (const item of exclude) {
+		if (typeof item === "string") {
+			const found = doc.querySelector(item);
+			if (found instanceof HTMLElement) resolved.push(found);
+			continue;
+		}
+		if (typeof item === "function") {
+			const found = item();
+			if (found instanceof HTMLElement) resolved.push(found);
+			continue;
+		}
+		if (item instanceof HTMLElement) resolved.push(item);
+	}
+	return resolved;
+}
+var states$2 = /* @__PURE__ */ new WeakMap();
+function unbind$1(el) {
+	const state = states$2.get(el);
+	if (!state) return;
+	for (const event of state.options.events) state.doc.removeEventListener(event, state.listener, state.options.capture);
+	states$2.delete(el);
+}
+function bind$1(el, value) {
+	const options = normalize$1(value);
+	const doc = el.ownerDocument;
+	const listener = (event) => {
+		const current = states$2.get(el);
+		if (!current) return;
+		const { enabled, handler, exclude } = current.options;
+		if (!enabled || !handler) return;
+		if ("button" in event && typeof event.button === "number" && event.button !== 0) return;
+		if (!el.isConnected) return;
+		if (isEventInside(el, event)) return;
+		const excluded = resolveExclude(current.doc, exclude);
+		for (const ex of excluded) if (isEventInside(ex, event)) return;
+		handler(event);
+	};
+	const nextState = {
+		options,
+		doc,
+		listener
+	};
+	states$2.set(el, nextState);
+	if (!options.enabled || !options.handler) return;
+	for (const event of options.events) doc.addEventListener(event, listener, options.capture);
+}
+/**
+* `v-click-outside` — обработчик клика вне элемента (например, закрытие дропдауна/модалки).
+*/
+var vClickOutside = {
+	mounted(el, binding) {
+		bind$1(el, binding.value);
+	},
+	updated(el, binding) {
+		unbind$1(el);
+		bind$1(el, binding.value);
+	},
+	unmounted(el) {
+		unbind$1(el);
+	}
+};
+//#endregion
+//#region src/directives/dropzone.ts
+function normalize(value) {
+	if (typeof value === "function") return {
+		enabled: true,
+		multiple: true,
+		validators: void 0,
+		preventDefault: true,
+		stopPropagation: false,
+		onFiles: value,
+		onError: void 0,
+		onStateChange: void 0,
+		overClass: "ds-dropzone--over"
+	};
+	if (value && typeof value === "object") return {
+		enabled: value.enabled ?? true,
+		multiple: value.multiple ?? true,
+		validators: value.validators,
+		preventDefault: value.preventDefault ?? true,
+		stopPropagation: value.stopPropagation ?? false,
+		onFiles: value.onFiles,
+		onError: value.onError,
+		onStateChange: value.onStateChange,
+		overClass: value.overClass ?? "ds-dropzone--over"
+	};
+	return {
+		enabled: false,
+		multiple: true,
+		validators: void 0,
+		preventDefault: true,
+		stopPropagation: false,
+		onFiles: void 0,
+		onError: void 0,
+		onStateChange: void 0,
+		overClass: "ds-dropzone--over"
+	};
+}
+var states$1 = /* @__PURE__ */ new WeakMap();
+function setOver(el, next) {
+	const state = states$1.get(el);
+	if (!state) return;
+	const wasDomOver = el.dataset.grDropzoneOver === "true";
+	const prev = state.isOver;
+	state.isOver = next;
+	if (next) {
+		el.classList.add(state.options.overClass);
+		el.dataset.grDropzoneOver = "true";
+	} else {
+		el.classList.remove(state.options.overClass);
+		delete el.dataset.grDropzoneOver;
+	}
+	if (prev !== next || wasDomOver !== next) state.options.onStateChange?.({ isOver: next });
+}
+function unbind(el) {
+	const state = states$1.get(el);
+	if (!state) return;
+	state.overCounter = 0;
+	setOver(el, false);
+	delete el.dataset.grDropzone;
+	el.removeEventListener("dragenter", state.onDragEnter);
+	el.removeEventListener("dragover", state.onDragOver);
+	el.removeEventListener("dragleave", state.onDragLeave);
+	el.removeEventListener("drop", state.onDrop);
+	states$1.delete(el);
+}
+function bind(el, value) {
+	const state = {
+		options: normalize(value),
+		overCounter: 0,
+		isOver: false,
+		onDragEnter(event) {
+			const current = states$1.get(el);
+			if (!current?.options.enabled) return;
+			if (current.options.preventDefault) event.preventDefault();
+			if (current.options.stopPropagation) event.stopPropagation();
+			current.overCounter += 1;
+			setOver(el, true);
+		},
+		onDragOver(event) {
+			const current = states$1.get(el);
+			if (!current?.options.enabled) return;
+			if (current.options.preventDefault) event.preventDefault();
+			if (current.options.stopPropagation) event.stopPropagation();
+			if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+		},
+		onDragLeave(event) {
+			const current = states$1.get(el);
+			if (!current?.options.enabled) return;
+			if (current.options.preventDefault) event.preventDefault();
+			if (current.options.stopPropagation) event.stopPropagation();
+			current.overCounter = Math.max(0, current.overCounter - 1);
+			if (current.overCounter === 0) setOver(el, false);
+		},
+		onDrop(event) {
+			const current = states$1.get(el);
+			if (!current?.options.enabled) return;
+			if (current.options.preventDefault) event.preventDefault();
+			if (current.options.stopPropagation) event.stopPropagation();
+			current.overCounter = 0;
+			setOver(el, false);
+			const dt = event.dataTransfer;
+			const files = dt?.files ? Array.prototype.slice.call(dt.files) : [];
+			if (!files.length) return;
+			(async () => {
+				try {
+					const { files: picked, issues } = await runFileValidators(files, current.options.validators ?? [], {
+						source: "drop",
+						multiple: current.options.multiple
+					});
+					if (issues.length > 0) {
+						current.options.onError?.(new FileValidationError(issues, picked));
+						return;
+					}
+					if (!picked.length) return;
+					await current.options.onFiles?.(picked, event);
+				} catch (error) {
+					current.options.onError?.(error);
+				}
+			})();
+		}
+	};
+	states$1.set(el, state);
+	el.dataset.grDropzone = "true";
+	el.addEventListener("dragenter", state.onDragEnter);
+	el.addEventListener("dragover", state.onDragOver);
+	el.addEventListener("dragleave", state.onDragLeave);
+	el.addEventListener("drop", state.onDrop);
+}
+function update(el, value) {
+	const state = states$1.get(el);
+	if (!state) {
+		bind(el, value);
+		return;
+	}
+	const prevOverClass = state.options.overClass;
+	const nextOptions = normalize(value);
+	state.options = nextOptions;
+	if (prevOverClass !== nextOptions.overClass) {
+		el.classList.remove(prevOverClass);
+		if (state.isOver) el.classList.add(nextOptions.overClass);
+	}
+	if (!nextOptions.enabled) {
+		state.overCounter = 0;
+		setOver(el, false);
+	}
+}
+/**
+* `v-dropzone` — декларативная DnD-зона для файлов (перетаскивание + drop).
+*
+* Директива не делает загрузку сама — только нормализует события и отдаёт `File[]`.
+*/
+var vDropzone = {
+	mounted(el, binding) {
+		bind(el, binding.value);
+	},
+	updated(el, binding) {
+		update(el, binding.value);
+	},
+	unmounted(el) {
+		unbind(el);
+	}
+};
+//#endregion
+//#region src/directives/hotkey.ts
+var states = /* @__PURE__ */ new WeakMap();
+function isEditableTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable) return true;
+	const tag = target.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+}
+function normalizeBinding(value) {
+	if (!value) return {
+		enabled: false,
+		handlers: {}
+	};
+	if ("handlers" in value) {
+		const v = value;
+		return {
+			enabled: v.enabled ?? true,
+			handlers: v.handlers ?? {}
+		};
+	}
+	return {
+		enabled: true,
+		handlers: value
+	};
+}
+function normalizeKeyToken(token) {
+	const t = token.trim().toLowerCase();
+	if (t === "esc") return "Escape";
+	if (t === "escape") return "Escape";
+	if (t === "space") return " ";
+	if (t.length === 1) return t;
+	return token.trim();
+}
+function parseHotkeys(map) {
+	const parsed = [];
+	for (const [combo, entry] of Object.entries(map)) {
+		const parts = combo.split("+").map((p) => p.trim()).filter(Boolean);
+		if (!parts.length) continue;
+		let ctrl = false;
+		let meta = false;
+		let alt = false;
+		let shift = false;
+		const keyToken = parts.at(-1);
+		if (!keyToken) continue;
+		for (const p of parts.slice(0, -1)) {
+			const t = p.toLowerCase();
+			if (t === "ctrl" || t === "control") ctrl = true;
+			else if (t === "meta" || t === "cmd" || t === "command" || t === "⌘") meta = true;
+			else if (t === "alt" || t === "option") alt = true;
+			else if (t === "shift") shift = true;
+		}
+		const key = normalizeKeyToken(keyToken);
+		parsed.push({
+			original: combo,
+			key,
+			ctrl,
+			meta,
+			alt,
+			shift,
+			entry
+		});
+	}
+	return parsed;
+}
+function matchKey(expected, eventKey) {
+	if (expected === " ") return eventKey === " " || eventKey === "Spacebar";
+	if (expected.length === 1) return expected.toLowerCase() === eventKey.toLowerCase();
+	return expected === eventKey;
+}
+function resolveEntry(entry) {
+	if (typeof entry === "function") return {
+		handler: entry,
+		preventDefault: void 0,
+		stopPropagation: false,
+		allowInEditable: false
+	};
+	return {
+		handler: entry.handler,
+		preventDefault: entry.preventDefault,
+		stopPropagation: entry.stopPropagation ?? false,
+		allowInEditable: entry.allowInEditable ?? false
+	};
+}
+/**
+* `v-hotkey` — горячие клавиши на компонент/страницу.
+*
+* Пример:
+* ```vue
+* <div v-hotkey="{ 'Escape': close, 'Ctrl+K': openSearch }" />
+* ```
+*/
+var vHotkey = {
+	mounted(el, binding) {
+		if (typeof window === "undefined") return;
+		const { enabled, handlers } = normalizeBinding(binding.value);
+		const state = {
+			enabled,
+			hotkeys: parseHotkeys(handlers),
+			listener: (event) => {
+				const current = states.get(el);
+				if (!current?.enabled) return;
+				if (!el.isConnected) return;
+				const editable = isEditableTarget(event.target);
+				for (const hk of current.hotkeys) {
+					if (hk.ctrl !== event.ctrlKey) continue;
+					if (hk.meta !== event.metaKey) continue;
+					if (hk.alt !== event.altKey) continue;
+					if (hk.shift !== event.shiftKey) continue;
+					if (!matchKey(hk.key, event.key)) continue;
+					const entry = resolveEntry(hk.entry);
+					const hasModifier = hk.ctrl || hk.meta || hk.alt || hk.shift;
+					if (editable && !entry.allowInEditable && !hasModifier && hk.key !== "Escape") continue;
+					if (entry.preventDefault ?? (hk.ctrl || hk.meta || hk.alt)) event.preventDefault();
+					if (entry.stopPropagation) event.stopPropagation();
+					entry.handler(event);
+					return;
+				}
+			}
+		};
+		states.set(el, state);
+		window.addEventListener("keydown", state.listener);
+	},
+	updated(el, binding) {
+		const state = states.get(el);
+		if (!state) return;
+		const next = normalizeBinding(binding.value);
+		state.enabled = next.enabled;
+		state.hotkeys = parseHotkeys(next.handlers);
+	},
+	unmounted(el) {
+		const state = states.get(el);
+		if (!state) return;
+		window.removeEventListener("keydown", state.listener);
+		states.delete(el);
+	}
+};
+//#endregion
+//#region src/directives/loading.ts
+function isHTMLElement(value) {
+	return typeof value === "object" && value !== null && value.nodeType === 1;
+}
+function resolveTarget(input, fallback) {
+	if (!input) return fallback;
+	if (typeof input === "string") {
+		const root = fallback.getRootNode?.() ?? document;
+		const foundInRoot = typeof root.querySelector === "function" ? root.querySelector(input) : null;
+		if (isHTMLElement(foundInRoot)) return foundInRoot;
+		const foundInDocument = document.querySelector(input);
+		if (isHTMLElement(foundInDocument)) return foundInDocument;
+		return fallback;
+	}
+	if (isHTMLElement(input)) return input;
+	return fallback;
+}
+function resolveFullscreen(options, target) {
+	if (options.fullscreen != null) return options.fullscreen;
+	return target === document.body;
+}
+function ensurePositionedContainer(target, fullscreen) {
+	if (fullscreen) return () => {};
+	const prevInline = target.style.position;
+	const computed = window.getComputedStyle(target);
+	if (computed.position === "static" || !computed.position) {
+		target.style.position = "relative";
+		return () => {
+			target.style.position = prevInline;
+		};
+	}
+	return () => {};
+}
+function parseBinding(value) {
+	if (value === true || value === false) return {
+		loading: value,
+		options: {}
+	};
+	if (value && typeof value === "object") {
+		const { loading, ...rest } = value;
+		return {
+			loading: loading ?? true,
+			options: rest
+		};
+	}
+	return {
+		loading: false,
+		options: {}
+	};
+}
+var STATE_KEY = Symbol("grLoadingState");
+function getState(el) {
+	return el[STATE_KEY] ??= {};
+}
+function createLoading(options = {}, fallbackTarget) {
+	const initialTarget = resolveTarget(options.target, fallbackTarget ?? document.body);
+	const fullscreen = resolveFullscreen(options, initialTarget);
+	const target = fullscreen ? document.body : initialTarget;
+	const appContext = options.appContext;
+	const restorePosition = ensurePositionedContainer(target, fullscreen);
+	const mountEl = document.createElement("div");
+	mountEl.setAttribute("data-ds-loading-host", "");
+	target.appendChild(mountEl);
+	target.setAttribute("aria-busy", "true");
+	let current = { ...options };
+	let disposed = false;
+	function doRender() {
+		if (disposed) return;
+		const vnode = createVNode(GrLoading_default, {
+			text: current.text,
+			spinner: current.spinner,
+			spinnerClass: current.spinnerClass,
+			animated: current.animated,
+			background: current.background,
+			customClass: current.customClass,
+			zIndex: current.zIndex,
+			fullscreen
+		});
+		if (appContext) vnode.appContext = appContext;
+		render(vnode, mountEl);
+	}
+	function close() {
+		if (disposed) return;
+		disposed = true;
+		render(null, mountEl);
+		mountEl.remove();
+		restorePosition();
+		target.removeAttribute("aria-busy");
+	}
+	function setOptions(next) {
+		current = {
+			...current,
+			...next
+		};
+		doRender();
+	}
+	function setText(text) {
+		setOptions({ text });
+	}
+	doRender();
+	return {
+		close,
+		setOptions,
+		setText,
+		get target() {
+			return target;
+		}
+	};
+}
+function sync(el, value, appContext) {
+	const { loading, options } = parseBinding(value);
+	const state = getState(el);
+	if (!loading) {
+		state.controller?.close();
+		state.controller = void 0;
+		state.target = void 0;
+		state.fullscreen = void 0;
+		return;
+	}
+	const target = resolveTarget(options.target, el);
+	const fullscreen = resolveFullscreen(options, target);
+	const normalizedTarget = fullscreen ? document.body : target;
+	if (!state.controller || state.target !== normalizedTarget || state.fullscreen !== fullscreen) {
+		state.controller?.close();
+		state.controller = createLoading({
+			...options,
+			fullscreen,
+			target: normalizedTarget,
+			appContext
+		}, el);
+		state.target = normalizedTarget;
+		state.fullscreen = fullscreen;
+		return;
+	}
+	const controller = state.controller;
+	if (!controller) return;
+	controller.setOptions({
+		...options,
+		fullscreen,
+		target: normalizedTarget
+	});
+}
+var vLoading = {
+	mounted(el, binding) {
+		const appContext = binding.instance?.$?.appContext;
+		sync(el, binding.value, appContext);
+	},
+	updated(el, binding) {
+		const appContext = binding.instance?.$?.appContext;
+		sync(el, binding.value, appContext);
+	},
+	unmounted(el) {
+		const state = getState(el);
+		state.controller?.close();
+		state.controller = void 0;
+		state.target = void 0;
+		state.fullscreen = void 0;
+	}
+};
+//#endregion
+export { vClickOutside as a, vDropzone as i, vLoading as n, vAutosize as o, vHotkey as r, vAutofocus as s, createLoading as t };
+
+//# sourceMappingURL=directives-Cuib0yOO.js.map