init
This commit is contained in:
@@ -0,0 +1,564 @@
|
||||
import { computed, isRef, reactive, unref, toRefs, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, nextTick, ref, watch, customRef, onUpdated } from "vue";
|
||||
var _a;
|
||||
const isClient = typeof window !== "undefined";
|
||||
const toString = Object.prototype.toString;
|
||||
const isFunction = (val) => typeof val === "function";
|
||||
const isNumber = (val) => typeof val === "number";
|
||||
const isString = (val) => typeof val === "string";
|
||||
const isObject = (val) => toString.call(val) === "[object Object]";
|
||||
const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
|
||||
const noop = () => {
|
||||
};
|
||||
isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
|
||||
function resolveUnref(r) {
|
||||
return typeof r === "function" ? r() : unref(r);
|
||||
}
|
||||
function createFilterWrapper(filter, fn) {
|
||||
function wrapper(...args) {
|
||||
filter(() => fn.apply(this, args), { fn, thisArg: this, args });
|
||||
}
|
||||
return wrapper;
|
||||
}
|
||||
function throttleFilter(ms, trailing = true, leading = true) {
|
||||
let lastExec = 0;
|
||||
let timer;
|
||||
let isLeading = true;
|
||||
const clear = () => {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = void 0;
|
||||
}
|
||||
};
|
||||
const filter = (invoke) => {
|
||||
const duration = resolveUnref(ms);
|
||||
const elapsed = Date.now() - lastExec;
|
||||
clear();
|
||||
if (duration <= 0) {
|
||||
lastExec = Date.now();
|
||||
return invoke();
|
||||
}
|
||||
if (elapsed > duration && (leading || !isLeading)) {
|
||||
lastExec = Date.now();
|
||||
invoke();
|
||||
} else if (trailing) {
|
||||
timer = setTimeout(() => {
|
||||
lastExec = Date.now();
|
||||
isLeading = true;
|
||||
clear();
|
||||
invoke();
|
||||
}, duration);
|
||||
}
|
||||
if (!leading && !timer)
|
||||
timer = setTimeout(() => isLeading = true, duration);
|
||||
isLeading = false;
|
||||
};
|
||||
return filter;
|
||||
}
|
||||
function identity(arg) {
|
||||
return arg;
|
||||
}
|
||||
function tryOnScopeDispose(fn) {
|
||||
if (getCurrentScope()) {
|
||||
onScopeDispose(fn);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function toReactive(objectRef) {
|
||||
if (!isRef(objectRef))
|
||||
return reactive(objectRef);
|
||||
const proxy = new Proxy({}, {
|
||||
get(_, p, receiver) {
|
||||
return unref(Reflect.get(objectRef.value, p, receiver));
|
||||
},
|
||||
set(_, p, value) {
|
||||
if (isRef(objectRef.value[p]) && !isRef(value))
|
||||
objectRef.value[p].value = value;
|
||||
else
|
||||
objectRef.value[p] = value;
|
||||
return true;
|
||||
},
|
||||
deleteProperty(_, p) {
|
||||
return Reflect.deleteProperty(objectRef.value, p);
|
||||
},
|
||||
has(_, p) {
|
||||
return Reflect.has(objectRef.value, p);
|
||||
},
|
||||
ownKeys() {
|
||||
return Object.keys(objectRef.value);
|
||||
},
|
||||
getOwnPropertyDescriptor() {
|
||||
return {
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
};
|
||||
}
|
||||
});
|
||||
return reactive(proxy);
|
||||
}
|
||||
function reactiveComputed(fn) {
|
||||
return toReactive(computed(fn));
|
||||
}
|
||||
function reactiveOmit(obj, ...keys) {
|
||||
const flatKeys = keys.flat();
|
||||
return reactiveComputed(() => Object.fromEntries(Object.entries(toRefs(obj)).filter((e) => !flatKeys.includes(e[0]))));
|
||||
}
|
||||
function useThrottleFn(fn, ms = 200, trailing = false, leading = true) {
|
||||
return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
|
||||
}
|
||||
function tryOnMounted(fn, sync = true) {
|
||||
if (getCurrentInstance())
|
||||
onMounted(fn);
|
||||
else if (sync)
|
||||
fn();
|
||||
else
|
||||
nextTick(fn);
|
||||
}
|
||||
function useTimeoutFn(cb, interval, options = {}) {
|
||||
const {
|
||||
immediate = true
|
||||
} = options;
|
||||
const isPending = ref(false);
|
||||
let timer = null;
|
||||
function clear() {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
function stop() {
|
||||
isPending.value = false;
|
||||
clear();
|
||||
}
|
||||
function start(...args) {
|
||||
clear();
|
||||
isPending.value = true;
|
||||
timer = setTimeout(() => {
|
||||
isPending.value = false;
|
||||
timer = null;
|
||||
cb(...args);
|
||||
}, resolveUnref(interval));
|
||||
}
|
||||
if (immediate) {
|
||||
isPending.value = true;
|
||||
if (isClient)
|
||||
start();
|
||||
}
|
||||
tryOnScopeDispose(stop);
|
||||
return {
|
||||
isPending,
|
||||
start,
|
||||
stop
|
||||
};
|
||||
}
|
||||
function unrefElement(elRef) {
|
||||
var _a2;
|
||||
const plain = resolveUnref(elRef);
|
||||
return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
|
||||
}
|
||||
const defaultWindow = isClient ? window : void 0;
|
||||
function useEventListener(...args) {
|
||||
let target;
|
||||
let event;
|
||||
let listener;
|
||||
let options;
|
||||
if (isString(args[0])) {
|
||||
[event, listener, options] = args;
|
||||
target = defaultWindow;
|
||||
} else {
|
||||
[target, event, listener, options] = args;
|
||||
}
|
||||
if (!target)
|
||||
return noop;
|
||||
let cleanup = noop;
|
||||
const stopWatch = watch(() => unrefElement(target), (el) => {
|
||||
cleanup();
|
||||
if (!el)
|
||||
return;
|
||||
el.addEventListener(event, listener, options);
|
||||
cleanup = () => {
|
||||
el.removeEventListener(event, listener, options);
|
||||
cleanup = noop;
|
||||
};
|
||||
}, { immediate: true, flush: "post" });
|
||||
const stop = () => {
|
||||
stopWatch();
|
||||
cleanup();
|
||||
};
|
||||
tryOnScopeDispose(stop);
|
||||
return stop;
|
||||
}
|
||||
function onClickOutside(target, handler, options = {}) {
|
||||
const { window: window2 = defaultWindow, ignore, capture = true, detectIframe = false } = options;
|
||||
if (!window2)
|
||||
return;
|
||||
const shouldListen = ref(true);
|
||||
let fallback;
|
||||
const listener = (event) => {
|
||||
window2.clearTimeout(fallback);
|
||||
const el = unrefElement(target);
|
||||
const composedPath = event.composedPath();
|
||||
if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
|
||||
return;
|
||||
if (ignore && ignore.length > 0) {
|
||||
if (ignore.some((target2) => {
|
||||
const el2 = unrefElement(target2);
|
||||
return el2 && (event.target === el2 || composedPath.includes(el2));
|
||||
}))
|
||||
return;
|
||||
}
|
||||
handler(event);
|
||||
};
|
||||
const cleanup = [
|
||||
useEventListener(window2, "click", listener, { passive: true, capture }),
|
||||
useEventListener(window2, "pointerdown", (e) => {
|
||||
const el = unrefElement(target);
|
||||
shouldListen.value = !!el && !e.composedPath().includes(el);
|
||||
}, { passive: true }),
|
||||
useEventListener(window2, "pointerup", (e) => {
|
||||
if (e.button === 0) {
|
||||
const path = e.composedPath();
|
||||
e.composedPath = () => path;
|
||||
fallback = window2.setTimeout(() => listener(e), 50);
|
||||
}
|
||||
}, { passive: true }),
|
||||
detectIframe && useEventListener(window2, "blur", (event) => {
|
||||
var _a2;
|
||||
const el = unrefElement(target);
|
||||
if (((_a2 = document.activeElement) == null ? void 0 : _a2.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(document.activeElement)))
|
||||
handler(event);
|
||||
})
|
||||
].filter(Boolean);
|
||||
const stop = () => cleanup.forEach((fn) => fn());
|
||||
return stop;
|
||||
}
|
||||
function templateRef(key, initialValue = null) {
|
||||
const instance = getCurrentInstance();
|
||||
let _trigger = () => {
|
||||
};
|
||||
const element = customRef((track, trigger) => {
|
||||
_trigger = trigger;
|
||||
return {
|
||||
get() {
|
||||
var _a2, _b;
|
||||
track();
|
||||
return (_b = (_a2 = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a2.$refs[key]) != null ? _b : initialValue;
|
||||
},
|
||||
set() {
|
||||
}
|
||||
};
|
||||
});
|
||||
tryOnMounted(_trigger);
|
||||
onUpdated(_trigger);
|
||||
return element;
|
||||
}
|
||||
function useSupported(callback, sync = false) {
|
||||
const isSupported = ref();
|
||||
const update = () => isSupported.value = Boolean(callback());
|
||||
update();
|
||||
tryOnMounted(update, sync);
|
||||
return isSupported;
|
||||
}
|
||||
const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
||||
const globalKey = "__vueuse_ssr_handlers__";
|
||||
_global[globalKey] = _global[globalKey] || {};
|
||||
_global[globalKey];
|
||||
var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
|
||||
var __hasOwnProp$f = Object.prototype.hasOwnProperty;
|
||||
var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
|
||||
var __objRest$2 = (source, exclude) => {
|
||||
var target = {};
|
||||
for (var prop in source)
|
||||
if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
|
||||
target[prop] = source[prop];
|
||||
if (source != null && __getOwnPropSymbols$f)
|
||||
for (var prop of __getOwnPropSymbols$f(source)) {
|
||||
if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
|
||||
target[prop] = source[prop];
|
||||
}
|
||||
return target;
|
||||
};
|
||||
function useResizeObserver(target, callback, options = {}) {
|
||||
const _a2 = options, { window: window2 = defaultWindow } = _a2, observerOptions = __objRest$2(_a2, ["window"]);
|
||||
let observer;
|
||||
const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
|
||||
const cleanup = () => {
|
||||
if (observer) {
|
||||
observer.disconnect();
|
||||
observer = void 0;
|
||||
}
|
||||
};
|
||||
const stopWatch = watch(() => unrefElement(target), (el) => {
|
||||
cleanup();
|
||||
if (isSupported.value && window2 && el) {
|
||||
observer = new ResizeObserver(callback);
|
||||
observer.observe(el, observerOptions);
|
||||
}
|
||||
}, { immediate: true, flush: "post" });
|
||||
const stop = () => {
|
||||
cleanup();
|
||||
stopWatch();
|
||||
};
|
||||
tryOnScopeDispose(stop);
|
||||
return {
|
||||
isSupported,
|
||||
stop
|
||||
};
|
||||
}
|
||||
function useRafFn(fn, options = {}) {
|
||||
const {
|
||||
immediate = true,
|
||||
window: window2 = defaultWindow
|
||||
} = options;
|
||||
const isActive = ref(false);
|
||||
let rafId = null;
|
||||
function loop() {
|
||||
if (!isActive.value || !window2)
|
||||
return;
|
||||
fn();
|
||||
rafId = window2.requestAnimationFrame(loop);
|
||||
}
|
||||
function resume() {
|
||||
if (!isActive.value && window2) {
|
||||
isActive.value = true;
|
||||
loop();
|
||||
}
|
||||
}
|
||||
function pause() {
|
||||
isActive.value = false;
|
||||
if (rafId != null && window2) {
|
||||
window2.cancelAnimationFrame(rafId);
|
||||
rafId = null;
|
||||
}
|
||||
}
|
||||
if (immediate)
|
||||
resume();
|
||||
tryOnScopeDispose(pause);
|
||||
return {
|
||||
isActive,
|
||||
pause,
|
||||
resume
|
||||
};
|
||||
}
|
||||
function useEyeDropper(options = {}) {
|
||||
const { initialValue = "" } = options;
|
||||
const isSupported = useSupported(() => typeof window !== "undefined" && "EyeDropper" in window);
|
||||
const sRGBHex = ref(initialValue);
|
||||
async function open(openOptions) {
|
||||
if (!isSupported.value)
|
||||
return;
|
||||
const eyeDropper = new window.EyeDropper();
|
||||
const result = await eyeDropper.open(openOptions);
|
||||
sRGBHex.value = result.sRGBHex;
|
||||
return result;
|
||||
}
|
||||
return { isSupported, sRGBHex, open };
|
||||
}
|
||||
function useMousePressed(options = {}) {
|
||||
const {
|
||||
touch = true,
|
||||
drag = true,
|
||||
initialValue = false,
|
||||
window: window2 = defaultWindow
|
||||
} = options;
|
||||
const pressed = ref(initialValue);
|
||||
const sourceType = ref(null);
|
||||
if (!window2) {
|
||||
return {
|
||||
pressed,
|
||||
sourceType
|
||||
};
|
||||
}
|
||||
const onPressed = (srcType) => () => {
|
||||
pressed.value = true;
|
||||
sourceType.value = srcType;
|
||||
};
|
||||
const onReleased = () => {
|
||||
pressed.value = false;
|
||||
sourceType.value = null;
|
||||
};
|
||||
const target = computed(() => unrefElement(options.target) || window2);
|
||||
useEventListener(target, "mousedown", onPressed("mouse"), { passive: true });
|
||||
useEventListener(window2, "mouseleave", onReleased, { passive: true });
|
||||
useEventListener(window2, "mouseup", onReleased, { passive: true });
|
||||
if (drag) {
|
||||
useEventListener(target, "dragstart", onPressed("mouse"), { passive: true });
|
||||
useEventListener(window2, "drop", onReleased, { passive: true });
|
||||
useEventListener(window2, "dragend", onReleased, { passive: true });
|
||||
}
|
||||
if (touch) {
|
||||
useEventListener(target, "touchstart", onPressed("touch"), { passive: true });
|
||||
useEventListener(window2, "touchend", onReleased, { passive: true });
|
||||
useEventListener(window2, "touchcancel", onReleased, { passive: true });
|
||||
}
|
||||
return {
|
||||
pressed,
|
||||
sourceType
|
||||
};
|
||||
}
|
||||
var SwipeDirection;
|
||||
(function(SwipeDirection2) {
|
||||
SwipeDirection2["UP"] = "UP";
|
||||
SwipeDirection2["RIGHT"] = "RIGHT";
|
||||
SwipeDirection2["DOWN"] = "DOWN";
|
||||
SwipeDirection2["LEFT"] = "LEFT";
|
||||
SwipeDirection2["NONE"] = "NONE";
|
||||
})(SwipeDirection || (SwipeDirection = {}));
|
||||
var __defProp = Object.defineProperty;
|
||||
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
||||
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
||||
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
||||
var __spreadValues = (a, b) => {
|
||||
for (var prop in b || (b = {}))
|
||||
if (__hasOwnProp.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
if (__getOwnPropSymbols)
|
||||
for (var prop of __getOwnPropSymbols(b)) {
|
||||
if (__propIsEnum.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
}
|
||||
return a;
|
||||
};
|
||||
const _TransitionPresets = {
|
||||
easeInSine: [0.12, 0, 0.39, 0],
|
||||
easeOutSine: [0.61, 1, 0.88, 1],
|
||||
easeInOutSine: [0.37, 0, 0.63, 1],
|
||||
easeInQuad: [0.11, 0, 0.5, 0],
|
||||
easeOutQuad: [0.5, 1, 0.89, 1],
|
||||
easeInOutQuad: [0.45, 0, 0.55, 1],
|
||||
easeInCubic: [0.32, 0, 0.67, 0],
|
||||
easeOutCubic: [0.33, 1, 0.68, 1],
|
||||
easeInOutCubic: [0.65, 0, 0.35, 1],
|
||||
easeInQuart: [0.5, 0, 0.75, 0],
|
||||
easeOutQuart: [0.25, 1, 0.5, 1],
|
||||
easeInOutQuart: [0.76, 0, 0.24, 1],
|
||||
easeInQuint: [0.64, 0, 0.78, 0],
|
||||
easeOutQuint: [0.22, 1, 0.36, 1],
|
||||
easeInOutQuint: [0.83, 0, 0.17, 1],
|
||||
easeInExpo: [0.7, 0, 0.84, 0],
|
||||
easeOutExpo: [0.16, 1, 0.3, 1],
|
||||
easeInOutExpo: [0.87, 0, 0.13, 1],
|
||||
easeInCirc: [0.55, 0, 1, 0.45],
|
||||
easeOutCirc: [0, 0.55, 0.45, 1],
|
||||
easeInOutCirc: [0.85, 0, 0.15, 1],
|
||||
easeInBack: [0.36, 0, 0.66, -0.56],
|
||||
easeOutBack: [0.34, 1.56, 0.64, 1],
|
||||
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
|
||||
};
|
||||
const TransitionPresets = __spreadValues({
|
||||
linear: identity
|
||||
}, _TransitionPresets);
|
||||
function createEasingFunction([p0, p1, p2, p3]) {
|
||||
const a = (a1, a2) => 1 - 3 * a2 + 3 * a1;
|
||||
const b = (a1, a2) => 3 * a2 - 6 * a1;
|
||||
const c = (a1) => 3 * a1;
|
||||
const calcBezier = (t, a1, a2) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;
|
||||
const getSlope = (t, a1, a2) => 3 * a(a1, a2) * t * t + 2 * b(a1, a2) * t + c(a1);
|
||||
const getTforX = (x) => {
|
||||
let aGuessT = x;
|
||||
for (let i = 0; i < 4; ++i) {
|
||||
const currentSlope = getSlope(aGuessT, p0, p2);
|
||||
if (currentSlope === 0)
|
||||
return aGuessT;
|
||||
const currentX = calcBezier(aGuessT, p0, p2) - x;
|
||||
aGuessT -= currentX / currentSlope;
|
||||
}
|
||||
return aGuessT;
|
||||
};
|
||||
return (x) => p0 === p1 && p2 === p3 ? x : calcBezier(getTforX(x), p1, p3);
|
||||
}
|
||||
function useTransition(source, options = {}) {
|
||||
const {
|
||||
delay = 0,
|
||||
disabled = false,
|
||||
duration = 1e3,
|
||||
onFinished = noop,
|
||||
onStarted = noop,
|
||||
transition = identity
|
||||
} = options;
|
||||
const currentTransition = computed(() => {
|
||||
const t = unref(transition);
|
||||
return isFunction(t) ? t : createEasingFunction(t);
|
||||
});
|
||||
const sourceValue = computed(() => {
|
||||
const s = unref(source);
|
||||
return isNumber(s) ? s : s.map(unref);
|
||||
});
|
||||
const sourceVector = computed(() => isNumber(sourceValue.value) ? [sourceValue.value] : sourceValue.value);
|
||||
const outputVector = ref(sourceVector.value.slice(0));
|
||||
let currentDuration;
|
||||
let diffVector;
|
||||
let endAt;
|
||||
let startAt;
|
||||
let startVector;
|
||||
const { resume, pause } = useRafFn(() => {
|
||||
const now = Date.now();
|
||||
const progress = clamp(1 - (endAt - now) / currentDuration, 0, 1);
|
||||
outputVector.value = startVector.map((val, i) => {
|
||||
var _a2;
|
||||
return val + ((_a2 = diffVector[i]) != null ? _a2 : 0) * currentTransition.value(progress);
|
||||
});
|
||||
if (progress >= 1) {
|
||||
pause();
|
||||
onFinished();
|
||||
}
|
||||
}, { immediate: false });
|
||||
const start = () => {
|
||||
pause();
|
||||
currentDuration = unref(duration);
|
||||
diffVector = outputVector.value.map((n, i) => {
|
||||
var _a2, _b;
|
||||
return ((_a2 = sourceVector.value[i]) != null ? _a2 : 0) - ((_b = outputVector.value[i]) != null ? _b : 0);
|
||||
});
|
||||
startVector = outputVector.value.slice(0);
|
||||
startAt = Date.now();
|
||||
endAt = startAt + currentDuration;
|
||||
resume();
|
||||
onStarted();
|
||||
};
|
||||
const timeout = useTimeoutFn(start, delay, { immediate: false });
|
||||
watch(sourceVector, () => {
|
||||
if (unref(disabled)) {
|
||||
outputVector.value = sourceVector.value.slice(0);
|
||||
} else {
|
||||
if (unref(delay) <= 0)
|
||||
start();
|
||||
else
|
||||
timeout.start();
|
||||
}
|
||||
}, { deep: true });
|
||||
return computed(() => {
|
||||
const targetVector = unref(disabled) ? sourceVector : outputVector;
|
||||
return isNumber(sourceValue.value) ? targetVector.value[0] : targetVector.value;
|
||||
});
|
||||
}
|
||||
function useWindowSize(options = {}) {
|
||||
const {
|
||||
window: window2 = defaultWindow,
|
||||
initialWidth = Infinity,
|
||||
initialHeight = Infinity,
|
||||
listenOrientation = true,
|
||||
includeScrollbar = true
|
||||
} = options;
|
||||
const width = ref(initialWidth);
|
||||
const height = ref(initialHeight);
|
||||
const update = () => {
|
||||
if (window2) {
|
||||
if (includeScrollbar) {
|
||||
width.value = window2.innerWidth;
|
||||
height.value = window2.innerHeight;
|
||||
} else {
|
||||
width.value = window2.document.documentElement.clientWidth;
|
||||
height.value = window2.document.documentElement.clientHeight;
|
||||
}
|
||||
}
|
||||
};
|
||||
update();
|
||||
tryOnMounted(update);
|
||||
useEventListener("resize", update, { passive: true });
|
||||
if (listenOrientation)
|
||||
useEventListener("orientationchange", update, { passive: true });
|
||||
return { width, height };
|
||||
}
|
||||
export { TransitionPresets as T, useResizeObserver as a, useThrottleFn as b, useEventListener as c, useEyeDropper as d, useTransition as e, useMousePressed as f, isObject as i, onClickOutside as o, reactiveOmit as r, templateRef as t, useWindowSize as u };
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,615 @@
|
||||
@import "../checkbox/index.less";
|
||||
@import "../radio/index.less";
|
||||
@import "../dropdown/index.less";
|
||||
@import "../page/index.less";
|
||||
@import "../empty/index.less";
|
||||
|
||||
.layui-table-col-special {
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.layui-table-body .layui-empty {
|
||||
left: 0px;
|
||||
position: sticky;
|
||||
margin: 0px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.layui-table th {
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.layui-table-box-header {
|
||||
min-height: 50px;
|
||||
line-height: 30px;
|
||||
background-color: #FAFAFA;
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.layui-table-footer {
|
||||
min-height: 50px;
|
||||
line-height: 30px;
|
||||
background-color: #FAFAFA;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.layui-table-mend,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-patch,
|
||||
.layui-table-click,
|
||||
.layui-table-hover,
|
||||
.layui-table-header,
|
||||
.layui-table-total tr,
|
||||
.layui-table thead tr,
|
||||
.layui-table tbody tr:hover td,
|
||||
.layui-table.layui-table-even tr:nth-child(even) td {
|
||||
background-color: var(--global-neutral-color-1) !important;
|
||||
}
|
||||
|
||||
.layui-table td,
|
||||
.layui-table th,
|
||||
.layui-table-col-set,
|
||||
.layui-table-fixed-r,
|
||||
.layui-table-grid-down,
|
||||
.layui-table-header,
|
||||
.layui-table-page,
|
||||
.layui-table-tips-main,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-view,
|
||||
.layui-table[lay-skin="line"],
|
||||
.layui-table[lay-skin="row"] {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
.layui-table td,
|
||||
.layui-table th {
|
||||
position: relative;
|
||||
padding: 9px 8px;
|
||||
min-height: 20px;
|
||||
height: 40px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.layui-table[lay-skin="line"] td,
|
||||
.layui-table[lay-skin="line"] th {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
.layui-table[lay-skin="row"] td,
|
||||
.layui-table[lay-skin="row"] th {
|
||||
border-width: 0 1px 0 0;
|
||||
}
|
||||
|
||||
.layui-table[lay-skin="nob"] td,
|
||||
.layui-table[lay-skin="nob"] th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layui-table img {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.layui-table[lay-size="lg"] td,
|
||||
.layui-table[lay-size="lg"] th {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
.layui-table[lay-size="sm"] td,
|
||||
.layui-table[lay-size="sm"] th {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.layui-table[lay-size="sm"] td,
|
||||
.layui-table[lay-size="sm"] th,
|
||||
.layui-table[lay-size="sm"] .layui-table-cell {
|
||||
height: 30px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.layui-table[lay-size="lg"] td,
|
||||
.layui-table[lay-size="lg"] th,
|
||||
.layui-table[lay-size="lg"] .layui-table-cell {
|
||||
height: 50px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.layui-table-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table[lay-skin="line"] {
|
||||
border-width: 0 1px 0 0;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table[lay-skin="row"] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table td,
|
||||
.layui-table-view .layui-table th {
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table td.layui-table-col-special,
|
||||
.layui-table-view .layui-table th.layui-table-col-special {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table th.layui-unselect .layui-table-cell span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table td {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table td[data-edit="text"] {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-radio {
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-radio > i {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.layui-table-init {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
.layui-table-init .layui-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -15px 0 0 -15px;
|
||||
font-size: 30px;
|
||||
color: #c2c2c2;
|
||||
}
|
||||
|
||||
.layui-table-header {
|
||||
border-width: 0 0 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-table-header-wrapper {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-table-header .layui-table {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.layui-table-tool .layui-table-tool-temp {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.layui-table-tool .layui-inline[lay-event] {
|
||||
position: relative;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
.layui-icon {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-table-tool .layui-inline[lay-event]:hover {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.layui-table-tool .layui-table-tool-self .layui-inline[lay-event] {
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel {
|
||||
position: absolute;
|
||||
top: 29px;
|
||||
left: -1px;
|
||||
padding: 5px 0;
|
||||
min-width: 150px;
|
||||
min-height: 40px;
|
||||
border: 1px solid #d2d2d2;
|
||||
text-align: left;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.layui-table-cell,
|
||||
.layui-table-tool-panel li {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.layui-table-call-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel li {
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
-webkit-transition: 0.5s all;
|
||||
transition: 0.5s all;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] {
|
||||
width: 100%;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel li:hover {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] i {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layui-table-tool .layui-table-tool-self .layui-table-tool-panel {
|
||||
left: auto;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.layui-table-col-set {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
border-width: 0 0 0 1px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layui-table-sort {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.layui-table-sort .layui-edge {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.layui-table-sort .layui-table-sort-asc {
|
||||
top: 3px;
|
||||
border-top: none;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #b2b2b2;
|
||||
}
|
||||
|
||||
.layui-table-sort .layui-table-sort-asc:hover {
|
||||
border-bottom-color: #666;
|
||||
}
|
||||
|
||||
.layui-table-sort .layui-table-sort-desc {
|
||||
bottom: 5px;
|
||||
border-bottom: none;
|
||||
border-top-style: solid;
|
||||
border-top-color: #b2b2b2;
|
||||
}
|
||||
|
||||
.layui-table-sort .layui-table-sort-desc:hover {
|
||||
border-top-color: #666;
|
||||
}
|
||||
|
||||
.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc {
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
|
||||
.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc {
|
||||
border-top-color: #000;
|
||||
}
|
||||
|
||||
.layui-table-cell {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
|
||||
top: -1px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layui-table-cell .layui-table-link {
|
||||
color: #01aaed;
|
||||
}
|
||||
|
||||
.laytable-cell-checkbox,
|
||||
.laytable-cell-numbers,
|
||||
.laytable-cell-radio,
|
||||
.laytable-cell-space {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
-webkit-box-pack: center;
|
||||
}
|
||||
|
||||
.layui-table-cell-expand-icon {
|
||||
border: 1px solid #eee;
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.layui-table-cell-expand-icon-spaced {
|
||||
width: 26px;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layui-table-body {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
margin-bottom: -1px;
|
||||
transition:all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.layui-table-body .layui-none {
|
||||
line-height: 26px;
|
||||
padding: 30px 15px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.layui-table-fixed {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.layui-table-fixed .layui-table-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-table-header .layui-table-cell {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.layui-table-fixed-left {
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: white;
|
||||
position: sticky !important;
|
||||
}
|
||||
|
||||
.layui-table-fixed-right {
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background: white;
|
||||
position: sticky !important;
|
||||
border-left: 1px solid #eee !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.layui-table-tool-checkbox{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.layui-table-tool-checkbox > *{
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.layui-table-tool-checkbox > *:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.layui-table-has-fixed-left .layui-table-fixed-left-last {
|
||||
overflow: initial!important;
|
||||
border-right: none!important;
|
||||
}
|
||||
|
||||
.layui-table-has-fixed-right .layui-table-fixed-right-first {
|
||||
overflow: initial!important;
|
||||
border-left: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.layui-table-fixed-left-last::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
width: 30px;
|
||||
transform: translate(100%);
|
||||
transition: box-shadow .3s;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
box-shadow: inset 10px 0 8px -8px #00000026;
|
||||
}
|
||||
|
||||
.layui-table-fixed-right-first::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
transform: translate(-100%);
|
||||
transition: box-shadow .3s;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
box-shadow: inset -10px 0 8px -8px #00000026;
|
||||
}
|
||||
|
||||
.layui-table-tool {
|
||||
position: relative;
|
||||
display: flex;
|
||||
z-index: 890;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
line-height: 30px;
|
||||
padding: 10px 15px;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
.layui-table-tool .layui-btn-container {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.layui-table-page,
|
||||
.layui-table-total {
|
||||
border-width: 1px 0 0;
|
||||
margin-bottom: -1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-table-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 7px 7px 0;
|
||||
height: 41px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage select{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.layui-table-page > div {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage a,
|
||||
.layui-table-page .layui-laypage span {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage a,
|
||||
.layui-table-page .layui-laypage span.layui-laypage-curr {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage span {
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage .layui-laypage-prev {
|
||||
margin-left: -7px !important;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage button,
|
||||
.layui-table-page .layui-laypage input {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage input {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage button {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layui-table-pagebar {
|
||||
float: right;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.layui-table-view select[lay-ignore] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-radio,
|
||||
.layui-table-view .layui-form-checkbox,
|
||||
.layui-table-view .layui-form-switch {
|
||||
top: 0;
|
||||
margin: 0;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table-cell-number,
|
||||
.layui-table-view .layui-table-cell-radio,
|
||||
.layui-table-view .layui-table-cell-checkbox {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layui-table-cell-expand {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.layui-table-loading {
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
.layui-table-loading .layui-icon {
|
||||
font-size: 26px;
|
||||
}
|
||||
@@ -0,0 +1,297 @@
|
||||
@width-height-pace: 24px;
|
||||
@step-color: @step-success-color;
|
||||
@step-fail-color: #ff5722;
|
||||
@step-primary-color: #1e9fff;
|
||||
@step-warning-color: #ffb800;
|
||||
@step-success-color: #5fb878;
|
||||
|
||||
.lay-step {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.lay-step-item {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.is-item-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lay-step-item-last {
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
.lay-step-item-pace {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
width: @width-height-pace;
|
||||
height: @width-height-pace;
|
||||
border: 1px #8d8d8d solid;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: @width-height-pace;
|
||||
background: #ffffff;
|
||||
}
|
||||
.is-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.lay-step-item-active {
|
||||
border: 1px @step-color solid;
|
||||
color: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item-wait {
|
||||
border: 1px #000000 solid;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.lay-step-item--success {
|
||||
border: 1px @step-color solid;
|
||||
color: #ffffff;
|
||||
background: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item--fail {
|
||||
border: 1px @step-fail-color solid;
|
||||
color: #ffffff;
|
||||
background: @step-fail-color;
|
||||
}
|
||||
|
||||
.lay-step-item--warning {
|
||||
border: 1px @step-warning-color solid;
|
||||
color: #ffffff;
|
||||
background: @step-warning-color;
|
||||
}
|
||||
.lay-step-item--primary {
|
||||
border: 1px @step-primary-color solid;
|
||||
color: #ffffff;
|
||||
background: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-success {
|
||||
border: 1px @step-color solid;
|
||||
color: #ffffff;
|
||||
background: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item-fail {
|
||||
border: 1px @step-fail-color solid;
|
||||
color: #ffffff;
|
||||
background: @step-fail-color;
|
||||
}
|
||||
|
||||
.lay-step-item-warning {
|
||||
border: 1px @step-warning-color solid;
|
||||
color: #ffffff;
|
||||
background: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-primary {
|
||||
border: 1px @step-primary-color solid;
|
||||
color: #ffffff;
|
||||
background: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-content {
|
||||
color: #8d8d8d;
|
||||
cursor: pointer;
|
||||
.lay-step-item-content-title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.lay-step-item-content-row {
|
||||
color: #8d8d8d;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 24px;
|
||||
width: calc(100% - 26px);
|
||||
.lay-step-item-content-title {
|
||||
word-wrap: break-word;
|
||||
max-width: calc(100% - 8px);
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
background: #ffffff;
|
||||
padding: 0 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.lay-step-item-content-active {
|
||||
color: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item-content--success {
|
||||
color: @step-color;
|
||||
}
|
||||
.lay-step-item-content--fail {
|
||||
color: @step-fail-color;
|
||||
}
|
||||
.lay-step-item-content--warning {
|
||||
color: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-content--primary {
|
||||
color: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-content-wait {
|
||||
color: #000000;
|
||||
}
|
||||
.lay-step-item-content-success {
|
||||
color: @step-color;
|
||||
}
|
||||
.lay-step-item-content-fail {
|
||||
color: @step-fail-color;
|
||||
}
|
||||
.lay-step-item-content-warning {
|
||||
color: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-content-primary {
|
||||
color: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-line {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lay-step-item-line:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #c9c5c5;
|
||||
}
|
||||
.is-line-center:before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.lay-step-item-line-active:before {
|
||||
transition: background 150ms;
|
||||
background: @step-success-color !important;
|
||||
}
|
||||
|
||||
.lay-step-item-line-fail:before {
|
||||
transition: background 150ms;
|
||||
background: @step-fail-color !important;
|
||||
}
|
||||
|
||||
.lay-step-item-line-warning:before {
|
||||
transition: background 150ms;
|
||||
background: @step-warning-color !important;
|
||||
}
|
||||
|
||||
.lay-step-item-line-primary:before {
|
||||
transition: background 150ms;
|
||||
background: @step-primary-color !important;
|
||||
}
|
||||
|
||||
.lay-step-simple {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
background-color: #cecece;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lay-step-item-simple {
|
||||
padding: 0 18px;
|
||||
}
|
||||
.lay-step-item-simple:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
border: 15px solid;
|
||||
border-color: transparent transparent transparent #cecece;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
.lay-step-item-simple:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
border: 15px solid;
|
||||
border-color: transparent transparent transparent #cecece;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
.lay-step-item-simple-border:before {
|
||||
left: 1px;
|
||||
border-color: transparent transparent transparent #ffffff;
|
||||
}
|
||||
|
||||
.lay-step-item-simple-active {
|
||||
background-color: #9fd4ae;
|
||||
}
|
||||
.lay-step-item-simple-success {
|
||||
background-color: @step-color;
|
||||
}
|
||||
.lay-step-item-simple-fail {
|
||||
background-color: @step-fail-color;
|
||||
}
|
||||
.lay-step-item-simple-warning {
|
||||
background-color: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-simple-primary {
|
||||
background-color: @step-primary-color;
|
||||
}
|
||||
.lay-step-item-simple-active-border:after {
|
||||
border-color: transparent transparent transparent #9fd4ae !important;
|
||||
}
|
||||
.lay-step-item-simple-success-border:after {
|
||||
border-color: transparent transparent transparent
|
||||
@step-success-color!important;
|
||||
}
|
||||
.lay-step-item-simple-fail-border:after {
|
||||
border-color: transparent transparent transparent @step-fail-color!important;
|
||||
}
|
||||
.lay-step-item-simple-warning-border:after {
|
||||
border-color: transparent transparent transparent
|
||||
@step-warning-color!important;
|
||||
}
|
||||
.lay-step-item-simple-primary-border:after {
|
||||
border-color: transparent transparent transparent
|
||||
@step-primary-color!important;
|
||||
}
|
||||
}
|
||||
.lay-step-column {
|
||||
height: 100%;
|
||||
flex-flow: column;
|
||||
.lay-step-item-line {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
}
|
||||
.lay-step-item-line:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #c9c5c5;
|
||||
}
|
||||
.lay-step-item-content {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.is-vertical {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,145 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayCheckbox",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import { computed, inject, useSlots } from "vue";
|
||||
import "./index.less";
|
||||
import { CheckboxSize } from "./interface";
|
||||
|
||||
export interface CheckboxProps {
|
||||
name?: string;
|
||||
skin?: string;
|
||||
label?: string;
|
||||
value: string | number | object;
|
||||
modelValue?: boolean | Array<string | number | object>;
|
||||
isIndeterminate?: boolean;
|
||||
size?: CheckboxSize;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<CheckboxProps>(), {
|
||||
isIndeterminate: false,
|
||||
modelValue: false,
|
||||
disabled: false,
|
||||
label: "",
|
||||
size: "md",
|
||||
});
|
||||
|
||||
const checkboxGroup: any = inject("checkboxGroup", {});
|
||||
|
||||
const isGroup = computed(() => {
|
||||
return (
|
||||
checkboxGroup != undefined && checkboxGroup?.name === "LayCheckboxGroup"
|
||||
);
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
const slots = useSlots();
|
||||
|
||||
const isChecked = computed({
|
||||
get() {
|
||||
if (isGroup.value) {
|
||||
return checkboxGroup.modelValue.value.includes(props.value);
|
||||
} else {
|
||||
if (Array.isArray(props.modelValue)) {
|
||||
return props.modelValue.includes(props.value);
|
||||
} else {
|
||||
return props.modelValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
set(val) {
|
||||
if (isGroup.value) {
|
||||
setGroupModelValue(val);
|
||||
} else {
|
||||
if (Array.isArray(props.modelValue)) {
|
||||
setArrayModelValue(val);
|
||||
} else {
|
||||
emit("change", val);
|
||||
emit("update:modelValue", val);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const arrayModelValue = computed(() => {
|
||||
if (Array.isArray(props.modelValue)) {
|
||||
return [...props.modelValue];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
const setGroupModelValue = function (checked: any) {
|
||||
let groupModelValue = [...checkboxGroup.modelValue.value];
|
||||
if (!checked) {
|
||||
groupModelValue.splice(groupModelValue.indexOf(props.value), 1);
|
||||
} else {
|
||||
groupModelValue.push(props.value);
|
||||
}
|
||||
checkboxGroup.modelValue.value = groupModelValue;
|
||||
};
|
||||
|
||||
const setArrayModelValue = function (checked: any) {
|
||||
let arr = [...arrayModelValue.value];
|
||||
if (!checked) {
|
||||
arr.splice(arr.indexOf(props.value), 1);
|
||||
} else {
|
||||
arr.push(props.value);
|
||||
}
|
||||
emit("change", arr);
|
||||
emit("update:modelValue", arr);
|
||||
};
|
||||
|
||||
const handleClick = function () {
|
||||
if (!isDisabled.value) {
|
||||
isChecked.value = !isChecked.value;
|
||||
}
|
||||
};
|
||||
const isDisabled = computed(() => {
|
||||
if (props.disabled) {
|
||||
return true;
|
||||
}
|
||||
if (
|
||||
checkboxGroup.hasOwnProperty("disabled") &&
|
||||
checkboxGroup.disabled.value
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
defineExpose({ toggle: handleClick });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span @click.stop="handleClick" class="layui-checkbox" :size="size">
|
||||
<input type="checkbox" :name="name" :value="value" />
|
||||
<div
|
||||
class="layui-form-checkbox"
|
||||
:class="{
|
||||
'layui-form-checked': isChecked,
|
||||
'layui-checkbox-disabled layui-disabled': isDisabled,
|
||||
}"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
<span class="layui-checkbox-label" v-if="slots.default || label">
|
||||
<slot>{{ label }}</slot>
|
||||
</span>
|
||||
<lay-icon
|
||||
:type="
|
||||
props.isIndeterminate && isChecked
|
||||
? 'layui-icon-subtraction'
|
||||
: isChecked
|
||||
? 'layui-icon-ok'
|
||||
: ''
|
||||
"
|
||||
></lay-icon>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
Binary file not shown.
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<teleport to="body" v-if="isExist">
|
||||
<transition v-show="innerVisible">
|
||||
<div
|
||||
ref="popperRefEl"
|
||||
:class="['layui-popper', { 'layui-dark': isDark }, props.popperClass]"
|
||||
:style="[style, props.popperStyle ?? '']"
|
||||
:position="innnerPosition"
|
||||
@mouseenter="handlerPopperMouseEnter"
|
||||
@mouseleave="handlerPopperMouseLeave"
|
||||
>
|
||||
<slot> {{ content }}</slot>
|
||||
<div class="layui-popper-arrow"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
const NAME = "LayPopper";
|
||||
export default {
|
||||
name: NAME,
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import postionFns from "./calcPosition";
|
||||
import {
|
||||
CSSProperties,
|
||||
ref,
|
||||
watch,
|
||||
onMounted,
|
||||
nextTick,
|
||||
useSlots,
|
||||
shallowRef,
|
||||
computed,
|
||||
toRef,
|
||||
StyleValue,
|
||||
Ref,
|
||||
} from "vue";
|
||||
import {
|
||||
onClickOutside,
|
||||
useEventListener,
|
||||
useResizeObserver,
|
||||
useThrottleFn,
|
||||
} from "@vueuse/core";
|
||||
|
||||
export type PopperTrigger = "click" | "hover" | "focus" | "contextMenu";
|
||||
|
||||
export interface PopperProps {
|
||||
el: HTMLElement;
|
||||
position?: string;
|
||||
enterable?: boolean;
|
||||
isDark?: boolean;
|
||||
disabled?: boolean;
|
||||
isCanHide?: boolean;
|
||||
isAutoShow?: boolean;
|
||||
visible?: boolean;
|
||||
content?: string | Number;
|
||||
trigger?: PopperTrigger | PopperTrigger[];
|
||||
popperClass?: string | Array<string | object> | object;
|
||||
popperStyle?: StyleValue;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<PopperProps>(), {
|
||||
position: "top",
|
||||
isDark: true,
|
||||
disabled: false,
|
||||
enterable: true,
|
||||
isCanHide: true,
|
||||
isAutoShow: false,
|
||||
trigger: "hover",
|
||||
visible: false,
|
||||
});
|
||||
|
||||
const slots = useSlots();
|
||||
const style = ref<CSSProperties>({ top: -window.innerHeight + "px", left: 0 });
|
||||
const triggerRefEl = toRef(props, "el");
|
||||
const popperRefEl = shallowRef<HTMLDivElement>({} as HTMLDivElement);
|
||||
const innnerPosition = ref(props.position);
|
||||
const innerVisible = ref(props.visible);
|
||||
const isExist = ref(props.visible);
|
||||
let scrollElements: HTMLElement[] | undefined;
|
||||
|
||||
const triggerMethods = computed(() =>
|
||||
([] as Array<PopperTrigger>).concat(props.trigger)
|
||||
);
|
||||
|
||||
const doShow = function () {
|
||||
if (!props.disabled) {
|
||||
if (!isExist.value) {
|
||||
isExist.value = true;
|
||||
nextTick(() => {
|
||||
innerVisible.value = true;
|
||||
});
|
||||
} else {
|
||||
innerVisible.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const doHidden = function (e?: MouseEvent) {
|
||||
// isCanHide参数由外控制
|
||||
if (props.isCanHide === false) {
|
||||
return;
|
||||
}
|
||||
innerVisible.value = false;
|
||||
innnerPosition.value = props.position;
|
||||
style.value = { top: -window.innerHeight + "px", left: 0 };
|
||||
};
|
||||
|
||||
const calcPosistion = function () {
|
||||
postionFns[props.position] &&
|
||||
(style.value = postionFns[props.position](
|
||||
triggerRefEl.value,
|
||||
popperRefEl.value,
|
||||
innnerPosition
|
||||
));
|
||||
};
|
||||
|
||||
const updatePosistion = function () {
|
||||
if (innerVisible.value) {
|
||||
popperRefEl.value.offsetWidth === 0
|
||||
? nextTick(() => calcPosistion())
|
||||
: calcPosistion();
|
||||
nextTick(() => {
|
||||
calcPosistion();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handlerPopperMouseEnter = function () {
|
||||
if (triggerMethods.value.includes("hover") && props.enterable) {
|
||||
doShow();
|
||||
}
|
||||
};
|
||||
|
||||
const handlerPopperMouseLeave = function () {
|
||||
if (triggerMethods.value.includes("hover") && props.enterable) {
|
||||
doHidden();
|
||||
}
|
||||
};
|
||||
|
||||
const handlerTriggerClick = function () {
|
||||
if (!triggerMethods.value.includes("click")) return;
|
||||
if (innerVisible.value) {
|
||||
doHidden();
|
||||
} else {
|
||||
doShow();
|
||||
}
|
||||
};
|
||||
|
||||
const handleTriggerContextMenu = function (e: MouseEvent) {
|
||||
if (!triggerMethods.value.includes("contextMenu")) return;
|
||||
e.preventDefault();
|
||||
if (innerVisible.value) {
|
||||
doHidden();
|
||||
} else {
|
||||
doShow();
|
||||
}
|
||||
};
|
||||
|
||||
const handlerTriggerMouseEnter = function () {
|
||||
if (!triggerMethods.value.includes("hover")) return;
|
||||
doShow();
|
||||
};
|
||||
|
||||
const handlerTriggerMouseLeave = function () {
|
||||
if (!triggerMethods.value.includes("hover")) return;
|
||||
doHidden();
|
||||
};
|
||||
|
||||
const handleTriggerFocusin = function () {
|
||||
if (triggerMethods.value.includes("focus") && props.enterable) {
|
||||
doShow();
|
||||
}
|
||||
};
|
||||
|
||||
const handleTriggerFocusout = function () {
|
||||
if (triggerMethods.value.includes("focus") && props.enterable) {
|
||||
doHidden();
|
||||
}
|
||||
};
|
||||
|
||||
const handlerTriggerEventRegist = function () {
|
||||
useEventListener(triggerRefEl.value, "click", handlerTriggerClick);
|
||||
useEventListener(triggerRefEl.value, "contextmenu", handleTriggerContextMenu);
|
||||
useEventListener(triggerRefEl.value, "mouseenter", handlerTriggerMouseEnter);
|
||||
useEventListener(triggerRefEl.value, "mouseleave", handlerTriggerMouseLeave);
|
||||
useEventListener(triggerRefEl.value, "focusin", handleTriggerFocusin);
|
||||
useEventListener(triggerRefEl.value, "focusout", handleTriggerFocusout);
|
||||
};
|
||||
|
||||
const handleScroll = useThrottleFn(() => {
|
||||
if (innerVisible.value) {
|
||||
updatePosistion();
|
||||
}
|
||||
}, 15);
|
||||
|
||||
onClickOutside(
|
||||
triggerRefEl.value,
|
||||
(e) => {
|
||||
if (
|
||||
!innerVisible.value ||
|
||||
triggerRefEl.value.contains(e.target as HTMLElement) ||
|
||||
popperRefEl.value.contains(e.target as HTMLElement)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
doHidden();
|
||||
},
|
||||
{
|
||||
ignore: [popperRefEl.value],
|
||||
}
|
||||
);
|
||||
|
||||
useResizeObserver(triggerRefEl, () => {
|
||||
updatePosistion();
|
||||
});
|
||||
|
||||
let popperObserver: { stop: any; isSupported?: Ref<boolean> } | undefined =
|
||||
undefined;
|
||||
|
||||
watch(innerVisible, (isShow) => {
|
||||
updatePosistion();
|
||||
if (isShow) {
|
||||
popperObserver = useResizeObserver(popperRefEl, () => {
|
||||
updatePosistion();
|
||||
});
|
||||
} else {
|
||||
popperObserver && popperObserver.stop();
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(isShow) => (isShow ? doShow() : doHidden())
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.content,
|
||||
() => {
|
||||
updatePosistion();
|
||||
}
|
||||
);
|
||||
|
||||
const isScrollElement = function (element: HTMLElement) {
|
||||
return (
|
||||
element.scrollHeight > element.offsetHeight ||
|
||||
element.scrollWidth > element.offsetWidth
|
||||
);
|
||||
};
|
||||
|
||||
const getScrollElements = function (container: HTMLElement | undefined) {
|
||||
const scrollElements: HTMLElement[] = [];
|
||||
let element: HTMLElement | undefined = container;
|
||||
while (element && element !== document.documentElement) {
|
||||
if (isScrollElement(element)) {
|
||||
scrollElements.push(element);
|
||||
}
|
||||
element = element.parentElement ?? undefined;
|
||||
}
|
||||
return scrollElements;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
updatePosistion();
|
||||
scrollElements = getScrollElements(triggerRefEl.value);
|
||||
for (const item of scrollElements) {
|
||||
useEventListener(item, "scroll", handleScroll);
|
||||
}
|
||||
useEventListener("resize", handleScroll);
|
||||
handlerTriggerEventRegist();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user