@varlet/cli 1.20.0 → 1.21.1-alpha.64

package/lib/site/components/context/lock.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLock = exports.releaseLock = exports.addLock = exports.resolveLock = void 0;
+var vue_1 = require("vue");
+var _1 = __importDefault(require("."));
+function resolveLock() {
+    var lockCounts = Object.keys(_1.default.locks).length;
+    lockCounts <= 0 ? document.body.classList.remove('var-site--lock') : document.body.classList.add('var-site--lock');
+}
+exports.resolveLock = resolveLock;
+function addLock(uid) {
+    _1.default.locks[uid] = 1;
+    resolveLock();
+}
+exports.addLock = addLock;
+function releaseLock(uid) {
+    delete _1.default.locks[uid];
+    resolveLock();
+}
+exports.releaseLock = releaseLock;
+/**
+ * 组件锁操作
+ * @param props 组件props
+ * @param state 组件props中控制组件加锁的开关对应的key值
+ * @param use 组件props中控制组件加锁的开关是否可用对应的key值
+ */
+function useLock(props, state, use) {
+    var uid = vue_1.getCurrentInstance().uid;
+    if (use) {
+        vue_1.watch(function () { return props[use]; }, function (newValue) {
+            if (newValue === false) {
+                // 改变为禁用状态 组件解锁
+                releaseLock(uid);
+            }
+            else if (newValue === true && props[state] === true) {
+                // 改变为启用状态 并且popup处于开启状态 组件加锁
+                addLock(uid);
+            }
+        });
+    }
+    vue_1.watch(function () { return props[state]; }, function (newValue) {
+        if (use && props[use] === false) {
+            return;
+        }
+        if (newValue === true) {
+            // popup开启 组件加锁
+            addLock(uid);
+        }
+        else {
+            // popup关闭 组件解锁
+            releaseLock(uid);
+        }
+    });
+    vue_1.onBeforeMount(function () {
+        if (use && props[use] === false) {
+            return;
+        }
+        if (props[state] === true) {
+            // popup处于开启状态 组件挂载 组件加锁
+            addLock(uid);
+        }
+    });
+    vue_1.onUnmounted(function () {
+        if (use && props[use] === false) {
+            return;
+        }
+        if (props[state] === true) {
+            // popup处于开启状态 组件卸载 组件解锁
+            releaseLock(uid);
+        }
+    });
+    vue_1.onActivated(function () {
+        if (use && props[use] === false) {
+            return;
+        }
+        if (props[state] === true) {
+            // popup处于开启状态 组件处于keepalive前台 组件加锁
+            addLock(uid);
+        }
+    });
+    vue_1.onDeactivated(function () {
+        if (use && props[use] === false) {
+            return;
+        }
+        if (props[state] === true) {
+            // popup处于开启状态 组件处于keepalive后台 组件解锁
+            releaseLock(uid);
+        }
+    });
+}
+exports.useLock = useLock;

package/lib/site/components/context/zIndex.d.ts

@@ -0,0 +1,4 @@
+import type { Ref } from 'vue';
+export declare function useZIndex(source: any, count: number): {
+    zIndex: Ref<number>;
+};

package/lib/site/components/context/zIndex.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useZIndex = void 0;
+var index_1 = __importDefault(require("./index"));
+var vue_1 = require("vue");
+function useZIndex(source, count) {
+    var zIndex = vue_1.ref(index_1.default.zIndex);
+    vue_1.watch(source, function (newValue) {
+        if (newValue) {
+            index_1.default.zIndex += count;
+            zIndex.value = index_1.default.zIndex;
+        }
+    }, { immediate: true });
+    return { zIndex: zIndex };
+}
+exports.useZIndex = useZIndex;

package/lib/site/components/icon/index.d.ts

@@ -0,0 +1,3 @@
+import Icon from './Icon.vue';
+export declare const _IconComponent: any;
+export default Icon;

