mirror of
https://github.com/imezx/Warp.git
synced 2025-04-24 23:20:02 +00:00
651 lines
18 KiB
JavaScript
651 lines
18 KiB
JavaScript
import { toRef, toValue, until, noop, tryOnScopeDispose, isClient } from '@vueuse/shared';
|
|
import Schema from 'async-validator';
|
|
import { shallowRef, ref, computed, watch, watchEffect, isRef, nextTick } from 'vue-demi';
|
|
import axios, { AxiosError } from 'axios';
|
|
import { camelCase, capitalCase, constantCase, dotCase, headerCase, noCase, paramCase, pascalCase, pathCase, sentenceCase, snakeCase } from 'change-case';
|
|
import Cookie from 'universal-cookie';
|
|
import { createDrauu } from 'drauu';
|
|
import { createEventHook, unrefElement, tryOnScopeDispose as tryOnScopeDispose$1, watchPausable, tryOnMounted, toValue as toValue$1, defaultDocument } from '@vueuse/core';
|
|
import { createFocusTrap } from 'focus-trap';
|
|
import Fuse from 'fuse.js';
|
|
import { get, set, del, update } from 'idb-keyval';
|
|
import jwt_decode from 'jwt-decode';
|
|
import nprogress from 'nprogress';
|
|
import QRCode from 'qrcode';
|
|
import Sortable from 'sortablejs';
|
|
|
|
const AsyncValidatorSchema = Schema.default || Schema;
|
|
function useAsyncValidator(value, rules, options = {}) {
|
|
const {
|
|
validateOption = {},
|
|
immediate = true,
|
|
manual = false
|
|
} = options;
|
|
const valueRef = toRef(value);
|
|
const errorInfo = shallowRef(null);
|
|
const isFinished = ref(true);
|
|
const pass = ref(!immediate || manual);
|
|
const errors = computed(() => {
|
|
var _a;
|
|
return ((_a = errorInfo.value) == null ? void 0 : _a.errors) || [];
|
|
});
|
|
const errorFields = computed(() => {
|
|
var _a;
|
|
return ((_a = errorInfo.value) == null ? void 0 : _a.fields) || {};
|
|
});
|
|
const validator = computed(() => new AsyncValidatorSchema(toValue(rules)));
|
|
const execute = async () => {
|
|
isFinished.value = false;
|
|
pass.value = false;
|
|
try {
|
|
await validator.value.validate(valueRef.value, validateOption);
|
|
pass.value = true;
|
|
errorInfo.value = null;
|
|
} catch (err) {
|
|
errorInfo.value = err;
|
|
} finally {
|
|
isFinished.value = true;
|
|
}
|
|
return {
|
|
pass: pass.value,
|
|
errorInfo: errorInfo.value,
|
|
errors: errors.value,
|
|
errorFields: errorFields.value
|
|
};
|
|
};
|
|
if (!manual) {
|
|
watch(
|
|
[valueRef, validator],
|
|
() => execute(),
|
|
{ immediate, deep: true }
|
|
);
|
|
}
|
|
const shell = {
|
|
isFinished,
|
|
pass,
|
|
errors,
|
|
errorInfo,
|
|
errorFields,
|
|
execute
|
|
};
|
|
function waitUntilFinished() {
|
|
return new Promise((resolve, reject) => {
|
|
until(isFinished).toBe(true).then(() => resolve(shell)).catch((error) => reject(error));
|
|
});
|
|
}
|
|
return {
|
|
...shell,
|
|
then(onFulfilled, onRejected) {
|
|
return waitUntilFinished().then(onFulfilled, onRejected);
|
|
}
|
|
};
|
|
}
|
|
|
|
function useAxios(...args) {
|
|
const url = typeof args[0] === "string" ? args[0] : void 0;
|
|
const argsPlaceholder = typeof url === "string" ? 1 : 0;
|
|
const defaultOptions = {
|
|
immediate: !!argsPlaceholder,
|
|
shallow: true
|
|
};
|
|
let defaultConfig = {};
|
|
let instance = axios;
|
|
let options = defaultOptions;
|
|
const isAxiosInstance = (val) => !!(val == null ? void 0 : val.request);
|
|
if (args.length > 0 + argsPlaceholder) {
|
|
if (isAxiosInstance(args[0 + argsPlaceholder]))
|
|
instance = args[0 + argsPlaceholder];
|
|
else
|
|
defaultConfig = args[0 + argsPlaceholder];
|
|
}
|
|
if (args.length > 1 + argsPlaceholder) {
|
|
if (isAxiosInstance(args[1 + argsPlaceholder]))
|
|
instance = args[1 + argsPlaceholder];
|
|
}
|
|
if (args.length === 2 + argsPlaceholder && !isAxiosInstance(args[1 + argsPlaceholder]) || args.length === 3 + argsPlaceholder)
|
|
options = args[args.length - 1] || defaultOptions;
|
|
const {
|
|
initialData,
|
|
shallow,
|
|
onSuccess = noop,
|
|
onError = noop,
|
|
immediate,
|
|
resetOnExecute = false
|
|
} = options;
|
|
const response = shallowRef();
|
|
const data = (shallow ? shallowRef : ref)(initialData);
|
|
const isFinished = ref(false);
|
|
const isLoading = ref(false);
|
|
const isAborted = ref(false);
|
|
const error = shallowRef();
|
|
const cancelTokenSource = axios.CancelToken.source;
|
|
let cancelToken = cancelTokenSource();
|
|
const abort = (message) => {
|
|
if (isFinished.value || !isLoading.value)
|
|
return;
|
|
cancelToken.cancel(message);
|
|
cancelToken = cancelTokenSource();
|
|
isAborted.value = true;
|
|
isLoading.value = false;
|
|
isFinished.value = false;
|
|
};
|
|
const loading = (loading2) => {
|
|
isLoading.value = loading2;
|
|
isFinished.value = !loading2;
|
|
};
|
|
const resetData = () => {
|
|
if (resetOnExecute)
|
|
data.value = initialData;
|
|
};
|
|
const waitUntilFinished = () => new Promise((resolve, reject) => {
|
|
until(isFinished).toBe(true).then(() => error.value ? reject(error.value) : resolve(result));
|
|
});
|
|
const promise = {
|
|
then: (...args2) => waitUntilFinished().then(...args2),
|
|
catch: (...args2) => waitUntilFinished().catch(...args2)
|
|
};
|
|
let executeCounter = 0;
|
|
const execute = (executeUrl = url, config = {}) => {
|
|
error.value = void 0;
|
|
const _url = typeof executeUrl === "string" ? executeUrl : url != null ? url : config.url;
|
|
if (_url === void 0) {
|
|
error.value = new AxiosError(AxiosError.ERR_INVALID_URL);
|
|
isFinished.value = true;
|
|
return promise;
|
|
}
|
|
resetData();
|
|
abort();
|
|
loading(true);
|
|
executeCounter += 1;
|
|
const currentExecuteCounter = executeCounter;
|
|
isAborted.value = false;
|
|
instance(_url, { ...defaultConfig, ...typeof executeUrl === "object" ? executeUrl : config, cancelToken: cancelToken.token }).then((r) => {
|
|
if (isAborted.value)
|
|
return;
|
|
response.value = r;
|
|
const result2 = r.data;
|
|
data.value = result2;
|
|
onSuccess(result2);
|
|
}).catch((e) => {
|
|
error.value = e;
|
|
onError(e);
|
|
}).finally(() => {
|
|
var _a;
|
|
(_a = options.onFinish) == null ? void 0 : _a.call(options);
|
|
if (currentExecuteCounter === executeCounter)
|
|
loading(false);
|
|
});
|
|
return promise;
|
|
};
|
|
if (immediate && url)
|
|
execute();
|
|
const result = {
|
|
response,
|
|
data,
|
|
error,
|
|
isFinished,
|
|
isLoading,
|
|
cancel: abort,
|
|
isAborted,
|
|
isCanceled: isAborted,
|
|
abort,
|
|
execute
|
|
};
|
|
return {
|
|
...result,
|
|
...promise
|
|
};
|
|
}
|
|
|
|
var changeCase = /*#__PURE__*/Object.freeze({
|
|
__proto__: null,
|
|
camelCase: camelCase,
|
|
capitalCase: capitalCase,
|
|
constantCase: constantCase,
|
|
dotCase: dotCase,
|
|
headerCase: headerCase,
|
|
noCase: noCase,
|
|
paramCase: paramCase,
|
|
pascalCase: pascalCase,
|
|
pathCase: pathCase,
|
|
sentenceCase: sentenceCase,
|
|
snakeCase: snakeCase
|
|
});
|
|
|
|
function useChangeCase(input, type, options) {
|
|
if (typeof input === "function")
|
|
return computed(() => changeCase[type](toValue(input), options));
|
|
const text = ref(input);
|
|
return computed({
|
|
get() {
|
|
return changeCase[type](text.value, options);
|
|
},
|
|
set(value) {
|
|
text.value = value;
|
|
}
|
|
});
|
|
}
|
|
|
|
function createCookies(req) {
|
|
const universalCookie = new Cookie(req ? req.headers.cookie : null);
|
|
return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie);
|
|
}
|
|
function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}, cookies = new Cookie()) {
|
|
const watchingDependencies = autoUpdateDependencies ? [...dependencies || []] : dependencies;
|
|
let previousCookies = cookies.getAll({ doNotParse: true });
|
|
const touches = ref(0);
|
|
const onChange = () => {
|
|
const newCookies = cookies.getAll({ doNotParse: true });
|
|
if (shouldUpdate(
|
|
watchingDependencies || null,
|
|
newCookies,
|
|
previousCookies
|
|
))
|
|
touches.value++;
|
|
previousCookies = newCookies;
|
|
};
|
|
cookies.addChangeListener(onChange);
|
|
tryOnScopeDispose(() => {
|
|
cookies.removeChangeListener(onChange);
|
|
});
|
|
return {
|
|
/**
|
|
* Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
|
|
*/
|
|
get: (...args) => {
|
|
if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0]))
|
|
watchingDependencies.push(args[0]);
|
|
touches.value;
|
|
return cookies.get(args[0], { doNotParse, ...args[1] });
|
|
},
|
|
/**
|
|
* Reactive get all cookies
|
|
*/
|
|
getAll: (...args) => {
|
|
touches.value;
|
|
return cookies.getAll({ doNotParse, ...args[0] });
|
|
},
|
|
set: (...args) => cookies.set(...args),
|
|
remove: (...args) => cookies.remove(...args),
|
|
addChangeListener: (...args) => cookies.addChangeListener(...args),
|
|
removeChangeListener: (...args) => cookies.removeChangeListener(...args)
|
|
};
|
|
}
|
|
function shouldUpdate(dependencies, newCookies, oldCookies) {
|
|
if (!dependencies)
|
|
return true;
|
|
for (const dependency of dependencies) {
|
|
if (newCookies[dependency] !== oldCookies[dependency])
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function useDrauu(target, options) {
|
|
const drauuInstance = ref();
|
|
let disposables = [];
|
|
const onChangedHook = createEventHook();
|
|
const onCanceledHook = createEventHook();
|
|
const onCommittedHook = createEventHook();
|
|
const onStartHook = createEventHook();
|
|
const onEndHook = createEventHook();
|
|
const canUndo = ref(false);
|
|
const canRedo = ref(false);
|
|
const altPressed = ref(false);
|
|
const shiftPressed = ref(false);
|
|
const brush = ref({
|
|
color: "black",
|
|
size: 3,
|
|
arrowEnd: false,
|
|
cornerRadius: 0,
|
|
dasharray: void 0,
|
|
fill: "transparent",
|
|
mode: "draw",
|
|
...options == null ? void 0 : options.brush
|
|
});
|
|
watch(brush, () => {
|
|
const instance = drauuInstance.value;
|
|
if (instance) {
|
|
instance.brush = brush.value;
|
|
instance.mode = brush.value.mode;
|
|
}
|
|
}, { deep: true });
|
|
const undo = () => {
|
|
var _a;
|
|
return (_a = drauuInstance.value) == null ? void 0 : _a.undo();
|
|
};
|
|
const redo = () => {
|
|
var _a;
|
|
return (_a = drauuInstance.value) == null ? void 0 : _a.redo();
|
|
};
|
|
const clear = () => {
|
|
var _a;
|
|
return (_a = drauuInstance.value) == null ? void 0 : _a.clear();
|
|
};
|
|
const cancel = () => {
|
|
var _a;
|
|
return (_a = drauuInstance.value) == null ? void 0 : _a.cancel();
|
|
};
|
|
const load = (svg) => {
|
|
var _a;
|
|
return (_a = drauuInstance.value) == null ? void 0 : _a.load(svg);
|
|
};
|
|
const dump = () => {
|
|
var _a;
|
|
return (_a = drauuInstance.value) == null ? void 0 : _a.dump();
|
|
};
|
|
const cleanup = () => {
|
|
var _a;
|
|
disposables.forEach((dispose) => dispose());
|
|
(_a = drauuInstance.value) == null ? void 0 : _a.unmount();
|
|
};
|
|
const syncStatus = () => {
|
|
if (drauuInstance.value) {
|
|
canUndo.value = drauuInstance.value.canUndo();
|
|
canRedo.value = drauuInstance.value.canRedo();
|
|
altPressed.value = drauuInstance.value.altPressed;
|
|
shiftPressed.value = drauuInstance.value.shiftPressed;
|
|
}
|
|
};
|
|
watch(
|
|
() => unrefElement(target),
|
|
(el) => {
|
|
if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement))
|
|
return;
|
|
if (drauuInstance.value)
|
|
cleanup();
|
|
drauuInstance.value = createDrauu({ el, ...options });
|
|
syncStatus();
|
|
disposables = [
|
|
drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
|
|
drauuInstance.value.on("committed", (node) => onCommittedHook.trigger(node)),
|
|
drauuInstance.value.on("start", () => onStartHook.trigger()),
|
|
drauuInstance.value.on("end", () => onEndHook.trigger()),
|
|
drauuInstance.value.on("changed", () => {
|
|
syncStatus();
|
|
onChangedHook.trigger();
|
|
})
|
|
];
|
|
},
|
|
{ flush: "post" }
|
|
);
|
|
tryOnScopeDispose(() => cleanup());
|
|
return {
|
|
drauuInstance,
|
|
load,
|
|
dump,
|
|
clear,
|
|
cancel,
|
|
undo,
|
|
redo,
|
|
canUndo,
|
|
canRedo,
|
|
brush,
|
|
onChanged: onChangedHook.on,
|
|
onCommitted: onCommittedHook.on,
|
|
onStart: onStartHook.on,
|
|
onEnd: onEndHook.on,
|
|
onCanceled: onCanceledHook.on
|
|
};
|
|
}
|
|
|
|
function useFocusTrap(target, options = {}) {
|
|
let trap;
|
|
const { immediate, ...focusTrapOptions } = options;
|
|
const hasFocus = ref(false);
|
|
const isPaused = ref(false);
|
|
const activate = (opts) => trap && trap.activate(opts);
|
|
const deactivate = (opts) => trap && trap.deactivate(opts);
|
|
const pause = () => {
|
|
if (trap) {
|
|
trap.pause();
|
|
isPaused.value = true;
|
|
}
|
|
};
|
|
const unpause = () => {
|
|
if (trap) {
|
|
trap.unpause();
|
|
isPaused.value = false;
|
|
}
|
|
};
|
|
watch(
|
|
() => unrefElement(target),
|
|
(el) => {
|
|
if (!el)
|
|
return;
|
|
trap = createFocusTrap(el, {
|
|
...focusTrapOptions,
|
|
onActivate() {
|
|
hasFocus.value = true;
|
|
if (options.onActivate)
|
|
options.onActivate();
|
|
},
|
|
onDeactivate() {
|
|
hasFocus.value = false;
|
|
if (options.onDeactivate)
|
|
options.onDeactivate();
|
|
}
|
|
});
|
|
if (immediate)
|
|
activate();
|
|
},
|
|
{ flush: "post" }
|
|
);
|
|
tryOnScopeDispose$1(() => deactivate());
|
|
return {
|
|
hasFocus,
|
|
isPaused,
|
|
activate,
|
|
deactivate,
|
|
pause,
|
|
unpause
|
|
};
|
|
}
|
|
|
|
function useFuse(search, data, options) {
|
|
const createFuse = () => {
|
|
var _a, _b;
|
|
return new Fuse(
|
|
(_a = toValue(data)) != null ? _a : [],
|
|
(_b = toValue(options)) == null ? void 0 : _b.fuseOptions
|
|
);
|
|
};
|
|
const fuse = ref(createFuse());
|
|
watch(
|
|
() => {
|
|
var _a;
|
|
return (_a = toValue(options)) == null ? void 0 : _a.fuseOptions;
|
|
},
|
|
() => {
|
|
fuse.value = createFuse();
|
|
},
|
|
{ deep: true }
|
|
);
|
|
watch(
|
|
() => toValue(data),
|
|
(newData) => {
|
|
fuse.value.setCollection(newData);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
const results = computed(() => {
|
|
const resolved = toValue(options);
|
|
if ((resolved == null ? void 0 : resolved.matchAllWhenSearchEmpty) && !toValue(search))
|
|
return toValue(data).map((item, index) => ({ item, refIndex: index }));
|
|
const limit = resolved == null ? void 0 : resolved.resultLimit;
|
|
return fuse.value.search(toValue(search), limit ? { limit } : void 0);
|
|
});
|
|
return {
|
|
fuse,
|
|
results
|
|
};
|
|
}
|
|
|
|
function useIDBKeyval(key, initialValue, options = {}) {
|
|
const {
|
|
flush = "pre",
|
|
deep = true,
|
|
shallow = false,
|
|
onError = (e) => {
|
|
console.error(e);
|
|
},
|
|
writeDefaults = true
|
|
} = options;
|
|
const isFinished = ref(false);
|
|
const data = (shallow ? shallowRef : ref)(initialValue);
|
|
const rawInit = toValue(initialValue);
|
|
async function read() {
|
|
try {
|
|
const rawValue = await get(key);
|
|
if (rawValue === void 0) {
|
|
if (rawInit !== void 0 && rawInit !== null && writeDefaults)
|
|
await set(key, rawInit);
|
|
} else {
|
|
data.value = rawValue;
|
|
}
|
|
} catch (e) {
|
|
onError(e);
|
|
}
|
|
isFinished.value = true;
|
|
}
|
|
read();
|
|
async function write() {
|
|
try {
|
|
if (data.value == null) {
|
|
await del(key);
|
|
} else {
|
|
if (Array.isArray(data.value))
|
|
await update(key, () => JSON.parse(JSON.stringify(data.value)));
|
|
else if (typeof data.value === "object")
|
|
await update(key, () => ({ ...data.value }));
|
|
else
|
|
await update(key, () => data.value);
|
|
}
|
|
} catch (e) {
|
|
onError(e);
|
|
}
|
|
}
|
|
const {
|
|
pause: pauseWatch,
|
|
resume: resumeWatch
|
|
} = watchPausable(data, () => write(), { flush, deep });
|
|
async function setData(value) {
|
|
pauseWatch();
|
|
data.value = value;
|
|
await write();
|
|
resumeWatch();
|
|
}
|
|
return {
|
|
set: setData,
|
|
isFinished,
|
|
data
|
|
};
|
|
}
|
|
|
|
function useJwt(encodedJwt, options = {}) {
|
|
const {
|
|
onError,
|
|
fallbackValue = null
|
|
} = options;
|
|
const decodeWithFallback = (encodedJwt2, options2) => {
|
|
try {
|
|
return jwt_decode(encodedJwt2, options2);
|
|
} catch (err) {
|
|
onError == null ? void 0 : onError(err);
|
|
return fallbackValue;
|
|
}
|
|
};
|
|
const header = computed(() => decodeWithFallback(toValue(encodedJwt), { header: true }));
|
|
const payload = computed(() => decodeWithFallback(toValue(encodedJwt)));
|
|
return {
|
|
header,
|
|
payload
|
|
};
|
|
}
|
|
|
|
function useNProgress(currentProgress = null, options) {
|
|
const progress = ref(currentProgress);
|
|
const isLoading = computed({
|
|
set: (load) => load ? nprogress.start() : nprogress.done(),
|
|
get: () => typeof progress.value === "number" && progress.value < 1
|
|
});
|
|
if (options)
|
|
nprogress.configure(options);
|
|
const setProgress = nprogress.set;
|
|
nprogress.set = (n) => {
|
|
progress.value = n;
|
|
return setProgress.call(nprogress, n);
|
|
};
|
|
watchEffect(() => {
|
|
if (typeof progress.value === "number" && isClient)
|
|
setProgress.call(nprogress, progress.value);
|
|
});
|
|
tryOnScopeDispose(nprogress.remove);
|
|
return {
|
|
isLoading,
|
|
progress,
|
|
start: nprogress.start,
|
|
done: nprogress.done,
|
|
remove: () => {
|
|
progress.value = null;
|
|
nprogress.remove();
|
|
}
|
|
};
|
|
}
|
|
|
|
function useQRCode(text, options) {
|
|
const src = toRef(text);
|
|
const result = ref("");
|
|
watch(
|
|
src,
|
|
async (value) => {
|
|
if (src.value && isClient)
|
|
result.value = await QRCode.toDataURL(value, options);
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
return result;
|
|
}
|
|
|
|
function useSortable(el, list, options = {}) {
|
|
let sortable;
|
|
const { document = defaultDocument, ...resetOptions } = options;
|
|
const defaultOptions = {
|
|
onUpdate: (e) => {
|
|
moveArrayElement(list, e.oldIndex, e.newIndex);
|
|
}
|
|
};
|
|
const start = () => {
|
|
const target = typeof el === "string" ? document == null ? void 0 : document.querySelector(el) : unrefElement(el);
|
|
if (!target || sortable !== void 0)
|
|
return;
|
|
sortable = new Sortable(target, { ...defaultOptions, ...resetOptions });
|
|
};
|
|
const stop = () => {
|
|
sortable == null ? void 0 : sortable.destroy();
|
|
sortable = void 0;
|
|
};
|
|
const option = (name, value) => {
|
|
if (value !== void 0)
|
|
sortable == null ? void 0 : sortable.option(name, value);
|
|
else
|
|
return sortable == null ? void 0 : sortable.option(name);
|
|
};
|
|
tryOnMounted(start);
|
|
tryOnScopeDispose$1(stop);
|
|
return { stop, start, option };
|
|
}
|
|
function moveArrayElement(list, from, to) {
|
|
const _valueIsRef = isRef(list);
|
|
const array = _valueIsRef ? [...toValue$1(list)] : toValue$1(list);
|
|
if (to >= 0 && to < array.length) {
|
|
const element = array.splice(from, 1)[0];
|
|
nextTick(() => {
|
|
array.splice(to, 0, element);
|
|
if (_valueIsRef)
|
|
list.value = array;
|
|
});
|
|
}
|
|
}
|
|
|
|
export { createCookies, moveArrayElement, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };
|