package/lib/site/components/icon/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._IconComponent = void 0;
+var Icon_vue_1 = __importDefault(require("./Icon.vue"));
+Icon_vue_1.default.install = function (app) {
+    app.component(Icon_vue_1.default.name, Icon_vue_1.default);
+};
+exports._IconComponent = Icon_vue_1.default;
+exports.default = Icon_vue_1.default;

package/lib/site/components/icon/props.d.ts

@@ -0,0 +1,23 @@
+import type { PropType } from 'vue';
+export declare const props: {
+    name: {
+        type: StringConstructor;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    color: {
+        type: StringConstructor;
+    };
+    namespace: {
+        type: StringConstructor;
+        default: string;
+    };
+    transition: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    onClick: {
+        type: PropType<(event: Event) => void>;
+    };
+};

package/lib/site/components/icon/props.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.props = void 0;
+exports.props = {
+    name: {
+        type: String,
+    },
+    size: {
+        type: [Number, String],
+    },
+    color: {
+        type: String,
+    },
+    namespace: {
+        type: String,
+        default: 'var-icon',
+    },
+    transition: {
+        type: [Number, String],
+        default: 0,
+    },
+    onClick: {
+        type: Function,
+    },
+};

package/lib/site/components/loading/index.d.ts

@@ -0,0 +1,3 @@
+import Loading from './Loading.vue';
+export declare const _LoadingComponent: any;
+export default Loading;

package/lib/site/components/loading/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._LoadingComponent = void 0;
+var Loading_vue_1 = __importDefault(require("./Loading.vue"));
+Loading_vue_1.default.install = function (app) {
+    app.component(Loading_vue_1.default.name, Loading_vue_1.default);
+};
+exports._LoadingComponent = Loading_vue_1.default;
+exports.default = Loading_vue_1.default;

package/lib/site/components/loading/props.d.ts

@@ -0,0 +1,26 @@
+import type { PropType } from 'vue';
+declare type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear';
+declare type LoadingSize = 'normal' | 'mini' | 'small' | 'large';
+export declare function typeValidator(type: string): boolean;
+export declare function sizeValidator(size: string): boolean;
+export declare const props: {
+    type: {
+        type: PropType<LoadingType>;
+        default: string;
+        validator: typeof typeValidator;
+    };
+    radius: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    size: {
+        type: PropType<LoadingSize>;
+        default: string;
+        validator: typeof sizeValidator;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export {};

package/lib/site/components/loading/props.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.props = exports.sizeValidator = exports.typeValidator = void 0;
+function typeValidator(type) {
+    return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type);
+}
+exports.typeValidator = typeValidator;
+function sizeValidator(size) {
+    return ['normal', 'mini', 'small', 'large'].includes(size);
+}
+exports.sizeValidator = sizeValidator;
+exports.props = {
+    // loading类型
+    type: {
+        type: String,
+        default: 'circle',
+        validator: typeValidator,
+    },
+    radius: {
+        type: [String, Number],
+        default: 15,
+    },
+    // loading尺寸
+    size: {
+        type: String,
+        default: 'normal',
+        validator: sizeValidator,
+    },
+    // loading颜色
+    color: {
+        type: String,
+        default: 'currentColor',
+    },
+};

package/lib/site/components/menu/index.d.ts

@@ -0,0 +1,3 @@
+import Menu from './Menu.vue';
+export declare const _MenuComponent: any;
+export default Menu;

package/lib/site/components/menu/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._MenuComponent = void 0;
+var Menu_vue_1 = __importDefault(require("./Menu.vue"));
+Menu_vue_1.default.install = function (app) {
+    app.component(Menu_vue_1.default.name, Menu_vue_1.default);
+};
+exports._MenuComponent = Menu_vue_1.default;
+exports.default = Menu_vue_1.default;

package/lib/site/components/menu/props.d.ts

@@ -0,0 +1,40 @@
+import type { PropType } from 'vue';
+declare function alignmentValidator(alignment: string): boolean;
+export declare const props: {
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    alignment: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+        validator: typeof alignmentValidator;
+    };
+    offsetX: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    offsetY: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    teleport: {
+        default: string;
+    };
+    onOpen: {
+        type: PropType<() => void>;
+    };
+    onOpened: {
+        type: PropType<() => void>;
+    };
+    onClose: {
+        type: PropType<() => void>;
+    };
+    onClosed: {
+        type: PropType<() => void>;
+    };
+    'onUpdate:show': {
+        type: PropType<(show: boolean) => void>;
+    };
+};
+export {};

package/lib/site/components/menu/props.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.props = void 0;
+function alignmentValidator(alignment) {
+    return ['top', 'bottom'].includes(alignment);
+}
+exports.props = {
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    alignment: {
+        type: String,
+        default: 'top',
+        validator: alignmentValidator,
+    },
+    offsetX: {
+        type: [Number, String],
+        default: 0,
+    },
+    offsetY: {
+        type: [Number, String],
+        default: 0,
+    },
+    teleport: {
+        default: 'body',
+    },
+    onOpen: {
+        type: Function,
+    },
+    onOpened: {
+        type: Function,
+    },
+    onClose: {
+        type: Function,
+    },
+    onClosed: {
+        type: Function,
+    },
+    'onUpdate:show': {
+        type: Function,
+    },
+};

package/lib/site/components/progress/index.d.ts

@@ -0,0 +1,3 @@
+import Progress from './Progress.vue';
+export declare const _ProgressComponent: any;
+export default Progress;

package/lib/site/components/progress/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._ProgressComponent = void 0;
+var Progress_vue_1 = __importDefault(require("./Progress.vue"));
+Progress_vue_1.default.install = function (app) {
+    app.component(Progress_vue_1.default.name, Progress_vue_1.default);
+};
+exports._ProgressComponent = Progress_vue_1.default;
+exports.default = Progress_vue_1.default;

package/lib/site/components/progress/props.d.ts

@@ -0,0 +1,43 @@
+declare function modeValidator(mode: string): boolean;
+export declare const props: {
+    mode: {
+        type: StringConstructor;
+        default: string;
+        validator: typeof modeValidator;
+    };
+    lineWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+    };
+    trackColor: {
+        type: StringConstructor;
+    };
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    label: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rotate: {
+        type: NumberConstructor;
+        default: number;
+    };
+    track: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export {};

package/lib/site/components/progress/props.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.props = void 0;
+function modeValidator(mode) {
+    return ['linear', 'circle'].includes(mode);
+}
+exports.props = {
+    // progress 模式
+    mode: {
+        type: String,
+        default: 'linear',
+        validator: modeValidator,
+    },
+    // progress 线宽
+    lineWidth: {
+        type: [Number, String],
+        default: 4,
+    },
+    // progress 颜色
+    color: {
+        type: String,
+    },
+    // progress 轨道颜色
+    trackColor: {
+        type: String,
+    },
+    // 是否添加水波纹效果
+    ripple: {
+        type: Boolean,
+        default: false,
+    },
+    // progress 值
+    value: {
+        type: [Number, String],
+        default: 0,
+    },
+    // 是否显示label
+    label: {
+        type: Boolean,
+        default: false,
+    },
+    // circle 的尺寸
+    size: {
+        type: Number,
+        default: 40,
+    },
+    // circle的原点
+    rotate: {
+        type: Number,
+        default: 0,
+    },
+    // 是否显示 circle 轨道
+    track: {
+        type: Boolean,
+        default: true,
+    },
+};

package/lib/site/components/ripple/index.d.ts

@@ -0,0 +1,8 @@
+import './ripple.less';
+import '../styles/common.less';
+import type { Directive, Plugin, App } from 'vue';
+declare const Ripple: Directive & Plugin;
+export declare const _RippleComponent: import("vue").ObjectDirective<any, any> & {
+    install: (app: App<any>, ...options: any[]) => any;
+};
+export default Ripple;

package/lib/site/components/ripple/index.js

@@ -0,0 +1,125 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._RippleComponent = void 0;
+var context_1 = __importDefault(require("../context"));
+require("./ripple.less");
+require("../styles/common.less");
+var ANIMATION_DURATION = 250;
+function setStyles(element) {
+    var _a = window.getComputedStyle(element), zIndex = _a.zIndex, position = _a.position;
+    element.style.overflow = 'hidden';
+    element.style.overflowX = 'hidden';
+    element.style.overflowY = 'hidden';
+    position === 'static' && (element.style.position = 'relative');
+    zIndex === 'auto' && (element.style.zIndex = '1');
+}
+function computeRippleStyles(element, event) {
+    var _a = element.getBoundingClientRect(), top = _a.top, left = _a.left;
+    var clientWidth = element.clientWidth, clientHeight = element.clientHeight;
+    var radius = Math.sqrt(Math.pow(clientWidth, 2) + Math.pow(clientHeight, 2)) / 2;
+    var size = radius * 2;
+    var localX = event.touches[0].clientX - left;
+    var localY = event.touches[0].clientY - top;
+    var centerX = (clientWidth - radius * 2) / 2;
+    var centerY = (clientHeight - radius * 2) / 2;
+    var x = localX - radius;
+    var y = localY - radius;
+    return { x: x, y: y, centerX: centerX, centerY: centerY, size: size };
+}
+function createRipple(event) {
+    var _this = this;
+    var _ripple = this._ripple;
+    _ripple.removeRipple();
+    if (_ripple.disabled || _ripple.tasker) {
+        return;
+    }
+    var task = function () {
+        var _a;
+        _ripple.tasker = null;
+        var _b = computeRippleStyles(_this, event), x = _b.x, y = _b.y, centerX = _b.centerX, centerY = _b.centerY, size = _b.size;
+        var ripple = document.createElement('div');
+        ripple.classList.add('var-site-ripple');
+        ripple.style.opacity = "0";
+        ripple.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
+        ripple.style.width = size + "px";
+        ripple.style.height = size + "px";
+        ripple.style.backgroundColor = (_a = _ripple.color) !== null && _a !== void 0 ? _a : 'currentColor';
+        ripple.dataset.createdAt = String(performance.now());
+        setStyles(_this);
+        _this.appendChild(ripple);
+        window.setTimeout(function () {
+            ripple.style.transform = "translate(" + centerX + "px, " + centerY + "px) scale3d(1, 1, 1)";
+            ripple.style.opacity = ".25";
+        }, 20);
+    };
+    _ripple.tasker = window.setTimeout(task, 60);
+}
+function removeRipple() {
+    var _this = this;
+    var _ripple = this._ripple;
+    var task = function () {
+        var ripples = _this.querySelectorAll('.var-site-ripple');
+        if (!ripples.length) {
+            return;
+        }
+        var lastRipple = ripples[ripples.length - 1];
+        var delay = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt);
+        setTimeout(function () {
+            lastRipple.style.opacity = "0";
+            setTimeout(function () { var _a; return (_a = lastRipple.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(lastRipple); }, ANIMATION_DURATION);
+        }, delay);
+    };
+    _ripple.tasker ? setTimeout(task, 60) : task();
+}
+function forbidRippleTask() {
+    var _ripple = this._ripple;
+    if (!_ripple.touchmoveForbid) {
+        return;
+    }
+    _ripple.tasker && window.clearTimeout(_ripple.tasker);
+    _ripple.tasker = null;
+}
+function mounted(el, binding) {
+    var _a, _b, _c;
+    el._ripple = __assign(__assign({ tasker: null }, ((_a = binding.value) !== null && _a !== void 0 ? _a : {})), { touchmoveForbid: (_c = (_b = binding.value) === null || _b === void 0 ? void 0 : _b.touchmoveForbid) !== null && _c !== void 0 ? _c : context_1.default.touchmoveForbid, removeRipple: removeRipple.bind(el) });
+    el.addEventListener('touchstart', createRipple, { passive: true });
+    el.addEventListener('touchmove', forbidRippleTask, { passive: true });
+    el.addEventListener('dragstart', removeRipple, { passive: true });
+    document.addEventListener('touchend', el._ripple.removeRipple, { passive: true });
+    document.addEventListener('touchcancel', el._ripple.removeRipple, { passive: true });
+}
+function unmounted(el) {
+    el.removeEventListener('touchstart', createRipple);
+    el.removeEventListener('touchmove', forbidRippleTask);
+    el.removeEventListener('dragstart', removeRipple);
+    document.removeEventListener('touchend', el._ripple.removeRipple);
+    document.removeEventListener('touchcancel', el._ripple.removeRipple);
+}
+function updated(el, binding) {
+    var _a, _b, _c;
+    el._ripple = __assign(__assign(__assign({}, el._ripple), ((_a = binding.value) !== null && _a !== void 0 ? _a : {})), { touchmoveForbid: (_c = (_b = binding.value) === null || _b === void 0 ? void 0 : _b.touchmoveForbid) !== null && _c !== void 0 ? _c : context_1.default.touchmoveForbid, tasker: null });
+}
+var Ripple = {
+    mounted: mounted,
+    unmounted: unmounted,
+    updated: updated,
+    install: function (app) {
+        app.directive('ripple', this);
+    },
+};
+exports._RippleComponent = Ripple;
+exports.default = Ripple;

package/lib/site/components/utils/components.d.ts

@@ -0,0 +1,53 @@
+import type { Component, VNode, ComputedRef, ComponentInternalInstance, Ref } from 'vue';
+export interface MountInstance {
+    instance: any;
+    unmount: () => void;
+}
+export interface ChildrenCounter {
+    collect(instance: ComponentInternalInstance): void;
+    clear(instance: ComponentInternalInstance): void;
+    instances: ComponentInternalInstance[];
+}
+export interface BaseParentProvider<C> {
+    collect(childProvider: C): void;
+    clear(childProvider: C): void;
+}
+export declare function pickProps(props: any, propsKey: string): any;
+export declare function pickProps(props: any, propsKey: string[]): any;
+export declare function mount(component: Component): MountInstance;
+export declare function mountInstance(component: any, props?: Record<string, any>, eventListener?: Record<string, any>): {
+    unmountInstance: () => void;
+};
+export declare function flatVNodes(subTree: any): VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[];
+export declare function useAtChildrenCounter(key: symbol): {
+    length: ComputedRef<number>;
+};
+export declare function useAtParentIndex(key: symbol): {
+    index: null;
+} | {
+    index: ComputedRef<number>;
+};
+export declare function useChildren<P, C>(key: symbol): {
+    childProviders: C[];
+    bindChildren: (parentProvider: P) => void;
+};
+export declare function useParent<P, C>(key: symbol): {
+    parentProvider: null;
+    bindParent: null;
+} | {
+    parentProvider: Omit<P & BaseParentProvider<C>, "collect" | "clear">;
+    bindParent: (childProvider: C) => void;
+};
+export declare function keyInProvides(key: symbol): boolean;
+export declare function useValidation(): {
+    errorMessage: Ref<string>;
+    validate: (rules: any, value: any, apis?: any) => Promise<boolean>;
+    resetValidation: () => void;
+    validateWithTrigger: <T>(validateTrigger: T[], trigger: T, rules: any, value: any, apis?: any) => Promise<void>;
+};
+export declare function addRouteListener(cb: () => void): void;
+export declare function useTeleport(): {
+    disabled: Ref<boolean>;
+};