@opensig/opendesign
Version:
36,069 lines • 1.29 MB
JavaScript
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@vueuse/core"), require("dayjs"), require("dayjs/plugin/customParseFormat.js")) : typeof define === "function" && define.amd ? define(["exports", "vue", "@vueuse/core", "dayjs", "dayjs/plugin/customParseFormat.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.opendesign = {}, global.Vue, global.VueUse, global.dayjs, global["dayjs/plugin/customParseFormat"].js));
})(this, (function(exports2, vue, core, dayjs, customParseFormat) {
"use strict";var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
const SizeTypes = ["large", "medium", "small"];
const DirectionTypes = ["h", "v"];
const PositionTypes = ["left", "right", "top", "bottom"];
const VariantTypes = ["solid", "outline", "text"];
const ColorTypes = ["normal", "primary", "success", "warning", "danger"];
const Color2Types = ["normal", "success", "warning", "danger"];
const opt = Object.prototype.toString;
function isUndefined(val) {
return val === void 0;
}
function isNull(val) {
return opt.call(val) === "[object Null]";
}
function isNil(val) {
return isUndefined(val) || isNull(val);
}
function isBoolean(val) {
return opt.call(val) === "[object Boolean]";
}
function isString(val) {
return opt.call(val) === "[object String]";
}
function isNumber(val) {
return opt.call(val) === "[object Number]" && !Number.isNaN(val);
}
function isNumeric(val, float = true) {
if (isNil(val)) {
return false;
}
if (typeof val === "number") {
return true;
}
const reg = float ? /^-?\d+(?:\.\d+)?$/ : /^\d+$/;
return reg.test(val.toString());
}
function isFunction(val) {
return typeof val === "function";
}
function isArray(val) {
return Array.isArray(val);
}
function isEmptyArray(val) {
return isArray(val) && val.length === 0;
}
function isArrayEqual(arr1, arr2, order = false) {
if (!isArray(arr1) || !isArray(arr2)) {
return false;
}
const len = arr1.length;
if (len !== arr2.length) {
return false;
}
if (order) {
for (let i = 0; i < len; i++) {
if (arr1[i] !== arr2[i]) {
return false;
}
}
} else {
const arr2Set = new Set(arr2);
for (let i = 0; i < len; i++) {
if (!arr2Set.has(arr1[i])) {
return false;
}
}
}
return true;
}
function isEmptyObject(val) {
return opt.call(val) === "[object Object]" && Object.keys(val).length === 0;
}
function isValidDate(val) {
return val instanceof Date && !Number.isNaN(val.valueOf());
}
function isObject(val) {
return val !== null && typeof val === "object";
}
function isPlainObject(val) {
return opt.call(val) === "[object Object]";
}
const isPromise = (val) => {
return isObject(val) && isFunction(val.then) && isFunction(val.catch);
};
const isClient = typeof window !== "undefined";
const isTouchDevice = isClient ? "ontouchstart" in document.documentElement : false;
const isHoverDevice = isClient ? window.matchMedia("(hover: hover)").matches : false;
const isIosDevice = isClient ? /iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase()) : false;
function isWindow(val) {
return val === window;
}
function isCurrentPageLink(link) {
if (link.startsWith("#")) {
return true;
}
try {
const targetUrl = new URL(link, window.location.href);
return targetUrl.origin + targetUrl.pathname === window.location.origin + window.location.pathname;
} catch {
return false;
}
}
const logFunction = {
// eslint-disable-next-line no-console
info: console.info,
// eslint-disable-next-line no-console
warn: console.warn,
// eslint-disable-next-line no-console
error: console.error
};
function getLogFunction(level, prefix) {
if (process.env.NODE_ENV === "development") {
if (prefix) {
return logFunction[level].bind(console, prefix);
} else {
return logFunction[level].bind(console);
}
}
return () => {
};
}
class Log {
constructor(prefix) {
__publicField(this, "prefix", "");
if (prefix) {
this.prefix = `[${prefix}]`;
}
}
get info() {
return getLogFunction("info", this.prefix);
}
get warn() {
return getLogFunction("warn", this.prefix);
}
get error() {
return getLogFunction("error", this.prefix);
}
}
const log$1 = new Log();
const log = new Log("helper");
function debounce(fn, wait = 0, leading = true, trailing = false) {
let handler = 0;
let hasTrailingCall = false;
return (...args) => {
if (!isClient) {
log.error("[debounce] 此函数应仅在客户端环境使用。");
}
if (leading) {
if (handler === 0) {
fn(...args);
} else {
hasTrailingCall = true;
}
}
clearTimeout(handler);
handler = window.setTimeout(() => {
if (!leading || hasTrailingCall && trailing) {
fn(...args);
}
handler = 0;
hasTrailingCall = false;
}, wait);
};
}
function debounceRAF(fn) {
let handle = 0;
const rlt = (...args) => {
if (!isClient) {
log.error("[debounceRAF] 此函数依赖 requestAnimationFrame，仅可在客户端环境使用。");
}
if (handle) {
cancelAnimationFrame(handle);
}
handle = requestAnimationFrame(() => {
fn(...args);
handle = 0;
});
};
rlt.cancel = () => {
cancelAnimationFrame(handle);
handle = 0;
};
return rlt;
}
function throttleRAF(fn) {
let handle = 0;
const rlt = (...args) => {
if (handle) {
return;
}
if (!isClient) {
log.error("[throttleRAF] 此函数依赖 requestAnimationFrame，仅可在客户端环境使用。");
}
handle = requestAnimationFrame(() => {
fn(...args);
handle = 0;
});
};
rlt.cancel = () => {
cancelAnimationFrame(handle);
handle = 0;
};
return rlt;
}
class ColorPool {
constructor(pool) {
__publicField(this, "pool");
__publicField(this, "tmpPool");
this.pool = pool;
this.tmpPool = [...pool];
}
/**
* 返回指定位置颜色，或者从颜色池随机返回一个颜色
* @param index
* @returns
*/
pick(index) {
if (index !== void 0) {
return this.pool[index % this.pool.length];
}
const { length } = this.tmpPool;
if (length === 0) {
this.tmpPool = [...this.pool];
}
const idx = Math.floor(Math.random() * length);
const color2 = this.tmpPool[idx];
this.tmpPool.splice(idx, 1);
return color2;
}
}
function uniqueId(prefix = "", length = 8) {
const gen = (len) => {
if (len <= 11) {
return Math.random().toString(36).slice(2, 2 + len).padEnd(len, "0");
} else {
return gen(11) + gen(len - 11);
}
};
return prefix ? `${prefix}-${gen(length)}` : gen(length);
}
function chunk(arr = [], size2 = 1) {
return Array.from(
{
length: Math.ceil(arr.length / size2)
},
(_v, i) => arr.slice(i * size2, i * size2 + size2)
);
}
async function asyncSome(array, judgeFn) {
for (const iterator of array) {
try {
if (await judgeFn(iterator)) {
return true;
}
} catch {
return false;
}
}
return false;
}
function getValueByPath(obj, path) {
if (!obj || !path) {
return;
}
const keys = path.split(".");
if (keys.length === 0) {
return;
}
let temp = obj;
for (let i = 0; i < keys.length; i++) {
if (!isObject(temp)) {
return;
}
temp = temp[keys[i]];
if (i === keys.length - 1) {
return temp;
}
}
}
function setValueByPath(obj, path, value) {
if (!obj || !path) {
return;
}
const keys = path.split(".");
if (keys.length === 0) {
return;
}
let temp = obj;
for (let i = 0; i < keys.length; i++) {
if (!isObject(temp)) {
throw new TypeError(`Cannot set properties of non-object (setting '${keys[i]}')!`);
}
const k = keys[i];
if (i === keys.length - 1) {
temp[k] = value;
} else {
if (isUndefined(temp[k])) {
temp[k] = Number(keys[i + 1]) ? [] : {};
}
temp = temp[k];
}
}
}
function moveToFirst(arr, item) {
const idx = arr.indexOf(item);
if (idx > 0) {
const tmp = [...arr];
tmp.splice(idx, 1);
tmp.unshift(item);
return tmp;
}
return arr;
}
function formateToString(val) {
if (isUndefined(val) || isNull(val) || typeof val === "number" && isNaN(val) || isPlainObject(val)) {
return "";
}
return String(val);
}
function requestImage(src) {
return new Promise((resolve, reject) => {
const onImgLoaded = () => {
resolve(src);
};
const onImgError = (e) => {
reject(e);
};
const img = new Image();
img.onload = onImgLoaded;
img.onerror = onImgError;
img.src = src;
});
}
function pick(source, keys) {
const result = {};
keys.forEach((key) => {
if (key in source) {
result[key] = source[key];
}
});
return result;
}
function performTask(tasks, sheduler) {
let runingIndex = 0;
function _runTask() {
sheduler((toContinue) => {
while (runingIndex < tasks.length && toContinue(runingIndex)) {
tasks[runingIndex++]();
}
if (runingIndex < tasks.length) {
_runTask();
}
});
}
_runTask();
}
function idlePerformTask(tasks) {
const sheduler = (runChunk) => {
requestIdleCallback((idle) => {
runChunk(() => idle.timeRemaining() > 0);
});
};
performTask(tasks, sheduler);
}
function promiseWithResolvers() {
let resolve;
let reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
return {
promise,
resolve,
reject
};
}
const defaultZIndex = vue.ref(1e3);
function initZIndex(val) {
defaultZIndex.value = val;
}
const defaultSize = vue.ref("medium");
function initSize(val) {
defaultSize.value = val;
}
const defaultRound = vue.ref();
function initRound(type) {
defaultRound.value = type;
}
const defaultPrestColor = ["#d9e6c3", "#ebd5be", "#d1e6de", "#e0ceeb", "#ebd3c7", "#e6dada", "#e3deeb", "#dedae6", "#cad0e8", "#cedeeb"];
const defaultPrestColorPool = vue.ref(new ColorPool(defaultPrestColor));
function initPrestColor(colors) {
defaultPrestColorPool.value = new ColorPool(colors);
}
const Breakpoints = {
Phone: "phone",
PadV: "pad_v",
PadH: "pad_h",
Laptop: "laptop",
Pc: "pc"
};
const mediaPoint = vue.ref({
[Breakpoints.Phone]: 600,
[Breakpoints.PadV]: 840,
/**
* @deprecated use padH
*/
pad: 1200,
[Breakpoints.PadH]: 1200,
[Breakpoints.Laptop]: 1680,
[Breakpoints.Pc]: 1920
});
function initMediaPoint(point) {
mediaPoint.value = { ...mediaPoint.value, ...point };
}
let globalId$X = 0;
const _sfc_main$2O = vue.defineComponent({
name: "OIconZoomOut",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-zoom-out", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$X++
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
"fill-opacity": ".8",
"fill-rule": "evenodd",
d: "M18.138 6.023q.645.929 1.037 2a8.6 8.6 0 0 1 .515 3.417 8.6 8.6 0 0 1-.806 3.236 8.7 8.7 0 0 1-1.256 1.962l3.834 3.834c.197.274.246.744 0 .99a.7.7 0 0 1-.902.074l-3.922-3.908a8.6 8.6 0 0 1-2.663 1.547 8.6 8.6 0 0 1-3.416.515 8.6 8.6 0 0 1-3.236-.806 8.683 8.683 0 0 1-4.499-4.91 8.643 8.643 0 0 1-.516-3.416 8.7 8.7 0 0 1 .806-3.235q.381-.816.906-1.522a8.67 8.67 0 0 1 4.004-2.977 8.7 8.7 0 0 1 2.264-.498A8.692 8.692 0 0 1 15.7 3.678c.33.212.423.637.212.967a.693.693 0 0 1-.968.212 7.33 7.33 0 0 0-4.54-1.135 7.2 7.2 0 0 0-1.902.418q-.78.284-1.46.722-.538.345-1.013.788a7.3 7.3 0 0 0-2.323 4.98 7.2 7.2 0 0 0 .434 2.866q.284.78.722 1.46.345.54.788 1.014a7.2 7.2 0 0 0 2.264 1.645q.692.323 1.419.494a7.27 7.27 0 0 0 4.163-.25 7.256 7.256 0 0 0 2.474-1.51 7.2 7.2 0 0 0 1.645-2.265 7.2 7.2 0 0 0 .677-2.715 7.2 7.2 0 0 0-.433-2.866 7.3 7.3 0 0 0-.87-1.68.693.693 0 0 1 .174-.975.693.693 0 0 1 .975.175",
class: "zoom-out_svg__合并"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
"fill-opacity": ".8",
"fill-rule": "evenodd",
d: "M15 10.4a.7.7 0 0 1 0 1.4H7a.7.7 0 1 1 0-1.4z",
class: "zoom-out_svg__合并"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconZoomOut = /* @__PURE__ */ _export_sfc(_sfc_main$2O, [["render", _sfc_render$Y]]);
let globalId$W = 0;
const _sfc_main$2N = vue.defineComponent({
name: "OIconZoomIn",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-zoom-in", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$W++
};
}
});
function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
"fill-opacity": ".8",
"fill-rule": "evenodd",
d: "M18.138 6.023a8.7 8.7 0 0 1 1.037 2 8.6 8.6 0 0 1 .515 3.417 8.6 8.6 0 0 1-.806 3.236 8.7 8.7 0 0 1-1.256 1.962l3.835 3.834c.197.274.246.744 0 .99a.7.7 0 0 1-.904.074l-3.92-3.908a8.6 8.6 0 0 1-2.664 1.547 8.6 8.6 0 0 1-3.417.515 8.6 8.6 0 0 1-3.235-.806 8.7 8.7 0 0 1-2.698-1.96 8.65 8.65 0 0 1-1.801-2.95 8.643 8.643 0 0 1-.516-3.416 8.7 8.7 0 0 1 .223-1.563q.204-.858.584-1.672a8.7 8.7 0 0 1 1.96-2.698 8.65 8.65 0 0 1 2.949-1.801 8.7 8.7 0 0 1 2.264-.498A8.705 8.705 0 0 1 15.7 3.678c.33.212.423.637.211.967a.693.693 0 0 1-.966.212A7.4 7.4 0 0 0 12.28 3.81a7.2 7.2 0 0 0-2.558 0q-.62.11-1.22.329a7.246 7.246 0 0 0-2.474 1.51 7.3 7.3 0 0 0-1.646 2.264 7.3 7.3 0 0 0-.676 2.716 7.2 7.2 0 0 0 .433 2.866q.284.78.722 1.46.345.54.788 1.014a7.3 7.3 0 0 0 3.683 2.139 7.28 7.28 0 0 0 4.163-.25q.78-.285 1.46-.722.54-.346 1.014-.789a7.3 7.3 0 0 0 1.646-2.264 7.2 7.2 0 0 0 .676-2.715 7.2 7.2 0 0 0-.433-2.866 7.3 7.3 0 0 0-.87-1.68.693.693 0 0 1 .175-.975.693.693 0 0 1 .974.175",
class: "zoom-in_svg__合并"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
"fill-opacity": ".8",
"fill-rule": "evenodd",
d: "M11 15.8a.7.7 0 0 0 .7-.7v-3.3H15a.7.7 0 1 0 0-1.4h-3.3V7.1a.7.7 0 0 0-1.4 0v3.3H7a.7.7 0 0 0 0 1.4h3.3v3.3a.7.7 0 0 0 .7.7",
class: "zoom-in_svg__合并"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconZoomIn = /* @__PURE__ */ _export_sfc(_sfc_main$2N, [["render", _sfc_render$X]]);
let globalId$V = 0;
const _sfc_main$2M = vue.defineComponent({
name: "OIconVideoPlay",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-video-play", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$V++
};
}
});
const _hoisted_1$1X = {
key: 0,
d: "M21.386 14.373 6.645 22.506c-1.607.887-3.659.354-4.582-1.19a3.13 3.13 0 0 1-.446-1.606V3.444C1.617 1.663 3.12.22 4.973.22c.587 0 1.163.148 1.671.428l14.741 8.133c1.607.887 2.162 2.858 1.239 4.402a3.3 3.3 0 0 1-1.239 1.19z"
};
function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1X)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconVideoPlay = /* @__PURE__ */ _export_sfc(_sfc_main$2M, [["render", _sfc_render$W]]);
let globalId$U = 0;
const _sfc_main$2L = vue.defineComponent({
name: "OIconTime",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-time", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$U++
};
}
});
const _hoisted_1$1W = {
key: 0,
d: "M12 2.293a9.7 9.7 0 0 1 4.613 1.164.7.7 0 0 1-.667 1.231 8.307 8.307 0 0 0-12.254 7.311 8.307 8.307 0 0 0 8.307 8.307 8.307 8.307 0 0 0 6.208-13.827.7.7 0 1 1 1.046-.93 9.67 9.67 0 0 1 2.453 6.45c0 5.361-4.346 9.707-9.707 9.707s-9.707-4.346-9.707-9.707 4.346-9.707 9.707-9.707zm0 3.375c.354 0 .647.263.694.605l.006.095v5.976l-3.246 3.047a.699.699 0 0 1-1.034-.936l.077-.084 2.804-2.633V6.369c0-.354.263-.647.605-.694z"
};
function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1W)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconTime = /* @__PURE__ */ _export_sfc(_sfc_main$2L, [["render", _sfc_render$V]]);
let globalId$T = 0;
const _sfc_main$2K = vue.defineComponent({
name: "OIconStar",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-star", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$T++
};
}
});
function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 16 16",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
"fill-rule": "evenodd",
d: "M8.345 2.745q.121.06.212.15a.8.8 0 0 1 .143.202L9.956 5.61a.24.24 0 0 0 .082.096.3.3 0 0 0 .119.048l2.808.403a.8.8 0 0 1 .292.102.8.8 0 0 1 .221.2.75.75 0 0 1 .154.41.78.78 0 0 1-.235.61l-2.032 1.956a.24.24 0 0 0-.066.105.2.2 0 0 0-.013.062l-.001.016q0 .022.005.046l.48 2.762a.8.8 0 0 1-.01.309.7.7 0 0 1-.124.271.77.77 0 0 1-.34.268.8.8 0 0 1-.42.05.8.8 0 0 1-.239-.08l-2.51-1.304a.26.26 0 0 0-.25 0l-2.514 1.303a.77.77 0 0 1-.44.085.8.8 0 0 1-.522-.276.75.75 0 0 1-.17-.626l.48-2.762q.006-.03.004-.062a.3.3 0 0 0-.012-.062.3.3 0 0 0-.066-.105L2.604 7.479a.76.76 0 0 1-.22-.394.8.8 0 0 1-.004-.305.9.9 0 0 1 .103-.264.8.8 0 0 1 .553-.36l2.808-.403a.3.3 0 0 0 .12-.047.3.3 0 0 0 .08-.096l1.258-2.513a.76.76 0 0 1 .449-.39.78.78 0 0 1 .594.038M6.647 6.142a1 1 0 0 0 .114-.18l1.24-2.48 1.24 2.48.064.112h.001a1.1 1.1 0 0 0 .316.31 1 1 0 0 0 .265.12h.001q.076.022.154.034l2.773.397-2.007 1.932-.082.09h-.001l-.005.006a1.05 1.05 0 0 0-.217.835l.473 2.727-2.48-1.287-.12-.053-.002-.002a1 1 0 0 0-.439-.064l-.065.005a1 1 0 0 0-.365.114l-2.479 1.287.473-2.727.015-.138a1.06 1.06 0 0 0-.172-.613 1 1 0 0 0-.15-.18L3.186 6.935l2.774-.397.123-.026h.005a1.1 1.1 0 0 0 .538-.344l.02-.024z"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
"fill-rule": "evenodd",
d: "M7.309 3.104 6.052 5.621a.27.27 0 0 1-.112.117l-2.373.359-.537.077a.75.75 0 0 0-.44.222 1 1 0 0 0-.107.134.8.8 0 0 0-.1.26.7.7 0 0 0 .004.3.8.8 0 0 0 .11.26q.046.07.108.128l2.033 1.96a.2.2 0 0 1 .045.054q.015.027.025.056a.3.3 0 0 1 .013.064.3.3 0 0 1-.003.064l-.48 2.766a.73.73 0 0 0 .077.487.773.773 0 0 0 .975.35c.019-.002.132-.042.132-.042.088-.048.185-.091.258-.132l1.77-.945.419-.216q.03-.016.061-.024a.3.3 0 0 1 .07-.008.3.3 0 0 1 .13.03l.102.054 2.21 1.211q.104.056.213.08a1 1 0 0 0 .115.014.77.77 0 0 0 .86-.287.8.8 0 0 0 .142-.409 1 1 0 0 0-.01-.162l-.48-2.767q-.005-.03-.003-.063a.3.3 0 0 1 .037-.12.3.3 0 0 1 .045-.055l2.033-1.959a.75.75 0 0 0 .21-.742.8.8 0 0 0-.228-.373.76.76 0 0 0-.406-.19l-2.545-.365-.304-.046a.3.3 0 0 1-.104-.054.3.3 0 0 1-.069-.088L8.691 3.104a.8.8 0 0 0-.145-.202.8.8 0 0 0-.26-.168.4.4 0 0 0-.212-.057L8.04 2.67a.7.7 0 0 0-.194.025.74.74 0 0 0-.306.136.7.7 0 0 0-.127.117.8.8 0 0 0-.104.156"
},
null,
-1
/* CACHED */
)),
_cache[2] || (_cache[2] = vue.createElementVNode(
"path",
{
"fill-rule": "evenodd",
d: "M8 2.67v9.24a.3.3 0 0 0-.07.01.2.2 0 0 0-.061.024l-.418.215-1.77.947c-.075.04-.17.082-.26.131 0 0-.112.04-.131.041a1 1 0 0 1-.098.033.8.8 0 0 1-.432-.012.9.9 0 0 1-.254-.138.8.8 0 0 1-.191-.232.75.75 0 0 1-.077-.487l.48-2.766.004-.049v-.015a.25.25 0 0 0-.04-.12.2.2 0 0 0-.044-.054L2.604 7.477a1 1 0 0 1-.107-.127.8.8 0 0 1-.127-.41v-.016a.7.7 0 0 1 .053-.273.7.7 0 0 1 .167-.256.8.8 0 0 1 .44-.223l.537-.076 2.373-.36a.25.25 0 0 0 .112-.117l1.257-2.515a1 1 0 0 1 .103-.157h.002a.7.7 0 0 1 .126-.117.7.7 0 0 1 .14-.082.7.7 0 0 1 .166-.055 1 1 0 0 1 .09-.017z"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconStar = /* @__PURE__ */ _export_sfc(_sfc_main$2K, [["render", _sfc_render$U]]);
let globalId$S = 0;
const _sfc_main$2J = vue.defineComponent({
name: "OIconSearch",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-search", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$S++
};
}
});
const _hoisted_1$1V = {
key: 0,
d: "m17.549 16.523.087.074 2.76 2.754a.7.7 0 0 1-.902 1.065l-.087-.074-2.76-2.754a.7.7 0 0 1 .902-1.065M10.821 3.454a7.423 7.423 0 1 1 0 14.846 7.423 7.423 0 0 1 0-14.846m0 1.4a6.023 6.023 0 1 0 0 12.046 6.023 6.023 0 0 0 0-12.046"
};
function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1V)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconSearch = /* @__PURE__ */ _export_sfc(_sfc_main$2J, [["render", _sfc_render$T]]);
let globalId$R = 0;
const _sfc_main$2I = vue.defineComponent({
name: "OIconRefresh",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-refresh", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$R++
};
}
});
const _hoisted_1$1U = {
key: 0,
d: "M14.802 2.836a9.54 9.54 0 0 1 3.928 2.341l-.001-1.251c0-.354.263-.647.605-.694l.095-.006c.354 0 .647.263.694.605l.006.095v2.653a.95.95 0 0 1-.839.944l-.111.006h-2.653a.7.7 0 0 1-.095-1.394l.095-.006 1.174-.001A8.171 8.171 0 0 0 4.189 9.601a8.172 8.172 0 1 0 15.751.432.7.7 0 0 1 1.359-.337A9.572 9.572 0 0 1 9.205 21.143 9.57 9.57 0 0 1 2.85 9.19a9.57 9.57 0 0 1 11.953-6.355z"
};
function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1U)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconRefresh = /* @__PURE__ */ _export_sfc(_sfc_main$2I, [["render", _sfc_render$S]]);
let globalId$Q = 0;
const _sfc_main$2H = vue.defineComponent({
name: "OIconOneToOne",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-one-to-one", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$Q++
};
}
});
function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
"fill-opacity": ".8",
"fill-rule": "evenodd",
d: "M8.58 8.5c-.24.24-.53.47-.88.68-.36.2-.69.33-1 .41v1.14c.64-.19 1.17-.47 1.59-.85v5.62h1.15v-7zM15.68 8.5c-.24.24-.53.47-.89.68-.35.2-.68.33-1 .41v1.14c.65-.19 1.18-.47 1.6-.85v5.62h1.15v-7z",
class: "one-to-one_svg__路径"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"circle",
{
cx: "12.1",
cy: "10.2",
r: ".7",
"fill-opacity": ".8",
class: "one-to-one_svg__椭圆 one-to-one_svg__122"
},
null,
-1
/* CACHED */
)),
_cache[2] || (_cache[2] = vue.createElementVNode(
"circle",
{
cx: "12.1",
cy: "13.7",
r: ".7",
"fill-opacity": ".8",
class: "one-to-one_svg__椭圆 one-to-one_svg__123"
},
null,
-1
/* CACHED */
)),
_cache[3] || (_cache[3] = vue.createElementVNode(
"path",
{
"fill-opacity": ".8",
"fill-rule": "evenodd",
d: "M18.79 3c1.05 0 1.9.85 1.9 1.9v9.12c0 .39-.31.7-.69.7-.39 0-.71-.31-.71-.7V4.9c0-.28-.22-.5-.5-.5H5.19c-.27 0-.5.22-.5.5v13.6c0 .27.23.5.5.5h13.6c.28 0 .5-.23.5-.5v-2.13c0-.38.32-.7.71-.7a.7.7 0 0 1 .69.7v2.13c0 1.04-.85 1.9-1.9 1.9H5.19c-1.04 0-1.9-.86-1.9-1.9V4.9c0-1.05.86-1.9 1.9-1.9z",
class: "one-to-one_svg__路径"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconOneToOne = /* @__PURE__ */ _export_sfc(_sfc_main$2H, [["render", _sfc_render$R]]);
let globalId$P = 0;
const _sfc_main$2G = vue.defineComponent({
name: "OIconMinus",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-minus", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$P++
};
}
});
const _hoisted_1$1T = {
key: 0,
d: "m3.608 11.321.114-.009 16.555-.024a.7.7 0 0 1 .116 1.391l-.114.009-16.555.024a.7.7 0 0 1-.116-1.391"
};
function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1T)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconMinus = /* @__PURE__ */ _export_sfc(_sfc_main$2G, [["render", _sfc_render$Q]]);
let globalId$O = 0;
const _sfc_main$2F = vue.defineComponent({
name: "OIconLoading",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-loading", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$O++
};
}
});
function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
d: "M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1m0 2c-4.971 0-9 4.029-9 9s4.029 9 9 9 9-4.029 9-9-4.029-9-9-9",
opacity: ".15"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{ d: "M12 1c6.075 0 11 4.925 11 11a1 1 0 0 1-2 0 9 9 0 0 0-9-9 1 1 0 0 1 0-2" },
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconLoading = /* @__PURE__ */ _export_sfc(_sfc_main$2F, [["render", _sfc_render$P]]);
let globalId$N = 0;
const _sfc_main$2E = vue.defineComponent({
name: "OIconLoadingSmall",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-loading-small", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$N++
};
}
});
function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
d: "M18.55 12.085a.728.728 0 0 0 1.445 0L20 12l-.003.21a8 8 0 1 1-8.207-8.207L12 4l-.085.005a.727.727 0 0 0 0 1.445l.085.005-.193.002a6.546 6.546 0 1 0 6.736 6.736l.003-.193z",
opacity: ".12"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
d: "M12 4a8 8 0 0 1 8 8 .727.727 0 1 1-1.454 0 6.545 6.545 0 0 0-6.545-6.545A.727.727 0 1 1 12 4",
opacity: ".64"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconLoadingSmall = /* @__PURE__ */ _export_sfc(_sfc_main$2E, [["render", _sfc_render$O]]);
let globalId$M = 0;
const _sfc_main$2D = vue.defineComponent({
name: "OIconLink",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-link", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$M++
};
}
});
const _hoisted_1$1S = {
key: 0,
d: "M11.122 9.9a.7.7 0 0 0-.902-.083l-.088.073-.554.543-.142.147c-1.175 1.285-1.217 3.186-.113 4.412l.138.144 4.972 4.867.154.142c1.447 1.26 3.705 1.144 5.147-.268 1.456-1.425 1.564-3.66.274-5.08l-.144-.149-1.921-1.881-.085-.072a.7.7 0 0 0-.975.982l.075.086 1.929 1.889.115.123c.753.872.651 2.222-.249 3.103-.914.895-2.322.986-3.216.24l-.124-.112-4.977-4.873-.11-.119c-.576-.686-.527-1.715.103-2.444l.125-.133.541-.53.083-.093a.7.7 0 0 0-.058-.912zM9.303 3.945c-1.447-1.26-3.705-1.144-5.147.268-1.456 1.425-1.564 3.66-.274 5.08l.144.149 1.921 1.881.085.072a.7.7 0 0 0 .975-.982l-.075-.086-1.929-1.889-.115-.123c-.753-.872-.651-2.222.249-3.103.914-.895 2.322-.986 3.216-.24l.124.112 4.977 4.873.11.119c.576.686.527 1.715-.103 2.444l-.125.133-.541.53-.083.093a.701.701 0 0 0 .96.995l.088-.073.554-.543.142-.147c1.175-1.285 1.217-3.186.113-4.412l-.138-.144-4.972-4.867-.154-.142z"
};
function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1S)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconLink = /* @__PURE__ */ _export_sfc(_sfc_main$2D, [["render", _sfc_render$N]]);
let globalId$L = 0;
const _sfc_main$2C = vue.defineComponent({
name: "OIconInfoTip",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-info-tip", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$L++
};
}
});
const _hoisted_1$1R = {
key: 0,
d: "M12 2.192c1.019 0 2.017.155 2.97.457a.642.642 0 0 1-.389 1.224 8.525 8.525 0 1 0 2.504 1.285.642.642 0 1 1 .767-1.03A9.8 9.8 0 0 1 21.808 12c0 5.417-4.391 9.808-9.808 9.808S2.192 17.417 2.192 12 6.583 2.192 12 2.192m0 6.6c.348 0 .636.258.681.594l.007.093v7.334a.687.687 0 0 1-1.37.093l-.005-.093V9.479c0-.38.307-.687.687-.687m0-2.521a.917.917 0 1 1 0 1.833.917.917 0 0 1 0-1.833"
};
function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1R)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconInfoTip = /* @__PURE__ */ _export_sfc(_sfc_main$2C, [["render", _sfc_render$M]]);
let globalId$K = 0;
const _sfc_main$2B = vue.defineComponent({
name: "OIconImgError",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-img-error", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$K++
};
}
});
const _hoisted_1$1Q = {
key: 0,
"fill-rule": "evenodd",
d: "M21.74 5.5a1.95 1.95 0 0 0-1.94-1.75H4.2l-.2.01c-.983.1-1.75.93-1.75 1.94v12.6l.01.2c.1.983.93 1.75 1.94 1.75h15.6l.2-.01a1.95 1.95 0 0 0 1.75-1.94v-7.952l-.002-.018a1 1 0 0 0-.008-.098l-.002-.018a.75.75 0 0 0-1.293-.372l-4.883 5.345-4.657-3.71-.114-.074a.75.75 0 0 0-.864.112l-5.079 4.727-.09.1a.75.75 0 0 0 .052.96l.101.09a.75.75 0 0 0 .96-.052l4.605-4.287 4.7 3.745.122.08a.75.75 0 0 0 .9-.16l4.052-4.438v6.02l-.012.103a.45.45 0 0 1-.438.347H4.2l-.103-.012a.45.45 0 0 1-.347-.438V5.7l.012-.103A.45.45 0 0 1 4.2 5.25h15.6l.103.012a.45.45 0 0 1 .347.438v1.467l.012.135a.75.75 0 0 0 1.488-.135V5.7zM4.89 8.668a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0m3 0a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0"
};
function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1Q)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconImgError = /* @__PURE__ */ _export_sfc(_sfc_main$2B, [["render", _sfc_render$L]]);
let globalId$J = 0;
const _sfc_main$2A = vue.defineComponent({
name: "OIconImageError",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-image-error", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$J++
};
}
});
const _hoisted_1$1P = {
key: 0,
d: "M9.075 4a.7.7 0 0 1 .095 1.394l-.095.006H3.9a.5.5 0 0 0-.492.41L3.4 5.9v11.769q0 .116.048.214l3.273-3.241a3.7 3.7 0 0 1 2.38-1.064l.224-.007h.487a.7.7 0 0 1 .095 1.394l-.095.006h-.487a2.3 2.3 0 0 0-1.47.531l-.149.135-2.557 2.532h7.032c.91-1.279 1.357-2.21 1.357-2.712 0-.192-.071-.453-.223-.822l-.151-.343-.418-.866-.163-.346-.128-.291c-.168-.401-.23-.656-.241-.95l-.002-.1c0-.29.03-.497.153-.808l.096-.225.204-.423.445-.872.124-.259.098-.228.042-.109c.108-.289.162-.53.162-.733 0-.664-.366-1.626-1.119-2.853a.7.7 0 0 1-.247-.531c0-.354.263-.647.605-.694l.095-.006h6.8a1.9 1.9 0 0 1 1.894 1.752l.006.148v11.769a1.9 1.9 0 0 1-1.752 1.894l-.148.006H3.896a1.9 1.9 0 0 1-.614-.101 1.9 1.9 0 0 1-1.28-1.65l-.006-.148V5.899a1.9 1.9 0 0 1 1.752-1.894l.148-.006h5.175zm5.863 4.084c0 .392-.088.791-.251 1.225a7 7 0 0 1-.287.656l-.511 1.006-.104.217-.076.172-.028.072-.04.122-.013.052-.013.092-.001.042q0 .065.018.15l.034.126.025.074.067.173.043.101.168.37.368.761c.41.855.603 1.407.603 1.963 0 .708-.359 1.597-1.067 2.711l5.802.001a.5.5 0 0 0 .492-.41l.008-.09V5.901a.5.5 0 0 0-.41-.492l-.09-.008h-5.548c.539 1.035.813 1.924.813 2.684zm-8.744-.679c.715 0 1.294.564 1.294 1.259s-.579 1.259-1.294 1.259S4.9 9.359 4.9 8.664s.579-1.259 1.294-1.259"
};
function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1P)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconImageError = /* @__PURE__ */ _export_sfc(_sfc_main$2A, [["render", _sfc_render$K]]);
let globalId$I = 0;
const _sfc_main$2z = vue.defineComponent({
name: "OIconFilter",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-filter", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$I++
};
}
});
const _hoisted_1$1O = {
key: 0,
d: "M18.295 3.2c.895 0 1.605.748 1.605 1.653 0 .309-.084.612-.242.874l-.085.127-1.476 1.999a.7.7 0 0 1-1.182-.744l.055-.088 1.476-1.999a.3.3 0 0 0 .054-.169c0-.123-.07-.217-.153-.245l-.052-.008H5.705a.18.18 0 0 0-.112.042c-.087.071-.116.206-.074.317l.034.063 5.01 6.783c.181.246.292.537.32.842l.007.153.018 4.918c0 .066.022.126.057.172l.039.04 1.816 1.43q.052.04.11.04c.088 0 .171-.074.197-.184l.008-.07-.024-6.336a1.7 1.7 0 0 1 .242-.879l.086-.128 2.149-2.909a.7.7 0 0 1 1.182.744l-.055.088-2.149 2.909a.3.3 0 0 0-.048.108l-.006.062.024 6.336c.003.905-.704 1.656-1.599 1.659a1.57 1.57 0 0 1-.857-.251l-.124-.089-1.816-1.43a1.66 1.66 0 0 1-.621-1.138l-.009-.169-.018-4.918a.3.3 0 0 0-.025-.118l-.029-.05-5.01-6.783a1.69 1.69 0 0 1 .278-2.295c.243-.199.536-.321.844-.351l.155-.008z"
};
function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1O)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconFilter = /* @__PURE__ */ _export_sfc(_sfc_main$2z, [["render", _sfc_render$J]]);
let globalId$H = 0;
const _sfc_main$2y = vue.defineComponent({
name: "OIconFile",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-file", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$H++
};
}
});
const _hoisted_1$1N = {
key: 0,
d: "M15.071 2.576c.223 0 .439.077.611.215l.098.09 3.963 4.192a.98.98 0 0 1 .259.546l.008.124v6.786a.7.7 0 0 1-1.394.095l-.006-.095-.001-6.302-2.137.001a1.9 1.9 0 0 1-1.894-1.752l-.006-.148-.001-2.353-8.781.013a.4.4 0 0 0-.392.32l-.008.081v15.233a.4.4 0 0 0 .321.392l.081.008 12.419-.018a.4.4 0 0 0 .392-.32l.008-.081v-2.446a.7.7 0 0 1 1.394-.095l.006.095v2.446c0 .944-.726 1.718-1.651 1.795l-.148.006-12.419.018a1.8 1.8 0 0 1-1.797-1.652l-.006-.148V4.388c0-.944.726-1.718 1.651-1.795l.148-.006 9.283-.013zm.365 12.759a.7.7 0 0 1 .095 1.394l-.095.006H8.563a.7.7 0 0 1-.095-1.394l.095-.006zm0-4.035a.7.7 0 0 1 .095 1.394l-.095.006H8.563a.7.7 0 0 1-.095-1.394l.095-.006zm-3.432-4.035a.7.7 0 0 1 .095 1.394l-.095.006H8.563a.7.7 0 0 1-.095-1.394l.095-.006zm5.58-.437-1.613-1.706.001 1.207a.5.5 0 0 0 .41.492l.09.008z"
};
function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1N)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconFile = /* @__PURE__ */ _export_sfc(_sfc_main$2y, [["render", _sfc_render$I]]);
let globalId$G = 0;
const _sfc_main$2x = vue.defineComponent({
name: "OIconEye",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-eye", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$G++
};
}
});
const _hoisted_1$1M = {
key: 0,
d: "M12.028 4.789c1.794 0 3.578.6 5.242 1.658a.7.7 0 0 1-.751 1.181c-1.453-.925-2.985-1.439-4.491-1.439-2.045 0-4.153.957-5.97 2.53-1.428 1.236-2.473 2.745-2.473 3.279 0 .536 1.04 2.047 2.461 3.283 1.809 1.574 3.91 2.531 5.955 2.531s4.146-.958 5.955-2.532c1.421-1.236 2.461-2.748 2.461-3.284 0-.448-.785-1.685-1.934-2.806a.7.7 0 1 1 .978-1.002c1.398 1.365 2.356 2.874 2.356 3.808 0 2.596-5.311 7.216-9.816 7.216s-9.816-4.62-9.816-7.214c0-2.589 5.338-7.208 9.843-7.208zm-.041 3.603a3.63 3.63 0 1 1 0 7.26 3.63 3.63 0 0 1 0-7.26m0 1.4a2.23 2.23 0 1 0-.001 4.459 2.23 2.23 0 0 0 .001-4.459"
};
function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1M)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconEye = /* @__PURE__ */ _export_sfc(_sfc_main$2x, [["render", _sfc_render$H]]);
let globalId$F = 0;
const _sfc_main$2w = vue.defineComponent({
name: "OIconEyeOff",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-eye-off", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$F++
};
}
});
const _hoisted_1$1L = {
key: 0,
d: "M21.483 8.021a.753.753 0 0 1 .158 1.054 15.6 15.6 0 0 1-2.067 2.282.1.1 0 0 1 .021.022l2.054 2.439a.754.754 0 0 1-1.153.971l-2.054-2.439-.031-.042c-.79.581-1.63 1.077-2.499 1.46l.965 3.406a.753.753 0 0 1-1.449.411l-.935-3.301a9.2 9.2 0 0 1-2.543.371 9 9 0 0 1-1.52-.134l-.869 3.067a.753.753 0 1 1-1.449-.411l.858-3.028a12.4 12.4 0 0 1-2.935-1.459l-1.817 2.158a.754.754 0 0 1-1.153-.971l1.76-2.089A15.7 15.7 0 0 1 2.352 9.2a.753.753 0 1 1 1.201-.909c2.106 2.783 5.337 4.859 8.397 4.859 3.105 0 6.391-2.144 8.478-4.968a.753.753 0 0 1 1.054-.158z"
};
function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1L)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconEyeOff = /* @__PURE__ */ _export_sfc(_sfc_main$2w, [["render", _sfc_render$G]]);
let globalId$E = 0;
const _sfc_main$2v = vue.defineComponent({
name: "OIconEllipsis",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-ellipsis", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$E++
};
}
});
const _hoisted_1$1K = {
key: 0,
d: "M12 10.5a1.5 1.5 0 1 1-.001 3.001A1.5 1.5 0 0 1 12 10.5m-6.485 0a1.5 1.5 0 1 1-.001 3.001 1.5 1.5 0 0 1 .001-3.001m12.997 0a1.5 1.5 0 1 1-.001 3.001 1.5 1.5 0 0 1 .001-3.001"
};
function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1K)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconEllipsis = /* @__PURE__ */ _export_sfc(_sfc_main$2v, [["render", _sfc_render$F]]);
let globalId$D = 0;
const _sfc_main$2u = vue.defineComponent({
name: "OIconEdit",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-edit", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$D++
};
}
});
const _hoisted_1$1J = {
key: 0,
d: "M20.047 19.523a.7.7 0 0 1 .095 1.394l-.095.006H4.532a.7.7 0 0 1-.095-1.394l.095-.006zm0-3.167a.7.7 0 0 1 .095 1.394l-.095.006h-6.47a.7.7 0 0 1-.095-1.394l.095-.006zM12.661 3.721a2.2 2.2 0 0 1 3.111 0l2.118 2.118a2.2 2.2 0 0 1 0 3.111l-8.058 8.058a2.2 2.2 0 0 1-1.489.643l-3.459.105a1 1 0 0 1-1.03-.969v-.03l.105-3.489a2.2 2.2 0 0 1 .643-1.489zm2.121.99a.8.8 0 0 0-1.131 0l-8.058 8.058a.8.8 0 0 0-.234.541l-.092 3.034 3.034-.092a.8.8 0 0 0 .449-.155l.092-.079L16.9 7.96a.8.8 0 0 0 0-1.131z"
};
function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1J)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconEdit = /* @__PURE__ */ _export_sfc(_sfc_main$2u, [["render", _sfc_render$E]]);
let globalId$C = 0;
const _sfc_main$2t = vue.defineComponent({
name: "OIconDownload",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-download", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$C++
};
}
});
const _hoisted_1$1I = {
key: 0,
"fill-opacity": ".8",
"fill-rule": "evenodd",
d: "M11.998 3.295a.7.7 0 0 1 .694.605l.006.095v11.539l4.525-4.576a.7.7 0 0 1 1.069.897l-.073.087-5.72 5.784a.7.7 0 0 1-1.194-.397l-.007-.095V3.995a.7.7 0 0 1 .7-.7m-5.313 7.588a.7.7 0 0 0-.906 1.06l2.957 2.973.087.074a.7.7 0 0 0 .905-1.062l-2.956-2.972zm12.32 8.476a.7.7 0 0 1 .096 1.394l-.095.006H5.012a.7.7 0 0 1-.095-1.393l.095-.007z"
};
function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1I)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconDownload = /* @__PURE__ */ _export_sfc(_sfc_main$2t, [["render", _sfc_render$D]]);
let globalId$B = 0;
const _sfc_main$2s = vue.defineComponent({
name: "OIconDoubleArrowUp",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-double-arrow-up", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$B++
};
}
});
const _hoisted_1$1H = {
key: 0,
d: "M18.055 17.738a.74.74 0 0 0-.002-1.022l-4.948-4.957a1.7 1.7 0 0 0-2.296.099q-.628.629-4.863 4.811l-.063.072a.7.7 0 0 0 1.053.918l4.863-4.811.054-.043a.3.3 0 0 1 .37.043l4.842 4.89.072.063a.7.7 0 0 0 .918-.063m0-5.303a.7.7 0 0 0 0-.99l-4.842-4.89-.108-.099c-.668-.563-1.634-.567-2.296.099q-.662.666-4.863 4.811l-.063.072a.7.7 0 0 0 1.053.918l4.863-4.811.054-.043a.3.3 0 0 1 .37.043l4.842 4.89.072.063a.7.7 0 0 0 .918-.063"
};
function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1H)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconDoubleArrowUp = /* @__PURE__ */ _export_sfc(_sfc_main$2s, [["render", _sfc_render$C]]);
let globalId$A = 0;
const _sfc_main$2r = vue.defineComponent({
name: "OIconDoubleArrowRight",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-double-arrow-right", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$A++
};
}
});
const _hoisted_1$1G = {
key: 0,
d: "M6.262 5.945a.74.74 0 0 1 1.022.002l4.957 4.948a1.7 1.7 0 0 1-.099 2.296q-.629.629-4.811 4.863l-.072.063a.7.7 0 0 1-.918-1.053l4.811-4.863.043-.054a.3.3 0 0 0-.043-.37l-4.89-4.842-.063-.072a.7.7 0 0 1 .063-.918m5.303 0a.7.7 0 0 1 .99 0l4.89 4.842.099.108c.563.668.567 1.634-.099 2.296q-.666.662-4.811 4.863l-.072.063a.7.7 0 0 1-.918-1.053l4.811-4.863.043-.054a.3.3 0 0 0-.043-.37l-4.89-4.842-.063-.072a.7.7 0 0 1 .063-.918"
};
function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1G)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconDoubleArrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$2r, [["render", _sfc_render$B]]);
let globalId$z = 0;
const _sfc_main$2q = vue.defineComponent({
name: "OIconDoubleArrowLeft",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-double-arrow-left", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$z++
};
}
});
const _hoisted_1$1F = {
key: 0,
d: "M17.738 5.945a.74.74 0 0 0-1.022.002l-4.957 4.948a1.7 1.7 0 0 0 .099 2.296q.629.629 4.811 4.863l.072.063a.7.7 0 0 0 .918-1.053l-4.811-4.863-.043-.054a.3.3 0 0 1 .043-.37l4.89-4.842.063-.072a.7.7 0 0 0-.063-.918m-5.303 0a.7.7 0 0 0-.99 0l-4.89 4.842-.099.108c-.563.668-.567 1.634.099 2.296q.666.662 4.811 4.863l.072.063a.7.7 0 0 0 .918-1.053l-4.811-4.863-.043-.054a.3.3 0 0 1 .043-.37l4.89-4.842.063-.072a.7.7 0 0 0-.063-.918"
};
function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1F)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconDoubleArrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2q, [["render", _sfc_render$A]]);
let globalId$y = 0;
const _sfc_main$2p = vue.defineComponent({
name: "OIconDoubleArrowDown",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-double-arrow-down", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$y++
};
}
});
const _hoisted_1$1E = {
key: 0,
d: "M18.055 6.262a.74.74 0 0 1-.002 1.022l-4.948 4.957a1.7 1.7 0 0 1-2.296-.099q-.628-.629-4.863-4.811l-.063-.072a.7.7 0 0 1 1.053-.918l4.863 4.811.054.043a.3.3 0 0 0 .37-.043l4.842-4.89.072-.063a.7.7 0 0 1 .918.063m0 5.303a.7.7 0 0 1 0 .99l-4.842 4.89-.108.099c-.668.563-1.634.567-2.296-.099q-.662-.666-4.863-4.811l-.063-.072a.7.7 0 0 1 1.053-.918l4.863 4.811.054.043a.3.3 0 0 0 .37-.043l4.842-4.89.072-.063a.7.7 0 0 1 .918.063"
};
function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1E)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconDoubleArrowDown = /* @__PURE__ */ _export_sfc(_sfc_main$2p, [["render", _sfc_render$z]]);
let globalId$x = 0;
const _sfc_main$2o = vue.defineComponent({
name: "OIconDone",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-done", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$x++
};
}
});
const _hoisted_1$1D = {
key: 0,
d: "M20.402 5.956a.7.7 0 0 1 1.063.904l-.074.087L10.9 17.412a1.45 1.45 0 0 1-1.936.101l-.11-.099-5.231-5.202a.7.7 0 0 1 .9-1.066l.087.074 5.231 5.202a.05.05 0 0 0 .048.013l.023-.013z"
};
function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1D)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconDone = /* @__PURE__ */ _export_sfc(_sfc_main$2o, [["render", _sfc_render$y]]);
let globalId$w = 0;
const _sfc_main$2n = vue.defineComponent({
name: "OIconDelete",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-delete", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$w++
};
}
});
const _hoisted_1$1C = {
key: 0,
d: "M19.154 5.295a.7.7 0 0 1 .095 1.394l-.095.006-12.201-.001.001 12.413c0 .17.12.311.28.344l.071.007h9.39a.35.35 0 0 0 .344-.28l.007-.071V8.637a.7.7 0 0 1 1.394-.095l.006.095v10.47c0 .919-.708 1.672-1.608 1.745l-.144.006h-9.39a1.75 1.75 0 0 1-1.745-1.608l-.006-.144-.001-12.413-.707.001A.7.7 0 0 1 4.75 5.3l.095-.006zm-9.143 4.449c.354 0 .647.263.694.605l.006.095v5.68a.7.7 0 0 1-1.394.095l-.006-.095v-5.68a.7.7 0 0 1 .7-.7m3.942 0c.354 0 .647.263.694.605l.006.095v5.68a.7.7 0 0 1-1.394.095l-.006-.095v-5.68a.7.7 0 0 1 .7-.7m-.301-6.555a.7.7 0 0 1 .095 1.394l-.095.006H9.68a.7.7 0 0 1-.095-1.394l.095-.006z"
};
function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1C)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconDelete = /* @__PURE__ */ _export_sfc(_sfc_main$2n, [["render", _sfc_render$x]]);
let globalId$v = 0;
const _sfc_main$2m = vue.defineComponent({
name: "OIconClose",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-close", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$v++
};
}
});
const _hoisted_1$1B = {
key: 0,
d: "M18.528 5.472a.7.7 0 0 1 .074.903l-.074.087L12.988 12l.006.006-.989.989-.006-.006-5.538 5.54a.7.7 0 0 1-1.064-.903l.074-.087L11.009 12 5.471 6.462l-.074-.087a.7.7 0 0 1 .977-.977l.087.074 5.538 5.539 5.539-5.539a.7.7 0 0 1 .99 0m-3.977 8.089 3.978 3.978.074.087a.7.7 0 0 1-.977.977l-.087-.074-3.978-3.978a.7.7 0 0 1 .99-.99"
};
function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1B)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconClose = /* @__PURE__ */ _export_sfc(_sfc_main$2m, [["render", _sfc_render$w]]);
let globalId$u = 0;
const _sfc_main$2l = vue.defineComponent({
name: "OIconChevronUp",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-chevron-up", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$u++
};
}
});
const _hoisted_1$1A = {
key: 0,
d: "M5.759 15.127a.7.7 0 0 0 .918.063l.072-.063 5.016-5.016a.3.3 0 0 1 .37-.043l.054.043 5.062 5.062a.7.7 0 0 0 1.053-.918l-.063-.072-5.062-5.062a1.7 1.7 0 0 0-2.296-.099l-.108.099-5.016 5.016a.7.7 0 0 0 0 .99"
};
function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1A)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconChevronUp = /* @__PURE__ */ _export_sfc(_sfc_main$2l, [["render", _sfc_render$v]]);
let globalId$t = 0;
const _sfc_main$2k = vue.defineComponent({
name: "OIconChevronRight",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-chevron-right", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$t++
};
}
});
const _hoisted_1$1z = {
key: 0,
d: "M9.246 5.764a.7.7 0 0 0-.063.918l.063.072 5.016 5.016a.3.3 0 0 1 .043.37l-.043.054L9.2 17.256a.7.7 0 0 0 .918 1.053l.072-.063 5.062-5.062a1.7 1.7 0 0 0 .099-2.296l-.099-.108-5.016-5.016a.7.7 0 0 0-.99 0"
};
function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1z)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconChevronRight = /* @__PURE__ */ _export_sfc(_sfc_main$2k, [["render", _sfc_render$u]]);
let globalId$s = 0;
const _sfc_main$2j = vue.defineComponent({
name: "OIconChevronRightSmall",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-chevron-right-small", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$s++
};
}
});
const _hoisted_1$1y = {
key: 0,
d: "M10.202 17.154a.56.56 0 0 1-.048-.736l.048-.056 4.008-4.016c.08-.08.096-.2.04-.296l-.04-.04-4.048-4.056a.565.565 0 0 1 0-.792c.2-.2.52-.216.736-.048l.056.048 4.048 4.056c.504.496.536 1.296.08 1.832l-.08.088-4.008 4.016a.565.565 0 0 1-.792 0"
};
function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1y)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconChevronRightSmall = /* @__PURE__ */ _export_sfc(_sfc_main$2j, [["render", _sfc_render$t]]);
let globalId$r = 0;
const _sfc_main$2i = vue.defineComponent({
name: "OIconChevronLeft",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-chevron-left", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$r++
};
}
});
const _hoisted_1$1x = {
key: 0,
d: "M14.754 5.764a.7.7 0 0 1 .063.918l-.063.072-5.016 5.016a.3.3 0 0 0-.043.37l.043.054 5.062 5.062a.7.7 0 0 1-.918 1.053l-.072-.063-5.062-5.062a1.7 1.7 0 0 1-.099-2.296l.099-.108 5.016-5.016a.7.7 0 0 1 .99 0"
};
function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1x)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconChevronLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2i, [["render", _sfc_render$s]]);
let globalId$q = 0;
const _sfc_main$2h = vue.defineComponent({
name: "OIconChevronDown",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-chevron-down", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$q++
};
}
});
const _hoisted_1$1w = {
key: 0,
d: "M5.759 8.873a.7.7 0 0 1 .918-.063l.072.063 5.016 5.016a.3.3 0 0 0 .37.043l.054-.043 5.062-5.062a.7.7 0 0 1 1.053.918l-.063.072-5.062 5.062a1.7 1.7 0 0 1-2.296.099l-.108-.099-5.016-5.016a.7.7 0 0 1 0-.99"
};
function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1w)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconChevronDown = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["render", _sfc_render$r]]);
let globalId$p = 0;
const _sfc_main$2g = vue.defineComponent({
name: "OIconChevronDownBold",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-chevron-down-bold", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$p++
};
}
});
const _hoisted_1$1v = {
key: 0,
d: "m18.214 9.877-.03.032-4.95 4.95a1.75 1.75 0 0 1-2.432.042l-.043-.042-4.95-4.95a.75.75 0 0 1-.216-.461l-.003-.046v-.046a.75.75 0 0 1 1.248-.538l.032.03 4.596 4.597a.75.75 0 0 0 1.029.03l.032-.03 4.596-4.596a.75.75 0 0 1 1.28.51v.046a.75.75 0 0 1-.189.472"
};
function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1v)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconChevronDownBold = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["render", _sfc_render$q]]);
let globalId$o = 0;
const _sfc_main$2f = vue.defineComponent({
name: "OIconChecked",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-checked", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$o++
};
}
});
const _hoisted_1$1u = {
key: 0,
d: "M5.08 13.094a1.2 1.2 0 0 1-.062-1.698 1.21 1.21 0 0 1 1.699-.057l3.508 3.269 6.753-7.24a1.195 1.195 0 0 1 1.578-.154l.117.096c.485.452.505 1.218.061 1.695l-7.572 8.119-.104.096a1.194 1.194 0 0 1-1.475.06l-.117-.096z"
};
function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1u)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconChecked = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["render", _sfc_render$p]]);
let globalId$n = 0;
const _sfc_main$2e = vue.defineComponent({
name: "OIconCaretUp",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-caret-up", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$n++
};
}
});
const _hoisted_1$1t = {
key: 0,
d: "m12.384 9.461 3.932 4.719a.5.5 0 0 1-.384.82H8.067a.5.5 0 0 1-.384-.82l3.932-4.719a.5.5 0 0 1 .768 0z"
};
function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1t)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconCaretUp = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["render", _sfc_render$o]]);
let globalId$m = 0;
const _sfc_main$2d = vue.defineComponent({
name: "OIconCaretRight",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-caret-right", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$m++
};
}
});
const _hoisted_1$1s = {
key: 0,
d: "M14.539 11.616 9.82 7.684a.5.5 0 0 0-.82.384v7.865a.5.5 0 0 0 .82.384l4.719-3.932a.5.5 0 0 0 0-.768z"
};
function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1s)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconCaretRight = /* @__PURE__ */ _export_sfc(_sfc_main$2d, [["render", _sfc_render$n]]);
let globalId$l = 0;
const _sfc_main$2c = vue.defineComponent({
name: "OIconCaretLeft",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-caret-left", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$l++
};
}
});
const _hoisted_1$1r = {
key: 0,
d: "m9.461 11.616 4.719-3.932a.5.5 0 0 1 .82.384v7.865a.5.5 0 0 1-.82.384l-4.719-3.932a.5.5 0 0 1 0-.768z"
};
function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1r)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconCaretLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$m]]);
let globalId$k = 0;
const _sfc_main$2b = vue.defineComponent({
name: "OIconCaretDown",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-caret-down", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$k++
};
}
});
const _hoisted_1$1q = {
key: 0,
d: "m12.384 14.539 3.932-4.719a.5.5 0 0 0-.384-.82H8.067a.5.5 0 0 0-.384.82l3.932 4.719a.5.5 0 0 0 .768 0z"
};
function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1q)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconCaretDown = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$l]]);
let globalId$j = 0;
const _sfc_main$2a = vue.defineComponent({
name: "OIconCalendar",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-calendar", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$j++
};
}
});
const _hoisted_1$1p = {
key: 0,
d: "M6.463 4.976a.7.7 0 0 1 .095 1.394l-.095.006H4.471a.14.14 0 0 0-.13.093l-.007.043v1.856h15.329l.001-1.856a.14.14 0 0 0-.093-.13l-.043-.007h-2.055a.7.7 0 0 1-.095-1.394l.095-.006h2.055c.801 0 1.46.614 1.53 1.397l.006.14v12.359c0 .801-.614 1.46-1.397 1.53l-.14.006H4.47c-.801 0-1.46-.614-1.53-1.397l-.006-.14V6.511c0-.801.614-1.46 1.397-1.53l.14-.006zm13.201 4.792H4.335v9.103c0 .06.039.111.093.13l.043.007h15.057c.06 0 .111-.039.13-.093l.007-.043-.001-9.103zm-3.482 5.663a.7.7 0 0 1 .095 1.394l-.095.006H7.817a.7.7 0 0 1-.095-1.394l.095-.006zm0-3.346a.7.7 0 0 1 .095 1.394l-.095.006H7.817a.7.7 0 0 1-.095-1.394l.095-.006zm-.696-8.467c.354 0 .647.263.694.605l.006.095v2.804a.7.7 0 0 1-1.394.095l-.006-.095V4.318a.7.7 0 0 1 .7-.7m-6.937-.026c.354 0 .647.263.694.605l.006.095v2.804a.7.7 0 0 1-1.394.095l-.006-.095V4.292a.7.7 0 0 1 .7-.7m4.946 1.384a.7.7 0 0 1 .095 1.394l-.095.006H10.53a.7.7 0 0 1-.095-1.394l.095-.006z"
};
function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1p)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$k]]);
let globalId$i = 0;
const _sfc_main$29 = vue.defineComponent({
name: "OIconAvatar",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-avatar", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$i++
};
}
});
function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 48 48",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"circle",
{
cx: "24",
cy: "24",
r: "24",
opacity: ".2"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
"fill-opacity": ".9",
d: "M23.92 30.857c11.31 0 14.263 6.778 15.33 9.048q.057.118.108.243A22.2 22.2 0 0 1 24 46.286c-6.01 0-11.465-2.38-15.473-6.248l.063-.133c1.117-2.27 4.02-9.048 15.33-9.048m0-19.714a8.143 8.143 0 1 1 0 16.286 8.143 8.143 0 0 1 0-16.286"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render", _sfc_render$j]]);
let globalId$h = 0;
const _sfc_main$28 = vue.defineComponent({
name: "OIconArrowUp",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-arrow-up", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$h++
};
}
});
const _hoisted_1$1o = {
key: 0,
d: "m11.978 3.099-.005.002-.084.006a.7.7 0 0 0-.589.597l-.006.095v16.402a.7.7 0 0 0 1.394.095l.006-.095-.001-14.919 5.699 5.698a.7.7 0 0 0 1.064-.903l-.074-.087-6.539-6.539a1.2 1.2 0 0 0-.812-.351l-.037-.001zm-7.359 7.868a.7.7 0 0 0 .903.073l.087-.074 4.571-4.574a.7.7 0 0 0-.99-.99L4.619 9.976a.7.7 0 0 0 0 .99z"
};
function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1o)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconArrowUp = /* @__PURE__ */ _export_sfc(_sfc_main$28, [["render", _sfc_render$i]]);
let globalId$g = 0;
const _sfc_main$27 = vue.defineComponent({
name: "OIconArrowRight",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-arrow-right", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$g++
};
}
});
const _hoisted_1$1n = {
key: 0,
d: "m20.901 12.022-.002.005-.006.084a.7.7 0 0 1-.597.589l-.095.006H3.799a.7.7 0 0 1-.095-1.394l.095-.006 14.919.001-5.698-5.699a.7.7 0 0 1 .903-1.064l.087.074 6.539 6.539c.225.225.342.517.351.812l.001.037zm-7.868 7.359a.7.7 0 0 1-.073-.903l.074-.087 4.574-4.571a.7.7 0 0 1 .99.99l-4.574 4.571a.7.7 0 0 1-.99 0z"
};
function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1n)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconArrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$27, [["render", _sfc_render$h]]);
let globalId$f = 0;
const _sfc_main$26 = vue.defineComponent({
name: "OIconArrowLeft",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-arrow-left", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$f++
};
}
});
const _hoisted_1$1m = {
key: 0,
d: "m3.099 12.022.002.005.006.084a.7.7 0 0 0 .597.589l.095.006h16.402a.7.7 0 0 0 .095-1.394l-.095-.006-14.919.001 5.698-5.699a.7.7 0 0 0-.903-1.064l-.087.074-6.539 6.539a1.2 1.2 0 0 0-.351.812l-.001.037zm7.868 7.359a.7.7 0 0 0 .073-.903l-.074-.087-4.574-4.571a.7.7 0 0 0-.99.99l4.574 4.571a.7.7 0 0 0 .99 0z"
};
function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1m)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconArrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$26, [["render", _sfc_render$g]]);
let globalId$e = 0;
const _sfc_main$25 = vue.defineComponent({
name: "OIconArrowDown",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-arrow-down", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$e++
};
}
});
const _hoisted_1$1l = {
key: 0,
d: "m11.978 20.901-.005-.002-.084-.006a.7.7 0 0 1-.589-.597l-.006-.095V3.799a.7.7 0 0 1 1.394-.095l.006.095-.001 14.919 5.699-5.698a.7.7 0 0 1 1.064.903l-.074.087-6.539 6.539a1.2 1.2 0 0 1-.812.351l-.037.001zm-7.359-7.868a.7.7 0 0 1 .903-.073l.087.074 4.571 4.574a.7.7 0 0 1-.99.99l-4.571-4.574a.7.7 0 0 1 0-.99z"
};
function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1l)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconArrowDown = /* @__PURE__ */ _export_sfc(_sfc_main$25, [["render", _sfc_render$f]]);
let globalId$d = 0;
const _sfc_main$24 = vue.defineComponent({
name: "OIconAdd",
svgType: "fill",
setup() {
const classNames = ["o-svg-icon", "o-icon-add", "type-fill"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$d++
};
}
});
const _hoisted_1$1k = {
key: 0,
d: "m3.608 11.302.114-.009 7.583-.011.012-7.58a.7.7 0 0 1 1.391-.112l.009.114-.024 16.555a.7.7 0 0 1-1.391.112l-.009-.114.01-7.574-7.579.01-.114-.009a.7.7 0 0 1-.002-1.382m11.294-.026 5.374-.007.114.009a.7.7 0 0 1 .002 1.382l-.114.009-5.378.007a.7.7 0 0 1-.69-.584l-.009-.115c0-.387.314-.7.701-.701"
};
function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1k)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconAdd = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["render", _sfc_render$e]]);
let globalId$c = 0;
const _sfc_main$23 = vue.defineComponent({
name: "OIconWarning",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-warning", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$c++
};
}
});
function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
fill: "currentColor",
d: "M21 12c0 4.971-4.029 9-9 9s-9-4.029-9-9 4.029-9 9-9 9 4.029 9 9"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
fill: "#fff",
d: "M12 13.621a.433.433 0 0 1-.432-.404l-.367-5.441-.002-.054c0-.408.306-.745.701-.795l.1-.006.054.002c.441.03.775.412.745.853l-.367 5.441a.433.433 0 0 1-.432.404m0 3.15a1.1 1.1 0 1 1-.001-2.199A1.1 1.1 0 0 1 12 16.771"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconWarning = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["render", _sfc_render$d]]);
let globalId$b = 0;
const _sfc_main$22 = vue.defineComponent({
name: "OIconSun",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-sun", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$b++
};
}
});
function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
fill: "none",
viewBox: "0 0 16 16",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"circle",
{
cx: "8.001",
cy: "8",
r: "2.667",
fill: "currentColor"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"circle",
{
cx: "8.001",
cy: "8",
r: "2.667",
fill: "currentColor"
},
null,
-1
/* CACHED */
)),
_cache[2] || (_cache[2] = vue.createElementVNode(
"path",
{
fill: "currentColor",
stroke: "currentColor",
"stroke-linecap": "round",
d: "M8 2.462v.8m-.02 9.455v.8m5.538-5.518h-.8M3.262 7.98h-.8m9.437 3.919-.566-.566M4.566 4.566 4 4m0 7.899.566-.566m6.767-6.767L11.9 4"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconSun = /* @__PURE__ */ _export_sfc(_sfc_main$22, [["render", _sfc_render$c]]);
let globalId$a = 0;
const _sfc_main$21 = vue.defineComponent({
name: "OIconSuccess",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-success", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$a++
};
}
});
function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
fill: "currentColor",
d: "M21 12c0 4.971-4.029 9-9 9s-9-4.029-9-9 4.029-9 9-9 9 4.029 9 9"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
fill: "#fff",
d: "m16.21 8.679-5.225 5.212-.043.032c-.047.026-.12.016-.169-.032l-2.478-2.465-.076-.064a.6.6 0 0 0-.77.915l2.478 2.465.105.094a1.35 1.35 0 0 0 1.8-.096l5.225-5.212.064-.076a.601.601 0 0 0-.912-.774z"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconSuccess = /* @__PURE__ */ _export_sfc(_sfc_main$21, [["render", _sfc_render$b]]);
let globalId$9 = 0;
const _sfc_main$20 = vue.defineComponent({
name: "OIconSort",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-sort", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$9++
};
}
});
function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
fill: "none",
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
fill: "none",
d: "M0 0h24v24H0z"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
fill: "currentColor",
"fill-opacity": ".8",
"fill-rule": "evenodd",
d: "m12.38 4.96 3.93 4.71c.27.33.04.83-.38.83H8.06c-.42 0-.65-.5-.38-.83l3.93-4.71c.2-.24.57-.24.77 0",
class: "sort_svg__up-arrow"
},
null,
-1
/* CACHED */
)),
_cache[2] || (_cache[2] = vue.createElementVNode(
"path",
{
fill: "currentColor",
"fill-opacity": ".8",
"fill-rule": "evenodd",
d: "m12.38 19.03 3.93-4.71a.5.5 0 0 0-.38-.82H8.06a.5.5 0 0 0-.38.82l3.93 4.71c.2.24.57.24.77 0",
class: "sort_svg__down-arrow"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconSort = /* @__PURE__ */ _export_sfc(_sfc_main$20, [["render", _sfc_render$a]]);
let globalId$8 = 0;
const _sfc_main$1$ = vue.defineComponent({
name: "OIconSkill",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-skill", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$8++
};
}
});
function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 23 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
fill: "#303030",
d: "M11.706 20.287q-.111.064-.223.126l-.222.121q-.222.119-.442.228l-.22.107c-3.105 1.484-5.919 1.565-7.475.008-1.503-1.503-1.486-4.183-.122-7.195l.052-.115.792.367c-1.28 2.764-1.311 5.12-.105 6.326 1.374 1.374 4.234 1.128 7.421-.667l.11-.063zm4.717-3.726-.145.149-.147.148-.617-.617q.143-.142.281-.286c4.186-4.337 5.77-9.453 3.737-11.486-2.085-2.085-7.39-.364-11.773 4.018a21.4 21.4 0 0 0-2.465 2.94l-.139.203-.724-.487A22 22 0 0 1 7.142 7.87c4.679-4.679 10.468-6.557 13.007-4.018 2.48 2.48.748 8.075-3.726 12.71z"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
fill: "#303030",
d: "M7.142 16.858c4.679 4.679 10.468 6.557 13.007 4.018 2.346-2.346.93-7.5-3.076-12.008a.437.437 0 0 0-.652.58c3.738 4.207 5.027 8.896 3.112 10.811-2.085 2.085-7.39.364-11.773-4.018a.437.437 0 0 0-.617.617zm-4.076-5.671a.437.437 0 0 0 .792-.368c-1.291-2.774-1.326-5.141-.117-6.35 1.368-1.368 4.208-1.132 7.385.647a.436.436 0 1 0 .426-.762q-.225-.125-.447-.242l-.222-.114q-.167-.084-.332-.162l-.22-.102-.11-.049-.218-.095a13 13 0 0 0-.648-.256l-.213-.076c-2.513-.868-4.71-.715-6.018.593-1.527 1.527-1.485 4.267-.058 7.336"
},
null,
-1
/* CACHED */
)),
_cache[2] || (_cache[2] = vue.createElementVNode(
"path",
{
fill: "#303030",
d: "M15.515 15.879a1.576 1.576 0 1 0 0 3.152 1.576 1.576 0 0 0 0-3.152m0 .727a.848.848 0 1 1 0 1.696.848.848 0 0 1 0-1.696M16 6.424a1.576 1.576 0 1 0 0 3.152 1.576 1.576 0 0 0 0-3.152m0 .728a.848.848 0 1 1 0 1.696.848.848 0 0 1 0-1.696M3.879 10.788a1.576 1.576 0 1 0 0 3.152 1.576 1.576 0 0 0 0-3.152m0 .727a.848.848 0 1 1 0 1.696.848.848 0 0 1 0-1.696"
},
null,
-1
/* CACHED */
)),
_cache[3] || (_cache[3] = vue.createElementVNode(
"path",
{
fill: "currentColor",
d: "M10.627 9.939h-.891a.767.767 0 0 0-.767.767v.891c0 .423.343.767.767.767h.891a.767.767 0 0 0 .767-.767v-.891a.767.767 0 0 0-.767-.767m-.891.485h.891c.156 0 .282.126.282.282v.891a.28.28 0 0 1-.282.282h-.891a.28.28 0 0 1-.282-.282v-.891c0-.156.126-.282.282-.282M13.536 12.606h-.891a.767.767 0 0 0-.767.767v.891c0 .423.343.767.767.767h.891a.767.767 0 0 0 .767-.767v-.891a.767.767 0 0 0-.767-.767m-.891.485h.891c.156 0 .282.126.282.282v.891a.28.28 0 0 1-.282.282h-.891a.28.28 0 0 1-.282-.282v-.891c0-.156.126-.282.282-.282M12.549 10.381l-.35.35a.767.767 0 0 0 0 1.084l.35.35a.767.767 0 0 0 1.084 0l.35-.35a.767.767 0 0 0 0-1.084l-.35-.35a.767.767 0 0 0-1.084 0m.741.343.35.35c.11.11.11.288 0 .398l-.35.35a.28.28 0 0 1-.398 0l-.35-.35a.28.28 0 0 1 0-.398l.35-.35c.11-.11.288-.11.398 0M10.627 12.606h-.891a.767.767 0 0 0-.767.767v.891c0 .423.343.767.767.767h.891a.767.767 0 0 0 .767-.767v-.891a.767.767 0 0 0-.767-.767m-.891.485h.891c.156 0 .282.126.282.282v.891a.28.28 0 0 1-.282.282h-.891a.28.28 0 0 1-.282-.282v-.891c0-.156.126-.282.282-.282"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconSkill = /* @__PURE__ */ _export_sfc(_sfc_main$1$, [["render", _sfc_render$9]]);
let globalId$7 = 0;
const _sfc_main$1_ = vue.defineComponent({
name: "OIconNoData",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-no-data", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$7++
};
}
});
const _hoisted_1$1j = ["id"];
const _hoisted_2$S = ["id"];
const _hoisted_3$D = ["id"];
const _hoisted_4$x = ["filter"];
const _hoisted_5$s = ["mask"];
const _hoisted_6$h = ["fill"];
function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
fill: "none",
viewBox: "0 0 240 210",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createElementVNode("defs", null, [
vue.createElementVNode("linearGradient", {
id: `no-data_svg__c_${_ctx.globalId}`,
x1: "120",
x2: "120",
y1: "152.797",
y2: "187.814",
class: "no-data_svg__c",
gradientUnits: "userSpaceOnUse"
}, [..._cache[0] || (_cache[0] = [
vue.createElementVNode(
"stop",
{
offset: "0",
"stop-color": "#949494",
"stop-opacity": ".2"
},
null,
-1
/* CACHED */
),
vue.createElementVNode(
"stop",
{
offset: "1",
"stop-color": "#949494",
"stop-opacity": "0"
},
null,
-1
/* CACHED */
)
])], 8, _hoisted_1$1j),
vue.createElementVNode("filter", {
id: `no-data_svg__a_${_ctx.globalId}`,
class: "no-data_svg__a"
}, [..._cache[1] || (_cache[1] = [
vue.createElementVNode(
"feColorMatrix",
{ values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" },
null,
-1
/* CACHED */
)
])], 8, _hoisted_2$S)
]),
vue.createElementVNode("mask", {
id: `no-data_svg__b_${_ctx.globalId}`,
width: "240",
height: "210",
x: "0",
y: "0",
class: "no-data_svg__b",
maskUnits: "userSpaceOnUse"
}, [
vue.createElementVNode("g", {
filter: `url(#no-data_svg__a_${_ctx.globalId})`
}, [..._cache[2] || (_cache[2] = [
vue.createElementVNode(
"path",
{
fill: "#fff",
d: "M0 0h240v210H0z"
},
null,
-1
/* CACHED */
),
vue.createElementVNode(
"path",
{ d: "M.5.5h239v209H.5z" },
null,
-1
/* CACHED */
)
])], 8, _hoisted_4$x)
], 8, _hoisted_3$D),
vue.createElementVNode("g", {
mask: `url(#no-data_svg__b_${_ctx.globalId})`
}, [
_cache[3] || (_cache[3] = vue.createElementVNode(
"path",
{
fill: "#d8d8d8",
"fill-opacity": ".004",
d: "M0 0h240v210H0z"
},
null,
-1
/* CACHED */
)),
_cache[4] || (_cache[4] = vue.createElementVNode(
"path",
{ d: "M.5.5h239v209H.5z" },
null,
-1
/* CACHED */
)),
vue.createElementVNode("path", {
fill: `url(#no-data_svg__c_${_ctx.globalId})`,
d: "M62.948 152.797c-49.875 9.757-84.698 31.916-84.698 57.689h283.5c0-25.773-34.823-47.932-84.698-57.689a11.19 11.19 0 0 1-9.452 5.189H72.4a11.19 11.19 0 0 1-9.452-5.189"
}, null, 8, _hoisted_6$h),
_cache[5] || (_cache[5] = vue.createStaticVNode('<path fill="#949494" fill-rule="evenodd" d="M178.811 92.919h-117.6v53.9c0 6.186 5.014 11.2 11.2 11.2h95.2c6.186 0 11.2-5.014 11.2-11.2zm-39.9 17.85h-37.8a4.2 4.2 0 1 0 0 8.4h37.8a4.2 4.2 0 1 0 0-8.4" opacity=".4"></path><path fill="#949494" fill-rule="evenodd" d="m61.21 92.92 14.7-33.6v33.6zm102.901-16.8v16.8h14.7l-14.7-33.6z" opacity=".5"></path><path fill="#949494" d="M75.906 59.319h88.2v33.6h-88.2z" opacity=".6"></path><path fill="#949494" fill-rule="evenodd" d="m106.058 40.386 6.6-3.123-24.15-14.694 2.513 23.232 6.921-2.898 5.036 5.916v-7.274L92.283 27.532z" opacity=".5"></path><path d="M103.211 51.97s2.353 21.858 15.582 21.858 17.025-20.063 6.848-20.263c-10.177-.199-11.168 20.195 15.955 23.147 27.122 2.95 13.913 21.365 5.382 21.457" opacity=".5"></path><path stroke="#949494" stroke-dasharray="4.24936 4.24936" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.062" d="M103.211 51.97s2.353 21.858 15.582 21.858 17.025-20.063 6.848-20.263c-10.177-.199-11.168 20.195 15.955 23.147 27.122 2.95 13.913 21.365 5.382 21.457" opacity=".5"></path><path fill="#949494" fill-rule="evenodd" d="M197.678 132.125q-1.32 2.26-1.971 2.737c-1.234.902-2.376 1.15-3.157 1.19-1.79.094 1.877-.53 3.111-2.062q1.234-1.531 2.872-4.59l-.995.053-1.027 1.437q-.55-.625-1.366-.582c-.818.042-2.91.512-3.597 2.863q-.687 2.352-3.11 4.24 3.73 1.665 7.06-.37 3.329-2.033 2.18-4.916M53.067 76.228q-2.238 3.95-3.344 4.783c-2.095 1.576-4.036 2.006-5.364 2.076-3.043.16 3.19-.925 5.284-3.602q2.095-2.677 4.87-8.023l-1.691.089-1.742 2.513q-.936-1.096-2.325-1.023c-1.389.073-4.944.888-6.107 5.002q-1.163 4.114-5.276 7.411 6.346 2.921 12.001-.629t3.694-8.597m158.09 30.867a.525.525 0 0 1 .549.499c.351 7.397-3.569 13.088-11.671 17.013a.525.525 0 0 1-.458-.945c7.746-3.753 11.41-9.072 11.08-16.018a.525.525 0 0 1 .5-.549" opacity=".3"></path>', 7))
], 8, _hoisted_5$s)
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconNoData = /* @__PURE__ */ _export_sfc(_sfc_main$1_, [["render", _sfc_render$8]]);
let globalId$6 = 0;
const _sfc_main$1Z = vue.defineComponent({
name: "OIconMoon",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-moon", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$6++
};
}
});
const _hoisted_1$1i = {
key: 0,
fill: "currentColor",
"fill-rule": "evenodd",
d: "M6.6 12.828q.418.072.85.072a4.95 4.95 0 0 0 2.72-.813 4.98 4.98 0 0 0 2.112-3.058q.117-.526.117-1.079a4.95 4.95 0 0 0-.388-1.927A4.9 4.9 0 0 0 10.95 4.45 4.93 4.93 0 0 0 7.45 3a5 5 0 0 0-1.108.125.43.43 0 0 0-.28.199.45.45 0 0 0 .129.612 3.14 3.14 0 0 1 1.144 3.84 3.147 3.147 0 0 1-3.763 1.806.43.43 0 0 0-.342.04.44.44 0 0 0-.213.27.46.46 0 0 0 .034.33 5 5 0 0 0 .764 1.089 5 5 0 0 0 1.025.846 4.9 4.9 0 0 0 1.76.67"
};
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
fill: "none",
viewBox: "0 0 16 16",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$1i)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconMoon = /* @__PURE__ */ _export_sfc(_sfc_main$1Z, [["render", _sfc_render$7]]);
let globalId$5 = 0;
const _sfc_main$1Y = vue.defineComponent({
name: "OIconKunpeng",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-kunpeng", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$5++
};
}
});
const _hoisted_1$1h = ["id"];
const _hoisted_2$R = {
fill: "none",
"fill-rule": "evenodd",
class: "kunpeng_svg__a备份"
};
const _hoisted_3$C = { class: "kunpeng_svg__编组" };
const _hoisted_4$w = { transform: "translate(62.681 13.353)" };
const _hoisted_5$r = ["id"];
const _hoisted_6$g = ["xlink:href"];
const _hoisted_7$a = ["mask"];
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
"xmlns:xlink": "http://www.w3.org/1999/xlink",
viewBox: "0 0 68 28",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createElementVNode("defs", null, [
vue.createElementVNode("path", {
id: `kunpeng_svg__a_${_ctx.globalId}`,
d: "M.128.067h4.814V8.1H.128z",
class: "kunpeng_svg__path-1"
}, null, 8, _hoisted_1$1h)
]),
vue.createElementVNode("g", _hoisted_2$R, [
vue.createElementVNode("g", _hoisted_3$C, [
_cache[0] || (_cache[0] = vue.createStaticVNode('<path fill="#C7000B" d="m6.778 11.377-1.043 2.924L1 13.497l5.582 3.984L26.856 1z" class="kunpeng_svg__Fill-1"></path><path fill="#DBDADA" d="m7.445 18.096 12.368 8.847-5.24-8.462L25.413 3.35z" class="kunpeng_svg__Fill-2"></path><path fill="#000" d="M27.366 11.615h1.223v3.774c.226-.295.443-.599.65-.885l2.048-2.889h1.37l-2.454 3.305 2.663 4.199h-1.388l-2.047-3.314-.842.946v2.368h-1.223z" class="kunpeng_svg__Fill-3"></path><path fill="#000" d="M33.872 18.685c-.278-.347-.425-.876-.425-1.57v-3.591h1.197v3.504c0 .408.07.711.208.894.148.19.356.277.633.277.477 0 .937-.251 1.38-.763v-3.912h1.205v4.19c0 .468.009.936.044 1.405h-1.12a7 7 0 0 1-.103-.86c-.165.192-.33.348-.486.478a2.1 2.1 0 0 1-.573.338 1.8 1.8 0 0 1-.737.148c-.53 0-.937-.182-1.223-.538" class="kunpeng_svg__Fill-5"></path><path fill="#000" d="M39.614 14.955c0-.53-.009-.998-.034-1.431h1.127q.027.182.052.442c.018.173.035.312.043.434q.237-.3.486-.495c.157-.139.347-.251.564-.347.226-.086.468-.139.746-.139.52 0 .92.183 1.206.538.286.365.425.885.425 1.579v3.583h-1.197v-3.496c0-.79-.286-1.189-.842-1.189-.26 0-.494.07-.72.217a3.2 3.2 0 0 0-.65.573v3.895h-1.206z" class="kunpeng_svg__Fill-7"></path><path fill="#000" d="M48.86 17.748q.366-.52.365-1.535c0-.625-.104-1.076-.303-1.362a.96.96 0 0 0-.816-.417c-.234 0-.451.061-.65.174-.2.121-.382.277-.564.468v3.002c.121.06.26.104.416.147.165.035.321.052.477.052.469 0 .824-.173 1.076-.529m-3.174-2.854c0-.416-.017-.867-.043-1.37h1.136c.044.234.07.468.087.71.468-.537 1.006-.814 1.613-.814.356 0 .677.095.98.286.295.19.538.485.72.893.191.4.278.92.278 1.544q0 .973-.312 1.675c-.208.46-.504.806-.885 1.05a2.43 2.43 0 0 1-1.31.355 3 3 0 0 1-1.058-.191v2.307l-1.206.113z" class="kunpeng_svg__Fill-9"></path><path fill="#000" d="M54.75 15.675c-.017-.451-.13-.78-.312-1.006q-.283-.339-.763-.339a1 1 0 0 0-.763.339c-.2.225-.339.563-.4 1.006zm1.18.807h-3.452c.06 1.17.581 1.76 1.579 1.76q.375-.002.763-.095c.26-.07.503-.156.746-.26l.26.876c-.59.304-1.249.46-1.986.46-.564 0-1.032-.113-1.414-.339a2.06 2.06 0 0 1-.867-.971c-.2-.425-.295-.928-.295-1.518 0-.625.104-1.154.312-1.596q.302-.675.85-1.024a2.33 2.33 0 0 1 1.275-.356c.494 0 .91.13 1.25.374.329.251.58.572.736.988.165.408.243.868.243 1.362z" class="kunpeng_svg__Fill-11"></path><path fill="#000" d="M57.101 14.955c0-.53-.008-.998-.034-1.431h1.127q.027.182.052.442c.018.173.035.312.044.434q.236-.3.485-.495c.157-.139.347-.251.564-.347.226-.086.469-.139.746-.139.52 0 .92.183 1.206.538.286.365.425.885.425 1.579v3.583h-1.197v-3.496c0-.79-.286-1.189-.85-1.189-.252 0-.486.07-.712.217q-.324.21-.65.573v3.895h-1.206z" class="kunpeng_svg__Fill-13"></path>', 8)),
vue.createElementVNode("g", _hoisted_4$w, [
vue.createElementVNode("mask", {
id: `kunpeng_svg__b_${_ctx.globalId}`,
fill: "#fff",
class: "kunpeng_svg__mask-2"
}, [
vue.createElementVNode("use", {
"xlink:href": `#kunpeng_svg__a_${_ctx.globalId}`
}, null, 8, _hoisted_6$g)
], 8, _hoisted_5$r),
vue.createElementVNode("path", {
mask: `url(#kunpeng_svg__b_${_ctx.globalId})`,
fill: "#000",
d: "M3.146 4.656a2.1 2.1 0 0 0 .556-.469V1.273a2 2 0 0 0-.46-.2 2.1 2.1 0 0 0-.52-.07c-.278 0-.512.079-.72.244-.209.156-.365.399-.478.72-.112.312-.173.711-.173 1.17 0 .6.104 1.033.303 1.31q.302.407.772.408c.26 0 .504-.069.72-.2M1.342 7.962a6 6 0 0 1-.876-.33l.26-.928c.564.286 1.102.434 1.614.434.442 0 .78-.122 1.015-.356s.347-.625.347-1.162v-.573a2.8 2.8 0 0 1-.686.599 1.74 1.74 0 0 1-.902.225 1.83 1.83 0 0 1-.997-.286c-.295-.182-.538-.477-.72-.885-.182-.399-.27-.92-.27-1.535 0-.634.096-1.189.296-1.648q.3-.701.859-1.076c.381-.243.824-.373 1.353-.373q.352 0 .676.104.339.09.573.26l.251-.26h.807q-.041.702-.043 1.38v4.128q0 .78-.312 1.327a2 2 0 0 1-.86.816c-.364.182-.78.278-1.24.278q-.676.002-1.145-.14",
class: "kunpeng_svg__Fill-15"
}, null, 8, _hoisted_7$a)
])
])
])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconKunpeng = /* @__PURE__ */ _export_sfc(_sfc_main$1Y, [["render", _sfc_render$6]]);
let globalId$4 = 0;
const _sfc_main$1X = vue.defineComponent({
name: "OIconInfo",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-info", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$4++
};
}
});
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
fill: "currentColor",
d: "M21 12c0 4.971-4.029 9-9 9s-9-4.029-9-9 4.029-9 9-9 9 4.029 9 9"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
fill: "#fff",
d: "M12 10.433a.6.6 0 0 0-.6.6v5.5l.008.099a.6.6 0 0 0 1.192-.099v-5.5l-.008-.099a.6.6 0 0 0-.592-.501M12 7.3a1.1 1.1 0 1 0-.001 2.199A1.1 1.1 0 0 0 12 7.3"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconInfo = /* @__PURE__ */ _export_sfc(_sfc_main$1X, [["render", _sfc_render$5]]);
let globalId$3 = 0;
const _sfc_main$1W = vue.defineComponent({
name: "OIconExclamationMark",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-exclamation-mark", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$3++
};
}
});
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
fill: "none",
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{ d: "M0 0h24v24H0z" },
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
fill: "#fff",
"fill-rule": "evenodd",
d: "M12 19.275a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m0-4.725a1.125 1.125 0 0 1-1.125-1.125v-7.5a1.125 1.125 0 0 1 2.25 0v7.5c0 .62-.504 1.125-1.125 1.125"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconExclamationMark = /* @__PURE__ */ _export_sfc(_sfc_main$1W, [["render", _sfc_render$4]]);
let globalId$2 = 0;
const _sfc_main$1V = vue.defineComponent({
name: "OIconDanger",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-danger", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$2++
};
}
});
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{
fill: "currentColor",
d: "M21 12c0 4.971-4.029 9-9 9s-9-4.029-9-9 4.029-9 9-9 9 4.029 9 9"
},
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
fill: "#fff",
d: "M12.989 12.989a.6.6 0 0 1 .766-.069l.083.069 2.271 2.271.032.035a.599.599 0 0 1-.765.902l-.084-.06-.035-.032-2.268-2.268a.6.6 0 0 1-.113-.689l.049-.084.064-.076zM7.895 7.895a.6.6 0 0 1 .727-.094l.086.062.035.032L12 11.151l3.257-3.256a.6.6 0 0 1 .674-.122l.091.052.083.069a.6.6 0 0 1 .092.73l-.06.084-.032.035-7.362 7.362a.601.601 0 0 1-.941-.73l.06-.084.032-.035 3.256-3.258-3.291-3.294a.6.6 0 0 1 .035-.81z"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconDanger = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["render", _sfc_render$3]]);
let globalId$1 = 0;
const _sfc_main$1U = vue.defineComponent({
name: "OIconCheckMark",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-check-mark", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId$1++
};
}
});
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
fill: "none",
viewBox: "0 0 24 24",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[0] || (_cache[0] = vue.createElementVNode(
"path",
{ d: "M0 0h24v24H0z" },
null,
-1
/* CACHED */
)),
_cache[1] || (_cache[1] = vue.createElementVNode(
"path",
{
fill: "#fff",
"fill-rule": "evenodd",
d: "M20.71 6.307q.138.137.213.301.075.166.09.357.014.192-.036.367-.048.17-.158.321l-.01.012-.089.106-9.96 9.934a1.75 1.75 0 0 1-2.343.122l-.008-.006-.118-.107-4.968-4.94a1.05 1.05 0 0 1-.286-.529 1.03 1.03 0 0 1 .054-.6 1.1 1.1 0 0 1 .228-.346 1.02 1.02 0 0 1 .657-.304q.193-.015.368.033.17.049.321.158l.013.008.106.09 4.737 4.71 9.715-9.69a1 1 0 0 1 .53-.284 1 1 0 0 1 .415.001 1 1 0 0 1 .53.286"
},
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconCheckMark = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["render", _sfc_render$2]]);
let globalId = 0;
const _sfc_main$1T = vue.defineComponent({
name: "OIconAscend",
svgType: "color",
setup() {
const classNames = ["o-svg-icon", "o-icon-ascend", "type-color"];
const isClient2 = vue.ref(false);
vue.onMounted(() => {
isClient2.value = true;
});
return {
isClient: isClient2,
classNames,
globalId: globalId++
};
}
});
const _hoisted_1$1g = {
key: 0,
fill: "none",
"fill-rule": "nonzero",
class: "ascend_svg__st_logo_dh_ascend"
};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"svg",
{
viewBox: "0 0 68 28",
class: vue.normalizeClass(_ctx.classNames)
},
[
_ctx.isClient ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$1g, [..._cache[0] || (_cache[0] = [
vue.createStaticVNode('<path fill="#040000" d="M52.442 13.264h-.772c-1.356.003-2.456.988-2.468 2.207l-.03 4.207h1.22v-4.125c0-.31.137-.608.38-.827.244-.22.575-.343.92-.343l.637.01c.733.012 1.32.549 1.322 1.208v4.073h1.223v-4.228a2.08 2.08 0 0 0-.714-1.544 2.57 2.57 0 0 0-1.718-.638" class="ascend_svg__path1"></path><path fill="#040000" d="M60.857 10.414v2.858a2.79 2.79 0 0 0-1.97-.784c-1.851 0-3.3 1.576-3.3 3.587s1.449 3.603 3.3 3.603c.727.015 1.43-.26 1.97-.769v.71H62v-9.205zm-1.97 3.274c1.326 0 1.93 1.239 1.93 2.387 0 1.149-.604 2.388-1.93 2.388-1.209 0-2.166-1.05-2.166-2.388s.95-2.394 2.167-2.394z" class="ascend_svg__形状"></path><path fill="#040000" d="m32.445 15.772-.425-.082c-.85-.163-1.151-.383-1.151-.703 0-.369.567-.637 1.16-.637.592 0 1.102.26 1.102.712v.215h1.449v-.215c0-1.126-1.039-1.798-2.55-1.798-1.43 0-2.608.726-2.608 1.723 0 .912.827 1.494 2.248 1.777l.403.075c1.26.24 1.366.574 1.366.882 0 .515-.576.875-1.398.875s-1.382-.43-1.382-1.024v-.214h-1.44v.214c0 1.237 1.166 2.106 2.833 2.106s2.868-.821 2.868-1.953c-.009-1.284-1.194-1.698-2.475-1.953M47.29 18.161c-.386.29-.991.438-1.798.438-1.084 0-1.958-.674-2.176-1.684l-.019-.087h-1.251l.013.12c.065.724.427 1.403 1.018 1.909.658.534 1.521.828 2.415.821 1.094 0 1.975-.236 2.623-.701l.345-.247-.89-.786zM47.49 13.602c-.629-.646-1.446-1.019-2.301-1.05-1.623 0-2.901 1.288-3.126 3.127l-.017.141h1.139l.017-.1c.207-1.14 1.006-1.905 1.987-1.905.972.003 1.82.735 2.063 1.78h-1.116v1.233h2.298l.023-.589c.039-.993-.314-1.956-.967-2.637" class="ascend_svg__路径"></path><path fill="#040000" d="M44.184 16.115h1.425v1h-1.425z" class="ascend_svg__矩形"></path><path fill="#040000" d="m25.06 10.414-3.68 9.258h1.418l1.076-3.03h2.852l1.083 3.036h1.41l-3.532-9.256zm1.232 5h-1.97l.942-2.425a.064.064 0 0 1 .064-.041.07.07 0 0 1 .066.04z" class="ascend_svg__形状"></path><path fill="#040000" d="M38.483 14.505c.581.042 1.12.35 1.481.846l.037.051h1.332l-.082-.189c-.521-1.156-1.586-1.905-2.768-1.949zM36.817 16.115c.11-.861.78-1.56 1.666-1.74v-1.11c-1.549.158-2.753 1.362-2.85 2.85zM40.74 17.665l-.037.051a2.21 2.21 0 0 1-2.254.812 2.13 2.13 0 0 1-1.645-1.7h-1.172c.169 1.67 1.504 2.85 3.297 2.85 1.412 0 2.554-.693 3.048-1.852l.069-.161z" class="ascend_svg__路径"></path><path fill="#C31D20" d="M7.553 17.76c3.302-3.788 6.674-6.125 9.55-7.192l-.021-5.683a.94.94 0 0 0-.612-.83.915.915 0 0 0-.99.245l-2.522 2.771-12.59 14.42a1.5 1.5 0 0 0-.295 1.448c.163.502.576.877 1.085.984a1.44 1.44 0 0 0 1.38-.463l5.009-5.691z" class="ascend_svg__路径"></path><path fill="#C31D20" d="m10.69 16.093 4.41 5.46c.351.287.84.344 1.25.146s.662-.614.644-1.062l.11-6.617c-2.542-.261-4.627.693-6.414 2.073" class="ascend_svg__路径"></path>', 8)
])])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}
const OIconAscend = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["render", _sfc_render$1]]);
vue.shallowRef(OIconArrowUp);
vue.shallowRef(OIconArrowDown);
vue.shallowRef(OIconArrowLeft);
vue.shallowRef(OIconArrowRight);
const IconChevronUp = vue.shallowRef(OIconChevronUp);
const IconChevronDown = vue.shallowRef(OIconChevronDown);
const IconChevronDownBold = vue.shallowRef(OIconChevronDownBold);
const IconChevronLeft = vue.shallowRef(OIconChevronLeft);
const IconChevronRight = vue.shallowRef(OIconChevronRight);
const IconChevronRightSmall = vue.shallowRef(OIconChevronRightSmall);
const IconInfo = vue.shallowRef(OIconInfo);
const IconInfoTip = vue.shallowRef(OIconInfoTip);
const IconSuccess = vue.shallowRef(OIconSuccess);
const IconWarning = vue.shallowRef(OIconWarning);
const IconDanger = vue.shallowRef(OIconDanger);
const IconLoading = vue.shallowRef(OIconLoading);
const IconLoadingSmall = vue.shallowRef(OIconLoadingSmall);
const IconLinkPrefix = vue.shallowRef(OIconLink);
const IconLinkArrow = vue.shallowRef(OIconArrowRight);
const IconDone = vue.shallowRef(OIconDone);
const IconClose = vue.shallowRef(OIconClose);
const IconAdd = vue.shallowRef(OIconAdd);
const IconMinus = vue.shallowRef(OIconMinus);
const IconEllipsis = vue.shallowRef(OIconEllipsis);
const IconStar = vue.shallowRef(OIconStar);
const IconRefresh = vue.shallowRef(OIconRefresh);
const IconDelete = vue.shallowRef(OIconDelete);
const IconPreview = vue.shallowRef(OIconEye);
const IconFile = vue.shallowRef(OIconFile);
const IconEdit = vue.shallowRef(OIconEdit);
const IconEyeOn = vue.shallowRef(OIconEye);
const IconEyeOff = vue.shallowRef(OIconEyeOff);
const IconImageError = vue.shallowRef(OIconImageError);
const IconVideoPlay = vue.shallowRef(OIconVideoPlay);
const IconChecked = vue.shallowRef(OIconChecked);
const IconImgError = vue.shallowRef(OIconImgError);
const IconDownload = vue.shallowRef(OIconDownload);
const IconTime = vue.shallowRef(OIconTime);
const IconCalendar = vue.shallowRef(OIconCalendar);
const IconCalendarPrevYear = vue.shallowRef(OIconDoubleArrowLeft);
const IconCalendarNextYear = vue.shallowRef(OIconDoubleArrowRight);
const IconCalendarPrevMonth = vue.shallowRef(OIconChevronLeft);
const IconCalendarNextMonth = vue.shallowRef(OIconChevronRight);
const IconAvatar = vue.shallowRef(OIconAvatar);
function initIconLoading(icon) {
IconLoading.value = icon;
}
function initIconLinkPrefix(icon) {
IconLinkPrefix.value = icon;
}
function initIconLinkArrow(icon) {
IconLinkArrow.value = icon;
}
function initIconClose(icon) {
IconClose.value = icon;
}
function initIconAdd(icon) {
IconAdd.value = icon;
}
function initIconMinus(icon) {
IconMinus.value = icon;
}
function initIconChevronUp(icon) {
IconChevronUp.value = icon;
}
function initIconChevronDown(icon) {
IconChevronDown.value = icon;
}
function initIconChevronLeft(icon) {
IconChevronLeft.value = icon;
}
function initIconChevronRight(icon) {
IconChevronRight.value = icon;
}
function initIconDone(icon) {
IconDone.value = icon;
}
function initIconEllipsis(icon) {
IconEllipsis.value = icon;
}
function initIconStar(icon) {
IconStar.value = icon;
}
function initIconVideoPlay(icon) {
IconVideoPlay.value = icon;
}
const observerPool = /* @__PURE__ */ new WeakMap();
let instance = null;
function createObserverInstance$1() {
if (!instance) {
const observer = new ResizeObserver((entries) => {
entries.forEach((entry) => {
var _a;
const ele = entry.target;
const ins = observerPool.get(ele);
if (!ins) {
return;
}
(_a = ins == null ? void 0 : ins.callbacks) == null ? void 0 : _a.forEach((fn) => fn(entry, ins.isFirst));
if (ins.isFirst) {
ins.isFirst = false;
}
});
});
instance = {
observer,
record: 0
};
}
return instance;
}
function useResizeObserver() {
const ins = createObserverInstance$1();
return {
/**
* 监听实例
*/
observer: ins,
/**
* 创建监听实例
* el: 监听元素
* listener: resize回调, 移除监听时需要指定该监听函数
*/
observe: (el, listener2) => {
if (!el || !isFunction(listener2)) {
return null;
}
const val = observerPool.get(el);
if (val) {
val.callbacks.push(listener2);
} else {
ins.observer.observe(el);
ins.record++;
observerPool.set(el, {
element: el,
callbacks: [listener2],
isFirst: true
});
}
return ins;
},
/**
* 移除监听
* el: 要移除监听的元素
* listener: 要移除的监听函数，如果不传，则使用初始化时的onResize回调
*/
unobserve: (el, listener2) => {
if (!el || !isFunction(listener2) || !ins) {
return;
}
const val = observerPool.get(el);
if (val) {
const idx = val.callbacks.indexOf(listener2);
if (idx === -1) {
return;
}
val.callbacks.splice(idx, 1);
if (val.callbacks.length === 0) {
ins.observer.unobserve(el);
observerPool.delete(el);
ins.record--;
if (ins.record === 0) {
ins.observer.disconnect();
}
}
}
},
destroy() {
ins.observer.disconnect();
}
};
}
const defaultKey = {};
const instancePool = /* @__PURE__ */ new WeakMap();
function createObserverInstance(options) {
let instance2 = instancePool.get(options || defaultKey);
if (!instance2) {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
var _a;
const ele = entry.target;
const ins = instance2 == null ? void 0 : instance2.elementPool.get(ele);
if (!ins) {
return;
}
(_a = ins == null ? void 0 : ins.callbacks) == null ? void 0 : _a.forEach((fn) => fn(entry, entry.isIntersecting));
});
}, options);
const elementPool = /* @__PURE__ */ new WeakMap();
instance2 = {
observer,
record: 0,
elementPool
};
instancePool.set(options || defaultKey, instance2);
}
return instance2;
}
function useIntersectionObserver(options) {
const instance2 = createObserverInstance(options);
return {
/**
* 监听实例
*/
observer: instance2.observer,
/**
* 创建监听实例
* el: 添加监听的元素
* listener: 进入视口回调, 移除监听时需要指定该监听函数
*/
observe: (el, listener2) => {
if (!el || !isFunction(listener2)) {
return null;
}
const val = instance2.elementPool.get(el);
if (val) {
val.callbacks.push(listener2);
} else {
instance2.observer.observe(el);
instance2.record++;
instance2.elementPool.set(el, {
element: el,
callbacks: [listener2]
});
}
return instance2.observer;
},
/**
* 移除对某元素的监听
* el: 要移除监听的元素
* listener: 要移除的监听函数，如果不传，则使用初始化时的回调
*/
unobserve: (el, listener2) => {
if (!el || !isFunction(listener2) || !instance2) {
return;
}
const val = instance2.elementPool.get(el);
if (val) {
const idx = val.callbacks.indexOf(listener2);
val.callbacks.splice(idx, 1);
if (val.callbacks.length === 0) {
instance2.observer.unobserve(el);
instance2.elementPool.delete(el);
instance2.record--;
if (instance2.record === 0) {
instance2.observer.disconnect();
}
}
}
},
/**
* 销毁观察器
*/
destroy() {
instance2.observer.disconnect();
}
};
}
function useElementDirective(onElementChange) {
const directive = {
mounted(el) {
onElementChange(el, "mounted");
},
updated(el) {
onElementChange(el, "updated");
},
unmounted() {
onElementChange(null, "unmounted");
}
};
return {
getElementDirective: directive
};
}
let ro$1 = null;
function useReiszeObserverDirective(onResize) {
return {
vResizeObserver: {
beforeMount() {
ro$1 = useResizeObserver();
},
mounted(el) {
if (isFunction(onResize)) {
ro$1 == null ? void 0 : ro$1.observe(el, onResize);
}
},
unmounted(el) {
if (onResize) {
ro$1 == null ? void 0 : ro$1.unobserve(el, onResize);
}
}
}
};
}
let io$1 = null;
function useIntersectionObserverDirective({
listener: listener2,
removeOnUnmounted
}) {
return {
vIntersectionObserver: {
beforeMount() {
io$1 = useIntersectionObserver();
},
mounted(el) {
if (isFunction(listener2)) {
io$1 == null ? void 0 : io$1.observe(el, listener2);
}
},
unmounted(el) {
if (listener2 && removeOnUnmounted) {
io$1 == null ? void 0 : io$1.unobserve(el, listener2);
}
}
}
};
}
function easeInOutCubic(current, start, end, duration) {
const elapsed = end - start;
let time = current / (duration / 2);
if (time < 1) {
return elapsed / 2 * time * time * time + start;
}
time -= 2;
return elapsed / 2 * (time * time * time + 2) + start;
}
function isDocument(val) {
return val instanceof Document || (val == null ? void 0 : val.constructor.name) === "HTMLDocument";
}
function isHtmlElement(el) {
if (typeof HTMLElement === "object") {
return el instanceof HTMLElement;
} else if (el && typeof el === "object") {
const ele = el;
return (ele.nodeType === 1 || ele.nodeType === 9) && typeof ele.nodeName === "string";
}
return false;
}
function getOffsetElement(el) {
const offsetEl = el.offsetParent;
if (offsetEl && offsetEl.tagName === "BODY") {
const stylePosition = window.getComputedStyle(document.body).getPropertyValue("position");
if (stylePosition === "static") {
return document.documentElement;
}
}
return offsetEl;
}
function getScroll(el) {
const rlt = {
scrollLeft: 0,
scrollTop: 0
};
if (!el) {
return rlt;
}
if (isWindow(el)) {
rlt.scrollLeft = window.scrollX;
rlt.scrollTop = window.scrollY;
} else if (isDocument(el)) {
rlt.scrollLeft = el.documentElement.scrollLeft;
rlt.scrollTop = el.documentElement.scrollTop;
} else {
rlt.scrollLeft = el.scrollLeft;
rlt.scrollTop = el.scrollTop;
}
return rlt;
}
function getScrollParents(el) {
const parents = [];
let ele = el == null ? void 0 : el.parentElement;
while (ele && ele !== document.documentElement) {
const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = ele;
if (offsetHeight < scrollHeight || offsetWidth < scrollWidth) {
parents.push(ele);
}
ele = ele.parentElement;
}
return parents;
}
function findClosestElementWithClass(target, className, rootContainer) {
if (!(target instanceof HTMLElement)) {
return null;
}
let currentElement = target;
while (currentElement && currentElement !== rootContainer) {
if (currentElement.classList && currentElement.classList.contains(className)) {
return currentElement;
}
currentElement = currentElement.parentElement;
}
return null;
}
function getElementSize(el) {
return {
width: el.innerWidth || el.clientWidth,
height: el.innerHeight || el.clientHeight,
offsetWidth: el.innerWidth || el.offsetWidth,
offsetHeight: el.innerHeight || el.offsetHeight
};
}
function getElementRectByRAF(el) {
return new Promise((resolve) => {
const checkLayout = () => {
const rect = el.getBoundingClientRect();
if (rect.width > 0 || rect.height > 0) {
resolve(rect);
} else {
requestAnimationFrame(checkLayout);
}
};
requestAnimationFrame(checkLayout);
});
}
function getCssVariable(key, el) {
const ele = el ? el : document.documentElement;
return window.getComputedStyle(ele).getPropertyValue(key);
}
function supportTouch() {
return "ontouchstart" in window;
}
let cancelScrollRAF = null;
function scrollTo(y, opts) {
const { container = window, duration = 450 } = opts;
const { scrollTop } = getScroll(container);
const startTime = Date.now();
if (isFunction(cancelScrollRAF)) {
cancelScrollRAF();
cancelScrollRAF = null;
}
return new Promise((resolve) => {
const frameFn = () => {
const timeStamp = Date.now();
const time = timeStamp - startTime;
const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
if (isWindow(container)) {
window.scrollTo({
left: window.scrollX,
top: nextScrollTop,
behavior: "instant"
});
} else if (isDocument(container)) {
container.documentElement.scrollTop = nextScrollTop;
} else {
container.scrollTop = nextScrollTop;
}
if (time < duration) {
const fn = throttleRAF(frameFn);
cancelScrollRAF = fn.cancel;
fn();
} else {
throttleRAF(resolve)();
}
};
throttleRAF(frameFn)();
});
}
function isOverflown(element) {
if (!element) {
return false;
}
return element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
}
function checkElementOverflowHorizontal(options) {
const { element, parentElement, threshold = 0 } = options;
if (!(element instanceof HTMLElement)) {
throw new Error("参数必须是有效的HTMLElement");
}
const scrollParent = parentElement ? parentElement : getScrollParents(element)[0];
if (!scrollParent) {
return {
isOverflowLeft: false,
isOverflowRight: false,
overflowLeft: 0,
overflowRight: 0
};
}
const elementRect = element.getBoundingClientRect();
const parentRect = scrollParent.getBoundingClientRect();
const elementLeftRelativeToParent = elementRect.left - parentRect.left + scrollParent.scrollLeft;
const elementRightRelativeToParent = elementLeftRelativeToParent + elementRect.width;
const parentVisibleLeft = scrollParent.scrollLeft;
const parentVisibleRight = scrollParent.scrollLeft + scrollParent.clientWidth;
const overflowLeft = parentVisibleLeft - elementLeftRelativeToParent;
const isOverflowLeft = overflowLeft > threshold;
const overflowRight = elementRightRelativeToParent - parentVisibleRight;
const isOverflowRight = overflowRight > threshold;
return { isOverflowLeft, isOverflowRight, overflowLeft, overflowRight };
}
function checkElementOverflowVertical(options) {
const { element, parentElement, threshold = 0 } = options;
if (!(element instanceof HTMLElement)) {
throw new Error("参数必须是有效的HTMLElement");
}
const scrollParent = parentElement ? parentElement : getScrollParents(element)[0];
if (!scrollParent) {
return {
isOverflowTop: false,
isOverflowBottom: false,
overflowTop: 0,
overflowBottom: 0
};
}
const elementRect = element.getBoundingClientRect();
const parentRect = scrollParent.getBoundingClientRect();
const elementTopRelativeToParent = elementRect.top - parentRect.top + scrollParent.scrollTop;
const elementBottomRelativeToParent = elementTopRelativeToParent + elementRect.height;
const parentVisibleTop = scrollParent.scrollTop;
const parentVisibleBottom = scrollParent.scrollTop + scrollParent.clientHeight;
const overflowTop = parentVisibleTop - elementTopRelativeToParent;
const isOverflowTop = overflowTop > threshold;
const overflowBottom = elementBottomRelativeToParent - parentVisibleBottom;
const isOverflowBottom = overflowBottom > threshold;
return {
isOverflowTop,
isOverflowBottom,
overflowTop,
overflowBottom
};
}
function checkElementOverflow(options) {
return {
...checkElementOverflowHorizontal(options),
...checkElementOverflowVertical(options)
};
}
function useElementOverflown(elementRef) {
const result = vue.ref(false);
const check = () => {
result.value = isOverflown(vue.toValue(elementRef) ?? void 0);
};
vue.onMounted(() => {
const { observe, unobserve } = useResizeObserver();
const el = vue.toValue(elementRef);
if (el) {
check();
observe(el, check);
}
const stopWatch = vue.watch(
() => vue.toValue(elementRef),
(_el, oldEl) => {
if (oldEl) unobserve(oldEl, check);
if (_el) {
check();
observe(_el, check);
} else {
result.value = false;
}
},
{ flush: "post" }
);
vue.onUnmounted(() => {
stopWatch();
const _el = vue.toValue(elementRef);
if (_el) unobserve(_el, check);
});
});
return result;
}
const THEME_KEY = "__theme__";
const rootTheme = vue.ref("");
vue.watch(rootTheme, (newTheme) => {
document.documentElement.dataset.oTheme = newTheme;
localStorage.setItem(THEME_KEY, newTheme);
});
function useTheme(defaultTheme = "light") {
if (!isClient) {
return {
theme: rootTheme
};
}
rootTheme.value = rootTheme.value || localStorage.getItem(THEME_KEY) || defaultTheme;
return {
theme: rootTheme
};
}
const DEFAULT_SCREEN_SIZE = 1920;
const useScreen = () => {
const width = vue.ref(DEFAULT_SCREEN_SIZE);
const isPhoneSize = vue.computed(() => width.value <= mediaPoint.value.phone);
const isPadSize = vue.computed(() => width.value > mediaPoint.value.phone && width.value <= mediaPoint.value.pad);
const isPhonePadSize = vue.computed(() => {
return isPadSize.value || isPhoneSize.value;
});
const isPhonePad = vue.computed(() => {
return isTouchDevice && isPhonePadSize.value;
});
const onResize = () => {
width.value = window.innerWidth;
};
vue.onMounted(() => {
onResize();
window.addEventListener("resize", onResize);
});
vue.onUnmounted(() => {
window.removeEventListener("resize", onResize);
});
const isPhone = vue.computed(() => width.value <= mediaPoint.value[Breakpoints.Phone]);
const gtPhone = vue.computed(() => width.value > mediaPoint.value[Breakpoints.Phone]);
const lePadV = vue.computed(() => width.value <= mediaPoint.value[Breakpoints.PadV]);
const isPadV = vue.computed(() => gtPhone.value && lePadV.value);
const gtPadV = vue.computed(() => width.value > mediaPoint.value[Breakpoints.PadV]);
const lePadH = vue.computed(() => width.value <= mediaPoint.value[Breakpoints.PadH]);
const isPadH = vue.computed(() => gtPadV.value && lePadH.value);
const gtPadH = vue.computed(() => width.value > mediaPoint.value[Breakpoints.PadH]);
const leLaptop = vue.computed(() => width.value <= mediaPoint.value[Breakpoints.Laptop]);
const isLaptop = vue.computed(() => gtPadH.value && leLaptop.value);
const gtLaptop = vue.computed(() => width.value > mediaPoint.value[Breakpoints.Laptop]);
const lePc = vue.computed(() => width.value <= mediaPoint.value[Breakpoints.Pc]);
const isPc = vue.computed(() => gtLaptop.value && lePc.value);
const gtPc = vue.computed(() => width.value > mediaPoint.value[Breakpoints.Pc]);
return {
isTouchDevice,
// 旧断点（已废弃，保留向后兼容）
isPhoneSize,
isPadSize,
isPhonePadSize,
isPhonePad,
// 新断点
isPhone,
gtPhone,
lePadV,
isPadV,
gtPadV,
lePadH,
isPadH,
gtPadH,
leLaptop,
isLaptop,
gtLaptop,
lePc,
isPc,
gtPc
};
};
function useResponseCssVar(prop, target, options) {
const { debounce: debounce2 = 100, transform, ...cssVarOptions } = options ?? {};
const cssVar = core.useCssVar(prop, target, cssVarOptions);
core.useEventListener("resize", core.useDebounceFn(() => {
const el = vue.toValue(target) ?? document.documentElement;
cssVar.value = getCssVariable(vue.toValue(prop), el);
}, debounce2));
if (transform) {
return vue.computed(() => transform(cssVar.value));
}
return cssVar;
}
const isElement = (vnode) => {
return Boolean(
vnode && vnode.shapeFlag & 1
/* ELEMENT */
);
};
const isTextElement = (vnode) => {
return Boolean(
vnode && vnode.shapeFlag & 8
/* TEXT_CHILDREN */
);
};
function isComponent(vnode, _type) {
return Boolean(
vnode && vnode.shapeFlag & 6
/* COMPONENT */
);
}
const isSlotsChildren = (vnode, _children) => {
return Boolean(
vnode && vnode.shapeFlag & 32
/* SLOTS_CHILDREN */
);
};
const isArrayChildren = (vn, _children) => {
return Boolean(
vn && vn.shapeFlag & 16
/* ARRAY_CHILDREN */
);
};
function isComponentPublicInstance(val) {
return Boolean(val == null ? void 0 : val.$el);
}
function getFirstComponent(vn) {
var _a, _b;
if (isArray(vn)) {
for (const child of vn) {
const result = getFirstComponent(child);
if (result) {
return result;
}
}
} else if (isElement(vn) || isComponent(vn) || isTextElement(vn) && vn.type !== vue.Comment) {
return vn;
} else if (isArrayChildren(vn, vn.children)) {
for (const child of vn.children) {
const result = getFirstComponent(child);
if (result) {
return result;
}
}
} else if (isSlotsChildren(vn, vn.children)) {
const children = (_b = (_a = vn.children).default) == null ? void 0 : _b.call(_a);
if (children) {
const result = getFirstComponent(children);
if (result) {
return result;
}
}
}
return null;
}
const queryElement = (el) => {
if (typeof el === "string") {
return document.querySelector(el);
} else if (isHtmlElement(el)) {
return el;
}
return null;
};
const getHtmlElement = (elRef) => {
const elQuery = vue.toValue(elRef);
if (isComponentPublicInstance(elQuery)) {
return elQuery.$el;
} else {
return queryElement(elQuery);
}
};
const resolveHtmlElement = (elRef) => {
return new Promise((resolve) => {
if (vue.isRef(elRef) && !elRef.value) {
const closeWatch = vue.watch(elRef, (el, oldEl) => {
if (el) {
resolve(getHtmlElement(el));
closeWatch();
} else {
log$1.warn(
`resolveHtmlElement: elRef value is falsy, this might be a bug and could cause the promise to remain pending. Please check elRef.value: ${oldEl} -> ${el}`
);
}
});
} else {
resolve(getHtmlElement(elRef));
}
});
};
const isEmptySlot = (slot2) => {
var _a;
if (!slot2) {
return true;
}
const children = slot2({});
if (children.length > 1) {
return false;
}
if (children.length === 0) {
return true;
}
if (isTextElement(children[0]) && !children[0].children) {
return true;
}
if (children[0].type === vue.Comment) {
return true;
}
if (children[0].type === vue.Fragment) {
return !((_a = children[0].children) == null ? void 0 : _a.length);
}
return false;
};
function filterSlots(slots, slotNames) {
const names = Object.values(slotNames);
const keys = Object.keys(slots);
return keys.filter((item) => names.includes(item));
}
function mergeClass(...classList) {
let rlt = [];
classList.forEach((item) => {
if (isArray(item)) {
rlt = rlt.concat(item);
} else if (item) {
rlt.push(item);
}
});
return rlt;
}
function getRenderableComponent(content) {
if (isNil(content)) {
return null;
}
if (typeof content === "string") {
return () => content;
}
if (vue.isVNode(content)) {
return () => content;
}
if (typeof content === "function" || typeof content === "object") {
return () => vue.h(content);
}
return () => content.toString();
}
const isVNodeOfType = (vn, type) => {
if (isString(type)) {
if (isString(vn.type)) {
return vn.type.toLowerCase() === type.toLowerCase();
}
if (isComponent(vn, vn.type)) {
const selfName = isFunction(vn.type) ? vn.type.displayName : vn.type.name || vn.type.__name;
return selfName && (selfName === type || selfName === vue.camelize(type) || selfName === vue.capitalize(vue.camelize(type)));
}
}
return vn.type === type;
};
const flatComponentVNode = (vn, type) => {
const res = [];
const _vn = isArray(vn) ? vn : [vn];
_vn.forEach((child) => {
var _a;
if (isArray(child)) {
res.push(...flatComponentVNode(child, type));
return;
}
if (!vue.isVNode(child)) {
return;
}
if (isVNodeOfType(child, type)) {
res.push(child);
}
if ((_a = child.component) == null ? void 0 : _a.subTree) {
res.push(...flatComponentVNode(child.component.subTree, type));
} else if (child.children) {
res.push(...flatComponentVNode(child.children, type));
}
});
return res;
};
const useRunOnceNextTick = () => {
const tickJobs = /* @__PURE__ */ new Set();
return (fn) => {
if (tickJobs.size === 0) {
vue.nextTick(() => {
tickJobs.forEach((item) => item());
tickJobs.clear();
});
}
tickJobs.add(fn);
};
};
const useSortedTeleportChildren = (vm, childType) => {
const childMap = {};
const children = vue.shallowRef([]);
const parentVms = /* @__PURE__ */ new WeakSet();
const runOnceNextTick = useRunOnceNextTick();
const sortChildren = () => {
const newSortedChildren = [];
flatComponentVNode(vm.subTree, childType).forEach((child) => {
var _a;
if (((_a = child.component) == null ? void 0 : _a.uid) && childMap[child.component.uid]) {
newSortedChildren.push(childMap[child.component.uid]);
}
});
if (!isArrayEqual(children.value, newSortedChildren, true)) {
children.value = newSortedChildren;
}
};
const OTeleportWrapper = vue.defineComponent({
name: "OTeleportWrapper",
setup(_, { slots }) {
return () => {
var _a;
runOnceNextTick(sortChildren);
return (_a = slots.default) == null ? void 0 : _a.call(slots);
};
}
});
const removeChild = (uid) => {
const child = childMap[uid];
if (child) {
runOnceNextTick(sortChildren);
vue.nextTick(() => {
delete childMap[uid];
});
}
};
const addChild = (child) => {
const childVm = vue.getCurrentInstance();
const parentVm = childVm.parent;
if (!parentVms.has(parentVm) && parentVm.type !== OTeleportWrapper) {
const originRender = parentVm.render;
if (originRender) {
parentVm.render = function(...args) {
runOnceNextTick(sortChildren);
return originRender.apply(this, args);
};
}
parentVms.add(parentVm);
}
vue.onBeforeUnmount(() => {
removeChild(child.uid);
});
childMap[child.uid] = child;
runOnceNextTick(sortChildren);
};
return { children, childMap, addChild, OTeleportWrapper };
};
const elList = /* @__PURE__ */ new Map();
const elListFast = /* @__PURE__ */ new Map();
let isBindEvent = false;
const Event$1 = {
start: isTouchDevice ? "touchstart" : "mousedown",
end: isTouchDevice ? "touchend" : "mouseup"
};
function addListener(el, fn, params) {
const list = (params == null ? void 0 : params.fast) ? elListFast : elList;
if (!list.has(el)) {
list.set(el, []);
}
const handlers = list.get(el);
if (handlers) {
handlers.push({
handler: fn,
exception: params == null ? void 0 : params.exception
});
}
}
function removeListener(el, listener2) {
if (listener2) {
const handlers = elList.get(el);
if (!handlers) {
return;
}
const idx = handlers.findIndex((item) => item.handler === listener2);
if (idx > -1) {
handlers.splice(idx, 1);
}
} else {
elList.delete(el);
}
}
function bindEvents() {
if (!isBindEvent) {
let isOutSide = false;
const runHandlers = (list, e) => {
list.forEach((handlers, el) => {
if (!el.contains(e.target)) {
handlers.forEach((item) => {
if (!item.exception || !item.exception(e)) {
item.handler();
}
});
}
});
};
window.addEventListener(Event$1.start, (e) => {
runHandlers(elListFast, e);
const keys = Array.from(elList.keys());
isOutSide = false;
keys.some((el) => {
if (!el.contains(e.target)) {
const handlers = elList.get(el);
if (!handlers) {
isOutSide = true;
} else {
isOutSide = handlers.some((item) => {
return !item.exception || !item.exception(e);
});
}
}
return isOutSide;
});
});
window.addEventListener(Event$1.end, (e) => {
if (!isOutSide) {
return;
}
runHandlers(elList, e);
});
isBindEvent = true;
}
}
function useOutClick() {
bindEvents();
return {
addListener,
removeListener
};
}
let out = null;
const vOutClick = {
beforeMount(el, binding) {
out = useOutClick();
out == null ? void 0 : out.addListener(el, binding.value, {
fast: binding.modifiers.fast
});
},
unmounted(el) {
out == null ? void 0 : out.removeListener(el);
}
};
const vFocus = {
mounted(el) {
el.focus();
}
};
let io = null;
let listener = () => null;
const vIntersection = {
beforeMount() {
io = useIntersectionObserver();
},
mounted(el, binding) {
if (isFunction(binding.value)) {
listener = binding.value;
io == null ? void 0 : io.observe(el, listener);
}
},
unmounted(el) {
if (listener) {
io == null ? void 0 : io.unobserve(el, listener);
}
}
};
let ro = null;
const listenerMap = /* @__PURE__ */ new WeakMap();
const vOnResize = {
beforeMount() {
ro = useResizeObserver();
},
mounted(el, binding) {
if (isFunction(binding.value)) {
listenerMap.set(el, binding.value);
ro == null ? void 0 : ro.observe(el, binding.value);
}
},
unmounted(el) {
const listener2 = listenerMap.get(el);
if (listener2) {
ro == null ? void 0 : ro.unobserve(el, listener2);
listenerMap.delete(el);
}
}
};
const getUId = uniqueId;
const vUid = {
created(el, binding) {
const value = binding.value;
if (isFunction(value)) {
value(el, el.id || uniqueId());
} else if (isString(value) || isNumber(value)) {
el.setAttribute("id", String(value));
} else if (!el.id) {
el.setAttribute("id", uniqueId());
}
}
};
const intersectionObserver = vue.defineComponent({
name: "OIntersectionObserver",
emits: ["intersection"],
setup(_props, { emit, slots }) {
const { vIntersectionObserver } = useIntersectionObserverDirective({
listener: (entry) => {
emit("intersection", entry.isIntersecting, entry);
},
removeOnUnmounted: false
});
return () => {
var _a;
const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
return children == null ? void 0 : children.map((item) => vue.withDirectives(vue.cloneVNode(item), [[vIntersectionObserver]]));
};
}
});
const bindEvent = (child, vResizeObserver) => {
if (isElement(child) || isComponent(child)) {
return vue.withDirectives(vue.cloneVNode(child), [[vResizeObserver]]);
} else if (isArray(child.children)) {
child.children = child.children.map((item) => {
return bindEvent(item, vResizeObserver);
});
return child;
} else {
return child;
}
};
const OResizeObserver = vue.defineComponent({
name: "OResizeObserver",
emits: ["resize"],
setup(_props, { emit, slots }) {
const { vResizeObserver } = useReiszeObserverDirective((entry, isFirst) => {
emit("resize", entry, isFirst);
});
return () => {
var _a;
const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
return children == null ? void 0 : children.map((item) => {
return bindEvent(item, vResizeObserver);
});
};
}
});
const OChildOnly = vue.defineComponent({
name: "OChildOnly",
setup(_props, { slots }) {
return () => {
var _a;
const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
return children ? getFirstComponent(children) : null;
};
}
});
const AnchorSizeTypes = ["medium", "small", "menu"];
const anchorProps = {
/**
* @zh-CN 锚点的方向，支持水平(h)与垂直(v)
* @en-US The orientation of the anchor, supports both horizontal(h) and vertical(v).
* @default 'v'
* @since 1.2.0 新增水平模式(h)
*/
layout: {
type: String,
default: "v"
},
/**
* @zh-CN 锚点的尺寸，仅垂直模式支持, menu为左侧菜单或移动端菜单混合使用
* @en-US Anchor size, 'menu' for aside menu-mixed or mobile menu mode
* @default 'medium'
*/
size: {
type: String,
default: "medium"
},
/**
* @zh-CN 监测容器
* @en-US Scroll container to monitor
* @default window
*/
container: {
type: [String, Object]
},
/**
* @zh-CN 锚点激活的边界范围
* @en-US Boundary for anchor activation
* @default 5
*/
bounds: {
type: Number,
default: 5
},
/**
* @zh-CN 锚点激活的判定边界
* @en-US Boundary for anchor activation
* @default 0
*/
targetOffset: {
type: Number,
default: 0
},
/**
* @zh-CN 点击锚点时是否改变浏览器地址栏的 hash 值
* @en-US Whether to change the browser's address bar hash value when clicking the anchor
* @default true
*/
changeHash: {
type: Boolean,
default: true
}
};
const anchorItemProps = {
/**
* @zh-CN 锚点标题
* @en-US Anchor title
*/
title: {
type: String,
default: ""
},
/**
* @zh-CN 锚点监听、跳转的目标元素(带#前缀)
* @en-US Target element for anchor navigation (with # prefix)
*/
href: {
type: String,
required: true
},
/**
* @zh-CN 锚点监听的目标元素(带#前缀),不传时监听href
* @en-US Target element for anchor observe (with # prefix)，Use href prop by default
*/
observeHref: {
type: String
},
/**
* @zh-CN 锚点跳转方式
* @en-US Anchor navigation method
* @default '_self'
*/
target: {
type: String,
default: "_self"
},
/**
* @zh-CN 锚点是否禁用
* @en-US Anchor disable status
* @default false
*/
disabled: {
type: Boolean,
default: false
}
};
const anchorInjectKey = Symbol("provide-anchor");
const anchorItemInjectKey = Symbol("provide-anchor");
const _hoisted_1$1f = {
key: 0,
class: "o-anchor-line"
};
const _sfc_main$1S = /* @__PURE__ */ vue.defineComponent({
__name: "OAnchor",
props: anchorProps,
emits: ["click", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const ANCHOR_REGX = /#([\S ]+)$/;
const anchorRef = vue.ref();
const anchorItemsRef = vue.ref();
const isScrolling = vue.ref(false);
const links = vue.ref(/* @__PURE__ */ new Set());
const activeLink = vue.ref("");
const indicatorStyle = vue.ref({});
const scrollContainer = vue.ref();
const getContainer = (container = window) => {
if (isString(container)) {
const dom = document.querySelector(container);
return dom ? dom : window;
}
return container;
};
const updateIndicatorPosition = () => {
var _a, _b;
const el = (_a = anchorRef.value) == null ? void 0 : _a.querySelector(".o-anchor-item-link.is-active");
if (!el) {
indicatorStyle.value = {};
return;
}
const { offsetTop, offsetHeight } = el;
const depth = el.getAttribute("data-depth");
indicatorStyle.value.top = `${offsetTop}px`;
indicatorStyle.value.height = `${offsetHeight}px`;
indicatorStyle.value.opacity = depth === "0" ? 0 : 1;
if (props.layout !== "h") {
return;
}
const { isOverflowLeft, isOverflowRight, overflowLeft, overflowRight } = checkElementOverflowHorizontal({ element: el });
if (!isOverflowLeft && !isOverflowRight) {
return;
}
const xOverflownWidth = Number.parseInt(getCssVariable("--anchor-x-overflown-width", el));
const itemGap = Number.parseInt(getCssVariable("--anchor-item-gap", el));
const adjustX = xOverflownWidth + itemGap;
const toScrollLeftBy = isOverflowLeft ? -overflowLeft - adjustX : overflowRight + adjustX;
(_b = anchorItemsRef.value) == null ? void 0 : _b.scrollBy({
left: toScrollLeftBy,
behavior: "smooth"
});
};
const xOverflown = vue.ref({ left: false, right: false });
const itemsScrollLeft = vue.ref(0);
const handleScroll = throttleRAF(() => {
if (props.layout !== "h" || !anchorItemsRef.value) {
return;
}
const { scrollLeft, scrollWidth, clientWidth } = anchorItemsRef.value;
itemsScrollLeft.value = scrollLeft;
xOverflown.value.left = scrollLeft > 0;
xOverflown.value.right = scrollLeft + clientWidth < scrollWidth;
});
vue.onMounted(handleScroll);
const setActiveLink = async (link) => {
if (activeLink.value === link) {
return;
}
activeLink.value = link;
emits("change", activeLink.value);
await vue.nextTick();
updateIndicatorPosition();
};
const getAnchorTarget = (link) => {
const anchorMatches = ANCHOR_REGX.exec(link);
if (!anchorMatches) {
return;
}
const target = document.getElementById(anchorMatches[1]);
return target;
};
const getOffsetTop = (el, container) => {
const { top } = el.getBoundingClientRect();
if (isWindow(container)) {
return top - document.documentElement.clientTop;
}
return top - container.getBoundingClientRect().top;
};
const scrollIntoView = async (link) => {
if (!isCurrentPageLink(link)) {
return;
}
setActiveLink(link);
const target = getAnchorTarget(link);
if (!target) {
return;
}
isScrolling.value = true;
const { scrollTop } = getScroll(scrollContainer.value);
const offsetTop = getOffsetTop(target, scrollContainer.value);
const y = scrollTop + offsetTop - props.targetOffset;
await scrollTo(y, {
container: scrollContainer.value
});
isScrolling.value = false;
};
const activeNearest = () => {
const distances = [];
const { targetOffset: targetOffset2, bounds } = props;
let active = "";
links.value.forEach((link) => {
const target = getAnchorTarget(link);
if (target) {
const top = getOffsetTop(target, scrollContainer.value);
if (top < targetOffset2 + bounds) {
distances.push({
link,
top
});
}
}
});
if (distances.length) {
const max = distances.reduce((prev, cur) => prev.top > cur.top ? prev : cur);
active = max.link;
}
setActiveLink(active);
};
const onScroll = () => {
if (isScrolling.value) {
return;
}
activeNearest();
};
const bindEvent2 = () => {
if (isUndefined(scrollContainer.value)) {
return;
}
scrollContainer.value.addEventListener("scroll", onScroll, { passive: true });
};
const unbindEvent = () => {
if (isUndefined(scrollContainer.value)) {
return;
}
scrollContainer.value.removeEventListener("scroll", onScroll);
};
const addLink = (link) => {
if (!ANCHOR_REGX.test(link) || links.value.has(link)) {
return;
}
links.value.add(link);
};
const removeLink = (link) => {
links.value.add(link);
};
const onItemClick = (options) => {
const { event, link } = options;
emits("click", event, link);
};
vue.provide(anchorInjectKey, {
addLink,
removeLink,
onItemClick,
activeLink,
scrollIntoView,
layout: vue.toRef(props, "layout"),
getChangeHash: () => props.changeHash
});
const onAnchorResize = throttleRAF(() => {
updateIndicatorPosition();
handleScroll();
});
vue.onMounted(() => {
const ro2 = useResizeObserver();
scrollContainer.value = getContainer(props.container);
const hash = decodeURIComponent(window.location.hash);
if (hash) {
scrollIntoView(hash);
} else {
activeNearest();
}
vue.nextTick(() => {
bindEvent2();
if (anchorRef.value) {
ro2.observe(anchorRef.value, onAnchorResize);
}
});
});
vue.onUnmounted(() => {
unbindEvent();
const ro2 = useResizeObserver();
if (anchorRef.value) {
ro2.unobserve(anchorRef.value, onAnchorResize);
}
});
const isAnchorStickying = vue.ref(false);
const anchorParent = vue.shallowRef();
const detectSticking = throttleRAF(() => {
if (!anchorRef.value) {
return;
}
const elRect = anchorRef.value.getBoundingClientRect();
const containerTop = anchorParent.value ? anchorParent.value.getBoundingClientRect().top : 0;
const stickyOffset = parseFloat(window.getComputedStyle(anchorRef.value).top) || 0;
isAnchorStickying.value = elRect.top <= containerTop + stickyOffset && elRect.bottom > containerTop + stickyOffset;
});
vue.onMounted(() => {
if (props.layout !== "h") {
return;
}
anchorParent.value = getScrollParents(anchorRef.value)[0];
if (anchorParent.value) {
anchorParent.value.addEventListener("scroll", detectSticking, { passive: true });
} else {
window.addEventListener("scroll", detectSticking, { passive: true });
}
});
vue.onUnmounted(() => {
if (anchorParent.value) {
anchorParent.value.removeEventListener("scroll", detectSticking);
} else {
window.removeEventListener("scroll", detectSticking);
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "anchorRef",
ref: anchorRef,
class: vue.normalizeClass(["o-anchor", `o-anchor-${props.layout}`, `o-anchor-${props.size}`, isAnchorStickying.value && `o-anchor-stickying`])
},
[
props.layout === "v" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1f, [
vue.createElementVNode(
"div",
{
class: "o-anchor-indicator",
style: vue.normalizeStyle(indicatorStyle.value)
},
null,
4
/* STYLE */
)
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
ref_key: "anchorItemsRef",
ref: anchorItemsRef,
class: vue.normalizeClass({
"o-anchor-items": true,
"left-overflown": xOverflown.value.left,
"right-overflown": xOverflown.value.right
}),
style: vue.normalizeStyle({
"--o-anchor-ellipsis-left": itemsScrollLeft.value,
"--o-anchor-ellipsis-right": -itemsScrollLeft.value
}),
onScroll: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => vue.unref(handleScroll) && vue.unref(handleScroll)(...args))
},
[
vue.renderSlot(_ctx.$slots, "default")
],
38
/* CLASS, STYLE, NEED_HYDRATION */
)
],
2
/* CLASS */
);
};
}
});
const PopupPositionTypes = ["top", "tl", "tr", "bottom", "bl", "br", "left", "lt", "lb", "right", "rt", "rb"];
const PopupTriggerTypes = ["none", "click", "click-outclick", "hover", "hover-outclick", "focus", "contextmenu"];
const popupProps = {
/**
* @zh-CN 是否可见，双向绑定值
* @en-US Whether visible, bidirectional binding value.
*/
visible: {
type: Boolean
},
/**
* @zh-CN 弹出位置
* @en-US Pop-up position.
* @default 'top'
*/
position: {
type: String,
default: "top"
},
/**
* @zh-CN 触发事件
* @en-US Trigger event.
* @default 'click'
*/
trigger: {
type: [String, Array],
default: "click"
},
/**
* @zh-CN 触发元素或组件
* @en-US Trigger element or component.
* @default null
*/
target: {
type: [String, Object],
default: null
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable.
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 挂载容器，默认为body
* @en-US Mount the container, with the default being body.
* @default 'body'
*/
wrapper: {
type: [String, Object],
default: "body"
},
/**
* @zh-CN 距离触发对象的偏移量
* @en-US The offset of the distance triggered object.
* @default 0
*/
offset: {
type: Number,
default: 0
},
/**
* @zh-CN 距离viewport(屏幕)边缘偏移量
* @en-US Offset from the edge of the viewport(screen).
* @default 0
*/
edgeOffset: {
type: Number,
default: 0
},
/**
* @zh-CN hover事件延时触发的时间（毫秒）
* @en-US The time (in milliseconds) for the hover event to be delayed and triggered.
* @default 100
*/
hoverDelay: {
type: Number,
default: 100
},
/**
* @zh-CN 是否当触发元素不可见时隐藏弹层
* @en-US Whether to hide the bullet layer when the trigger element is invisible.
* @default true
*/
hideWhenTargetInvisible: {
type: Boolean,
default: true
},
/**
* @zh-CN 是否计算锚点位置
* @en-US Whether to calculate the anchor point position.
* @default false
*/
anchor: {
type: Boolean,
default: false
},
/**
* @zh-CN 锚点自定义类名
* @en-US Anchor point custom class name.
* @default undefined
*/
anchorClass: {
type: [String, Array, Object]
},
/**
* @zh-CN 是否在popup隐藏时卸载组件
* @en-US Whether to uninstall the component when the popup is hidden.
* @default true
*/
unmountOnHide: {
type: Boolean,
default: true
},
/**
* @zh-CN popup挂载容器自定义类
* @en-US popup mounts a custom container class.
* @default undefined
*/
wrapClass: {
type: [String, Array, Object]
},
/**
* @zh-CN popup挂载容器的内容体的自定义类
* @en-US popup is a custom class for mounting the content body of a container.
* @default undefined
*/
bodyClass: {
type: [String, Array, Object]
},
/**
* @zh-CN popup最小宽度设置为触发元素宽度
* @en-US The minimum width of popup is set to the width of the trigger element.
* @default true
*/
adjustMinWidth: {
type: Boolean,
default: true
},
/**
* @zh-CN popup宽度设置为触发元素宽度
* @en-US The popup width is set to the width of the trigger element.
* @default true
*/
adjustWidth: {
type: Boolean,
default: true
},
/**
* @zh-CN 过渡名称
* @en-US Transitional name.
* @default 'o-zoom-fade'
*/
transition: {
type: String,
default: "o-zoom-fade"
},
/**
* @zh-CN 是否自动隐藏
* @en-US Whether to hide automatically.
* @default true
*/
autoHide: {
type: Boolean,
default: true
},
/**
* @zh-CN 显示前的回调函数。返回 `false` 取消显示，返回 `true` 或 `undefined`（Promise resolve 为 `true`/`undefined`）则继续显示。注意：该函数中不应包含副作用，仅用于判断
* @en-US Callback invoked before showing. Return `false` to cancel showing; return `true` or `undefined` (or a Promise resolving to `true`/`undefined`) to proceed. Pure function only — do not perform side effects inside
*/
beforeShow: {
type: Function
},
/**
* @zh-CN 隐藏前的回调函数。返回 `false` 取消隐藏，返回 `true` 或 `undefined`（Promise resolve 为 `true`/`undefined`）则继续隐藏。注意：该函数中不应包含副作用，仅用于判断
* @en-US Callback invoked before hiding. Return `false` to cancel hiding; return `true` or `undefined` (or a Promise resolving to `true`/`undefined`) to proceed. Pure function only — do not perform side effects inside
*/
beforeHide: {
type: Function
},
/**
* @zh-CN popup是否自适应边缘
* @en-US Is popup adaptive edge.
* @default true
*/
adaptive: {
type: Boolean,
default: true
}
};
function getWrapperContentRect(wrapperEl, wrapperRect) {
const rect = wrapperRect || wrapperEl.getBoundingClientRect();
const left = rect.left + wrapperEl.clientLeft;
const top = rect.top + wrapperEl.clientTop;
return {
left,
top,
right: left + wrapperEl.clientWidth,
bottom: top + wrapperEl.clientHeight
};
}
const viewOffsetBuilders = {
top: (t, pSize, offset) => ({
left: t.left + t.width / 2 - pSize.width / 2,
top: t.top - offset - pSize.height
}),
bottom: (t, pSize, offset) => ({
left: t.left + t.width / 2 - pSize.width / 2,
top: t.bottom + offset
}),
left: (t, pSize, offset) => ({
left: t.left - offset - pSize.width,
top: t.top + t.height / 2 - pSize.height / 2
}),
right: (t, pSize, offset) => ({
left: t.right + offset,
top: t.top + t.height / 2 - pSize.height / 2
}),
tl: (t, pSize, offset) => ({
left: t.left,
top: t.top - offset - pSize.height
}),
tr: (t, pSize, offset) => ({
left: t.right - pSize.width,
top: t.top - offset - pSize.height
}),
bl: (t, _pSize, offset) => ({
left: t.left,
top: t.bottom + offset
}),
br: (t, pSize, offset) => ({
left: t.right - pSize.width,
top: t.bottom + offset
}),
lt: (t, pSize, offset) => ({
left: t.left - offset - pSize.width,
top: t.top
}),
lb: (t, pSize, offset) => ({
left: t.left - offset - pSize.width,
top: t.bottom - pSize.height
}),
rt: (t, _pSize, offset) => ({
left: t.right + offset,
top: t.top
}),
rb: (t, pSize, offset) => ({
left: t.right + offset,
top: t.bottom - pSize.height
})
};
function getPopupViewOffset(position, { t, pSize, offset = 0 }) {
return viewOffsetBuilders[position](t, pSize, offset);
}
function getWrapperViewEdge(popupSize, wrapperRect, edgeOffset = 0) {
const viewport = {
left: edgeOffset,
// 使用 document.documentElement.clientWidth 而非 window.innerWidth 是为了去除滚动条宽度
right: document.documentElement.clientWidth - popupSize.width - edgeOffset,
top: edgeOffset,
bottom: document.documentElement.clientHeight - popupSize.height - edgeOffset
};
if (!wrapperRect) {
return viewport;
}
return {
left: Math.max(viewport.left, wrapperRect.left),
top: Math.max(viewport.top, wrapperRect.top),
right: Math.min(viewport.right, wrapperRect.right - popupSize.width),
bottom: Math.min(viewport.bottom, wrapperRect.bottom - popupSize.height)
};
}
function getPopupWrapOffset(pos, { wrapperEl, wrapperContentRect }) {
if (!wrapperEl) {
return pos;
}
const cs = getScroll(wrapperEl);
const offsetX = cs.scrollLeft - ((wrapperContentRect == null ? void 0 : wrapperContentRect.left) ?? 0);
const offsetY = cs.scrollTop - ((wrapperContentRect == null ? void 0 : wrapperContentRect.top) ?? 0);
const tx = typeof pos.left === "number" ? pos.left + offsetX : 0;
const ty = typeof pos.top === "number" ? pos.top + offsetY : 0;
return { left: tx, top: ty };
}
const directionByPosition = {
tl: "top",
tr: "top",
top: "top",
bl: "bottom",
br: "bottom",
bottom: "bottom",
lt: "left",
lb: "left",
left: "left",
rt: "right",
rb: "right",
right: "right"
};
function getDirection(position) {
return directionByPosition[position];
}
const positionFlipMap = {
top: { bottom: "top", bl: "tl", br: "tr" },
bottom: { top: "bottom", tl: "bl", tr: "br" },
left: { right: "left", rt: "lt", rb: "lb" },
right: { left: "right", lt: "rt", lb: "rb" }
};
function adjustPosition(position, direction) {
return positionFlipMap[direction][position] ?? position;
}
function detectTopFlip({ pos, edge }) {
if (typeof pos.top !== "number") return null;
return edge.top > pos.top ? "bottom" : null;
}
function detectBottomFlip({ pos, edge }) {
if (typeof pos.top !== "number") return null;
return edge.bottom < pos.top ? "top" : null;
}
function detectLeftFlip({ pos, edge }) {
if (typeof pos.left !== "number") return null;
return edge.left > pos.left ? "right" : null;
}
function detectRightFlip({ pos, edge }) {
if (typeof pos.left !== "number") return null;
return edge.right < pos.left ? "left" : null;
}
const flipDetectors = {
top: detectTopFlip,
bottom: detectBottomFlip,
left: detectLeftFlip,
right: detectRightFlip
};
function maybeFlipDirection(position, ctx) {
const d = getDirection(position);
const style = { ...ctx.popupPosition };
const direction = flipDetectors[d]({
pos: ctx.popupPosition,
edge: ctx.edge,
popupSize: ctx.popupSize
});
if (direction === null) {
return { fixedPosition: position, style };
}
const fixedPosition = adjustPosition(position, direction);
return {
fixedPosition,
style: getPopupViewOffset(fixedPosition, { t: ctx.tRect, pSize: ctx.popupSize, offset: ctx.offset })
};
}
function clampLeft(left, edge) {
if (edge.left > left) {
return edge.left;
}
if (edge.right < left) {
return edge.right;
}
return left;
}
function clampTop(top, edge) {
if (edge.top > top) {
return edge.top;
}
if (edge.bottom < top) {
return edge.bottom;
}
return top;
}
function adjustOffset(position, { popupPosition: popupPosition2, popupSize, tRect, wRect, offset, edgeOffset }) {
const edge = getWrapperViewEdge(popupSize, wRect, edgeOffset);
const flipped = maybeFlipDirection(position, {
popupPosition: popupPosition2,
popupSize,
tRect,
edge,
offset
});
const style = { ...flipped.style };
if (typeof style.left === "number") {
style.left = clampLeft(style.left, edge);
}
if (typeof style.top === "number") {
style.top = clampTop(style.top, edge);
}
return {
position: flipped.fixedPosition,
popupStyle: style
};
}
const bottomEdgeRules = (x) => ({ left: `${x}px`, bottom: "0px" });
const topEdgeRules = (x) => ({ left: `${x}px`, top: "0px" });
const rightEdgeRules = (_x, y) => ({ top: `${y}px`, right: "0px" });
const leftEdgeRules = (_x, y) => ({ top: `${y}px`, left: "0px" });
const anchorRuleByPosition = {
top: bottomEdgeRules,
tl: bottomEdgeRules,
tr: bottomEdgeRules,
bottom: topEdgeRules,
bl: topEdgeRules,
br: topEdgeRules,
left: rightEdgeRules,
lt: rightEdgeRules,
lb: rightEdgeRules,
right: leftEdgeRules,
rt: leftEdgeRules,
rb: leftEdgeRules
};
function getAnchorOffset(position, { tRect, popupStyle, popupSize, anchorOffset = 8 }) {
const targetCenterX = tRect.left + tRect.width / 2;
const targetCenterY = tRect.top + tRect.height / 2;
const rawX = targetCenterX - (popupStyle.left ?? 0);
const rawY = targetCenterY - (popupStyle.top ?? 0);
const x = Math.min(Math.max(rawX, anchorOffset), popupSize.width - anchorOffset);
const y = Math.min(Math.max(rawY, anchorOffset), popupSize.height - anchorOffset);
return anchorRuleByPosition[position](x, y);
}
function resolveWrapperContext(popupEl) {
const wrapperEl = getOffsetElement(popupEl);
if (!wrapperEl) {
return { wrapperEl: null, isWrapperBounded: false };
}
const wrapperRect = wrapperEl.getBoundingClientRect();
const wrapperContentRect = wrapperEl.nodeName === "HTML" ? void 0 : getWrapperContentRect(wrapperEl, wrapperRect);
let isWrapperBounded = false;
if (wrapperContentRect && typeof window !== "undefined") {
const cs = window.getComputedStyle(wrapperEl);
isWrapperBounded = cs.overflowX !== "visible" || cs.overflowY !== "visible";
}
return { wrapperEl, wrapperContentRect, isWrapperBounded };
}
function calcPopupStyle({
popupEl,
targetEl,
position,
adaptive = true,
anchor = true,
anchorOffset = 8,
offset = 8,
edgeOffset = 0
}) {
const tRect = targetEl.getBoundingClientRect();
const popupSize = getElementSize(popupEl);
const { wrapperEl, wrapperContentRect, isWrapperBounded } = resolveWrapperContext(popupEl);
const emptyAnchor = {};
if (!wrapperEl) {
return {
popupStyle: getPopupViewOffset(position, { t: tRect, pSize: popupSize, offset }),
position,
anchorStyle: emptyAnchor
};
}
let popupStyle = getPopupViewOffset(position, { t: tRect, pSize: popupSize, offset });
let fixedPosition = position;
if (adaptive) {
const rlt = adjustOffset(position, {
popupPosition: popupStyle,
popupSize,
tRect,
wRect: isWrapperBounded ? wrapperContentRect : void 0,
offset,
edgeOffset
});
fixedPosition = rlt.position;
popupStyle = rlt.popupStyle;
}
const anchorStyle = anchor ? getAnchorOffset(fixedPosition, { tRect, popupStyle, popupSize, anchorOffset }) : emptyAnchor;
popupStyle = getPopupWrapOffset(popupStyle, { wrapperEl, wrapperContentRect });
return {
position: fixedPosition,
popupStyle,
anchorStyle
};
}
function isInsidePopup(event, popupRef) {
var _a;
return !!((_a = popupRef.value) == null ? void 0 : _a.contains(event.target));
}
function buildClickHandler({ el, autoHide, outClick, popupRef, updateFn, inner }) {
return () => {
inner();
if (autoHide) {
const onOutsideClick = () => {
updateFn(false);
outClick.removeListener(el, onOutsideClick);
};
outClick.addListener(el, onOutsideClick, {
exception: (e) => isInsidePopup(e, popupRef)
});
}
};
}
function bindClickTrigger(ctx, toggle) {
const { el, autoHide, outClick, listeners, popupRef, updateFn } = ctx;
const inner = toggle ? () => updateFn() : () => updateFn(true);
const fn = buildClickHandler({ el, autoHide, outClick, popupRef, updateFn, inner });
el.addEventListener("click", fn);
listeners.push(() => el.removeEventListener("click", fn));
}
function bindDomEvent({ el, type, handler, listeners }) {
el.addEventListener(type, handler);
listeners.push(() => el.removeEventListener(type, handler));
}
function bindHoverTrigger(ctx) {
const { el, autoHide, hoverDelay, listeners, updateFn } = ctx;
bindDomEvent({ el, type: "mouseenter", handler: () => updateFn(true, hoverDelay), listeners });
if (autoHide) {
bindDomEvent({ el, type: "mouseleave", handler: () => updateFn(false, hoverDelay), listeners });
}
}
function bindFocusTrigger(ctx) {
const { el, autoHide, listeners, updateFn } = ctx;
bindDomEvent({ el, type: "focusin", handler: () => updateFn(true), listeners });
if (autoHide) {
bindDomEvent({ el, type: "focusout", handler: () => updateFn(false), listeners });
}
}
function bindContextmenuTrigger(ctx) {
const { el, autoHide, outClick, popupRef, listeners, updateFn } = ctx;
bindDomEvent({
el,
type: "contextmenu",
handler: (e) => {
e.preventDefault();
updateFn(true);
},
listeners
});
if (autoHide) {
const hideFn = () => updateFn(false);
outClick.addListener(el, hideFn, {
exception: (e) => isInsidePopup(e, popupRef)
});
listeners.push(() => outClick.removeListener(el, hideFn));
}
}
function bindHoverOutclickTrigger(ctx) {
const { el, autoHide, hoverDelay, outClick, popupRef, listeners, updateFn } = ctx;
bindDomEvent({ el, type: "mouseenter", handler: () => updateFn(true, hoverDelay), listeners });
if (autoHide) {
const hideFn = () => updateFn(false);
outClick.addListener(el, hideFn, {
exception: (e) => isInsidePopup(e, popupRef)
});
listeners.push(() => outClick.removeListener(el, hideFn));
}
}
function toClickCtx(ctx) {
return {
el: ctx.el,
popupRef: ctx.popupRef,
autoHide: ctx.autoHide,
outClick: ctx.outClick,
listeners: ctx.listeners,
updateFn: ctx.updateFn
};
}
function noop$1() {
}
const triggerBinders = {
hover: bindHoverTrigger,
focus: bindFocusTrigger,
contextmenu: bindContextmenuTrigger,
none: noop$1,
"hover-outclick": bindHoverOutclickTrigger
};
const clickToggleMap = {
click: true,
"click-outclick": false
};
function bindTrigger({ el, popupRef, triggers, updateFn, hoverDelay = 100, autoHide = true }) {
if (!el) {
return [];
}
const outClick = useOutClick();
const listeners = [];
const ctx = { el, popupRef, autoHide, hoverDelay, outClick, listeners, updateFn };
const clickCtx = toClickCtx(ctx);
triggers.forEach((tr) => {
var _a;
if (tr === "click" || tr === "click-outclick") {
bindClickTrigger(clickCtx, clickToggleMap[tr]);
return;
}
(_a = triggerBinders[tr]) == null ? void 0 : _a.call(triggerBinders, ctx);
});
return listeners;
}
const TRANSFORM_ORIGIN_MAP = {
top: { left: "50%", top: "100%" },
tl: { left: "0px", top: "100%" },
tr: { left: "100%", top: "100%" },
bottom: { left: "50%", top: "0px" },
bl: { left: "0px", top: "0px" },
br: { left: "100%", top: "0px" },
left: { left: "100%", top: "50%" },
lt: { left: "100%", top: "100%" },
lb: { left: "100%", top: "100%" },
right: { left: "0px", top: "50%" },
rt: { left: "0px", top: "0px" },
rb: { left: "0px", top: "100%" }
};
function getTransformOrigin(position) {
return TRANSFORM_ORIGIN_MAP[position];
}
const ClientOnly = vue.defineComponent({
name: "ClientOnly",
setup(_props, { slots }) {
const isMoutned = vue.ref(false);
vue.onMounted(() => {
isMoutned.value = true;
});
return () => {
var _a;
return isMoutned.value ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null;
};
}
});
let topZIndex = 100;
vue.watchEffect(() => {
topZIndex = defaultZIndex.value;
});
function createTopZIndex() {
topZIndex += 1;
return topZIndex;
}
function removeZIndex(current) {
if (current === void 0 || current === topZIndex) {
topZIndex -= 1;
}
return topZIndex;
}
const __default__$2 = {
inheritAttrs: false
};
const _sfc_main$1R = /* @__PURE__ */ vue.defineComponent({
...__default__$2,
__name: "OPopup",
props: popupProps,
emits: ["update:visible", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const triggers = vue.computed(() => {
const triggers2 = isArray(props.trigger) ? props.trigger : [props.trigger];
if (isTouchDevice) {
const hasClick = triggers2.some((item) => item === "click" || item === "click-outclick");
return hasClick || triggers2.includes("none") ? triggers2 : [...triggers2, "click"];
}
return triggers2;
});
const visible = vue.ref(false);
const targetElRef = vue.ref(null);
let targetEl = null;
const isTargetInViewport = vue.ref(true);
const wrapperEl = vue.ref(null);
const popupRef = vue.ref(null);
const popStyle = vue.reactive({
"--popup-edge-offset": `${props.edgeOffset}px`,
// left, top 恒为 0px
left: "0px",
top: "0px"
});
const popPosition = vue.ref(props.position);
const wrapOrigin = vue.ref({ left: "0px", top: "0px" });
const wrapStyle = vue.computed(() => ({
transformOrigin: `${wrapOrigin.value.left} ${wrapOrigin.value.top}`
}));
const anchorStyle = vue.ref({});
const toMount = vue.ref(false);
const isAnimating = vue.ref(false);
let ro2 = null;
let io2 = null;
const updateZIndex = (show) => {
if (show) {
popStyle["--popup-z-index"] = createTopZIndex();
} else {
removeZIndex(popStyle["--popup-z-index"]);
}
};
const { target, wrapper } = vue.toRefs(props);
vue.onMounted(() => {
ro2 = useResizeObserver();
io2 = useIntersectionObserver();
visible.value = props.visible;
if (props.visible) {
updateZIndex(props.visible);
}
});
vue.onMounted(() => {
vue.watch(
target,
(newVal) => {
if (newVal && targetEl) {
ro2 == null ? void 0 : ro2.unobserve(targetEl, onResize);
}
if (newVal) {
const el = getHtmlElement(newVal);
if (el) {
bindTargetEvent(el);
updatePopupStyle();
}
}
},
{ immediate: true }
);
});
vue.onMounted(() => {
vue.watch(
wrapper,
() => {
if (wrapperEl.value) {
ro2 == null ? void 0 : ro2.unobserve(wrapperEl.value, onResize);
}
resolveHtmlElement(wrapper).then((el) => {
if (el) {
wrapperEl.value = el;
}
});
},
{ immediate: true }
);
});
let triggerListener = [];
const removeTriggerListener = () => triggerListener.forEach((fn) => fn());
const bindTargetEvent = (el) => {
if (!el) {
return;
}
removeTriggerListener();
targetEl = el;
if (props.adjustMinWidth) {
popStyle.minWidth = `${targetEl.offsetWidth}px`;
} else if (props.adjustWidth) {
popStyle.width = `${targetEl.offsetWidth}px`;
}
triggerListener = bindTrigger({
el,
popupRef,
triggers: triggers.value,
updateFn: setVisible,
hoverDelay: props.hoverDelay,
autoHide: props.autoHide
});
if (props.hideWhenTargetInvisible) {
io2 == null ? void 0 : io2.observe(targetEl, onTargetInterscting);
}
};
vue.onUnmounted(() => {
removeTriggerListener();
if (wrapperEl.value) {
ro2 == null ? void 0 : ro2.unobserve(wrapperEl.value, onResize);
}
if (targetEl) {
ro2 == null ? void 0 : ro2.unobserve(targetEl, onResize);
}
});
const isHiddenWhenTargetOutViewport = () => props.hideWhenTargetInvisible && !isTargetInViewport.value;
const updatePopupStyle = () => {
if (isHiddenWhenTargetOutViewport()) {
return;
}
if (!targetEl || !popupRef.value || !popupContent.value) {
return;
}
const {
popupStyle: pStyle,
position,
anchorStyle: aStyle
} = calcPopupStyle({
popupEl: popupRef.value,
targetEl,
position: props.position,
adaptive: props.adaptive,
offset: props.offset,
edgeOffset: props.edgeOffset,
anchor: props.anchor
});
wrapOrigin.value = getTransformOrigin(position);
popPosition.value = position;
popStyle.transform = `translate(${pStyle.left}px, ${pStyle.top}px)`;
anchorStyle.value = aStyle;
};
let oldIntersecting = null;
const onTargetInterscting = (entry) => {
isTargetInViewport.value = entry.isIntersecting;
if (oldIntersecting !== null && entry.isIntersecting) {
if (visible.value) {
vue.nextTick(() => {
updatePopupStyle();
});
}
}
oldIntersecting = isTargetInViewport.value;
};
const beforeToggle = async (show) => {
let goon = true;
if (show) {
if (isFunction(props.beforeShow)) {
goon = await props.beforeShow();
}
} else {
if (isFunction(props.beforeHide)) {
goon = await props.beforeHide();
}
}
return goon !== false;
};
vue.watch(
() => props.visible,
async (val) => {
setVisible(val);
}
);
let visibleTimer = 0;
const clearVisibleTimer = () => {
if (visibleTimer) {
window.clearTimeout(visibleTimer);
visibleTimer = 0;
}
};
const applyVisible = (isVisible) => {
visible.value = isVisible;
updateZIndex(isVisible);
if (props.visible !== isVisible) {
emits("update:visible", isVisible);
emits("change", isVisible);
}
if (visible.value) {
toMount.value = true;
if (props.hideWhenTargetInvisible && targetEl) {
io2 == null ? void 0 : io2.observe(targetEl, onTargetInterscting);
}
}
};
let visibleToggleId = 0;
const setVisible = async (isVisible, delay) => {
if (props.disabled) {
return;
}
const currentVisibleToggleId = ++visibleToggleId;
const v = isVisible ?? !visible.value;
if (v === visible.value && visibleTimer === 0) {
return;
}
if (!await beforeToggle(v)) {
return;
}
if (currentVisibleToggleId !== visibleToggleId) {
return;
}
clearVisibleTimer();
if (delay) {
visibleTimer = window.setTimeout(
() => {
applyVisible(v);
visibleTimer = 0;
},
delay
/** delay 时间相同，无竞态问题 */
);
} else {
applyVisible(v);
}
};
vue.watch(targetElRef, (elRef) => {
if (isHtmlElement(elRef == null ? void 0 : elRef.$el)) {
bindTargetEvent(elRef == null ? void 0 : elRef.$el);
}
});
const onResize = (_en, isFirst) => {
if (visible.value && !isFirst) {
updatePopupStyle();
}
};
const onPopupResize = debounce(
(en) => {
onResize(en, false);
},
100,
true,
true
);
const handleTransitionStart = () => {
isAnimating.value = true;
};
const popupContent = vue.ref();
const checkVisibleState = debounce(
() => {
if (popupContent.value && visible.value === false && popupContent.value.style.display !== "none") {
popupContent.value.style.display = "none";
}
},
200,
// 动画播放时间
false
);
const onBeforeLeave = () => {
checkVisibleState();
handleTransitionStart();
};
const handleTransitionEnd = () => {
isAnimating.value = false;
if (!visible.value && props.unmountOnHide) {
toMount.value = false;
}
};
const scrollListener = throttleRAF(() => {
if (visible.value) {
updatePopupStyle();
}
});
const listenScroll = (el) => {
el.addEventListener("scroll", scrollListener, { passive: true });
return () => {
el.removeEventListener("scroll", scrollListener);
};
};
vue.watch(popupRef, (popEl) => {
let handles = [];
if (popEl) {
if (targetEl) {
const scrollers = getScrollParents(targetEl);
handles = scrollers.map((el) => {
return listenScroll(el);
});
handles.push(listenScroll(window));
ro2 == null ? void 0 : ro2.observe(targetEl, (en, isFirst) => {
if (props.adjustMinWidth) {
popStyle.minWidth = `${targetEl == null ? void 0 : targetEl.offsetWidth}px`;
} else if (props.adjustWidth) {
popStyle.width = `${targetEl == null ? void 0 : targetEl.offsetWidth}px`;
}
onResize(en, isFirst);
});
}
if (wrapperEl.value) {
ro2 == null ? void 0 : ro2.observe(wrapperEl.value, onResize);
}
} else {
handles.forEach((hl) => hl());
if (wrapperEl.value) {
ro2 == null ? void 0 : ro2.unobserve(wrapperEl.value, onResize);
}
if (targetEl) {
ro2 == null ? void 0 : ro2.unobserve(targetEl, onResize);
io2 == null ? void 0 : io2.unobserve(targetEl, onTargetInterscting);
isTargetInViewport.value = true;
}
}
});
const onPopupHoverIn = () => {
if (triggers.value.includes("hover")) {
setVisible(true, props.hoverDelay);
}
};
const onPopupHoverOut = () => {
if (triggers.value.includes("hover") && props.autoHide) {
setVisible(false, props.hoverDelay);
}
};
const shouldMount = vue.computed(() => {
return toMount.value || visible.value || !props.unmountOnHide;
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
_ctx.$slots.target ? (vue.openBlock(), vue.createBlock(
vue.unref(OChildOnly),
{
key: 0,
ref_key: "targetElRef",
ref: targetElRef
},
{
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "target")
]),
_: 3
/* FORWARDED */
},
512
/* NEED_PATCH */
)) : vue.createCommentVNode("v-if", true),
!props.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(ClientOnly), { key: 1 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.Teleport, {
to: props.wrapper,
disabled: !props.wrapper
}, [
vue.createVNode(vue.unref(OResizeObserver), { onResize: vue.unref(onPopupResize) }, {
default: vue.withCtx(() => [
shouldMount.value ? (vue.openBlock(), vue.createElementBlock(
"div",
vue.mergeProps({
key: 0,
ref_key: "popupRef",
ref: popupRef,
class: ["o-popup", [
`o-popup-pos-${popPosition.value}`,
{
"out-view": props.hideWhenTargetInvisible && !isTargetInViewport.value,
animating: isAnimating.value
}
]],
style: popStyle
}, _ctx.$attrs, {
onMouseenter: onPopupHoverIn,
onMouseleave: onPopupHoverOut
}),
[
vue.createVNode(vue.Transition, {
name: props.transition,
appear: true,
onBeforeEnter: handleTransitionStart,
onAfterEnter: handleTransitionEnd,
onBeforeLeave,
onAfterLeave: handleTransitionEnd,
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode(
"div",
{
ref_key: "popupContent",
ref: popupContent,
class: vue.normalizeClass(["o-popup-wrap", props.wrapClass]),
style: vue.normalizeStyle(wrapStyle.value)
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-popup-body", props.bodyClass])
},
[
vue.renderSlot(_ctx.$slots, "default")
],
2
/* CLASS */
),
props.anchor ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-popup-anchor", props.anchorClass]),
style: vue.normalizeStyle(anchorStyle.value)
},
[
vue.renderSlot(_ctx.$slots, "anchor")
],
6
/* CLASS, STYLE */
)) : vue.createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
), [
[vue.vShow, visible.value]
])
]),
_: 3
/* FORWARDED */
}, 8, ["name"])
],
16
/* FULL_PROPS */
)) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 8, ["onResize"])
], 8, ["to", "disabled"]))
]),
_: 3
/* FORWARDED */
})) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
};
}
});
const OPopup = Object.assign(_sfc_main$1R, {
install(app) {
app.component("OPopup", _sfc_main$1R);
}
});
popupProps.trigger.default = "hover";
popupProps.anchor.default = true;
popupProps.offset.default = 8;
const popoverProps = {
...popupProps
};
const __default__$1 = {
inheritAttrs: false
};
const _sfc_main$1Q = /* @__PURE__ */ vue.defineComponent({
...__default__$1,
__name: "OPopover",
props: popoverProps,
emits: ["update:visible"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const updateVisible = (val) => {
emits("update:visible", val);
};
return (_ctx, _cache) => {
return props.disabled ? vue.renderSlot(_ctx.$slots, "target", { key: 0 }) : (vue.openBlock(), vue.createBlock(vue.unref(OPopup), {
key: 1,
class: "o-popover",
offset: props.offset,
"edge-offset": props.edgeOffset,
visible: props.visible,
position: props.position,
trigger: props.trigger,
target: props.target,
wrapper: props.wrapper,
"wrap-class": vue.unref(mergeClass)("o-popover-wrap", props.wrapClass),
anchor: props.anchor,
"anchor-class": props.anchor ? vue.unref(mergeClass)("o-popover-anchor", props.anchorClass) : "",
"unmount-on-hide": props.unmountOnHide,
"auto-hide": props.autoHide,
disabled: props.disabled,
transition: props.transition,
"adjust-width": props.adjustWidth,
adaptive: props.adaptive,
"adjust-min-width": props.adjustMinWidth,
"hide-when-target-invisible": props.hideWhenTargetInvisible,
"hover-delay": props.hoverDelay,
"before-hide": props.beforeHide,
"before-show": props.beforeShow,
"onUpdate:visible": updateVisible
}, {
target: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "target")
]),
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)),
[
vue.renderSlot(_ctx.$slots, "default")
],
16
/* FULL_PROPS */
)
]),
_: 3
/* FORWARDED */
}, 8, ["offset", "edge-offset", "visible", "position", "trigger", "target", "wrapper", "wrap-class", "anchor", "anchor-class", "unmount-on-hide", "auto-hide", "disabled", "transition", "adjust-width", "adaptive", "adjust-min-width", "hide-when-target-invisible", "hover-delay", "before-hide", "before-show"]));
};
}
});
const OPopover = Object.assign(_sfc_main$1Q, {
install(app) {
app.component("OPopover", _sfc_main$1Q);
}
});
const _hoisted_1$1e = ["href", "target", "data-depth"];
const _hoisted_2$Q = {
key: 0,
class: "o-anchor-item-lines"
};
const _sfc_main$1P = /* @__PURE__ */ vue.defineComponent({
__name: "OAnchorItem",
props: anchorItemProps,
emits: ["item-click"],
setup(__props, { emit: __emit }) {
const props = __props;
const slots = vue.useSlots();
const emits = __emit;
const anchorInjection = vue.inject(anchorInjectKey, null);
const anchorItemInjection = vue.inject(anchorItemInjectKey, null);
const _observeHref = vue.computed(() => props.observeHref || props.href);
const isActive = vue.computed(() => {
return _observeHref.value === (anchorInjection == null ? void 0 : anchorInjection.activeLink.value);
});
const addItem = () => {
if (!_observeHref.value) {
return;
}
anchorInjection == null ? void 0 : anchorInjection.addLink(_observeHref.value);
};
const removeItem = () => {
if (!_observeHref.value) {
return;
}
anchorInjection == null ? void 0 : anchorInjection.removeLink(_observeHref.value);
};
const onClick = (event) => {
emits("item-click", event);
if (props.disabled) {
event.preventDefault();
return;
}
if (props.href && !isCurrentPageLink(props.href) || props.target && props.target !== "_self") {
return;
}
if (!(anchorInjection == null ? void 0 : anchorInjection.getChangeHash())) {
event.preventDefault();
}
anchorInjection == null ? void 0 : anchorInjection.onItemClick({
event,
link: _observeHref.value
});
if (_observeHref.value) {
anchorInjection == null ? void 0 : anchorInjection.scrollIntoView(_observeHref.value);
}
};
vue.watch(
() => _observeHref.value,
(newVal, oldVal) => {
vue.nextTick(() => {
if (oldVal) {
anchorInjection == null ? void 0 : anchorInjection.removeLink(oldVal);
}
if (newVal) {
anchorInjection == null ? void 0 : anchorInjection.addLink(newVal);
}
});
}
);
const depth = anchorItemInjection ? anchorItemInjection.depth + 1 : 1;
vue.provide(anchorItemInjectKey, { depth });
vue.onMounted(() => {
addItem();
});
vue.onUnmounted(() => {
removeItem();
});
const popoverVisible = vue.ref(false);
const handleMouseenter = (e) => {
if (!e.target || !isOverflown(e.target)) {
popoverVisible.value = false;
return;
}
popoverVisible.value = true;
};
const handleMouseleave = () => {
popoverVisible.value = false;
};
return (_ctx, _cache) => {
var _a, _b;
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass({
"o-anchor-item": true,
"with-children": !vue.unref(isEmptySlot)(slots.default)
})
},
[
vue.createVNode(vue.unref(OPopover), {
visible: popoverVisible.value,
disabled: !popoverVisible.value || ((_a = vue.unref(anchorInjection)) == null ? void 0 : _a.layout.value) === "h",
position: "right",
"wrap-class": "o-anchor-link-popover-wrapper"
}, {
target: vue.withCtx(() => {
var _a2;
return [
vue.createElementVNode("a", {
href: props.href,
target: props.target,
class: vue.normalizeClass({ "o-anchor-item-link": true, "is-active": isActive.value, disabled: props.disabled, "o-anchor-item-sub-link": vue.unref(depth) > 1 }),
style: vue.normalizeStyle({ "--anchor-item-depth": vue.unref(depth) - 1 }),
"data-depth": vue.unref(depth) - 1,
onClick
}, [
((_a2 = vue.unref(anchorInjection)) == null ? void 0 : _a2.layout.value) === "v" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$Q, [..._cache[0] || (_cache[0] = [
vue.createElementVNode(
"div",
{ class: "o-anchor-item-top-line" },
null,
-1
/* CACHED */
),
vue.createElementVNode(
"div",
{ class: "o-anchor-item-circle" },
null,
-1
/* CACHED */
),
vue.createElementVNode(
"div",
{ class: "o-anchor-item-bottom-line" },
null,
-1
/* CACHED */
)
])])) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createElementVNode(
"div",
{
class: "o-anchor-item-title",
onMouseenter: handleMouseenter,
onMouseleave: handleMouseleave
},
vue.toDisplayString(props.title),
33
/* TEXT, NEED_HYDRATION */
)
])
], 14, _hoisted_1$1e)
];
}),
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(props.title) + " ",
1
/* TEXT */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "disabled"]),
((_b = vue.unref(anchorInjection)) == null ? void 0 : _b.layout.value) === "v" ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
const OAnchor = Object.assign(_sfc_main$1S, {
OAnchorItem: _sfc_main$1P,
install(app) {
app.component("OAnchor", _sfc_main$1S);
app.component("OAnchorItem", _sfc_main$1P);
}
});
const ObjectFitTypes = ["fill", "contain", "cover", "none", "scale-down"];
const avatarProps = {
/**
* @zh-CN 尺寸，支持数字、CSS 变量或带单位的值
* @en-US Size, supports number, CSS variable or unit value
*/
size: {
type: [Number, String],
default: "var(--o-icon_size-4xl)"
},
/**
* @zh-CN CSS background
* @en-US CSS background
*/
background: {
type: String
},
/**
* @zh-CN 头像图片地址
* @en-US Avatar image URL
*/
url: {
type: String
},
/**
* @zh-CN 头像名称，用于展示首字符（当无 url 时生效）
* @en-US Avatar name, displays the first character (takes effect when url is absent)
*/
name: {
type: String
},
/**
* @zh-CN 名称渲染函数，接收 name 属性，返回 VNode 自定义渲染
* @en-US Name formatter, receives name prop and returns VNode for custom rendering
*/
nameFormatter: {
type: Function
},
/**
* @zh-CN 是否可点击，开启后 hover 显示遮罩层与编辑图标
* @en-US Whether the avatar is clickable. When enabled, a mask with edit icon shows on hover
* @default false
*/
clickable: {
type: Boolean,
default: false
},
/**
* @zh-CN 图片填充方式
* @en-US Image object-fit mode
* @default 'fill'
*/
objectFit: {
type: String,
default: "fill"
}
};
const avatarGroupProps = {
/**
* @zh-CN 头像列表
* @en-US Avatar list
*/
urlList: {
type: Array,
default: () => []
},
/**
* @zh-CN 尺寸，统一设置组内所有头像的大小
* @en-US Size, applied to all avatars in the group
* @default 'var(--o-icon_size-s)'
*/
size: {
type: [Number, String],
default: "var(--o-icon_size-s)"
},
/**
* @zh-CN 布局模式：`horizontal` 水平堆叠（最多显示 2 个 + 溢出提示），`symmetric` 对称排列（最多显示 4 个）
* @en-US Layout mode: `horizontal` stacking (max 2 visible + overflow), `symmetric` grid (max 4 visible)
* @default 'horizontal'
*/
layout: {
type: String,
default: "horizontal"
},
/**
* @zh-CN 溢出头像的展示方式：`ellipsis` 显示省略号图标，`count` 显示 +N 数量
* @en-US Overflow avatar display: `ellipsis` shows icon, `count` shows +N count
* @default 'ellipsis'
*/
overflowType: {
type: String,
default: "ellipsis"
},
objectFit: avatarProps.objectFit,
nameFormatter: avatarProps.nameFormatter
};
function normalizeSize(size2) {
if (size2 === void 0) return "";
if (isNumber(size2)) return `${size2}px`;
const sizeStr = String(size2);
if (/^\d+$/.test(sizeStr)) return `${sizeStr}px`;
return sizeStr;
}
const _hoisted_1$1d = ["src"];
const _hoisted_2$P = { key: 1 };
const _hoisted_3$B = {
key: 3,
class: "o-avatar-trigger-icon"
};
const _sfc_main$1O = /* @__PURE__ */ vue.defineComponent({
__name: "OAvatar",
props: avatarProps,
emits: ["click", "error", "load"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const hasError = vue.ref(false);
const isLoaded = vue.ref(false);
const showText = vue.computed(() => props.name && !props.url);
const showDefault = vue.computed(() => !props.url && !props.name);
const outerStyle = vue.computed(() => {
const style = {};
if (props.size) {
style["--avatar-size"] = normalizeSize(props.size);
}
if (showText.value) {
style["--avatar-bg"] = props.background || `var(--o-color-auxiliary${Math.floor(Math.random() * 8) + 1})`;
} else if (!showDefault.value && !hasError.value) {
style["--avatar-bg"] = `var(--o-color-fill2)`;
}
return style;
});
const handleImgLoad = () => {
isLoaded.value = true;
emit("load");
};
const handleImgError = () => {
hasError.value = true;
emit("error");
};
const onClick = (e) => {
if (props.clickable) {
emit("click", e);
}
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
style: vue.normalizeStyle(outerStyle.value),
class: vue.normalizeClass([
"o-avatar",
"o-avatar-circle",
{
"o-avatar-img": isLoaded.value,
"o-avatar-default": !showText.value && !isLoaded.value,
"o-avatar-text": showText.value,
"o-avatar-clickable": props.clickable
}
]),
onClick
},
[
_ctx.url && !hasError.value ? (vue.openBlock(), vue.createElementBlock("img", {
key: 0,
src: _ctx.url,
style: vue.normalizeStyle({ objectFit: props.objectFit }),
alt: "avatar",
onLoad: handleImgLoad,
onError: handleImgError
}, null, 44, _hoisted_1$1d)) : showText.value ? vue.renderSlot(_ctx.$slots, "name", { key: 1 }, () => {
var _a;
return [
props.nameFormatter ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.nameFormatter({ name: props.name })), { key: 0 })) : (vue.openBlock(), vue.createElementBlock(
"span",
_hoisted_2$P,
vue.toDisplayString((_a = props.name) == null ? void 0 : _a[0]),
1
/* TEXT */
))
];
}) : showDefault.value || hasError.value ? (vue.openBlock(), vue.createBlock(vue.unref(IconAvatar), {
key: 2,
class: "o-avatar-default-icon"
})) : vue.createCommentVNode("v-if", true),
props.clickable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$B, [
vue.renderSlot(_ctx.$slots, "trigger-icon", {}, () => [
vue.createVNode(vue.unref(IconEdit))
])
])) : vue.createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
);
};
}
});
const _hoisted_1$1c = {
key: 0,
class: "o-avatar-group-more-text"
};
const _sfc_main$1N = /* @__PURE__ */ vue.defineComponent({
__name: "OAvatarGroup",
props: avatarGroupProps,
setup(__props) {
const props = __props;
const size2 = normalizeSize(props.size);
const total = vue.computed(() => props.urlList.length);
const maxVisible = vue.computed(() => props.layout === "horizontal" ? 3 : 4);
const displayedAvatars = vue.computed(() => {
let list = props.urlList.length > maxVisible.value ? props.urlList.slice(0, maxVisible.value - 1) : [...props.urlList];
if (props.layout === "horizontal") {
list.reverse();
}
return list;
});
const overflowCount = vue.computed(() => Math.max(0, total.value - displayedAvatars.value.length));
const overflowText = vue.computed(() => {
if (props.overflowType === "count") {
const count = overflowCount.value;
return count > 99 ? "99+" : `+${count}`;
}
return null;
});
const [DefineMoreAvatar, ReuseMoreAvatar] = core.createReusableTemplate();
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-avatar-group", [
props.layout === "horizontal" ? "o-avatar-group-horizontal" : "o-avatar-group-symmetric",
{
"o-avatar-group-single": total.value < 2,
"o-avatar-group-triangle": total.value === 3
}
]]),
style: vue.normalizeStyle({ "--avatar-size": vue.unref(size2) })
},
[
vue.createVNode(vue.unref(DefineMoreAvatar), null, {
default: vue.withCtx(() => [
overflowCount.value > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(OAvatar), {
key: 0,
size: props.size,
class: "o-avatar-group-more",
name: "_more"
}, {
name: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "more", {}, () => [
overflowText.value ? (vue.openBlock(), vue.createElementBlock(
"span",
_hoisted_1$1c,
vue.toDisplayString(overflowText.value),
1
/* TEXT */
)) : (vue.openBlock(), vue.createBlock(vue.unref(IconEllipsis), { key: 1 }))
])
]),
_: 3
/* FORWARDED */
}, 8, ["size"])) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}),
props.layout === "horizontal" ? (vue.openBlock(), vue.createBlock(vue.unref(ReuseMoreAvatar), { key: 0 })) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(displayedAvatars.value, (item, index) => {
return vue.openBlock(), vue.createBlock(vue.unref(OAvatar), {
key: index,
url: item.url,
name: item.name,
background: item.background,
size: props.size,
"name-formatter": props.nameFormatter,
"object-fit": props.objectFit
}, null, 8, ["url", "name", "background", "size", "name-formatter", "object-fit"]);
}),
128
/* KEYED_FRAGMENT */
)),
props.layout === "symmetric" ? (vue.openBlock(), vue.createBlock(vue.unref(ReuseMoreAvatar), { key: 1 })) : vue.createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
);
};
}
});
const OAvatar = Object.assign(_sfc_main$1O, {
install(app) {
app.component("OAvatar", _sfc_main$1O);
}
});
const OAvatarGroup = Object.assign(_sfc_main$1N, {
install(app) {
app.component("OAvatarGroup", _sfc_main$1N);
}
});
const BadgeColorTypes = ["primary", "success", "warning", "danger"];
const badgeProps = {
/**
* @zh-CN 徽标内容
* @en-US Content of the badge
*/
value: {
type: [String, Number],
default: ""
},
/**
* @zh-CN 最大值，超过最大值显示${max}+(仅当 value 类型为 number 时生效)
* @en-US Max value, display ${max}+ if exceeded (only effective when value type is number)
* @default 99
*/
max: {
type: Number,
default: 99
},
/**
* @zh-CN 徽标颜色
* @en-US Color of the badge
* @default 'primary'
*/
color: {
type: String,
default: "primary"
},
/**
* @zh-CN 是否显示为小红点
* @en-US Whether to display as a small red dot
* @default false
*/
dot: {
type: Boolean,
default: false
},
/**
* @zh-CN 徽标位置偏移量
* @en-US Badge position offset
*/
offset: {
type: Array,
default: () => []
}
};
const _hoisted_1$1b = { class: "o-badge-label" };
const _sfc_main$1M = /* @__PURE__ */ vue.defineComponent({
__name: "OBadge",
props: badgeProps,
setup(__props) {
const props = __props;
const content = vue.computed(() => {
if (props.dot) {
return "";
}
if (isNumber(props.value) && isNumber(props.max)) {
return props.value < props.max ? `${props.value}` : `${props.max}+`;
}
return props.value;
});
const style = vue.computed(() => {
const [x, y] = props.offset;
const right = isNumber(x) ? `${x * -1}px` : `calc(${x} * -1)`;
const top = isNumber(y) ? `${y}px` : `${y}`;
return {
right,
top
};
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-badge", [`o-badge-${props.color}`, { "o-badge-dot": props.dot, "o-badge-only": !_ctx.$slots.default }]])
},
[
vue.renderSlot(_ctx.$slots, "default"),
vue.createElementVNode(
"sup",
{
class: "o-badge-content",
style: vue.normalizeStyle(style.value)
},
[
vue.renderSlot(_ctx.$slots, "content", {}, () => [
vue.createElementVNode(
"div",
_hoisted_1$1b,
vue.toDisplayString(content.value),
1
/* TEXT */
)
])
],
4
/* STYLE */
)
],
2
/* CLASS */
);
};
}
});
const OBadge = Object.assign(_sfc_main$1M, {
install(app) {
app.component("OBadge", _sfc_main$1M);
}
});
const breadcrumbProps = {
/**
* @zh-CN 分隔符字符
* @en-US Separator character
*/
separator: {
type: [String, Number]
}
};
const breadcrumbItemProps = {
/**
* @zh-CN 链接跳转地址
* @en-US Link jump address
*/
href: {
type: String
},
/**
* @zh-CN 链接跳转方式
* @en-US Link jump method
* @default '_self'
*/
target: {
type: String,
default: "_self"
},
/**
* @zh-CN 路由跳转对象。当使用该参数时，OBreadcrumbItem 会渲染为 RouterLink 组件
* @en-US Route jump object. When using this parameter, OBreadcrumbItem will render as a RouterLink component
*/
to: {
type: [String, Object]
},
/**
* @zh-CN 路由跳转时，是否覆盖浏览器历史记录。该参数会作为 RouterLink 的 replace 属性
* @en-US Whether to replace the browser history when routing. This parameter will be used as the replace attribute of RouterLink
* @default false
*/
replace: {
type: Boolean,
default: false
},
/**
* @zh-CN 分隔符字符。会覆盖 OBreadcrumb 的 separator 属性
* @en-US Separator character. This will override the separator property of OBreadcrumb
*/
separator: {
type: [String, Number]
}
};
const breadcrumbInjectKey = Symbol("provide-breadcrumb");
const _hoisted_1$1a = { class: "o-breadcrumb" };
const _sfc_main$1L = /* @__PURE__ */ vue.defineComponent({
__name: "OBreadcrumb",
props: breadcrumbProps,
setup(__props) {
const props = __props;
vue.provide(breadcrumbInjectKey, {
separator: vue.toRef(props, "separator")
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1a, [
vue.renderSlot(_ctx.$slots, "default")
]);
};
}
});
const HtmlTag = vue.defineComponent({
name: "HtmlTag",
props: {
tag: {
type: String,
default: "div"
}
},
setup(props, { slots, attrs }) {
return () => {
var _a;
return vue.h(props.tag, attrs, (_a = slots.default) == null ? void 0 : _a.call(slots));
};
}
});
const _hoisted_1$19 = { class: "o-breadcrumb-item" };
const _hoisted_2$O = { class: "o-breadcrumb-item-separator" };
const _sfc_main$1K = /* @__PURE__ */ vue.defineComponent({
__name: "OBreadcrumbItem",
props: breadcrumbItemProps,
setup(__props) {
const props = __props;
const breadcrumbInjection = vue.inject(breadcrumbInjectKey, null);
return (_ctx, _cache) => {
const _component_router_link = vue.resolveComponent("router-link");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$19, [
vue.createCommentVNode(" label "),
props.to ? (vue.openBlock(), vue.createBlock(_component_router_link, {
key: 0,
to: props.to,
replace: props.replace,
class: "o-breadcrumb-item-label"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
}, 8, ["to", "replace"])) : (vue.openBlock(), vue.createBlock(vue.unref(HtmlTag), {
key: 1,
tag: !!props.href ? "a" : "span",
href: props.href,
target: props.href ? props.target : void 0,
class: "o-breadcrumb-item-label"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
}, 8, ["tag", "href", "target"])),
vue.createCommentVNode(" separator "),
vue.createElementVNode("span", _hoisted_2$O, [
vue.renderSlot(_ctx.$slots, "separator", {}, () => {
var _a, _b;
return [
props.separator ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createTextVNode(
vue.toDisplayString(props.separator),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
)) : ((_a = vue.unref(breadcrumbInjection)) == null ? void 0 : _a.separator.value) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createTextVNode(
vue.toDisplayString((_b = vue.unref(breadcrumbInjection)) == null ? void 0 : _b.separator.value),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createBlock(vue.unref(IconChevronRight), { key: 2 }))
];
})
])
]);
};
}
});
const OBreadcrumb = Object.assign(_sfc_main$1L, {
OBreadcrumbItem: _sfc_main$1K,
install(app) {
app.component("OBreadcrumb", _sfc_main$1L);
app.component("OBreadcrumbItem", _sfc_main$1K);
}
});
function getRoundClass(props, name) {
return {
class: vue.computed(() => {
if (props.round === "pill" || !props.round && defaultRound.value === "pill") {
return ["-", "_"].includes(name[0]) ? `o${name}-round-pill` : `o-${name}-round-pill`;
}
return "";
}),
style: vue.computed(() => {
if (props.round) {
return {
[`--${name}-radius`]: props.round === "pill" ? "100vh" : props.round
};
}
return {};
})
};
}
const buttonProps = {
/**
* @zh-CN 颜色类型
* @en-US Color type
* @default 'normal'
*/
color: {
type: String,
default: "normal"
},
/**
* @zh-CN 按钮类型
* @en-US Button type
* @default 'outline'
*/
variant: {
type: String
},
/**
* @zh-CN 按钮尺寸
* @en-US Button size
*/
size: {
type: String
},
/**
* @zh-CN 圆角值
* @en-US Border radius
*/
round: {
type: String
},
/**
* @zh-CN 是否为加载状态
* @en-US Loading state
*/
loading: {
type: Boolean
},
/**
* @zh-CN 是否禁用
* @en-US Disabled state
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 跳转链接，如果设置了此属性，则按钮会以 a 标签渲染
* @en-US Link to navigate, if set, the button will render as an anchor tag
*/
href: {
type: String
},
/**
* @zh-CN 前缀图标
* @en-US Prefix icon
*/
icon: {
type: Object
},
/**
* @zh-CN 自定义按钮渲染标签
* @en-US Custom button render tag
* @default 'button'
*/
tag: {
type: String,
default: "button"
}
};
const _hoisted_1$18 = {
key: 1,
class: "o-btn-suffix"
};
const _sfc_main$1J = /* @__PURE__ */ vue.defineComponent({
__name: "OButton",
props: buttonProps,
emits: ["click"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const tag = vue.computed(() => props.href ? "a" : props.tag);
const round2 = getRoundClass(props, "btn");
const slots = vue.useSlots();
const isOnlyIcon = vue.computed(() => isEmptySlot(slots.default) && (props.icon || slots.icon));
const variant2 = vue.computed(() => {
if (isUndefined(props.variant) && isOnlyIcon.value) {
return "text";
}
return props.variant || "outline";
});
const onClick = (e) => {
if (props.disabled || props.loading) {
e.preventDefault();
return;
}
emit("click", e);
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(HtmlTag), {
tag: tag.value,
href: props.href,
type: tag.value === "button" ? "button" : "",
class: vue.normalizeClass(["o-btn", [
`o-btn-${props.color}`,
`o-btn-${props.size || vue.unref(defaultSize)}`,
`o-btn-${variant2.value}`,
vue.unref(round2).class.value,
{
"o-btn-icon-only": isOnlyIcon.value,
"o-btn-disabled": props.disabled
}
]]),
style: vue.normalizeStyle(vue.unref(round2).style.value),
onClick
}, {
default: vue.withCtx(() => [
props.icon || slots.icon || props.loading ? (vue.openBlock(), vue.createElementBlock(
"span",
{
key: 0,
class: vue.normalizeClass(["o-btn-prefix", { loading: props.loading }])
},
[
props.loading ? (vue.openBlock(), vue.createBlock(vue.unref(IconLoading), {
key: 0,
class: "o-rotating"
})) : vue.renderSlot(_ctx.$slots, "icon", { key: 1 }, () => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.icon)))
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default"),
slots.suffix ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$18, [
vue.renderSlot(_ctx.$slots, "suffix")
])) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 8, ["tag", "href", "type", "class", "style"]);
};
}
});
const OButton = Object.assign(_sfc_main$1J, {
install(app) {
app.component("OButton", _sfc_main$1J);
}
});
const CardCoverFitTypes = ["cover", "contain", "fill", "none", "scale-down"];
const CardHoverCursorTypes = ["auto", "pointer"];
const TextOverflowTypes = ["fade", "ellipsis"];
const cardProps = {
/**
* @zh-CN 卡片方向（'v'为竖向，'h'为横向，'hr'为反向横向）
* @en-US Card direction('v' for vertical, 'h' for horizontal, 'hr' for reversed horizontal)
* @default 'v'
*/
layout: {
type: String,
default: "v"
},
/**
* @zh-CN 封面图片url
* @en-US Card cover image URL
*/
cover: {
type: String
},
/**
* @zh-CN 封面长宽比
* @en-US Cover aspect ratio
*/
coverRatio: {
type: Number
},
/**
* @zh-CN 封面填充方式
* @en-US Cover fit type
* @default 'cover'
*/
coverFit: {
type: String,
default: "cover"
},
/**
* @zh-CN 图标
* @en-US Icon
*/
icon: {
type: [String, Object]
},
/**
* @zh-CN title开头的行内图标
* @en-US Title prefix icon
*/
titleIcon: {
type: [String, Object]
},
/**
* @zh-CN 标题
* @en-US Title
*/
title: {
type: String
},
/**
* @zh-CN 标题行数（影响标题盒子高度）
* @en-US Title row count (affects the height of the title box)
*/
titleRow: {
type: Number
},
/**
* @zh-CN 标题最大行数（超过此行数会显示省略号）
* @en-US Title maximum row count (exceeds this row count will show ellipsis)
*/
titleMaxRow: {
type: Number
},
/**
* @zh-CN 详情
* @en-US Detail
*/
detail: {
type: String
},
/**
* @zh-CN 详情行数（影响详情盒子高度）
* @en-US Detail row count (affects the height of the detail box)
*/
detailRow: {
type: Number
},
/**
* @zh-CN 详情最大行数（超过此行数会显示省略号）
* @en-US Detail maximum row count (exceeds this row count will show ellipsis)
*/
detailMaxRow: {
type: Number
},
/**
* @zh-CN 是否有鼠标悬停效果
* @en-US Whether the card has a hover effect
*/
hoverable: {
type: Boolean
},
/**
* @zh-CN 鼠标悬停时的光标样式
* @en-US Cursor style when hovering over the card
* @default 'auto'
*/
cursor: {
type: String,
default: "auto"
},
/**
* @zh-CN 封面盒子的类名（用来定制封面样式）
* @en-US Class name for the cover box (used to customize the cover style)
*/
coverClass: {
type: [String, Array, Object]
},
/**
* @zh-CN 跳转链接（该属性有值时，卡片会被渲染为链接）
* @en-US Link URL (when this property has a value, the card will be rendered as a link)
*/
href: {
type: String
},
/**
* @zh-CN 卡片尺寸是否跟随视口大小变化而变化
* @en-US Whether the card size changes with the viewport size
*/
noResponsive: {
type: Boolean
},
/**
* @zh-CN 控制详情超出隐藏显示效果，'fade' 表示渐隐效果，'ellipsis' 表示 '...' 效果
* @en-US The control details exceed the hidden display effect. 'fade' indicates the fade-out effect, and 'ellipsis' indicates '...' Effect
*/
textOverflow: {
type: String,
default: "fade"
},
/**
* @zh-CN 文本溢出时，悬停是否以气泡展示完整内容（仅对 prop 传入的 title/detail 生效，通过 slot 传入时需调用者自行实现）
* @en-US Whether to show a popover with the full content on hover when text overflows (only applies to title/detail passed via props; for slot content, the caller must implement it themselves)
* @default false
* @since 1.2.5
*/
showOverflowTooltip: {
type: Boolean,
default: false
}
};
const layerProps = {
/**
* @zh-CN 控制浮层是否显示，双向绑定属性
* @en-US Controls whether the layer is displayed, two-way binding property
*/
visible: {
type: Boolean,
default: false
},
/**
* @zh-CN 浮层挂载的节点，值为 null 时挂载到父容器
* @en-US The mount node for the overlay component. When set to null, it mounts to the parent container.
* @default 'body'
*/
wrapper: {
type: [String, Object],
default: "body"
},
/**
* @zh-CN 是否在隐藏是卸载组件
* @en-US Whether to unmounted the component when hidden
*/
unmountOnHide: {
type: Boolean,
default: true
},
/**
* @zh-CN 默认插槽父容器的自定义类名
* @en-US Custom class name for default slot's parent container
*/
mainClass: {
type: [String, Array, Object]
},
/**
* @zh-CN 自定义内容盒子的过度动画
* @en-US Custom transition for content box
* @default 'o-zoom-fade2'
*/
mainTransition: {
type: String,
default: "o-zoom-fade2"
},
/**
* @zh-CN 自定义遮罩层的过度动画
* @en-US Custom transition for mask
* @default 'o-fade-in'
*/
maskTransition: {
type: String,
default: "o-fade-in"
},
/**
* @zh-CN 内容盒子缩放动画的 transform-origin 的值，'mouse' 表示鼠标点击的位置，'css' 表示使用 --layer-origin 变量（默认值 center）
* @en-US Set the value of transform-origin to main box scaling animation; 'mouse' indicates the mouse click position, 'css' indicates using the --layer-origin variable (default: center)
* @default 'mouse'
*/
transitionOrign: {
type: String,
default: "mouse"
},
/**
* @zh-CN 是否渲染遮罩层
* @en-US Whether to render the mask
* @default true
*/
mask: {
type: Boolean,
default: true
},
/**
* @zh-CN 点击遮罩层时是否关闭浮层
* @en-US Whether to close the layer when clicking the mask
* @default true
*/
maskClose: {
type: Boolean,
default: true
},
/**
* @zh-CN 是否渲染浮层的关闭按钮
* @en-US Whether to render the close button of the layer
* @default false
*/
buttonClose: {
type: Boolean,
default: false
},
/**
* @zh-CN 浮层打开前的回调，返回 false 表示取消打开浮层，否则打开浮层
* @en-US Callback before the layer is opened, returning false means canceling the opening of the layer, otherwise opening the layer
*/
beforeShow: {
type: Function
},
/**
* @zh-CN 浮层关闭前的回调，返回 false 表示取消关闭浮层，否则关闭浮层
* @en-US Callback before the layer is closed, returning false means canceling the closing of the layer, otherwise close the layer
*/
beforeHide: {
type: Function
}
};
const layerInjectKey = Symbol("provide-layer");
function trigger$1(el, type) {
const evt = new Event(type, {
bubbles: true,
cancelable: true
});
el.dispatchEvent(evt);
}
const getPositionByType = {
page: (e) => ({ x: e.pageX, y: e.pageY }),
client: (e) => ({ x: e.clientX, y: e.clientY }),
screen: (e) => ({ x: e.screenX, y: e.screenY }),
offset: (e) => ({ x: e.offsetX, y: e.offsetY })
};
const defaultWindow = isClient ? window : null;
function useMouse(props = {}) {
const { defaultValue = { x: 0, y: 0 }, target = defaultWindow, type = "page" } = props;
const x = vue.ref(defaultValue.x);
const y = vue.ref(defaultValue.y);
const handler = (e) => {
const p = getPositionByType[type](e);
x.value = p.x;
y.value = p.y;
};
if (target) {
target.addEventListener("mousemove", handler, { passive: true });
trigger$1(target, "mousemove");
}
const destroy = () => {
target == null ? void 0 : target.removeEventListener("mousemove", handler);
};
return {
x,
y,
destroy
};
}
const iconProps = {
/**
* @zh-CN 图标组件
* @en-US Icon component
*/
icon: {
type: Object
},
/**
* @zh-CN 是否为按钮图标
* @en-US Whether it is a button icon
*/
button: {
type: Boolean
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 是否为 loading 状态
* @en-US Whether it is in loading state
*/
loading: {
type: Boolean
}
};
const _hoisted_1$17 = ["tabindex"];
const _sfc_main$1I = /* @__PURE__ */ vue.defineComponent({
__name: "OIcon",
props: iconProps,
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["o-icon", [
{
"o-icon-btn": props.button,
"o-icon-btn-disabled": props.disabled
}
]]),
tabindex: props.button ? 0 : ""
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
props.loading ? (vue.openBlock(), vue.createBlock(vue.unref(IconLoading), {
key: 0,
class: "o-rotating"
})) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.icon), { key: 1 }))
])
], 10, _hoisted_1$17);
};
}
});
const OIcon = Object.assign(_sfc_main$1I, {
install(app) {
app.component("OIcon", _sfc_main$1I);
}
});
const __default__ = {
inheritAttrs: false
};
const _sfc_main$1H = /* @__PURE__ */ vue.defineComponent({
...__default__,
__name: "OLayer",
props: layerProps,
emits: ["change", "update:visible", "click:mask", "click:button"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const visible = vue.ref(props.visible);
const toMount = vue.ref(props.visible);
const zIndex = vue.ref(visible.value ? createTopZIndex() : 0);
const isToBody = vue.ref(false);
const LayerClass = {
OPEN: "o-layer-open"
};
const mainRef = vue.ref(null);
let mouse = useMouse({
type: "client"
});
const layerRef = vue.ref(null);
let wrapperEl = null;
const initWrapperEl = () => {
if (!wrapperEl && layerRef.value) {
wrapperEl = layerRef.value.offsetParent;
if (!wrapperEl) {
wrapperEl = document.body;
isToBody.value = true;
} else {
isToBody.value = wrapperEl === document.body;
}
}
return wrapperEl;
};
const handleWrapperScroll = () => {
vue.nextTick(() => {
initWrapperEl();
if (wrapperEl) {
if (visible.value) {
wrapperEl.classList.add(LayerClass.OPEN);
} else {
wrapperEl.classList.remove(LayerClass.OPEN);
}
}
});
};
const mainStyle = vue.ref({});
const getOriginStyle = () => {
let ox = "center";
let oy = "center";
if (mainRef.value && mouse) {
const { offsetLeft, offsetTop } = mainRef.value;
if (isToBody.value) {
ox = `${mouse.x.value - offsetLeft}px`;
oy = `${mouse.y.value - offsetTop}px`;
} else if (wrapperEl) {
const size2 = wrapperEl.getBoundingClientRect();
ox = `${mouse.x.value - offsetLeft - size2.x}px`;
oy = `${mouse.y.value - offsetTop - size2.y}px`;
}
}
return `${ox} ${oy}`;
};
const updateOrigin = (_el) => {
if (props.transitionOrign === "mouse") {
initWrapperEl();
mainStyle.value.transformOrigin = getOriginStyle();
}
};
const beforeToggle = async (show) => {
let goon = true;
if (show) {
if (isFunction(props.beforeShow)) {
goon = await props.beforeShow();
}
} else {
if (isFunction(props.beforeHide)) {
goon = await props.beforeHide();
}
}
return goon !== false;
};
const updateZIndex = (show) => {
if (show) {
zIndex.value = createTopZIndex();
} else {
removeZIndex(zIndex.value);
}
};
vue.watch(
() => props.visible,
async (v) => {
if (visible.value !== v) {
const goon = await beforeToggle(v);
if (!goon) {
emits("update:visible", visible.value);
return;
}
updateZIndex(v);
visible.value = v;
emits("change", v);
handleWrapperScroll();
}
}
);
const toggle = async (show) => {
if (visible.value === show) {
return;
}
let toShow = show === void 0 ? !visible.value : show;
const goon = await beforeToggle(toShow);
if (!goon) {
return;
}
updateZIndex(toShow);
visible.value = toShow;
emits("update:visible", visible.value);
emits("change", visible.value);
handleWrapperScroll();
};
const isMounted = vue.computed(() => {
return !props.unmountOnHide || visible.value || toMount.value;
});
const handleTransitionStart = () => {
toMount.value = true;
};
const handleTransitionEnter = () => {
if (visible.value) {
updateOrigin(mainRef.value);
}
};
const handleTransitionEnd = () => {
if (!props.unmountOnHide) {
toMount.value = false;
} else if (!visible.value) {
toMount.value = false;
}
};
const onMaskClick = (e) => {
if (props.maskClose) {
toggle(false);
}
emits("click:mask", e);
};
const onCloseButtonClick = (e) => {
toggle(false);
emits("click:button", e);
};
vue.onMounted(() => {
if (visible.value) {
handleWrapperScroll();
}
});
vue.onUnmounted(() => {
mouse == null ? void 0 : mouse.destroy();
wrapperEl == null ? void 0 : wrapperEl.classList.remove(LayerClass.OPEN);
});
vue.provide(layerInjectKey, { toggle });
__expose({
/**
* @zh-CN 切换浮层显示状态
* @en-US Toggle the layer visibility
*/
toggle
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Teleport, {
to: props.wrapper,
disabled: !props.wrapper
}, [
isMounted.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
vue.mergeProps({
key: 0,
ref_key: "layerRef",
ref: layerRef,
class: ["o-layer", { "o-layer-to-body": isToBody.value }]
}, _ctx.$attrs, {
style: {
"--layer-z-index": zIndex.value
}
}),
[
props.mask ? (vue.openBlock(), vue.createBlock(vue.Transition, {
key: 0,
name: props.maskTransition,
appear: true,
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode(
"div",
{
class: "o-layer-mask",
onClick: onMaskClick
},
null,
512
/* NEED_PATCH */
), [
[vue.vShow, visible.value]
])
]),
_: 1
/* STABLE */
}, 8, ["name"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.Transition, {
appear: true,
name: props.mainTransition,
onBeforeEnter: handleTransitionStart,
onEnter: handleTransitionEnter,
onAfterEnter: handleTransitionEnd,
onBeforeLeave: handleTransitionStart,
onAfterLeave: handleTransitionEnd,
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode(
"div",
{
ref_key: "mainRef",
ref: mainRef,
class: vue.normalizeClass([props.mainClass, "o-layer-main"]),
style: vue.normalizeStyle(mainStyle.value)
},
[
vue.renderSlot(_ctx.$slots, "default")
],
6
/* CLASS, STYLE */
), [
[vue.vShow, visible.value]
])
]),
_: 3
/* FORWARDED */
}, 8, ["name"]),
props.buttonClose ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: "o-layer-close",
onClick: onCloseButtonClick
}, [
vue.renderSlot(_ctx.$slots, "close", {}, () => [
vue.createVNode(vue.unref(OIcon), {
button: "",
icon: vue.unref(IconClose),
class: "o-layer-close-icon"
}, null, 8, ["icon"])
])
])) : vue.createCommentVNode("v-if", true)
],
16
/* FULL_PROPS */
)), [
[vue.vShow, visible.value || toMount.value]
]) : vue.createCommentVNode("v-if", true)
], 8, ["to", "disabled"]);
};
}
});
const OLayer = Object.assign(_sfc_main$1H, {
install(app) {
app.component("OLayer", _sfc_main$1H);
}
});
const figureProps = {
/**
* @zh-CN 资源地址
* @en-US Resource address
*/
src: {
type: String,
required: true
},
/**
* @zh-CN 宽高比
* @en-US Width/height ratio
*/
ratio: {
type: Number
},
/**
* @zh-CN 图片填充方式 (cover | contain | fill | none | scale-down)
* @en-US Image fill mode (cover | contain | fill | none | scale-down)
*/
fit: {
type: String
},
/**
* @zh-CN 图片描述，同 img 的 alt 属性
* @en-US Image description, same as the alt attribute of img element
*/
alt: {
type: String
},
/**
* @zh-CN 使用背景展示图片而非img元素
* @en-US Use background to display image instead of img element
*/
background: {
type: Boolean
},
/**
* @zh-CN 鼠标悬停时图片放大
* @en-US Mouse hover to zoom image
*/
hoverable: {
type: Boolean
},
/**
* @zh-CN 点击图片时跳转链接
* @en-US Click image to jump link
*/
href: {
type: String
},
/**
* @zh-CN 图片加载完成前显示的预制随机多彩背景
* @en-US Show a colorful background before the image is loaded
*/
colorful: {
type: Boolean
},
/**
* @zh-CN 是否可点击预览
* @en-US Whether clickable preview
*/
preview: {
type: Boolean
},
/**
* @zh-CN 是否支持调用实例接口进行预览
* @en-US Whether to support calling instance interface to preview
*/
lazyPreview: {
type: Boolean
},
/**
* @zh-CN 是否将组件渲染为视频海报（具有视频播放按钮，鼠标hover放大图片等效果）
* @en-US Whether to render the component as a video poster (with video play button, mouse hover to zoom image effect)
*/
videoPoster: {
type: Boolean
},
/**
* @zh-CN 预览关闭方式，'none' 表示使用默认关闭方式，'button'表示点击按钮关闭，'mask'表示点击遮罩关闭，'body'表示点击预览图片关闭
* @en-US Preview close method. 'none' means use default close method, 'button' means close by clicking button, 'mask' means close by clicking mask, 'body' means close by clicking preview image
*/
previewClose: {
type: [String, Array]
},
/**
* @zh-CN 图片懒加载配置项，false表示不使用懒加载，true表示启用懒加载，对象表示IntersectionObserverInit配置项。
* @en-US Image lazy loading configuration item, false means not to use lazy loading, true means to enable lazy loading, object means IntersectionObserverInit configuration item.
*/
lazy: {
type: [Boolean, Object]
}
};
const _hoisted_1$16 = {
key: 0,
class: "o-figure-wrap"
};
const _hoisted_2$N = {
key: 0,
class: "o-figure-error-wrap"
};
const _hoisted_3$A = ["src", "alt", "loading"];
const _hoisted_4$v = ["src", "alt", "loading"];
const _hoisted_5$q = {
key: 2,
class: "o-figure-main"
};
const _hoisted_6$f = {
key: 0,
class: "o-figure-mask"
};
const _hoisted_7$9 = { class: "o-figure-play-icon" };
const _hoisted_8$5 = {
key: 1,
class: "o-figure-content"
};
const _hoisted_9$5 = { class: "o-figure-title" };
const _hoisted_10$5 = { class: "o-figure-preview-img" };
const _hoisted_11$5 = ["src"];
const _sfc_main$1G = /* @__PURE__ */ vue.defineComponent({
__name: "OFigure",
props: figureProps,
emits: ["error", "load", "preview"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const imgRef = vue.ref(null);
const { isPhonePad } = useScreen();
const isLoading = vue.ref(true);
const isError = vue.ref(false);
const prestColor = props.colorful ? defaultPrestColorPool.value.pick() : "";
const imgSrc = vue.ref(void 0);
const bgUrl = vue.computed(() => props.background && imgSrc.value ? `url(${imgSrc.value})` : void 0);
const useObserver = props.lazy && props.background || isObject(props.lazy);
const onImgLoaded = () => {
isLoading.value = false;
isError.value = false;
emits("load");
};
const onImgError = () => {
isLoading.value = false;
isError.value = true;
emits("error");
};
vue.watchEffect(() => {
if (!props.src) {
return;
}
if (props.lazy === false) {
imgSrc.value = props.src;
} else {
if (!useObserver) {
imgSrc.value = props.src;
}
}
if (props.background && imgSrc.value) {
requestImage(imgSrc.value).then(onImgLoaded).catch(onImgError);
}
});
let io2 = null;
const rootEl = vue.ref(null);
vue.onMounted(() => {
if (imgRef.value && imgRef.value.complete && imgSrc.value) {
onImgLoaded();
}
if (useObserver) {
io2 = useIntersectionObserver(isObject(props.lazy) ? props.lazy : {});
if (rootEl.value) {
io2 == null ? void 0 : io2.observe(rootEl.value.$el, (entry) => {
if (entry.isIntersecting) {
imgSrc.value = props.src;
}
});
}
}
});
const paddingTop = vue.computed(() => {
if (props.ratio) {
return `${(1 / props.ratio * 100).toFixed(2)}%`;
}
return "";
});
const previewVisible = vue.ref(false);
const canPreview = vue.computed(() => props.preview || props.lazyPreview);
const previewCloseTypes = vue.computed(() => {
if (!props.previewClose) {
return isPhonePad.value ? ["body", "mask", "button"] : ["mask", "button"];
} else if (Array.isArray(props.previewClose)) {
return props.previewClose;
}
return [props.previewClose];
});
const isMaskClose = vue.computed(() => previewCloseTypes.value.includes("mask"));
const isButtonClose = vue.computed(() => previewCloseTypes.value.includes("button"));
const isBodyClose = vue.computed(() => previewCloseTypes.value.includes("body"));
const preview = (visible = true) => {
if (canPreview.value) {
previewVisible.value = visible;
}
};
const onPreviewChange = (visible) => {
emits("preview", visible);
};
const onPreviewImgClick = () => {
if (isBodyClose.value) {
previewVisible.value = false;
}
};
const onFigureClick = () => {
if (props.preview) {
preview();
}
};
__expose({
/**
* @zh-CN 预览图片
* @en-US Preview the image
*/
preview
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(HtmlTag), {
ref_key: "rootEl",
ref: rootEl,
tag: !!props.href ? "a" : "div",
class: vue.normalizeClass(["o-figure", {
"is-loading": isLoading.value,
"is-error": isError.value,
"is-colorful": props.colorful,
"o-figure-hoverable": props.hoverable || !!props.href || props.preview || props.videoPoster,
"o-figure-previewable": props.preview,
"o-figure-video-poster": props.videoPoster,
"o-figure-bg": props.background,
"o-figure-no-ratio": !props.ratio
}]),
href: props.href,
style: vue.normalizeStyle({
"--figure-prest-color": vue.unref(prestColor),
"--figure-padding-top": paddingTop.value,
"--figure-fit": props.fit,
backgroundImage: bgUrl.value
}),
onClick: onFigureClick
}, {
default: vue.withCtx(() => [
paddingTop.value || isError.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$16, [
isError.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$N, [
vue.renderSlot(_ctx.$slots, "error", {}, () => [
vue.createVNode(vue.unref(IconImageError))
])
])) : !props.background && imgSrc.value ? (vue.openBlock(), vue.createElementBlock("img", {
key: 1,
ref_key: "imgRef",
ref: imgRef,
src: imgSrc.value,
alt: props.alt,
class: "o-figure-img-ratio",
loading: props.lazy === true ? "lazy" : "eager",
onLoad: onImgLoaded,
onError: onImgError
}, null, 40, _hoisted_3$A)) : vue.createCommentVNode("v-if", true)
])) : imgSrc.value && !props.background ? (vue.openBlock(), vue.createElementBlock("img", {
key: 1,
ref_key: "imgRef",
ref: imgRef,
src: imgSrc.value,
alt: props.alt,
class: "o-figure-img",
loading: props.lazy === true ? "lazy" : "eager",
onLoad: onImgLoaded,
onError: onImgError
}, null, 40, _hoisted_4$v)) : vue.createCommentVNode("v-if", true),
props.videoPoster || _ctx.$slots.content || _ctx.$slots.title || _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$q, [
vue.renderSlot(_ctx.$slots, "default"),
props.videoPoster ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$f, [
vue.renderSlot(_ctx.$slots, "play-icon", {}, () => [
vue.createElementVNode("div", _hoisted_7$9, [
vue.createVNode(vue.unref(IconVideoPlay))
])
])
])) : vue.createCommentVNode("v-if", true),
_ctx.$slots.content || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$5, [
vue.renderSlot(_ctx.$slots, "content", {}, () => [
vue.createElementVNode("div", _hoisted_9$5, [
vue.renderSlot(_ctx.$slots, "title")
])
])
])) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true),
canPreview.value ? (vue.openBlock(), vue.createBlock(vue.unref(OLayer), {
key: 3,
visible: previewVisible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => previewVisible.value = $event),
class: "o-figure-preview-layer",
"mask-close": isMaskClose.value,
"button-close": isButtonClose.value,
onChange: onPreviewChange
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: "o-figure-preview-wrapper",
onClick: onPreviewImgClick
}, [
vue.renderSlot(_ctx.$slots, "preview", { image: imgSrc.value }, () => [
vue.createElementVNode("div", _hoisted_10$5, [
vue.createElementVNode("img", { src: imgSrc.value }, null, 8, _hoisted_11$5)
]),
vue.renderSlot(_ctx.$slots, "preview-extra")
])
])
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "mask-close", "button-close"])) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 8, ["tag", "href", "class", "style"]);
};
}
});
const OFigure = Object.assign(_sfc_main$1G, {
install(app) {
app.component("OFigure", _sfc_main$1G);
}
});
const _hoisted_1$15 = {
key: 1,
class: "o-card-main"
};
const _hoisted_2$M = {
key: 0,
class: "o-card-icon"
};
const _hoisted_3$z = { class: "o-card-main-wrap" };
const _hoisted_4$u = {
key: 0,
class: "o-card-title-icon"
};
const _hoisted_5$p = { class: "o-card-content" };
const _hoisted_6$e = {
key: 0,
class: "o-card-footer"
};
const _sfc_main$1F = /* @__PURE__ */ vue.defineComponent({
__name: "OCard",
props: cardProps,
setup(__props) {
const props = __props;
const slots = vue.useSlots();
const showFadeOut = vue.computed(() => {
return props.textOverflow === "fade";
});
const hasMain = vue.computed(
() => slots.main || props.icon || slots.icon || props.title || slots.title || slots.header || props.detail || slots.detail || slots.default
);
const isTitleLimited = vue.computed(() => {
return !isUndefined(props.titleMaxRow);
});
const isDetailLimited = vue.computed(() => {
return !isUndefined(props.detailMaxRow) && showFadeOut.value;
});
const hasCover = vue.computed(() => {
return Boolean(slots.cover || props.cover);
});
const hasTitleIcon = vue.computed(() => {
return props.titleIcon;
});
const cardRef = vue.ref();
const titleRef = vue.ref();
const detailRef = vue.ref();
const isTitleOverflow = useElementOverflown(titleRef);
const isDetailOverflow = useElementOverflown(detailRef);
const { width: cardWidth } = core.useElementBounding(cardRef);
const popoverStyle = vue.computed(() => ({
"--card-popover-width": cardWidth.value ? `${cardWidth.value * 0.8}px` : void 0
}));
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(HtmlTag), {
ref_key: "cardRef",
ref: cardRef,
tag: !!props.href ? "a" : "div",
href: props.href,
class: vue.normalizeClass(["o-card", [
`o-card-layout-${props.layout}`,
{
"o-card-hoverable": props.hoverable || !!props.href,
"o-card-cursor-pointer": props.cursor === "pointer" || !!props.href,
"o-card-no-responsive": props.noResponsive,
"o-card-cover": hasCover.value
}
]]),
tabindex: "-1"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "card", {}, () => [
vue.createCommentVNode(" cover "),
hasCover.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass([
"o-card-cover",
vue.unref(mergeClass)(
`o-card-cover-${props.layout}`,
{
"o-card-only-cover": !hasMain.value
},
props.coverClass
)
])
},
[
vue.renderSlot(_ctx.$slots, "cover", {}, () => [
props.cover ? (vue.openBlock(), vue.createBlock(vue.unref(OFigure), {
key: 0,
ratio: props.coverRatio,
class: vue.normalizeClass(["o-card-cover-img", { "is-full": !props.coverRatio }]),
src: props.cover,
fit: props.coverFit
}, null, 8, ["ratio", "src", "fit", "class"])) : vue.createCommentVNode("v-if", true)
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
!!hasMain.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$15, [
vue.renderSlot(_ctx.$slots, "main", {}, () => [
vue.createCommentVNode(" icon "),
props.icon || !!slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$M, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
vue.unref(isString)(props.icon) ? (vue.openBlock(), vue.createBlock(vue.unref(OFigure), {
key: 0,
src: props.icon
}, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.icon), { key: 1 }))
])
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_3$z, [
vue.createElementVNode("div", null, [
vue.createCommentVNode(" header "),
props.title || !!slots.header || !!slots.title ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass({
"o-card-header": true,
"o-card-header-with-icon": hasTitleIcon.value
})
},
[
vue.renderSlot(_ctx.$slots, "header", {}, () => [
hasTitleIcon.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$u, [
vue.unref(isString)(props.titleIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(OFigure), {
key: 0,
src: props.titleIcon,
class: "o-card-title-icon-figure"
}, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.titleIcon), { key: 1 }))
])) : vue.createCommentVNode("v-if", true),
props.title ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
ref_key: "titleRef",
ref: titleRef,
class: vue.normalizeClass(["o-card-title", { "o-card-title-limited": isTitleLimited.value }]),
style: vue.normalizeStyle({ "--card-title-row": props.titleRow, "--card-title-max-row": props.titleMaxRow })
},
[
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.title),
1
/* TEXT */
)
])
],
6
/* CLASS, STYLE */
)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
vue.unref(isTitleOverflow) && props.showOverflowTooltip ? (vue.openBlock(), vue.createBlock(vue.unref(OPopover), {
key: 0,
offset: 12,
target: titleRef.value,
"adjust-min-width": false,
"adjust-width": false,
position: "bottom",
class: "o-card-popover",
style: vue.normalizeStyle(popoverStyle.value)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(props.title),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["target", "style"])) : vue.createCommentVNode("v-if", true)
]),
_: 1
/* STABLE */
})
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" content "),
vue.createElementVNode("div", _hoisted_5$p, [
props.detail || !!slots.detail ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
ref_key: "detailRef",
ref: detailRef,
class: vue.normalizeClass(["o-card-detail", { "o-card-detail-limited": isDetailLimited.value }]),
style: vue.normalizeStyle({ "--card-detail-row": props.detailRow, "--card-detail-max-row": props.detailMaxRow })
},
[
vue.renderSlot(_ctx.$slots, "detail", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.detail),
1
/* TEXT */
)
])
],
6
/* CLASS, STYLE */
)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
vue.unref(isDetailOverflow) && props.showOverflowTooltip ? (vue.openBlock(), vue.createBlock(vue.unref(OPopover), {
key: 0,
offset: 12,
target: detailRef.value,
"adjust-min-width": false,
"adjust-width": false,
position: "bottom",
class: "o-card-popover",
style: vue.normalizeStyle(popoverStyle.value)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(props.detail),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["target", "style"])) : vue.createCommentVNode("v-if", true)
]),
_: 1
/* STABLE */
}),
vue.renderSlot(_ctx.$slots, "default")
])
]),
vue.createCommentVNode(" footer "),
!!slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$e, [
vue.renderSlot(_ctx.$slots, "footer")
])) : vue.createCommentVNode("v-if", true)
])
])
])) : vue.createCommentVNode("v-if", true)
])
]),
_: 3
/* FORWARDED */
}, 8, ["tag", "href", "class"]);
};
}
});
const OCard = Object.assign(_sfc_main$1F, {
install(app) {
app.component("OCard", _sfc_main$1F);
}
});
function noop() {
}
class OPointer {
constructor(el, options) {
__publicField(this, "el");
__publicField(this, "x1");
__publicField(this, "y1");
__publicField(this, "onStart");
__publicField(this, "onMove");
__publicField(this, "onEnd");
__publicField(this, "removeListener");
this.el = el;
this.x1 = 0;
this.y1 = 0;
this.bind();
this.onStart = options.onStart || noop;
this.onMove = options.onMove || noop;
this.onEnd = options.onEnd || noop;
this.removeListener = null;
}
bind() {
this.el.addEventListener("touchstart", (e) => {
const { pageX: x, pageY: y } = e.touches[0];
this.x1 = x;
this.y1 = y;
const moveFn = this.onPointerMove.bind(this);
const upFn = this.onPointerUp.bind(this);
window.addEventListener("touchmove", moveFn, { passive: false });
window.addEventListener("touchend", upFn);
window.addEventListener("touchcancel", upFn);
this.removeListener = () => {
window.removeEventListener("touchmove", moveFn);
window.removeEventListener("touchend", upFn);
window.removeEventListener("touchcancel", upFn);
};
this.onStart(
{
x,
y
},
e
);
});
}
onPointerMove(e) {
const { pageX: x, pageY: y } = e.touches[0];
const dx = x - this.x1;
const dy = y - this.y1;
this.onMove(
{
x,
y,
dx,
dy
},
e
);
}
onPointerUp(e) {
const { pageX: x, pageY: y } = e.changedTouches[0];
const dx = x - this.x1;
const dy = y - this.y1;
this.onEnd(
{
x,
y,
dx,
dy
},
e
);
if (this.removeListener) {
this.removeListener();
}
}
}
class Effect {
constructor(slideElList, slideContainer, options) {
__publicField(this, "total");
__publicField(this, "currentIndex");
__publicField(this, "activeClass");
__publicField(this, "onTouchstart");
__publicField(this, "onTouchend");
__publicField(this, "onBeforeChange");
__publicField(this, "onChanged");
__publicField(this, "isTouchStart");
// 是否开始touch事件
__publicField(this, "containerEl");
this.total = slideElList.length;
this.containerEl = slideContainer;
this.activeClass = options == null ? void 0 : options.activeClass;
this.currentIndex = -1;
this.isTouchStart = false;
this.onTouchstart = options == null ? void 0 : options.onTouchstart;
this.onTouchend = options == null ? void 0 : options.onTouchend;
this.onBeforeChange = options == null ? void 0 : options.onBeforeChange;
this.onChanged = options == null ? void 0 : options.onChanged;
this.handleTouch();
}
fixIndex(idx) {
const i = idx % this.total;
return i >= 0 ? i : i + this.total;
}
handleTouch() {
if (!supportTouch()) {
return;
}
new OPointer(this.containerEl, {
onStart: () => {
this.isTouchStart = true;
this.handleTouchStart();
if (isFunction(this.onTouchstart)) {
this.onTouchstart();
}
},
onMove: (pos, e) => {
if (!this.isTouchStart) {
return;
}
this.handleTouchMove(pos, e);
},
onEnd: (pos, e) => {
if (!this.isTouchStart) {
return;
}
this.isTouchStart = false;
const toIdx = this.handleTouchEnd(pos, e);
if (typeof toIdx === "number") {
const to = this.fixIndex(toIdx);
this.active(to, true, true);
}
if (isFunction(this.onTouchend)) {
this.onTouchend();
}
}
});
}
}
class Gallery extends Effect {
constructor(slideElList, slideContainer, activeIndex, options) {
super(slideElList, slideContainer, options);
__publicField(this, "container");
__publicField(this, "slideList");
__publicField(this, "alignType");
__publicField(this, "moveValue");
__publicField(this, "isChanging");
__publicField(this, "isSliding");
// 是否在切换
__publicField(this, "oldMoveValue");
__publicField(this, "destroyObserver");
__publicField(this, "resolveArr");
const { alignType = "center" } = options || {};
this.total = slideElList.length;
this.resolveArr = [];
slideContainer.addEventListener("transitionend", () => {
slideContainer.style.willChange = "";
slideContainer.classList.remove("is-animating");
this.isChanging = false;
if (this.resolveArr.length > 0) {
this.resolveArr.forEach((fn) => fn(null));
this.resolveArr = [];
}
});
this.alignType = alignType;
this.moveValue = 0;
this.isChanging = false;
this.isSliding = false;
this.oldMoveValue = 0;
this.slideList = [];
this.container = {
el: slideContainer,
width: 0
};
const or = useResizeObserver();
const listener2 = debounceRAF(() => {
this.update(slideElList, slideContainer);
this.active(activeIndex, false, true);
});
or.observe(slideContainer, listener2);
this.destroyObserver = () => {
or.unobserve(slideContainer, listener2);
};
}
update(slideElList, slideContainer) {
let s = 0;
this.slideList = slideElList.map((el, idx) => {
const w = el.clientWidth;
const l = s;
el.style.left = `${l}px`;
s += w;
return {
index: idx,
el,
width: el.clientWidth,
left: l
};
});
this.container = {
el: slideContainer,
width: slideContainer.clientWidth
};
}
handleTouchStart() {
this.oldMoveValue = this.moveValue;
this.isSliding = true;
}
handleTouchMove(pos, e) {
if (!this.isSliding) {
return;
}
const { dx, dy } = pos;
if (Math.abs(dx) > Math.abs(dy)) {
this.isSliding = true;
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
this.transformX(this.oldMoveValue + dx, false);
} else {
this.isSliding = false;
}
}
handleTouchEnd(pos) {
this.isSliding = false;
const { width: sw } = this.slideList[this.currentIndex];
const step = Math.abs(pos.dx) / sw > 0.2 ? 1 : 0;
const toIdx = this.currentIndex + (pos.dx < 0 ? step : -1 * step);
return toIdx;
}
active(toIndex, animate = true, force = false) {
if (this.total === 0 || this.isChanging || !force && this.currentIndex === toIndex) {
return Promise.resolve(null);
}
if (this.currentIndex !== toIndex && isFunction(this.onBeforeChange) && this.onBeforeChange(toIndex, this.currentIndex) === false) {
Promise.resolve(null);
}
this.isChanging = animate;
const toSlide = this.slideList[toIndex];
const fromSlide = this.slideList[this.currentIndex];
if (!toSlide) {
return Promise.resolve(null);
}
toSlide.el.classList.add(
"o-carousel-toggle-current"
/* CURRENT */
);
fromSlide == null ? void 0 : fromSlide.el.classList.remove("o-carousel-toggle-current");
if (this.activeClass) {
const classes = vue.normalizeClass(this.activeClass).split(/\s+/).filter(Boolean);
toSlide.el.classList.add(...classes);
fromSlide == null ? void 0 : fromSlide.el.classList.remove(...classes);
}
if (!toSlide) {
return Promise.resolve(null);
}
const { width: cw } = this.container;
const { width: sw, left: sl } = toSlide;
if (this.alignType === "center") {
return this.transformX((cw - sw) / 2 - sl, animate).then(() => {
if (isFunction(this.onChanged) && this.currentIndex !== toIndex) {
this.onChanged(toIndex, this.currentIndex);
}
this.currentIndex = toIndex;
vue.nextTick().then(() => {
this.loopRange();
});
return toIndex;
});
}
return Promise.resolve(toIndex);
}
loopRange() {
const cidx = this.currentIndex;
const half = (this.total - 1) / 2;
const orderSlideList = [];
const tm = [];
for (let i = cidx; i <= cidx + Math.ceil(half); i++) {
if (i < this.total) {
orderSlideList.push(this.slideList[i]);
tm.push(i);
} else {
orderSlideList.push(this.slideList[i - this.total]);
tm.push(i - this.total);
}
}
for (let i = cidx - 1; i >= cidx - Math.floor(half); i--) {
if (i >= 0) {
orderSlideList.unshift(this.slideList[i]);
tm.unshift(i);
} else {
orderSlideList.unshift(this.slideList[this.total + i]);
tm.unshift(this.total + i);
}
}
let s = 0;
const { left: oldLeft } = this.slideList[cidx];
orderSlideList.forEach((item) => {
const { el, width } = item;
el.style.left = `${s}px`;
item.left = s;
s += width;
});
const { left: newLeft } = this.slideList[cidx];
const d = newLeft - oldLeft;
this.transformX(this.moveValue - d, false);
}
transformX(value, animate = true) {
return new Promise((resolve) => {
this.moveValue = value;
this.isChanging = false;
const { el } = this.container;
if (animate === true) {
el.classList.add("is-animating");
}
el.style.transform = `translate3d(${value}px,0,0)`;
if (animate) {
this.resolveArr.push(resolve);
} else {
resolve(null);
}
});
}
destroyed() {
if (isFunction(this.destroyObserver)) {
this.destroyObserver();
}
}
}
class Toggle extends Effect {
constructor(slideElList, slideContainer, activeIndex, options) {
super(slideElList, slideContainer, options);
__publicField(this, "slideList");
__publicField(this, "isChanging");
__publicField(this, "resolveArr");
this.isChanging = false;
this.resolveArr = [];
this.slideList = slideElList.map((el, idx) => {
el.addEventListener("animationend", () => {
el.classList.remove(
"o-carousel-toggle-in",
"o-carousel-toggle-out"
/* OUT */
);
this.isChanging = false;
if (idx === this.currentIndex) {
this.resolveArr.forEach((fn) => fn(null));
this.resolveArr = [];
}
});
return {
index: idx,
el
};
});
this.active(activeIndex, false, false);
}
handleTouchStart() {
}
handleTouchMove() {
}
handleTouchEnd(pos) {
if (this.isChanging) {
return;
}
const { dx, dy } = pos;
let toIdx = this.currentIndex;
if (Math.abs(dy) < Math.abs(dx) && Math.abs(dx) > 20) {
toIdx += dx < 0 ? 1 : -1;
return toIdx;
}
return;
}
active(toIndex, animate = true, force = false) {
return new Promise((resolve) => {
if (this.total === 0 || this.isChanging || !force && this.currentIndex === toIndex) {
return resolve(null);
}
if (this.currentIndex !== toIndex && isFunction(this.onBeforeChange) && this.onBeforeChange(toIndex, this.currentIndex) === false) {
Promise.resolve(null);
}
this.isChanging = animate;
const toSlide = this.slideList[toIndex];
const fromSlide = this.slideList[this.currentIndex];
if (!toSlide) {
return resolve(null);
}
fromSlide == null ? void 0 : fromSlide.el.classList.remove("o-carousel-toggle-current");
toSlide.el.classList.add(
"o-carousel-toggle-current"
/* CURRENT */
);
if (this.activeClass) {
const classes = vue.normalizeClass(this.activeClass).split(/\s+/).filter(Boolean);
toSlide.el.classList.add(...classes);
fromSlide == null ? void 0 : fromSlide.el.classList.remove(...classes);
}
if (animate) {
toSlide.el.classList.add(
"o-carousel-toggle-in"
/* IN */
);
fromSlide.el.classList.add(
"o-carousel-toggle-out"
/* OUT */
);
this.resolveArr.push(resolve);
} else {
return resolve(toIndex);
}
}).then(() => {
if (isFunction(this.onChanged) && this.currentIndex !== toIndex) {
this.onChanged(toIndex, this.currentIndex);
}
this.currentIndex = toIndex;
return toIndex;
});
}
destroyed() {
}
}
const carouselInjectKey = Symbol("provide-carousel");
const carouselProps = {
/**
* @zh-CN 激活索引 (v-model)
* @en-US Active index (v-model)
*/
activeIndex: {
type: Number
},
/**
* @zh-CN 切换效果
* @en-US Switch effect
* @default 'gallery'
*/
effect: {
type: String,
default: "gallery"
},
/**
* @zh-CN 自动播放
* @en-US Auto play
*/
autoPlay: {
type: Boolean
},
/**
* @zh-CN 播放间隔(ms)
* @en-US Play interval(ms)
* @default 5000
* @default 5000
*/
interval: {
type: Number,
default: 5e3
},
/**
* @zh-CN 箭头显示时机
* @en-US Arrow display timing
* @default 'hover'
*/
arrow: {
type: String,
default: "hover"
},
/**
* @zh-CN 箭头容器类
* @en-US Arrow container class
*/
arrowWrapClass: {
type: [String, Array, Object]
},
/**
* @zh-CN 隐藏指示器
* @en-US Hide indicator
*/
hideIndicator: {
type: Boolean
},
/**
* @zh-CN 指示器点击切换
* @en-US Indicator click to switch
*/
indicatorClick: {
type: Boolean
},
/**
* @zh-CN 指示器容器类
* @en-US Indicator container class
*/
indicatorWrapClass: {
type: [String, Array, Object]
},
/**
* @zh-CN 点击卡片切换
* @en-US Click card to switch
*/
clickToSwitch: {
type: Boolean
},
/**
* @zh-CN 手动初始化，调用instance.init()
* @en-US Manual initialization, call instance.init()
*/
manualInit: {
type: Boolean
},
/**
* @zh-CN 自定义激活类
* @en-US Custom active class
*/
activeClass: {
type: [String, Array, Object]
},
/**
* @zh-CN 鼠标悬停时暂停自动切换
* @en-US Pause auto switching when mouse hover
*/
pauseOnHover: {
type: Boolean
}
};
const _hoisted_1$14 = { class: "o-carousel-wrap" };
const _hoisted_2$L = ["onClick"];
const _hoisted_3$y = { class: "o-carousel-arrow-prev" };
const _hoisted_4$t = { class: "o-carousel-arrow-icon" };
const _hoisted_5$o = { class: "o-carousel-arrow-next" };
const _hoisted_6$d = { class: "o-carousel-arrow-icon" };
const _sfc_main$1E = /* @__PURE__ */ vue.defineComponent({
__name: "OCarousel",
props: carouselProps,
emits: ["before-change", "change", "update:activeIndex", "pause"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const containerRef = vue.ref(null);
const childrenLength = vue.ref(0);
const registerItem = () => {
childrenLength.value++;
};
const unregisterItem = () => {
childrenLength.value++;
};
const total = vue.computed(() => {
var _a;
childrenLength.value;
return ((_a = containerRef.value) == null ? void 0 : _a.children.length) ?? 0;
});
const isAutoPlay = vue.ref(props.autoPlay);
vue.watch(
() => props.autoPlay,
(a) => {
isAutoPlay.value = a;
}
);
const fixIndex = (idx) => {
if (!total.value) {
return idx;
}
const i = idx % total.value;
return i >= 0 ? i : i + total.value;
};
const activeIndex = vue.ref(props.activeIndex ? fixIndex(props.activeIndex) : 0);
vue.watch(
() => props.activeIndex,
(v) => {
activeIndex.value = v ?? 0;
}
);
const initialized = vue.ref(false);
const slidesRef = vue.ref(null);
const slideElList = vue.computed(() => {
var _a;
childrenLength.value;
const c = (_a = containerRef.value) == null ? void 0 : _a.children;
return c ? Array.from(c).map((el) => el) : null;
});
let slidesInstance = null;
let isChanging = false;
const activeSlideByIndex = (index) => {
return new Promise((resolve) => {
const to = fixIndex(index);
const from = activeIndex.value;
if (isChanging || !slideElList.value) {
resolve(false);
return;
}
if (to === from) {
resolve(true);
return;
}
isChanging = true;
if (slidesInstance) {
activeIndex.value = to;
emits("update:activeIndex", to);
slidesInstance.active(to).then(() => {
isChanging = false;
resolve(true);
});
} else {
isChanging = false;
resolve(false);
}
});
};
let timer = null;
const isPlaying = vue.ref(isAutoPlay.value);
const pausePlay = () => {
if (timer) {
clearInterval(timer);
timer = null;
isPlaying.value = false;
emits("pause", activeIndex.value);
}
};
const startPlay = () => {
pausePlay();
isPlaying.value = true;
timer = window.setInterval(() => {
activeSlideByIndex(activeIndex.value + 1);
}, props.interval);
};
const resumePlay = () => {
if (isAutoPlay.value) {
setTimeout(() => {
startPlay();
}, 0);
}
};
const activeSlide = (index, resumeAutoPlay = true) => {
pausePlay();
return activeSlideByIndex(index).then((success) => {
if (!success) {
return;
}
if (!props.pauseOnHover || resumeAutoPlay) {
resumePlay();
}
});
};
const clickListenerCleanups = [];
const cleanupClickListeners = () => {
clickListenerCleanups.forEach((fn) => fn());
clickListenerCleanups.length = 0;
};
const buildEffectOptions = () => ({
activeClass: props.activeClass,
onTouchstart: () => {
pausePlay();
},
onTouchend: () => {
resumePlay();
},
onBeforeChange: (to, from) => {
emits("before-change", to, from);
},
onChanged: (to, from) => {
activeIndex.value = to;
emits("update:activeIndex", to);
emits("change", to, from);
}
});
const bindClickListeners = (els) => {
els.forEach((el, idx) => {
const handler = () => {
if (idx !== activeIndex.value) {
activeSlide(idx);
}
};
el.addEventListener("click", handler);
clickListenerCleanups.push(() => el.removeEventListener("click", handler));
});
};
const initSlides = () => {
if (!slideElList.value || !containerRef.value) {
return;
}
slidesInstance == null ? void 0 : slidesInstance.destroyed();
slidesInstance = null;
cleanupClickListeners();
if (activeIndex.value >= slideElList.value.length) {
activeIndex.value = fixIndex(activeIndex.value);
emits("update:activeIndex", activeIndex.value);
}
let EffectType = null;
switch (props.effect) {
case "gallery": {
EffectType = Gallery;
break;
}
case "toggle": {
EffectType = Toggle;
break;
}
default: {
EffectType = Gallery;
break;
}
}
if (EffectType) {
slidesInstance = new EffectType(slideElList.value, containerRef.value, activeIndex.value, buildEffectOptions());
}
if (props.clickToSwitch) {
bindClickListeners(slideElList.value);
}
initialized.value = true;
};
vue.watch(
() => props.autoPlay,
(v) => {
if (v) {
startPlay();
} else {
pausePlay();
}
}
);
const init = () => {
initSlides();
if (isAutoPlay.value) {
startPlay();
}
};
vue.onMounted(() => {
if (!props.manualInit) {
init();
}
});
vue.onUnmounted(() => {
if (timer) {
clearInterval(timer);
timer = null;
}
slidesInstance == null ? void 0 : slidesInstance.destroyed();
cleanupClickListeners();
});
vue.watch(
() => {
var _a;
return ((_a = slideElList.value) == null ? void 0 : _a.length) ?? 0;
},
async (now, prev) => {
if (!initialized.value || now === prev) {
return;
}
await vue.nextTick();
initSlides();
}
);
vue.provide(carouselInjectKey, {
effect: props.effect,
register: registerItem,
unregister: unregisterItem
});
const play = () => {
isAutoPlay.value = true;
startPlay();
};
const pause = () => {
isAutoPlay.value = false;
pausePlay();
};
const onHoverIn = () => {
if (props.pauseOnHover) {
pausePlay();
}
};
const onHoverOut = () => {
if (props.pauseOnHover) {
resumePlay();
}
};
__expose({
/**
* @zh-CN 初始化轮播组件
* @en-US Initialize the carousel component
*/
init,
/**
* @zh-CN 开始自动播放
* @en-US Start auto play
*/
play,
/**
* @zh-CN 暂停自动播放
* @en-US Pause auto play
*/
pause,
/**
* @zh-CN 切换到指定幻灯片
* @en-US Switch to the specified slide
*/
active: activeSlide
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "slidesRef",
ref: slidesRef,
class: vue.normalizeClass(["o-carousel", [
{
"o-carousel-visible": initialized.value,
"o-carousel-click-to-switch": props.clickToSwitch,
"o-carousel-hover-arrow": props.arrow === "hover",
"o-carousel-autoplay": isAutoPlay.value,
"is-playing": isPlaying.value
},
`o-carousel-effect-${props.effect}`
]]),
style: vue.normalizeStyle({
"--carousel-interval": props.interval + "ms"
}),
onMouseenter: onHoverIn,
onMouseleave: onHoverOut
},
[
vue.createElementVNode("div", _hoisted_1$14, [
vue.createElementVNode(
"div",
{
ref_key: "containerRef",
ref: containerRef,
class: vue.normalizeClass([`o-carousel-container-${props.effect}`])
},
[
vue.renderSlot(_ctx.$slots, "default")
],
2
/* CLASS */
)
]),
!props.hideIndicator ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-carousel-indicator-wrap", props.indicatorWrapClass])
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(total.value, (item, idx) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item,
class: "o-carousel-indicator-item",
onClick: ($event) => props.indicatorClick && activeSlide(idx)
}, [
vue.renderSlot(_ctx.$slots, "indicator", {
active: item - 1 === activeIndex.value,
index: idx
}, () => [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-carousel-indicator-bar", {
"o-carousel-indicator-bar-selected": item - 1 === activeIndex.value
}])
},
[..._cache[2] || (_cache[2] = [
vue.createElementVNode(
"div",
{ class: "o-carousel-indicator-line" },
null,
-1
/* CACHED */
)
])],
2
/* CLASS */
)
])
], 8, _hoisted_2$L);
}),
128
/* KEYED_FRAGMENT */
))
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
props.arrow !== "never" ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass(["o-carousel-arrow-wrap", props.arrowWrapClass])
},
[
vue.createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = ($event) => activeSlide(activeIndex.value - 1, false))
}, [
vue.renderSlot(_ctx.$slots, "arrow-prev", {}, () => [
vue.createElementVNode("div", _hoisted_3$y, [
vue.createElementVNode("div", _hoisted_4$t, [
vue.renderSlot(_ctx.$slots, "arrow-prev-icon", {}, () => [
vue.createVNode(vue.unref(IconChevronLeft))
])
])
])
])
]),
vue.createElementVNode("div", {
onClick: _cache[1] || (_cache[1] = ($event) => activeSlide(activeIndex.value + 1, false))
}, [
vue.renderSlot(_ctx.$slots, "arrow-next", {}, () => [
vue.createElementVNode("div", _hoisted_5$o, [
vue.createElementVNode("div", _hoisted_6$d, [
vue.renderSlot(_ctx.$slots, "arrow-next-icon", {}, () => [
vue.createVNode(vue.unref(IconChevronRight))
])
])
])
])
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true)
],
38
/* CLASS, STYLE, NEED_HYDRATION */
);
};
}
});
const _sfc_main$1D = /* @__PURE__ */ vue.defineComponent({
__name: "OCarouselItem",
setup(__props) {
const injection = vue.inject(carouselInjectKey, null);
vue.onMounted(() => {
injection == null ? void 0 : injection.register();
});
vue.onUnmounted(() => {
injection == null ? void 0 : injection.unregister();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass([vue.unref(injection) ? `o-carousel-item-${vue.unref(injection).effect}` : "o-carousel-item"])
},
[
vue.renderSlot(_ctx.$slots, "default")
],
2
/* CLASS */
);
};
}
});
const OCarousel = Object.assign(_sfc_main$1E, {
OCarouselItem: _sfc_main$1D,
install(app) {
app.component("OCarousel", _sfc_main$1E);
}
});
const _sfc_main$1C = /* @__PURE__ */ vue.defineComponent({
__name: "ScrollbarRail",
props: {
direction: { default: "y" },
thumbRate: { default: 0 },
offsetRate: { default: 0 },
notStepJump: { type: Boolean },
size: { default: "medium" }
},
emits: ["scroll"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const isY = vue.computed(() => props.direction === "y");
const isDarggingBar = vue.ref(false);
const barRef = vue.ref(null);
const thumbRef = vue.ref(null);
const trackLength = vue.ref(0);
const thumbSize = vue.computed(() => {
if (trackLength.value && props.thumbRate) {
return Math.round(trackLength.value * props.thumbRate);
}
return 0;
});
const thumbSizeStyle = vue.computed(() => {
return `${thumbSize.value}px`;
});
const maxOffset = vue.computed(() => trackLength.value - thumbSize.value);
const sizeProp = vue.computed(() => {
return isY.value ? "height" : "width";
});
const offsetProp = vue.computed(() => {
return isY.value ? "translateY" : "translateX";
});
const offset = vue.ref(0);
vue.watch(
() => [props.offsetRate, trackLength.value],
(val) => {
if (!isDarggingBar.value) {
offset.value = Math.round(val[1] * val[0]);
}
},
{
immediate: true
}
);
const offsetStyle = vue.computed(() => {
return `${offsetProp.value}(${offset.value}px)`;
});
const adjustOffset2 = (pos) => {
if (pos < 0) {
return 0;
}
if (pos > maxOffset.value) {
return maxOffset.value;
}
return pos;
};
vue.onMounted(() => {
if (!barRef.value) {
return;
}
const { offsetHeight, offsetWidth } = barRef.value;
trackLength.value = props.direction === "x" ? offsetWidth : offsetHeight;
});
let s = 0;
let oldOffset = 0;
const onMouseMove = (e) => {
const pos = isY.value ? e.clientY : e.clientX;
const v = oldOffset + pos - s;
const of = adjustOffset2(v);
if (of !== offset.value) {
offset.value = of;
emits("scroll", offset.value / trackLength.value);
}
};
const onMouseUp = () => {
isDarggingBar.value = false;
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
window.removeEventListener("contextmenu", onMouseUp);
};
const onThumbMouseDown = (e) => {
e.preventDefault();
e.stopPropagation();
isDarggingBar.value = true;
s = isY.value ? e.clientY : e.clientX;
oldOffset = offset.value;
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
window.addEventListener("contextmenu", onMouseUp);
};
const onTrackClick = (e) => {
e.preventDefault();
if (!thumbRef.value || !barRef.value) {
return;
}
const pos = isY.value ? e.clientY : e.clientX;
let v = 0;
if (props.notStepJump) {
const bc = barRef.value.getBoundingClientRect();
v = pos - (isY.value ? bc.top : bc.left) - thumbSize.value / 2;
} else {
const bc = thumbRef.value.getBoundingClientRect();
const isPlus = pos > (isY.value ? bc.top : bc.left);
v = offset.value + thumbSize.value * (isPlus ? 1 : -1);
}
const of = adjustOffset2(v);
if (of !== offset.value) {
offset.value = of;
emits("scroll", offset.value / trackLength.value);
}
};
const onResize = () => {
if (!barRef.value) {
return;
}
const { offsetHeight, offsetWidth } = barRef.value;
trackLength.value = props.direction === "x" ? offsetWidth : offsetHeight;
};
return (_ctx, _cache) => {
return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "barRef",
ref: barRef,
class: vue.normalizeClass(["o-scrollbar-rail", [
`o-scrollbar-${props.direction}`,
`o-scrollbar-${props.size}`,
{
"o-scrollbar-dragging": isDarggingBar.value
}
]]),
onClick: onTrackClick
},
[
vue.createElementVNode(
"div",
{
ref_key: "thumbRef",
ref: thumbRef,
class: vue.normalizeClass(["o-scrollbar-thumb", [
`o-scrollbar-${props.direction}-thumb`,
{
[`o-scrollbar-${props.direction}-thumb-dragging`]: isDarggingBar.value
}
]]),
style: vue.normalizeStyle({
[sizeProp.value]: thumbSizeStyle.value,
transform: offsetStyle.value
}),
onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["stop"])),
onMousedown: onThumbMouseDown
},
[
vue.renderSlot(_ctx.$slots, "thumb", {
direction: props.direction,
dragging: isDarggingBar.value
}, () => [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
`o-scrollbar-${props.direction}-thumb-bar`,
{
"is-dragging": isDarggingBar.value
}
])
},
null,
2
/* CLASS */
)
])
],
38
/* CLASS, STYLE, NEED_HYDRATION */
),
vue.renderSlot(_ctx.$slots, "track", {
direction: props.direction
}, () => [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-scrollbar-track", [`o-scrollbar-${props.direction}-track`]])
},
null,
2
/* CLASS */
)
])
],
2
/* CLASS */
)), [
[vue.unref(vOnResize), onResize]
]);
};
}
});
const ScrollerSizeTypes = ["medium", "small"];
const baseScrollarProps = {
/**
* @zh-CN 隐藏横向滚动条
* @en-US Hide the horizontal scroll bar.
*/
disabledX: {
type: Boolean,
required: false
},
/**
* @zh-CN 隐藏纵向滚动条
* @en-US Hide the vertical scroll bar.
*/
disabledY: {
type: Boolean
},
/**
* @zh-CN 滚动条在停止滚动多长时间后隐藏, 单位：ms
* @en-US How long after the scroll bar stops scrolling is hidden, unit: ms.
* @default 600
*/
duration: {
type: Number,
default: 600
},
/**
* @zh-CN 滚动条显示控制
* always：一直显示
* auto: 滚动中、滚动后hover滚动条、拖拽时显示
* hover: 滚动条hover时显示
* never: 不显示滚动条
* @en-US The scroll bar displays the control.
* always：Always displayed.
* auto: The hover bar is displayed while scrolling, after scrolling, and when dragging.
* hover: It is displayed when the scroll bar hovers.
* never: The scroll bar is not displayed.
* @default 'auto'
*/
showType: {
type: String,
default: "auto"
},
/**
* @zh-CN 滚动条尺寸大小
* @en-US The size of the scroll bar.
* @default 'medium'
*/
size: {
type: String,
default: "medium"
},
/**
* @zh-CN showType = always时，是否根据滚动容器滚动高度变化自动刷新滚动条
* @en-US When showType = always, does the scroll bar automatically refresh according to the change in the scroll height of the scroll container.
*/
autoUpdateOnScrollSize: {
type: Boolean
},
/**
* @zh-CN 自定义滚动条类
* @en-US Custom scroll bar class.
* @since 1.2.0
*/
barClass: {
type: [String, Array, Object]
}
};
const scrollerProps = {
...baseScrollarProps,
/**
* @zh-CN 滚动容器类
* @en-US Rolling container class.
*/
wrapClass: {
type: [String, Array, Object]
}
};
const scrollbarProps = {
...baseScrollarProps,
/**
* @zh-CN 滚动关联目标容器,支持body、元素ref、HTMLElement
* @en-US Scroll to associate the target container, supporting body, element ref, and HTMLElement.
* @default null
*/
target: {
type: [String, Object],
default: null
}
};
const _sfc_main$1B = /* @__PURE__ */ vue.defineComponent({
__name: "OScrollbar",
props: scrollbarProps,
setup(__props, { expose: __expose }) {
const ScrollbarClass2 = {
container: "o-scrollbar-container"
};
const props = __props;
const { isPhonePad } = useScreen();
let scrollTargetEl = null;
let scrollListenEl = null;
const rootRef = vue.ref(null);
const hasY = vue.ref(false);
const hasX = vue.ref(false);
const hThumbRate = vue.ref(0);
const vThumbRate = vue.ref(0);
const hOffsetRate = vue.ref(0);
const vOffsetRate = vue.ref(0);
const isBody = vue.ref(false);
const showXBar = vue.ref(false);
const showYBar = vue.ref(false);
let lastTop = -1;
let lastLeft = -1;
let xTimer = null;
let yTimer = null;
let ro2 = null;
let lastScrollWidth = -1;
let lastScrollHeight = -1;
const updateScrollbar = () => {
if (!scrollTargetEl) {
return;
}
const { clientWidth, clientHeight, scrollWidth, scrollHeight, scrollTop, scrollLeft } = scrollTargetEl;
lastScrollWidth = scrollWidth;
lastScrollHeight = scrollHeight;
hThumbRate.value = clientWidth / scrollWidth;
vThumbRate.value = clientHeight / scrollHeight;
hOffsetRate.value = scrollLeft / scrollWidth;
vOffsetRate.value = scrollTop / scrollHeight;
if (!props.disabledX) {
hasX.value = clientWidth < scrollWidth;
}
if (!props.disabledY) {
hasY.value = clientHeight < scrollHeight;
}
};
const updateScrollbarByScollSize = () => {
if (!scrollTargetEl) {
return;
}
const { scrollWidth, scrollHeight } = scrollTargetEl;
if (lastScrollWidth !== scrollWidth || lastScrollHeight !== scrollHeight) {
updateScrollbar();
}
};
const onScroll = () => {
if (!scrollTargetEl) {
return;
}
const { scrollLeft, scrollWidth, scrollTop, scrollHeight } = scrollTargetEl;
if (lastScrollWidth !== scrollWidth || lastScrollHeight !== scrollHeight) {
updateScrollbar();
}
hOffsetRate.value = scrollLeft / scrollWidth;
vOffsetRate.value = scrollTop / scrollHeight;
if (lastLeft >= 0) {
showXBar.value = scrollLeft !== lastLeft;
if (xTimer) {
clearTimeout(xTimer);
}
xTimer = window.setTimeout(() => {
showXBar.value = false;
xTimer = null;
}, props.duration);
}
lastLeft = scrollLeft;
if (lastTop >= 0) {
showYBar.value = scrollTop !== lastTop;
if (yTimer) {
clearTimeout(yTimer);
yTimer = null;
}
yTimer = window.setTimeout(() => {
showYBar.value = false;
}, props.duration);
}
lastTop = scrollTop;
};
let childToObserve = null;
const init = () => {
if (!scrollTargetEl) {
return;
}
scrollTargetEl.classList.add(ScrollbarClass2.container);
ro2 = useResizeObserver();
ro2.observe(scrollTargetEl, updateScrollbar);
if (scrollTargetEl.children.length === 1 && scrollTargetEl.children[0] instanceof HTMLElement) {
childToObserve = scrollTargetEl.children[0];
ro2.observe(childToObserve, updateScrollbar);
}
updateScrollbar();
scrollListenEl = isBody.value ? window : scrollTargetEl;
scrollListenEl.addEventListener("scroll", onScroll, { passive: true });
handleWrapperHoverEvent();
};
let updateTimer;
let updateIdleTimer;
const updateScrollbarOnIdle = () => {
if (window.requestIdleCallback) {
updateTimer = window.setInterval(() => {
updateIdleTimer = window.requestIdleCallback(updateScrollbarByScollSize);
}, 1e3);
}
};
const cancelUpdateScrollbarOnIdle = () => {
if (updateTimer) {
clearInterval(updateTimer);
if (cancelIdleCallback) {
cancelIdleCallback(updateIdleTimer);
}
updateTimer = 0;
updateIdleTimer = 0;
}
};
const { target } = vue.toRefs(props);
resolveHtmlElement(target).then((el) => {
if (el === document.body) {
isBody.value = true;
scrollTargetEl = document.documentElement;
} else if (el) {
scrollTargetEl = el;
}
if (!scrollTargetEl) {
return;
}
init();
});
const isShowScrollbar = vue.ref(props.showType === "always");
vue.watchEffect(() => {
isShowScrollbar.value = props.showType === "always";
if (props.showType === "always") {
if (props.autoUpdateOnScrollSize) {
updateScrollbarOnIdle();
}
} else {
cancelUpdateScrollbarOnIdle();
}
});
let wrapperEl = null;
const onWrapperHoverIn = () => {
isShowScrollbar.value = true;
};
const onWrapperHoverOut = () => {
isShowScrollbar.value = false;
if (scrollTargetEl) {
const { scrollWidth, scrollHeight } = scrollTargetEl;
if (lastScrollWidth !== scrollWidth || lastScrollHeight !== scrollHeight) {
updateScrollbar();
}
}
};
const removeWrapperHoverEvent = () => {
if (wrapperEl) {
wrapperEl.removeEventListener("mouseenter", onWrapperHoverIn);
wrapperEl.removeEventListener("mouseleave", onWrapperHoverOut);
}
};
function handleWrapperHoverEvent() {
vue.watchEffect(() => {
var _a;
const isHoverShow = props.showType === "hover" && !isPhonePad.value;
wrapperEl = (_a = rootRef.value) == null ? void 0 : _a.offsetParent;
if (!wrapperEl) {
return;
}
if (isHoverShow) {
wrapperEl == null ? void 0 : wrapperEl.addEventListener("mouseenter", onWrapperHoverIn);
wrapperEl == null ? void 0 : wrapperEl.addEventListener("mouseleave", onWrapperHoverOut);
} else {
removeWrapperHoverEvent();
}
});
}
vue.onUnmounted(() => {
if (scrollTargetEl) {
ro2 == null ? void 0 : ro2.unobserve(scrollTargetEl, updateScrollbar);
scrollListenEl == null ? void 0 : scrollListenEl.removeEventListener("scroll", onScroll);
}
if (childToObserve) {
ro2 == null ? void 0 : ro2.unobserve(childToObserve, updateScrollbar);
}
removeWrapperHoverEvent();
cancelUpdateScrollbarOnIdle();
scrollTargetEl == null ? void 0 : scrollTargetEl.classList.remove(ScrollbarClass2.container);
});
const onHBarScroll = (ratio) => {
if (scrollTargetEl) {
const d = ratio * scrollTargetEl.scrollWidth;
scrollTargetEl.scrollTo({
left: d
});
}
};
const onVBarScroll = (ratio) => {
if (scrollTargetEl) {
const d = ratio * scrollTargetEl.scrollHeight;
scrollTargetEl.scrollTo({
top: d
});
}
};
const onBarHoverIn = (d) => {
if (isPhonePad.value) {
return;
}
if (d === "x") {
showXBar.value = true;
if (xTimer) {
clearTimeout(xTimer);
yTimer = null;
}
} else if (d === "y") {
showYBar.value = true;
if (yTimer) {
clearTimeout(yTimer);
yTimer = null;
}
}
};
const onBarHoverOut = (d) => {
if (isPhonePad.value) {
return;
}
if (d === "x") {
xTimer = window.setTimeout(() => {
showXBar.value = false;
}, props.duration);
} else if (d === "y") {
yTimer = window.setTimeout(() => {
showYBar.value = false;
}, props.duration);
}
};
__expose({
/**
* @zh-CN 更新滚动条样式
* @en-US Update scrollbar styles
*/
update: updateScrollbar
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "rootRef",
ref: rootRef,
class: vue.normalizeClass(["o-scrollbar", vue.unref(mergeClass)(
`o-scrollbar-${props.size}`,
{
"o-scrollbar-auto-show": props.showType === "auto",
"o-scrollbar-always-show": props.showType === "always",
"o-scrollbar-hover-show": props.showType === "hover" && !vue.unref(isPhonePad),
"o-scrollbar-visible": isShowScrollbar.value,
"o-scrollbar-both": hasX.value && hasY.value,
"o-scrollbar-visible-x": showXBar.value,
"o-scrollbar-visible-y": showYBar.value,
"o-scrollbar-to-body": isBody.value
},
props.barClass
)])
},
[
props.showType !== "never" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
hasX.value && !props.disabledX ? (vue.openBlock(), vue.createBlock(_sfc_main$1C, {
key: 0,
size: props.size,
direction: "x",
"thumb-rate": hThumbRate.value,
"offset-rate": hOffsetRate.value,
onScroll: onHBarScroll,
onMouseenter: _cache[0] || (_cache[0] = ($event) => onBarHoverIn("x")),
onMouseleave: _cache[1] || (_cache[1] = ($event) => onBarHoverOut("x"))
}, {
thumb: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "thumb")
]),
track: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "track")
]),
_: 3
/* FORWARDED */
}, 8, ["size", "thumb-rate", "offset-rate"])) : vue.createCommentVNode("v-if", true),
hasY.value && !props.disabledY ? (vue.openBlock(), vue.createBlock(_sfc_main$1C, {
key: 1,
direction: "y",
size: props.size,
"thumb-rate": vThumbRate.value,
"offset-rate": vOffsetRate.value,
onScroll: onVBarScroll,
onMouseenter: _cache[2] || (_cache[2] = ($event) => onBarHoverIn("y")),
onMouseleave: _cache[3] || (_cache[3] = ($event) => onBarHoverOut("y"))
}, {
thumb: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "thumb")
]),
track: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "track")
]),
_: 3
/* FORWARDED */
}, 8, ["size", "thumb-rate", "offset-rate"])) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
const _hoisted_1$13 = { class: "o-scroller o-scrollbar-wrapper" };
const _sfc_main$1A = /* @__PURE__ */ vue.defineComponent({
__name: "OScroller",
props: scrollerProps,
emits: ["scroll"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const targetRef = vue.ref(null);
const scrollTo2 = (options) => {
if (!targetRef.value) {
return;
}
targetRef.value.scrollTo(options);
};
const scrollBy = (options) => {
if (!targetRef.value) {
return;
}
targetRef.value.scrollBy(options);
};
__expose({
scrollTo: scrollTo2,
/**
* 按偏移量滚动
* @since 1.2.4
*/
scrollBy,
/**
* 获取容器DOM元素
*/
getContainerEl() {
return targetRef.value;
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$13, [
vue.createElementVNode(
"div",
{
ref_key: "targetRef",
ref: targetRef,
class: vue.normalizeClass(
vue.unref(mergeClass)(
"o-scroller-container",
{
"is-x-disabled": props.disabledX,
"is-y-disabled": props.disabledY
},
props.wrapClass
)
),
onScrollPassive: _cache[0] || (_cache[0] = (e) => emits("scroll", e))
},
[
vue.renderSlot(_ctx.$slots, "default")
],
34
/* CLASS, NEED_HYDRATION */
),
vue.createVNode(_sfc_main$1B, {
target: targetRef.value,
"disabled-x": props.disabledX,
"disabled-y": props.disabledY,
duration: props.duration,
"show-type": props.showType,
size: props.size,
"bar-class": props.barClass,
"auto-update-on-scroll-size": props.autoUpdateOnScrollSize
}, {
thumb: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "thumb")
]),
track: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "track")
]),
_: 3
/* FORWARDED */
}, 8, ["target", "disabled-x", "disabled-y", "duration", "show-type", "size", "bar-class", "auto-update-on-scroll-size"])
]);
};
}
});
const ScrollbarClass = {
wrapper: "o-scrollbar-wrapper"
};
function useScrollbar(options) {
const { wrapper, target, ...rests } = options;
const app = vue.createApp(_sfc_main$1B, {
...rests,
target
});
const div = document.createElement("div");
const instance2 = app.mount(div);
let wrapperEl;
const mount = (wrap) => {
if (div.childNodes.length === 0) {
return;
}
wrapperEl = wrap || document.body;
wrapperEl == null ? void 0 : wrapperEl.appendChild(div.childNodes[0]);
wrapperEl == null ? void 0 : wrapperEl.classList.add(ScrollbarClass.wrapper);
};
if (wrapper) {
resolveHtmlElement(wrapper).then((el) => {
mount(el);
});
} else {
resolveHtmlElement(target).then((el) => {
mount(el == null ? void 0 : el.parentNode);
});
}
return {
scrollbar: instance2,
unmount: () => {
app.unmount();
wrapperEl == null ? void 0 : wrapperEl.classList.remove(ScrollbarClass.wrapper);
}
};
}
const scrollbarMap = /* @__PURE__ */ new WeakMap();
const vScrollbar = {
mounted(el, binding) {
const value = binding.value;
if (value === false) {
return;
}
const { unmount } = useScrollbar({
target: el,
...value
});
scrollbarMap.set(el, unmount);
},
unmounted(el) {
const unmount = scrollbarMap.get(el);
if (unmount) {
unmount();
}
}
};
const OScroller = Object.assign(_sfc_main$1A, {
OScrollbar: _sfc_main$1B,
install(app) {
app.component("OScroller", _sfc_main$1A);
app.component("OScrollbar", _sfc_main$1B);
}
});
const DialogSizeTypes = ["exlarge", "large", "medium", "small", "auto"];
const dialogProps = {
...layerProps,
/**
* @zh-CN 是否隐藏对话框的关闭按钮
* @en-US Whether to hide the close button of the dialog
*/
hideClose: {
type: Boolean
},
/**
* @zh-CN 对话框尺寸
* @en-US Dialog size
*/
size: {
type: String,
default: "auto"
},
/**
* @zh-CN 对话框底部按钮
* @en-US Dialog bottom button
*/
actions: {
type: Array
},
/**
* @zh-CN 是否禁用响应式
* @en-US Whether to disable responsive
*/
noResponsive: {
type: Boolean
},
/**
* @zh-CN 移动端是否渲染为半屏（宽度占满，高度占一半）
* @en-US Whether to render as half screen (width full, height half) on mobile phone
*/
phoneHalfFull: {
type: Boolean
},
/**
* @zh-CN 是否使用scrollbar，值为 false 不使用，值为 true 或 scrollbar 的配置对象则使用
* @en-US Whether to use scrollbar, value false not use, value true or scrollbar configuration object to use
*/
scrollbar: {
type: [Boolean, Object],
default: true
}
};
const _hoisted_1$12 = {
key: 0,
class: "o-dlg-header"
};
const _hoisted_2$K = { class: "o-dlg-body-content" };
const _hoisted_3$x = {
key: 1,
class: "o-dlg-footer"
};
const _hoisted_4$s = { class: "o-dlg-actions" };
const _sfc_main$1z = /* @__PURE__ */ vue.defineComponent({
__name: "ODialog",
props: dialogProps,
emits: ["change", "update:visible"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const { isPhonePad } = useScreen();
const layerRef = vue.ref(null);
const onCloseClick = () => {
var _a;
(_a = layerRef.value) == null ? void 0 : _a.toggle(false);
};
const onChange = (visible) => {
emits("change", visible);
};
const onUpdateVisible = (value, e) => {
emits("update:visible", value, e);
};
const scrollbarProps2 = vue.computed(() => {
if (props.scrollbar === true) {
return {
showType: "hover",
size: "small"
};
}
return props.scrollbar;
});
__expose({
/**
* @zh-CN 切换对话框显示状态
* @en-US Toggle the dialog visibility
*/
toggle(show) {
var _a;
(_a = layerRef.value) == null ? void 0 : _a.toggle(show);
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(OLayer), {
ref_key: "layerRef",
ref: layerRef,
class: vue.normalizeClass(["o-dialog", [
`o-dialog-${props.size}`,
{
"o-dialog-responsive": !props.noResponsive,
"o-dialog-phone-half-full": props.phoneHalfFull
}
]]),
visible: props.visible,
wrapper: props.wrapper,
"unmount-on-hide": props.unmountOnHide,
"main-class": vue.unref(mergeClass)("o-dlg-main", props.mainClass),
"main-transition": props.mainTransition,
"mask-transition": props.maskTransition,
mask: props.mask,
"mask-close": props.maskClose,
"before-hide": props.beforeHide,
"before-show": props.beforeShow,
"transition-orign": vue.unref(isPhonePad) ? "css" : "mouse",
onChange,
"onUpdate:visible": onUpdateVisible
}, {
default: vue.withCtx(() => [
_ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$12, [
vue.renderSlot(_ctx.$slots, "header")
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-dlg-body", {
"with-footer": _ctx.$slots.footer || props.actions
}])
},
[
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_2$K, [
vue.renderSlot(_ctx.$slots, "default")
])), [
[vue.unref(vScrollbar), scrollbarProps2.value]
])
],
2
/* CLASS */
),
_ctx.$slots.footer || _ctx.$slots.actions || props.actions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$x, [
vue.renderSlot(_ctx.$slots, "footer", {}, () => [
vue.createElementVNode("div", _hoisted_4$s, [
vue.renderSlot(_ctx.$slots, "actions", { isPhonePad: vue.unref(isPhonePad) }, () => [
vue.createCommentVNode(" 需要审视透传子组件属性 "),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(props.actions, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(OButton), {
key: item.id,
class: "o-dlg-btn",
color: item.color,
variant: !item.variant && vue.unref(isPhonePad) ? "text" : item.variant,
size: item.size,
round: item.round,
icon: item.icon,
loading: item.loading,
disabled: item.disabled,
onClick: item.onClick
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(item.label),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["color", "variant", "size", "round", "icon", "loading", "disabled", "onClick"]);
}),
128
/* KEYED_FRAGMENT */
))
])
])
])
])) : vue.createCommentVNode("v-if", true),
!props.hideClose ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: "o-dlg-btn-close",
onClick: onCloseClick
}, [
vue.createVNode(vue.unref(IconClose))
])) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 8, ["class", "visible", "wrapper", "unmount-on-hide", "main-class", "main-transition", "mask-transition", "mask", "mask-close", "before-hide", "before-show", "transition-orign"]);
};
}
});
const ODialog = Object.assign(_sfc_main$1z, {
install(app) {
app.component("ODialog", _sfc_main$1z);
}
});
const selectOptionInjectKey = Symbol("provide-select-option");
const OptionWidthModeTypes = ["auto", "min-width", "width"];
const selectProps = {
/**
* @zh-CN 选择框的值 v-model
* @en-US Select the value of the box.
*/
modelValue: {
type: [String, Number, Array]
},
/**
* @zh-CN 选择框的默认值，非受控
* @en-US The default value of the selection box is uncontrolled.
*/
defaultValue: {
type: [String, Number, Array]
},
/**
* @zh-CN 选择框大小
* @en-US Select box size.
*/
size: {
type: String
},
/**
* @zh-CN 选择框圆角
* @en-US Select the rounded corners of the box
*/
round: {
type: String
},
/**
* @zh-CN 选择框颜色
* @en-US Select box color.
* @default 'normal'
*/
color: {
type: String,
default: "normal"
},
/**
* @zh-CN 选择框变体
* @en-US Selection box variant.
* @default 'outline'
*/
variant: {
type: String,
default: "outline"
},
/**
* @zh-CN 选择框提示文本
* @en-US Select box prompt text.
*/
placeholder: {
type: String
},
/**
* @zh-CN 支持多选
* @en-US Support multiple selections.
*/
multiple: {
type: Boolean
},
/**
* @zh-CN 多选标签最大显示数量
* @en-US Maximum display quantity of multiple selection tags.
*/
maxTagCount: {
type: Number
},
/**
* @zh-CN 支持快速清除
* @en-US Support quick clearing.
*/
clearable: {
type: Boolean
},
/**
* @zh-CN 支持禁用
* @en-US Support disabling.
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 选项触发方式
* @en-US Option trigger method.
* @default 'click'
*/
trigger: {
type: String,
default: "click"
},
/**
* @zh-CN 选项布局位置
* @en-US Option layout location.
* @default 'bl'
*/
optionPosition: {
type: String,
default: "bl"
},
/**
* @zh-CN 选项宽度自适应规则
* 'auto': 自动
* 'min-width': 最小宽度与选择框一致
* 'width': 宽度与选择框一致
* @en-US Option width adaptive rule.
* 'auto': auto
* 'min-width': The minimum width is consistent with the selection box.
* 'width': The width is consistent with the selection box.
* @default 'min-width'
*/
optionWidthMode: {
type: String,
default: "min-width"
},
/**
* @zh-CN 选项容器自定义类
* @en-US Option container custom class.
*/
optionWrapClass: {
type: [String, Array, Object]
},
/**
* @zh-CN 是否在结束选择时，卸载所有选项，v-model
* @en-US Whether to uninstall all options when ending the selection.
* @default true
*/
unmountOnHide: {
type: Boolean,
default: true
},
/**
* @zh-CN 过渡名称
* @en-US Transition name.
*/
transition: {
type: String
},
/**
* @zh-CN 加载中
* @en-US loading.
*/
loading: {
type: Boolean
},
/**
* @zh-CN 选择前回调，根据返回值判断是否显示
* @en-US Select the pre-callback and determine whether to display based on the return value.
*/
beforeSelect: {
type: Function
},
/**
* @zh-CN 显示前回调，根据返回值判断是否显示
* @en-US Display the callback before display, and determine whether to display based on the return value.
*/
beforeOptionsShow: {
type: Function
},
/**
* @zh-CN 隐藏前回调，根据返回值判断是否隐藏
* @en-US Hide the previous callback and determine whether to hide it based on the return value.
*/
beforeOptionsHide: {
type: Function
},
/**
* @zh-CN 选项挂载容器，默认为body
* @en-US The option mounts the container, with the default being body.
* @default 'body'
*/
optionsWrapper: {
type: [String, Object],
default: "body"
},
/**
* @zh-CN 多选超过最大tag时，以文本显示
* @en-US When multiple selections exceed the maximum tag, they will be displayed as text.
*/
foldLabel: {
type: Function
},
/**
* @zh-CN 浮层显示收起的多选tag
* @en-US The floating layer shows the multiple selected tags that have been folded.
* @default 'hover'
*/
showFoldTags: {
type: [Boolean, String],
default: "hover"
},
/**
* @zh-CN 选项标题（pad、phone显示）
* @en-US Option title (displayed on pad and phone).
*/
optionTitle: {
type: String
},
/**
* @zh-CN 支持选项浮层响应式
* @en-US Support option floating layer responsiveness.
*/
noResponsive: {
type: Boolean
}
};
const optionProps = {
/**
* @zh-CN 选项显示文本
* @en-US The option displays text.
* @default ''
*/
label: {
type: String,
default: ""
},
/**
* @zh-CN 选项选中后的值
* @en-US The value after the option is selected.
* @default ''
*/
value: {
type: [String, Number],
default: ""
},
/**
* @zh-CN 支持选项禁用
* @en-US Disabled support options.
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 是否半选
* @en-US Whether to select half
*/
indeterminate: {
type: Boolean,
default: false
}
};
const checkboxInjectKey = Symbol("provide-checkbox");
const checkboxGroupInjectKey = Symbol("provide-checkbox-group");
const checkboxProps = {
/**
* @zh-CN 复选框value，会作为 modelValue 的值
* @en-US Checkbox value, which will be the value of modelValue
*/
value: {
type: [String, Number],
required: true
},
/**
* @zh-CN 复选框双向绑定值
* @en-US Checkbox two-way binding value
*/
modelValue: {
type: Array
},
/**
* @zh-CN 非受控状态时，默认是否选中
* @en-US Default checked when uncontrolled
*/
defaultChecked: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable
*/
disabled: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否半选
* @en-US Whether to select half
*/
indeterminate: {
type: Boolean,
default: false
},
/**
* @zh-CN 输入框的 id
* @en-US The id of the input box
*/
inputId: {
type: String
}
};
const _hoisted_1$11 = ["for"];
const _hoisted_2$J = { class: "o-checkbox-wrap" };
const _hoisted_3$w = ["id", "value", "disabled", "checked"];
const _hoisted_4$r = { class: "o-checkbox-input-wrap" };
const _hoisted_5$n = { class: "o-checkbox-input" };
const _hoisted_6$c = {
key: 0,
class: "o-checkbox-input-icon-indeterminate"
};
const _hoisted_7$8 = { class: "o-checkbox-label" };
const _sfc_main$1y = /* @__PURE__ */ vue.defineComponent({
__name: "OCheckbox",
props: checkboxProps,
emits: ["update:modelValue", "change"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const inputId2 = vue.ref(props.inputId);
vue.onMounted(() => {
if (!inputId2.value) {
inputId2.value = uniqueId();
}
});
const checkboxGroupInjection = vue.inject(checkboxGroupInjectKey, null);
const _checked = vue.ref(props.defaultChecked);
const isChecked = vue.computed(() => {
if (isUndefined(props.value)) {
return false;
}
if (checkboxGroupInjection) {
return checkboxGroupInjection.realValue.value.includes(props.value);
}
if (isArray(props.modelValue)) {
return props.modelValue.includes(props.value);
}
return _checked.value;
});
vue.watch(
isChecked,
(val) => {
_checked.value = val;
},
{ immediate: true }
);
const isDisabled = vue.computed(() => {
return (checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.disabled.value) || props.disabled || isChecked.value && ((checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.isMinimum.value) ?? false) || !isChecked.value && ((checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.isMaximum.value) ?? false);
});
const onClick = (ev) => {
ev.stopPropagation();
};
const onChange = (ev) => {
if (isUndefined(props.value)) {
return;
}
const { checked } = ev.target;
const set = checkboxGroupInjection ? /* @__PURE__ */ new Set([...checkboxGroupInjection.realValue.value]) : isArray(props.modelValue) ? /* @__PURE__ */ new Set([...props.modelValue]) : /* @__PURE__ */ new Set([]);
if (checked) {
set.add(props.value);
} else {
set.delete(props.value);
}
_checked.value = checked;
const val = Array.from(set);
emits("update:modelValue", val);
checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.updateModelValue(val);
vue.nextTick(() => {
emits("change", val, ev);
checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.onChange(val, ev);
});
};
__expose({
/**
* @zh-CN 是否已选中
* @en-US Whether the checkbox is checked
*/
checked: isChecked
});
vue.provide(checkboxInjectKey, {
checked: isChecked,
disabled: isDisabled
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("label", {
class: vue.normalizeClass(["o-checkbox", {
"o-checkbox-checked": isChecked.value,
"o-checkbox-disabled": isDisabled.value,
"o-checkbox-indeterminate": props.indeterminate
}]),
for: inputId2.value
}, [
vue.createElementVNode("div", _hoisted_2$J, [
vue.createElementVNode("input", {
id: inputId2.value,
type: "checkbox",
value: props.value,
disabled: isDisabled.value,
checked: isChecked.value,
onClick,
onChange
}, null, 40, _hoisted_3$w),
vue.renderSlot(_ctx.$slots, "checkbox", {
checked: isChecked.value,
disabled: isDisabled.value
}, () => [
vue.createElementVNode("div", _hoisted_4$r, [
vue.createElementVNode("span", _hoisted_5$n, [
vue.createVNode(vue.Transition, { name: "o-fade-in" }, {
default: vue.withCtx(() => [
props.indeterminate ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$c)) : isChecked.value ? (vue.openBlock(), vue.createBlock(vue.unref(IconChecked), { key: 1 })) : vue.createCommentVNode("v-if", true)
]),
_: 1
/* STABLE */
})
])
]),
vue.createElementVNode("span", _hoisted_7$8, [
vue.renderSlot(_ctx.$slots, "default")
])
])
])
], 10, _hoisted_1$11);
};
}
});
const OCheckbox = Object.assign(_sfc_main$1y, {
install(app) {
app.component("OCheckbox", _sfc_main$1y);
}
});
const _sfc_main$1x = /* @__PURE__ */ vue.defineComponent({
__name: "OOption",
props: optionProps,
setup(__props) {
const props = __props;
const { label, value } = vue.toRefs(props);
const selectInject = vue.inject(selectOptionInjectKey, null);
const isMultiple = vue.computed(() => vue.toValue(selectInject == null ? void 0 : selectInject.multiple));
const currentVal = vue.computed(() => {
return selectInject == null ? void 0 : selectInject.selectValue.value;
});
const isActive = vue.ref(false);
vue.watch(
[currentVal, value],
() => {
var _a;
isActive.value = Boolean((_a = currentVal.value) == null ? void 0 : _a.includes(value.value));
},
// currentVal 会被 OSelect 通过数组下标及push方法修改，所以需要deep
{ immediate: true, deep: true }
);
vue.watch(
[value, label],
([newValue, newLabel]) => {
selectInject == null ? void 0 : selectInject.registerOption({
label: newLabel || `${newValue}`,
value: newValue
});
},
{ immediate: true }
);
const clickOption = () => {
if (!props.disabled) {
selectInject == null ? void 0 : selectInject.select({
label: label.value || `${value.value}`,
value: value.value
});
}
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: "o-option",
onClick: clickOption
}, [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-option-item", [
{
active: isActive.value,
"o-option-disabled": props.disabled,
"o-option-multiple": isMultiple.value
}
]])
},
[
isMultiple.value ? (vue.openBlock(), vue.createBlock(vue.unref(OCheckbox), {
key: 0,
"model-value": currentVal.value,
value: props.value,
class: "o-option-checkbox",
disabled: props.disabled,
indeterminate: props.indeterminate
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.label || `${props.value}`),
1
/* TEXT */
)
])
]),
_: 3
/* FORWARDED */
}, 8, ["model-value", "value", "disabled", "indeterminate"])) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
vue.createTextVNode(
vue.toDisplayString(props.label || `${props.value}`),
1
/* TEXT */
)
])
],
2
/* CLASS */
)
]);
};
}
});
const _hoisted_1$10 = { class: "o-option-list" };
const _sfc_main$1w = /* @__PURE__ */ vue.defineComponent({
__name: "OOptionList",
props: {
wrapClass: {},
scrollbar: { type: [Boolean, Object] }
},
setup(__props) {
const props = __props;
const scrollbarProps2 = vue.computed(() => {
if (props.scrollbar === true) {
return {
showType: "hover",
size: "small"
};
}
return props.scrollbar;
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$10, [
vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-options-container", props.wrapClass])
},
[
vue.renderSlot(_ctx.$slots, "default")
],
2
/* CLASS */
)), [
[vue.unref(vScrollbar), scrollbarProps2.value]
])
]);
};
}
});
const _hoisted_1$$ = { class: "o-option-group" };
const _hoisted_2$I = { class: "o-option-group-name" };
const _sfc_main$1v = /* @__PURE__ */ vue.defineComponent({
__name: "OOptionGroup",
props: {
name: {}
},
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$$, [
vue.renderSlot(_ctx.$slots, "name", {}, () => [
vue.createElementVNode(
"div",
_hoisted_2$I,
vue.toDisplayString(props.name),
1
/* TEXT */
)
]),
vue.renderSlot(_ctx.$slots, "default")
]);
};
}
});
const OOption = Object.assign(_sfc_main$1x, {
install(app) {
app.component("OOption", _sfc_main$1x);
app.component("OOptionGroup", _sfc_main$1v);
}
});
const slot$1 = {
names: {
optionTarget: "option-target"
},
option: {
names: {
action: "action"
}
}
};
const _hoisted_1$_ = {
key: 0,
class: "o-select-options-loading"
};
const _hoisted_2$H = {
key: 0,
class: "o-select-actions"
};
const _sfc_main$1u = /* @__PURE__ */ vue.defineComponent({
__name: "SelectOption",
props: {
size: {},
wrapClass: {},
loading: { type: Boolean },
optionTitle: {},
multiple: { type: Boolean }
},
setup(__props) {
const props = __props;
const scrollbarCfg = {
barClass: "o-select-options-scrollbar",
size: "small",
showType: "hover"
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-select-options", [
`o-select-options-${props.size || vue.unref(defaultSize)}`,
{
"o-select-options-multiple": props.multiple
}
]])
},
[
vue.createVNode(vue.unref(_sfc_main$1w), {
"wrap-class": props.wrapClass,
scrollbar: scrollbarCfg
}, {
default: vue.withCtx(() => [
props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_, [
vue.createVNode(vue.unref(IconLoading), { class: "o-rotating" })
])) : vue.renderSlot(_ctx.$slots, vue.unref(slot$1).names.optionTarget, { key: 1 })
]),
_: 3
/* FORWARDED */
}, 8, ["wrap-class"]),
_ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$H, [
vue.renderSlot(_ctx.$slots, vue.unref(slot$1).option.names.action)
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
const formInjectKey = Symbol("provide-form");
const formItemInjectKey = Symbol("provide-form-item");
const configProviderProps = {
/**
* @zh-CN 语言词条
* @en-US Language locale
*/
locale: {
type: Object
},
/**
* @zh-CN Link 组件全局配置
* @en-US Global configuration for the Link component
*/
link: {
type: Object
}
};
const configProviderInjectKey = Symbol("provide-config-provider");
const _sfc_main$1t = /* @__PURE__ */ vue.defineComponent({
__name: "OConfigProvider",
props: configProviderProps,
setup(__props) {
const props = __props;
const { locale, link } = vue.toRefs(props);
const globalConfig = vue.reactive({
locale,
link
});
vue.provide(configProviderInjectKey, globalConfig);
return (_ctx, _cache) => {
return vue.renderSlot(_ctx.$slots, "default");
};
}
});
const OConfigProvider = Object.assign(_sfc_main$1t, {
install(app) {
app.component("OConfigProvider", _sfc_main$1t);
}
});
const zhCN = {
locale: "zh-CN",
// common
"common.more": "更多",
"common.empty": "暂无数据",
"common.loading": "加载中...",
"common.checkAll": "全选",
"common.filter": "筛选",
"common.confirm": "确认",
"common.reset": "重置",
"common.search": "搜索",
// pagination
"pagination.goto": "前往",
"pagination.page": "页",
"pagination.countPerPage": "条/页",
"pagination.total": "共 {0} 条",
// upload
"upload.buttonLabel": "点击上传",
"upload.drag": "点击或拖拽文件到此处上传",
"upload.dragHover": "释放文件并开始上传",
"upload.retry": "点击重试",
"upload.delete": "删除",
"upload.preview": "预览",
"upload.edit": "编辑",
"upload.loading": "上传中",
"upload.failed": "上传失败",
"upload.download": "下载文件",
// select
"select.cancel": "取消",
"select.confirm": "确定",
// input
"input.limit": "<b>{0}</b>/{1}",
// table
"table.filterEmptyOption": "空",
"table.filterPlaceholder": "请输入搜索内容",
// timePicker
"timePicker.time": "时间",
"timePicker.selectTime": "选择时间",
"timePicker.placeholder": "请选择时间",
"timePicker.now": "此刻",
"timePicker.startTime": "开始时间",
"timePicker.endTime": "结束时间",
// datePicker
"datePicker.date": "日期",
"datePicker.time": "时间",
"datePicker.selectDate": "选择日期",
"datePicker.selectTime": "选择时间",
"datePicker.placeholder": "请选择日期",
"datePicker.yearPlaceholder": "请选择年份",
"datePicker.monthPlaceholder": "请选择月份",
"datePicker.today": "今天",
"datePicker.year": "年",
"datePicker.yearUnit": "年",
"datePicker.monthUnit": "月",
"datePicker.dayUnit": "日",
"datePicker.weekdays.0": "日",
"datePicker.weekdays.1": "一",
"datePicker.weekdays.2": "二",
"datePicker.weekdays.3": "三",
"datePicker.weekdays.4": "四",
"datePicker.weekdays.5": "五",
"datePicker.weekdays.6": "六",
"datePicker.months.0": "一月",
"datePicker.months.1": "二月",
"datePicker.months.2": "三月",
"datePicker.months.3": "四月",
"datePicker.months.4": "五月",
"datePicker.months.5": "六月",
"datePicker.months.6": "七月",
"datePicker.months.7": "八月",
"datePicker.months.8": "九月",
"datePicker.months.9": "十月",
"datePicker.months.10": "十一月",
"datePicker.months.11": "十二月",
"datePicker.monthsShort.0": "01月",
"datePicker.monthsShort.1": "02月",
"datePicker.monthsShort.2": "03月",
"datePicker.monthsShort.3": "04月",
"datePicker.monthsShort.4": "05月",
"datePicker.monthsShort.5": "06月",
"datePicker.monthsShort.6": "07月",
"datePicker.monthsShort.7": "08月",
"datePicker.monthsShort.8": "09月",
"datePicker.monthsShort.9": "10月",
"datePicker.monthsShort.10": "11月",
"datePicker.monthsShort.11": "12月",
// dateRangePicker
"dateRangePicker.placeholderStart": "开始日期",
"dateRangePicker.placeholderEnd": "结束日期",
"dateRangePicker.selectRange": "选择日期范围"
};
const currentLocal = vue.ref("zh-CN");
const i18nLanguage = vue.ref({
"zh-CN": zhCN
});
function addLocale(locale, opts) {
const locales = isArray(locale) ? locale : [locale];
locales.forEach((lc) => {
const currLocal = lc.locale;
if (!currLocal) {
return;
}
if (!i18nLanguage.value[currLocal]) {
i18nLanguage.value[currLocal] = {
locale: lc.locale
};
}
Object.keys(lc).forEach((key) => {
const k = key;
if (!i18nLanguage.value[currLocal][k] || (opts == null ? void 0 : opts.overwrite)) {
i18nLanguage.value[currLocal][k] = lc[key];
}
});
});
}
function useLocale(localeKey) {
if (!i18nLanguage.value[localeKey]) {
log$1.warn(`no '${localeKey}' languages configed`);
return;
}
currentLocal.value = localeKey;
}
function useI18n() {
const instance2 = vue.getCurrentInstance();
const configProvider = instance2 ? vue.inject(configProviderInjectKey, {}) : null;
const languages = vue.computed(() => {
return (configProvider == null ? void 0 : configProvider.locale) ?? i18nLanguage.value[currentLocal.value];
});
const locale = vue.computed(() => languages.value.locale);
const transform = (key, ...args) => {
if (!languages.value) {
log$1.warn("no languages configed");
return "";
}
const value = languages.value[key];
if (args.length > 0 && isString(value)) {
return value.replace(/{(\d+)}/g, (match, index) => {
return args[index] ?? match;
});
}
if (isUndefined(value)) {
log$1.warn(`Cannot translate the value of keypath '${key}'`);
}
return value;
};
return {
locale,
t: transform
};
}
const _hoisted_1$Z = {
key: 0,
class: "o-select-prefix"
};
const _hoisted_2$G = ["value", "placeholder"];
const _hoisted_3$v = { class: "o-select-tags-wrap" };
const _hoisted_4$q = ["onClick"];
const _hoisted_5$m = { class: "o-select-tags" };
const _hoisted_6$b = ["onClick"];
const _hoisted_7$7 = { class: "o-select-suffix" };
const _hoisted_8$4 = { class: "o-select-suffix-icon" };
const _hoisted_9$4 = {
key: 0,
class: "o-select-loading"
};
const _hoisted_10$4 = { class: "o-select-option-wrap" };
const _hoisted_11$4 = { class: "o-select-empty" };
const _hoisted_12$2 = { class: "o-select-options-head" };
const _sfc_main$1s = /* @__PURE__ */ vue.defineComponent({
__name: "OSelect",
props: selectProps,
emits: ["update:modelValue", "change", "options-visible-change", "clear"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const slots = vue.useSlots();
const { isPhonePadSize } = useScreen();
const { t } = useI18n();
const selectRef = vue.ref();
const optionsRef = vue.ref(null);
const isSelecting = vue.ref(false);
const isResponding = vue.computed(() => {
return !props.noResponsive && isPhonePadSize.value;
});
const tagPopoverVisible = vue.ref(false);
vue.watch(
() => isSelecting.value,
() => {
if (isSelecting.value) {
tagPopoverVisible.value = false;
}
}
);
const formItemInjection = vue.inject(formItemInjectKey, null);
const color2 = vue.computed(() => {
var _a;
if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
return (_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type;
} else {
return props.color;
}
});
const optionLabels = vue.ref({});
const valueList = vue.ref([]);
const finalValueList = vue.ref([]);
if (isArray(props.modelValue)) {
valueList.value = [...props.modelValue];
} else if (isArray(props.defaultValue)) {
valueList.value = [...props.defaultValue];
} else {
const mrValue = props.modelValue ?? props.defaultValue;
if (!isUndefined(mrValue)) {
valueList.value = [mrValue];
} else {
valueList.value = [];
}
}
finalValueList.value = [...valueList.value];
const valueListDisplay = vue.computed(() => {
if (!props.maxTagCount) {
return finalValueList.value;
}
return finalValueList.value.slice(0, props.maxTagCount);
});
const valueListFold = vue.computed(() => {
if (!props.maxTagCount) {
return [];
}
return finalValueList.value.slice(props.maxTagCount);
});
const foldLabel = vue.computed(() => {
if (props.foldLabel) {
const tags = valueListFold.value.map((item) => ({
value: item,
label: optionLabels.value[item]
}));
return props.foldLabel(tags);
}
return `+${valueListFold.value.length}...`;
});
const foldTrigger = typeof props.showFoldTags === "string" ? props.showFoldTags : "hover";
const round2 = getRoundClass(props, "select");
vue.watch(
() => props.modelValue,
(v) => {
if (props.multiple) {
if (isArray(v)) {
if (!isArrayEqual(v, valueList.value)) {
valueList.value = [...v];
}
} else {
valueList.value = [];
}
} else {
if (isArray(v)) {
if (v.length === 0) {
valueList.value = [];
} else {
valueList.value = [v[v.length - 1]];
}
} else {
valueList.value = isUndefined(v) ? [] : [v];
}
}
finalValueList.value = [...valueList.value];
}
);
vue.watchEffect(() => {
if (!isResponding.value) {
finalValueList.value = [...valueList.value];
}
});
const isClearable = vue.computed(() => props.clearable && !props.disabled && valueList.value.length > 0);
const emitChange = (value) => {
var _a, _b;
if (props.multiple) {
emits("change", [...value]);
} else {
emits("change", value[0]);
}
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
};
const emitUpdateValue = (value) => {
if (props.multiple) {
emits("update:modelValue", [...value]);
} else {
emits("update:modelValue", value[0]);
}
};
const clearClick = (e) => {
e.stopPropagation();
valueList.value = [];
emits("clear", e);
emitChange(valueList.value);
emitUpdateValue(valueList.value);
};
const beforeSelect = async (value) => {
if (isFunction(props.beforeSelect)) {
const rlt = await props.beforeSelect(value, props.multiple ? valueList.value : valueList.value[0]);
return rlt;
}
return true;
};
vue.provide(selectOptionInjectKey, {
multiple: props.multiple,
selectValue: valueList,
select: async (option) => {
let toValue = option.value;
const rlt = await beforeSelect(option.value);
if (rlt === false) {
return;
}
if (typeof rlt !== "boolean") {
toValue = rlt;
}
if (!props.multiple) {
isSelecting.value = false;
if (valueList.value[0] !== toValue) {
valueList.value[0] = toValue;
emitUpdateValue(valueList.value);
emitChange(valueList.value);
}
} else {
const idx = valueList.value.indexOf(toValue);
if (idx > -1) {
valueList.value.splice(idx, 1);
} else {
valueList.value.push(toValue);
}
if (!isResponding.value) {
emitUpdateValue(valueList.value);
emitChange(valueList.value);
}
}
},
registerOption(option) {
if (optionLabels.value[option.value] !== option.label) {
optionLabels.value[option.value] = option.label;
}
}
});
const onOptionVisibleChange = (visible) => {
emits("options-visible-change", visible);
};
const onRemoveTag = (value, e) => {
e.stopPropagation();
const idx = valueList.value.indexOf(value);
if (idx > -1) {
valueList.value.splice(idx, 1);
emitChange(valueList.value);
emitUpdateValue(valueList.value);
}
};
const onFoldTagClick = (e) => {
if (foldTrigger === "click") {
e.stopPropagation();
}
};
const beforeTagPopoverShow = () => {
if (isSelecting.value) {
return false;
}
return true;
};
const onSelectClick = () => {
if (isResponding.value) {
if (!props.disabled) {
isSelecting.value = true;
}
}
};
const onSelectDlgChange = (visible) => {
onOptionVisibleChange(visible);
};
const onselectDlgCancelClick = () => {
isSelecting.value = false;
valueList.value = [...finalValueList.value];
};
const onselectDlgOkClick = () => {
isSelecting.value = false;
finalValueList.value = [...valueList.value];
emitChange(valueList.value);
emitUpdateValue(valueList.value);
};
__expose({
/**
* @zh-CN 选择器根元素引用
* @en-US Reference to the select root element
*/
selectRef,
/**
* @zh-CN 是否正在选择中
* @en-US Whether the select is in selecting state
*/
isSelecting
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "selectRef",
ref: selectRef,
class: vue.normalizeClass(["o-select", [
`o-select-${color2.value}`,
`o-select-${props.variant}`,
`o-select-${props.size || vue.unref(defaultSize)}`,
vue.unref(round2).class.value,
{
"is-selecting": isSelecting.value,
"is-multiple": props.multiple && valueList.value.length > 0,
"o-select-disabled": props.disabled,
"o-select-clearable": isClearable.value,
"o-select-is-loading": props.loading
}
]]),
style: vue.normalizeStyle(vue.unref(round2).style.value),
onClick: onSelectClick
},
[
!vue.unref(isEmptySlot)(slots.prefix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, [
vue.renderSlot(_ctx.$slots, "prefix")
])) : vue.createCommentVNode("v-if", true),
!props.multiple || props.multiple && valueList.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("input", {
key: 1,
value: optionLabels.value[valueList.value[0]],
type: "text",
placeholder: props.placeholder,
class: "o-select-input",
readonly: ""
}, null, 8, _hoisted_2$G)) : (vue.openBlock(), vue.createBlock(vue.unref(OScroller), {
key: 2,
class: "o-select-tags-scroller",
"wrap-class": "o-select-value-list",
"show-type": "hover",
size: "small",
"disabled-x": ""
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_3$v, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(valueListDisplay.value, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item,
class: "o-select-tag"
}, [
vue.createTextVNode(
vue.toDisplayString(optionLabels.value[item]) + " ",
1
/* TEXT */
),
vue.createElementVNode("div", {
class: "o-select-tag-remove",
onClick: (e) => onRemoveTag(item, e)
}, [
vue.createVNode(vue.unref(IconClose))
], 8, _hoisted_4$q)
]);
}),
128
/* KEYED_FRAGMENT */
)),
_ctx.showFoldTags && valueListFold.value.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(OPopover), {
key: 0,
visible: tagPopoverVisible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => tagPopoverVisible.value = $event),
trigger: vue.unref(foldTrigger),
class: "o-select-tag-popover",
position: "bottom",
"before-show": beforeTagPopoverShow
}, {
target: vue.withCtx(() => [
vue.createElementVNode("div", {
class: "o-select-tag",
onClick: onFoldTagClick
}, [
vue.renderSlot(_ctx.$slots, "tag-fold", {}, () => [
vue.createTextVNode(
vue.toDisplayString(foldLabel.value),
1
/* TEXT */
)
])
])
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_5$m, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(valueListFold.value, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item,
class: "o-select-tag"
}, [
vue.createTextVNode(
vue.toDisplayString(optionLabels.value[item]) + " ",
1
/* TEXT */
),
vue.createElementVNode("div", {
class: "o-select-tag-remove",
onClick: (e) => onRemoveTag(item, e)
}, [
vue.createVNode(vue.unref(IconClose))
], 8, _hoisted_6$b)
]);
}),
128
/* KEYED_FRAGMENT */
))
])
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "trigger"])) : vue.createCommentVNode("v-if", true)
])
]),
_: 3
/* FORWARDED */
})),
vue.createElementVNode("div", _hoisted_7$7, [
vue.createElementVNode("div", _hoisted_8$4, [
props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$4, [
vue.createVNode(vue.unref(IconLoading), { class: "o-rotating" })
])) : isClearable.value ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: "o-select-clear",
onClick: clearClick
}, [
vue.createVNode(vue.unref(IconClose), { class: "o-select-clear-icon" })
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-select-arrow", { active: isSelecting.value }])
},
[
vue.renderSlot(_ctx.$slots, "arrow", { active: isSelecting.value }, () => [
vue.createVNode(vue.unref(IconChevronDown))
])
],
2
/* CLASS */
)
]),
vue.renderSlot(_ctx.$slots, "suffix", { active: isSelecting.value })
]),
vue.createVNode(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.Teleport, {
to: optionsRef.value,
disabled: !optionsRef.value
}, [
vue.withDirectives(vue.createElementVNode(
"div",
_hoisted_10$4,
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createElementVNode("div", _hoisted_11$4, [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(vue.unref(t)("common.empty")),
1
/* TEXT */
)
])
])
])
],
512
/* NEED_PATCH */
), [
[vue.vShow, optionsRef.value]
])
], 8, ["to", "disabled"])),
isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(ODialog), {
key: 0,
visible: isSelecting.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => isSelecting.value = $event),
"before-show": props.beforeOptionsShow,
"before-hide": props.beforeOptionsHide,
"hide-close": "",
class: vue.normalizeClass(["o-select-dlg", {
"is-loading": props.loading
}]),
"mask-close": !props.multiple,
size: "small",
scrollbar: false,
onChange: onSelectDlgChange
}, vue.createSlots({
default: vue.withCtx(() => [
vue.createVNode(_sfc_main$1u, {
size: props.size,
"wrap-class": props.optionWrapClass,
loading: props.loading,
class: "o-select-options-dlg",
"option-title": props.optionTitle,
multiple: props.multiple
}, vue.createSlots({
"option-target": vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "optionsRef",
ref: optionsRef
},
null,
512
/* NEED_PATCH */
)
]),
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(filterSlots)(slots, vue.unref(slot$1).option.names), (name) => {
return {
name,
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, name)
])
};
})
]), 1032, ["size", "wrap-class", "loading", "option-title", "multiple"])
]),
_: 2
/* DYNAMIC */
}, [
props.optionTitle ? {
name: "header",
fn: vue.withCtx(() => [
vue.createElementVNode(
"div",
_hoisted_12$2,
vue.toDisplayString(props.optionTitle),
1
/* TEXT */
)
]),
key: "0"
} : void 0,
props.multiple ? {
name: "actions",
fn: vue.withCtx(() => [
vue.createVNode(vue.unref(OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
onClick: onselectDlgCancelClick
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.cancel")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}),
vue.createVNode(vue.unref(OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
onClick: onselectDlgOkClick
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
]),
key: "1"
} : void 0
]), 1032, ["visible", "before-show", "before-hide", "mask-close", "class"])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
!props.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(OPopup), {
key: 0,
visible: isSelecting.value,
"onUpdate:visible": _cache[2] || (_cache[2] = ($event) => isSelecting.value = $event),
"wrap-class": "o-options-popup",
transition: props.transition,
"unmount-on-hide": props.unmountOnHide,
position: props.optionPosition,
wrapper: props.optionsWrapper,
target: selectRef.value,
trigger: props.trigger,
offset: 4,
"adjust-min-width": props.optionWidthMode === "min-width",
"adjust-width": props.optionWidthMode === "width",
"before-show": props.beforeOptionsShow,
"before-hide": props.beforeOptionsHide,
onChange: onOptionVisibleChange
}, {
default: vue.withCtx(() => [
vue.createVNode(_sfc_main$1u, {
size: props.size,
"wrap-class": props.optionWrapClass,
loading: props.loading,
multiple: props.multiple
}, vue.createSlots({
"option-target": vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "optionsRef",
ref: optionsRef
},
null,
512
/* NEED_PATCH */
)
]),
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(filterSlots)(slots, vue.unref(slot$1).option.names), (name) => {
return {
name,
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, name)
])
};
})
]), 1032, ["size", "wrap-class", "loading", "multiple"])
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "transition", "unmount-on-hide", "position", "wrapper", "target", "trigger", "adjust-min-width", "adjust-width", "before-show", "before-hide"])) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
))
]),
_: 3
/* FORWARDED */
})
],
6
/* CLASS, STYLE */
);
};
}
});
const OSelect = Object.assign(_sfc_main$1s, {
install(app) {
app.component("OSelect", _sfc_main$1s);
}
});
const DFS = (options, parentNode, depth, map, leafNodes, lazy) => {
const fullLabel = parentNode.fullLabel || parentNode.label || "";
const preLabel = depth === 0 ? `${fullLabel}` : `${fullLabel}/`;
const parentFullPath = parentNode.fullPath || [];
for (let i = 0, len = options.length; i < len; i++) {
const item = options[i];
const node = {
value: item.value,
label: item.label,
parent: parentNode,
depth: depth + 1,
children: [],
isLeaf: true,
disabled: item.disabled,
fullLabel: `${preLabel}${item.label}`,
fullPath: [...parentFullPath, item.value]
};
parentNode.children.push(node);
map.set(node.value, node);
if (item.children && item.children.length) {
node.isLeaf = false;
DFS(item.children, node, depth + 1, map, leafNodes, lazy);
} else if (item.leaf === true) {
node.isLeaf = true;
} else if (item.leaf === false) {
node.isLeaf = false;
} else if (lazy) {
node.isLeaf = false;
}
if (node.isLeaf) {
leafNodes.push(node);
}
}
};
class CascaderTree {
constructor() {
__publicField(this, "root");
__publicField(this, "map");
__publicField(this, "leafNodes");
this.root = {
value: NaN,
label: "",
depth: 0,
parent: null,
children: [],
isLeaf: true,
fullLabel: "",
fullPath: []
};
this.map = /* @__PURE__ */ new Map();
this.leafNodes = [];
}
/** 更新树结构，生成CascaderNodeT类型的数据 */
updateTree(options, lazy) {
this.root = {
value: NaN,
label: "",
depth: 0,
parent: null,
children: [],
isLeaf: true,
fullLabel: "",
fullPath: []
};
this.map.clear();
this.leafNodes = [];
DFS(options, this.root, 0, this.map, this.leafNodes, lazy);
}
/** 为指定父节点动态添加子节点（用于懒加载） */
addChildren(parentValue, children, lazy) {
const parentNode = parentValue === null ? this.root : this.map.get(parentValue);
if (!parentNode) return;
const removeDescendants = (node) => {
node.children.forEach((child) => {
this.map.delete(child.value);
const idx = this.leafNodes.indexOf(child);
if (idx > -1) this.leafNodes.splice(idx, 1);
removeDescendants(child);
});
};
removeDescendants(parentNode);
parentNode.children = [];
const parentLeafIdx = this.leafNodes.indexOf(parentNode);
if (parentLeafIdx > -1) this.leafNodes.splice(parentLeafIdx, 1);
if (children.length === 0) {
parentNode.isLeaf = true;
this.leafNodes.push(parentNode);
return;
}
parentNode.isLeaf = false;
DFS(children, parentNode, parentNode.depth, this.map, this.leafNodes, lazy);
}
getNode(val) {
return this.map.get(val);
}
/**
* 根据选中的叶子节点值获取级联选择器每栏应该渲染的数据
* @param val 选中的叶子节点值
* @param lazy 是否懒加载模式，懒加载下选中非叶子节点时额外追加其子列
* @returns 级联选择器每栏的数据
*/
getPanelInfo(val, lazy) {
const rlt = [];
if (isUndefined(val) || this.root.children.length === 0) {
return rlt;
}
if (!isArray(val)) {
let current = this.getNode(val);
if (!current) {
rlt.push(this.getColumnInfo(this.root));
log$1.warn("Cascader: Invalid value");
} else {
const selectedNode = current;
while (current && current.parent) {
rlt.unshift(this.getColumnInfo(current.parent, [current.value]));
current = current.parent;
}
if (lazy && !selectedNode.isLeaf) {
rlt.push(this.getColumnInfo(selectedNode));
}
}
} else {
for (let i = 0; i < val.length; i++) {
const item = this.getNode(val[i]);
if (item && item.parent) {
rlt.push(this.getColumnInfo(item.parent, [item.value]));
} else {
rlt.length = 0;
log$1.warn("Cascader: Invalid value");
break;
}
}
if (rlt.length === 0) {
rlt.push(this.getColumnInfo(this.root));
} else if (lazy) {
const lastNode = this.getNode(val[val.length - 1]);
if (lastNode && !lastNode.isLeaf) {
rlt.push(this.getColumnInfo(lastNode));
}
}
}
return rlt;
}
/**
* 根据当前选中的节点，获取当前列的信息
* @param node 当前选中的节点的父节点
* @param activeVal 当前选中的节点的value
* @returns 当前节点的可选项数据
*/
getColumnInfo(node, activeVal) {
return node.children.map((item) => {
const rlt = {
value: item.value,
label: item.label,
depth: item.depth,
isActive: false,
isLeaf: item.isLeaf,
fullLabel: item.fullLabel,
fullPath: item.fullPath,
parent: item.parent,
disabled: false
};
if (!isUndefined(activeVal)) {
rlt.isActive = activeVal.includes(item.value);
}
rlt.disabled = Boolean(item.disabled);
return rlt;
});
}
getLeafNodes() {
return this.leafNodes;
}
}
const cascaderProps = {
/**
* @zh-CN 级联选择器选中值(v-model)
* @en-US Cascader selected value (v-model)
* @CascaderValueT string | number | Array<string | number>
*/
modelValue: {
type: [String, Number, Array],
default: ""
},
/**
* @zh-CN 级联选择器选项值
* @en-US Cascader option value
* @CascaderOptionT { value: string | number, label?: string, children?: Array<CascaderOptionT> }
*/
options: {
type: Array
},
/**
* @zh-CN modelValue 是否使用路径模式
* @en-US Whether to use path mode for modelValue
* @default false
*/
pathMode: {
type: Boolean,
default: false
},
/**
* @zh-CN 圆角大小
* @en-US Round size
*/
round: {
type: String
},
/**
* @zh-CN 样式
* @en-US Style
* @default 'outline'
*/
variant: {
type: String,
default: "outline"
},
/**
* @zh-CN 提示文本
* @en-US Placeholder
*/
placeholder: {
type: String
},
/**
* @zh-CN 弹出级联菜单的触发方式
* @en-US Trigger method for cascading menu popup
* @default 'click'
*/
trigger: {
type: String,
default: "click"
},
/**
* @zh-CN 下拉选项位置
* @en-US Option position
* @default 'bl'
*/
optionPosition: {
type: String,
default: "bl"
},
/**
* @zh-CN 下拉选项容器类名
* @en-US Option container class name
*/
optionWrapClass: {
type: [String, Array, Object]
},
/**
* @zh-CN 是否在隐藏时销毁 DOM
* @en-US Whether to destroy DOM when hidden
*/
unmountOnHide: {
type: Boolean,
default: true
},
/**
* @zh-CN 过渡动画名称
* @en-US Transition animation name
*/
transition: {
type: String
},
/**
* @zh-CN 展开菜单选项的触发方式
* @en-US Trigger method to expand menu options
*/
expandTrigger: {
type: String,
default: "click"
},
/**
* @zh-CN 选择器尺寸
* @en-US Select size
* @default 'large'
*/
size: {
type: String,
default: "large"
}
};
const cascaderPanelProps = {
/**
* @zh-CN 级联选择器选中值(v-model)
* @en-US Cascader selected value (v-model)
*/
modelValue: {
type: [String, Number, Array],
default: ""
},
/**
* @zh-CN 级联选择器选项值
* @en-US Cascader option value
*/
options: {
type: Array
},
/**
* @zh-CN modelValue 是否使用路径模式
* @en-US Whether to use path mode for modelValue
* @default false
*/
pathMode: {
type: Boolean,
default: false
},
/**
* @zh-CN 展开菜单选项的触发方式
* @en-US Trigger method to expand menu options
*/
expandTrigger: {
type: String,
default: "click"
}
};
const _hoisted_1$Y = { class: "o-cascader-panel" };
const _hoisted_2$F = ["onClick", "onMouseenter"];
const _hoisted_3$u = { class: "o-cascader-option-label" };
const _hoisted_4$p = {
key: 0,
class: "o-cascader-option-arrow"
};
const _sfc_main$1r = /* @__PURE__ */ vue.defineComponent({
__name: "OCascaderPanel",
props: cascaderPanelProps,
emits: ["change", "update:modelValue"],
setup(__props, { emit: __emit }) {
const selectInject = vue.inject(selectOptionInjectKey, null);
const props = __props;
const emits = __emit;
const _value = vue.ref(props.modelValue);
const inputLabel = vue.ref("");
const cascaderTree = new CascaderTree();
const panelInfo = vue.ref();
const innerExpandTrigger = vue.computed(() => {
if (isTouchDevice) {
return "click";
}
if (props.expandTrigger === "hover" || props.expandTrigger === "click") {
return props.expandTrigger;
}
return "click";
});
const getSelectedInfo = () => {
var _a;
let rlt = {
label: "",
path: []
};
(_a = panelInfo.value) == null ? void 0 : _a.forEach((columnInfo, index) => [
columnInfo.forEach((option) => {
if (option.isActive) {
rlt.label += `${index === 0 ? "" : "/"}${String(option.label)}`;
rlt.path.push(option.value);
}
})
]);
return rlt;
};
const updateOSelectValue = (option) => {
if (selectInject) {
selectInject.registerOption(option);
selectInject.select(option);
}
};
vue.watch(
() => props.options,
(val) => {
if (!isUndefined(val)) {
cascaderTree.updateTree(val);
panelInfo.value = cascaderTree.getPanelInfo(_value.value);
const { label, path } = getSelectedInfo();
inputLabel.value = label;
updateOSelectValue({ label, value: path[path.length - 1] });
}
},
{
immediate: true,
deep: true
}
);
const selectOption = (option, columnInfo) => {
var _a;
while (option.depth < panelInfo.value.length) {
(_a = panelInfo.value) == null ? void 0 : _a.pop();
}
columnInfo.forEach((item) => {
item.isActive = item.value === option.value;
});
const { label, path } = getSelectedInfo();
_value.value = path;
inputLabel.value = label;
if (props.pathMode) {
emits("change", path);
emits("update:modelValue", path);
} else {
emits("change", path[path.length - 1]);
emits("update:modelValue", path[path.length - 1]);
}
updateOSelectValue({ label, value: path[path.length - 1] });
};
const expandOption = (option, columnInfo) => {
var _a;
while (option.depth < panelInfo.value.length) {
(_a = panelInfo.value) == null ? void 0 : _a.pop();
}
columnInfo.forEach((item) => {
item.isActive = item.value === option.value;
});
const node = cascaderTree.getNode(option.value);
if (node) {
panelInfo.value.push(cascaderTree.getColumnInfo(node));
}
};
const onClick = (option, columnInfo) => {
if (!isArray(panelInfo.value)) {
return;
}
if (option.isLeaf) {
selectOption(option, columnInfo);
} else {
if (option.isActive || innerExpandTrigger.value !== "click") {
return;
}
expandOption(option, columnInfo);
}
};
const onMouseenter = (option, columnInfo) => {
if (!isArray(panelInfo.value) || option.isLeaf || option.isActive || innerExpandTrigger.value !== "hover") {
return;
}
expandOption(option, columnInfo);
};
vue.watch(
() => props.modelValue,
(newValue) => {
if (!newValue) return;
panelInfo.value = cascaderTree.getPanelInfo(newValue);
const { path, label } = getSelectedInfo();
inputLabel.value = label;
_value.value = path;
updateOSelectValue({ label, value: path[path.length - 1] });
}
);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Y, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(panelInfo.value, (columnInfo, index) => {
return vue.openBlock(), vue.createElementBlock("ul", {
key: index,
class: "o-cascader-options"
}, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(columnInfo, (option) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: option.value,
class: vue.normalizeClass(["o-cascader-option", { "o-cascader-option-selected": option.isActive }]),
onClick: ($event) => onClick(option, columnInfo),
onMouseenter: ($event) => onMouseenter(option, columnInfo)
}, [
vue.createElementVNode(
"span",
_hoisted_3$u,
vue.toDisplayString(option.label),
1
/* TEXT */
),
!option.isLeaf ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$p, [
vue.createVNode(vue.unref(IconChevronRight))
])) : vue.createCommentVNode("v-if", true)
], 42, _hoisted_2$F);
}),
128
/* KEYED_FRAGMENT */
))
]);
}),
128
/* KEYED_FRAGMENT */
))
]);
};
}
});
const _sfc_main$1q = /* @__PURE__ */ vue.defineComponent({
__name: "OCascader",
props: cascaderProps,
emits: ["change", "update:modelValue"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const handleChange = (val) => {
emits("change", val);
emits("update:modelValue", val);
};
const innerTrigger = vue.computed(() => {
if (!isTouchDevice) {
return props.trigger;
}
if (props.trigger === "hover") {
return "click";
}
if (props.trigger === "hover-outclick") {
return "click-outclick";
}
return props.trigger;
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(OSelect), {
"model-value": props.modelValue,
round: props.round,
variant: props.variant,
placeholder: props.placeholder,
trigger: innerTrigger.value,
"option-position": props.optionPosition,
"option-width-mode": "auto",
"unmount-on-hide": props.unmountOnHide,
transition: props.transition,
"option-wrap-class": vue.unref(mergeClass)("o-cascader", props.optionWrapClass),
size: props.size
}, {
default: vue.withCtx(() => [
vue.createVNode(_sfc_main$1r, {
options: props.options,
"model-value": props.modelValue,
"path-mode": props.pathMode,
"expand-trigger": props.expandTrigger,
onChange: handleChange
}, null, 8, ["options", "model-value", "path-mode", "expand-trigger"])
]),
_: 1
/* STABLE */
}, 8, ["model-value", "round", "variant", "placeholder", "trigger", "option-position", "unmount-on-hide", "transition", "option-wrap-class", "size"]);
};
}
});
const OCascader = Object.assign(_sfc_main$1q, {
OCascaderPanel: _sfc_main$1r,
install(app) {
app.component("OCascader", _sfc_main$1q);
app.component("OCascaderPanel", _sfc_main$1r);
}
});
const checkboxGroupProps = {
/**
* @zh-CN 复选框组双向绑定值
* @en-US checkbox group two-way binding value
*/
modelValue: {
type: Array
},
/**
* @zh-CN 非受控状态时，复选框组默认值
* @en-US Default value when not controlled
*/
defaultValue: {
type: Array,
default: () => []
},
/**
* @zh-CN 是否禁用复选框组
* @en-US Whether to disable the checkbox group
*/
disabled: {
type: Boolean,
default: false
},
/**
* @zh-CN 复选框组布局方向
* @en-US Layout direction of checkbox group
*/
direction: {
type: String,
default: "h"
},
/**
* @zh-CN 最少选择数量
* @en-US Minimum number of selections
*/
min: {
type: Number,
default: void 0
},
/**
* @zh-CN 最多选择数量
* @en-US Maximum number of selections
*/
max: {
type: Number,
default: void 0
}
};
const _sfc_main$1p = /* @__PURE__ */ vue.defineComponent({
__name: "OCheckboxGroup",
props: checkboxGroupProps,
emits: ["update:modelValue", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const realValue = vue.ref(isArray(props.modelValue) ? props.modelValue : props.defaultValue);
const formItemInjection = vue.inject(formItemInjectKey, null);
vue.watch(
() => props.modelValue,
(val) => {
if (isArray(val)) {
realValue.value = val;
}
}
);
const isMinimum = vue.computed(() => isUndefined(props.min) ? false : realValue.value.length <= props.min);
const isMaximum = vue.computed(() => isUndefined(props.max) ? false : realValue.value.length >= props.max);
const updateModelValue = (val) => {
realValue.value = val;
emits("update:modelValue", val);
};
const onChange = (val, ev) => {
var _a, _b;
emits("change", val, ev);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
};
vue.provide(checkboxGroupInjectKey, {
realValue,
disabled: vue.toRef(props, "disabled"),
isMinimum,
isMaximum,
updateModelValue,
onChange
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-checkbox-group", `o-checkbox-group-${props.direction}`])
},
[
vue.renderSlot(_ctx.$slots, "default")
],
2
/* CLASS */
);
};
}
});
const OCheckboxGroup = Object.assign(_sfc_main$1p, {
install(app) {
app.component("OCheckboxGroup", _sfc_main$1p);
}
});
const collapseProps = {
/**
* @zh-CN 是否开启手风琴模式
* @en-US Whether to enable accordion mode
* @default false
*/
accordion: {
type: Boolean,
default: false
},
/**
* @zh-CN 展开的面板，双向绑定值
* @en-US Expanded panel, two-way binding value
*/
modelValue: {
type: Array
},
/**
* @zh-CN 非受控模式时，默认展开的面板值
* @en-US Default value when not controlled
*/
defaultValue: {
type: Array,
default: () => []
}
};
const collapseItemProps = {
/**
* @zh-CN 折叠面板value
* @en-US Collapse panel value
*/
value: {
type: [String, Number],
required: true
},
/**
* @zh-CN 折叠面板标题
* @en-US Collapse panel title
*/
title: {
type: String
}
};
const collapseInjectKey = Symbol("provide-collapse");
const _hoisted_1$X = { class: "o-collapse" };
const _sfc_main$1o = /* @__PURE__ */ vue.defineComponent({
__name: "OCollapse",
props: collapseProps,
emits: ["update:modelValue", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const _innerValue = vue.ref(props.defaultValue);
const computedValue = vue.computed(() => {
const value = props.modelValue ?? _innerValue.value;
if (!isArray(value)) {
return [value];
}
return value;
});
const emitChange = (val, e) => {
vue.nextTick(() => {
if (isArrayEqual(val, computedValue.value)) {
emits("change", computedValue.value, e);
}
});
};
const handleItemClick = (value, e) => {
let realValue = [];
if (props.accordion) {
if (!computedValue.value.includes(value)) {
realValue = [value];
}
} else {
realValue = [...computedValue.value];
const idx = realValue.indexOf(value);
if (idx > -1) {
realValue.splice(idx, 1);
} else {
realValue.push(value);
}
}
_innerValue.value = realValue;
emits("update:modelValue", realValue);
emitChange(realValue, e);
};
vue.provide(collapseInjectKey, {
computedValue,
handleItemClick
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
vue.renderSlot(_ctx.$slots, "default")
]);
};
}
});
const _hoisted_1$W = { class: "o-collapse-item-icon" };
const _hoisted_2$E = {
key: 0,
class: "o-collapse-item-title"
};
const _hoisted_3$t = { class: "o-collapse-item-body" };
const _sfc_main$1n = /* @__PURE__ */ vue.defineComponent({
__name: "OCollapseItem",
props: collapseItemProps,
setup(__props) {
const props = __props;
const collapseInjection = vue.inject(collapseInjectKey, null);
const isExpanded = vue.computed(() => {
if (isUndefined(props.value)) {
return false;
}
if (collapseInjection) {
return collapseInjection.computedValue.value.includes(props.value);
}
return false;
});
const onClick = (evt) => {
evt.stopPropagation();
if (isUndefined(props.value)) {
return;
}
collapseInjection == null ? void 0 : collapseInjection.handleItemClick(props.value, evt);
};
const resetStyle = (el) => {
el.style.maxHeight = "";
el.style.overflow = el.dataset.oldOverflow ?? "";
el.style.marginBottom = el.dataset.oldMarginBottom ?? "";
};
const onBeforeEnter = (el) => {
const target = el;
target.dataset.oldOverflow = target.style.overflow;
target.dataset.oldMarginBottom = target.style.marginBottom;
target.style.maxHeight = "0";
target.style.marginBottom = "0";
target.style.overflow = "hidden";
};
const onEnter = (el) => {
const target = el;
target.style.maxHeight = `${target.scrollHeight !== 0 ? target.scrollHeight : 0}px`;
target.style.marginBottom = target.dataset.oldMarginBottom ?? "";
};
const onAfterEnter = (el) => {
resetStyle(el);
};
const onBeforeLeave = (el) => {
const target = el;
target.dataset.oldOverflow = target.style.overflow;
target.dataset.oldMarginBottom = target.style.marginBottom;
target.style.maxHeight = `${target.scrollHeight}px`;
target.style.overflow = "hidden";
};
const onLeave = (el) => {
const target = el;
if (target.scrollHeight !== 0) {
target.style.maxHeight = "0";
target.style.marginBottom = "0";
}
};
const onAfterLeave = (el) => {
resetStyle(el);
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-collapse-item", { "o-collapse-item-expanded": isExpanded.value }])
},
[
vue.createElementVNode("div", {
class: "o-collapse-item-header",
onClick
}, [
vue.createElementVNode("span", _hoisted_1$W, [
vue.createVNode(vue.unref(IconChevronRight))
]),
props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$E, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.title),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
]),
vue.createVNode(vue.Transition, {
onBeforeEnter,
onEnter,
onAfterEnter,
onBeforeLeave,
onLeave,
onAfterLeave,
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode(
"div",
_hoisted_3$t,
[
vue.renderSlot(_ctx.$slots, "default")
],
512
/* NEED_PATCH */
), [
[vue.vShow, isExpanded.value]
])
]),
_: 3
/* FORWARDED */
})
],
2
/* CLASS */
);
};
}
});
const OCollapse = Object.assign(_sfc_main$1o, {
OCollapseItem: _sfc_main$1n,
install(app) {
app.component("OCollapse", _sfc_main$1o);
app.component("OCollapseItem", _sfc_main$1n);
}
});
const DividerVariantTypes = ["solid", "dashed", "dotted"];
const dividerProps = {
/**
* @zh-CN 分割线形状
* @en-US Divider shape
* @default 'solid'
*/
variant: {
type: String,
default: "solid"
},
/**
* @zh-CN 分割线方向
* @en-US Divider direction
* @default 'h'
*/
direction: {
type: String,
default: "h"
},
/**
* @zh-CN 分割线标签位置
* @en-US Divider label position
* @default 'center'
*/
labelPosition: {
type: String,
default: "center"
},
/**
* @zh-CN 是否使用深色
* @en-US Whether to use dark
* @default false
*/
darker: {
type: Boolean,
default: false
}
};
const _hoisted_1$V = { class: "o-divider-label" };
const _sfc_main$1m = /* @__PURE__ */ vue.defineComponent({
__name: "ODivider",
props: dividerProps,
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
role: "separator",
class: vue.normalizeClass(["o-divider", [
`o-divider-${props.variant}`,
`o-divider-${props.direction}`,
{ "o-divider-darker": props.darker, [`o-divider-label-${props.labelPosition}`]: _ctx.$slots.default }
]])
},
[
props.direction === "h" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_cache[1] || (_cache[1] = vue.createElementVNode(
"div",
{ class: "o-divider-line" },
null,
-1
/* CACHED */
)),
_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createElementVNode("div", _hoisted_1$V, [
vue.renderSlot(_ctx.$slots, "default")
]),
_cache[0] || (_cache[0] = vue.createElementVNode(
"div",
{ class: "o-divider-line" },
null,
-1
/* CACHED */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
const ODivider = Object.assign(_sfc_main$1m, {
install(app) {
app.component("ODivider", _sfc_main$1m);
}
});
const dropdownProps = {
/**
* @zh-CN 弹出框是否可见
* @en-US Is the pop-up box visible
*/
visible: {
type: Boolean
},
/**
* @zh-CN 非受控模式，弹出框是否默认可见
* @en-US In uncontrolled mode, is the pop-up box visible by default
* @default false
*/
defaultVisible: {
type: Boolean,
default: false
},
/**
* @zh-CN 大小
* @en-US Size
* @default 'large'
*/
size: {
type: String,
default: "large"
},
/**
* @zh-CN 圆角值
* @en-US Round
*/
round: {
type: String
},
/**
* @zh-CN 下拉选项触发方式
* @en-US The triggering method of the drop-down option
* @default 'click'
*/
trigger: {
type: String,
default: "click"
},
/**
* @zh-CN 下拉选项位置
* @en-US Drop-down option position
* @default 'bl'
*/
optionPosition: {
type: String,
default: "bl"
},
/**
* @zh-CN 下拉选项宽度自适应规则 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致
* @en-US Drop-down option width adaptation rules: 'auto': automatic; 'min-width': minimum width consistent with the selection box; 'width': width consistent with the selection box
* @default 'min-width'
*/
optionWidthMode: {
type: String,
default: "min-width"
},
/**
* @zh-CN 挂载容器，默认为body
* @en-US Mount the container, with the default being body
* @default 'body'
*/
optionsWrapper: {
type: [String, Object],
default: "body"
},
/**
* @zh-CN 下拉容器自定义类
* @en-US Drop-down container custom class
*/
optionWrapClass: {
type: [String, Array, Object]
},
/**
* @zh-CN 是否在结束选择时，卸载下拉选项
* @en-US Whether to uninstall the drop-down options when ending the selection
* @default true
*/
unmountOnHide: {
type: Boolean,
default: true
},
/**
* @zh-CN 过渡名称
* @en-US Transitional name
*/
transition: {
type: String
}
};
const dropdownItemProps = {
/**
* @zh-CN 选项显示文本
* @en-US The option displays text.
*/
label: {
type: String,
default: ""
},
/**
* @zh-CN 选项选中值
* @en-US Selected value of the option
*/
value: {
type: [String, Number],
default: ""
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable
*/
disabled: {
type: Boolean,
default: false
}
};
const dropdownInjectKey = Symbol("provide-dropdown");
const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
__name: "ODropdown",
props: dropdownProps,
emits: ["update:visible", "visible-change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const dropdownRef = vue.ref();
const isVisible = vue.ref(props.visible ?? props.defaultVisible);
vue.watch(
() => props.visible,
(val) => {
if (!isUndefined(val)) {
isVisible.value = val;
}
}
);
const updateVisible = (val) => {
isVisible.value = val;
emits("update:visible", val);
emits("visible-change", val);
};
vue.watch(isVisible, (val) => {
updateVisible(val);
});
vue.provide(dropdownInjectKey, { updateVisible });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "dropdownRef",
ref: dropdownRef,
class: "o-dropdown"
},
[
vue.renderSlot(_ctx.$slots, "default"),
vue.createVNode(vue.unref(OPopup), {
visible: isVisible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isVisible.value = $event),
transition: props.transition,
"unmount-on-hide": props.unmountOnHide,
position: props.optionPosition,
wrapper: props.optionsWrapper,
target: dropdownRef.value,
trigger: props.trigger,
offset: 4,
"adjust-min-width": props.optionWidthMode === "min-width",
"adjust-width": props.optionWidthMode === "width"
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"ul",
{
class: vue.normalizeClass(["o-dropdown-list", vue.unref(mergeClass)(`o-dropdown-list-${props.size}`, props.optionWrapClass)])
},
[
vue.renderSlot(_ctx.$slots, "dropdown")
],
2
/* CLASS */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "transition", "unmount-on-hide", "position", "wrapper", "target", "trigger", "adjust-min-width", "adjust-width"])
],
512
/* NEED_PATCH */
);
};
}
});
const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
__name: "ODropdownItem",
props: dropdownItemProps,
setup(__props) {
const props = __props;
const dropdownInjection = vue.inject(dropdownInjectKey, null);
const onItemClick = () => {
if (props.disabled) {
return;
}
dropdownInjection == null ? void 0 : dropdownInjection.updateVisible(false);
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"li",
{
class: vue.normalizeClass(["o-dropdown-item", { "o-dropdown-disabled": props.disabled }]),
onClick: onItemClick
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.label || `${props.value}`),
1
/* TEXT */
)
])
],
2
/* CLASS */
);
};
}
});
const ODropdown = Object.assign(_sfc_main$1l, {
ODropdownItem: _sfc_main$1k,
install(app) {
app.component("ODropdown", _sfc_main$1l);
app.component("ODropdownItem", _sfc_main$1k);
}
});
const formProps = {
/**
* @zh-CN 表单数据对象
* @en-US Form data object
*/
model: {
type: Object
},
/**
* @zh-CN 是否有必填项，用于控制文本左对齐样式
* @en-US Whether there is a required item, used to control the text alignment style
* @default false
*/
hasRequired: {
type: Boolean,
default: false
},
/**
* @zh-CN 表单布局方式
* @en-US Form layout
* @default 'h'
*/
layout: {
type: String,
default: "h"
},
/**
* @zh-CN 表单项的标签与控件的对其方式（全局）
* @en-US The alignment of form item labels and controls (global)
*/
labelAlign: {
type: String
},
/**
* @zh-CN 表单项标签水平对齐方式（全局）
* @en-US The horizontal alignment of form item labels (global)
*/
labelJustify: {
type: String
},
/**
* @zh-CN 表单项文本宽度（全局）
* @en-US The width of form item labels (global)
*/
labelWidth: {
type: String
}
};
const formItemProps = {
/**
* @zh-CN model键名，在使用了 rules 属性时，此属性为必填项
* @en-US model key name, when using the rules property, this property is required
*/
field: {
type: String
},
/**
* @zh-CN 是否必选
* @en-US Whether it is required
* @default false
*/
required: {
type: Boolean,
default: false
},
/**
* @zh-CN 表单项标签
* @en-US Form item label
*/
label: {
type: String,
default: void 0
},
/**
* @zh-CN 表单项的标签与控件的对其方式
* @en-US The alignment of form item labels and controls
*/
labelAlign: {
type: String
},
/**
* @zh-CN 表单项标签水平对齐方式
* @en-US The horizontal alignment of form item labels
*/
labelJustify: {
type: String
},
/**
* @zh-CN 表单项文本宽度
* @en-US The width of form item labels
*/
labelWidth: {
type: String
},
/**
* @zh-CN 表单验证规则
* @en-US Form validation rules
*/
rules: {
type: Array
},
/**
* @zh-CN 表单验证的默认触发事件，手动校验未传参或提交前自动校验时的默认触发事件
* @en-US The default trigger event for form validation, and the default trigger event when manual validation is performed without passing parameters or during automatic validation before submission.
*/
defaultTrigger: {
type: String
}
};
function getFlexValue(val) {
if (!val) {
return "";
}
if (["top", "left"].includes(val)) {
return "flex-start";
} else if (["bottom", "right"].includes(val)) {
return "flex-end";
} else if ("center" === val) {
return "center";
}
return "";
}
const defaultCheckRequired = (value) => {
return !isNull(value) && !isUndefined(value) && value !== "" && !isEmptyArray(value) && !isEmptyObject(value) ? "success" : "danger";
};
const defaultCheckType = (value, type) => {
return typeof value === type ? "success" : "danger";
};
function groupRules(rules, required) {
const tRules = {};
let hasRequired = false;
if (isArray(rules)) {
rules.forEach((item) => {
const triggers = item.triggers ? [].concat(item.triggers) : ["change"];
triggers.forEach((trigger2) => {
const tr = tRules[trigger2] || [];
if (item.type) {
tr.push((value) => ({
type: defaultCheckType(value, item.type),
message: item.message
}));
} else if (item.required) {
hasRequired = true;
tr.push((value) => ({
type: defaultCheckRequired(value),
message: item.message
}));
} else {
const fFn = item.validator;
if (fFn && isFunction(fFn)) {
tr.push(fFn);
}
}
tRules[trigger2] = tr;
});
});
}
if (!hasRequired && required) {
tRules.change = tRules.change || [];
tRules.change.push((value) => ({
type: defaultCheckRequired(value),
message: "required!"
}));
}
return tRules;
}
const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
__name: "OForm",
props: formProps,
emits: ["submit", "validate", "clear", "reset"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const align = vue.computed(() => getFlexValue(props.labelAlign));
const justify = vue.computed(() => getFlexValue(props.labelJustify));
const filedList = [];
const doValidate = (filed) => {
const filedNames = filed ? [].concat(filed) : [];
const list = filedList.map((item) => {
if (filedNames.length === 0 || item.filed && filedNames.includes(item.filed)) {
return item.validate ? item.validate() : null;
}
return null;
});
return Promise.all(list).then((rlt) => {
emits("validate", rlt);
return rlt;
});
};
const clearValidate = (filed, onClear) => {
const filedNames = filed ? [].concat(filed) : [];
filedList.forEach((item) => {
if (filedNames.length === 0 || item.filed && filedNames.includes(item.filed)) {
item.clearValidate();
if (isFunction(onClear)) {
onClear(item);
}
}
});
emits("clear", filed);
};
const addFiled = (filedItem) => {
filedList.push(filedItem);
};
const removeFiled = (filed) => {
const idx = filedList.findIndex((item) => item.filed === filed);
filedList.splice(idx, 1);
};
const resetFields = (filed) => {
clearValidate(filed, (item) => {
item.resetFiled();
});
emits("reset", filed);
};
const onSubmit = () => {
doValidate().then((rlt) => {
emits("submit", rlt);
});
};
vue.provide(formInjectKey, {
model: vue.computed(() => props.model),
addFiled,
removeFiled
});
__expose({
/** validate form */
validate: doValidate,
/** reset form */
resetFields,
/** clear validate state */
clearValidate
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"form",
{
class: vue.normalizeClass(["o-form", [
{
"o-form-has-required": props.hasRequired
},
`o-form-layout-${props.layout}`
]]),
style: vue.normalizeStyle({
"--form-label-width": props.labelWidth,
"--form-label-align": props.labelAlign,
"--form-label-justify": justify.value,
"--form-item-align": align.value
}),
onSubmit: vue.withModifiers(onSubmit, ["prevent"])
},
[
vue.renderSlot(_ctx.$slots, "default")
],
38
/* CLASS, STYLE, NEED_HYDRATION */
);
};
}
});
const _hoisted_1$U = { class: "o-form-item-label" };
const _hoisted_2$D = { class: "o-form-item-main" };
const _hoisted_3$s = { class: "o-form-item-main-wrap" };
const _hoisted_4$o = { key: 0 };
const _hoisted_5$l = {
key: 1,
class: "o-form-item-extra"
};
const requireSymbol = "*";
const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
__name: "OFormItem",
props: formItemProps,
setup(__props) {
var _a;
const props = __props;
const formInject = vue.inject(formInjectKey, {});
const align = vue.computed(() => getFlexValue(props.labelAlign));
const justify = vue.computed(() => getFlexValue(props.labelJustify));
const isRequired = vue.computed(() => {
if (props.required) {
return true;
} else if (isArray(props.rules)) {
return props.rules.some((item) => item.required === true);
}
return false;
});
const rules = vue.computed(() => groupRules(props.rules, props.required));
const ruleTriggers = vue.computed(() => {
const t = Object.keys(rules.value);
return moveToFirst(t, "change");
});
const fieldResult = vue.ref(null);
const initialVal = ((_a = formInject.model) == null ? void 0 : _a.value) && props.field ? getValueByPath(formInject.model.value, props.field) : void 0;
const runValidate = async (trigger2) => {
var _a2;
if (!props.field || !((_a2 = formInject.model) == null ? void 0 : _a2.value)) {
return null;
}
const validators = rules.value[trigger2 || props.defaultTrigger || ruleTriggers.value[0]];
if (!validators || validators.length === 0) {
return null;
}
const value = getValueByPath(formInject.model.value, props.field);
fieldResult.value = null;
await asyncSome(validators, async (validatorFn) => {
var _a3;
try {
const rlt = await (validatorFn == null ? void 0 : validatorFn(value));
if ((rlt == null ? void 0 : rlt.type) === "danger") {
fieldResult.value = {
type: "danger",
message: rlt.message ? [rlt.message] : []
};
return true;
} else if ((rlt == null ? void 0 : rlt.type) === "warning") {
if (!fieldResult.value) {
fieldResult.value = {
type: "warning",
message: rlt.message ? [rlt.message] : []
};
} else if (rlt.message) {
(_a3 = fieldResult.value.message) == null ? void 0 : _a3.push(rlt.message);
}
return false;
}
} catch (_e) {
log$1.error("failed to validate rules");
}
});
return fieldResult.value;
};
const clearValidate = () => {
var _a2;
if (!props.field || !((_a2 = formInject.model) == null ? void 0 : _a2.value)) {
return;
}
fieldResult.value = null;
};
const resetFiled = () => {
var _a2;
if (((_a2 = formInject.model) == null ? void 0 : _a2.value) && props.field) {
setValueByPath(formInject.model.value, props.field, initialVal);
}
};
const fieldHandlers = {
runValidate,
onChange() {
runValidate("change");
},
onFocus() {
runValidate("focus");
},
onInput() {
runValidate("input");
},
onBlur() {
runValidate("blur");
}
};
vue.onMounted(() => {
var _a2;
if (props.field) {
(_a2 = formInject.addFiled) == null ? void 0 : _a2.call(formInject, {
filed: props.field,
validate: runValidate,
clearValidate,
resetFiled
});
}
});
vue.onBeforeUnmount(() => {
var _a2;
if (props.field) {
(_a2 = formInject.removeFiled) == null ? void 0 : _a2.call(formInject, props.field);
}
});
vue.provide(formItemInjectKey, {
fieldHandlers,
fieldResult
});
return (_ctx, _cache) => {
var _a2, _b, _c, _d, _e;
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-form-item", [
{
"o-form-item-required": isRequired.value,
"o-form-item-danger": ((_a2 = fieldResult.value) == null ? void 0 : _a2.type) === "danger",
"o-form-item-warning": ((_b = fieldResult.value) == null ? void 0 : _b.type) === "warning"
}
]]),
style: vue.normalizeStyle({
"--form-label-width": props.labelWidth,
"--form-label-align": align.value,
"--form-label-justify": justify.value
})
},
[
vue.createElementVNode("div", _hoisted_1$U, [
vue.createElementVNode(
"span",
{
class: vue.normalizeClass(["o-form-require-symbol", {
visible: isRequired.value
}])
},
[
vue.renderSlot(_ctx.$slots, "symbol", {}, () => [
vue.createTextVNode(vue.toDisplayString(requireSymbol))
])
],
2
/* CLASS */
),
vue.renderSlot(_ctx.$slots, "label", {}, () => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(props.label),
1
/* TEXT */
)
])
]),
vue.createElementVNode("div", _hoisted_2$D, [
vue.createElementVNode("div", _hoisted_3$s, [
vue.renderSlot(_ctx.$slots, "default")
]),
((_c = fieldResult.value) == null ? void 0 : _c.message) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-form-item-message", `type-${fieldResult.value.type}`])
},
[
vue.renderSlot(_ctx.$slots, "message", {
message: (_d = fieldResult.value) == null ? void 0 : _d.message,
type: (_e = fieldResult.value) == null ? void 0 : _e.type
}, () => {
var _a3, _b2, _c2;
return [
!vue.unref(isArray)((_a3 = fieldResult.value) == null ? void 0 : _a3.message) ? (vue.openBlock(), vue.createElementBlock(
"div",
_hoisted_4$o,
vue.toDisplayString((_b2 = fieldResult.value) == null ? void 0 : _b2.message),
1
/* TEXT */
)) : (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList((_c2 = fieldResult.value) == null ? void 0 : _c2.message, (item) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{ key: item },
vue.toDisplayString(item),
1
/* TEXT */
);
}),
128
/* KEYED_FRAGMENT */
))
];
})
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
_ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$l, [
vue.renderSlot(_ctx.$slots, "extra")
])) : vue.createCommentVNode("v-if", true)
])
],
6
/* CLASS, STYLE */
);
};
}
});
const OForm = Object.assign(_sfc_main$1j, {
OFormItem: _sfc_main$1i,
install(app) {
app.component("OForm", _sfc_main$1j);
app.component("OFormItem", _sfc_main$1i);
}
});
const rowProps = {
/**
* @zh-CN display是否为inline-flex
* @en-US display is inline-flex
*/
inline: {
type: Boolean
},
/**
* @zh-CN 同 align-items
* @en-US Same as align-items
*/
align: {
type: String
},
/**
* @zh-CN 同 justify-content
* @en-US Same as justify-content
*/
justify: {
type: String
},
/**
* @zh-CN 同 flex-wrap
* @en-US Same as flex-wrap
* @default 'wrap'
*/
wrap: {
type: String,
default: "wrap"
},
/**
* @zh-CN 同 flex-direction
* @en-US Same as flex-direction
*/
direction: {
type: String
},
/**
* @zh-CN 同 gap
* @en-US Same as gap
*/
gap: {
type: String
},
/**
* @zh-CN 同 column-gap
* @en-US Same as column-gap
*/
gapX: {
type: String
},
/**
* @zh-CN 同 row-gap
* @en-US Same as row-gap
*/
gapY: {
type: String
},
/**
* @zh-CN 该断点下的gap值
* @en-US The gap value at this breakpoint
* @media (max-width: 1680px)
*/
pcS: {
type: Object
},
/**
* @zh-CN 该断点下的gap值
* @en-US The gap value at this breakpoint
* @media (max-width: 1440px)
*/
laptop: {
type: Object
},
/**
* @zh-CN 该断点下的gap值
* @en-US The gap value at this breakpoint
* @media (max-width: 1200px)
*/
pad: {
type: Object
},
/**
* @zh-CN 该断点下的gap值
* @en-US The gap value at this breakpoint
* @media (max-width: 840px)
*/
padV: {
type: Object
},
/**
* @zh-CN 该断点下的gap值
* @en-US The gap value at this breakpoint
* @media (max-width: 600px)
*/
phone: {
type: Object
}
};
const colProps = {
/**
* @zh-CN 同 flex
* @en-US Same as flex
* @default '1 0 auto'
*/
flex: {
type: String,
default: "1 0 auto"
},
/**
* @zh-CN 同 align-self
* @en-US Same as align-self
*/
align: {
type: String
},
/**
* @zh-CN 该断点下的flex值
* @en-US The flex value at this breakpoint
* @media (max-width: 1680px)
*/
pcS: {
type: Object
},
/**
* @zh-CN 该断点下的flex值
* @en-US The flex value at this breakpoint
* @media (max-width: 1440px)
*/
laptop: {
type: Object
},
/**
* @zh-CN 该断点下的flex值
* @en-US The flex value at this breakpoint
* @media (max-width: 1200px)
*/
pad: {
type: Object
},
/**
* @zh-CN 该断点下的flex值
* @en-US The flex value at this breakpoint
* @media (max-width: 840px)
*/
padV: {
type: Object
},
/**
* @zh-CN 该断点下的flex值
* @en-US The flex value at this breakpoint
* @media (max-width: 600px)
*/
phone: {
type: Object
}
};
const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
__name: "ORow",
props: rowProps,
setup(__props) {
const props = __props;
const getMediaGap = (opts) => {
if (!opts) {
return;
}
const { gapX, gapY, gap: gapXY } = opts;
let gx = gapX;
let gy = gapY;
if (gapXY) {
const [x, y] = gapXY.split(" ");
gx = gx ?? x;
gy = gy ?? y ?? gx;
}
return {
x: gx === "auto" ? void 0 : gx,
y: gy === "auto" ? void 0 : gy
};
};
const gap = vue.computed(() => {
return getMediaGap(props);
});
const xlGap = vue.computed(() => {
return getMediaGap(props.pcS);
});
const lgGap = vue.computed(() => {
return getMediaGap(props.laptop);
});
const mdGap = vue.computed(() => {
return getMediaGap(props.pad);
});
const smGap = vue.computed(() => {
return getMediaGap(props.padV);
});
const xsGap = vue.computed(() => {
return getMediaGap(props.phone);
});
return (_ctx, _cache) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-row", {
"o-row-phone": !!props.phone,
"o-row-pad-v": !!props.padV,
"o-row-pad": !!props.pad,
"o-row-laptop": !!props.laptop,
"o-row-pc-s": !!props.pcS
}]),
style: vue.normalizeStyle({
justifyContent: props.justify,
flexDirection: props.direction,
alignItems: props.align,
flexWrap: props.wrap,
"--row-gap-x": (_a = gap.value) == null ? void 0 : _a.x,
"--row-gap-y": (_b = gap.value) == null ? void 0 : _b.y,
"--row-phone-gap-x": (_c = xsGap.value) == null ? void 0 : _c.x,
"--row-phone-gap-y": (_d = xsGap.value) == null ? void 0 : _d.y,
"--row-pad-v-gap-x": (_e = smGap.value) == null ? void 0 : _e.x,
"--row-pad-v-gap-y": (_f = smGap.value) == null ? void 0 : _f.y,
"--row-pad-gap-x": (_g = mdGap.value) == null ? void 0 : _g.x,
"--row-pad-gap-y": (_h = mdGap.value) == null ? void 0 : _h.y,
"--row-laptop-gap-x": (_i = lgGap.value) == null ? void 0 : _i.x,
"--row-laptop-gap-y": (_j = lgGap.value) == null ? void 0 : _j.y,
"--row-pc-s-gap-x": (_k = xlGap.value) == null ? void 0 : _k.x,
"--row-pc-s-gap-y": (_l = xlGap.value) == null ? void 0 : _l.y
})
},
[
vue.renderSlot(_ctx.$slots, "default")
],
6
/* CLASS, STYLE */
);
};
}
});
const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
__name: "OCol",
props: colProps,
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
var _a, _b, _c, _d, _e;
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-col", {
"o-col-phone": !!props.phone,
"o-col-pad-v": !!props.padV,
"o-col-pad": !!props.pad,
"o-col-laptop": !!props.laptop,
"o-col-pc-s": !!props.pcS
}]),
style: vue.normalizeStyle({
alignSelf: props.align,
"--col-flex": props.flex,
"--col-phone-flex": (_a = props.phone) == null ? void 0 : _a.flex,
"--col-pad-v-flex": (_b = props.padV) == null ? void 0 : _b.flex,
"--col-pad-flex": (_c = props.pad) == null ? void 0 : _c.flex,
"--col-laptop-flex": (_d = props.laptop) == null ? void 0 : _d.flex,
"--col-pc-s-flex": (_e = props.pcS) == null ? void 0 : _e.flex
})
},
[
vue.renderSlot(_ctx.$slots, "default")
],
6
/* CLASS, STYLE */
);
};
}
});
const ORow = Object.assign(_sfc_main$1h, {
OCol: _sfc_main$1g,
install(app) {
app.component("ORow", _sfc_main$1h);
app.component("OCol", _sfc_main$1g);
}
});
const inInputProps = {
/**
* @zh-CN 输入框的值 v-model
* @en-US The value of the input box
*/
modelValue: {
type: String
},
/**
* @zh-CN 输入框的默认值,非受控
* @en-US The default value of the input box.Uncontrolled.
*/
defaultValue: {
type: String
},
/**
* @zh-CN 输入文本类型
* @en-US Input text type.
* @default 'text'
*/
type: {
type: String,
default: "text"
},
/**
* @zh-CN 提示文本
* @en-US Prompt text.
*/
placeholder: {
type: String
},
/**
* @zh-CN input id, 用于label关联
* @en-US Input id, used for label association.
*/
inputId: {
type: String
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable.
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 是否只读
* @en-US Readonly.
*/
readonly: {
type: Boolean
},
/**
* @zh-CN 是否调起虚拟键盘
* @en-US Whether to invoke the virtual keyboard.
*/
noKeyboard: {
type: Boolean
},
/**
* @zh-CN 是否可以清除
* @en-US clearable.
*/
clearable: {
type: Boolean
},
/**
* @zh-CN 最小字符长度
* @en-US Minimum character length.
*/
minLength: {
type: Number
},
/**
* @zh-CN 最大字符长度
* @en-US Maximum character length.
*/
maxLength: {
type: Number
},
/**
* @zh-CN 是否显示字符长度信息，always: 一直显示； never：不显示；auto：设置了minLength、maxLength时显示
* @en-US if not show character length.
*/
showLength: {
type: [String, Function],
default: "auto"
},
/**
* @zh-CN 获取长度方法
* @en-US Method for getting length.
*/
getLength: {
type: Function
},
/**
* @zh-CN 超过最大字符长度时是否允许输入，当为false时，输入长度超出maxLength会被截断
* @en-US Whether input is allowed when the maximum character length is exceeded.
* @default true
*/
inputOnOutlimit: {
type: Boolean,
default: true
},
/**
* @zh-CN 对值格式化，控制显示格式
* @en-US Format the values and control the display format.
*/
format: {
type: Function
},
/**
* @zh-CN 判断值的有效性
* @en-US The validity of the judgement value.
*/
validate: {
type: Function
},
/**
* @zh-CN 输入为无效值时，在blur/pressEnter时的回调，返回值为纠正后的值；当输入值不合法时的处理方式：[true]：纠正为上一次合法的值(如果上一次合法值为空字符串，则不处理); [false|undefined]: 不处理；[function]: 使用函数的返回值
* @en-US When the input value is an invalid value, the callback during blur/pressEnter returns the corrected value.
*/
valueOnInvalidChange: {
type: [Boolean, Function]
},
/**
* @zh-CN 显示密码的方式
* @en-US The way to display the password.
* @default 'pointerdown'
*/
showPasswordEvent: {
type: String,
default: "pointerdown"
},
/**
* @zh-CN 是否自动适配内容宽度
* @en-US Whether the content width is automatically adapted.
*/
autoWidth: {
type: Boolean
},
/**
* @zh-CN 密码单个字符占位符
* @en-US A single-character placeholder for a password.
* @default '\u2022'
*/
passwordPlaceholder: {
type: String,
default: "•"
},
/**
* @zh-CN 是否限制仅数字输入
* @en-US Limit only numeric input.
*/
onlyNumericInput: {
type: Boolean
}
};
const inBoxProps = {
/**
* 大小 SizeT
*/
size: {
type: String
},
/**
* 圆角值 RoundT
*/
round: {
type: String
},
/**
* 颜色类型 Color2T
*/
color: {
type: String,
default: "normal"
},
/**
* 按钮类型 VariantT
*/
variant: {
type: String,
default: "outline"
},
/**
* 是否聚焦
*/
focused: {
type: Boolean
},
/**
* 是否禁用
*/
disabled: {
type: Boolean
},
/**
* 是否只读
*/
readonly: {
type: Boolean
}
};
const { size: size$4, round: round$6, color: color$6, variant: variant$6 } = inBoxProps;
const inputProps = {
...inInputProps,
/**
* @zh-CN 大小
* @en-US Size
*/
size: size$4,
/**
* @zh-CN 圆角值
* @en-US Round
*/
round: round$6,
/**
* @zh-CN 输入框颜色
* @en-US Color
* @default 'normal'
*/
color: color$6,
/**
* @zh-CN 输入框类型
* @en-US variant
* @default 'outline'
*/
variant: variant$6,
/**
* @zh-CN 输入框的值 v-model
* @en-US The value of the input box
*/
modelValue: {
type: [String, Number]
},
/**
* @zh-CN 输入框的默认值,非受控
* @en-US The default value of the input box.Uncontrolled.
*/
defaultValue: {
type: [String, Number]
}
};
const innerComponentInjectKey = Symbol("provide-inner-component");
function useComposition({ el } = {}) {
const isComposing = vue.ref(false);
const onCompositionStart = () => {
isComposing.value = true;
};
const onCompositionEnd = (e) => {
if (!isComposing.value) {
return;
}
isComposing.value = false;
trigger$1(e.target, "input");
};
vue.onMounted(() => {
if (!(el == null ? void 0 : el.value)) {
return;
}
el.value.addEventListener("compositionstart", onCompositionStart);
el.value.addEventListener("compositionend", onCompositionEnd);
});
vue.onUnmounted(() => {
if (!(el == null ? void 0 : el.value)) {
return;
}
el.value.removeEventListener("compositionstart", onCompositionStart);
el.value.removeEventListener("compositionend", onCompositionEnd);
});
return {
isComposing,
onCompositionStart,
onCompositionEnd
};
}
const Enter = {
key: "Enter"
};
const Backspace = {
key: "Backspace"
};
const Tab = {
key: "Tab"
};
const ArrowUp = {
key: "ArrowUp"
};
const ArrowDown = {
key: "ArrowDown"
};
const ArrowLeft = {
key: "ArrowLeft"
};
const ArrowRight = {
key: "ArrowRight"
};
const Home = {
key: "Home"
};
const End = {
key: "End"
};
const pageDown = {
key: "PageDown"
};
const pageUp = {
key: "PageUp"
};
function useInput(options) {
const {
modelValue: modelValue2,
defaultValue,
format: format2,
emits,
emitUpdate,
validate,
valueOnInvalidChange,
maxLength,
minLength,
showLength,
calculateLength,
inputOnOutlimit,
onlyNumericInput
} = options;
const formatFn = (v) => {
return isFunction(format2) ? format2(v) : v;
};
const calculateStringLength = (v) => {
return isFunction(calculateLength) ? calculateLength(v) : v == null ? void 0 : v.length;
};
const uncontrolledValue = vue.ref(defaultValue);
const controlledValue = modelValue2;
const computedValue = vue.computed(() => {
const cv = controlledValue == null ? void 0 : controlledValue.value;
const ucv = uncontrolledValue.value ?? "";
return cv ?? ucv;
});
const displayValue = vue.ref(formatFn(computedValue.value));
const inputValueLength = vue.computed(() => {
return calculateStringLength(computedValue.value);
});
const validateMaxLength = (length) => {
if (!isNumber(maxLength == null ? void 0 : maxLength.value)) {
return true;
}
return length <= maxLength.value;
};
const validateMinLength = (length) => {
if (!isNumber(minLength == null ? void 0 : minLength.value)) {
return true;
}
return length >= minLength.value;
};
const validateLengthFn = (value) => {
const len = calculateStringLength(value);
return validateMaxLength(len) && validateMinLength(len);
};
const isOutLengthLimit = vue.computed(() => {
return !validateLengthFn(computedValue.value);
});
const mergedValidateFn = (v) => {
const r = validateLengthFn(v);
if (r && isFunction(validate)) {
return validate(v);
}
return r;
};
const inputEl = vue.ref();
const composition = useComposition({ el: inputEl });
const isFocus = vue.ref(false);
const isValid = vue.ref(true);
const validateValue = (value) => {
isValid.value = value === "" ? true : mergedValidateFn(value);
return isValid.value;
};
vue.watch(
() => [maxLength == null ? void 0 : maxLength.value, minLength == null ? void 0 : minLength.value],
() => {
validateValue(computedValue.value);
}
);
let lastValidValue = validateValue(computedValue.value) ? computedValue.value : "";
let lastValue = computedValue.value;
vue.watch(
() => computedValue.value,
(val) => {
if (!isUndefined(val) && validateValue(val)) {
lastValidValue = val;
}
if (isFocus.value) {
displayValue.value = val;
} else {
displayValue.value = formatFn(val);
}
}
);
const updateValue = (value) => {
uncontrolledValue.value = value;
if (value !== computedValue.value) {
emitUpdate(value);
}
};
const getValidValue = () => {
let validVal = computedValue.value;
if (!isValid.value) {
if (isFunction(valueOnInvalidChange)) {
validVal = valueOnInvalidChange(computedValue.value, lastValidValue);
validateValue(validVal);
} else if (valueOnInvalidChange === true && lastValidValue !== "") {
validVal = lastValidValue;
isValid.value = true;
}
}
return validVal;
};
const emitChange = (value) => {
if (value !== lastValue) {
vue.nextTick(() => {
emits("change", computedValue.value, lastValue);
lastValue = computedValue.value;
});
}
};
const keepNativeDisplayValue = () => {
if (inputEl.value && inputEl.value.value !== displayValue.value) {
inputEl.value.value = displayValue.value;
}
};
const isAllowedToInputOnOutLimit = (value) => {
if (!isUndefined(maxLength == null ? void 0 : maxLength.value) && (inputOnOutlimit == null ? void 0 : inputOnOutlimit.value) === true) {
return true;
}
const len = calculateStringLength(value);
const isLower = validateMaxLength(len);
if (isLower) {
return true;
}
if (len < calculateStringLength(computedValue.value)) {
return true;
}
return false;
};
const basicValidRegex = /^-?\d*\.?\d*$/;
const invalidFormatRegex = /-{2,}|\.{2,}|^-\.$|^-\.\d+$/;
const handleInput = (e) => {
var _a;
let value = (_a = e.target) == null ? void 0 : _a.value;
const currentValue = value;
if ((onlyNumericInput == null ? void 0 : onlyNumericInput.value) && !basicValidRegex.test(currentValue) || invalidFormatRegex.test(currentValue)) {
value = displayValue.value;
}
if (composition.isComposing.value) {
displayValue.value = value;
return;
}
let newValue = value;
if (!isAllowedToInputOnOutLimit(value)) {
newValue = value.substring(0, maxLength == null ? void 0 : maxLength.value);
}
updateValue(newValue);
emits("input", e, value);
vue.nextTick(() => {
keepNativeDisplayValue();
});
};
const handleFocus = (e) => {
if (isFocus.value) {
return;
}
isFocus.value = true;
if (format2) {
displayValue.value = computedValue.value;
}
emits("focus", e);
};
const handleBlur = (e) => {
isFocus.value = false;
const validValue = getValidValue();
updateValue(validValue);
emitChange(validValue);
displayValue.value = formatFn(computedValue.value);
emits("blur", e);
};
const handlePressEnter = (e) => {
const keyCode = e.key || e.code;
if (!composition.isComposing.value && keyCode === Enter.key) {
const validValue = getValidValue();
updateValue(validValue);
emitChange(validValue);
emits("pressEnter", e);
}
};
const clearValue = () => {
displayValue.value = "";
isValid.value = true;
updateValue("");
emitChange("");
emits("clear");
};
const handleClear = (e) => {
e.stopPropagation();
e.preventDefault();
clearValue();
};
const isShowLength = vue.computed(() => {
if ((showLength == null ? void 0 : showLength.value) === "never") {
return false;
}
if ((showLength == null ? void 0 : showLength.value) === "always") {
return true;
}
const isSetLimit = !isUndefined(maxLength == null ? void 0 : maxLength.value) || !isUndefined(minLength == null ? void 0 : minLength.value);
if ((showLength == null ? void 0 : showLength.value) === "auto" && isSetLimit) {
return true;
}
return false;
});
return {
realValue: vue.computed(() => computedValue.value),
displayValue: vue.computed(() => displayValue.value),
isValid,
inputEl,
clearValue,
isFocus,
inputValueLength,
isShowLength,
isOutLengthLimit,
handleInput,
handleFocus,
handleBlur,
handlePressEnter,
handleClear
};
}
function useInputPassword(options) {
const showPassword = vue.ref(true);
vue.watchEffect(() => {
showPassword.value = options.type.value !== "password";
});
const toggle = (show) => {
if (show === void 0) {
showPassword.value = !showPassword.value;
} else {
showPassword.value = show;
}
};
const onEyeClick = () => {
if (options.disabled.value) {
return;
}
if (options.showPasswordEvent === "click") {
toggle();
}
};
const onEyeMouseUp = () => {
if (showPassword.value) {
toggle(false);
if (isTouchDevice) {
window.removeEventListener("touchend", onEyeMouseUp);
window.removeEventListener("touchcancel", onEyeMouseUp);
} else {
window.removeEventListener("mouseup", onEyeMouseUp);
}
}
};
const onEyeMouseDown = () => {
if (options.disabled.value) {
return;
}
if (options.showPasswordEvent === "pointerdown") {
toggle(true);
if (isTouchDevice) {
window.addEventListener("touchend", onEyeMouseUp);
window.addEventListener("touchcancel", onEyeMouseUp);
} else {
window.addEventListener("mouseup", onEyeMouseUp);
}
}
};
return {
showPassword,
onEyeMouseDown,
onEyeMouseUp,
onEyeClick
};
}
const _hoisted_1$T = ["for"];
const _hoisted_2$C = ["date-value"];
const _hoisted_3$r = ["id", "value", "type", "placeholder", "readonly", "disabled"];
const _hoisted_4$n = {
key: 0,
class: "o_input-suffix-icon"
};
const _hoisted_5$k = ["innerHTML"];
const _hoisted_6$a = { key: 1 };
const _hoisted_7$6 = { key: 4 };
const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
__name: "InInput",
props: inInputProps,
emits: ["update:modelValue", "change", "input", "focus", "blur", "clear", "pressEnter"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const slots = vue.useSlots();
const emits = __emit;
const { t } = useI18n();
const { isPhonePad } = useScreen();
const { disabled: disabled2, type, modelValue: modelValue2, inputOnOutlimit, maxLength, minLength, showLength, onlyNumericInput } = vue.toRefs(props);
const {
displayValue,
clearValue: clear,
isValid,
inputValueLength,
isShowLength,
isOutLengthLimit,
handleBlur,
handleInput,
handleFocus,
handlePressEnter,
handleClear,
inputEl,
isFocus
} = useInput({
emits,
maxLength,
minLength,
showLength,
inputOnOutlimit,
modelValue: modelValue2,
defaultValue: props.defaultValue ?? "",
emitUpdate: (value) => {
emits("update:modelValue", value);
},
format: props.format,
validate: props.validate,
valueOnInvalidChange: props.valueOnInvalidChange,
calculateLength: props.getLength,
onlyNumericInput
});
const { showPassword, onEyeMouseDown, onEyeClick } = useInputPassword({
type,
disabled: disabled2,
showPasswordEvent: props.showPasswordEvent
});
const inputType = vue.ref(props.type);
const togglePassword = (visible) => {
if (isUndefined(visible)) {
if (inputType.value === "text") {
inputType.value = "password";
} else {
inputType.value = "text";
}
} else {
inputType.value = visible ? "text" : "password";
}
};
vue.watchEffect(() => {
togglePassword(showPassword.value);
});
const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly);
const focus = () => {
var _a;
(_a = inputEl.value) == null ? void 0 : _a.focus();
};
const blur = () => {
var _a;
(_a = inputEl.value) == null ? void 0 : _a.blur();
};
const autoWidth2 = vue.computed(() => props.autoWidth);
const mirrorValue = vue.computed(() => {
if (props.type === "password") {
return displayValue.value.replace(/./g, props.passwordPlaceholder);
}
return displayValue.value;
});
__expose({
inputEl,
focus,
blur,
clear,
togglePassword
});
return (_ctx, _cache) => {
var _a, _b, _c, _d, _e;
return vue.openBlock(), vue.createElementBlock("label", {
class: vue.normalizeClass(["o_input", {
"o_input-clearable": isClearable.value && vue.unref(displayValue) !== "",
"o_input-clearable-focus": isClearable.value && vue.unref(displayValue) !== "" && vue.unref(isFocus),
"o_input-disabled": props.disabled,
"o_input-readonly": props.readonly,
"o_input-password": props.type === "password",
"o_input-invalid": !vue.unref(isValid),
"o_input-auto-width": autoWidth2.value
}]),
for: props.inputId
}, [
((_a = slots.prefix) == null ? void 0 : _a.call(slots)) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: "o_input-prefix",
onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.renderSlot(_ctx.$slots, "prefix")
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(["o_input-wrap", { "o_input-wrap-auto-width": autoWidth2.value }]),
"date-value": mirrorValue.value
}, [
vue.createElementVNode("input", {
id: props.inputId,
ref_key: "inputEl",
ref: inputEl,
class: "o_input-input",
value: vue.unref(displayValue),
type: inputType.value,
placeholder: props.placeholder,
readonly: props.readonly || vue.unref(isPhonePad) && props.noKeyboard,
disabled: props.disabled,
onFocus: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
onBlur: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args)),
onInput: _cache[3] || (_cache[3] = //@ts-ignore
(...args) => vue.unref(handleInput) && vue.unref(handleInput)(...args)),
onKeydown: _cache[4] || (_cache[4] = //@ts-ignore
(...args) => vue.unref(handlePressEnter) && vue.unref(handlePressEnter)(...args))
}, null, 40, _hoisted_3$r)
], 10, _hoisted_2$C),
((_b = slots.suffix) == null ? void 0 : _b.call(slots)) || ((_c = slots.extra) == null ? void 0 : _c.call(slots)) || isClearable.value || props.type === "password" || vue.unref(isShowLength) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_input-suffix",
onMousedown: _cache[10] || (_cache[10] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createCommentVNode(" 自定义图标 "),
((_d = slots.suffix) == null ? void 0 : _d.call(slots)) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$n, [
vue.renderSlot(_ctx.$slots, "suffix")
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" 清除图标 "),
isClearable.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_input-clear",
onClick: _cache[5] || (_cache[5] = //@ts-ignore
(...args) => vue.unref(handleClear) && vue.unref(handleClear)(...args)),
onMousedown: _cache[6] || (_cache[6] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createVNode(vue.unref(IconClose), { class: "o_input-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" 密码图标 "),
props.type === "password" ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 2,
class: "o_input-eye",
onClick: _cache[7] || (_cache[7] = vue.withModifiers(
//@ts-ignore
(...args) => vue.unref(onEyeClick) && vue.unref(onEyeClick)(...args),
["prevent", "stop"]
)),
onMousedown: _cache[8] || (_cache[8] = vue.withModifiers(
//@ts-ignore
(...args) => vue.unref(onEyeMouseDown) && vue.unref(onEyeMouseDown)(...args),
["prevent", "stop"]
)),
onTouchstart: _cache[9] || (_cache[9] = vue.withModifiers(
//@ts-ignore
(...args) => vue.unref(onEyeMouseDown) && vue.unref(onEyeMouseDown)(...args),
["stop"]
))
},
[
vue.unref(showPassword) ? (vue.openBlock(), vue.createBlock(vue.unref(IconEyeOn), {
key: 0,
class: "o_input-eye-icon"
})) : (vue.openBlock(), vue.createBlock(vue.unref(IconEyeOff), {
key: 1,
class: "o_input-eye-icon"
}))
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" 长度限制 "),
vue.unref(isShowLength) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 3,
class: vue.normalizeClass(["o_input-limit", { "o_input-limit-error": vue.unref(isOutLengthLimit) }])
},
[
vue.renderSlot(_ctx.$slots, "length", { length: vue.unref(inputValueLength) }, () => [
props.maxLength ?? props.minLength ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
innerHTML: vue.unref(t)("input.limit", vue.unref(inputValueLength), props.maxLength ?? props.minLength)
}, null, 8, _hoisted_5$k)) : (vue.openBlock(), vue.createElementBlock(
"span",
_hoisted_6$a,
vue.toDisplayString(vue.unref(inputValueLength)),
1
/* TEXT */
))
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
((_e = slots.extra) == null ? void 0 : _e.call(slots)) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$6, [
vue.renderSlot(_ctx.$slots, "extra")
])) : vue.createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
], 10, _hoisted_1$T);
};
}
});
const _hoisted_1$S = {
key: 0,
class: "o_box-prepend"
};
const _hoisted_2$B = {
key: 1,
class: "o_box-append"
};
const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
__name: "InBox",
props: inBoxProps,
setup(__props) {
const props = __props;
const round2 = getRoundClass(props, "_box");
return (_ctx, _cache) => {
var _a, _b, _c, _d;
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o_box", [`o_box-${props.color}`, `o_box-${props.variant}`, `o_box-${props.size || vue.unref(defaultSize)}`, vue.unref(round2).class.value]]),
style: vue.normalizeStyle(vue.unref(round2).style.value)
},
[
((_b = (_a = _ctx.$slots).prepend) == null ? void 0 : _b.call(_a)) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$S, [
vue.renderSlot(_ctx.$slots, "prepend")
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o_box-main", [
{
"o_box-disabled": props.disabled,
"o_box-readonly": props.readonly,
"o_box-focused": props.focused,
"has-prepend": _ctx.$slots.prepend,
"has-append": _ctx.$slots.append
}
]])
},
[
vue.renderSlot(_ctx.$slots, "default")
],
2
/* CLASS */
),
((_d = (_c = _ctx.$slots).append) == null ? void 0 : _d.call(_c)) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$B, [
vue.renderSlot(_ctx.$slots, "append")
])) : vue.createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
);
};
}
});
const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
__name: "OInput",
props: inputProps,
emits: ["update:modelValue", "change", "input", "blur", "focus", "clear", "pressEnter"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const innerComponentInject = vue.inject(innerComponentInjectKey, null);
const formItemInjection = (innerComponentInject == null ? void 0 : innerComponentInject.isInnerInput) ? null : vue.inject(formItemInjectKey, null);
const inInputRef = vue.ref();
const color2 = vue.computed(() => {
var _a;
if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || "normal";
}
return props.color;
});
const onInput = (e, value) => {
var _a, _b;
emits("input", e, value);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onInput) == null ? void 0 : _b.call(_a);
};
const isFocus = vue.ref(false);
const onFocus = (e) => {
var _a, _b;
if (isFocus.value) {
return;
}
isFocus.value = true;
emits("focus", e);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onFocus) == null ? void 0 : _b.call(_a);
};
const onBlur = (e) => {
var _a, _b;
isFocus.value = false;
emits("blur", e);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onBlur) == null ? void 0 : _b.call(_a);
};
const onPressEnter = (e) => {
emits("pressEnter", e);
};
const onClear = (e) => {
emits("clear", e);
};
const onUpdatedModelValue = (value) => {
emits("update:modelValue", value);
};
const onChange = (value) => {
var _a, _b;
emits("change", value);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
};
const inputId2 = vue.ref(props.inputId);
vue.onMounted(() => {
if (!inputId2.value) {
inputId2.value = uniqueId();
}
});
__expose({
/**
* @zh-CN 聚焦输入框
* @en-US Focus the input
*/
focus: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.focus();
},
/**
* @zh-CN 取消输入框聚焦
* @en-US Blur the input
*/
blur: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.blur();
},
/**
* @zh-CN 清空输入内容
* @en-US Clear the input value
*/
clear: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.clear();
},
/**
* @zh-CN 获取原生 input 元素
* @en-US Get the native input element
*/
inputEl: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.inputEl;
},
/**
* @zh-CN 切换密码显示/隐藏
* @en-US Toggle password visibility
*/
togglePassword: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.togglePassword();
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(
vue.h(
vue.unref(_sfc_main$1e),
{
class: "o-input",
size: props.size,
variant: props.variant,
color: color2.value,
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: isFocus.value
},
{
default: () => vue.h(
vue.unref(_sfc_main$1f),
{
ref: (el) => {
inInputRef.value = el;
},
class: [
"o-input-wrap",
{
"has-suffix": _ctx.$slots.suffix,
"has-prepend": _ctx.$slots.prepend,
"has-append": _ctx.$slots.append
}
],
inputId: inputId2.value,
modelValue: vue.unref(formateToString)(props.modelValue),
defaultValue: vue.unref(formateToString)(props.defaultValue),
...vue.unref(pick)(props, [
"type",
"placeholder",
"disabled",
"readonly",
"clearable",
"format",
"showPasswordEvent",
"validate",
"valueOnInvalidChange",
"autoWidth",
"maxLength",
"minLength",
"getLength",
"inputOnOutlimit",
"showLength",
"onlyNumericInput"
]),
onChange,
onInput,
onFocus,
onBlur,
onPressEnter,
onClear,
"onUpdate:modelValue": onUpdatedModelValue
},
vue.unref(pick)(_ctx.$slots, ["extra", "prefix", "suffix"])
),
...vue.unref(pick)(_ctx.$slots, ["append", "prepend"])
}
)
));
};
}
});
const OInput = Object.assign(_sfc_main$1d, {
install(app) {
app.component("OInput", _sfc_main$1d);
}
});
function string2number(value) {
return value === "" ? NaN : Number(value);
}
function number2string(value) {
return Number.isNaN(value) || isUndefined(value) ? "" : String(value);
}
function isValidNumber(val, min, max, parse) {
if (Number.isNaN(val)) {
return false;
}
const value = isFunction(parse) ? parse(String(val)) : val;
if (isNumber(Number(value))) {
const v = Number(value);
if (!isUndefined(min) && v < min) {
return false;
}
if (!isUndefined(max) && v > max) {
return false;
}
return true;
}
return false;
}
function correctValue(val, lastVal, min, max) {
if (isNumber(val)) {
if (!isUndefined(max) && val > max) {
return max;
}
if (!isUndefined(min) && val < min) {
return min;
}
return val;
}
return lastVal;
}
const { size: size$3, round: round$5, color: color$5, variant: variant$5, placeholder: placeholder$3, readonly: readonly$4, disabled: disabled$3, autoWidth, format: format$1, inputId: inputId$2 } = inputProps;
const InputNumberControlTypes = ["both", "right", "left", "none"];
const inputNumberProps = {
/**
* @zh-CN 数字输入框的值 v-model
* @en-US The value of the input number
*/
modelValue: {
type: Number
},
/**
* @zh-CN 数字输入框的默认值,非受控
* @en-US The default value of the input number, uncontrolled
*/
defaultValue: {
type: Number
},
/**
* @zh-CN 按钮点击时步长
* @en-US Step size when clicking buttons
* @default 1
*/
step: {
type: Number,
default: 1
},
/**
* @zh-CN 最小值
* @en-US Minimum value
*/
min: {
type: Number
},
/**
* @zh-CN 最大值
* @en-US Maximum value
*/
max: {
type: Number
},
/**
* @zh-CN 控制按钮位置
* @en-US Control button position
* @default 'both'
*/
controls: {
type: String,
default: "both"
},
/**
* @zh-CN 是否可以清除
* @en-US Whether the value can be cleared
* @default false
*/
clearable: {
type: Boolean,
default: false
},
/**
* @zh-CN 大小
* @en-US Size
*/
size: size$3,
/**
* @zh-CN 圆角值
* @en-US Round
*/
round: round$5,
/**
* @zh-CN 颜色类型
* @en-US Color type
* @default 'normal'
*/
color: color$5,
/**
* @zh-CN 按钮类型
* @en-US Variant type
* @default 'outline'
*/
variant: variant$5,
/**
* @zh-CN 提示文本
* @en-US Prompt text
*/
placeholder: placeholder$3,
/**
* @zh-CN 是否禁用
* @en-US Whether to disable
*/
disabled: disabled$3,
/**
* @zh-CN 是否只读
* @en-US Readonly
*/
readonly: readonly$4,
/**
* @zh-CN 是否自动适配宽度
* @en-US Whether the width is automatically adapted
*/
autoWidth,
/**
* @zh-CN 对值格式化，控制显示格式
* @en-US Format the value and control the display format
*/
format: format$1,
/**
* @zh-CN 无效值判断
* @en-US Invalid value validation
*/
validate: {
type: Function
},
/**
* @zh-CN input id, 用于label关联
* @en-US Input id, used for label association
*/
inputId: inputId$2,
/**
* @zh-CN 当输入为空字符串时的默认值
* @en-US Default value when the input is empty
*/
clearValue: {
type: Number
}
};
const _hoisted_1$R = { class: "o-input-number-btn-wrap" };
const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
__name: "NumberControl",
props: {
type: {},
addable: { type: Boolean },
reducible: { type: Boolean }
},
emits: ["plus", "minus"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const onControlClick = (type, e) => {
if (type === "plus" && props.addable) {
emits("plus", e);
} else if (type === "minus" && props.reducible) {
emits("minus", e);
}
};
const isDisabledWhenNotBoth = () => {
if (props.type === "plus") {
return !props.addable;
} else if (props.type === "minus") {
return !props.reducible;
}
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [
props.type === "both" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-input-number-btn", [
{
"is-disabled": !props.addable
},
`type-${props.type}`
]]),
tabindex: "-1",
onClick: _cache[0] || (_cache[0] = (e) => onControlClick("plus", e))
},
[
vue.renderSlot(_ctx.$slots, "plus", {}, () => [
vue.createVNode(vue.unref(IconChevronUp), { class: "o-input-number-icon-plus" })
])
],
2
/* CLASS */
),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-input-number-btn minus", {
"is-disabled": !props.reducible
}]),
tabindex: "-1",
onClick: _cache[1] || (_cache[1] = (e) => onControlClick("minus", e))
},
[
vue.renderSlot(_ctx.$slots, "minus", {}, () => [
vue.createVNode(vue.unref(IconChevronDown), { class: "o-input-number-icon-minus" })
])
],
2
/* CLASS */
)
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass(["o-input-number-btn", {
"is-disabled": isDisabledWhenNotBoth()
}]),
tabindex: "-1",
onClick: _cache[2] || (_cache[2] = (e) => onControlClick(props.type, e))
},
[
props.type === "plus" ? vue.renderSlot(_ctx.$slots, "plus", { key: 0 }, () => [
vue.createVNode(vue.unref(IconAdd))
]) : vue.createCommentVNode("v-if", true),
props.type === "minus" ? vue.renderSlot(_ctx.$slots, "minus", { key: 1 }, () => [
vue.createVNode(vue.unref(IconMinus))
]) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
))
]);
};
}
});
const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
__name: "OInputNumber",
props: inputNumberProps,
emits: ["update:modelValue", "change", "input", "blur", "focus", "clear", "pressEnter", "plus", "minus"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const inputValue = vue.ref(number2string(props.modelValue ?? props.defaultValue));
const realValue = vue.ref(props.modelValue ?? props.defaultValue ?? NaN);
let lastValue = realValue.value;
const formItemInjection = vue.inject(formItemInjectKey, null);
const color2 = vue.computed(() => {
var _a;
if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || void 0;
} else {
return props.color;
}
});
vue.watch(
() => props.modelValue,
(val) => {
if (realValue.value !== val) {
inputValue.value = number2string(val);
realValue.value = val ?? 0;
lastValue = realValue.value;
}
}
);
const validate = (value) => {
const val = string2number(value);
let valid = isValidNumber(val, props.min, props.max);
if (valid) {
valid = isFunction(props.validate) ? props.validate(val) : true;
}
return valid;
};
const valueOnInvalidChange = (_, last) => {
return last;
};
const emitChange = () => {
var _a, _b;
if (realValue.value !== lastValue) {
emits("change", realValue.value);
lastValue = realValue.value;
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
}
};
const emitUpdateValue = () => {
emits("update:modelValue", realValue.value);
};
const onInput = (evt) => {
var _a, _b;
emits("input", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onInput) == null ? void 0 : _b.call(_a);
};
const onFocus = (evt) => {
var _a, _b;
emits("focus", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onFocus) == null ? void 0 : _b.call(_a);
};
const onBlur = (evt) => {
var _a, _b;
emits("blur", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onBlur) == null ? void 0 : _b.call(_a);
};
const onPressEnter = (evt) => {
emits("pressEnter", evt);
};
const onChange = (value) => {
realValue.value = string2number(value);
if (isNaN(realValue.value) && isNumber(props.clearValue)) {
realValue.value = props.clearValue;
emitUpdateValue();
}
inputValue.value = number2string(realValue.value);
emitChange();
};
const onUpdateModelValue = (value) => {
inputValue.value = value;
realValue.value = string2number(value);
emitUpdateValue();
};
const addable = vue.computed(() => {
if (props.disabled) {
return false;
}
if (!isUndefined(props.max) && props.max <= realValue.value) {
return false;
}
return true;
});
const reducible = vue.computed(() => {
if (props.disabled) {
return false;
}
if (!isUndefined(props.min) && props.min >= realValue.value) {
return false;
}
return true;
});
const onControlEvent = (type, e) => {
if (props.disabled) {
return;
}
let v = Number.isNaN(realValue.value) ? 0 : realValue.value;
if (type === "plus") {
v += props.step;
} else if (type === "minus") {
v -= props.step;
}
v = correctValue(v, lastValue, props.min, props.max);
realValue.value = v;
inputValue.value = number2string(v);
emitUpdateValue();
emitChange();
if (type === "plus") {
emits("plus", v, e);
} else if (type === "minus") {
emits("minus", v, e);
}
};
vue.provide(innerComponentInjectKey, {
isInnerInput: true
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(OInput), {
"model-value": inputValue.value,
class: vue.normalizeClass(["o-input-number", [props.autoWidth ? "" : `o-input-number-size-${props.size || vue.unref(defaultSize)}`]]),
validate,
"value-on-invalid-change": valueOnInvalidChange,
size: props.size,
placeholder: props.placeholder,
color: color2.value,
variant: props.variant,
round: props.round,
disabled: props.disabled,
readonly: props.readonly,
clearable: props.clearable,
"auto-width": props.autoWidth,
format: props.format,
"input-id": props.inputId,
"only-numeric-input": "",
type: "text",
onInput,
onBlur,
onFocus,
onPressEnter,
onChange,
"onUpdate:modelValue": onUpdateModelValue
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
["both", "left"].includes(props.controls) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.createVNode(_sfc_main$1c, {
class: vue.normalizeClass({ "o-input-control-left": props.controls === "both" }),
type: props.controls === "left" ? "both" : "minus",
addable: addable.value,
reducible: reducible.value,
onMinus: _cache[0] || (_cache[0] = (e) => onControlEvent("minus", e)),
onPlus: _cache[1] || (_cache[1] = (e) => onControlEvent("plus", e))
}, {
plus: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "plus")
]),
minus: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "minus")
]),
_: 3
/* FORWARDED */
}, 8, ["class", "type", "addable", "reducible"])
]),
key: "0"
} : void 0,
["both", "right"].includes(props.controls) ? {
name: "append",
fn: vue.withCtx(() => [
vue.createVNode(_sfc_main$1c, {
class: vue.normalizeClass({ "o-input-control-right": props.controls === "both" }),
type: props.controls === "right" ? "both" : "plus",
addable: addable.value,
reducible: reducible.value,
onMinus: _cache[2] || (_cache[2] = (e) => onControlEvent("minus", e)),
onPlus: _cache[3] || (_cache[3] = (e) => onControlEvent("plus", e))
}, {
plus: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "plus")
]),
minus: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "minus")
]),
_: 3
/* FORWARDED */
}, 8, ["class", "type", "addable", "reducible"])
]),
key: "1"
} : void 0,
_ctx.$slots.prefix ? {
name: "prefix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix")
]),
key: "2"
} : void 0,
_ctx.$slots.suffix ? {
name: "suffix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix")
]),
key: "3"
} : void 0
]), 1032, ["model-value", "class", "size", "placeholder", "color", "variant", "round", "disabled", "readonly", "clearable", "auto-width", "format", "input-id"]);
};
}
});
const OInputNumber = Object.assign(_sfc_main$1b, {
install(app) {
app.component("OInputNumber", _sfc_main$1b);
}
});
const LinkSizeTypes = ["large", "medium", "small", "auto"];
const linkProps = {
/**
* @zh-CN 包含超链接指向的 URL 或 URL 片段
* @en-US Contains the URL or URL fragment pointed to by the hyperlink
*/
href: {
type: String
},
/**
* @zh-CN 指定在何处显示链接的资源
* @en-US Specify where to display the linked resource
*/
target: {
type: String
},
/**
* @zh-CN 路由跳转对象。当使用该参数时，OLink 会渲染为 RouterLink 组件
* @en-US Route jump object. When using this parameter, OLink will render as a RouterLink component
* @since 1.2.4
*/
to: {
type: [String, Object]
},
/**
* @zh-CN 路由跳转时，是否覆盖浏览器历史记录。该参数会作为 RouterLink 的 replace 属性
* @en-US Whether to replace the browser history when routing. This parameter will be used as the replace attribute of RouterLink
* @default false
* @since 1.2.4
*/
replace: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否为loading状态
* @en-US Whether it is in the loading state
*/
loading: {
type: Boolean
},
/**
* @zh-CN 链接颜色
* @en-US Link color
* @default 'normal'
*/
color: {
type: String,
default: "normal"
},
/**
* @zh-CN 尺寸大小
* @en-US size
* @default 'auto'
*/
size: {
type: String,
default: "auto"
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 前缀图标
* @en-US Prefix icon
*/
icon: {
type: Object
},
/**
* @zh-CN 后缀
* @en-US Suffix
*/
suffix: {
type: Boolean
},
/**
* @zh-CN hover时是否显示背景
* @en-US Whether the background is displayed when hovering
*/
hoverBg: {
type: Boolean
},
/**
* @zh-CN hover时是否显示下划线
* @en-US Whether an underline is displayed when hovering
*/
hoverUnderline: {
type: Boolean,
default: true
},
/**
* @zh-CN 元素标签
* @en-US Element tag
* @default 'a'
*/
tag: {
type: String,
default: "a"
},
/**
* @zh-CN 全局配置是否生效
* @en-US Whether the global configuration takes effect
* @default true
*/
global: {
type: Boolean,
default: true
}
};
const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
__name: "OLink",
props: linkProps,
emits: ["click"],
setup(__props, { emit: __emit }) {
const props = __props;
const configProvider = vue.inject(configProviderInjectKey, {});
const $attr = vue.useAttrs();
const emits = __emit;
const onClick = (e) => {
var _a;
if (props.disabled || props.loading) {
e.preventDefault();
return;
}
emits("click", e);
if (props.global) {
(_a = configProvider.link) == null ? void 0 : _a.click(e, props, $attr);
}
};
const linkClass = vue.computed(() => [
{
"o-link-disabled": props.disabled,
"o-link-hover-bg": props.hoverBg,
"o-link-hover-underline": props.hoverUnderline
},
`o-link-${props.color}`,
`o-link-${props.size || defaultSize}`
]);
const $slots = vue.useSlots();
const RouterLink = vue.resolveComponent("RouterLink");
const prefix = () => {
const children = [];
if (props.loading) {
children.push(vue.h(IconLoading.value, { class: "o-rotating" }));
} else if ($slots.icon || props.icon) {
children.push(vue.renderSlot($slots, "icon", {}, () => props.icon ? [vue.h(props.icon)] : []));
}
if (children.length) {
return vue.h("span", { class: "o-link-prefix" }, children);
}
return null;
};
const main = () => {
const children = [];
const slotVnode = vue.renderSlot($slots, "default");
if (props.hoverUnderline) {
children.push(vue.h("span", { class: "o-link-label" }, slotVnode));
} else {
children.push(slotVnode);
}
return vue.h("span", { class: "o-link-main" }, children);
};
const suffix = () => {
if ($slots.suffix || props.suffix) {
return vue.h(
"span",
{ class: "o-link-suffix" },
vue.renderSlot($slots, "suffix", {}, () => props.suffix ? [vue.h(IconLinkArrow.value, { class: "o-link-icon-arrow" })] : [])
);
}
return null;
};
const Link = () => {
const _props = { ...$attr, class: ["o-link", linkClass.value], onClick };
if (props.to && RouterLink) {
_props.to = props.to;
_props.replace = props.replace;
return vue.h(RouterLink, _props, { default: () => [prefix(), main(), suffix()] });
}
if (props.tag === "a") {
_props.href = props.href;
_props.target = props.target;
}
return vue.h(props.tag, _props, { default: () => [prefix(), main(), suffix()] });
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(Link);
};
}
});
const OLink = Object.assign(_sfc_main$1a, {
install(app) {
app.component("OLink", _sfc_main$1a);
}
});
const { maskClose, ...extractProps } = layerProps;
const loadingProps = {
...extractProps,
/**
* @zh-CN loading文本
* @en-US loading text
*/
label: {
type: String
},
/**
* @zh-CN 加载尺寸
* @en-US loading size
*/
size: {
type: String,
default: "small"
},
/**
* @zh-CN 自定义loading图标
* @en-US Custom loading icon
*/
icon: {
type: Object
},
/**
* @zh-CN 自定义loading图标是否旋转
* @en-US Whether the custom loading icon is rotating
*/
iconRotating: {
type: Boolean
}
};
const _hoisted_1$Q = { class: "o-loading-icon" };
const _hoisted_2$A = {
key: 0,
class: "o-loading-label"
};
const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
__name: "OLoading",
props: loadingProps,
emits: ["change", "update:visible"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const layerRef = vue.ref(null);
__expose({
/**
* @zh-CN 切换加载状态显示
* @en-US Toggle loading visibility
*/
toggle(show) {
var _a;
(_a = layerRef.value) == null ? void 0 : _a.toggle(show);
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(OLayer), {
ref_key: "layerRef",
ref: layerRef,
class: vue.normalizeClass(["o-loading", [
`o-loading-${props.size}`
]]),
visible: props.visible,
wrapper: props.wrapper,
"unmount-on-hide": props.unmountOnHide,
"main-class": vue.unref(mergeClass)("o-loading-main", props.mainClass),
"main-transition": props.mainTransition,
"mask-transition": props.maskTransition,
"transition-orign": "css",
mask: props.mask,
"mask-close": false,
onChange: _cache[0] || (_cache[0] = (v) => emits("change", v)),
"onUpdate:visible": _cache[1] || (_cache[1] = (v, e) => emits("update:visible", v, e))
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createElementVNode("div", _hoisted_1$Q, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
props.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.icon), {
key: 0,
class: vue.normalizeClass({ "o-rotating": props.iconRotating })
}, null, 8, ["class"])) : (vue.openBlock(), vue.createBlock(vue.unref(IconLoading), {
key: 1,
class: "o-rotating"
}))
])
]),
_ctx.$slots.label || props.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$A, [
vue.renderSlot(_ctx.$slots, "label", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.label),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
])
]),
_: 3
/* FORWARDED */
}, 8, ["class", "visible", "wrapper", "unmount-on-hide", "main-class", "main-transition", "mask-transition", "mask"]);
};
}
});
let globalLoadingOptions = {};
const setVLoadingOption = (option) => {
globalLoadingOptions = option;
};
const WATCH_HANDLE = Symbol("watch-handle");
const VNODE = Symbol("vnode");
const renderLoading = (el, value, modifiers, shouldWatch) => {
var _a;
const selfOption = {};
if (isObject(value)) {
Object.assign(selfOption, value);
selfOption.wrapper = value.wrapper ?? null;
if (shouldWatch) {
(_a = el[WATCH_HANDLE]) == null ? void 0 : _a.call(el);
el[WATCH_HANDLE] = void 0;
if (vue.isReactive(value)) {
el[WATCH_HANDLE] = vue.watch(value, (newValue) => {
renderLoading(el, newValue, modifiers, false);
});
}
}
} else {
selfOption.visible = value;
selfOption.wrapper = modifiers.body ? "body" : null;
selfOption.mask = !modifiers.nomask;
}
const vnode = vue.h(_sfc_main$19, Object.assign({}, globalLoadingOptions, selfOption));
el[VNODE] = vnode;
vue.render(vnode, el);
};
const vLoading = {
mounted(el, binding) {
renderLoading(el, binding.value, binding.modifiers, true);
},
updated(el, binding) {
var _a, _b, _c;
if (binding.value === binding.oldValue) return;
if (isObject(binding.value)) {
renderLoading(el, binding.value, binding.modifiers, true);
} else {
(_c = (_b = (_a = el[VNODE]) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.toggle(Boolean(binding.value));
}
},
beforeUnmount(el) {
var _a;
(_a = el[WATCH_HANDLE]) == null ? void 0 : _a.call(el);
vue.render(null, el);
el[VNODE] = void 0;
el[WATCH_HANDLE] = void 0;
}
};
const initLoading = (opt2, el) => {
const vnode = vue.h(_sfc_main$19, Object.assign(opt2 || {}, { wrapper: el }));
if (el) {
vue.render(vnode, el);
}
return vnode.component;
};
const useLoading = (opt2, wrap = "body") => {
let instance2 = null;
if (vue.isRef(wrap)) {
vue.watch(
() => wrap.value,
(el) => {
instance2 = initLoading(opt2, el);
},
{
immediate: true
}
);
} else if (wrap.nodeType === 1) {
instance2 = initLoading(opt2, wrap);
} else if (typeof wrap === "string") {
vue.onMounted(() => {
const el = document.querySelector(wrap);
if (el) {
instance2 = initLoading(opt2, el);
}
});
}
return {
toggle(show) {
var _a;
(_a = instance2 == null ? void 0 : instance2.exposed) == null ? void 0 : _a.toggle(show);
}
};
};
const OLoading = Object.assign(_sfc_main$19, {
vLoading,
setVLoadingOption,
useLoading,
install(app) {
app.component("OLoading", _sfc_main$19);
}
});
const menuInjectKey = Symbol("provide-menu");
const subMenuInjectKey = Symbol("provide-sub-menu");
const MenuSizeTypes = ["medium", "small"];
const menuProps = {
/**
* @zh-CN 菜单尺寸
* @en-US Menu size
* @default 'medium'
*/
size: {
type: String,
default: "medium"
},
/**
* @zh-CN 是否开启手风琴模式
* @en-US Whether to enable accordion mode
* @default false
*/
accordion: {
type: Boolean,
default: false
},
/**
* @zh-CN 选中值
* @en-US Selected value
*/
modelValue: {
type: String
},
/**
* @zh-CN 非受控模式时，默认选中值
* @en-US Default selected value when not controlled
* @default ''
*/
defaultValue: {
type: String,
default: ""
},
/**
* @zh-CN 展开节点值
* @en-US Expanded node value
*/
expanded: {
type: Array
},
/**
* @zh-CN 非受控模式时，默认展开节点值
* @en-US Default expanded node value when not controlled
* @default []
*/
defaultExpanded: {
type: Array,
default: () => []
},
/**
* @zh-CN 父子节点是否关联
* @en-US Whether parent and child nodes are associated
* @default false
*/
selectStrictly: {
type: Boolean,
default: false
},
/**
* @zh-CN 折叠箭头的位置
* @en-US Position of the collapse arrow
* @default right
*/
arrowPosition: {
type: String,
default: "right"
}
};
const subMenuProps = {
/**
* @zh-CN 菜单项值
* @en-US Menu item value
*/
value: {
type: String,
required: true
},
/**
* @zh-CN 菜单项是否可选
* @en-US Whether the menu item is selectable
*/
selectable: {
type: Boolean
},
/**
* @zh-CN 前缀图标
* @en-US Prefix icon
*/
icon: {
type: Object
}
};
const menuItemProps = {
/**
* @zh-CN 菜单项值
* @en-US Menu item value
*/
value: {
type: String,
required: true
},
/**
* @zh-CN 前缀图标
* @en-US Prefix icon
*/
icon: {
type: Object
},
/**
* @zh-CN 禁用
* @en-US Disabled
* @default false
*/
disabled: {
type: Boolean,
default: false
}
};
class VTree {
constructor(value, parent, children = []) {
__publicField(this, "root");
this.root = {
value,
parent,
children
};
}
getNode(node, val) {
if (node.value === val) {
return node;
}
const children = node.children;
for (let i = 0, len = children.length; i < len; i++) {
const rlt = this.getNode(children[i], val);
if (rlt) {
return rlt;
}
}
}
getPath(node, val, path) {
const children = node.children;
for (let i = 0, len = children.length; i < len; i++) {
const child = children[i];
if (child.value === val) {
return [...path, child];
}
const rlt = this.getPath(child, val, [...path, child]);
if (rlt) {
return rlt;
}
}
}
hasSameNode(nodes, val) {
return nodes.some((item) => item.value === val);
}
addNode(node) {
const parent = node.parent;
if (!parent) {
if (!this.hasSameNode(this.root.children, node.value)) {
node.parent = this.root;
this.root.children.push(node);
}
} else {
const parentNode = this.getNode(this.root, parent.value);
if (parentNode && !this.hasSameNode(parentNode.children, node.value)) {
node.parent = parentNode;
parentNode.children.push(node);
}
}
}
}
class MenuTree extends VTree {
constructor(value, parent, children = []) {
super(value, parent, children);
}
addChild(options) {
const { value, parentVal } = options;
const node = {
value,
parent: null,
children: []
};
if (isUndefined(parentVal)) {
if (!this.hasSameNode(this.root.children, node.value)) {
node.parent = this.root;
this.root.children.push(node);
}
} else {
const parentNode = this.getNode(this.root, parentVal);
if (parentNode && !this.hasSameNode(parentNode.children, node.value)) {
node.parent = parentNode;
parentNode.children.push(node);
}
}
}
selectNode(val) {
const path = this.getPath(this.root, val, []) || [];
return path.map((node) => {
if (isString(node.value)) {
return node.value;
}
});
}
getSiblings(val) {
const node = this.getNode(this.root, val);
if (!node || !node.parent) {
return [];
}
return node.parent.children.map((item) => {
if (item.value !== val) {
return item.value;
}
});
}
}
const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
__name: "OMenu",
props: menuProps,
emits: ["update:modelValue", "change", "update:expanded", "expanded-change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const menuTree = new MenuTree(NaN, null);
const { size: size2, accordion, modelValue: modelValue2, defaultValue, expanded, defaultExpanded } = vue.toRefs(props);
const innerValue = vue.ref((modelValue2 == null ? void 0 : modelValue2.value) ?? defaultValue.value);
const realValue = vue.computed(() => (modelValue2 == null ? void 0 : modelValue2.value) ?? innerValue.value);
const updateModelValue = (val) => {
innerValue.value = val;
emits("update:modelValue", val);
emits("change", val);
};
const innerExpanded = vue.ref(isArray(expanded == null ? void 0 : expanded.value) ? expanded == null ? void 0 : expanded.value : defaultExpanded.value);
const realExpanded = vue.computed(() => {
if (isArray(expanded == null ? void 0 : expanded.value)) {
return expanded.value;
}
return innerExpanded.value;
});
const activeNodes = vue.ref([]);
const notifyTreeChange = () => {
activeNodes.value = menuTree.selectNode(realValue.value || "");
};
vue.watch(realValue, notifyTreeChange, { flush: "post" });
vue.onMounted(() => notifyTreeChange());
const updateExpanded = (val) => {
innerExpanded.value = val;
emits("update:expanded", val);
emits("expanded-change", val);
};
vue.provide(menuInjectKey, {
size: size2,
accordion,
realValue,
activeNodes,
realExpanded,
menuTree,
notifyTreeChange,
updateModelValue,
updateExpanded,
arrowPosition: vue.toRef(props, "arrowPosition")
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"ul",
{
class: vue.normalizeClass(["o-menu", `o-menu-${vue.unref(size2)}`, _ctx.arrowPosition && `o-menu-arrow-${_ctx.arrowPosition}`])
},
[
vue.renderSlot(_ctx.$slots, "default")
],
2
/* CLASS */
);
};
}
});
const _hoisted_1$P = ["data-level"];
const _hoisted_2$z = {
key: 0,
class: "o-sub-menu-arrow"
};
const _hoisted_3$q = {
key: 1,
class: "o-sub-menu-title-icon"
};
const _hoisted_4$m = {
key: 2,
class: "o-sub-menu-arrow"
};
const _hoisted_5$j = { class: "o-sub-menu-children-wrap" };
const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
__name: "OSubMenu",
props: subMenuProps,
setup(__props) {
const props = __props;
const menuInjection = vue.inject(menuInjectKey, null);
const subMenuInjection = vue.inject(subMenuInjectKey, null);
const { arrowPosition } = menuInjection || {};
const isExpanded = vue.computed(() => {
if (isUndefined(props.value)) {
return false;
}
if (menuInjection) {
return menuInjection.realExpanded.value.includes(props.value);
}
return false;
});
const isAssociatedSelected = vue.computed(() => {
if (menuInjection) {
return menuInjection.activeNodes.value.includes(props.value);
}
return false;
});
const isSelected = vue.computed(() => {
if (menuInjection) {
return menuInjection.realValue.value === props.value;
}
return false;
});
const onSubItemClick = (ev) => {
ev.stopPropagation();
if (isUndefined(props.value)) {
return;
}
let set = menuInjection ? /* @__PURE__ */ new Set([...menuInjection.realExpanded.value]) : /* @__PURE__ */ new Set([]);
if (isExpanded.value && set.has(props.value)) {
set.delete(props.value);
}
if (!isExpanded.value && !set.has(props.value)) {
if (menuInjection == null ? void 0 : menuInjection.accordion.value) {
const siblings = (menuInjection == null ? void 0 : menuInjection.menuTree.getSiblings(props.value)) || [];
siblings.forEach((val) => {
set.delete(val);
});
}
set.add(props.value);
}
const expandedVal = Array.from(set);
menuInjection == null ? void 0 : menuInjection.updateExpanded(expandedVal);
if (props.selectable) {
menuInjection == null ? void 0 : menuInjection.updateModelValue(props.value);
}
};
const currentDepth = subMenuInjection ? subMenuInjection.parentDepth + 1 : 0;
vue.provide(subMenuInjectKey, {
value: props.value,
parentDepth: currentDepth
});
menuInjection == null ? void 0 : menuInjection.menuTree.addChild({
value: props.value,
parentVal: subMenuInjection == null ? void 0 : subMenuInjection.value
});
menuInjection == null ? void 0 : menuInjection.notifyTreeChange();
const subMenuTitleRef = vue.useTemplateRef("subMenuTitleRef");
const itemContentRef = vue.useTemplateRef("itemContentRef");
const isContentOverflow = useElementOverflown(itemContentRef);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("li", {
class: vue.normalizeClass({
"o-sub-menu": true,
"o-sub-menu-selected": isSelected.value,
"o-sub-menu-associated-selected": isAssociatedSelected.value,
"o-sub-menu-expanded": isExpanded.value
}),
style: vue.normalizeStyle({ "--menu-level": vue.unref(currentDepth) }),
"data-level": vue.unref(currentDepth)
}, [
vue.createElementVNode(
"div",
{
ref_key: "subMenuTitleRef",
ref: subMenuTitleRef,
class: "o-sub-menu-title",
onClick: onSubItemClick
},
[
vue.unref(arrowPosition) === "left" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$z, [
vue.createVNode(vue.unref(IconChevronDownBold))
])) : vue.createCommentVNode("v-if", true),
_ctx.$slots.icon || props.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$q, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.icon)))
])
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
ref_key: "itemContentRef",
ref: itemContentRef,
class: "o-sub-menu-title-content"
},
[
vue.renderSlot(_ctx.$slots, "title")
],
512
/* NEED_PATCH */
),
!vue.unref(arrowPosition) || vue.unref(arrowPosition) === "right" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [
vue.createVNode(vue.unref(IconChevronDownBold))
])) : vue.createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
),
vue.createElementVNode(
"ul",
{
class: vue.normalizeClass(["o-sub-menu-children", { expanded: isExpanded.value }])
},
[
vue.createElementVNode("div", _hoisted_5$j, [
vue.renderSlot(_ctx.$slots, "default")
])
],
2
/* CLASS */
),
vue.unref(isContentOverflow) ? (vue.openBlock(), vue.createBlock(vue.unref(OPopover), {
key: 0,
offset: 12,
target: subMenuTitleRef.value,
position: "bottom",
"wrap-class": "o-menu-popover"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "title")
]),
_: 3
/* FORWARDED */
}, 8, ["target"])) : vue.createCommentVNode("v-if", true)
], 14, _hoisted_1$P);
};
}
});
const _hoisted_1$O = ["data-level"];
const _hoisted_2$y = {
key: 0,
class: "o-menu-item-icon"
};
const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
__name: "OMenuItem",
props: menuItemProps,
emits: ["click"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const menuInjection = vue.inject(menuInjectKey, null);
const subMenuInjection = vue.inject(subMenuInjectKey, null);
const isSelected = vue.computed(() => {
if (menuInjection) {
return menuInjection.realValue.value === props.value;
}
return false;
});
const onItemClick = (ev) => {
ev.stopPropagation();
if (props.disabled) {
return;
}
if (isUndefined(props.value)) {
return;
}
emits("click", ev);
menuInjection == null ? void 0 : menuInjection.updateModelValue(props.value);
};
const currentDepth = subMenuInjection ? subMenuInjection.parentDepth + 1 : 0;
menuInjection == null ? void 0 : menuInjection.menuTree.addChild({
value: props.value,
parentVal: subMenuInjection == null ? void 0 : subMenuInjection.value
});
menuInjection == null ? void 0 : menuInjection.notifyTreeChange();
const menuItemRef = vue.useTemplateRef("menuItemRef");
const itemContentRef = vue.useTemplateRef("itemContentRef");
const isContentOverflow = useElementOverflown(itemContentRef);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("li", {
ref_key: "menuItemRef",
ref: menuItemRef,
class: vue.normalizeClass({
"o-menu-item": true,
"o-menu-item-selected": isSelected.value,
"o-menu-item-disabled": _ctx.$props.disabled
}),
style: vue.normalizeStyle({
"--menu-level": vue.unref(currentDepth)
}),
"data-level": vue.unref(currentDepth),
onClick: onItemClick
}, [
props.icon || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$y, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.icon)))
])
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
ref_key: "itemContentRef",
ref: itemContentRef,
class: "o-menu-item-content"
},
[
vue.renderSlot(_ctx.$slots, "default")
],
512
/* NEED_PATCH */
),
vue.unref(isContentOverflow) ? (vue.openBlock(), vue.createBlock(vue.unref(OPopover), {
key: 1,
offset: 12,
target: menuItemRef.value,
position: "bottom",
"wrap-class": "o-menu-popover"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
}, 8, ["target"])) : vue.createCommentVNode("v-if", true)
], 14, _hoisted_1$O);
};
}
});
const OMenu = Object.assign(_sfc_main$18, {
OSubMenu: _sfc_main$17,
OMenuItem: _sfc_main$16,
install(app) {
app.component("OMenu", _sfc_main$18);
app.component("OMenuItem", _sfc_main$16);
app.component("OSubMenu", _sfc_main$17);
}
});
const MessageStatusTypes = ["info", "success", "warning", "danger", "loading"];
const messageProps = {
/**
* @zh-CN 消息是否可见 v-model
* @en-US Message is visible v-model
*/
visible: {
type: Boolean,
default: void 0
},
/**
* @zh-CN 非受控模式，消息是否默认可见
* @en-US Non-controlled mode, message is visible by default
* @default true
*/
defaultVisible: {
type: Boolean,
default: true
},
/**
* @zh-CN 状态
* @en-US Status
* @default 'info'
*/
status: {
type: String,
default: "info"
},
/**
* @zh-CN 是否是彩色背景（跟随 status 变化）
* @en-US Is colored background (follows the status change)
* @default false
*/
colorful: {
type: Boolean,
default: false
},
/**
* @zh-CN 消息显示的持续时间（单位ms）。未设置或小于等于0时，消息将不会自动关闭
* @en-US The duration for which the message is displayed (unit: ms). If not set or less than or equal to 0, the message will not close automatically
*/
duration: {
type: Number
},
/**
* @zh-CN 是否可手动关闭
* @en-US Whether to manually close
* @default false
*/
closable: {
type: Boolean,
default: false
},
/**
* @zh-CN 关闭前的钩子函数
* @en-US Hook function before closing
*/
beforeClose: {
type: Function
},
/**
* @zh-CN 消息标题
* @en-US Message title
*/
title: {
type: String
}
};
const messageListProps = {
/**
* @zh-CN 消息列表位置
* @en-US Message list position
* @default 'top'
*/
position: {
type: String,
default: "top"
},
/**
* @zh-CN 消息列表销毁前的钩子函数
* @en-US Hook function before the message list is destroyed
*/
onDestroy: {
type: Function
}
};
const _hoisted_1$N = { class: "o-message-icon" };
const _hoisted_2$x = { class: "o-message-main" };
const _hoisted_3$p = {
key: 0,
class: "o-message-title"
};
const _hoisted_4$l = { class: "o-message-content" };
const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
__name: "OMessage",
props: messageProps,
emits: ["duration-end", "close", "update:visible"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const slots = vue.useSlots();
const iconMap = {
info: IconInfo.value,
success: IconSuccess.value,
warning: IconWarning.value,
danger: IconDanger.value,
loading: IconLoading.value
};
const icon = vue.computed(() => iconMap[props.status]);
const innerIsVisible = vue.ref(props.visible ?? props.defaultVisible);
const isVisible = vue.computed(() => props.visible ?? innerIsVisible.value);
const emits = __emit;
const hasTitle = vue.computed(() => {
return !isEmptySlot(slots.title) || props.title;
});
const hasContent = vue.computed(() => {
return !isEmptySlot(slots.default);
});
const isOnlyTitle = vue.computed(() => {
return hasTitle.value && !hasContent.value && props.colorful;
});
const isOnlyContent = vue.computed(() => {
return hasContent.value && !hasTitle.value && props.colorful;
});
let timer = 0;
const clearTimer = () => {
if (timer) {
window.clearTimeout(timer);
timer = 0;
}
};
const startTimer = () => {
if (isUndefined(props.duration) || props.duration <= 0) {
return;
}
timer = window.setTimeout(() => {
emits("duration-end");
innerIsVisible.value = false;
emits("update:visible", innerIsVisible.value);
clearTimer();
}, props.duration);
};
const onClose = async (ev) => {
ev == null ? void 0 : ev.stopPropagation();
if (isFunction(props.beforeClose)) {
const rlt = await props.beforeClose();
if (rlt) {
innerIsVisible.value = false;
emits("update:visible", innerIsVisible.value);
emits("close", ev);
return;
}
}
innerIsVisible.value = false;
emits("update:visible", innerIsVisible.value);
emits("close", ev);
};
vue.onMounted(() => {
startTimer();
});
vue.onUnmounted(() => {
clearTimer();
});
__expose({
close: onClose
});
return (_ctx, _cache) => {
return isVisible.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-message", [
`o-message-${props.status}`,
{
"o-message-colorful": props.colorful,
"o-messgage-both": hasTitle.value && hasContent.value,
"o-message-only-title": isOnlyTitle.value,
"o-message-only-content": isOnlyContent.value
}
]]),
onMouseenter: clearTimer,
onMouseleave: startTimer
},
[
vue.createElementVNode("span", _hoisted_1$N, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(icon.value), {
class: vue.normalizeClass({ "o-rotating": props.status === "loading" })
}, null, 8, ["class"]))
])
]),
vue.createElementVNode("div", _hoisted_2$x, [
_ctx.$slots.title || props.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$p, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.title),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("span", _hoisted_4$l, [
vue.renderSlot(_ctx.$slots, "default")
])
]),
props.closable ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: "o-message-close",
onClick: onClose
}, [
vue.createVNode(vue.unref(IconClose))
])) : vue.createCommentVNode("v-if", true)
],
34
/* CLASS, NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true);
};
}
});
const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
__name: "OMessageList",
props: messageListProps,
setup(__props, { expose: __expose }) {
const props = __props;
const getUniqueId = /* @__PURE__ */ (() => {
let id = 0;
return () => {
id += 1;
return id;
};
})();
const optionList = vue.ref([]);
const add = (params) => {
const option = {
id: getUniqueId(),
...params
};
if (params.icon) {
option.icon = vue.shallowRef(params.icon);
}
optionList.value.push(option);
return option.id;
};
const remove = (idx) => {
optionList.value.splice(idx, 1);
if (optionList.value.length === 0 && props.onDestroy) {
props.onDestroy();
}
};
const removeAll = () => {
var _a;
optionList.value = [];
(_a = props.onDestroy) == null ? void 0 : _a.call(props);
};
const close2 = (id) => {
const idx = optionList.value.findIndex((option) => option.id === id);
remove(idx);
};
const handleDurationEnd = (item) => {
const { id, onDurationEnd } = item;
onDurationEnd == null ? void 0 : onDurationEnd();
close2(id);
};
const handleClose = (item, ev) => {
const { id, onClose } = item;
onClose == null ? void 0 : onClose(ev);
close2(id);
};
__expose({ add, close: close2, remove, removeAll });
return (_ctx, _cache) => {
return optionList.value.length ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-message-list", [`o-message-list-${props.position}`]])
},
[
vue.createVNode(vue.TransitionGroup, { name: "o-message-fade" }, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(optionList.value, (item) => {
return vue.openBlock(), vue.createBlock(_sfc_main$15, {
key: item.id,
status: item.status,
duration: item.duration,
closable: item.closable,
onDurationEnd: ($event) => handleDurationEnd(item),
onClose: (ev) => {
handleClose(item, ev);
}
}, vue.createSlots({
default: vue.withCtx(() => [
vue.unref(isString)(item.content) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createTextVNode(
vue.toDisplayString(item.content),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.content), { key: 1 }))
]),
_: 2
/* DYNAMIC */
}, [
item.icon ? {
name: "icon",
fn: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon)))
]),
key: "0"
} : void 0
]), 1032, ["status", "duration", "closable", "onDurationEnd", "onClose"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
})
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true);
};
}
});
const DEFAULT_OPTIONS$1 = {
status: "info",
position: "top",
duration: 3e3
};
const instanceMap$1 = /* @__PURE__ */ new Map();
const targetOffset = 8;
const normalizeOptions$1 = (params) => {
const options = !params || isString(params) ? { content: params } : params;
const normalized = {
...DEFAULT_OPTIONS$1,
...options
};
return normalized;
};
const getMessageStyle = (targetEl, position = "top", align = "center") => {
if (!targetEl) {
return;
}
const rect = targetEl.getBoundingClientRect();
let pos = "bottom";
let top = window.innerHeight - rect.top + targetOffset;
let left = rect.left;
let transform = "translateX(-50%)";
if (position === "bottom") {
pos = "top";
top = rect.top + rect.height + targetOffset;
}
if (align === "right") {
left = rect.left + rect.width;
transform = "translateX(-100%)";
} else if (align === "left") {
left = rect.left;
transform = "translateX(0%)";
} else {
left = rect.left + rect.width / 2;
transform = "translateX(-50%)";
}
return {
position: pos,
"--message-list-offset": `${top}px`,
[`--message-list-${pos}-offset`]: `${top}px`,
left: `${left}px`,
transform
};
};
const createMessageListVnode = ({
position,
wrap,
style,
targetEl
}) => {
return vue.h(_sfc_main$14, {
position: (style == null ? void 0 : style.position) ?? position,
onDestroy: async () => {
if (wrap) {
vue.render(null, wrap);
await vue.nextTick();
document.body.removeChild(wrap);
}
instanceMap$1.delete(targetEl ?? position);
},
style
});
};
const showMessage = (target, closeHandlers, params) => {
const options = normalizeOptions$1(params);
const { position, targetAlign } = options;
let id = -1;
let instance2;
let isClosed = false;
resolveHtmlElement(target).then((targetEl) => {
var _a, _b;
if (isClosed) {
return;
}
const msgStyle = getMessageStyle(targetEl, position, targetAlign);
instance2 = instanceMap$1.get(targetEl ?? position);
if (!instance2) {
const wrap = document.createElement("div");
const vnode = createMessageListVnode({
position,
wrap,
style: msgStyle,
targetEl
});
vue.render(vnode, wrap);
const vm = vnode.component;
id = (_a = vm.exposed) == null ? void 0 : _a.add(options);
instance2 = vm;
instanceMap$1.set(targetEl ?? position, instance2);
document.body.appendChild(wrap);
} else {
id = (_b = instance2.exposed) == null ? void 0 : _b.add(options);
}
});
const closeHandler = () => {
var _a;
isClosed = true;
(_a = instance2 == null ? void 0 : instance2.exposed) == null ? void 0 : _a.close(id);
closeHandlers.delete(closeHandler);
};
closeHandlers.add(closeHandler);
return closeHandler;
};
const showMessageWithStatus = (status, target, closeHandlers, params) => {
return showMessage(target, closeHandlers, { ...normalizeOptions$1(params), status });
};
const closeAll$1 = () => {
var _a;
for (const ins of instanceMap$1.values()) {
(_a = ins == null ? void 0 : ins.exposed) == null ? void 0 : _a.removeAll();
}
};
const close$1 = (closeHandlers) => {
closeHandlers.forEach((handler) => handler());
};
function useMessage(target) {
const closeHandlers = /* @__PURE__ */ new Set();
return {
show: showMessage.bind(null, target, closeHandlers),
info: showMessageWithStatus.bind(null, "info", target, closeHandlers),
success: showMessageWithStatus.bind(null, "success", target, closeHandlers),
warning: showMessageWithStatus.bind(null, "warning", target, closeHandlers),
danger: showMessageWithStatus.bind(null, "danger", target, closeHandlers),
loading: showMessageWithStatus.bind(null, "loading", target, closeHandlers),
/** 关闭本 useMessage 实例渲染的所有消息 */
close: close$1.bind(null, closeHandlers),
/** 关闭所有实例渲染的所有消息 */
closeAll: closeAll$1
};
}
const OMessage = Object.assign(_sfc_main$15, {
install(app) {
app.component("OMessage", _sfc_main$15);
}
});
function getNumbers(min, max) {
const arr = [];
for (let i = min; i <= max; i++) {
arr.push(i);
}
return arr;
}
function getPagerList(totalPage, currentPage = 1, showPageCount = 9) {
const activePage = currentPage > totalPage ? totalPage : currentPage;
const maxCount = showPageCount > 3 ? showPageCount : 3;
const pages = [];
if (totalPage <= maxCount) {
for (let i = 1; i <= totalPage; i++) {
pages.push({ value: i });
}
return pages;
}
pages[0] = { value: 1 };
pages[maxCount - 1] = { value: totalPage };
if (maxCount === 3) {
pages[1] = {
isMore: true,
value: "left",
list: getNumbers(2, totalPage - 1)
};
} else {
const d = (maxCount - 3) / 2;
let min = activePage - Math.floor(d);
let max = activePage + Math.ceil(d);
if (max > totalPage - 1) {
min -= max - totalPage + 1;
max = totalPage - 1;
}
if (min < 2) {
max += 2 - min;
min = 2;
}
if (min < 3) {
pages[1] = { value: 2 };
min = 2;
} else {
pages[1] = {
isMore: true,
value: "left",
list: getNumbers(2, min)
};
}
if (max > totalPage - 2) {
pages[maxCount - 2] = { value: totalPage - 1 };
max = totalPage - 1;
} else {
pages[maxCount - 2] = {
isMore: true,
value: "right",
list: getNumbers(max, totalPage - 1)
};
}
getNumbers(min + 1, max - 1).forEach((item, idx) => {
pages[2 + idx] = { value: item };
});
}
return pages;
}
function getSizeOptions(pageSizes2, sufix, currentPageSize) {
return pageSizes2.map((item) => ({
label: item + sufix,
value: item,
active: currentPageSize === item
}));
}
const pageSizes = [6, 12, 24, 48];
const PaginationVariantTypes = ["solid", "outline"];
const PaginationLayoutTypes = ["total", "pagesize", "pager", "jumper"];
const paginationProps = {
/**
* @zh-CN 布局(包含哪些控件)
* @en-US Layout (which controls to include)
* @default ['pagesize', 'pager', 'jumper']
*/
layout: {
type: Array,
default: ["pagesize", "pager", "jumper"]
},
/**
* @zh-CN 按钮形状
* @en-US Button variant
* @default 'outline'
*/
variant: {
type: String,
default: "outline"
},
/**
* @zh-CN 圆角值
* @en-US Button round
*/
round: {
type: String
},
/**
* @zh-CN 每页数据条数的选项
* @en-US Page size options
* @default [6, 12, 24, 48]
*/
pageSizes: {
type: Array,
default: () => pageSizes
},
/**
* @zh-CN 每页数据条数 v-model
* @en-US Page size v-model
* @default 6
*/
pageSize: {
type: Number,
default: pageSizes[0]
},
/**
* @zh-CN 数据总条数
* @en-US Total number of data
* @default 0
*/
total: {
type: Number,
default: 0
},
/**
* @zh-CN 当前页码 v-model
* @en-US Current page v-model
* @default 1
*/
page: {
type: Number,
default: 1
},
/**
* @zh-CN 最多显示的页码按钮数
* @en-US Maximum number of page buttons to display
* @default 9
*/
showPageCount: {
type: Number,
default: 9
},
/**
* @zh-CN 中间页码被隐藏时，是否启用hover显示所有页码功能
* @en-US Whether to enable the hover-to-display-all-page-numbers function when the middle page numbers are hidden.
* @default true
*/
showMore: {
type: Boolean,
default: true
},
/**
* @zh-CN 是否显示总数据量
* @en-US Whether to display the total number of data items.
* @deprecated Please configure the total property in the layout property.
*/
showTotal: {
type: Boolean
},
/**
* @zh-CN 是否使用简洁布局
* @en-US Whether to use the simple layout
*/
simple: {
type: Boolean
}
};
function useGetUniqueId() {
let id = 0;
return () => {
id += 1;
return id;
};
}
const virtualListProps = {
/**
* @zh-CN 默认滚动到第几项
* @en-US Default scroll index
* @default 0
*/
defaultStartIndex: {
type: Number,
default: 0
},
/**
* @zh-CN 列表数据，如果数据存在动态追加，需要每一项需包含唯一ID
* @en-US List data, if dynamic addition exists, each item must contain a unique ID
*/
list: {
type: Array,
required: true,
default: () => []
},
/**
* @zh-CN 每一项的高度。传数字为定高模式；传函数为按项定高模式（函数接收 item 和 index 参数）；不传为不定高模式（运行时测量）
* @en-US Height of each item. Number for fixed height; function for per-item height (receives item and index); undefined for dynamic height (measured at runtime)
* @since 1.2.6
*/
itemSize: {
type: [Number, Function]
},
/**
* @zh-CN 不定高时，每一项的默认高度
* @en-US If the height of each item is not consistent, the default height of each item
* @default 80
*/
defaultItemSize: {
type: Number,
default: 80
},
/**
* @zh-CN 前后预留项，减少滚动式空白
* @en-US Front and back reserved items, reducing scrolling blank
* @default 1
*/
buffer: {
type: Number,
default: 1
},
/**
* @zh-CN scrollbar配置项
* @en-US scrollbar configuration item
* @default true
*/
scrollbar: {
type: [Boolean, Object],
default: true
},
/**
* @zh-CN 布局方向，'vertical' 为垂直滚动，'horizontal' 为水平滚动
* @en-US Layout direction, 'vertical' for vertical scrolling, 'horizontal' for horizontal scrolling
* @default 'vertical'
* @since 1.2.6
*/
layout: {
type: String,
default: "vertical"
},
/**
* @zh-CN 数据量阈值，低于此值不启用虚拟化；null 表示始终启用
* @en-US Data count threshold, below which virtualization is disabled; null means always enabled
* @default null
* @since 1.2.6
*/
threshold: {
type: Number,
default: null
}
};
const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
__name: "VirtualListItem",
props: {
index: {},
mainSize: {},
layout: {},
observeResize: { type: Boolean }
},
emits: ["resize"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const itemRef = vue.ref();
const itemStyle = vue.computed(() => {
if (props.mainSize == null) {
return void 0;
}
const sizeProp = props.layout === "horizontal" ? "width" : "height";
return { [sizeProp]: `${props.mainSize}px` };
});
core.useResizeObserver(itemRef, (entries) => {
if (props.observeResize && entries[0]) {
emits("resize", entries[0], props.index);
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "itemRef",
ref: itemRef,
style: vue.normalizeStyle(itemStyle.value),
class: "o-virtual-render-item"
},
[
vue.renderSlot(_ctx.$slots, "default")
],
4
/* STYLE */
);
};
}
});
function findIndexByOffset(length, scrollOffset, accessor) {
if (length === 0) {
return 0;
}
let start = 0;
let end = length - 1;
while (start < end) {
const mid = Math.floor((start + end) / 2);
const top = accessor.getTop(mid);
const bottom = accessor.getBottom(mid);
if (top <= scrollOffset && bottom > scrollOffset) {
return mid;
}
if (bottom <= scrollOffset) {
start = mid + 1;
} else {
end = mid - 1;
}
}
return Math.max(0, Math.min(start, length - 1));
}
function createAxisSelector(isHorizontal) {
const h = () => isHorizontal.value;
return {
getScroll: (el) => h() ? el.scrollLeft : el.scrollTop,
setScroll: (el, val) => {
if (h()) {
el.scrollLeft = val;
} else {
el.scrollTop = val;
}
},
getAxisSize: (el) => h() ? el.offsetWidth : el.offsetHeight,
getScrollSize: (el) => h() ? el.scrollWidth : el.scrollHeight,
getClientSize: (el) => h() ? el.clientWidth : el.clientHeight,
scrollToPos: (el, pos, behavior) => {
el.scrollTo({
[h() ? "left" : "top"]: pos,
behavior
});
}
};
}
function calculateScrollTarget(itemTop, align, sizes) {
const { containerSize, itemSize } = sizes;
if (align === "start") {
return itemTop;
}
if (align === "center") {
return itemTop - containerSize / 2 + itemSize / 2;
}
if (align === "end") {
return itemTop - containerSize + itemSize;
}
if (typeof align === "number") {
return itemTop - align;
}
return itemTop;
}
function resolveNearestAlign(viewport) {
const { currentScroll, itemTop, itemSize, containerSize } = viewport;
if (currentScroll > itemTop) {
return "start";
}
if (currentScroll + containerSize < itemTop + itemSize) {
return "end";
}
return null;
}
function useScrollState(opts = {}) {
const { resetDelay = 150 } = opts;
const isScrolling = vue.ref(false);
let endTimer;
const markScrolling = () => {
isScrolling.value = true;
if (endTimer) {
clearTimeout(endTimer);
}
endTimer = setTimeout(() => {
isScrolling.value = false;
endTimer = void 0;
}, resetDelay);
};
const cleanup = () => {
if (endTimer) {
clearTimeout(endTimer);
}
};
if (vue.getCurrentInstance()) {
vue.onUnmounted(cleanup);
}
return { isScrolling, markScrolling, cleanup };
}
function useWheel(opts) {
const { wrapperRef, isHorizontal, axis } = opts;
const onWheel = (e) => {
const el = wrapperRef.value;
if (!el) {
return;
}
const scrollPos = axis.getScroll(el);
const maxScroll = axis.getScrollSize(el) - axis.getClientSize(el);
const atStartEdge = scrollPos <= 0;
const atEndEdge = scrollPos >= maxScroll;
const delta = isHorizontal.value ? e.deltaX || (e.shiftKey ? e.deltaY : 0) : e.deltaY;
if (atStartEdge && delta < 0 || atEndEdge && delta > 0) {
e.preventDefault();
}
};
vue.onMounted(() => {
core.until(wrapperRef).toBeTruthy().then(() => {
var _a;
(_a = wrapperRef.value) == null ? void 0 : _a.addEventListener("wheel", onWheel, { passive: false });
});
});
vue.onBeforeUnmount(() => {
var _a;
(_a = wrapperRef.value) == null ? void 0 : _a.removeEventListener("wheel", onWheel);
});
}
const MAX_INITIAL_RESCROLL = 5;
const MAX_APPROACH = 10;
const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
__name: "OVirtualList",
props: virtualListProps,
emits: ["renderChange"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const scrollbarProps2 = vue.computed(() => {
if (props.scrollbar === true) {
return {
showType: "always",
size: "medium"
};
}
return props.scrollbar;
});
const isHorizontal = vue.computed(() => props.layout === "horizontal");
const isFixedHeight = vue.computed(() => isNumber(props.itemSize));
const isFunctionHeight = vue.computed(() => isFunction(props.itemSize));
const isDynamicMode = vue.computed(() => !isFixedHeight.value && !isFunctionHeight.value);
const getItemHeight = (item, index) => {
if (isFixedHeight.value) {
return props.itemSize;
}
if (isFunctionHeight.value) {
return props.itemSize(item, index);
}
return props.defaultItemSize;
};
const { getScroll: getScroll2, setScroll: _setScroll, getAxisSize, getScrollSize, getClientSize, scrollToPos: _scrollToPos } = createAxisSelector(isHorizontal);
let isProgrammaticScroll = false;
const setScroll = (el, val) => {
isProgrammaticScroll = true;
_setScroll(el, val);
};
const scrollToPos = (el, pos, behavior) => {
isProgrammaticScroll = true;
_scrollToPos(el, pos, behavior);
};
const genFallbackId = useGetUniqueId();
const listData = vue.ref([]);
vue.watch(
() => props.list,
(value) => {
const hasId = value.length > 0 && !isUndefined(value[0].id);
if (!hasId && isDynamicMode.value && value.length > 0 && isClient) {
console.warn("[OVirtualList] 不定高模式下建议为每一项传入唯一 id 字段，否则动态追加数据时滚动位置可能跳变。已自动生成 fallback ID。");
}
listData.value = value.map((item, index) => ({
id: item.id ?? genFallbackId(),
data: item,
index
}));
},
{
immediate: true
}
);
const defaultStartIndex = vue.computed(() => {
if (isUndefined(props.defaultStartIndex)) {
return 0;
}
return Math.max(Math.min(props.defaultStartIndex, props.list.length - 1), 0);
});
const visibleStartIndex = vue.ref(defaultStartIndex.value ?? 0);
let visibleStartId;
const renderCount = vue.ref(1);
const startIndex = vue.computed(() => {
return Math.max(visibleStartIndex.value - props.buffer, 0);
});
const endIndex = vue.computed(() => {
return Math.min(visibleStartIndex.value + renderCount.value + props.buffer - 1, listData.value.length - 1);
});
let lastVisibleStartIndex = visibleStartIndex.value;
let lastRenderCount = renderCount.value;
const emitRenderChange = () => {
if (lastVisibleStartIndex !== visibleStartIndex.value || lastRenderCount !== renderCount.value) {
emits("renderChange", {
start: startIndex.value,
end: endIndex.value,
count: renderCount.value,
visible: visibleStartIndex.value
});
lastVisibleStartIndex = visibleStartIndex.value;
lastRenderCount = renderCount.value;
}
};
const wrapperRef = vue.ref();
const offset = vue.ref(0);
const { isScrolling, markScrolling, cleanup: cleanupScrollState } = useScrollState();
let initialScroll = isFixedHeight.value || isFunctionHeight.value;
let needsInitialReScroll = false;
let initialReScrollCount = 0;
let listMetaData = [];
let lastMeasuredIndex = -1;
let unmeasuredTotal = 0;
const ensureMeasured = (index) => {
if (index <= lastMeasuredIndex || listMetaData.length === 0) {
return;
}
const start = lastMeasuredIndex + 1;
let top = lastMeasuredIndex >= 0 ? listMetaData[lastMeasuredIndex].bottom : 0;
for (let i = start; i <= index; i++) {
const meta = listMetaData[i];
meta.top = top;
meta.bottom = top + meta.size;
top = meta.bottom;
unmeasuredTotal -= meta.size;
}
lastMeasuredIndex = index;
};
const safeMeta = (index) => {
if (listMetaData.length === 0) {
return void 0;
}
const i = Math.max(0, Math.min(index, listMetaData.length - 1));
return listMetaData[i];
};
const getMetaTop = (index) => {
const meta = safeMeta(index);
if (!meta) {
return 0;
}
if (index > lastMeasuredIndex) {
ensureMeasured(index);
}
return meta.top;
};
const getMetaBottom = (index) => {
const meta = safeMeta(index);
if (!meta) {
return 0;
}
if (index > lastMeasuredIndex) {
ensureMeasured(index);
}
return meta.bottom;
};
const getEstimatedTotalSize = () => {
if (listMetaData.length === 0) {
return 0;
}
if (lastMeasuredIndex < 0) {
return unmeasuredTotal;
}
return listMetaData[lastMeasuredIndex].bottom + unmeasuredTotal;
};
const initialSize = isFixedHeight.value ? props.itemSize * listData.value.length : props.defaultItemSize * listData.value.length;
const contentSize = vue.ref(initialSize);
const containerSize = vue.ref({
height: 0,
width: 0
});
const containerMainSize = vue.computed(() => isHorizontal.value ? containerSize.value.width : containerSize.value.height);
const isVirtualEnabled = vue.computed(() => {
if (props.threshold === null) {
return true;
}
return listData.value.length >= props.threshold && contentSize.value > containerMainSize.value;
});
const renderList = vue.computed(() => {
if (!isVirtualEnabled.value) {
return listData.value;
}
return listData.value.slice(startIndex.value, endIndex.value + 1);
});
const updateVisibleCount = (scrollOffset) => {
let scrollSize = scrollOffset;
if (isUndefined(scrollSize)) {
scrollSize = wrapperRef.value ? getScroll2(wrapperRef.value) : 0;
}
const containerHeight = containerMainSize.value;
if (!wrapperRef.value || !containerHeight) {
return;
}
let render = 1;
for (let i = visibleStartIndex.value + 1; i < listMetaData.length; i++) {
if (getMetaTop(i) < scrollSize + containerHeight) {
render++;
}
}
renderCount.value = render;
emitRenderChange();
};
const debounceUpdateVisibleCount = debounceRAF(updateVisibleCount);
const refreshStartIndex = (scrollTop) => {
for (let i = visibleStartIndex.value; i >= 0; i--) {
if (getMetaTop(i) <= scrollTop) {
visibleStartIndex.value = i;
break;
}
}
};
const refreshRenderCount = (scrollTop, mainSize) => {
let count = renderCount.value;
for (let i = endIndex.value; i < listMetaData.length; i++) {
if (getMetaTop(i) < scrollTop + mainSize) {
count++;
}
}
renderCount.value = count;
};
const onContainerResize = () => {
if (!wrapperRef.value) {
return;
}
containerSize.value.height = wrapperRef.value.offsetHeight;
containerSize.value.width = wrapperRef.value.offsetWidth;
const mainSize = containerMainSize.value;
if (mainSize === 0) {
offset.value = 0;
}
if (!initialScroll) {
if (contentSize.value < mainSize) {
visibleStartIndex.value = 0;
}
updateVisibleCount();
return;
}
const scrollTop = getScroll2(wrapperRef.value);
refreshStartIndex(scrollTop);
refreshRenderCount(scrollTop, mainSize);
emitRenderChange();
};
core.useResizeObserver(wrapperRef, () => {
onContainerResize();
});
const contentStyle = vue.computed(() => ({
[isHorizontal.value ? "--_vl-content-width" : "--_vl-content-height"]: `${contentSize.value}px`
}));
const renderListStyle = vue.computed(() => {
return {
// 非虚拟模式（isVirtualEnabled=false）下全量渲染 DOM，不需要 transform 偏移；
// 若应用非 0 的 offset，会将项推出 o-virtual-body 的 overflow:hidden 范围，
// 导致末尾项永远无法滚入视口
[isHorizontal.value ? "--_vl-offset-x" : "--_vl-offset-y"]: `${isVirtualEnabled.value ? offset.value : 0}px`,
// 滚动中禁用子项交互，避免 hover/click 触发不必要的 re-render
pointerEvents: isScrolling.value ? "none" : void 0
};
});
let pendingScrollTo = null;
let approachCount = 0;
const setupPendingScroll = (toIndex, align, behavior) => {
pendingScrollTo = { index: toIndex, align, behavior };
approachCount = 0;
};
const resolveBehavior = (behavior) => isFixedHeight.value || isFunctionHeight.value ? behavior : "instant";
const scrollToView = (index, align = "start", behavior = "instant") => {
if (!wrapperRef.value) {
return;
}
const toIndex = Math.max(Math.min(listMetaData.length - 1, index), 0);
const item = safeMeta(toIndex);
if (!item) {
return;
}
const itemTop = getMetaTop(toIndex);
const cSize = getAxisSize(wrapperRef.value);
let _align = align;
if (_align === "nearest") {
const resolved = resolveNearestAlign({ currentScroll: getScroll2(wrapperRef.value), itemTop, itemSize: item.size, containerSize: cSize });
if (resolved === null) {
return;
}
_align = resolved;
}
if (!item.measured && _align !== "start") {
setupPendingScroll(toIndex, _align, behavior);
scrollToPos(wrapperRef.value, itemTop, "instant");
return;
}
const scrollTarget = calculateScrollTarget(itemTop, _align, { containerSize: cSize, itemSize: item.size });
if (Math.abs(toIndex - visibleStartIndex.value) > renderCount.value && !item.measured) {
setupPendingScroll(toIndex, _align, behavior);
}
scrollToPos(wrapperRef.value, scrollTarget, resolveBehavior(behavior));
};
const debouncedReApproach = debounceRAF(() => {
if (!pendingScrollTo || !wrapperRef.value) {
return;
}
approachCount++;
const { index: targetIndex, align: targetAlign, behavior: targetBehavior } = pendingScrollTo;
const targetMeta = safeMeta(targetIndex);
if (targetMeta && targetMeta.measured) {
pendingScrollTo = null;
scrollToView(targetIndex, targetAlign, targetBehavior);
return;
}
if (approachCount >= MAX_APPROACH) {
pendingScrollTo = null;
return;
}
const estimatedTop = getMetaTop(targetIndex);
const currentScroll = getScroll2(wrapperRef.value);
if (Math.abs(estimatedTop - currentScroll) > 1) {
setScroll(wrapperRef.value, estimatedTop);
}
});
const buildMetaItem = (item, index, prevMetaMap) => {
if (isDynamicMode.value) {
const prev = prevMetaMap.get(item.id);
if (prev && prev.measured) {
return { id: item.id, index, size: prev.size, top: 0, bottom: 0, measured: true };
}
}
const isKnownHeight = isFixedHeight.value || isFunctionHeight.value;
return { id: item.id, index, size: getItemHeight(item.data, index), top: 0, bottom: 0, measured: isKnownHeight };
};
const repositionScroll = (dataList) => {
if (isUndefined(visibleStartId) || !wrapperRef.value) {
return;
}
const scrollOffset = getScroll2(wrapperRef.value);
const delta = scrollOffset - getMetaTop(visibleStartIndex.value);
const newIndex = dataList.findIndex((item) => item.id === visibleStartId);
if (newIndex >= 0) {
visibleStartIndex.value = newIndex;
setScroll(wrapperRef.value, getMetaTop(newIndex) + delta);
}
};
vue.watch(
[() => props.itemSize, () => listData.value],
([, dataList]) => {
if (dataList.length === 0) {
listMetaData = [];
lastMeasuredIndex = -1;
unmeasuredTotal = 0;
contentSize.value = 0;
return;
}
const isKnownHeight = isFixedHeight.value || isFunctionHeight.value;
const prevMetaMap = isDynamicMode.value ? new Map(listMetaData.map((m) => [m.id, m])) : /* @__PURE__ */ new Map();
listMetaData = dataList.map((item, index) => buildMetaItem(item, index, prevMetaMap));
lastMeasuredIndex = -1;
unmeasuredTotal = 0;
for (const meta of listMetaData) {
unmeasuredTotal += meta.size;
}
if (isKnownHeight) {
ensureMeasured(listMetaData.length - 1);
}
contentSize.value = getEstimatedTotalSize();
repositionScroll(dataList);
},
{
immediate: true
}
);
const flushContentSize = debounceRAF(() => {
contentSize.value = getEstimatedTotalSize();
});
const recalcRange = (start) => {
for (let i = start; i <= lastMeasuredIndex; i++) {
const meta = listMetaData[i];
meta.top = i > 0 ? listMetaData[i - 1].bottom : 0;
meta.bottom = meta.top + meta.size;
}
flushContentSize();
};
const metaAccessor = { getTop: getMetaTop, getBottom: getMetaBottom };
const getStartIndex = (scrollOffset) => findIndexByOffset(listMetaData.length, scrollOffset, metaAccessor);
const onScrollImpl = (scrollOffset) => {
if (isFixedHeight.value) {
visibleStartIndex.value = Math.floor(scrollOffset / props.itemSize);
} else {
visibleStartIndex.value = getStartIndex(scrollOffset);
}
offset.value = getMetaTop(startIndex.value);
const currentMeta = safeMeta(visibleStartIndex.value);
if (currentMeta) {
visibleStartId = currentMeta.id;
}
updateVisibleCount(scrollOffset);
};
const debounceOnScroll = debounceRAF(onScrollImpl);
const onScroll = () => {
markScrolling();
if (isProgrammaticScroll) {
isProgrammaticScroll = false;
} else if (needsInitialReScroll) {
needsInitialReScroll = false;
}
const scrollOffset = wrapperRef.value ? getScroll2(wrapperRef.value) : 0;
debounceOnScroll(scrollOffset);
};
const correctScrollForResize = (meta, itemTop, newSize) => {
if (wrapperRef.value && getScroll2(wrapperRef.value) > itemTop) {
setScroll(wrapperRef.value, getScroll2(wrapperRef.value) + newSize - meta.size);
}
};
const handleInitialScroll = (index) => {
if (index !== defaultStartIndex.value || initialScroll) {
return;
}
vue.nextTick(() => {
scrollToView(defaultStartIndex.value);
initialScroll = true;
if (isDynamicMode.value) {
needsInitialReScroll = true;
initialReScrollCount = 0;
}
});
};
const onItemResize = (en, index) => {
const el = en.target;
const meta = safeMeta(index);
if (!meta) {
return;
}
const newSize = getAxisSize(el);
if (meta.measured && meta.size === newSize) {
return;
}
const itemTop = getMetaTop(index);
correctScrollForResize(meta, itemTop, newSize);
meta.size = newSize;
meta.measured = true;
recalcRange(index);
if (pendingScrollTo) {
debouncedReApproach();
}
handleInitialScroll(index);
debounceUpdateVisibleCount();
};
const init = () => {
if (!wrapperRef.value) {
return;
}
if (isFixedHeight.value || isFunctionHeight.value) {
scrollToView(defaultStartIndex.value);
} else if (isDynamicMode.value && defaultStartIndex.value > 0) {
scrollToView(defaultStartIndex.value);
initialScroll = true;
needsInitialReScroll = true;
initialReScrollCount = 0;
}
};
vue.watch(contentSize, () => {
if (!needsInitialReScroll || !wrapperRef.value) {
return;
}
initialReScrollCount++;
if (initialReScrollCount > MAX_INITIAL_RESCROLL) {
needsInitialReScroll = false;
return;
}
vue.nextTick(() => {
if (!needsInitialReScroll || !wrapperRef.value) {
return;
}
const itemTop = getMetaTop(defaultStartIndex.value);
const currentScroll = getScroll2(wrapperRef.value);
if (Math.abs(itemTop - currentScroll) > 1) {
scrollToView(defaultStartIndex.value);
} else {
needsInitialReScroll = false;
}
});
});
const scrollToOffset = (px) => {
if (!wrapperRef.value) {
return;
}
const max = getScrollSize(wrapperRef.value) - getClientSize(wrapperRef.value);
setScroll(wrapperRef.value, Math.max(0, Math.min(px, max)));
};
useWheel({ wrapperRef, isHorizontal, axis: { getScroll: getScroll2, setScroll, getAxisSize, getScrollSize, getClientSize, scrollToPos } });
vue.onMounted(() => {
init();
});
vue.onUnmounted(() => {
cleanupScrollState();
debounceOnScroll.cancel();
debounceUpdateVisibleCount.cancel();
debouncedReApproach.cancel();
flushContentSize.cancel();
});
__expose({
scrollToView,
scrollToOffset
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass([{ "o-horizontal": isHorizontal.value }, "o-virtual-list"])
},
[
vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "wrapperRef",
ref: wrapperRef,
class: "o-virtual-list-wrapper",
onScrollPassive: onScroll
},
[
vue.createElementVNode(
"div",
{
style: vue.normalizeStyle(contentStyle.value),
class: "o-virtual-body"
},
[
vue.createElementVNode(
"div",
{
style: vue.normalizeStyle(renderListStyle.value),
class: "o-virtual-render-list"
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(renderList.value, (item) => {
return vue.openBlock(), vue.createBlock(_sfc_main$13, {
key: item.index,
index: item.index,
layout: props.layout,
"main-size": isFixedHeight.value || isFunctionHeight.value ? getItemHeight(item.data, item.index) : void 0,
"observe-resize": isDynamicMode.value,
onResize: onItemResize
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default", {
index: item.index,
item: item.data
})
]),
_: 2
/* DYNAMIC */
}, 1032, ["index", "layout", "main-size", "observe-resize"]);
}),
128
/* KEYED_FRAGMENT */
))
],
4
/* STYLE */
)
],
4
/* STYLE */
)
],
32
/* NEED_HYDRATION */
)), [
[vue.unref(vScrollbar), scrollbarProps2.value]
])
],
2
/* CLASS */
);
};
}
});
const OVirtualList = Object.assign(_sfc_main$12, {
install(app) {
app.component("OVirtualList", _sfc_main$12);
}
});
const _hoisted_1$M = { class: "o-pagination-wrap" };
const _hoisted_2$w = {
key: 0,
class: "o-pagination-total"
};
const _hoisted_3$o = {
key: 1,
class: "o-pagination-size"
};
const _hoisted_4$k = {
key: 1,
class: "o-pagination-page-size"
};
const _hoisted_5$i = {
key: 2,
class: "o-pagination-pager"
};
const _hoisted_6$9 = { class: "o-pagination-pages" };
const _hoisted_7$5 = {
key: 0,
class: "o-pagination-simple"
};
const _hoisted_8$3 = ["onClick"];
const _hoisted_9$3 = { key: 0 };
const _hoisted_10$3 = ["onClick"];
const _hoisted_11$3 = {
key: 3,
class: "o-pagination-goto"
};
const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
__name: "OPagination",
props: /* @__PURE__ */ vue.mergeModels(paginationProps, {
"pageSize": {},
"pageSizeModifiers": {},
"page": {},
"pageModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:pageSize", "update:page"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const round2 = getRoundClass(props, "pagination");
const emits = __emit;
const { t } = useI18n();
const simpleLayout = ["pager"];
const pages = vue.ref([]);
const pageSize = vue.useModel(__props, "pageSize");
if (!pageSize.value) {
pageSize.value = props.pageSizes[0];
} else if (!props.pageSizes.includes(pageSize.value)) {
log$1.warn(`pageSize[${pageSize.value}] is not in pageSizes[${props.pageSizes}]! set to first value of pageSizes[${props.pageSizes[0]}]`);
pageSize.value = props.pageSizes[0];
}
const totalPage = vue.computed(() => Math.ceil(props.total / pageSize.value));
const pageVal = vue.useModel(__props, "page");
if (!pageVal.value) {
pageVal.value = 1;
}
pages.value = getPagerList(totalPage.value, pageVal.value, props.showPageCount);
const pageSizeList = vue.computed(() => {
return getSizeOptions(props.pageSizes, t("pagination.countPerPage"), pageSize.value);
});
const defaultSizeLabel = vue.computed(() => pageSize.value + t("pagination.countPerPage"));
const layout = vue.computed(() => {
return props.simple ? simpleLayout : props.layout;
});
vue.watch(
() => [totalPage.value, pageVal.value],
() => {
pages.value = getPagerList(totalPage.value, pageVal.value, props.showPageCount);
}
);
const updatePageAndPageSize = (page, size2) => {
let changed = false;
const oldPage = pageVal.value;
const oldPageSize = pageSize.value;
if (pageVal.value !== page) {
changed = true;
pageVal.value = page;
}
if (pageSize.value !== size2) {
changed = true;
pageSize.value = size2;
}
if (changed) {
emits("change", { page, pageSize: size2 }, { page: oldPage, pageSize: oldPageSize });
}
};
const selectPage = (page) => {
updatePageAndPageSize(Number(page), pageSize.value);
};
const clickPageBtn = (Increase) => {
updatePageAndPageSize(Increase ? pageVal.value + 1 : pageVal.value - 1, pageSize.value);
};
const moreVisible = vue.ref({
left: false,
right: false
});
const moreClick = (more) => {
const { value, list } = more;
if (!list || typeof value !== "string") {
return;
}
if (value === "left") {
updatePageAndPageSize(list[list.length - 1], pageSize.value);
} else if (value === "right") {
updatePageAndPageSize(list[0], pageSize.value);
}
moreVisible.value[value] = false;
};
const goToPage = (val) => {
let v = Math.round(Number(val));
if (v < 1 || isNaN(v)) {
v = 1;
} else if (v > totalPage.value) {
v = totalPage.value;
}
updatePageAndPageSize(v, pageSize.value);
};
const selectPageSize = (val) => {
const size2 = Number(val);
if (!size2) {
return;
}
const currentIndex = pageSize.value * (pageVal.value - 1);
const newPage = Math.floor(currentIndex / size2) + 1;
updatePageAndPageSize(newPage, size2);
};
const onMoreItemClick = (item, value) => {
selectPage(item);
if (value === "left" || value === "right") {
moreVisible.value[value] = false;
}
};
const validateInput = (value) => {
return value === Math.round(Number(value));
};
__expose({
/**
* @zh-CN 总页数
* @en-US Total number of pages
*/
pageCount: totalPage
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-pagination", [`o-pagination-${props.variant}`, vue.unref(round2).class.value, { "o-pagination-ly-simple": props.simple }]]),
style: vue.normalizeStyle(vue.unref(round2).style.value)
},
[
vue.createElementVNode("div", _hoisted_1$M, [
vue.createCommentVNode(" total "),
layout.value.includes("total") || _ctx.$props.showTotal ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$w, [
vue.renderSlot(_ctx.$slots, "total", {
total: props.total,
pageCount: totalPage.value
}, () => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("pagination.total", props.total)),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" sizes "),
layout.value.includes("pagesize") ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$o, [
pageSizeList.value.length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(OSelect), {
key: 0,
"model-value": pageSize.value,
class: "o-pagination-select",
"default-label": defaultSizeLabel.value,
round: props.round,
variant: props.variant,
onChange: selectPageSize
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(pageSizeList.value, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(OOption), {
key: item.value,
label: item.label,
value: item.value
}, null, 8, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
}, 8, ["model-value", "default-label", "round", "variant"])) : (vue.openBlock(), vue.createElementBlock(
"div",
_hoisted_4$k,
vue.toDisplayString(pageSizeList.value[0].label),
1
/* TEXT */
))
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" pager "),
layout.value.includes("pager") ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$i, [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-pagination-prev", {
"is-disabled": pageVal.value === 1
}]),
tabindex: "-1",
onClick: _cache[0] || (_cache[0] = () => pageVal.value !== 1 && clickPageBtn(false))
},
[
vue.createVNode(vue.unref(IconChevronLeft))
],
2
/* CLASS */
),
vue.createElementVNode("div", _hoisted_6$9, [
props.simple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, [
vue.createVNode(vue.unref(OInputNumber), {
"model-value": pageVal.value,
clearable: false,
class: "o-pagination-input",
controls: "none",
min: 1,
max: totalPage.value,
round: props.round,
variant: props.variant,
"empty-value": pageVal.value,
validate: validateInput,
onChange: goToPage
}, null, 8, ["model-value", "max", "round", "variant", "empty-value"]),
_cache[2] || (_cache[2] = vue.createTextVNode(
" / ",
-1
/* CACHED */
)),
vue.createElementVNode(
"span",
null,
vue.toDisplayString(totalPage.value),
1
/* TEXT */
)
])) : (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(pages.value, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item.value,
class: vue.normalizeClass(["o-pagination-item", { active: item.value === pageVal.value }]),
tabindex: "-1",
onClick: ($event) => selectPage(item.value)
}, [
!item.isMore ? (vue.openBlock(), vue.createElementBlock(
"span",
_hoisted_9$3,
vue.toDisplayString(item.value),
1
/* TEXT */
)) : (vue.openBlock(), vue.createBlock(vue.unref(OPopover), {
key: 1,
visible: moreVisible.value[item.value],
"onUpdate:visible": ($event) => moreVisible.value[item.value] = $event,
position: "bottom",
"wrap-class": "o-options-popup",
disabled: !props.showMore
}, {
target: vue.withCtx(() => [
vue.createElementVNode("span", {
class: "o-pagination-more-icon-wrap",
onClick: vue.withModifiers(($event) => moreClick(item), ["stop"])
}, [
vue.createVNode(vue.unref(OIcon), {
class: "o-pagination-more-icon",
icon: vue.unref(IconEllipsis)
}, null, 8, ["icon"])
], 8, _hoisted_10$3)
]),
default: vue.withCtx(() => [
vue.createVNode(
vue.unref(_sfc_main$1w),
{ scrollbar: "" },
{
default: vue.withCtx(() => [
vue.createCommentVNode(" 当下拉项大于50，采用虚拟列表 "),
item.list && item.list.length > 50 ? (vue.openBlock(), vue.createBlock(vue.unref(OVirtualList), {
key: 0,
list: item.list,
class: "o-pagination-virtual-more-list",
scrollbar: { showType: "hover", size: "small" }
}, {
default: vue.withCtx((data) => [
(vue.openBlock(), vue.createBlock(vue.unref(OOption), {
key: data.item,
class: "o-pagination-more-item",
label: String(data.item),
value: data.item,
onClick: ($event) => onMoreItemClick(data.item, item.value)
}, null, 8, ["label", "value", "onClick"]))
]),
_: 2
/* DYNAMIC */
}, 1032, ["list"])) : item.list ? (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(item.list, (opt2) => {
return vue.openBlock(), vue.createBlock(vue.unref(OOption), {
key: opt2,
class: "o-pagination-more-item",
label: String(opt2),
value: opt2,
onClick: ($event) => onMoreItemClick(opt2, item.value)
}, null, 8, ["label", "value", "onClick"]);
}),
128
/* KEYED_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["visible", "onUpdate:visible", "disabled"]))
], 10, _hoisted_8$3);
}),
128
/* KEYED_FRAGMENT */
))
]),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-pagination-next", {
"is-disabled": pageVal.value === totalPage.value
}]),
tabindex: "-1",
onClick: _cache[1] || (_cache[1] = () => pageVal.value !== totalPage.value && clickPageBtn(true))
},
[
vue.createVNode(vue.unref(IconChevronRight))
],
2
/* CLASS */
)
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" jumper "),
layout.value.includes("jumper") ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$3, [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(vue.unref(t)("pagination.goto")),
1
/* TEXT */
),
vue.createVNode(vue.unref(OInputNumber), {
"model-value": pageVal.value,
class: "o-pagination-input",
controls: "none",
min: 1,
max: totalPage.value,
round: props.round,
variant: props.variant,
validate: validateInput,
"empty-value": pageVal.value,
onChange: goToPage
}, null, 8, ["model-value", "max", "round", "variant", "empty-value"])
])) : vue.createCommentVNode("v-if", true)
])
],
6
/* CLASS, STYLE */
);
};
}
});
const OPagination = Object.assign(_sfc_main$11, {
install(app) {
app.component("OPagination", _sfc_main$11);
}
});
const ProgressVariantTypes = ["line", "circle"];
const ProgressSizeTypes = ["medium", "small"];
const ProgressColorTypes = ["primary", "success", "warning", "danger"];
const progressProps = {
/**
* @zh-CN 进度条类型
* @en-US Progress bar type.
* @default 'line'
*/
variant: {
type: String,
default: "line"
},
/**
* @zh-CN 进度条百分比
* @en-US Progress bar percentage.
* @default 0
* @validator (val: number): boolean => val >= 0 && val <= 100
*/
percentage: {
type: Number,
default: 0,
validator: (val) => val >= 0 && val <= 100
},
/**
* @zh-CN 进度条线宽
* @en-US Width of the progress bar.
*/
strokeWidth: {
type: Number
},
/**
* @zh-CN 进度条尺寸
* @en-US Progress bar size.
* @default 'medium'
*/
size: {
type: String,
default: "medium"
},
/**
* @zh-CN 进度条颜色
* @en-US Progress bar color.
* @default 'primary'
*/
color: {
type: String,
default: "primary"
},
/**
* @zh-CN 进度条轨道宽度，当为环形进度条时，仅支持Number
* @en-US The width of the progress bar track, when it is a circular progress bar, only supports Number.
*/
trackWidth: {
type: [Number, String]
},
/**
* @zh-CN 格式化文字
* @en-US Formatted text.
* @default (percentage: number) => `${percentage}%`
*/
format: {
type: Function,
default: (percentage) => `${percentage}%`
},
/**
* @zh-CN 是否展示文字
* @en-US Whether to display text.
* @default true
*/
showLabel: {
type: Boolean,
default: true
},
/**
* @zh-CN 线形进度条，文字是否在进度条内部
* @en-US Linear progress bar. Is the text inside the progress bar.
* @default false
*/
labelInside: {
type: Boolean,
default: false
}
};
const _hoisted_1$L = {
key: 0,
class: "o-progress-line-wrap"
};
const _hoisted_2$v = {
key: 0,
class: "o-progress-line-inner-label"
};
const _hoisted_3$n = {
key: 1,
class: "o-progress-circle-wrap"
};
const _hoisted_4$j = ["width", "height", "view-box"];
const _hoisted_5$h = ["cx", "cy", "r", "stroke-width"];
const _hoisted_6$8 = ["cx", "cy", "r", "stroke-width", "transform", "stroke-dasharray"];
const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
__name: "OProgress",
props: progressProps,
setup(__props) {
const DEFAULT_STROKE_WIDTH = {
medium: 8,
small: 4
};
const props = __props;
const strokeWidth = vue.computed(() => props.strokeWidth ?? DEFAULT_STROKE_WIDTH[props.size]);
const lineBarStyle = vue.computed(() => {
return {
width: `${props.percentage}%`,
borderRadius: `${strokeWidth.value}px`
};
});
const lineTrackStyle = vue.computed(() => {
const rlt = {
height: `${strokeWidth.value}px`,
borderRadius: `${strokeWidth.value}px`
};
if (!isUndefined(props.trackWidth)) {
rlt.width = isNumber(props.trackWidth) ? `${props.trackWidth}px` : props.trackWidth;
}
return rlt;
});
const label = vue.computed(() => props.format(props.percentage));
const DEFAULT_CIRCLE_SIZE = {
medium: 120,
small: 60
};
const circleDiameter = vue.computed(() => {
if (isNumber(props.trackWidth)) {
return props.trackWidth;
}
return DEFAULT_CIRCLE_SIZE[props.size];
});
const circleCenter = vue.computed(() => circleDiameter.value / 2);
const circleRadius = vue.computed(() => circleCenter.value - strokeWidth.value / 2);
const circleStrokeDashArr = vue.computed(() => {
const perimeter = 2 * Math.PI * circleRadius.value;
const percent = props.percentage / 100;
return `${perimeter * percent} ${perimeter * (1 - percent)}`;
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-progress", [`o-progress-${props.variant}`, `o-progress-${props.size}`, `o-progress-${props.color}`]])
},
[
vue.createCommentVNode(" variant === 'line' "),
props.variant === "line" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
vue.createElementVNode(
"div",
{
class: "o-progress-line-track",
style: vue.normalizeStyle(lineTrackStyle.value)
},
[
vue.createElementVNode(
"div",
{
class: "o-progress-line-bar",
style: vue.normalizeStyle(lineBarStyle.value)
},
[
props.showLabel && props.labelInside ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
vue.renderSlot(_ctx.$slots, "default", {
percentage: props.percentage
}, () => [
vue.createTextVNode(
vue.toDisplayString(label.value),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
],
4
/* STYLE */
)
],
4
/* STYLE */
),
props.showLabel && !props.labelInside ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-progress-line-label", { "is-icon": _ctx.$slots.icon }])
},
[
vue.renderSlot(_ctx.$slots, "icon", {
percentage: props.percentage
}, () => [
vue.renderSlot(_ctx.$slots, "default", {
percentage: props.percentage
}, () => [
vue.createTextVNode(
vue.toDisplayString(label.value),
1
/* TEXT */
)
])
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" variant === 'circle' "),
props.variant === "circle" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$n, [
(vue.openBlock(), vue.createElementBlock("svg", {
width: circleDiameter.value,
height: circleDiameter.value,
"view-box": `0 0 ${circleDiameter.value} ${circleDiameter.value}`
}, [
vue.createElementVNode("circle", {
class: "o-progress-circle-track",
fill: "none",
cx: circleCenter.value,
cy: circleCenter.value,
r: circleRadius.value,
"stroke-width": strokeWidth.value
}, null, 8, _hoisted_5$h),
vue.createElementVNode("circle", {
class: "o-progress-circle-bar",
fill: "none",
cx: circleCenter.value,
cy: circleCenter.value,
r: circleRadius.value,
"stroke-width": strokeWidth.value,
"stroke-linecap": "round",
transform: `matrix(0,-1,1,0,0,${circleDiameter.value})`,
"stroke-dasharray": circleStrokeDashArr.value
}, null, 8, _hoisted_6$8)
], 8, _hoisted_4$j)),
props.showLabel ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-progress-circle-label", { "is-icon": _ctx.$slots.icon }])
},
[
vue.renderSlot(_ctx.$slots, "icon", {
percentage: props.percentage
}, () => [
vue.renderSlot(_ctx.$slots, "default", {
percentage: props.percentage
}, () => [
vue.createTextVNode(
vue.toDisplayString(label.value),
1
/* TEXT */
)
])
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
const OProgress = Object.assign(_sfc_main$10, {
install(app) {
app.component("OProgress", _sfc_main$10);
}
});
const radioInjectKey = Symbol("provide-radio");
const radioProps = {
/**
* @zh-CN 单选框value
* @en-US Radio box value.
*/
value: {
type: [String, Number, Boolean],
required: true
},
/**
* @zh-CN 单选框双向绑定值
* @en-US Two-way binding values for single-choice boxes.
*/
modelValue: {
type: [String, Number, Boolean]
},
/**
* @zh-CN 非受控状态时，默认是否选中
* @en-US Whether it is selected by default when in an uncontrolled state.
* @default false
*/
defaultChecked: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable.
* @default false
*/
disabled: {
type: Boolean,
default: false
},
/**
* @zh-CN 用于关联label元素与input元素
* @en-US Used to associate the label element with the input element.
*/
inputId: {
type: String
}
};
const radioGroupInjectKey = Symbol("provide-radio-group");
const _hoisted_1$K = ["for"];
const _hoisted_2$u = { class: "o-radio-wrap" };
const _hoisted_3$m = ["id", "value", "disabled", "checked"];
const _hoisted_4$i = { class: "o-radio-label" };
const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
__name: "ORadio",
props: radioProps,
emits: ["update:modelValue", "change"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const radioGroupInjection = vue.inject(radioGroupInjectKey, null);
const inputId2 = vue.ref(props.inputId);
vue.onMounted(() => {
if (!inputId2.value) {
inputId2.value = uniqueId();
}
});
const _checked = vue.ref(props.defaultChecked);
const isChecked = vue.computed(() => {
if (radioGroupInjection) {
return radioGroupInjection.realValue.value === props.value;
}
if (!isUndefined(props.modelValue)) {
return props.modelValue === props.value;
}
return _checked.value;
});
vue.watch(
isChecked,
(val) => {
_checked.value = val;
},
{ immediate: true }
);
__expose({
/**
* @zh-CN 是否已选中
* @en-US Whether the radio is checked
*/
checked: isChecked
});
const isDisabled = vue.computed(() => (radioGroupInjection == null ? void 0 : radioGroupInjection.disabled.value) || props.disabled);
const onClick = (ev) => {
ev.stopPropagation();
};
const onChange = (ev) => {
if (isDisabled.value) {
return;
}
_checked.value = true;
const val = props.value ?? true;
emits("update:modelValue", val);
radioGroupInjection == null ? void 0 : radioGroupInjection.updateModelValue(val);
vue.nextTick(() => {
emits("change", val, ev);
radioGroupInjection == null ? void 0 : radioGroupInjection.onChange(val, ev);
});
};
vue.provide(radioInjectKey, {
checked: isChecked,
disabled: isDisabled
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("label", {
class: vue.normalizeClass(["o-radio", {
"o-radio-checked": isChecked.value,
"o-radio-disabled": isDisabled.value
}]),
for: inputId2.value
}, [
vue.createElementVNode("div", _hoisted_2$u, [
vue.createElementVNode("input", {
id: inputId2.value,
type: "radio",
value: props.value,
disabled: isDisabled.value,
checked: isChecked.value,
onClick,
onChange
}, null, 40, _hoisted_3$m),
vue.renderSlot(_ctx.$slots, "radio", {
checked: isChecked.value,
disabled: isDisabled.value
}, () => [
_cache[0] || (_cache[0] = vue.createElementVNode(
"div",
{ class: "o-radio-input-wrap" },
[
vue.createElementVNode("span", { class: "o-radio-input" })
],
-1
/* CACHED */
)),
vue.createElementVNode("span", _hoisted_4$i, [
vue.renderSlot(_ctx.$slots, "default")
])
])
])
], 10, _hoisted_1$K);
};
}
});
const ORadio = Object.assign(_sfc_main$$, {
install(app) {
app.component("ORadio", _sfc_main$$);
}
});
const radioGroupProps = {
/**
* @zh-CN 单选框组双向绑定值
* @en-US Two-way binding values for radio box groups.
*/
modelValue: {
type: [String, Number, Boolean]
},
/**
* @zh-CN 非受控状态时，单选框组默认值
* @en-US The default value of the radio box group in an uncontrolled state.
* @default ''
*/
defaultValue: {
type: [String, Number, Boolean],
default: ""
},
/**
* @zh-CN 单选框组是否禁用
* @en-US Whether the radio box group is disabled.
* @default false
*/
disabled: {
type: Boolean,
default: false
},
/**
* @zh-CN 单选框组方向
* @en-US Direction of the radio box group.
* @default 'h'
*/
direction: {
type: String,
default: "h"
}
};
const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
__name: "ORadioGroup",
props: radioGroupProps,
emits: ["update:modelValue", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const realValue = vue.ref(props.modelValue ?? props.defaultValue);
const formItemInjection = vue.inject(formItemInjectKey, null);
vue.watch(
() => props.modelValue,
(val) => {
if (!isUndefined(val)) {
realValue.value = val;
}
}
);
const updateModelValue = (val) => {
realValue.value = val;
emits("update:modelValue", val);
};
const onChange = (val, ev) => {
var _a, _b;
emits("change", val, ev);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
};
vue.provide(radioGroupInjectKey, {
realValue,
disabled: vue.toRef(props, "disabled"),
updateModelValue,
onChange
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-radio-group", [`o-radio-group-${props.direction}`]])
},
[
vue.renderSlot(_ctx.$slots, "default")
],
2
/* CLASS */
);
};
}
});
const ORadioGroup = Object.assign(_sfc_main$_, {
install(app) {
app.component("ORadioGroup", _sfc_main$_);
}
});
const RateItemStatusTypes = ["full", "half", "empty"];
const RateSizeTypes = ["large", "medium"];
const rateProps = {
/**
* @zh-CN 评分总数
* @en-US Total number of ratings
* @default 5
*/
count: {
type: Number,
default: 5
},
/**
* @zh-CN 选中数量
* @en-US Selected count
*/
modelValue: {
type: Number
},
/**
* @zh-CN 非受控默认选中值
* @en-US Uncontrolled default selected count
* @default 0
*/
defaultValue: {
type: Number,
default: 0
},
/**
* @zh-CN 图标尺寸
* @en-US Icon size
*/
size: {
type: String
},
/**
* @zh-CN 图标颜色
* @en-US Icon color
* @default 'normal'
*/
color: {
type: String,
default: "normal"
},
/**
* @zh-CN 是否只读
* @en-US Whether to read-only
* @default false
*/
readonly: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否支持半选
* @en-US Whether to support half selection
* @default false
*/
allowHalf: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否支持可清空
* @en-US Whether to support clearable
* @default false
*/
clearable: {
type: Boolean,
default: false
},
/**
* @zh-CN 提示文字（数组长度应该等于count）
* @en-US Prompt text (The length of the array should equal to count)
*/
labels: {
type: Array
}
};
const rateItemProps = {
/**
* @zh-CN 序号
* @en-US Index
*/
index: {
type: Number
},
/**
* @zh-CN 状态
* @en-US Status
* @default 'empty'
*/
status: {
type: String,
default: "empty"
}
};
const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
__name: "ORateItem",
props: rateItemProps,
emits: ["hover", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const onHover = (isHalf) => {
emits("hover", isHalf);
};
const onClick = (isHalf) => {
emits("change", isHalf);
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-rate-item", { "is-full": props.status === "full", "is-half": props.status === "half" }])
},
[
vue.createElementVNode(
"span",
{
class: "o-rate-icon o-rate-icon-top",
onMouseenter: _cache[0] || (_cache[0] = ($event) => onHover(true)),
onClick: _cache[1] || (_cache[1] = ($event) => onClick(true))
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createVNode(vue.unref(IconStar))
])
],
32
/* NEED_HYDRATION */
),
vue.createElementVNode(
"span",
{
class: "o-rate-icon o-rate-icon-bottom",
onMouseenter: _cache[2] || (_cache[2] = ($event) => onHover(false)),
onClick: _cache[3] || (_cache[3] = ($event) => onClick(false))
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createVNode(vue.unref(IconStar))
])
],
32
/* NEED_HYDRATION */
)
],
2
/* CLASS */
);
};
}
});
const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
__name: "ORate",
props: rateProps,
emits: ["update:modelValue", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const realValue = vue.ref(props.modelValue ?? props.defaultValue);
vue.watch(
() => props.modelValue,
(val) => {
if (!isUndefined(val)) {
realValue.value = val;
}
}
);
const hoverIndex = vue.ref(-1);
const setHoverIndex = (index, isTopIcon) => {
if (props.readonly) {
return;
}
hoverIndex.value = props.allowHalf && isTopIcon ? index + 0.5 : index + 1;
};
const resetHoverIndex = () => {
hoverIndex.value = -1;
};
const setValue = (index, isTopIcon) => {
if (props.readonly) {
return;
}
if (props.clearable && realValue.value === hoverIndex.value) {
resetHoverIndex();
realValue.value = 0;
emits("update:modelValue", 0);
emits("change", 0);
} else {
hoverIndex.value = props.allowHalf && isTopIcon ? index + 0.5 : index + 1;
realValue.value = hoverIndex.value;
emits("update:modelValue", hoverIndex.value);
emits("change", hoverIndex.value);
}
};
const iconStatus = vue.computed(() => {
const statusArr = new Array(props.count).fill("");
for (let i = 0; i < props.count; i++) {
const val = hoverIndex.value === -1 ? realValue.value ?? -1 : hoverIndex.value;
if (!props.allowHalf) {
if (i + 1 <= val) {
statusArr[i] = "full";
}
} else {
if (i + 1 <= Math.floor(val)) {
statusArr[i] = "full";
} else if (i + 1 === Math.ceil(val)) {
statusArr[i] = "half";
}
}
}
return statusArr;
});
const showLabel = vue.computed(() => {
if (!isArray(props.labels)) {
return false;
}
return props.labels.length === props.count;
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-rate", [`o-rate-${props.color}`, `o-rate-${props.size || vue.unref(defaultSize)}`, { "o-rate-readonly": props.readonly }]]),
onMouseleave: resetHoverIndex
},
[
showLabel.value ? (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
vue.renderList(_ctx.count, (item, idx) => {
return vue.openBlock(), vue.createBlock(
vue.unref(OPopover),
{
key: item,
"adjust-width": false,
"adjust-min-width": false,
visible: false,
"wrap-class": "o-rate-popover"
},
{
target: vue.withCtx(() => [
vue.createVNode(_sfc_main$Z, {
status: iconStatus.value[idx] || "empty",
onHover: (isHalf) => {
setHoverIndex(idx, isHalf);
},
onChange: (isHalf) => {
setValue(idx, isHalf);
}
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon", {
index: idx,
status: iconStatus.value[idx]
})
]),
_: 2
/* DYNAMIC */
}, 1032, ["status", "onHover", "onChange"])
]),
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(_ctx.labels && _ctx.labels[idx]),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
);
}),
128
/* KEYED_FRAGMENT */
)) : (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(_ctx.count, (item, idx) => {
return vue.openBlock(), vue.createBlock(_sfc_main$Z, {
key: item,
index: idx,
status: iconStatus.value[idx] || "empty",
onHover: (isHalf) => {
setHoverIndex(idx, isHalf);
},
onChange: (isHalf) => {
setValue(idx, isHalf);
}
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon", {
index: idx,
status: iconStatus.value[idx]
})
]),
_: 2
/* DYNAMIC */
}, 1032, ["index", "status", "onHover", "onChange"]);
}),
128
/* KEYED_FRAGMENT */
))
],
34
/* CLASS, NEED_HYDRATION */
);
};
}
});
const ORate = Object.assign(_sfc_main$Y, {
install(app) {
app.component("ORate", _sfc_main$Y);
}
});
const ResultStatusTypes = ["info", "success", "warning", "danger"];
const resultProps = {
/**
* @zh-CN 状态
* @en-US Status.
*/
status: {
type: String
},
/**
* @zh-CN 标题
* @en-US Title.
*/
title: {
type: String
},
/**
* @zh-CN 描述
* @en-US Description.
*/
description: {
type: String
}
};
const _hoisted_1$J = {
key: 0,
class: "o-result-image"
};
const _hoisted_2$t = {
key: 1,
class: "o-result-header"
};
const _hoisted_3$l = {
key: 1,
class: "o-result-title"
};
const _hoisted_4$h = {
key: 2,
class: "o-result-description"
};
const _hoisted_5$g = {
key: 3,
class: "o-result-extra"
};
const _hoisted_6$7 = {
key: 4,
class: "o-result-content"
};
const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
__name: "OResult",
props: resultProps,
setup(__props) {
const props = __props;
const iconMap = {
info: IconInfo.value,
success: IconSuccess.value,
warning: IconWarning.value,
danger: IconDanger.value
};
const icon = vue.computed(() => props.status ? iconMap[props.status] : void 0);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-result", { [`o-result-${props.status}`]: props.status }])
},
[
_ctx.$slots.image ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J, [
vue.renderSlot(_ctx.$slots, "image")
])) : vue.createCommentVNode("v-if", true),
props.status || _ctx.$slots.icon || props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$t, [
props.status || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-result-icon", { "o-result-icon-custom": _ctx.$slots.icon }])
},
[
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(icon.value)))
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true),
props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$l, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.title),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true),
props.description || _ctx.$slots.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$h, [
vue.renderSlot(_ctx.$slots, "description", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.description),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true),
_ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$g, [
vue.renderSlot(_ctx.$slots, "extra")
])) : vue.createCommentVNode("v-if", true),
_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$7, [
vue.renderSlot(_ctx.$slots, "default")
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
const OResult = Object.assign(_sfc_main$X, {
install(app) {
app.component("OResult", _sfc_main$X);
}
});
const skeletonTextProps = {
/**
* @zh-CN 文本行数
* @en-US Number of lines of text.
* @default 3
*/
rows: {
type: Number,
default: 3
}
};
const SkeletonAvatarSizeTypes = ["large", "medium", "small", "mini"];
const skeletonAvatarProps = {
/**
* @zh-CN 头像尺寸
* @en-US Avatar size.
* @default 'medium'
*/
size: {
type: String,
default: "medium"
},
/**
* @zh-CN 圆角值
* @en-US Round.
* @default 'pill'
*/
round: {
type: String,
default: "pill"
}
};
const skeletonFigureProps = {};
const skeletonProps = {
/**
* @zh-CN 是否显示加载中状态（即展示骨架屏）
* @en-US Whether to display the loading status (i.e., show the skeleton screen).
* @default true
*/
loading: {
type: Boolean,
default: true
},
/**
* @zh-CN 是否展示动画
* @en-US Whether to display the animation.
* @default false
*/
animation: {
type: Boolean,
default: false
},
/**
* @zh-CN 文本行数
* @en-US Number of lines of textd.
* @default 3
*/
rows: {
type: Number,
default: 3
}
};
const _hoisted_1$I = { class: "o-skeleton-item o-skeleton-text" };
const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
__name: "OSkeletonText",
props: skeletonTextProps,
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$I, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(props.rows, (item) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: item,
class: "o-skeleton-line"
});
}),
128
/* KEYED_FRAGMENT */
))
]);
};
}
});
const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
__name: "OSkeleton",
props: skeletonProps,
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
return props.loading ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-skeleton", { "o-skeleton-animation": props.animation }])
},
[
vue.renderSlot(_ctx.$slots, "template", {}, () => [
vue.createVNode(_sfc_main$W, {
rows: props.rows
}, null, 8, ["rows"])
])
],
2
/* CLASS */
)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 });
};
}
});
const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
__name: "OSkeletonAvatar",
props: skeletonAvatarProps,
setup(__props) {
const props = __props;
const round2 = getRoundClass(props, "skeleton");
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-skeleton-item o-skeleton-avatar", [`o-skeleton-avatar-${props.size}`, vue.unref(round2).class.value]]),
style: vue.normalizeStyle(vue.unref(round2).style.value)
},
null,
6
/* CLASS, STYLE */
);
};
}
});
const _sfc_main$T = {};
const _hoisted_1$H = { class: "o-skeleton-item o-skeleton-figure" };
function _sfc_render(_ctx, _cache) {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H);
}
const OSkeletonFigure = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render]]);
const OSkeleton = Object.assign(_sfc_main$V, {
OSkeletonText: _sfc_main$W,
OSkeletonAvatar: _sfc_main$U,
OSkeletonFigure,
install(app) {
app.component("OSkeleton", _sfc_main$V);
app.component("OSkeletonText", _sfc_main$W);
app.component("OSkeletonAvatar", _sfc_main$U);
app.component("OSkeletonFigure", OSkeletonFigure);
}
});
const SwitchSizeTypes = ["medium", "small"];
const switchProps = {
/**
* @zh-CN 双向绑定值
* @en-US Two-way binding value
*/
modelValue: {
type: [String, Number, Boolean],
// type 类型校验中包含 Boolean 类型时，vue 会将 undefined 转化为 false，这将导致非受控模式判断出问题，因此显示指定 default: undefined
default: void 0
},
/**
* @zh-CN 非受控状态时，默认是否选中
* @en-US Default whether to select when uncontrolled
* @default false
*/
defaultChecked: {
type: Boolean,
default: false
},
/**
* @zh-CN 选中状态对应值
* @en-US Value corresponding to selected state
* @default true
*/
checkedValue: {
type: [String, Number, Boolean],
default: true
},
/**
* @zh-CN 未选中状态对应值
* @en-US Value corresponding to unselected state
* @default false
*/
uncheckedValue: {
type: [String, Number, Boolean],
default: false
},
/**
* @zh-CN 组件尺寸
* @en-US Component size
* @default 'medium'
*/
size: {
type: String,
default: "medium"
},
/**
* @zh-CN 圆角大小
* @en-US Round size
*/
round: {
type: String
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable
*/
disabled: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否处于加载状态
* @en-US Is loading
*/
loading: {
type: Boolean,
default: false
},
/**
* @zh-CN 状态改变前的钩子函数
* @en-US Hook function before state change
*/
beforeChange: {
type: Function
}
};
const _hoisted_1$G = { class: "o-switch-wrap" };
const _hoisted_2$s = { class: "o-switch-handler" };
const _hoisted_3$k = {
key: 0,
class: "o-switch-icon-loading o-rotating"
};
const _hoisted_4$g = {
key: 1,
class: "o-switch-icon-wrap"
};
const _hoisted_5$f = {
key: 0,
class: "o-switch-label"
};
const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
__name: "OSwitch",
props: switchProps,
emits: ["update:modelValue", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const slots = vue.useSlots();
const emits = __emit;
const round2 = getRoundClass(props, "switch");
const _checked = vue.ref(props.defaultChecked);
const isChecked = vue.computed(() => {
if (!isUndefined(props.modelValue)) {
return props.checkedValue === props.modelValue;
}
return _checked.value;
});
const isCustomIcon = vue.computed(() => {
return !isEmptySlot(slots.active) || !isEmptySlot(slots.inactive);
});
vue.watch(
isChecked,
(val) => {
_checked.value = val;
},
{ immediate: true }
);
const isChangeable = () => {
if (props.loading || props.disabled) {
return Promise.resolve(false);
}
if (!props.beforeChange) {
return Promise.resolve(true);
}
const res = props.beforeChange(!isChecked.value);
if (!(isPromise(res) || isBoolean(res))) {
return Promise.reject("beforeChange should return type `Promise<boolean>` or `boolean`");
}
return isBoolean(res) ? Promise.resolve(res) : res;
};
const onClick = (ev) => {
isChangeable().then((flag) => {
if (flag) {
const checked = !isChecked.value;
_checked.value = checked;
const val = checked ? props.checkedValue : props.uncheckedValue;
emits("update:modelValue", val);
emits("change", val, ev);
}
}).catch((err) => {
log$1.warn(`${err}`);
});
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-switch", [
`o-switch-${props.size}`,
vue.unref(round2).class.value,
{ "o-switch-checked": isChecked.value },
{ "o-switch-disabled": props.disabled },
{ "o-switch-loading": props.loading },
{ "o-switch-custom": isCustomIcon.value }
]]),
style: vue.normalizeStyle(vue.unref(round2).style.value),
onClick
},
[
vue.createElementVNode("div", _hoisted_1$G, [
vue.createElementVNode("div", _hoisted_2$s, [
props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$k, [
vue.createVNode(vue.unref(IconLoading))
])) : vue.createCommentVNode("v-if", true),
(_ctx.$slots.active || _ctx.$slots.inactive) && !props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$g, [
isChecked.value ? vue.renderSlot(_ctx.$slots, "active", { key: 0 }) : vue.renderSlot(_ctx.$slots, "inactive", { key: 1 })
])) : vue.createCommentVNode("v-if", true)
]),
_ctx.$slots.on || _ctx.$slots.off ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$f, [
isChecked.value ? vue.renderSlot(_ctx.$slots, "on", { key: 0 }) : vue.renderSlot(_ctx.$slots, "off", { key: 1 })
])) : vue.createCommentVNode("v-if", true)
])
],
6
/* CLASS, STYLE */
);
};
}
});
const OSwitch = Object.assign(_sfc_main$S, {
install(app) {
app.component("OSwitch", _sfc_main$S);
}
});
const tabInjectKey = Symbol("provide-tab");
const TabVariantTypes = ["solid", "text", "button"];
const tabProps = {
/**
* @zh-CN 选中页签值 v-model
* @en-US Selected tab value v-model
*/
modelValue: {
type: [String, Number],
default: void 0
},
/**
* @zh-CN 页签类型
* @en-US Tab variant
* @default 'text'
* @since 1.2.0 新增button模式
*/
variant: {
type: String,
default: "text"
},
/**
* @zh-CN 页签尺寸
* @en-US Tab size
*/
size: {
type: String
},
/**
* @zh-CN 圆角值(仅button模式可用)
* @en-US Border radius(Only available in button mode)
* @since 1.2.0
*/
round: {
type: String
},
/**
* @zh-CN 是否首次激活后再渲染
* @en-US Whether to render the tab content after the first activation
*/
lazy: {
type: Boolean
},
/**
* @zh-CN 是否可添加页签
* @en-US Whether tabs can be added
*/
addable: {
type: Boolean
},
/**
* @zh-CN 是否激活新添加的页签
* @en-US Whether to activate the newly added tab
*/
addInactive: {
type: Boolean
},
/**
* @zh-CN 最大展示个数，超过时使用“更多”展示
* @en-US Max display count; show via Show more when exceeded.
* @since 1.2.0
*/
maxShow: {
type: Number
},
/**
* @zh-CN 超出个数隐藏时按钮的文案，默认“更多”
* @en-US The button text when items are hidden for exceeding the maximum count, with the default value of “more”.
* @since 1.2.0
*/
moreLabel: {
type: String
},
/**
* @zh-CN 是否展示nav线(button模式不可用)
* @en-US Whether to show the nav line(Unavailable in button mode)
* @default true
* @since 1.2.0
*/
line: {
type: Boolean,
default: true
},
/**
* @zh-CN 是否是反色模式的button
* @en-US Whether inverse mode button
* @default false
* @since 1.2.0
*/
buttonInverse: {
type: Boolean,
default: false
},
/**
* @zh-CN 头部自定义样式类名
* @en-US Header custom style class name
* @since 1.2.0
*/
headerClass: {
type: [String, Array, Object]
}
};
const tabPaneProps = {
/**
* @zh-CN 页签值
* @en-US Tab value
*/
value: {
type: [String, Number],
default: void 0
},
/**
* @zh-CN 页签标题
* @en-US Tab title
*/
label: {
type: String,
default: void 0
},
/**
* @zh-CN 页签切换时过渡动画
* @en-US Transition animation for tab switching
* @default 'o-fade-in'
*/
transition: {
type: String,
default: "o-fade-in"
},
/**
* @zh-CN 是否禁用选中该页签
* @en-US Whether to disable selecting this tab
* @default false
*/
disabled: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否可以删除该页签
* @en-US Whether the tab can be deleted
* @default false
*/
closable: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否在首次激活时才渲染页签内容
* @en-US Whether to render the tab content only when the tab is first activated
* @default false
*/
lazy: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否在隐藏时卸载页签内容
* @en-US Whether to unmount the tab content when hidden
* @default false
*/
unmountOnHide: {
type: Boolean,
default: false
}
};
const _hoisted_1$F = ["data-tab-pane-key"];
const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
__name: "OTabPane",
props: tabPaneProps,
setup(__props) {
const props = __props;
vue.useSlots();
const runtimeSlots = vue.useSlots();
const tabInjection = vue.inject(tabInjectKey);
const instance2 = vue.getCurrentInstance();
if (isUndefined(props.value) && isUndefined(props.label)) {
log$1.warn("OTabPane is missing prop: value or label");
}
const paneKey = vue.computed(() => {
return props.value ?? props.label ?? (instance2 == null ? void 0 : instance2.uid) ?? Math.random();
});
const registerSelf = () => {
tabInjection == null ? void 0 : tabInjection.addChild({
uid: instance2.uid,
getVNode: () => instance2 == null ? void 0 : instance2.vnode,
props,
paneKey,
navRenderer: isEmptySlot(runtimeSlots.nav) ? void 0 : () => {
var _a;
return (_a = runtimeSlots.nav) == null ? void 0 : _a.call(runtimeSlots);
}
});
};
registerSelf();
const isActive = vue.computed(() => {
var _a;
return paneKey.value === ((_a = tabInjection == null ? void 0 : tabInjection.activeValue) == null ? void 0 : _a.value);
});
const hasActived = vue.ref(isActive.value);
const toMount = vue.computed(() => {
if (isActive.value) {
return true;
}
if ((props.lazy || (tabInjection == null ? void 0 : tabInjection.lazy)) && !hasActived.value) {
return false;
}
if (props.unmountOnHide) {
return false;
}
return true;
});
vue.watch(
() => isActive.value,
(v) => {
if (v) {
hasActived.value = true;
}
}
);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Transition, {
name: props.transition
}, {
default: vue.withCtx(() => [
toMount.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass([
"o-tab-pane",
{
"o-tab-pane-active": isActive.value,
"o-tab-pane-disabled": props.disabled,
"o-tab-pane-closable": props.closable
}
]),
"data-tab-pane-key": paneKey.value
}, [
vue.renderSlot(_ctx.$slots, "default")
], 10, _hoisted_1$F)), [
[vue.vShow, isActive.value]
]) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 8, ["name"]);
};
}
});
const _hoisted_1$E = ["onClick"];
const _hoisted_2$r = ["onClick"];
const _hoisted_3$j = {
key: 0,
class: "o-tab-head-prefix"
};
const _hoisted_4$f = {
key: 1,
class: "o-tab-head-suffix"
};
const _hoisted_5$e = { class: "o-tab-body" };
const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
__name: "OTab",
props: tabProps,
emits: ["update:modelValue", "change", "delete", "add"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const round2 = getRoundClass(props, "tab-btn");
const { lePadV } = useScreen();
const { t } = useI18n();
const moreLabel = vue.computed(() => props.moreLabel || t("common.more"));
const activeKey = vue.ref(props.modelValue);
const anchorStyle = vue.ref({});
const navsContainerRef = vue.ref();
const { width: navsContainerWidth } = core.useElementBounding(navsContainerRef);
const navGapNumber = useResponseCssVar("--tab-nav-gap", navsContainerRef, {
initialValue: "32px",
transform(value) {
return Number.parseInt(value);
}
});
const tabNavMeasurementRef = vue.ref();
const { width: tabNavMeasurementWidth } = core.useElementBounding(tabNavMeasurementRef);
const ellipsisRef = vue.ref();
const { width: ellipsisWidth } = core.useElementBounding(ellipsisRef);
const navEllipsisShadowWidthNumber = useResponseCssVar("--tab-nav-ellipsis-shadow-width", navsContainerRef, {
initialValue: "8px",
transform(value) {
return Number.parseInt(value);
}
});
const navListStyle = vue.computed(() => {
if (props.variant === "button" || lePadV.value) {
return;
}
if (props.maxShow && props.maxShow > 0) {
return { width: `${navsContainerWidth.value}px` };
}
if (ellipsisWidth.value) {
return { width: `${navsContainerWidth.value - ellipsisWidth.value - navEllipsisShadowWidthNumber.value}px` };
}
return void 0;
});
const tabNavRef = vue.ref();
const tabNavLeftOverflown = vue.ref(false);
const tabNavRightOverflown = vue.ref(false);
const checkOverflow = debounceRAF(() => {
if (!lePadV.value || !tabNavRef.value) {
return;
}
const result = checkElementOverflowHorizontal({ element: tabNavRef.value, threshold: 1 });
tabNavLeftOverflown.value = result.isOverflowLeft;
tabNavRightOverflown.value = result.isOverflowRight;
});
core.until(tabNavRef).toBeTruthy().then(checkOverflow);
const instance2 = vue.getCurrentInstance();
const { children: sortedChildren, childMap, addChild, OTeleportWrapper } = useSortedTeleportChildren(instance2, _sfc_main$R);
const uidSet = vue.computed(() => sortedChildren.value.map((c) => c.uid));
const showUids = vue.ref([]);
const hiddenUids = vue.ref([]);
const paneKeyToUid = vue.computed(() => {
const map = /* @__PURE__ */ new Map();
sortedChildren.value.forEach((c) => {
map.set(vue.toValue(c.paneKey), c.uid);
});
return map;
});
vue.watch(uidSet, () => {
showUids.value = showUids.value.filter((uid) => uidSet.value.includes(uid));
hiddenUids.value = hiddenUids.value.filter((uid) => uidSet.value.includes(uid));
});
const getChildData = (uid) => childMap[uid];
const pushShowUid = (localShow, uid, widthCount) => {
const item = getChildData(uid);
const { navElWidth } = item;
const gap = widthCount > 0 ? navGapNumber.value : 0;
const isWidthWillExceed = widthCount + gap + navElWidth > navsContainerWidth.value;
const isShowNumWillExceed = isUndefined(props.maxShow) ? false : localShow.length + 1 > props.maxShow;
if (!isWidthWillExceed && !isShowNumWillExceed) {
localShow.push(uid);
return widthCount + gap + navElWidth;
}
return widthCount;
};
const sortUidList = debounceRAF(() => {
if (props.variant === "button" || lePadV.value) {
showUids.value = uidSet.value;
hiddenUids.value = [];
return;
}
uidSet.value.forEach((uid) => {
const item = getChildData(uid);
if (item == null ? void 0 : item.navMeasureEl) {
item.navElWidth = item.navMeasureEl.clientWidth;
}
});
let localShow = [...showUids.value];
let widthCount = 0;
if (!localShow.length) {
uidSet.value.forEach((uid) => {
widthCount = pushShowUid(localShow, uid, widthCount);
});
}
widthCount = localShow.reduce((count, uid) => {
const item = getChildData(uid);
return count + item.navElWidth + navGapNumber.value;
}, -navGapNumber.value);
const isTotalWidthExceed = tabNavMeasurementWidth.value > navsContainerWidth.value;
const isTotalNumExceed = isUndefined(props.maxShow) ? false : uidSet.value.length > props.maxShow;
if (isTotalWidthExceed || isTotalNumExceed) {
widthCount += isUndefined(props.maxShow) ? navEllipsisShadowWidthNumber.value : navGapNumber.value;
widthCount += ellipsisWidth.value;
}
const activeUid = activeKey.value != null ? paneKeyToUid.value.get(activeKey.value) : void 0;
let activeItemIndex = localShow.findIndex((uid) => uid === activeUid);
if (activeItemIndex === -1 && activeUid != null) {
const activeItemIndexInTotal = uidSet.value.findIndex((uid) => uid === activeUid);
const targetIndex = activeItemIndexInTotal === 0 ? 0 : localShow.findIndex((uid, i) => {
if (i === localShow.length - 1) {
return true;
}
const curIndexInTotal = uidSet.value.findIndex((v) => v === uid);
const nextIndexInTotal = uidSet.value.findIndex((v) => v === localShow[i + 1]);
if (curIndexInTotal < activeItemIndexInTotal && nextIndexInTotal > activeItemIndexInTotal) {
return true;
}
return false;
}) + 1;
const activeItem = getChildData(activeUid);
localShow.splice(targetIndex, 0, activeUid);
widthCount += activeItem.navElWidth;
widthCount += navGapNumber.value;
activeItemIndex = localShow.length - 1;
}
const getIsShowWidthExceed = () => widthCount > navsContainerWidth.value;
const getIsShowNumExceed = () => isUndefined(props.maxShow) ? false : localShow.length > props.maxShow;
while ((getIsShowWidthExceed() || getIsShowNumExceed()) && localShow.length > 1) {
activeItemIndex = localShow.findIndex((uid) => uid === activeUid);
const removedUid = activeItemIndex === localShow.length - 1 ? localShow.shift() : localShow.pop();
const shiftedItem = getChildData(removedUid);
widthCount -= shiftedItem.navElWidth;
widthCount -= navGapNumber.value;
}
let localHidden = uidSet.value.filter((uid) => !localShow.includes(uid));
localHidden.forEach((uid) => {
widthCount = pushShowUid(localShow, uid, widthCount);
});
localHidden = uidSet.value.filter((uid) => !localShow.includes(uid));
localShow.sort((a, b) => {
return uidSet.value.findIndex((v) => v === a) - uidSet.value.findIndex((v) => v === b);
});
localHidden.sort((a, b) => {
return uidSet.value.findIndex((v) => v === a) - uidSet.value.findIndex((v) => v === b);
});
showUids.value = localShow;
hiddenUids.value = localHidden;
});
vue.onMounted(() => {
vue.watch(
[
uidSet,
activeKey,
navsContainerWidth,
tabNavMeasurementWidth,
() => props.maxShow,
() => props.variant,
ellipsisWidth,
navGapNumber,
navEllipsisShadowWidthNumber
],
() => {
sortUidList();
},
{
immediate: true,
deep: true
}
);
});
const [DefineTabNavTemplate, ReuseTabNavTemplate] = core.createReusableTemplate();
const isEllipsisOptionShow = vue.ref(false);
const updateAnchor = async () => {
if (isUndefined(activeKey.value)) {
return;
}
const activeUid = paneKeyToUid.value.get(activeKey.value);
if (activeUid == null) {
return;
}
const activeItem = getChildData(activeUid);
await core.until(() => (activeItem == null ? void 0 : activeItem.navEl) && activeItem.navMeasureEl).toBeTruthy();
const { clientWidth, offsetLeft } = activeItem.navEl;
anchorStyle.value = {
transform: `translate3d(${offsetLeft}px, 0px, 0px)`,
width: `${clientWidth}px`
};
};
const scrollActiveIntoView = async () => {
var _a;
if (!lePadV.value || !navsContainerRef.value) {
return;
}
if (isUndefined(activeKey.value)) {
return;
}
const activeUid = paneKeyToUid.value.get(activeKey.value);
if (activeUid == null) {
return;
}
const activeItem = getChildData(activeUid);
await core.until(() => activeItem == null ? void 0 : activeItem.navEl).toBeTruthy();
(_a = activeItem.navEl) == null ? void 0 : _a.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center"
});
};
vue.onMounted(() => {
scrollActiveIntoView();
});
vue.watch(
[showUids, activeKey],
() => {
updateAnchor();
scrollActiveIntoView();
},
{ immediate: true, deep: true }
);
const setNavEl = (el, uid) => {
if (el == null) {
return;
}
const item = getChildData(uid);
item.navEl = el;
};
const setNavMeasureEl = async (el, uid) => {
if (el == null) {
return;
}
const item = getChildData(uid);
item.navMeasureEl = el;
if (el) {
item.navElWidth = el.clientWidth;
}
};
const updateValue = async (uid) => {
const child = childMap[uid];
if (child.props.disabled) {
return;
}
const _value = vue.toValue(child.paneKey);
emits("update:modelValue", _value);
if (activeKey.value !== _value) {
emits("change", _value, activeKey.value);
activeKey.value = _value;
}
isEllipsisOptionShow.value = false;
};
vue.watch(
() => props.modelValue,
(v) => {
activeKey.value = v;
if (v != null) {
const uid = paneKeyToUid.value.get(v);
if (uid != null) {
updateValue(uid);
}
}
}
);
const onDeletePane = (e, uid) => {
var _a;
e.stopImmediatePropagation();
const child = childMap[uid];
const _value = vue.toValue(child.paneKey);
emits("delete", _value);
const idx = uidSet.value.indexOf(uid);
if (activeKey.value === _value) {
const targetUid = uidSet.value[idx > 0 ? idx - 1 : idx + 1];
activeKey.value = vue.toValue((_a = childMap[targetUid]) == null ? void 0 : _a.paneKey);
emits("change", activeKey.value, _value);
}
};
const isAdding = vue.ref(false);
const onAddNav = (e) => {
emits("add", e);
if (!props.addInactive) {
isAdding.value = true;
}
};
vue.provide(tabInjectKey, {
lazy: props.lazy,
activeValue: activeKey,
addChild: (child) => {
addChild(child);
if (activeKey.value === void 0 || isAdding.value) {
updateValue(child.uid);
}
}
});
const onHeadItemResize = debounceRAF((uid) => {
const item = getChildData(uid);
if (!(item == null ? void 0 : item.navMeasureEl)) {
return;
}
item.navElWidth = item.navMeasureEl.clientWidth;
});
const onHeadResize = debounceRAF(() => {
checkOverflow();
updateAnchor();
scrollActiveIntoView();
});
core.useMutationObserver(
tabNavRef,
(mutations) => {
if (mutations[0]) {
onHeadResize();
}
},
{ childList: true }
);
vue.watch(lePadV, () => {
onHeadResize();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-tab", [
`o-tab-${props.variant}`,
{ "o-tab-button-inverse": props.variant === "button" && props.buttonInverse },
`o-tab-${props.size || vue.unref(defaultSize)}`,
vue.unref(round2).class.value
]]),
style: vue.normalizeStyle(vue.unref(round2).style.value)
},
[
vue.createVNode(vue.unref(DefineTabNavTemplate), null, {
default: vue.withCtx(({ uid, measurement }) => [
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref: (el) => measurement ? setNavMeasureEl(el, uid) : setNavEl(el, uid),
class: vue.normalizeClass([
"o-tab-nav",
{
"o-tab-nav-active": vue.toValue(vue.unref(childMap)[uid].paneKey) === activeKey.value,
"o-tab-nav-disabled": vue.unref(childMap)[uid].props.disabled,
"o-tab-nav-closable": vue.unref(childMap)[uid].props.closable
}
]),
onClick: () => updateValue(uid)
}, [
vue.unref(childMap)[uid].navRenderer ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(childMap)[uid].navRenderer), { key: 0 })) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createTextVNode(
vue.toDisplayString(vue.unref(childMap)[uid].props.label || vue.unref(childMap)[uid].props.value),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
)),
vue.unref(childMap)[uid].props.closable ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: "o-tab-nav-close",
onClick: (e) => onDeletePane(e, uid)
}, [
vue.createVNode(vue.unref(IconClose))
], 8, _hoisted_2$r)) : vue.createCommentVNode("v-if", true)
], 10, _hoisted_1$E)), [
[vue.unref(vOnResize), measurement ? () => vue.unref(onHeadItemResize)(uid) : () => {
}]
])
]),
_: 1
/* STABLE */
}),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"o-tab-head",
vue.unref(mergeClass)(
{
"with-act": !!_ctx.$slots.suffix || !!_ctx.$slots.prefix,
"show-line": !!props.line && props.variant !== "button"
},
props.headerClass
)
])
},
[
_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$j, [
vue.renderSlot(_ctx.$slots, "prefix")
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass({ "o-tab-navs": true, "o-tab-navs-overflown-left": tabNavLeftOverflown.value, "o-tab-navs-overflown-right": tabNavRightOverflown.value })
},
[
vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "navsContainerRef",
ref: navsContainerRef,
class: vue.normalizeClass({
"o-tab-navs-container": true,
overflown: hiddenUids.value.length,
"o-tab-navs-container-mb-overflown": tabNavLeftOverflown.value || tabNavRightOverflown.value
}),
onScroll: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => vue.unref(checkOverflow) && vue.unref(checkOverflow)(...args))
},
[
vue.createCommentVNode(" 渲染一个全宽但是零高度的节点来测量每个节点的宽度，以计算溢出情况 "),
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref_key: "tabNavMeasurementRef",
ref: tabNavMeasurementRef,
class: "o-tab-nav-list width-measurement"
}, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(uidSet.value, (uid) => {
return vue.openBlock(), vue.createBlock(vue.unref(ReuseTabNavTemplate), {
key: vue.unref(childMap)[uid].paneKey,
uid,
measurement: true
}, null, 8, ["uid"]);
}),
128
/* KEYED_FRAGMENT */
))
])), [
[vue.vShow, !vue.unref(lePadV)],
[vue.unref(vOnResize), vue.unref(onHeadResize)]
]),
vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "tabNavRef",
ref: tabNavRef,
class: "o-tab-nav-list",
style: vue.normalizeStyle(navListStyle.value)
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(showUids.value, (uid) => {
return vue.openBlock(), vue.createBlock(vue.unref(ReuseTabNavTemplate), {
key: vue.unref(childMap)[uid].paneKey,
uid
}, null, 8, ["uid"]);
}),
128
/* KEYED_FRAGMENT */
)),
props.variant !== "button" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
ref_key: "ellipsisRef",
ref: ellipsisRef,
class: vue.normalizeClass([
"o-tab-nav",
{
"o-tab-nav-active": props.maxShow && isEllipsisOptionShow.value,
"o-tab-nav-ellipsis": vue.unref(isUndefined)(props.maxShow)
}
])
},
[
props.maxShow ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createTextVNode(
vue.toDisplayString(moreLabel.value) + " ",
1
/* TEXT */
),
vue.createVNode(vue.unref(IconChevronDown), {
class: vue.normalizeClass({ "o-tab-nav-more-arrow": true, active: isEllipsisOptionShow.value })
}, null, 8, ["class"])
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createTextVNode("...")
],
64
/* STABLE_FRAGMENT */
))
],
2
/* CLASS */
)), [
[vue.vShow, hiddenUids.value.length]
]) : vue.createCommentVNode("v-if", true)
],
4
/* STYLE */
)), [
[vue.unref(vOnResize), vue.unref(onHeadResize)]
]),
props.variant === "text" ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: "o-tab-nav-anchor",
style: vue.normalizeStyle(anchorStyle.value)
},
[
vue.renderSlot(_ctx.$slots, "anchor", {}, () => [
_cache[2] || (_cache[2] = vue.createElementVNode(
"div",
{ class: "o-tab-nav-anchor-line" },
null,
-1
/* CACHED */
))
])
],
4
/* STYLE */
)) : vue.createCommentVNode("v-if", true)
],
34
/* CLASS, NEED_HYDRATION */
)), [
[vue.unref(vOnResize), vue.unref(onHeadResize)]
]),
props.addable ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "o-tab-nav-add",
onClick: onAddNav
}, [
vue.createVNode(vue.unref(IconAdd))
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
),
_ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$f, [
vue.renderSlot(_ctx.$slots, "suffix")
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
),
vue.createElementVNode("div", _hoisted_5$e, [
vue.createVNode(vue.unref(OTeleportWrapper), null, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
})
]),
vue.createVNode(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(OPopup), {
visible: isEllipsisOptionShow.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => isEllipsisOptionShow.value = $event),
"wrap-class": "o-options-popup o-tab-more-popup",
"body-class": "o-popup-body",
position: "bl",
wrapper: "body",
target: ellipsisRef.value,
trigger: ["click-outclick", "hover"],
offset: 4
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(_sfc_main$1w), { "wrap-class": "o-scrollbar-container" }, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(hiddenUids.value, (uid) => {
return vue.openBlock(), vue.createBlock(vue.unref(OOption), {
key: uid,
value: vue.toValue(vue.unref(childMap)[uid].paneKey),
onClick: ($event) => updateValue(uid)
}, {
default: vue.withCtx(() => [
vue.unref(childMap)[uid].navRenderer ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(childMap)[uid].navRenderer), { key: 0 })) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createTextVNode(
vue.toDisplayString(vue.unref(childMap)[uid].props.label || vue.unref(childMap)[uid].props.value),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
]),
_: 2
/* DYNAMIC */
}, 1032, ["value", "onClick"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
}, 8, ["visible", "target"])
]),
_: 1
/* STABLE */
})
],
6
/* CLASS, STYLE */
);
};
}
});
const OTab = Object.assign(_sfc_main$Q, {
OTabPane: _sfc_main$R,
install(app) {
app.component("OTab", _sfc_main$Q);
app.component("OTabPane", _sfc_main$R);
}
});
const TableBorderTypes = ["all", "row", "column", "frame", "row-column", "row-frame", "column-frame", "none"];
const tableProps = {
/**
* @zh-CN 表头数据
* @en-US Table header data
*/
columns: {
type: Array
},
/**
* @zh-CN 表格数据
* @en-US Table data
*/
data: {
type: Array
},
/**
* @zh-CN 表格边框
* @en-US Table border
* @default 'row'
*/
border: {
type: String,
default: "row"
},
/**
* @zh-CN 表格斑马纹，仅body中无纵向合并单元格时生效
* @en-US Table striping, taking effect only when there are no vertically merged cells in the table body.
* @since 1.2.0
*/
stripe: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否使用小尺寸
* @en-US Use small size
*/
small: {
type: Boolean
},
/**
* @zh-CN 单元格合并（不含表头）
* @en-US Cell merge (excluding header)
*/
cellSpan: {
type: Function
},
/**
* @zh-CN 空数据提示文本
* @en-US Empty data prompt text
*/
emptyLabel: {
type: String
},
/**
* @zh-CN 是否显示加载中状态
* @en-US Whether to show loading state
*/
loading: {
type: Boolean
},
/**
* @zh-CN 加载中提示文本
* @en-US Loading prompt text
*/
loadingLabel: {
type: String
},
/**
* @zh-CN 是否高亮当前行
* @en-US Whether to highlight the current row
*/
highlightCurrentRow: {
type: Boolean,
default: false
}
};
function getColumnData(columns) {
if (!isArray(columns)) {
return [];
}
return columns.map((item) => {
if (isString(item)) {
return {
key: item,
label: item
};
}
return {
...item
};
});
}
function getSkipCell(rowIndex, columnIndex, span) {
const skip = {};
const { colspan = 1, rowspan = 1 } = span;
for (let i = 0; i < rowspan; i++) {
for (let j = 0; j < colspan; j++) {
if (i !== 0 || j !== 0) {
skip[`${rowIndex + i}-${columnIndex + j}`] = true;
}
}
}
return skip;
}
function getBodyData(columnData, bodyData, cellSpan) {
if (!bodyData) {
return [];
}
const t = bodyData.length;
const s = 0;
const colLength = columnData.value.length;
const rlt = [];
let span = null;
const skipCell = {};
const end = Math.min(s + t, bodyData.length);
for (let r = s; r < end; r += 1) {
const row = bodyData[r];
const cols = [];
for (let c = 0; c < colLength; c += 1) {
const col = columnData.value[c];
if (isFunction(cellSpan)) {
span = cellSpan(r, c, row, col);
}
const cell = {
value: row[col.key],
key: col.key
};
const { colspan = 1, rowspan = 1 } = span || {};
if (span) {
Object.assign(skipCell, getSkipCell(r, c, span));
if (colspan > 1) {
cell.colspan = colspan;
}
if (rowspan > 1) {
cell.rowspan = rowspan;
}
}
if (!skipCell[`${r}-${c}`]) {
if (c + colspan >= colLength) {
cell.last = true;
}
cols.push(cell);
}
}
rlt.push({ key: row.key, data: cols });
}
return rlt;
}
const DEFAULT_CELL_FIRST_COL_MARKER = "o-cell-first-col";
const DEFAULT_CELL_LAST_COL_MARKER = "o-cell-last-col";
const DEFAULT_CELL_LAST_ROW_MARKER = "o-cell-last-row";
const DEFAULT_ROW_LAST_MARKER = "o-row-last";
function fillGrid(grid, cellMeta) {
for (let r = cellMeta.rowStart; r < cellMeta.rowEnd; r++) {
if (!grid[r]) grid[r] = [];
for (let c = cellMeta.colStart; c < cellMeta.colEnd; c++) {
grid[r][c] = cellMeta;
}
}
}
function processSection(section, scope, cellMap) {
const rows = section.rows;
const grid = [];
const rtn = {
data: grid,
totalRows: 0,
totalCols: 0,
rows: Array.from(rows),
sectionEl: section,
scope
};
let maxCols = 0;
for (let i = 0; i < rows.length; i++) {
grid.push([]);
}
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
const row = rows[rowIndex];
let colIndex = 0;
let colEnd = 0;
for (const cell of Array.from(row.cells)) {
const colspan = cell.colSpan || 1;
const rowspan = cell.rowSpan || 1;
while (grid[rowIndex][colIndex] !== void 0) {
colIndex++;
}
colEnd = colIndex + colspan;
const cellMeta = {
el: cell,
colStart: colIndex,
rowStart: rowIndex,
colEnd,
rowEnd: rowIndex + rowspan,
lastCol: false,
lastRow: false,
section: rtn
};
cellMap.set(cell, cellMeta);
fillGrid(grid, cellMeta);
colIndex += colspan;
}
if (colEnd > maxCols && rowIndex > 0) {
log$1.warn(
`The row ${rowIndex + 1} has ${colEnd} columns, exceeding previous row's ${maxCols} columns. This may indicate inconsistent cell count or incorrect colspan/rowspan settings.`,
row
);
}
maxCols = Math.max(maxCols, colEnd);
}
rtn.totalCols = maxCols;
rtn.totalRows = rows.length;
return rtn;
}
function normalizeSection(section, maxCols) {
section.data.forEach((row) => {
if (row.length < maxCols) {
row.push(...Array(maxCols - row.length).fill(null));
}
});
section.totalCols = maxCols;
return section;
}
function markCellEl(cell, colMarker, rowMarker) {
if (colMarker) {
if (cell.lastCol) {
cell.el.classList.add(colMarker);
} else {
cell.el.classList.remove(colMarker);
}
}
if (rowMarker) {
if (cell.lastRow) {
cell.el.classList.add(rowMarker);
} else {
cell.el.classList.remove(rowMarker);
}
}
}
function markSection(section, isLastSection, marker) {
const { totalCols, totalRows, data } = section;
for (let rowIndex = 0; rowIndex < totalRows; rowIndex++) {
const isLastRow = rowIndex === totalRows - 1 && isLastSection;
const rowEl = section.rows[rowIndex];
if (marker.rowMarker && rowEl) {
if (isLastRow) {
rowEl.classList.add(marker.rowMarker);
} else {
rowEl.classList.remove(marker.rowMarker);
}
}
for (let colIndex = 0; colIndex < totalCols; colIndex++) {
const cell = data[rowIndex][colIndex];
if (cell && rowIndex === cell.rowStart && colIndex === cell.colStart) {
if (cell.colEnd === totalCols) {
cell.lastCol = true;
}
if (cell.rowEnd === totalRows && isLastSection) {
cell.lastRow = true;
}
markCellEl(cell, marker.cellColMarker, marker.cellRowMarker);
}
}
}
}
function markTable(sections, options) {
const { markCellLastCol, markCellLastRow, markRowLast, splitBySection } = options;
const marker = {
cellColMarker: markCellLastCol === true ? DEFAULT_CELL_LAST_COL_MARKER : markCellLastCol,
cellRowMarker: markCellLastRow === true ? DEFAULT_CELL_LAST_ROW_MARKER : markCellLastRow,
rowMarker: markRowLast === true ? DEFAULT_ROW_LAST_MARKER : markRowLast
};
const validSections = sections.filter(Boolean);
const lastSectionIdx = validSections.length - 1;
validSections.forEach((section, sectionIndex) => {
const isLastSection = splitBySection || sectionIndex === lastSectionIdx;
markSection(section, isLastSection, marker);
});
}
const processTable = (el, cellMap, options) => {
let head = null;
let foot = null;
let maxCols = 0;
if (el.tHead) {
head = processSection(el.tHead, "head", cellMap);
maxCols = Math.max(maxCols, head.totalCols);
}
const bodies = Array.from(el.tBodies).map((tbody, index) => {
const body = processSection(tbody, "body", cellMap);
if (body.totalCols > maxCols && maxCols > 0) {
log$1.warn(
`The tbody ${index + 1} has ${body.totalCols} columns, exceeding previous section's ${maxCols} columns. This may indicate inconsistent cell count or incorrect colspan/rowspan settings.`,
tbody
);
}
maxCols = Math.max(maxCols, body.totalCols);
return body;
});
if (el.tFoot) {
foot = processSection(el.tFoot, "foot", cellMap);
if (foot.totalCols > maxCols && maxCols > 0) {
log$1.warn(
`The tfoot section has ${foot.totalCols} columns, exceeding the ${maxCols} columns in thead or tbody. This may indicate inconsistent cell count or incorrect colspan/rowspan settings.`,
el.tFoot
);
}
maxCols = Math.max(maxCols, foot.totalCols);
}
if (head) {
normalizeSection(head, maxCols);
}
bodies.map((section) => normalizeSection(section, maxCols));
if (foot) {
normalizeSection(foot, maxCols);
}
markTable([head, ...bodies, foot], options);
return {
head,
bodies,
foot
};
};
function isSpanChange(record) {
return record.type === "attributes" && record.target instanceof HTMLTableCellElement;
}
function isTableChildChange(record) {
if (record.type === "childList") {
for (const node of record.addedNodes) {
if (node instanceof HTMLTableCellElement || node instanceof HTMLTableRowElement || node instanceof HTMLTableSectionElement) {
return true;
}
}
for (const node of record.removedNodes) {
if (node instanceof HTMLTableCellElement || node instanceof HTMLTableRowElement || node instanceof HTMLTableSectionElement) {
return true;
}
}
}
return false;
}
function shouldRefactorTableMeta(records) {
for (const record of records) {
if (isSpanChange(record)) {
return true;
}
if (isTableChildChange(record)) {
return true;
}
}
return false;
}
function useTableMeta(elRef, options = {}) {
const cellMap = /* @__PURE__ */ new WeakMap();
const head = vue.shallowRef(null);
const bodies = vue.shallowRef([]);
const foot = vue.shallowRef(null);
let mutationObserver = null;
const updateMeta = (el) => {
const _rtn = processTable(el, cellMap, options);
head.value = _rtn.head;
bodies.value = _rtn.bodies;
foot.value = _rtn.foot;
};
resolveHtmlElement(elRef).then((el) => {
if (!(el instanceof HTMLTableElement)) {
return;
}
updateMeta(el);
const deBounceUpdateMeta = debounce(updateMeta.bind(null, el), 16, false);
mutationObserver = new MutationObserver((mRecords) => {
if (shouldRefactorTableMeta(mRecords)) {
deBounceUpdateMeta();
}
});
mutationObserver.observe(el, { childList: true, subtree: true, attributes: true, attributeFilter: ["colspan", "rowspan"] });
});
vue.onBeforeUnmount(() => {
mutationObserver == null ? void 0 : mutationObserver.disconnect();
});
function getMeta(cellEl) {
return cellMap.get(cellEl) || null;
}
return {
head,
bodies,
foot,
getMeta
};
}
const useTableCommon = (options) => {
const { tableEl, border: border2, highlightCurrentRow: highlightCurrentRow2 } = options;
const { t } = useI18n();
const emptyLabel2 = vue.computed(() => {
var _a;
return ((_a = options.emptyLabel) == null ? void 0 : _a.value) || t("common.empty");
});
const loadingLabel2 = vue.computed(() => {
var _a;
return ((_a = options.loadingLabel) == null ? void 0 : _a.value) || t("common.loading");
});
const borderClass = vue.computed(() => {
if (isString(border2 == null ? void 0 : border2.value)) {
return border2.value.split("-").map((item) => `o-table-border-${item}`);
}
return "";
});
const tableMeta = useTableMeta(tableEl, { markCellLastCol: true, markCellLastRow: true, markRowLast: true });
const highlightedDoms = [];
let highlightTrigger = null;
const clearHighlight = () => {
if (!highlightCurrentRow2.value) {
return;
}
highlightedDoms.forEach((cell) => {
cell.classList.remove("o-table-highlight");
});
highlightedDoms.length = 0;
highlightTrigger = null;
};
const applyHighlight = (dom, className) => {
highlightedDoms.push(dom);
dom.classList.add(className);
};
const highlightTable = (cell) => {
if (highlightTrigger === cell) {
return;
}
clearHighlight();
highlightTrigger = cell;
const cellMeta = tableMeta.getMeta(cell);
if (!cellMeta || cellMeta.section.scope !== "body") {
return;
}
const section = cellMeta.section;
const rowEl = section.rows[cellMeta.rowStart];
const rowSpan = cellMeta.el.rowSpan;
const className = "o-table-highlight";
applyHighlight(rowEl, className);
if (rowSpan === 1) {
const rows = section.data[cellMeta.rowStart];
rows.forEach((item) => {
if (item && item.el.parentElement !== rowEl) {
applyHighlight(item.el, className);
}
});
} else {
for (let i = cellMeta.rowStart + 1; i < cellMeta.rowEnd; i++) {
const rowElItem = section.rows[i];
if (rowElItem) {
applyHighlight(rowElItem, className);
}
}
}
};
const getTdEl = (el) => {
if (!(el instanceof HTMLElement)) {
return null;
}
let current = el;
while (current && current.tagName !== "TD" && current.tagName !== "TH" && current !== vue.toValue(tableEl) && current !== document.body) {
current = current.parentElement;
}
return (current == null ? void 0 : current.tagName) === "TD" ? current : null;
};
const handleMouseOver = (e) => {
if (!highlightCurrentRow2.value) {
return;
}
const target = getTdEl(e.target);
if (!target || !isHoverDevice) {
return;
}
highlightTable(target);
};
const handleTouchStart = (e) => {
if (!highlightCurrentRow2.value) {
return;
}
const target = getTdEl(e.target);
if (!target) {
return;
}
highlightTable(target);
};
return {
emptyLabel: emptyLabel2,
loadingLabel: loadingLabel2,
borderClass,
handleMouseOver,
clearHighlight,
handleTouchStart
};
};
const _hoisted_1$D = { key: 0 };
const _hoisted_2$q = ["rowspan", "colspan"];
const _hoisted_3$i = {
key: 0,
class: "o-table-tip-wrap"
};
const _hoisted_4$e = { class: "o-table-empty-label" };
const _hoisted_5$d = {
key: 0,
class: "o-table-loading-wrap"
};
const _hoisted_6$6 = { class: "o-table-loading-label" };
const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
__name: "OTable",
props: tableProps,
setup(__props) {
const props = __props;
const columnData = vue.computed(() => getColumnData(props.columns));
const tableData = vue.computed(() => getBodyData(columnData, props.data, props.cellSpan));
const tableEl = vue.ref();
const { emptyLabel: emptyLabel2, loadingLabel: loadingLabel2, borderClass, handleMouseOver, clearHighlight, handleTouchStart } = useTableCommon({ ...vue.toRefs(props), tableEl });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-table", [
{
"o-table-stripe": props.stripe,
"o-table-small": props.small,
"o-table-medium": !props.small
}
]])
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-table-wrap", vue.unref(borderClass)])
},
[
vue.createElementVNode(
"table",
{
ref_key: "tableEl",
ref: tableEl
},
[
vue.createElementVNode("colgroup", null, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(columnData.value, (col) => {
return vue.openBlock(), vue.createElementBlock(
"col",
{
key: col.key,
style: vue.normalizeStyle(col.style)
},
null,
4
/* STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
]),
columnData.value.length > 1 ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1$D, [
vue.renderSlot(_ctx.$slots, "header", { columns: columnData.value }, () => [
vue.createElementVNode("tr", null, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(columnData.value, (col, idx) => {
return vue.openBlock(), vue.createElementBlock(
"th",
{
key: col.key || idx,
class: vue.normalizeClass({ [vue.unref(DEFAULT_CELL_LAST_COL_MARKER)]: idx + 1 === columnData.value.length })
},
[
vue.renderSlot(_ctx.$slots, `th_${col.key}`, { column: col }, () => [
vue.createTextVNode(
vue.toDisplayString(col.label),
1
/* TEXT */
)
])
],
2
/* CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
])
])
])) : vue.createCommentVNode("v-if", true),
tableData.value.length > 0 ? (vue.openBlock(), vue.createElementBlock(
"tbody",
{
key: 1,
onMousemove: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => vue.unref(handleMouseOver) && vue.unref(handleMouseOver)(...args)),
onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => vue.unref(clearHighlight) && vue.unref(clearHighlight)(...args)),
onTouchstart: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => vue.unref(handleTouchStart) && vue.unref(handleTouchStart)(...args))
},
[
vue.renderSlot(_ctx.$slots, "body", { body: tableData.value }, () => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(tableData.value, (row, rIdx) => {
return vue.openBlock(), vue.createElementBlock(
"tr",
{
key: row.key || rIdx,
class: vue.normalizeClass({ [vue.unref(DEFAULT_ROW_LAST_MARKER)]: rIdx + 1 === tableData.value.length })
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(row.data, (col, idx) => {
return vue.openBlock(), vue.createElementBlock("td", {
key: col.key || idx,
rowspan: col.rowspan,
colspan: col.colspan,
class: vue.normalizeClass({ [vue.unref(DEFAULT_CELL_LAST_COL_MARKER)]: col.last })
}, [
vue.renderSlot(_ctx.$slots, `td_${col.key}`, {
row: props.data ? props.data[rIdx] : {},
rowIndex: rIdx
}, () => [
vue.createTextVNode(
vue.toDisplayString(col.value),
1
/* TEXT */
)
])
], 10, _hoisted_2$q);
}),
128
/* KEYED_FRAGMENT */
))
],
2
/* CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
])
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
),
!props.data || props.data.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$i, [
!props.loading ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
vue.createElementVNode(
"div",
_hoisted_4$e,
vue.toDisplayString(vue.unref(emptyLabel2)),
1
/* TEXT */
)
]) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
),
props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$d, [
vue.renderSlot(_ctx.$slots, "loading", {}, () => [
vue.createVNode(vue.unref(IconLoading), { class: "o-rotating" }),
vue.createElementVNode(
"div",
_hoisted_6$6,
vue.toDisplayString(vue.unref(loadingLabel2)),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
const OTable = Object.assign(_sfc_main$P, {
install(app) {
app.component("OTable", _sfc_main$P);
}
});
const DataTableSizes = ["medium", "small"];
const DataTableHeaderStyles = ["fill", "split-line"];
const DataTableSortModes = ["single", "multiple"];
const DataTableFixedTypes = [true, "left", "right"];
const TABLE_EMPTY_OPTION_VALUE = "__null__";
const TABLE_ALL_OPTION_VALUE = "__all__";
const { emptyLabel, loading: loading$1, loadingLabel, border, stripe, highlightCurrentRow } = tableProps;
const dataTableProps = {
/**
* @zh-CN 表格数据
* @en-US Table data
*/
data: {
type: Array,
required: true
},
/**
* @zh-CN 列配置, IOS端不支持多列固定
* @en-US Table column schema， not support multi-column fixed in IOS
*/
columns: {
type: Array,
required: true
},
/**
* @zh-CN 表格尺寸
* @en-US table size
*/
size: {
type: String,
default: "medium"
},
/**
* @zh-CN 表格高度，超出时固定表头滚动
* @en-US Table Height: Fixed Header with Scrollable Body When Exceeding Height
*/
height: {
type: [Number, String]
},
/**
* @zh-CN 表格最大高度，超出时固定表头滚动
* @en-US Table Max Height: Fixed Header with Scrollable Body When Exceeding Height
*/
maxHeight: {
type: [Number, String],
default: "fit-content"
},
/**
* @zh-CN 内部table元素最小宽度，超出时出现横向滚动条
* @en-US min-width of the inner table element; a horizontal scrollbar will appear when it exceeds the available width.
*/
minTableWidth: {
type: [Number, String]
},
/**
* @zh-CN 表格数据行唯一标识字段名
* @en-US Unique Identifier Field Name for Table Data Rows
*/
rowKey: {
type: [String, Function],
default: "id"
},
/**
* @zh-CN 合并单元格的计算方法，已被合并的单元格不会再次被合并
* @en-US Calculation Methods for Merged Cells. Cells that have already been merged cannot be merged again
*/
spanMethod: {
type: Function,
default: () => () => void 0
},
/**
* @zh-CN 是否展示header
* @en-US Whether to show the header.
* @since 1.2.2
*/
showHeader: {
type: Boolean,
default: true
},
/**
* @zh-CN 表头风格
* @en-US table header style
* @since 1.2.2
*/
headerStyle: {
type: String,
default: "fill"
},
/**
* @zh-CN 排序模式，single 为单条件排序，multiple 为多条件排序
* @en-US Sort mode, 'single' for single-condition sort, 'multiple' for multi-condition sort
* @since 1.2.5
*/
sortMode: {
type: String,
default: "single"
},
/**
* @zh-CN 行展开的计算方法，返回 `false` 则不可被展开
* @en-US Calculation Methods for Row expansion. Returns `false` if the row cannot be expanded.
* @since 1.2.2
*/
expandMethod: {
type: Function
},
/**
* @zh-CN 表格是否可以调整列宽
* @en-US Resize column width
*/
columnResizable: {
type: Boolean,
default: false
},
/**
* @zh-CN 表格是否可以行选择
* @en-US Whether row selection is available for the table.
* @since 1.2.2
*/
selection: {
type: Boolean,
default: false
},
/**
* @zh-CN 选择时指示行是否可被选择的键名
* @en-US Key name for indicating row selectability during selection
* @since 1.2.2
*/
disabledProp: {
type: String,
default: "disabled"
},
/**
* @zh-CN 树形表格选择时是否遵循父子不关联
* @en-US Whether to disable parent-child association in tree table selection
* @since 1.2.2
*/
checkStrictly: {
type: Boolean,
default: true
},
stripe,
border,
/**
* @zh-CN 单元格为空时的展示文案，默认为 '--'
* @en-US Render text when cell value is empty
*/
defaultEmptyCellText: {
type: String,
default: "--"
},
emptyLabel,
loading: loading$1,
loadingLabel,
highlightCurrentRow
};
const DataTableSortMethod = {
/** 升序排序 */
ASC: 1,
/** 降序排序 */
DESC: -1,
/** 不排序 */
NA: void 0
};
const getCellValue = ({ row, column }) => {
return getValueByPath(row, column.key);
};
const isEmptyCell = (cellValue) => {
return isNil(cellValue) || cellValue.toString() === "";
};
const getTotalHeaderRows = (columns) => {
if (!isArray(columns) || columns.length === 0) {
return 0;
}
const maxChildDepth = columns.reduce((maxDepth, item) => {
const childDepth = item.children ? getTotalHeaderRows(item.children) : 0;
return Math.max(maxDepth, childDepth);
}, 0);
return 1 + maxChildDepth;
};
const getColumnCount = (columns) => {
let count = 0;
const traverseColumns = (_columns) => {
if (!isArray(_columns) || !_columns.length) {
return;
}
_columns.forEach((column) => {
if (!column.children) {
count += 1;
} else {
traverseColumns(column.children);
}
});
};
traverseColumns(columns);
return count;
};
const setParentFixed = (column, fixed) => {
let { parent } = column;
while (parent) {
if (parent.fixed === fixed) {
if (fixed === "left") {
parent.isLastLeftFixedCol = true;
} else {
parent.isFirstRightFixedCol = true;
}
}
parent = parent.parent;
}
};
const clearIosMultiFixed = (dataColumns, isMounted) => {
if (isMounted && isIosDevice) {
dataColumns.forEach((column, i) => {
if (i === 0) {
return;
}
if (i === dataColumns.length - 1 && column.fixed === "right") {
return;
}
column.fixed = void 0;
});
}
};
const markHeaderHidden = (groupColumns) => {
groupColumns.forEach((groupColumn) => {
for (let colIndex = 0; colIndex < groupColumn.length; colIndex++) {
const column = groupColumn[colIndex];
if (isNil(column.customColSpan) || column.customColSpan < 2) {
continue;
}
for (let j = colIndex + 1; j < colIndex + column.customColSpan; j++) {
groupColumn[j].headerHidden = true;
}
}
});
};
const markEdgeFixedColumns = (dataColumns, groupColumns) => {
groupColumns.forEach((group) => {
let lastLeftFixedI;
let firstRightFixedI;
for (let i = 0; i < group.length; i++) {
const column = group[i];
if (column.fixed === "left" && !column.headerHidden) {
lastLeftFixedI = i;
continue;
}
const columnIndexInDataColumns = dataColumns.findIndex((v) => v.key === column.key);
const prevColumn = dataColumns[columnIndexInDataColumns - 1];
if (isNil(firstRightFixedI) && column.fixed === "right" && // 且前一列不是右固定列
(!prevColumn || prevColumn.fixed !== "right")) {
firstRightFixedI = i;
}
}
if (!isNil(lastLeftFixedI)) {
group[lastLeftFixedI].isLastLeftFixedCol = true;
setParentFixed(group[lastLeftFixedI], "left");
}
if (!isNil(firstRightFixedI)) {
group[firstRightFixedI].isFirstRightFixedCol = true;
setParentFixed(group[firstRightFixedI], "right");
}
});
};
const markEdgeColumns = (groupColumns) => {
var _a, _b, _c, _d, _e;
let firstColumn = (_a = groupColumns[0]) == null ? void 0 : _a[0];
while (firstColumn) {
firstColumn.isFirstCol = true;
firstColumn = (_b = firstColumn.children) == null ? void 0 : _b[0];
}
let lastColumn = (_c = groupColumns[0]) == null ? void 0 : _c[groupColumns[0].length - 1];
while (lastColumn) {
lastColumn.isLastCol = true;
lastColumn = (_e = lastColumn.children) == null ? void 0 : _e[((_d = lastColumn.children) == null ? void 0 : _d.length) - 1];
}
};
const getGroupColumns = (options) => {
const { isMounted, columns, columnMap, defaultFormatter } = options;
const totalHeaderRows = getTotalHeaderRows(columns.value);
columnMap.clear();
const dataColumns = [];
const groupColumns = new Array(totalHeaderRows).fill(0).map(() => []);
const traverseColumns = (traverseOptions) => {
const { level = 0, parent } = traverseOptions;
traverseOptions.columns.forEach((column) => {
var _a;
const cell = {
...column,
fixed: column.fixed === true ? "left" : column.fixed || ((_a = traverseOptions.parent) == null ? void 0 : _a.fixed),
formatter: column.formatter || defaultFormatter,
parent: traverseOptions.parent
};
if (isArray(cell.children) && cell.children.length) {
const childrenColCount = getColumnCount(cell.children);
cell.colSpan = childrenColCount > 1 ? childrenColCount : void 0;
groupColumns[level].push(cell);
traverseColumns({
columns: cell.children,
level: level + 1,
parent: cell
});
} else {
const rowSpan = totalHeaderRows - level;
cell.rowSpan = rowSpan > 1 ? rowSpan : void 0;
cell.fixed = cell.fixed ?? (parent == null ? void 0 : parent.fixed);
columnMap.set(cell.key, cell);
dataColumns.push(cell);
groupColumns[level].push(cell);
}
});
};
traverseColumns({ columns: columns.value });
clearIosMultiFixed(dataColumns, isMounted);
markHeaderHidden(groupColumns);
markEdgeFixedColumns(dataColumns, groupColumns);
markEdgeColumns(groupColumns);
return { dataColumns, groupColumns };
};
const getFirstChildColumn = (column) => {
var _a;
return ((_a = column.children) == null ? void 0 : _a.length) ? getFirstChildColumn(column.children[0]) : column;
};
const getLastChildColumn = (column) => {
var _a;
return ((_a = column.children) == null ? void 0 : _a.length) ? getLastChildColumn(column.children[column.children.length - 1]) : column;
};
const getLeftFixedCount = (column, dataColumns) => {
const firstCol = getFirstChildColumn(column);
let count = 0;
for (let i = 0; i < dataColumns.length; i++) {
const v = dataColumns[i];
if (v.key === firstCol.key) {
break;
}
count += v.resizeWidth ?? 0;
}
return count;
};
const getRightFixedCount = (column, dataColumns) => {
const lastCol = getLastChildColumn(column);
let count = 0;
for (let i = dataColumns.length - 1; i > 0; i--) {
const v = dataColumns[i];
if (lastCol.key === v.key) {
break;
}
if (v.fixed === "right") {
count += v.resizeWidth ?? 0;
}
}
return count;
};
const adjustCountForMergedColumns = (options) => {
const { column, dataColumns, isHeader, colSpan } = options;
let count = options.count;
if (isHeader && column.customColSpan && column.customColSpan > 1) {
let columnIndex = dataColumns.findIndex((v) => v.key === column.key) + 1;
while (dataColumns[columnIndex] && dataColumns[columnIndex].headerHidden) {
count -= dataColumns[columnIndex].resizeWidth ?? 0;
columnIndex++;
}
}
if (!isHeader && colSpan && colSpan > 1) {
const columnIndex = dataColumns.findIndex((v) => v.key === column.key);
for (let i = 1; i < colSpan; i++) {
const mergedCol = dataColumns[columnIndex + i];
if (mergedCol && mergedCol.fixed === "right") {
count -= mergedCol.resizeWidth ?? 0;
}
}
}
return count;
};
const getColumnPosition = (options) => {
const { column, dataColumns, isHeader = false, colSpan } = options;
if (!column.fixed) {
return {};
}
if (column.fixed === "left") {
return { left: `${getLeftFixedCount(column, dataColumns)}px` };
}
const count = adjustCountForMergedColumns({
count: getRightFixedCount(column, dataColumns),
column,
dataColumns,
isHeader,
colSpan
});
return { right: `${count}px` };
};
const getIsLevelExpandable = ({
list,
hasExpandSlot,
expandMethod
}) => {
if (!isArray(list) || !list.length) {
return { expandable: false, expandableRowIndexes: [] };
}
if (hasExpandSlot.value) {
return { expandable: true, expandableRowIndexes: list.map((_, i) => i) || [] };
}
if (!isNil(expandMethod)) {
let _expandable = false;
const _expandableRowIndexes = [];
list.forEach((_child, _childIndex) => {
if (expandMethod(_child, _childIndex)) {
_expandable = true;
_expandableRowIndexes.push(_childIndex);
}
});
return { expandable: _expandable, expandableRowIndexes: _expandableRowIndexes };
}
let expandable = false;
const expandableRowIndexes = [];
list.forEach((child, childIndex) => {
if (isArray(child.children) && !!child.children.length || child.hasChildren) {
expandable = true;
expandableRowIndexes.push(childIndex);
}
});
return { expandable, expandableRowIndexes };
};
const dataTableInjectKey = Symbol("o-data-table");
const dataTableRowInjectKey = Symbol("o-data-table-row");
const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
__name: "TableColGroup",
setup(__props) {
const dataTableInjection = vue.inject(dataTableInjectKey);
const getPropWidth = (column) => {
return {
minWidth: !isNil(column._minWidth) ? `${column._minWidth}px` : column._minWidth,
maxWidth: !isNil(column._maxWidth) ? `${column._maxWidth}px` : column._maxWidth
};
};
const colgroupRef = vue.ref();
const setColRef = async (col, column) => {
if (!col) {
return;
}
column.colRef = vue.markRaw(col);
};
const resizeObserver = useResizeObserver();
const resizeHandler = debounceRAF(() => {
if (!colgroupRef.value || !dataTableInjection) {
return;
}
dataTableInjection.dataColumns.value.forEach((column) => {
if (!column.colRef) {
return;
}
column.resizeWidth = column.colRef.getBoundingClientRect().width;
});
});
vue.watch(
colgroupRef,
(newVal, oldVal) => {
if (oldVal) {
resizeObserver.unobserve(oldVal, resizeHandler);
}
if (newVal) {
resizeHandler();
resizeObserver.observe(newVal, resizeHandler);
}
},
{ immediate: true }
);
vue.onUnmounted(() => {
if (colgroupRef.value) {
resizeObserver.unobserve(colgroupRef.value, resizeHandler);
}
});
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createElementBlock(
"colgroup",
{
ref_key: "colgroupRef",
ref: colgroupRef
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList((_a = vue.unref(dataTableInjection)) == null ? void 0 : _a.dataColumns.value, (column) => {
return vue.openBlock(), vue.createElementBlock(
"col",
{
key: column.key,
ref_for: true,
ref: (el) => setColRef(el, column),
style: vue.normalizeStyle(getPropWidth(column))
},
null,
4
/* STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
],
512
/* NEED_PATCH */
);
};
}
});
const _hoisted_1$C = { class: "o-table-cell__inner-content" };
const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
__name: "TableCellRenderer",
props: {
row: {},
column: {},
cellValue: {},
rowIndex: {},
colIndex: {}
},
setup(__props) {
const props = __props;
const renderContent = vue.computed(() => {
const { row, column, cellValue, rowIndex, colIndex } = props;
const { formatter } = column;
const formatterOptions = {
row,
column,
cellValue,
rowIndex,
colIndex
};
const content = formatter(formatterOptions);
return getRenderableComponent(content);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$C, [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderContent.value)))
]);
};
}
});
const _hoisted_1$B = ["data-level"];
const _hoisted_2$p = ["data-cell-index"];
const _hoisted_3$h = { class: "o-table-cell__inner" };
const _hoisted_4$d = {
key: 0,
class: "o-table-row-icon-placeholder"
};
const _hoisted_5$c = {
key: 0,
class: "o-data-table-header-divider-v"
};
const _hoisted_6$5 = ["colspan"];
const _hoisted_7$4 = { class: "o-table-cell__inner o-table-expand-cell__inner" };
const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
__name: "TableRow",
props: {
row: {},
rowIndex: {},
level: {}
},
setup(__props) {
const props = __props;
const { row, rowIndex, level } = vue.toRefs(props);
const slots = vue.useSlots();
const tdSlotNames = vue.computed(() => Object.keys(slots).filter((name) => name.startsWith("td_")));
const {
getRowKey,
data,
border: border2,
headerStyle,
spanMethod,
selection,
checkStrictly,
dataColumns,
groupColumns,
hasExpandSlot,
expandMethod,
expandedRowKeys,
isBodyCellRemoved,
isLastLeftFixedCell,
isFirstRightFixedCell,
rowKeyMap,
toFilteredSelectable,
selectedKeys,
handleTableSelection,
handleLoadChildren
} = vue.inject(dataTableInjectKey);
const { isLevelExpandable } = vue.inject(dataTableRowInjectKey);
const rowKey = vue.computed(() => getRowKey(row.value, rowIndex.value));
const expandBy = vue.computed(() => {
if (hasExpandSlot.value || !isNil(expandMethod == null ? void 0 : expandMethod.value)) {
return "expand";
}
return "children";
});
const indeterminate = vue.computed(() => {
if (checkStrictly.value || selectedKeys.value.includes(rowKey.value)) {
return void 0;
}
const { descendantRowKeys } = rowKeyMap.value.get(rowKey.value);
const selectableDescendantRowKeys = toFilteredSelectable(descendantRowKeys);
const someChecked = selectableDescendantRowKeys.some((v) => selectedKeys.value.includes(v));
const someUncheck = selectableDescendantRowKeys.some((v) => !selectedKeys.value.includes(v));
return someChecked && someUncheck;
});
const handleRowSelection = (newVal) => {
if (checkStrictly.value) {
return;
}
const { ancestorRowKeys, descendantRowKeys } = rowKeyMap.value.get(rowKey.value);
let _selectedKeys = selectedKeys.value.filter((v) => !descendantRowKeys.includes(v));
if (newVal.includes(rowKey.value)) {
_selectedKeys.push(...toFilteredSelectable(descendantRowKeys));
} else {
_selectedKeys = _selectedKeys.filter((v) => !descendantRowKeys.includes(v));
}
ancestorRowKeys.forEach((v) => {
const { descendantRowKeys: ancestorDescendantRowKeys } = rowKeyMap.value.get(v);
if (toFilteredSelectable(ancestorDescendantRowKeys).every((x) => _selectedKeys.includes(x))) {
_selectedKeys.push(v);
} else {
_selectedKeys = _selectedKeys.filter((x) => x !== v);
}
});
selectedKeys.value = Array.from(new Set(_selectedKeys));
handleTableSelection(rowKey.value, newVal);
};
const expandLoading = vue.ref(false);
const isRowExpandable = vue.computed(() => {
if (!isLevelExpandable.value.expandable) {
return false;
}
return isLevelExpandable.value.expandableRowIndexes.includes(rowIndex.value);
});
const isRowExpanded = vue.computed(() => expandedRowKeys.value.includes(rowKey.value));
const toggleRowExpand = () => {
const index = expandedRowKeys.value.findIndex((v) => v === rowKey.value);
if (index !== -1) {
expandedRowKeys.value.splice(index, 1);
return;
}
expandedRowKeys.value.push(rowKey.value);
};
vue.watch(
expandedRowKeys,
() => {
var _a;
const index = expandedRowKeys.value.findIndex((v) => v === rowKey.value);
if (index === -1) {
return;
}
if (!isArray(row.value.children) && row.value.children) {
return;
}
if (!row.value.hasChildren || ((_a = row.value.children) == null ? void 0 : _a.length)) {
return;
}
const { reject, resolve, promise } = promiseWithResolvers();
expandLoading.value = true;
handleLoadChildren({ row: row.value, rowIndex: rowIndex.value, rowKey: rowKey.value, reject, resolve });
promise.catch(() => expandedRowKeys.value.splice(index, 1)).finally(() => expandLoading.value = false);
},
{ deep: true }
);
vue.provide(dataTableRowInjectKey, {
isLevelExpandable: vue.computed(() => getIsLevelExpandable({ list: row.value.children, hasExpandSlot, expandMethod: expandMethod == null ? void 0 : expandMethod.value }))
});
return (_ctx, _cache) => {
var _a;
const _component_TableRow = vue.resolveComponent("TableRow", true);
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
vue.createElementVNode("tr", {
class: vue.normalizeClass([
"o-table-row",
"o-table-body-row",
{
[vue.unref(DEFAULT_ROW_LAST_MARKER)]: vue.unref(rowIndex) === vue.unref(data).length - 1 && !isRowExpandable.value,
"o-table-row-disabled": (_a = vue.unref(rowKeyMap).get(rowKey.value)) == null ? void 0 : _a.disabled
}
]),
"data-level": vue.unref(level)
}, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(dataColumns), (column, colIndex) => {
var _a2, _b, _c, _d;
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{
key: column.key
},
[
!vue.unref(isBodyCellRemoved)(vue.unref(rowIndex), colIndex) ? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
key: 0,
ref_for: true
}, (_a2 = vue.unref(spanMethod)) == null ? void 0 : _a2({ row: vue.unref(row), column, cellValue: vue.unref(getCellValue)({ row: vue.unref(row), column }), rowIndex: vue.unref(rowIndex), colIndex }), {
class: {
"o-table-cell": true,
"o-table-body-cell": true,
"o-table-column-as-header": column.asHeader,
"o-cell-last-row": vue.unref(rowIndex) === vue.unref(data).length - 1 && !isRowExpandable.value,
"o-table-cell-fixed": column.fixed,
"o-table-cell-fixed-left": column.fixed === "left",
"o-table-cell-fixed-right": column.fixed === "right",
"o-table-cell-last-left-fixed": vue.unref(isLastLeftFixedCell)(vue.unref(rowIndex), colIndex),
"o-table-cell-first-right-fixed": vue.unref(isFirstRightFixedCell)(vue.unref(rowIndex), colIndex),
[vue.unref(DEFAULT_CELL_FIRST_COL_MARKER)]: column.isFirstCol,
[vue.unref(DEFAULT_CELL_LAST_COL_MARKER)]: column.isLastCol,
"o-table-cell-tooltip": column.showOverflowToolTip,
"o-table-cell-wrappable": vue.unref(isNumber)(column.showOverflowToolTip) && column.showOverflowToolTip > 1
},
style: {
...vue.unref(getColumnPosition)({
column,
dataColumns: vue.unref(dataColumns),
groupColumns: vue.unref(groupColumns),
border: vue.unref(border2),
colSpan: (_c = (_b = vue.unref(spanMethod)) == null ? void 0 : _b({ row: vue.unref(row), column, cellValue: vue.unref(getCellValue)({ row: vue.unref(row), column }), rowIndex: vue.unref(rowIndex), colIndex })) == null ? void 0 : _c.colSpan
}),
"--cell-max-row": vue.unref(isNumber)(column.showOverflowToolTip) ? column.showOverflowToolTip : 1
},
"data-cell-index": `td_${vue.unref(rowIndex)}_${colIndex}`
}), [
vue.createElementVNode("span", _hoisted_3$h, [
column.isFirstCol && vue.unref(selection) ? (vue.openBlock(), vue.createBlock(vue.unref(OCheckbox), {
key: 0,
modelValue: vue.unref(selectedKeys),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(selectedKeys) ? selectedKeys.value = $event : null),
indeterminate: indeterminate.value,
value: vue.unref(getRowKey)(vue.unref(row), vue.unref(rowIndex)),
disabled: (_d = vue.unref(rowKeyMap).get(rowKey.value)) == null ? void 0 : _d.disabled,
class: "o-table-row-checkbox",
onChange: handleRowSelection
}, null, 8, ["modelValue", "indeterminate", "value", "disabled"])) : vue.createCommentVNode("v-if", true),
column.isFirstCol ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.unref(level) > 0 && !vue.unref(isLevelExpandable).expandable ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$d)) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(level), (i) => {
return vue.openBlock(), vue.createElementBlock("span", {
key: i,
class: "o-table-row-icon-placeholder"
});
}),
128
/* KEYED_FRAGMENT */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true),
column.isFirstCol && vue.unref(isLevelExpandable).expandable ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
expandLoading.value ? (vue.openBlock(), vue.createBlock(vue.unref(IconLoadingSmall), {
key: 0,
class: "o-rotating o-table-row-expand-trigger loading"
})) : (vue.openBlock(), vue.createBlock(vue.unref(IconChevronRightSmall), {
key: 1,
class: vue.normalizeClass({
"o-table-row-expand-trigger": true,
expandable: isRowExpandable.value,
expanded: isRowExpanded.value
}),
onClick: toggleRowExpand
}, null, 8, ["class"]))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, `td_${column.key}`, {
row: vue.unref(row),
column,
cellValue: vue.unref(getCellValue)({ row: vue.unref(row), column }),
index: vue.unref(rowIndex)
}, () => [
vue.createVNode(_sfc_main$N, {
row: vue.unref(row),
column,
"cell-value": vue.unref(getCellValue)({ row: vue.unref(row), column }),
"row-index": vue.unref(rowIndex),
"col-index": colIndex
}, null, 8, ["row", "column", "cell-value", "row-index", "col-index"])
])
]),
vue.unref(headerStyle) === "split-line" && column.asHeader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$c)) : vue.createCommentVNode("v-if", true)
], 16, _hoisted_2$p)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
}),
128
/* KEYED_FRAGMENT */
))
], 10, _hoisted_1$B),
isRowExpandable.value && expandBy.value === "expand" && isRowExpanded.value ? (vue.openBlock(), vue.createElementBlock(
"tr",
{
key: 0,
class: vue.normalizeClass([
"o-table-row",
"o-table-body-row",
"o-table-row-expand",
{
[vue.unref(DEFAULT_ROW_LAST_MARKER)]: vue.unref(rowIndex) === vue.unref(data).length - 1
}
])
},
[
vue.createElementVNode("td", {
colspan: vue.unref(dataColumns).length,
class: vue.normalizeClass({
"o-table-cell": true,
"o-table-body-cell": true,
"o-table-expand-cell": true,
"o-cell-last-row": vue.unref(rowIndex) === vue.unref(data).length - 1
})
}, [
vue.createElementVNode("span", _hoisted_7$4, [
vue.renderSlot(_ctx.$slots, "expand", {
row: vue.unref(row),
rowIndex: vue.unref(rowIndex)
}, () => {
var _a2;
return [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(getRenderableComponent)((_a2 = vue.unref(expandMethod)) == null ? void 0 : _a2(vue.unref(row), vue.unref(rowIndex))))))
];
})
])
], 10, _hoisted_6$5)
],
2
/* CLASS */
)) : vue.unref(isArray)(vue.unref(row).children) && vue.unref(row).children.length && isRowExpanded.value ? (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(vue.unref(row).children, (child, childIndex) => {
return vue.openBlock(), vue.createBlock(_component_TableRow, {
key: vue.unref(getRowKey)(child, childIndex),
row: child,
"row-index": childIndex,
level: vue.unref(level) + 1
}, vue.createSlots({
expand: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "expand", {
row: child,
rowIndex: childIndex
})
]),
_: 2
/* DYNAMIC */
}, [
vue.renderList(tdSlotNames.value, (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps))
])
};
})
]), 1032, ["row", "row-index", "level"]);
}),
128
/* KEYED_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
};
}
});
const _hoisted_1$A = {
key: 0,
class: "o-data-table-column-filter__input-container"
};
const _hoisted_2$o = { class: "o-data-table-column-filter__options-container" };
const _hoisted_3$g = {
key: 1,
class: "o-data-table-column-filter__empty"
};
const _hoisted_4$c = { class: "o-data-table-column-filter-options-head" };
const _hoisted_5$b = { class: "o-data-table-column-filter__footer" };
const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
__name: "TableColumnFilter",
props: /* @__PURE__ */ vue.mergeModels({
column: {},
disabled: { type: Boolean }
}, {
"modelValue": { default: () => vue.reactive([]) },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["confirm"], ["update:modelValue"]),
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const modelValue2 = vue.useModel(__props, "modelValue");
const [DefineBodyTemplate, ReuseBodyTemplate] = core.createReusableTemplate();
const targetIconRef = vue.ref();
const { t } = useI18n();
const { isPhonePadSize } = useScreen();
const tempValue = vue.ref([]);
const options = vue.ref([]);
vue.onMounted(async () => {
var _a, _b;
options.value = await ((_b = (_a = props.column.filter) == null ? void 0 : _a.optionsFn) == null ? void 0 : _b.call(_a, {
column: props.column,
emptyOption: { label: t("table.filterEmptyOption"), value: TABLE_EMPTY_OPTION_VALUE }
})) || [];
});
const filterKeywords = vue.ref("");
const showOptions = vue.computed(() => {
return filterKeywords.value ? options.value.filter((v) => v.label.toLocaleLowerCase().includes(filterKeywords.value.toLocaleLowerCase())) : [...options.value];
});
const visible = vue.ref(false);
vue.watch(visible, () => {
var _a;
tempValue.value = [...modelValue2.value];
if (tempValue.value.length === options.value.length || ((_a = props.column.filter) == null ? void 0 : _a.multiple) === false && !tempValue.value.length) {
tempValue.value.push(TABLE_ALL_OPTION_VALUE);
}
});
const toExcludeAllOption = (arr) => vue.toValue(arr).filter((v) => v !== TABLE_ALL_OPTION_VALUE);
const indeterminate = vue.computed(() => {
return !!tempValue.value.length && toExcludeAllOption(tempValue).length < options.value.length;
});
const handleConfirm = () => {
modelValue2.value = tempValue.value.filter((v) => v !== TABLE_ALL_OPTION_VALUE);
visible.value = false;
emits("confirm");
};
const handleReset = () => {
tempValue.value = [];
modelValue2.value = [];
visible.value = false;
emits("confirm");
};
const multiple2 = vue.computed(() => {
var _a;
return ((_a = props.column.filter) == null ? void 0 : _a.multiple) ?? true;
});
const showInput = vue.computed(() => {
var _a, _b, _c;
if (isFunction((_a = props.column.filter) == null ? void 0 : _a.showInput)) {
return props.column.filter.showInput(options.value.length);
}
if (!isNil((_b = props.column.filter) == null ? void 0 : _b.showInput)) {
return !!((_c = props.column.filter) == null ? void 0 : _c.showInput);
}
return options.value.length > 8;
});
vue.provide(selectOptionInjectKey, {
multiple: multiple2,
selectValue: tempValue,
async select({ value }) {
const isAdd = !tempValue.value.includes(value);
if (!multiple2.value) {
modelValue2.value = isAdd ? [value].filter((v) => v !== TABLE_ALL_OPTION_VALUE) : [];
visible.value = false;
emits("confirm");
return;
}
if (value === TABLE_ALL_OPTION_VALUE) {
tempValue.value = isAdd ? [...showOptions.value.map((v) => v.value), TABLE_ALL_OPTION_VALUE] : [];
return;
}
if (isAdd) {
tempValue.value.push(value);
} else {
tempValue.value = tempValue.value.filter((v) => v !== value);
}
if (!!tempValue.value.length && toExcludeAllOption(tempValue).length === options.value.length) {
tempValue.value = Array.from(/* @__PURE__ */ new Set([...tempValue.value, TABLE_ALL_OPTION_VALUE]));
} else {
tempValue.value = tempValue.value.filter((v) => v !== TABLE_ALL_OPTION_VALUE);
}
},
registerOption() {
}
});
const handleTriggerClick = () => {
if (isPhonePadSize.value) {
visible.value = true;
}
};
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
vue.withDirectives(vue.createVNode(vue.unref(OButton), {
ref_key: "targetIconRef",
ref: targetIconRef,
disabled: props.disabled,
icon: vue.unref(OIconFilter),
size: "small",
class: vue.normalizeClass({ "o-data-table-column-filter__trigger": true, active: !!modelValue2.value.length || visible.value, disabled: props.disabled }),
style: vue.normalizeStyle(_ctx.$attrs.style),
onClick: handleTriggerClick
}, null, 8, ["disabled", "icon", "class", "style"]), [
[vue.vShow, options.value.length]
]),
vue.createVNode(vue.unref(DefineBodyTemplate), null, {
default: vue.withCtx(() => [
showInput.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
vue.createVNode(vue.unref(OInput), {
modelValue: filterKeywords.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterKeywords.value = $event),
placeholder: vue.unref(t)("table.filterPlaceholder"),
clearable: "",
size: "medium"
}, {
prefix: vue.withCtx(() => [
vue.createVNode(vue.unref(OIconSearch), { class: "o-data-table-column-filter__input-icon" })
]),
_: 1
/* STABLE */
}, 8, ["modelValue", "placeholder"])
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_2$o, [
showOptions.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$1w), {
key: 0,
scrollbar: { size: "small", showType: "hover" }
}, {
default: vue.withCtx(() => [
!filterKeywords.value ? (vue.openBlock(), vue.createBlock(vue.unref(OOption), {
key: 0,
value: vue.unref(TABLE_ALL_OPTION_VALUE),
label: vue.unref(t)("common.checkAll"),
indeterminate: indeterminate.value
}, null, 8, ["value", "label", "indeterminate"])) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(showOptions.value, (option) => {
return vue.openBlock(), vue.createBlock(vue.unref(OOption), {
key: option.value,
value: option.value,
label: option.label
}, null, 8, ["value", "label"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
})) : (vue.openBlock(), vue.createElementBlock(
"div",
_hoisted_3$g,
vue.toDisplayString(vue.unref(t)("common.empty")),
1
/* TEXT */
))
])
]),
_: 1
/* STABLE */
}),
vue.unref(isPhonePadSize) ? (vue.openBlock(), vue.createBlock(vue.unref(ODialog), {
key: 0,
visible: visible.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
"mask-close": !multiple2.value,
size: "small",
scrollbar: false,
class: "o-data-table-column-filter-dialog",
"main-class": "o-data-table-column-filter-wrapper",
style: vue.normalizeStyle(_ctx.$attrs.style)
}, vue.createSlots({
default: vue.withCtx(() => [
vue.createVNode(vue.unref(ReuseBodyTemplate))
]),
_: 2
/* DYNAMIC */
}, [
((_a = props.column.filter) == null ? void 0 : _a.optionTitle) ? {
name: "header",
fn: vue.withCtx(() => [
vue.createElementVNode(
"div",
_hoisted_4$c,
vue.toDisplayString(props.column.filter.optionTitle),
1
/* TEXT */
)
]),
key: "0"
} : void 0,
multiple2.value ? {
name: "actions",
fn: vue.withCtx(() => [
vue.createVNode(vue.unref(OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
onClick: handleReset
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("common.reset")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}),
vue.createVNode(vue.unref(OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
disabled: !tempValue.value.length,
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("common.filter")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"])
]),
key: "1"
} : void 0
]), 1032, ["visible", "mask-close", "style"])) : !props.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(OPopup), {
key: 1,
visible: visible.value,
"onUpdate:visible": _cache[2] || (_cache[2] = ($event) => visible.value = $event),
offset: 4,
target: targetIconRef.value,
trigger: "click",
position: "bl",
class: "o-data-table-column-filter-popup",
"wrap-class": "o-data-table-column-filter-wrapper",
style: vue.normalizeStyle(_ctx.$attrs.style)
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(ReuseBodyTemplate)),
multiple2.value ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createVNode(vue.unref(ODivider), { class: "o-data-table-column-filter__divider" }),
vue.createElementVNode("div", _hoisted_5$b, [
vue.createVNode(vue.unref(OLink), {
color: "primary",
"hover-underline": false,
disabled: !tempValue.value.length,
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("common.filter")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"]),
vue.createVNode(vue.unref(OLink), {
color: "primary",
"hover-underline": false,
onClick: handleReset
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("common.reset")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
]),
_: 1
/* STABLE */
}, 8, ["visible", "target", "style"])) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
};
}
});
const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
__name: "TableColumnSorter",
props: /* @__PURE__ */ vue.mergeModels({
disabled: { type: Boolean }
}, {
"modelValue": { default: () => void 0 },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props) {
const props = __props;
const modelValue2 = vue.useModel(__props, "modelValue");
const handleSorterClick = () => {
switch (modelValue2.value) {
case DataTableSortMethod.ASC:
modelValue2.value = DataTableSortMethod.DESC;
return;
case DataTableSortMethod.DESC:
modelValue2.value = DataTableSortMethod.NA;
return;
case DataTableSortMethod.NA:
modelValue2.value = DataTableSortMethod.ASC;
return;
}
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(OButton), {
disabled: props.disabled,
icon: vue.unref(OIconSort),
size: "small",
class: vue.normalizeClass({
"o-data-table-sorter": true,
"o-data-table-sorter-asc": modelValue2.value === vue.unref(DataTableSortMethod).ASC,
"o-data-table-sorter-desc": modelValue2.value === vue.unref(DataTableSortMethod).DESC,
disabled: props.disabled
}),
onClick: handleSorterClick
}, null, 8, ["disabled", "icon", "class"]);
};
}
});
const getStaticWidth = (width, containerWidth) => {
if (isNil(width)) {
return width;
}
if (isNumber(width)) {
return width;
}
if (width.endsWith("%")) {
return Number.parseFloat(width) * containerWidth / 100;
}
return Number.parseFloat(width);
};
const useDataColumn = (options) => {
const { tableEl, containerWidth, defaultEmptyCellText, columns, data, spanMethod } = options;
const isMounted = core.useMounted();
const dataColumnMap = /* @__PURE__ */ new Map();
const dataColumns = vue.ref([]);
const groupColumns = vue.ref([]);
const fixColumnAfterMounted = () => {
if (!isClient || dataColumns.value.every(({ fixed, width, minWidth, maxWidth }) => [fixed, width, minWidth, maxWidth].every((v) => isNil(v)))) {
return;
}
core.until(() => dataColumns.value.every((column) => !!column.colRef) && data.value.length && tableEl.value && !!containerWidth.value).toBeTruthy().then(() => {
return Promise.all(
dataColumns.value.map(async (column) => {
var _a;
let width = (_a = column.colRef) == null ? void 0 : _a.style.width;
if (!width) {
width = getStaticWidth(column.width, containerWidth.value);
}
if (!width) {
width = await getElementRectByRAF(column.colRef).then((rect) => rect.width);
}
if (column.minWidth) {
column._minWidth = getStaticWidth(column.minWidth, containerWidth.value);
width = Math.max(width, column._minWidth);
}
if (column.maxWidth) {
column._maxWidth = getStaticWidth(column.maxWidth, containerWidth.value);
width = Math.min(width, column._maxWidth);
}
column.colRef.style.width = `${width}px`;
column.resizeWidth = await getElementRectByRAF(column.colRef).then((rect) => rect.width);
})
);
}).then(() => {
tableEl.value.style.tableLayout = "fixed";
const totalWidth = dataColumns.value.reduce((_width, column) => _width + column.resizeWidth, 0);
if (totalWidth < containerWidth.value) {
const lastCol = dataColumns.value[dataColumns.value.length - 1];
lastCol.resizeWidth += containerWidth.value - totalWidth;
lastCol.colRef.style.width = `${lastCol.resizeWidth}px`;
}
});
};
const parseColumns = () => {
const res = getGroupColumns({
isMounted: isMounted.value,
...options,
columnMap: dataColumnMap,
defaultFormatter: (_options) => {
if (isEmptyCell(_options.cellValue)) {
return defaultEmptyCellText.value;
}
return _options.cellValue.toString();
}
});
dataColumns.value = res.dataColumns;
groupColumns.value = res.groupColumns;
fixColumnAfterMounted();
};
vue.watch(
() => [columns.value, isMounted.value, data.value],
() => parseColumns(),
{ immediate: true, deep: true }
);
vue.watch(containerWidth, () => {
fixColumnAfterMounted();
});
const removedBodyCellsBySpan = vue.computed(() => {
const toRemove = [];
data.value.forEach((row, rowIndex) => {
dataColumns.value.forEach((column, colIndex) => {
if (toRemove.some((v) => v.index === `${rowIndex}_${colIndex}`)) {
return;
}
const res = spanMethod.value({
row,
column,
// @ts-ignore
cellValue: getCellValue({ row, column }),
rowIndex,
colIndex
});
if ((res == null ? void 0 : res.colSpan) && res.colSpan > 1) {
for (let i = 0; i < res.colSpan - 1; i++) {
const targetColIndex = colIndex + i + 1;
if ((res == null ? void 0 : res.rowSpan) && res.rowSpan > 1) {
for (let j = 0; j < res.rowSpan - 1; j++) {
toRemove.push({ index: `${rowIndex + j + 1}_${targetColIndex}`, removedMethod: "rowspan", removedBy: column.key });
}
}
toRemove.push({ index: `${rowIndex}_${targetColIndex}`, removedMethod: "colspan", removedBy: column.key });
}
}
if ((res == null ? void 0 : res.rowSpan) && res.rowSpan > 1) {
for (let i = 0; i < res.rowSpan - 1; i++) {
toRemove.push({ index: `${rowIndex + i + 1}_${colIndex}`, removedMethod: "rowspan", removedBy: column.key });
}
}
});
});
return toRemove;
});
const isBodyCellRemoved = (rowIndex, colIndex) => {
return removedBodyCellsBySpan.value.some((v) => v.index === `${rowIndex}_${colIndex}`);
};
const isLastLeftFixedCell = (rowIndex, colIndex) => {
const column = dataColumns.value[colIndex];
if (column.fixed !== "left") {
return false;
}
let nextIndex = colIndex + 1;
while (nextIndex < dataColumns.value.length && dataColumns.value[nextIndex].fixed === "left") {
const nextCellRemoveInfo = removedBodyCellsBySpan.value.filter((v) => v.index === `${rowIndex}_${nextIndex}`);
if (!nextCellRemoveInfo.length) {
return false;
}
if (nextCellRemoveInfo.some((v) => v.removedMethod === "rowspan")) {
return false;
}
nextIndex++;
}
return true;
};
const isFirstRightFixedCell = (rowIndex, colIndex) => {
const column = dataColumns.value[colIndex];
if (column.fixed !== "right") {
return false;
}
let prevIndex = colIndex - 1;
while (prevIndex >= 0 && dataColumns.value[prevIndex].fixed === "right") {
const prevCellRemoveInfo = removedBodyCellsBySpan.value.filter((v) => v.index === `${rowIndex}_${prevIndex}`);
if (!prevCellRemoveInfo.length) {
return false;
}
if (prevCellRemoveInfo.some((v) => v.removedMethod === "rowspan")) {
return false;
}
prevIndex--;
}
return true;
};
const hasLeftFixedColumn = vue.computed(() => dataColumns.value.some((v) => v.fixed === "left" || v.fixed === "right"));
const hasRightFixedColumn = vue.computed(() => dataColumns.value.some((v) => v.fixed === "right"));
const resizingColumnKey = vue.ref("");
let resizeStartX = 0;
let resizeStartWidth = 0;
const handleColumnResizerMouseMoving = (event) => {
const column = dataColumnMap.get(resizingColumnKey.value);
if (!(column == null ? void 0 : column.colRef)) {
return;
}
const deltaX = event.clientX - resizeStartX;
let width = Math.floor(resizeStartWidth + deltaX);
if (column._minWidth) {
width = Math.max(width, column._minWidth);
}
if (column._maxWidth) {
width = Math.min(width, column._maxWidth);
}
column.colRef.style.width = `${width}px`;
};
const handleColumnResizerMouseup = () => {
resizingColumnKey.value = "";
window.removeEventListener("mousemove", handleColumnResizerMouseMoving);
window.removeEventListener("mouseup", handleColumnResizerMouseup);
window.removeEventListener("contextmenu", handleColumnResizerMouseup);
};
const handleColumnResizerMousedown = ({ event, column }) => {
var _a;
event.preventDefault();
event.stopPropagation();
resizingColumnKey.value = column.key;
resizeStartX = event.clientX;
resizeStartWidth = ((_a = column.thRef) == null ? void 0 : _a.getBoundingClientRect().width) ?? 0;
window.addEventListener("mousemove", handleColumnResizerMouseMoving);
window.addEventListener("mouseup", handleColumnResizerMouseup);
window.addEventListener("contextmenu", handleColumnResizerMouseup);
};
return {
dataColumnMap,
dataColumns,
groupColumns,
removedBodyCellsBySpan,
isBodyCellRemoved,
isLastLeftFixedCell,
isFirstRightFixedCell,
hasLeftFixedColumn,
hasRightFixedColumn,
handleColumnResizerMousedown,
resizingColumnKey
};
};
const _hoisted_1$z = {
key: 0,
class: "o-data-table-header-divider-h"
};
const _hoisted_2$n = {
key: 1,
class: "o-data-table-left-shadow"
};
const _hoisted_3$f = ["colspan", "rowspan", "data-cell-index"];
const _hoisted_4$b = { class: "o-table-cell__inner" };
const _hoisted_5$a = {
key: 1,
class: "o-table-row-icon-placeholder"
};
const _hoisted_6$4 = { class: "o-table-cell__inner-content" };
const _hoisted_7$3 = ["onMousedown"];
const _hoisted_8$2 = {
key: 0,
class: "o-table-column-resizer__indicator"
};
const _hoisted_9$2 = {
key: 0,
class: "empty-placeholder"
};
const _hoisted_10$2 = {
key: 2,
class: "o-table-loading-wrap"
};
const _hoisted_11$2 = { class: "o-table-loading-label" };
const _hoisted_12$1 = {
key: 3,
class: "o-table-tip-wrap"
};
const _hoisted_13$1 = { class: "o-table-empty-label" };
const _hoisted_14$1 = {
key: 4,
class: "o-data-table-right-shadow"
};
const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
__name: "ODataTable",
props: /* @__PURE__ */ vue.mergeModels(dataTableProps, {
"expanded-row-keys": { default: () => vue.reactive([]) },
"expanded-row-keysModifiers": {},
"conditions": {
/**
* @important 兜底如果外面没有传值的情况
*/
default: () => vue.reactive({})
},
"conditionsModifiers": {},
"sortSequence": {
/**
* @important 兜底如果外面没有传值的情况
*/
default: () => vue.reactive([])
},
"sortSequenceModifiers": {},
"selectedKeys": { default: () => vue.reactive([]) },
"selectedKeysModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["condition-update", "sort-update", "update:selected-keys", "selection", "selection-change", "selection-all", "load-children", "column-resize"], ["update:expanded-row-keys", "update:conditions", "update:sortSequence", "update:selectedKeys"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const slots = vue.useSlots();
const tdSlotNames = vue.computed(() => Object.keys(slots).filter((name) => name.startsWith("td_")));
const rootRef = vue.ref();
const { width: containerBoundingWidth } = core.useElementBounding(rootRef);
const containerWidth = core.refDebounced(
vue.computed(() => {
var _a;
void containerBoundingWidth.value;
return ((_a = rootRef.value) == null ? void 0 : _a.clientWidth) ?? 0;
})
);
const headerRef = vue.ref();
const { height: headerTableHeight } = core.useElementBounding(headerRef);
const tableTextSize = core.useCssVar("--table-text-size", headerRef);
const tableTextHeight = core.useCssVar("--table-text-height", headerRef);
const tableEl = vue.ref();
const overflowState = vue.ref();
const checkTableOverflow = debounceRAF(() => {
if (!tableEl.value) {
return;
}
overflowState.value = checkElementOverflow({
element: tableEl.value,
parentElement: rootRef.value,
// 由于右固定列与前一列边框重合，宽容两个边框宽度
threshold: Number.parseFloat(getCssVariable("--table-border-width", rootRef.value)) * 2
});
});
const getRowKey = (row, rowIndex) => {
if (isFunction(props.rowKey)) {
return props.rowKey(row) ?? rowIndex;
}
return getValueByPath(row, props.rowKey) ?? rowIndex;
};
const { emptyLabel: emptyLabel2, loadingLabel: loadingLabel2, borderClass, handleMouseOver, clearHighlight, handleTouchStart } = useTableCommon({ ...vue.toRefs(props), tableEl });
const {
dataColumnMap,
dataColumns,
groupColumns,
isBodyCellRemoved,
isLastLeftFixedCell,
isFirstRightFixedCell,
hasLeftFixedColumn,
hasRightFixedColumn,
handleColumnResizerMousedown,
resizingColumnKey
} = useDataColumn({ ...vue.toRefs(props), tableEl, containerWidth });
const setThRef = (el, column) => {
if (!el) {
return;
}
column.thRef = vue.markRaw(el);
};
const expandedRowKeys = vue.useModel(__props, "expanded-row-keys");
const hasExpandSlot = vue.computed(() => !!slots.expand);
const isLevelExpandable = vue.computed(() => getIsLevelExpandable({ list: props.data, hasExpandSlot, expandMethod: props.expandMethod }));
const conditions = vue.useModel(__props, "conditions");
const sortSequence = vue.useModel(__props, "sortSequence");
const getTableFilterValue = (key) => {
return getValueByPath(conditions.value, key);
};
const handleTableFilterChange = (key, newVal) => {
setValueByPath(conditions.value, key, newVal);
emits("condition-update", { key, newVal });
};
const getTableSorterValue = (key) => {
return getValueByPath(conditions.value, key);
};
const sortKeys = vue.computed(() => Array.from(new Set(dataColumns.value.filter((v) => v.sortKey).map((v) => v.sortKey))));
const handleTableSorterChange = (key, newVal) => {
if (!key) {
return;
}
let _sortSequence = [...sortSequence.value];
if (props.sortMode === "single") {
sortKeys.value.forEach((_key) => {
setValueByPath(conditions.value, _key, DataTableSortMethod.NA);
});
_sortSequence = [key];
}
setValueByPath(conditions.value, key, newVal);
if (newVal === DataTableSortMethod.NA) {
_sortSequence = _sortSequence.filter((k) => k !== key);
} else if (!_sortSequence.includes(key)) {
_sortSequence.push(key);
}
sortSequence.value = _sortSequence;
emits("condition-update");
emits("sort-update", { key, newVal, sortSequence: [..._sortSequence] });
};
const rowKeyMap = vue.computed(() => {
var _a;
const _map = /* @__PURE__ */ new Map();
const traverse = ({
row,
rowIndex,
ancestorRowKeys,
setDescendant
}) => {
const rowKey = getRowKey(row, rowIndex);
setDescendant == null ? void 0 : setDescendant(rowKey);
const record = {
row,
rowIndex,
disabled: isNil(props.disabledProp) ? false : !!getValueByPath(row, props.disabledProp),
ancestorRowKeys,
descendantRowKeys: []
};
const _setDescendant = (descendant) => {
record.descendantRowKeys.push(descendant);
setDescendant == null ? void 0 : setDescendant(descendant);
};
if (isArray(row.children)) {
row.children.forEach((v, i) => traverse({ row: v, rowIndex: i, ancestorRowKeys: [rowKey, ...ancestorRowKeys], setDescendant: _setDescendant }));
}
_map.set(rowKey, record);
};
(_a = props.data) == null ? void 0 : _a.forEach((row, rowIndex) => traverse({ row, rowIndex, ancestorRowKeys: [] }));
return _map;
});
const allRowKeys = vue.computed(() => {
var _a;
return ((_a = props.data) == null ? void 0 : _a.reduce((prev, row, rowIndex) => {
var _a2;
const rowKey = getRowKey(row, rowIndex);
return [...prev, rowKey, ...((_a2 = rowKeyMap.value.get(rowKey)) == null ? void 0 : _a2.descendantRowKeys) || []];
}, [])) || [];
});
const toFilteredSelectable = (arr) => {
return arr.filter((v) => {
var _a;
return !((_a = rowKeyMap.value.get(v)) == null ? void 0 : _a.disabled);
});
};
const selectableRowKeys = vue.computed(() => toFilteredSelectable(allRowKeys.value));
const selectedKeys = vue.useModel(__props, "selectedKeys");
const allChecked = vue.ref([]);
const indeterminate = vue.computed(() => {
return Boolean(
selectedKeys.value.length && selectableRowKeys.value.some((v) => !selectedKeys.value.includes(v)) && // 兼容数据分页时，selectedKeys中包含非data的key(可能来自于其他分页)
selectableRowKeys.value.some((v) => selectedKeys.value.includes(v))
);
});
const selectionChangedBySelectAll = vue.ref(false);
vue.watch(
() => [selectedKeys.value, selectableRowKeys.value],
() => {
if (selectionChangedBySelectAll.value) {
selectionChangedBySelectAll.value = false;
return;
}
if (selectedKeys.value.length === selectableRowKeys.value.length) {
allChecked.value = [1];
} else if (!selectedKeys.value.length) {
allChecked.value = [];
}
},
{ immediate: true }
);
const handleTableSelection = (key, newVal) => {
emits("selection", { key, selected: !!newVal.length });
};
const handleSelectionAll = (newVal) => {
selectionChangedBySelectAll.value = true;
emits("selection-all", !!newVal.length);
const prev = selectedKeys.value;
selectedKeys.value = newVal.length ? [...selectableRowKeys.value] : [];
emits("selection-change", { prev, cur: selectedKeys.value });
};
const popoverVisible = vue.ref(false);
const popoverTarget = vue.shallowRef();
const popoverContent = vue.ref();
const popoverKey = vue.ref();
const handleTableMouseover = async (e) => {
const cellTarget = findClosestElementWithClass(e.target, "o-table-cell-tooltip", tableEl.value);
const cellInnerContent = cellTarget == null ? void 0 : cellTarget.querySelector(":scope > .o-table-cell__inner > .o-table-cell__inner-content");
if (cellTarget && cellInnerContent) {
popoverKey.value = cellTarget.dataset.cellIndex;
popoverTarget.value = cellInnerContent;
}
if (!cellTarget || cellTarget === tableEl.value || !cellInnerContent || !isOverflown(cellInnerContent)) {
popoverVisible.value = false;
popoverTarget.value = void 0;
popoverContent.value = void 0;
return;
}
await vue.nextTick();
popoverContent.value = cellInnerContent.innerText;
popoverVisible.value = true;
};
vue.provide(dataTableInjectKey, {
...vue.toRefs(props),
getRowKey,
containerWidth,
dataColumnMap,
dataColumns,
groupColumns,
hasExpandSlot,
expandedRowKeys,
isBodyCellRemoved,
isLastLeftFixedCell,
isFirstRightFixedCell,
rowKeyMap,
allRowKeys,
toFilteredSelectable,
selectedKeys,
handleTableSelection,
handleLoadChildren(payload) {
emits("load-children", payload);
}
});
vue.provide(dataTableRowInjectKey, {
isLevelExpandable
});
__expose({
getRowKey,
dataColumnMap,
dataColumns,
groupColumns,
/**
* @zh-CN 全选
* @en-US Select all
* @since 1.2.2
*/
selectAll() {
selectedKeys.value = [...selectableRowKeys.value];
},
/**
* @zh-CN 清空全选
* @en-US Clear all selections
* @since 1.2.2
*/
clearAll: () => selectedKeys.value = [],
/**
* @zh-CN 展开全部
* @en-US Expand all rows
* @since 1.2.2
*/
expandAll() {
expandedRowKeys.value = [...allRowKeys.value];
},
/**
* @zh-CN 收起全部
* @en-US Fold all rows
* @since 1.2.2
*/
foldAll: () => expandedRowKeys.value = []
});
return (_ctx, _cache) => {
var _a, _b, _c, _d, _e;
return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "rootRef",
ref: rootRef,
class: vue.normalizeClass([
"o-table",
`o-table-${props.size}`,
`o-table-header-${props.headerStyle}`,
"o-data-table",
{
"o-table-stripe": props.stripe,
"is-overflow-left": (_a = overflowState.value) == null ? void 0 : _a.isOverflowLeft,
"is-overflow-right": (_b = overflowState.value) == null ? void 0 : _b.isOverflowRight,
"is-overflow-top": (_c = overflowState.value) == null ? void 0 : _c.isOverflowTop
},
...vue.unref(borderClass)
]),
style: vue.normalizeStyle({
"--table-header-height": vue.unref(headerTableHeight),
"--table-height": vue.unref(isNumeric)(props.height) ? props.height + "px" : props.height,
"--table-max-height": vue.unref(isNumeric)(props.maxHeight) ? props.maxHeight + "px" : props.maxHeight
})
},
[
props.showHeader && props.headerStyle === "split-line" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z)) : vue.createCommentVNode("v-if", true),
!vue.unref(hasLeftFixedColumn) && !props.loading && props.data.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$n)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(OScroller), {
class: "o-table-scroller",
"wrap-class": "o-table-wrap",
"bar-class": "o-table-scroll-bar",
size: props.size,
"disabled-x": props.loading || !props.data.length,
"show-type": "always",
"auto-update-on-scroll-size": "",
onScroll: vue.unref(checkTableOverflow)
}, {
default: vue.withCtx(() => {
var _a2;
return [
vue.createElementVNode(
"table",
{
ref_key: "tableEl",
ref: tableEl,
class: "o-table-inner-table",
style: vue.normalizeStyle({
minWidth: vue.unref(isNumeric)(props.minTableWidth) ? `${props.minTableWidth}px` : props.minTableWidth
}),
onMouseover: handleTableMouseover
},
[
_cache[4] || (_cache[4] = vue.createElementVNode(
"caption",
null,
null,
-1
/* CACHED */
)),
vue.createVNode(_sfc_main$O),
props.showHeader ? (vue.openBlock(), vue.createElementBlock(
"thead",
{
key: 0,
ref_key: "headerRef",
ref: headerRef,
class: "o-table-header"
},
[
vue.renderSlot(_ctx.$slots, "header", {
columns: vue.unref(dataColumns),
groupColumns: vue.unref(groupColumns)
}, () => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(groupColumns), (groupColumn, groupIndex) => {
var _a3;
return vue.openBlock(), vue.createElementBlock("tr", {
key: (_a3 = groupColumn[0]) == null ? void 0 : _a3.key,
class: "o-table-row o-table-header-row"
}, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(groupColumn, (column, colIndex) => {
var _a4, _b2;
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{
key: column.key
},
[
!column.headerHidden ? (vue.openBlock(), vue.createElementBlock("th", {
key: 0,
ref_for: true,
ref: (el) => setThRef(el, column),
colspan: column.colSpan || column.customColSpan,
rowspan: column.rowSpan,
class: vue.normalizeClass({
"o-table-cell": true,
"o-table-header-cell": true,
"o-table-column-as-header": column.asHeader,
"o-table-cell-tooltip": column.showHeaderOverflowToolTip !== false && column.showHeaderOverflowToolTip !== 0,
"o-table-cell-wrappable": vue.unref(isNumber)(column.showHeaderOverflowToolTip) && column.showHeaderOverflowToolTip > 1,
"o-table-last-header-row-cell": !((_a4 = column.children) == null ? void 0 : _a4.length),
"o-table-cell-fixed": column.fixed,
"o-table-cell-fixed-left": column.fixed === "left",
"o-table-cell-fixed-right": column.fixed === "right",
"o-table-cell-last-left-fixed": column.isLastLeftFixedCol,
"o-table-cell-first-right-fixed": column.isFirstRightFixedCol,
[vue.unref(DEFAULT_CELL_FIRST_COL_MARKER)]: column.isFirstCol,
[vue.unref(DEFAULT_CELL_LAST_COL_MARKER)]: column.isLastCol
}),
style: vue.normalizeStyle({
...vue.unref(getColumnPosition)({ column, dataColumns: vue.unref(dataColumns), groupColumns: vue.unref(groupColumns), border: props.border, isHeader: true }),
"--cell-max-row": vue.unref(isNumber)(column.showHeaderOverflowToolTip) ? column.showHeaderOverflowToolTip : 1
}),
"data-cell-index": `th_${groupIndex}_${colIndex}`
}, [
vue.createElementVNode("span", _hoisted_4$b, [
column.isFirstCol && props.selection ? (vue.openBlock(), vue.createBlock(vue.unref(OCheckbox), {
key: 0,
modelValue: allChecked.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => allChecked.value = $event),
indeterminate: indeterminate.value,
value: 1,
class: "o-table-row-checkbox",
onChange: handleSelectionAll
}, null, 8, ["modelValue", "indeterminate"])) : vue.createCommentVNode("v-if", true),
column.isFirstCol && !props.selection && isLevelExpandable.value.expandable ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$a)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("span", _hoisted_6$4, [
vue.renderSlot(_ctx.$slots, `th_${column.key}`, { column }, () => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(getRenderableComponent)(column.label))))
])
]),
column.filter ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
key: 2,
disabled: props.loading,
column,
"model-value": getTableFilterValue(column.key),
style: vue.normalizeStyle({
"--table-text-size": vue.unref(tableTextSize),
"--table-text-height": vue.unref(tableTextHeight)
}),
"onUpdate:modelValue": (newVal) => handleTableFilterChange(column.key, newVal)
}, null, 8, ["disabled", "column", "model-value", "style", "onUpdate:modelValue"])) : column.sortKey ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
key: 3,
disabled: props.loading,
"model-value": getTableSorterValue(column.sortKey),
"onUpdate:modelValue": (newVal) => handleTableSorterChange(column.sortKey, newVal)
}, null, 8, ["disabled", "model-value", "onUpdate:modelValue"])) : vue.createCommentVNode("v-if", true),
column.description ? (vue.openBlock(), vue.createBlock(
vue.unref(OPopover),
{
key: 4,
position: "top",
"wrap-class": "o-table-tooltip-wrapper"
},
{
target: vue.withCtx(() => [
vue.createVNode(vue.unref(IconInfoTip), { class: "o-data-table-info__trigger" })
]),
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(getRenderableComponent)(column.description))))
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)) : vue.createCommentVNode("v-if", true)
]),
vue.createCommentVNode(" 如果可调整宽度，且没有合并单元格，则显示 "),
props.columnResizable && (vue.unref(isNil)(column.customColSpan) || column.customColSpan <= 1) && !((_b2 = column.children) == null ? void 0 : _b2.length) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "o-table-column-resizer",
onMousedown: (event) => vue.unref(handleColumnResizerMousedown)({ event, column, colIndex })
}, [
vue.unref(resizingColumnKey) === column.key ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$2)) : vue.createCommentVNode("v-if", true)
], 40, _hoisted_7$3)) : vue.createCommentVNode("v-if", true)
], 14, _hoisted_3$f)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
}),
128
/* KEYED_FRAGMENT */
))
]);
}),
128
/* KEYED_FRAGMENT */
))
])
],
512
/* NEED_PATCH */
)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"tbody",
{
class: "o-table-body",
onMousemove: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => vue.unref(handleMouseOver) && vue.unref(handleMouseOver)(...args)),
onMouseleave: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => vue.unref(clearHighlight) && vue.unref(clearHighlight)(...args)),
onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
(...args) => vue.unref(handleTouchStart) && vue.unref(handleTouchStart)(...args))
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(props.data, (row, rowIndex) => {
return vue.openBlock(), vue.createBlock(_sfc_main$M, {
key: getRowKey(row, rowIndex),
row,
"row-index": rowIndex,
level: 0
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(tdSlotNames.value, (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps))
])
};
}),
slots.expand ? {
name: "expand",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "expand", {
row,
rowIndex
})
]),
key: "0"
} : void 0
]), 1032, ["row", "row-index"]);
}),
128
/* KEYED_FRAGMENT */
)),
props.loading || !((_a2 = props.data) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2)) : vue.createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)
],
36
/* STYLE, NEED_HYDRATION */
)
];
}),
_: 3
/* FORWARDED */
}, 8, ["size", "disabled-x", "onScroll"]),
props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$2, [
vue.renderSlot(_ctx.$slots, "loading", {}, () => [
vue.createVNode(vue.unref(IconLoading), { class: "o-rotating" }),
vue.createElementVNode(
"div",
_hoisted_11$2,
vue.toDisplayString(vue.unref(loadingLabel2)),
1
/* TEXT */
)
])
])) : !((_d = props.data) == null ? void 0 : _d.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, [
!props.loading ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
vue.createElementVNode(
"div",
_hoisted_13$1,
vue.toDisplayString(vue.unref(emptyLabel2)),
1
/* TEXT */
)
]) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true),
!vue.unref(hasRightFixedColumn) && !props.loading && props.data.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$1)) : vue.createCommentVNode("v-if", true),
popoverVisible.value ? (vue.openBlock(), vue.createBlock(vue.unref(OPopover), {
key: popoverKey.value,
visivle: "",
target: popoverTarget.value,
position: ((_e = popoverKey.value) == null ? void 0 : _e.startsWith("td")) ? "bottom" : "top",
"wrap-class": "o-table-tooltip-wrapper"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(popoverContent.value),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["target", "position"])) : vue.createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
)), [
[vue.unref(vOnResize), vue.unref(checkTableOverflow)]
]);
};
}
});
const ODataTable = Object.assign(_sfc_main$J, {
install(app) {
app.component("ODataTable", _sfc_main$J);
}
});
const TagColorTypes = ["normal", "info", "primary", "success", "warning", "danger", "pending", "disabled", "main2"];
const TagVariantTypes = ["solid", "outline"];
const tagProps = {
/**
* @zh-CN 标签颜色 ['pending', 'disabled', 'main2']为 1.2.6 版本新增
* @en-US Tag color ['pending', 'disabled', 'main2'] new in 1.2.6
* @default 'normal'
*/
color: {
type: String,
default: "normal"
},
/**
* @zh-CN 标签类型
* @en-US Tag variant
* @default 'solid'
*/
variant: {
type: String,
default: "solid"
},
/**
* @zh-CN 标签尺寸
* @en-US Tag size
* @default 'large'
*/
size: {
type: String,
default: "large"
},
/**
* @zh-CN 标签圆角
* @en-US Tag round
*/
round: {
type: String
},
/**
* @zh-CN 是否可关闭
* @en-US Whether closable
* @default false
*/
closable: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否可交互，用于渲染不同的交互态样式
* @en-US Whether interactive, used to render different interaction state styles
* @default 当 closable 为 true 时默认 true，否则 false
* @since 1.2.6
*/
interactive: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否可见 (双向绑定)
* @en-US Whether visible (two-way binding)
*/
visible: {
type: Boolean,
default: void 0
},
/**
* @zh-CN 非受控模式，是否默认可见
* @en-US Uncontrolled mode, whether visible by default
* @default true
*/
defaultVisible: {
type: Boolean,
default: true
},
/**
* @zh-CN 关闭前的钩子函数
* @en-US Hook function before closing
*/
beforeClose: {
type: Function
}
};
const _hoisted_1$y = {
key: 0,
class: "o-tag-icon"
};
const _hoisted_2$m = { class: "o-tag-label" };
const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
__name: "OTag",
props: tagProps,
emits: ["update:visible", "close"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const round2 = getRoundClass(props, "tag");
const innerIsVisible = vue.ref(props.visible ?? props.defaultVisible);
const isVisible = vue.computed(() => props.visible ?? innerIsVisible.value);
const onClose = async (ev) => {
ev.stopPropagation();
if (isFunction(props.beforeClose)) {
const rlt = await props.beforeClose();
if (rlt) {
innerIsVisible.value = false;
emits("update:visible", innerIsVisible.value);
emits("close", ev);
return;
}
}
innerIsVisible.value = false;
emits("update:visible", innerIsVisible.value);
emits("close", ev);
};
return (_ctx, _cache) => {
return isVisible.value ? (vue.openBlock(), vue.createElementBlock(
"span",
{
key: 0,
class: vue.normalizeClass(["o-tag", [
`o-tag-${props.variant}`,
`o-tag-${props.color}`,
`o-tag-${props.size}`,
vue.unref(round2).class.value,
{ "o-tag-closable": props.closable, "o-tag-interactive": props.interactive || props.closable }
]]),
style: vue.normalizeStyle(vue.unref(round2).style.value)
},
[
_ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$y, [
vue.renderSlot(_ctx.$slots, "icon")
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("span", _hoisted_2$m, [
vue.renderSlot(_ctx.$slots, "default")
]),
props.closable ? (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: "o-tag-close",
onClick: onClose
}, [
vue.createVNode(vue.unref(IconClose))
])) : vue.createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
)) : vue.createCommentVNode("v-if", true);
};
}
});
const OTag = Object.assign(_sfc_main$I, {
install(app) {
app.component("OTag", _sfc_main$I);
}
});
const inTextareaProps = {
/**
* @zh-CN 双向绑定值
* @en-US Two-way binding value
*/
modelValue: {
type: String
},
/**
* @zh-CN 非受控默认值
* @en-US Non-controlled default value
*/
defaultValue: {
type: String
},
/**
* @zh-CN 提示文本
* @en-US Prompt text
*/
placeholder: {
type: String
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 是否只读
* @en-US Whether to read-only
*/
readonly: {
type: Boolean
},
/**
* @zh-CN 是否可以清除
* @en-US Whether to clear
*/
clearable: {
type: Boolean
},
/**
* @zh-CN 格式化函数，控制显示格式
* @en-US Format function, control display format
*/
format: {
type: Function
},
/**
* @zh-CN 校验函数
* @en-US Validation function
*/
validate: {
type: Function
},
/**
* @zh-CN 输入为无效值时，在blur/pressEnter时的回调，返回值为纠正后的值；当输入值不合法时的处理方式：[true]：纠正为上一次合法的值(如果上一次合法值为空字符串，则不处理); [false|undefined]: 不处理；[function]: 使用函数的返回值
* @en-US When the input value is an invalid value, the callback during blur/pressEnter returns the corrected value.
*/
valueOnInvalidChange: {
type: [Boolean, Function]
},
/**
* @zh-CN 同 textarea 的 rows 属性
* @en-US The rows attribute of textarea
*/
rows: {
type: Number,
default: 4
},
/**
* @zh-CN 同 textarea 的 cols 属性
* @en-US The cols attribute of textarea
*/
cols: {
type: Number,
default: void 0
},
/**
* @zh-CN 是否支持调整尺寸
* @en-US Whether to support resizing
* @default 'vertical'
*/
resize: {
type: String,
default: "vertical"
},
/**
* @zh-CN 字符最小长度
* @en-US Minimum length of characters
*/
minLength: {
type: Number
},
/**
* @zh-CN 字符最大长度
* @en-US Maximum length of characters
*/
maxLength: {
type: Number
},
/**
* @zh-CN 是否显示字符长度信息，always: 一直显示； never：不显示；auto：设置了minLength、maxLength时显示
* @en-US if not show character length.
*/
showLength: {
type: [String, Function],
default: "auto"
},
/**
* @zh-CN 获取长度方法
* @en-US The method of getting length
*/
getLength: {
type: Function
},
/**
* @zh-CN 超过最大字符长度时是否允许输入
* @en-US Whether to allow input when exceeding the maximum character length
* @default true
*/
inputOnOutlimit: {
type: Boolean,
default: true
},
/**
* @zh-CN 根据内容自动计算高度
* @en-US Whether to automatically calculate height based on content
*/
autoSize: {
type: Boolean
},
/**
* @zh-CN id, 用于关联label
* @en-US id, for associating label
*/
textareaId: {
type: String
},
/**
* @zh-CN scrollbar配置
* @en-US scrollbar configuration
* @default true
*/
scrollbar: {
type: [Boolean, Object],
default: true
}
};
const textareaProps = {
...inTextareaProps,
/**
* @zh-CN 尺寸
* @en-US Size
*/
size: {
type: String
},
/**
* @zh-CN 圆角
* @en-US Round
*/
round: {
type: String
},
/**
* @zh-CN 颜色类型
* @en-US Color type
*/
color: {
type: String,
default: "normal"
},
/**
* @zh-CN 形状变体
* @en-US Shape variant
*/
variant: {
type: String,
default: "outline"
}
};
const _hoisted_1$x = ["for"];
const _hoisted_2$l = ["date-value"];
const _hoisted_3$e = ["id", "value", "placeholder", "readonly", "disabled", "rows", "cols"];
const _hoisted_4$a = ["innerHTML"];
const _hoisted_5$9 = { key: 1 };
const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
__name: "InTextarea",
props: inTextareaProps,
emits: ["update:modelValue", "change", "input", "focus", "blur", "clear", "pressEnter"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const slots = vue.useSlots();
const { t } = useI18n();
const { modelValue: modelValue2, inputOnOutlimit, maxLength, minLength, showLength } = vue.toRefs(props);
const {
displayValue,
clearValue: clear,
isValid,
inputValueLength,
isShowLength,
isOutLengthLimit,
handleBlur,
handleInput,
handleFocus,
handleClear,
inputEl
} = useInput({
emits,
maxLength,
minLength,
showLength,
inputOnOutlimit,
modelValue: modelValue2,
defaultValue: props.defaultValue ?? "",
emitUpdate: (value) => {
emits("update:modelValue", value);
},
format: props.format,
validate: props.validate,
valueOnInvalidChange: props.valueOnInvalidChange
});
const resizeValue = vue.computed(() => {
if (props.autoSize || props.disabled) {
return "none";
} else {
if (props.resize === "h") {
return "horizontal";
} else if (props.resize === "v") {
return "vertical";
}
return props.resize;
}
});
const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly);
const focus = () => {
var _a;
(_a = inputEl.value) == null ? void 0 : _a.focus();
};
const blur = () => {
var _a;
(_a = inputEl.value) == null ? void 0 : _a.blur();
};
const mirrorValue = vue.computed(() => {
return displayValue.value;
});
const scrollbarProps2 = vue.computed(() => {
if (props.scrollbar === true) {
return {
showType: "hover",
size: "small"
};
}
return props.scrollbar;
});
__expose({
inputEl,
focus,
blur,
clear
});
return (_ctx, _cache) => {
var _a, _b;
return vue.openBlock(), vue.createElementBlock("label", {
class: vue.normalizeClass(["o_textarea", {
"o_textarea-clearable": isClearable.value && vue.unref(displayValue) !== "",
"o_textarea-disabled": props.disabled,
"o_textarea-readonly": props.readonly,
"o_textarea-invalid": !vue.unref(isValid),
"o_textarea-auto-size": props.autoSize,
"o_textarea-limit": props.maxLength
}]),
for: props.textareaId
}, [
((_a = slots.prefix) == null ? void 0 : _a.call(slots)) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: "o_textarea-prefix",
onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.renderSlot(_ctx.$slots, "prefix")
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(["o_textarea-wrap", {
"o_textarea-wrap-auto-size": props.autoSize
}]),
"date-value": mirrorValue.value
}, [
vue.withDirectives(vue.createElementVNode("textarea", {
id: props.textareaId,
ref_key: "inputEl",
ref: inputEl,
value: vue.unref(displayValue),
class: "o_textarea-textarea",
placeholder: props.placeholder,
readonly: props.readonly,
disabled: props.disabled,
rows: props.rows,
cols: props.cols,
style: vue.normalizeStyle({
resize: resizeValue.value
}),
onFocus: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
onBlur: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args)),
onInput: _cache[3] || (_cache[3] = //@ts-ignore
(...args) => vue.unref(handleInput) && vue.unref(handleInput)(...args))
}, null, 44, _hoisted_3$e), [
[vue.unref(vScrollbar), scrollbarProps2.value]
]),
isClearable.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: "o_textarea-icon o_textarea-clear",
onClick: _cache[4] || (_cache[4] = //@ts-ignore
(...args) => vue.unref(handleClear) && vue.unref(handleClear)(...args)),
onMousedown: _cache[5] || (_cache[5] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createVNode(vue.unref(IconClose), { class: "o_textarea-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true),
vue.unref(isShowLength) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass(["o_textarea-icon o_textarea-count", { "o_textarea-count-error": vue.unref(isOutLengthLimit) }])
},
[
vue.renderSlot(_ctx.$slots, "length", { length: vue.unref(inputValueLength) }, () => [
props.maxLength ?? props.minLength ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
innerHTML: vue.unref(t)("input.limit", vue.unref(inputValueLength), props.maxLength ?? props.minLength)
}, null, 8, _hoisted_4$a)) : (vue.openBlock(), vue.createElementBlock(
"span",
_hoisted_5$9,
vue.toDisplayString(vue.unref(inputValueLength)),
1
/* TEXT */
))
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true)
], 10, _hoisted_2$l),
((_b = slots.suffix) == null ? void 0 : _b.call(slots)) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_textarea-suffix",
onMousedown: _cache[6] || (_cache[6] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.renderSlot(_ctx.$slots, "suffix")
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
], 10, _hoisted_1$x);
};
}
});
const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
__name: "OTextarea",
props: textareaProps,
emits: ["update:modelValue", "change", "input", "blur", "focus", "clear"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const formItemInjection = vue.inject(formItemInjectKey, null);
const inTextareaRef = vue.ref();
const color2 = vue.computed(() => {
var _a;
if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || "normal";
} else {
return props.color;
}
});
const onInput = (e) => {
var _a, _b;
emits("input", e);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onInput) == null ? void 0 : _b.call(_a);
};
const isFocus = vue.ref(false);
const onFocus = (e) => {
var _a, _b;
if (isFocus.value) {
return;
}
isFocus.value = true;
emits("focus", e);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onFocus) == null ? void 0 : _b.call(_a);
};
const onBlur = (e) => {
var _a, _b;
isFocus.value = false;
emits("blur", e);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onBlur) == null ? void 0 : _b.call(_a);
};
const onClear = (e) => {
emits("clear", e);
};
const onUpdatedModelValue = (value) => {
emits("update:modelValue", value);
};
const onChange = (value) => {
var _a, _b;
emits("change", value);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
};
const textareaId = vue.ref(props.textareaId);
vue.onMounted(() => {
if (!textareaId.value) {
textareaId.value = uniqueId();
}
});
const round2 = vue.computed(() => {
return props.round === "pill" ? "var(--o-radius_control-l)" : props.round;
});
__expose({
/**
* @zh-CN 聚焦文本域
* @en-US Focus the textarea
*/
focus: () => {
var _a;
return (_a = inTextareaRef.value) == null ? void 0 : _a.focus();
},
/**
* @zh-CN 取消文本域聚焦
* @en-US Blur the textarea
*/
blur: () => {
var _a;
return (_a = inTextareaRef.value) == null ? void 0 : _a.blur();
},
/**
* @zh-CN 清空文本域内容
* @en-US Clear the textarea value
*/
clear: () => {
var _a;
return (_a = inTextareaRef.value) == null ? void 0 : _a.clear();
},
/**
* @zh-CN 获取原生 textarea 元素
* @en-US Get the native textarea element
*/
inputEl: () => {
var _a;
return (_a = inTextareaRef.value) == null ? void 0 : _a.inputEl;
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(
vue.h(
vue.unref(_sfc_main$1e),
{
class: "o-textarea",
size: props.size,
variant: props.variant,
color: color2.value,
disabled: props.disabled,
readonly: props.readonly,
round: round2.value,
focused: isFocus.value
},
{
default: () => vue.h(
vue.unref(_sfc_main$H),
{
ref: "inTextareaRef",
class: "o-textarea-textarea",
modelValue: vue.unref(formateToString)(props.modelValue),
defaultValue: vue.unref(formateToString)(props.defaultValue),
textareaId: textareaId.value,
...vue.unref(pick)(props, [
"scrollbar",
"placeholder",
"disabled",
"readonly",
"clearable",
"format",
"validate",
"valueOnInvalidChange",
"autoSize",
"resize",
"rows",
"cols",
"getLength",
"maxLength",
"inputOnOutlimit",
"showLength"
]),
onChange,
onInput,
onFocus,
onBlur,
onClear,
"onUpdate:modelValue": onUpdatedModelValue
},
vue.unref(pick)(_ctx.$slots, ["prefix", "suffix"])
)
}
)
));
};
}
});
const OTextarea = Object.assign(_sfc_main$G, {
install(app) {
app.component("OTextarea", _sfc_main$G);
}
});
const buttonToggleProps = {
/**
* @zh-CN 双向绑定值，是否被选中
* @en-US Bidirectional binding value, whether selected.
* @default undefined
*/
checked: {
type: Boolean,
default: void 0
},
/**
* @zh-CN 非受控状态时，默认是否选中
* @en-US Whether it is selected by default when in an uncontrolled state.
* @default false
*/
defaultChecked: {
type: Boolean,
default: false
},
/**
* @zh-CN 圆角值
* @en-US Round.
*/
round: {
type: String
},
/**
* @zh-CN 前缀图标
* @en-US Prefix icon.
*/
icon: {
type: Object
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable.
* @default false
*/
disabled: {
type: Boolean,
default: false
}
};
const _hoisted_1$w = {
key: 0,
class: "o-toggle-prefix"
};
const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
__name: "OToggle",
props: buttonToggleProps,
emits: ["update:checked", "change"],
setup(__props, { emit: __emit }) {
const checkboxInjection = vue.inject(checkboxInjectKey, null);
const radioInjection = vue.inject(radioInjectKey, null);
const props = __props;
const round2 = getRoundClass(props, "toggle");
const isChecked = vue.ref(props.checked ?? props.defaultChecked);
const emits = __emit;
vue.watch(
() => props.checked,
(val) => {
if (!isUndefined(val)) {
isChecked.value = val;
}
}
);
const onClick = (ev) => {
if (props.disabled || checkboxInjection || radioInjection) {
return;
}
isChecked.value = !isChecked.value;
emits("update:checked", isChecked.value);
vue.nextTick(() => {
emits("change", isChecked.value, ev);
});
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-toggle", [
vue.unref(round2).class.value,
{
"o-toggle-disabled": props.disabled,
"o-toggle-checked": isChecked.value
}
]]),
style: vue.normalizeStyle(vue.unref(round2).style.value),
onClick
},
[
props.icon || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$w, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.icon)))
])
])) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default")
],
6
/* CLASS, STYLE */
);
};
}
});
const OToggle = Object.assign(_sfc_main$F, {
install(app) {
app.component("OButtonToggle", _sfc_main$F);
app.component("OToggle", _sfc_main$F);
}
});
const UploadFileStatusTypes = ["pending", "uploading", "finished", "failed"];
const UploadListTypes = ["text", "picture", "picture-card"];
const uploadProps = {
/**
* @zh-CN 文件列表(受控)
* @en-US File List (Controlled).
*/
modelValue: {
type: Array
},
/**
* @zh-CN 文件列表(非受控)
* @en-US File list (uncontrolled).
*/
defaultFileList: {
type: Array
},
/**
* @zh-CN 文件选择，MIME类型：image/jpeg;image/jpg;image/png;image/gif;video/mp4
* @en-US File selection, MIME type: image/jpeg; image/jpg; image/png; image/gif; video/mp4.
*/
accept: {
type: String
},
/**
* @zh-CN 是否为禁用状态
* @en-US Disable uploading.
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 是否支持多文件上传
* @en-US Support multi-file upload.
*/
multiple: {
type: Boolean
},
/**
* @zh-CN 选择文件前回调，根据返回值判断是否继续选择文件
* @en-US Before selecting a file, there is a callback. Based on the return value, determine whether to continue selecting the file.
*/
beforeSelect: {
type: Function
},
/**
* @zh-CN 选择后触发
* @en-US Triggered after selection.
*/
onAfterSelect: {
type: Function
},
/**
* @zh-CN 下载文件
* @en-US Download the file.
* @since 1.2.1
*/
downloadFile: {
type: Function
},
/**
* @zh-CN 上传按钮文本
* @en-US Upload button text.
*/
btnLabel: {
type: String
},
/**
* @zh-CN 自定义上传请求
* @en-US Customize upload requests.
*/
uploadRequest: {
type: Function
},
/**
* @zh-CN true 选择完成后，手动触发上传；false 选择完成后自动上传
* @en-US After the true selection is completed, manually trigger the upload. false: Automatically upload after selection is completed.
*/
lazyUpload: {
type: Boolean
},
/**
* @zh-CN 上传前触发
* @en-US Triggered before upload.
*/
onBeforeUpload: {
type: Function
},
/**
* @zh-CN 删除前触发
* @en-US Triggered before deletion.
*/
onBeforeRemove: {
type: Function
},
/**
* @zh-CN 支持拖拽上传
* @en-US Supports drag-and-drop upload.
*/
draggable: {
type: Boolean
},
/**
* @zh-CN 拖拽区域上传提示文本
* @en-US Drag the area to upload the prompt text.
*/
dragLabel: {
type: String
},
/**
* @zh-CN 拖拽区域拖拽中的提示文本
* @en-US The prompt text in the drag-and-drop area.
*/
dragHoverLabel: {
type: String
},
/**
* @zh-CN 文件列表类型
* @en-US File list type.
* @default 'text'
*/
listType: {
type: String,
default: "text"
},
/**
* @zh-CN 生成缩略图
* @en-US Generate thumbnails.
*/
createThumbnail: {
type: Function
},
/**
* @zh-CN 文件上传中是否展示进度条
* @en-US Whether to display a progress bar during file upload.
* @since 1.2.0
*/
showProgress: {
type: Boolean,
default: false
}
};
const slot = {
names: {
uploadItem: "item",
select: "default",
selectDrag: "select-drag",
selectDragExtra: "select-drag-extra"
}
};
const _hoisted_1$v = { class: "o-upload-card-item-wrap" };
const _hoisted_2$k = { class: "o-upload-card-file" };
const _hoisted_3$d = { class: "o-upload-card-icons" };
const _hoisted_4$9 = {
key: 0,
class: "o-upload-status-wrap"
};
const _hoisted_5$8 = { class: "o-upload-status-info" };
const _hoisted_6$3 = {
key: 0,
class: "o-upload-status-wrap o-upload-status-wrap-error"
};
const _hoisted_7$2 = { class: "o-upload-status-upper-layer" };
const _hoisted_8$1 = { class: "o-upload-status-info" };
const _hoisted_9$1 = { class: "o-upload-status-lower-layer" };
const _hoisted_10$1 = {
key: 1,
class: "o-upload-status-wrap o-upload-status-wrap-success"
};
const _hoisted_11$1 = {
key: 0,
class: "o-upload-progress o-upload-card-progress"
};
const _hoisted_12 = {
key: 1,
class: "o-upload-icon-link"
};
const _hoisted_13 = { class: "o-upload-row-label" };
const _hoisted_14 = { class: "o-upload-row-icons" };
const _hoisted_15 = {
key: 2,
class: "o-upload-progress o-upload-row-progress"
};
const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
__name: "UploadItem",
props: {
file: {},
listType: {},
showProgress: {},
draggable: { type: Boolean }
},
emits: ["replace", "remove", "retry", "preview", "itemClick", "download"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const { t } = useI18n();
const onFileRemove = (e) => {
e.stopPropagation();
emits("remove", props.file, e);
};
const onFileUploadRetry = (e) => {
e.stopPropagation();
emits("retry", props.file, e);
};
const showLoading = () => {
if (props.file.status !== "uploading") {
return false;
}
if (!props.showProgress) {
return true;
}
if (!props.file.percent && props.file.percent !== 0) {
return true;
}
return false;
};
const figureRef = vue.useTemplateRef("figureRef");
const figurePreview = () => {
var _a;
(_a = figureRef.value) == null ? void 0 : _a.preview();
};
const onPreview = (e) => {
e.stopPropagation();
figurePreview();
emits("preview", props.file, e);
};
const onItemClick = (e) => {
emits("itemClick", props.file, e);
};
const onFileDownload = (e) => {
e.stopPropagation();
emits("download", props.file, e);
};
__expose({
preview: figurePreview
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-upload-item", {
"o-upload-item-error": props.file.status === "failed"
}])
},
[
vue.renderSlot(_ctx.$slots, vue.unref(slot).names.uploadItem, { item: __props.file }, () => [
props.listType === "picture-card" ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-upload-card-item", {
"is-error": props.file.status === "failed"
}]),
onClick: onItemClick
},
[
vue.createElementVNode("div", _hoisted_1$v, [
vue.createElementVNode("div", _hoisted_2$k, [
props.file.status === "finished" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(OFigure), {
key: 0,
ref_key: "figureRef",
ref: figureRef,
"lazy-preview": "",
class: "o-upload-thumbnail",
src: props.file.imgUrl
}, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.unref(IconFile), {
key: 1,
class: "o-upload-icon-file"
}))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
]),
vue.createElementVNode("div", _hoisted_3$d, [
showLoading() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$9, [
vue.createVNode(vue.unref(OIcon), { class: "o-upload-status-icon" }, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(IconLoading), { class: "o-rotating" })
]),
_: 1
/* STABLE */
}),
vue.createElementVNode(
"div",
_hoisted_5$8,
vue.toDisplayString(vue.unref(t)("upload.loading")),
1
/* TEXT */
)
])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
props.file.status === "failed" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$3, [
vue.createElementVNode("div", _hoisted_7$2, [
vue.createVNode(vue.unref(OIcon), { class: "o-upload-status-icon" }, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(IconImgError))
]),
_: 1
/* STABLE */
}),
vue.createElementVNode(
"div",
_hoisted_8$1,
vue.toDisplayString(vue.unref(t)("upload.failed")),
1
/* TEXT */
)
]),
vue.createElementVNode("div", _hoisted_9$1, [
props.file.retry ? (vue.openBlock(), vue.createBlock(vue.unref(OButton), {
key: 0,
class: "o-upload-icon-btn o-upload-icon-retry",
icon: vue.unref(IconRefresh),
title: vue.unref(t)("upload.retry"),
onClick: onFileUploadRetry
}, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(OButton), {
class: "o-upload-icon-btn o-upload-icon-remove",
icon: vue.unref(IconDelete),
title: vue.unref(t)("upload.delete"),
onClick: onFileRemove
}, null, 8, ["icon", "title"])
])
])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$1, [
props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(OButton), {
key: 0,
icon: vue.unref(IconPreview),
class: "o-upload-icon-btn o-upload-icon-preview",
title: vue.unref(t)("upload.preview"),
onClick: onPreview
}, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(OButton), {
class: "o-upload-icon-btn o-upload-icon-remove",
icon: vue.unref(IconDelete),
title: vue.unref(t)("upload.delete"),
onClick: onFileRemove
}, null, 8, ["icon", "title"])
]))
],
64
/* STABLE_FRAGMENT */
))
]),
props.file.status === "uploading" && props.showProgress && props.file.percent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [
vue.createElementVNode(
"div",
{
class: "o-upload-progress-bar",
style: vue.normalizeStyle({ width: props.file.percent + "%" })
},
null,
4
/* STYLE */
)
])) : vue.createCommentVNode("v-if", true)
])
],
2
/* CLASS */
)) : (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass(["o-upload-row-item", {
"is-error": props.file.status === "failed"
}]),
onClick: onItemClick
},
[
props.listType === "picture" && props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(OFigure), {
key: 0,
ref_key: "figureRef",
ref: figureRef,
preview: "",
class: "o-upload-thumbnail",
src: props.file.imgUrl,
onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["stop"]))
}, null, 8, ["src"])) : props.file.icon !== false ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
props.file.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.file.icon), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(IconLinkPrefix), { key: 1 }))
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
_hoisted_13,
vue.toDisplayString(props.file.name),
1
/* TEXT */
),
vue.createElementVNode("div", _hoisted_14, [
showLoading() ? (vue.openBlock(), vue.createBlock(vue.unref(OIcon), {
key: 0,
class: "o-upload-icon-loading"
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(IconLoading), { class: "o-rotating" })
]),
_: 1
/* STABLE */
})) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
props.file.status === "failed" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
props.file.retry ? (vue.openBlock(), vue.createBlock(vue.unref(OButton), {
key: 0,
class: "o-upload-row-icon o-upload-icon-hover-in o-upload-icon-retry",
icon: vue.unref(IconRefresh),
title: vue.unref(t)("upload.retry"),
onClick: onFileUploadRetry
}, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
props.draggable ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(OFigure), {
key: 0,
ref_key: "figureRef",
ref: figureRef,
"lazy-preview": "",
class: "o-upload-thumbnail",
src: props.file.imgUrl
}, null, 8, ["src"])) : vue.createCommentVNode("v-if", true),
props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(OButton), {
key: 1,
icon: vue.unref(IconPreview),
class: "o-upload-row-icon o-upload-icon-preview o-upload-icon-hover-in",
title: vue.unref(t)("upload.preview"),
onClick: onPreview
}, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(OButton), {
class: "o-upload-row-icon o-upload-icon-download o-upload-icon-hover-in",
icon: vue.unref(IconDownload),
title: vue.unref(t)("upload.download"),
onClick: onFileDownload
}, null, 8, ["icon", "title"])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
))
],
64
/* STABLE_FRAGMENT */
)),
vue.createVNode(vue.unref(OButton), {
class: "o-upload-row-icon o-upload-icon-remove o-upload-icon-hover-in",
icon: vue.unref(IconDelete),
title: vue.unref(t)("upload.delete"),
onClick: onFileRemove
}, null, 8, ["icon", "title"])
]),
props.file.status === "uploading" && props.showProgress && props.file.percent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, [
vue.createElementVNode(
"div",
{
class: "o-upload-progress-bar",
style: vue.normalizeStyle({ width: props.file.percent + "%" })
},
null,
4
/* STYLE */
)
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
)),
props.file.message ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 2,
class: vue.normalizeClass(["o-upload-item-tip", [
{
"is-error": props.file.status === "failed"
},
props.file.messageClass
]])
},
vue.toDisplayString(props.file.message),
3
/* TEXT, CLASS */
)) : vue.createCommentVNode("v-if", true)
])
],
2
/* CLASS */
);
};
}
});
const requestUploadFile = (file, options) => {
return new Promise((resolve) => {
if (isFunction(options.uploadRequest)) {
file.status = "uploading";
file.request = options.uploadRequest({
file,
onProgress(percent) {
file.percent = percent;
if (isFunction(options.onProgress)) {
options.onProgress(file);
}
},
onSuccess() {
file.status = "finished";
file.retry = false;
resolve(file);
if (isFunction(options.onSuccess)) {
options.onSuccess(file);
}
},
onError(response, retry) {
file.status = "failed";
file.message = response == null ? void 0 : response.message;
file.retry = retry;
if (file.percent) {
file.percent = 0;
}
resolve(file);
if (isFunction(options.onError)) {
options.onError(file);
}
}
});
} else {
resolve(file);
}
});
};
const doUploadFile = (file, options) => {
file.retry = false;
file.message = "";
if (isFunction(options.onBeforeUpload)) {
return options.onBeforeUpload(file).then((res) => {
if (res === false) {
return;
}
if (res instanceof File) {
file.file = res;
}
return requestUploadFile(file, options);
});
} else {
return requestUploadFile(file, options);
}
};
const doUploadFileList = (fileList, options) => {
if (fileList.length === 0) {
return;
}
const rlt = fileList.map((f) => {
if (f.status && ["finished", "uploading"].includes(f.status)) {
return Promise.resolve(f);
}
return doUploadFile(f, options);
});
return Promise.allSettled(rlt).then(() => {
return fileList;
});
};
function isImageType(file) {
var _a;
return (_a = file.type) == null ? void 0 : _a.includes("image/");
}
function generateImageDataUrl(file) {
if (typeof file === "string") {
return file;
}
if (isImageType(file)) {
return URL.createObjectURL(file);
} else {
return "";
}
}
function isPictureType(type) {
return !!type && ["picture", "picture-card", "text"].includes(type);
}
const _hoisted_1$u = { class: "o-upload-drag-label" };
const _hoisted_2$j = {
key: 0,
class: "o-upload-select-extra"
};
const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
__name: "UploadSelect",
props: {
draggable: { type: Boolean },
dragLabel: {},
dragHoverLabel: {},
btnLabel: {},
disabled: { type: Boolean }
},
emits: ["to-select", "selected"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const { t } = useI18n();
const onSelectClick = () => {
if (props.disabled) {
return;
}
emits("to-select");
};
const isDragging = vue.ref(false);
let dragCnt = 0;
const onDragEnter = (e) => {
e.preventDefault();
if (props.disabled) {
return;
}
dragCnt++;
};
const onDragOver = (e) => {
e.preventDefault();
if (!isDragging.value && !props.disabled) {
isDragging.value = true;
}
};
const onDragLeave = () => {
if (props.disabled) {
return;
}
dragCnt--;
if (dragCnt === 0) {
isDragging.value = false;
}
};
const onDrap = (e) => {
var _a;
e.preventDefault();
if (props.disabled) {
return;
}
const files = (_a = e.dataTransfer) == null ? void 0 : _a.files;
if (files && files.length > 0) {
emits("selected", files);
}
isDragging.value = false;
dragCnt = 0;
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-upload-select", {
"o-upload-select-drag": props.draggable
}]),
onClick: onSelectClick
},
[
vue.renderSlot(_ctx.$slots, vue.unref(slot).names.select, {}, () => [
props.draggable ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-upload-drag", {
"o-upload-drag-dragging": isDragging.value,
"o-upload-drag-disabled": props.disabled
}]),
onDragenter: onDragEnter,
onDragover: onDragOver,
onDragleave: onDragLeave,
onDrop: onDrap
},
[
vue.renderSlot(_ctx.$slots, vue.unref(slot).names.selectDrag, {}, () => [
vue.createVNode(vue.unref(IconAdd), { class: "o-upload-drag-icon" }),
vue.createElementVNode(
"div",
_hoisted_1$u,
vue.toDisplayString(!isDragging.value ? props.dragLabel ?? vue.unref(t)("upload.drag") : props.dragHoverLabel ?? vue.unref(t)("upload.dragHover")),
1
/* TEXT */
),
_ctx.$slots[vue.unref(slot).names.selectDragExtra] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$j, [
vue.renderSlot(_ctx.$slots, vue.unref(slot).names.selectDragExtra)
])) : vue.createCommentVNode("v-if", true)
])
],
34
/* CLASS, NEED_HYDRATION */
)) : (vue.openBlock(), vue.createBlock(_sfc_main$1J, {
key: 1,
color: "primary",
round: "pill",
disabled: props.disabled,
icon: vue.unref(IconAdd)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(props.btnLabel ?? vue.unref(t)("upload.buttonLabel")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled", "icon"]))
])
],
2
/* CLASS */
);
};
}
});
const _hoisted_1$t = { class: "o-upload-select-input" };
const _hoisted_2$i = ["accept", "disabled"];
const _hoisted_3$c = ["accept", "disabled"];
const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
__name: "InputSelect",
props: {
accept: {},
disabled: { type: Boolean }
},
emits: ["selected"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const inputRef = vue.ref(null);
const multipleInputRef = vue.ref(null);
const onInputChange = function(e) {
const target = e.target;
const files = target.files;
if (files && files.length > 0) {
emits("selected", files);
}
target.value = "";
};
const select = (multiple2) => {
var _a, _b;
if (props.disabled) {
return;
}
if (multiple2) {
(_a = multipleInputRef.value) == null ? void 0 : _a.click();
} else {
(_b = inputRef.value) == null ? void 0 : _b.click();
}
};
__expose({
select
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
vue.createElementVNode("input", {
ref_key: "multipleInputRef",
ref: multipleInputRef,
type: "file",
class: "o-upload-input",
multiple: "",
accept: props.accept,
disabled: props.disabled,
onChange: onInputChange
}, null, 40, _hoisted_2$i),
vue.createElementVNode("input", {
ref_key: "inputRef",
ref: inputRef,
type: "file",
class: "o-upload-input",
accept: props.accept,
disabled: props.disabled,
onChange: onInputChange
}, null, 40, _hoisted_3$c)
]);
};
}
});
const _hoisted_1$s = {
key: 0,
class: "o-upload-select-wrap"
};
const _hoisted_2$h = {
key: 0,
class: "o-upload-select-extra"
};
const _hoisted_3$b = { class: "o-upload-card-label" };
const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
__name: "OUpload",
props: uploadProps,
emits: ["progress", "success", "error", "change", "select", "update:modelValue", "itemRemove", "itemRetry", "itemReplace", "itemPreview", "itemClick", "download"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const slots = vue.useSlots();
const emits = __emit;
const emitUpdateValue = (value) => {
emits("update:modelValue", value);
};
const { t } = useI18n();
const fileList = vue.ref(props.modelValue ?? props.defaultFileList ?? []);
vue.watch(
() => props.modelValue,
(v) => {
if (fileList.value === v) {
return;
}
if (isArray(v)) {
fileList.value = [...v];
} else {
fileList.value = [];
}
}
);
const formItemInjection = vue.inject(formItemInjectKey, null);
let fileId = 1;
const uploadOption = vue.computed(() => {
return {
uploadRequest: props.uploadRequest,
onBeforeUpload: props.onBeforeUpload,
onProgress: (file) => {
emits("progress", file);
},
onSuccess: (file) => {
emits("success", file);
emitUpdateValue(fileList.value);
emits("change", fileList.value);
},
onError: (file) => {
emits("error", file);
emitUpdateValue(fileList.value);
emits("change", fileList.value);
}
};
});
const selectRef = vue.ref(null);
let replaceId = "";
const uploadAll = () => {
return doUploadFileList(fileList.value, uploadOption.value);
};
const afterSelected = (files) => {
var _a, _b, _c, _d, _e, _f, _g;
if (replaceId) {
const idx = fileList.value.findIndex((item) => item.id === replaceId);
if (idx > -1) {
const f = fileList.value[idx];
(_a = f.request) == null ? void 0 : _a.abort();
fileList.value[idx] = files[0];
replaceId = "";
emitUpdateValue(fileList.value);
emits("select", fileList.value);
(_c = formItemInjection == null ? void 0 : (_b = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _c.call(_b);
if (!props.lazyUpload) {
doUploadFile(fileList.value[idx], uploadOption.value);
}
}
} else {
let s = fileList.value.length;
let l = files.length;
if (props.multiple) {
fileList.value = fileList.value.concat(files);
} else {
(_e = (_d = fileList.value[0]) == null ? void 0 : _d.request) == null ? void 0 : _e.abort();
fileList.value = files;
s = 0;
l = 1;
}
emitUpdateValue(fileList.value);
emits("select", fileList.value);
(_g = formItemInjection == null ? void 0 : (_f = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _g.call(_f);
if (!props.lazyUpload) {
doUploadFileList(fileList.value.slice(s, s + l), uploadOption.value);
}
}
};
const onFileSelected = async (files) => {
let list = [];
const isPicture = isPictureType(props.listType);
if (isFunction(props.onAfterSelect)) {
list = await props.onAfterSelect(files);
if (isPicture) {
list.forEach((item) => {
if (!item.imgUrl && item.file) {
item.imgUrl = generateImageDataUrl(item.file);
}
});
}
} else {
list = Array.from(files).map((item) => {
return {
id: `${fileId++}`,
name: item.name,
file: item,
imgUrl: isPicture ? generateImageDataUrl(item) : ""
};
});
}
afterSelected(list);
};
const doRemoveFile = async (file) => {
var _a, _b, _c;
if (isFunction(props.onBeforeRemove)) {
const sure = await props.onBeforeRemove(file);
if (sure === false) {
return false;
}
}
(_a = file.request) == null ? void 0 : _a.abort();
const index = fileList.value.findIndex((item) => item.id === file.id);
fileList.value.splice(index, 1);
(_c = formItemInjection == null ? void 0 : (_b = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _c.call(_b);
emitUpdateValue(fileList.value);
return true;
};
const removeFileByIndex = (index) => {
if (index < 0 && index >= fileList.value.length) {
return;
}
doRemoveFile(fileList.value[index]);
};
const removeById = (id) => {
const index = fileList.value.findIndex((item) => item.id === id);
removeFileByIndex(index);
};
const removeAllFiles = () => {
return new Promise((resolve) => {
Promise.allSettled(fileList.value.map((f) => doRemoveFile(f))).then((res) => {
resolve(res);
fileList.value = [];
emitUpdateValue(fileList.value);
emits("change", fileList.value);
});
});
};
const onRemoveFile = (file, e) => {
doRemoveFile(file).then(() => {
emits("itemRemove", file, e);
emits("change", fileList.value);
});
};
const doRetryUpload = (file, force) => {
var _a, _b;
if (!file.file) {
log$1.warn("retry file not found!");
return;
}
if (!file.retry && !force) {
return;
}
doUploadFile(file, uploadOption.value);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
};
const onFileUploadRetry = (file, e) => {
doRetryUpload(file);
emits("itemRetry", file, e);
};
const doReplaceFile = (file) => {
var _a;
replaceId = file.id;
(_a = selectRef.value) == null ? void 0 : _a.select(false);
};
const replaceByIndex = (index, newFile) => {
var _a, _b, _c;
const file = fileList.value[index];
if (!file) {
log$1.warn("file not found!");
}
(_a = file.request) == null ? void 0 : _a.abort();
if (newFile) {
fileList.value.splice(index, 1, newFile);
emits("change", fileList.value);
(_c = formItemInjection == null ? void 0 : (_b = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _c.call(_b);
} else {
doReplaceFile(file);
}
};
const replaceById = (id, newFile) => {
const index = fileList.value.findIndex((item) => item.id === id);
replaceByIndex(index, newFile);
};
const onFileReplace = (file, e) => {
var _a, _b;
doReplaceFile(file);
emits("itemReplace", file, e);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
};
const doSelect = async () => {
var _a;
if (isFunction(props.beforeSelect)) {
const goon = await props.beforeSelect(fileList.value);
if (goon === false) {
return;
}
}
(_a = selectRef.value) == null ? void 0 : _a.select(props.multiple);
};
const onUploadItemLabelClick = (file, e) => {
emits("itemClick", file, e);
};
const onFilePreview = (file, e) => {
emits("itemPreview", file, e);
};
const uploadItems = vue.useTemplateRef("uploadItems");
const previewItemByIndex = (index) => {
var _a;
const item = (_a = uploadItems.value) == null ? void 0 : _a[index];
item == null ? void 0 : item.preview();
};
const previewItemById = (id) => {
const idx = fileList.value.findIndex((item) => item.id === id);
previewItemByIndex(idx);
};
const onFileDownload = (file, e) => {
if (isFunction(props.downloadFile)) {
if (file.file) {
props.downloadFile(file.file);
}
}
emits("download", file, e);
};
__expose({
upload: uploadAll,
select: doSelect,
retry: doRetryUpload,
replace: doReplaceFile,
replaceById,
replaceByIndex,
removeById,
removeByIndex: removeFileByIndex,
removeAll: removeAllFiles,
previewItemByIndex,
previewItemById
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-upload", { "o-upload-draggable": _ctx.draggable }])
},
[
vue.createVNode(_sfc_main$C, {
ref_key: "selectRef",
ref: selectRef,
accept: props.accept,
disabled: props.disabled,
onSelected: onFileSelected
}, null, 8, ["accept", "disabled"]),
["text", "picture"].includes(props.listType) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
vue.createVNode(_sfc_main$D, {
disabled: props.disabled,
draggable: props.draggable,
"btn-label": props.btnLabel,
"drag-label": props.dragLabel,
"drag-hover-label": props.dragHoverLabel,
onToSelect: doSelect,
onSelected: onFileSelected
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(filterSlots)(slots, vue.unref(slot).names), (name) => {
return {
name,
fn: vue.withCtx((slotData) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotData)))
])
};
})
]), 1032, ["disabled", "draggable", "btn-label", "drag-label", "drag-hover-label"]),
slots["select-extra"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$h, [
vue.renderSlot(_ctx.$slots, "select-extra")
])) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-upload-list", {
"o-upload-card-list": props.listType === "picture-card"
}])
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(fileList.value, (item) => {
return vue.openBlock(), vue.createBlock(_sfc_main$E, {
ref_for: true,
ref_key: "uploadItems",
ref: uploadItems,
key: item.id,
file: item,
"list-type": props.listType,
"show-progress": props.showProgress,
draggable: props.draggable,
onRemove: onRemoveFile,
onRetry: onFileUploadRetry,
onReplace: onFileReplace,
onPreview: onFilePreview,
onItemClick: onUploadItemLabelClick,
onDownload: onFileDownload
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(filterSlots)(slots, vue.unref(slot).names), (name) => {
return {
name,
fn: vue.withCtx((slotData) => [
vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotData))
])
};
})
]), 1032, ["file", "list-type", "show-progress", "draggable"]);
}),
128
/* KEYED_FRAGMENT */
)),
props.listType === "picture-card" ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-upload-card-add", {
"is-disabled": props.disabled
}]),
onClick: doSelect
},
[
vue.createElementVNode("div", null, [
vue.renderSlot(_ctx.$slots, "select-add", {}, () => [
vue.createVNode(vue.unref(IconAdd), { class: "o-upload-card-add-icon" }),
vue.createElementVNode("div", _hoisted_3$b, [
vue.renderSlot(_ctx.$slots, "select-add-label", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.btnLabel ?? vue.unref(t)("upload.buttonLabel")),
1
/* TEXT */
)
])
])
])
])
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
)
],
2
/* CLASS */
);
};
}
});
const OUpload = Object.assign(_sfc_main$B, {
install(app) {
app.component("OUpload", _sfc_main$B);
}
});
const stepInjectKey = Symbol("provide-step");
const StepItemStatusTypes = ["finished", "processing", "waiting", "failed"];
const stepProps = {
/**
* @zh-CN 步骤条方向
* @en-US Direction of the step bar.
* @default 'h'
*/
direction: {
type: String,
default: "h"
}
};
const stepItemProps = {
/**
* @zh-CN 标题
* @en-US title
*/
title: {
type: String
},
/**
* @zh-CN 描述
* @en-US description
*/
description: {
type: String
},
/**
* @zh-CN 状态
* @en-US Status
* @default 'finished'
*/
status: {
type: String,
default: "finished"
},
/**
* @zh-CN 当前是第几步 从0记起
* @en-US Which step is it currently? Counting from 0.
*/
stepIndex: {
type: Number,
required: true
},
/**
* @zh-CN 步骤图标
* @en-US Step icon.
*/
icon: {
type: [Boolean, Object]
}
};
const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
__name: "OStep",
props: stepProps,
setup(__props) {
const props = __props;
const ro2 = useResizeObserver();
const stepItemHeadRefs = vue.ref([]);
const stepItemBoundingArr = vue.reactive([]);
const stepItemDividerRects = vue.computed(() => {
return stepItemBoundingArr == null ? void 0 : stepItemBoundingArr.map(({ left, top, width, height }, i) => {
const prev = stepItemBoundingArr[i - 1];
if (!prev) {
return;
}
if (props.direction === "h") {
return {
"--o-step-item-left": `calc(${prev.right - left}px + var(--step-item-line-gap))`,
"--o-step-item-right": "calc(var(--step-item-line-gap) + 100%)",
"--o-step-item-top": `calc(${height}px / 2)`,
"--o-step-item-bottom": ""
};
}
return {
"--o-step-item-left": `calc(${width}px / 2)`,
"--o-step-item-top": `calc(${prev.bottom - top}px + var(--step-item-line-gap)`,
"--o-step-item-bottom": "calc(var(--step-item-line-gap) + 100%)",
"--o-step-item-right": ""
};
});
});
vue.provide(stepInjectKey, { props, stepItemHeadRefs, stepItemDividerRects });
const collectRects = (target, rects, idx) => {
target[idx] = rects;
};
const handleResize = (en) => {
const rect = en.target.getBoundingClientRect();
const idx = stepItemHeadRefs.value.findIndex((item) => item === en.target);
if (idx !== -1) {
collectRects(stepItemBoundingArr, rect, idx);
}
};
const observeAllItems = () => {
stepItemHeadRefs.value.forEach((element) => {
ro2.observe(element, handleResize);
});
};
const unobserveAllItems = () => {
stepItemHeadRefs.value.forEach((element) => {
ro2.unobserve(element, handleResize);
});
};
const update = () => {
stepItemHeadRefs.value.forEach((item, idx) => {
collectRects(stepItemBoundingArr, item.getBoundingClientRect(), idx);
});
};
const onStepResize = debounce(update, 0, false);
vue.onMounted(async () => {
await vue.nextTick();
observeAllItems();
});
vue.onUnmounted(() => {
unobserveAllItems();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(OResizeObserver), { onResize: vue.unref(onStepResize) }, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
vue.mergeProps({ class: "o-step" }, _ctx.$attrs, {
class: [`o-step-${props.direction}`]
}),
[
vue.renderSlot(_ctx.$slots, "default")
],
16
/* FULL_PROPS */
)
]),
_: 3
/* FORWARDED */
}, 8, ["onResize"]);
};
}
});
const _hoisted_1$r = { class: "o-step-item-main" };
const _hoisted_2$g = {
key: 0,
class: "o-step-item-title"
};
const _hoisted_3$a = {
key: 1,
class: "o-step-item-desc"
};
const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
__name: "OStepItem",
props: stepItemProps,
setup(__props) {
const props = __props;
const slots = vue.useSlots();
const stepInjection = vue.inject(stepInjectKey);
const stepItemHeadRef = vue.ref();
const isCustomIcon = vue.computed(() => {
return !isEmptySlot(slots.icon);
});
const hasTitle = vue.computed(() => {
return !isEmptySlot(slots.title) || props.title;
});
const hasDescription = vue.computed(() => {
return !isEmptySlot(slots.default) || props.description;
});
const defaultIcon = vue.computed(() => {
if (props.status === "failed") {
return OIconExclamationMark;
}
return OIconCheckMark;
});
vue.watch(stepItemHeadRef, (val) => {
if (val) {
if (!(stepInjection == null ? void 0 : stepInjection.stepItemHeadRefs)) {
return;
}
stepInjection.stepItemHeadRefs.value[props.stepIndex] = val;
}
});
return (_ctx, _cache) => {
var _a, _b, _c;
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-step-item", [`o-step-item-${(_a = vue.unref(stepInjection)) == null ? void 0 : _a.props.direction}`, `o-step-item-${props.status}`]])
},
[
vue.createElementVNode(
"div",
{
ref_key: "stepItemHeadRef",
ref: stepItemHeadRef,
class: "o-step-item-head"
},
[
vue.createVNode(vue.unref(ODivider), {
class: "o-step-item-line",
direction: (_b = vue.unref(stepInjection)) == null ? void 0 : _b.props.direction,
style: vue.normalizeStyle((_c = vue.unref(stepInjection)) == null ? void 0 : _c.stepItemDividerRects.value[props.stepIndex])
}, null, 8, ["direction", "style"]),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-step-item-symbol", { "o-step-item-symbol-custom": isCustomIcon.value }])
},
[
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
props.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(typeof props.icon === "boolean" ? defaultIcon.value : props.icon), {
key: 0,
class: "o-step-item-icon"
})) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createTextVNode(
vue.toDisplayString(props.stepIndex + 1),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
])
],
2
/* CLASS */
)
],
512
/* NEED_PATCH */
),
vue.createElementVNode("div", _hoisted_1$r, [
hasTitle.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.title),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true),
hasDescription.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$a, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.description),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
])
],
2
/* CLASS */
);
};
}
});
const OStep = Object.assign(_sfc_main$A, {
OStepItem: _sfc_main$z,
install(app) {
app.component("OStep", _sfc_main$A);
app.component("OStepItem", _sfc_main$z);
}
});
var Duration = /* @__PURE__ */ ((Duration2) => {
Duration2[Duration2["NORMAL"] = 2e3] = "NORMAL";
Duration2[Duration2["LONG"] = 3500] = "LONG";
return Duration2;
})(Duration || {});
const toastProps = {
/**
* @zh-CN 消息是否可见
* @en-US Message is visible.
*/
visible: {
type: Boolean,
default: void 0
},
/**
* @zh-CN 非受控模式，消息是否默认可见
* @en-US Non-controlled mode, message is visible by default
* @default true
*/
defaultVisible: {
type: Boolean,
default: true
},
/**
* @zh-CN 提示信息
* @en-US Instructional message.
*/
message: {
type: String
},
/**
* @zh-CN 持续时间
* @en-US Duration.
*/
duration: {
type: Number
},
/**
* @zh-CN 长提示
* @en-US Long reminder.
*/
long: {
type: Boolean
},
/**
* @zh-CN 定位方向
* @en-US Determine the direction.
*/
position: {
type: String,
default: "bottom"
},
/**
* @zh-CN 关闭前的钩子函数
* @en-US Hook function before closing
*/
beforeClose: {
type: Function
}
};
const toastListProps = {
/**
* @zh-CN 消息列表位置
* @en-US Position.
*/
position: {
type: String,
default: "bottom"
},
/**
* @zh-CN 消息列表销毁前的钩子函数
* @en-US Hook function before the destruction of the message list.
*/
onDestroy: {
type: Function
}
};
const _hoisted_1$q = {
key: 0,
class: "o-toast"
};
const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
__name: "OToast",
props: toastProps,
emits: ["duration-end", "close", "update:visible"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const innerIsVisible = vue.ref(props.visible ?? props.defaultVisible);
const isVisible = vue.computed(() => props.visible ?? innerIsVisible.value);
const emits = __emit;
let timer = 0;
const clearTimer = () => {
if (timer) {
window.clearTimeout(timer);
timer = 0;
}
};
const startTimer = () => {
if (isUndefined(props.duration) || props.duration <= 0) {
return;
}
timer = window.setTimeout(() => {
emits("duration-end");
innerIsVisible.value = false;
emits("update:visible", innerIsVisible.value);
clearTimer();
}, props.duration);
};
const onClose = async (ev) => {
ev == null ? void 0 : ev.stopPropagation();
if (isFunction(props.beforeClose)) {
const rlt = await props.beforeClose();
if (rlt) {
innerIsVisible.value = false;
emits("update:visible", innerIsVisible.value);
emits("close", ev);
return;
}
}
innerIsVisible.value = false;
emits("update:visible", innerIsVisible.value);
emits("close", ev);
};
vue.onMounted(() => {
startTimer();
});
vue.onUnmounted(() => {
clearTimer();
});
__expose({
/**
* 关闭即时反馈
*/
close: onClose
});
return (_ctx, _cache) => {
return isVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(
vue.toDisplayString(_ctx.message),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true);
};
}
});
const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
__name: "OToastList",
props: toastListProps,
setup(__props, { expose: __expose }) {
const props = __props;
const getUniqueId = useGetUniqueId();
const optionList = vue.ref([]);
const add = (params) => {
const option = {
id: getUniqueId(),
...params
};
optionList.value.push(option);
return option.id;
};
const remove = (idx) => {
optionList.value.splice(idx, 1);
};
const removeAll = () => {
optionList.value = [];
isFunction(props.onDestroy) && props.onDestroy();
};
const close2 = (id) => {
const idx = optionList.value.findIndex((option) => option.id === id);
remove(idx);
};
const handleDurationEnd = (item) => {
const { id, onDurationEnd } = item;
onDurationEnd == null ? void 0 : onDurationEnd();
close2(id);
};
const handleClose = (item, ev) => {
const { id, onClose } = item;
onClose == null ? void 0 : onClose(ev);
close2(id);
};
__expose({ add, close: close2, remove, removeAll });
return (_ctx, _cache) => {
return optionList.value.length ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-toast-list", [`o-toast-list-${props.position}`]])
},
[
vue.createVNode(vue.TransitionGroup, { name: "o-toast-fade" }, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(optionList.value, (item) => {
return vue.openBlock(), vue.createBlock(_sfc_main$y, {
key: item.id,
duration: item.duration,
onDurationEnd: ($event) => handleDurationEnd(item),
onClose: (ev) => {
handleClose(item, ev);
}
}, {
default: vue.withCtx(() => [
vue.unref(isString)(item.content) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createTextVNode(
vue.toDisplayString(item.content),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.content), { key: 1 }))
]),
_: 2
/* DYNAMIC */
}, 1032, ["duration", "onDurationEnd", "onClose"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
})
],
2
/* CLASS */
)) : vue.createCommentVNode("v-if", true);
};
}
});
const DEFAULT_OPTIONS = {
position: "bottom"
};
const instanceMap = /* @__PURE__ */ new Map();
const normalizeOptions = (params) => {
const options = !params || isString(params) ? { content: params } : params;
const { long, duration } = options;
const defaultDuration = long ? Duration.LONG : Duration.NORMAL;
const rlt = isNumber(duration) && duration > 0 ? duration : defaultDuration;
const normalized = {
...DEFAULT_OPTIONS,
...options,
duration: rlt
};
return normalized;
};
const getToastStyle = (targetEl, position = "top", align = "left", offset = 8) => {
if (!targetEl) {
return;
}
const rect = targetEl.getBoundingClientRect();
let pos = "bottom";
let top = window.innerHeight - rect.top + offset;
let left = rect.left;
let transform = "translateX(-50%)";
if (position === "bottom") {
pos = "top";
top = rect.top + rect.height + offset;
}
if (align === "right") {
left = rect.left + rect.width;
transform = "translateX(-100%)";
} else if (align === "left") {
left = rect.left;
transform = "translateX(0%)";
} else {
left = rect.left + rect.width / 2;
transform = "translateX(-50%)";
}
if (position === "center") {
pos = "top";
left = rect.left + rect.width / 2;
top = rect.top + rect.height / 2;
transform = "translate(-50%, -50%)";
}
return {
position: pos,
"--toast-list-offset": `${top}px`,
[`--toast-list-${pos}-offset`]: `${top}px`,
left: `${left}px`,
transform
};
};
const createToastListVnode = ({
position,
wrap,
style,
targetEl
}) => {
return vue.createVNode(_sfc_main$x, {
position: (style == null ? void 0 : style.position) ?? position,
onDestroy: async () => {
if (wrap) {
vue.render(null, wrap);
await vue.nextTick();
document.body.removeChild(wrap);
}
instanceMap.delete(targetEl ?? position);
},
style
});
};
const showToast = (target, closeHandlers, params) => {
const options = normalizeOptions(params);
const { position, targetAlign, targetOffset: targetOffset2 } = options;
let id = -1;
let instance2;
let isClosed = false;
resolveHtmlElement(target).then((targetEl) => {
var _a, _b, _c;
if (isClosed) {
return;
}
const toastStyle = getToastStyle(targetEl, position, targetAlign, targetOffset2);
instance2 = instanceMap.get(targetEl ?? position);
if (!instance2) {
const wrap = document.createElement("div");
const vnode = createToastListVnode({
position,
wrap,
style: toastStyle,
targetEl
});
closeAll();
vue.render(vnode, wrap);
const vm = vnode.component;
id = (_a = vm.exposed) == null ? void 0 : _a.add(options);
instance2 = vm;
instanceMap.set(targetEl ?? position, instance2);
document.body.appendChild(wrap);
} else {
(_b = instance2.exposed) == null ? void 0 : _b.remove(id);
id = (_c = instance2.exposed) == null ? void 0 : _c.add(options);
}
});
const closeHandler = () => {
var _a;
isClosed = true;
(_a = instance2 == null ? void 0 : instance2.exposed) == null ? void 0 : _a.close(id);
closeHandlers.delete(closeHandler);
};
closeHandlers.add(closeHandler);
return closeHandler;
};
const closeAll = () => {
var _a;
for (const ins of instanceMap.values()) {
(_a = ins == null ? void 0 : ins.exposed) == null ? void 0 : _a.removeAll();
}
};
const close = (closeHandlers) => {
closeHandlers.forEach((handler) => handler());
};
function useToast(target) {
const closeHandlers = /* @__PURE__ */ new Set();
return {
show: showToast.bind(null, target, closeHandlers),
/** 关闭本 useToast 实例渲染的所有消息 */
close: close.bind(null, closeHandlers),
/** 关闭所有实例渲染的所有消息 */
closeAll
};
}
const OToast = Object.assign(_sfc_main$y, {
install(app) {
app.component("OToast", _sfc_main$y);
}
});
const { size: size$2, round: round$4, color: color$4, readonly: readonly$3, variant: variant$4 } = inBoxProps;
const ipInputProps = {
/**
* @zh-CN 输入框的值 v-model
* @en-US The value of the input box
*/
modelValue: {
type: String
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable.
*/
disabled: {
type: Boolean
},
/**
* @zh-CN ip片段长度
* @en-US IP fragment length.
* @default 4
*/
segmentsLen: {
type: Number,
default: 4
},
/**
* @zh-CN 大小
* @en-US Size
*/
size: size$2,
/**
* @zh-CN 圆角值
* @en-US Round
*/
round: round$4,
/**
* @zh-CN 输入框颜色
* @en-US Color
* @default 'normal'
*/
color: color$4,
/**
* @zh-CN 是否只读
* @en-US Readonly
*/
readonly: readonly$3,
/**
* @zh-CN 输入框类型
* @en-US variant
* @default 'outline'
*/
variant: variant$4
};
const _hoisted_1$p = {
key: 0,
class: "o-ip-separator"
};
const MAX_LEN = 3;
const MIN_NUM = 0;
const MAX_NUM = 255;
const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
__name: "OIpInput",
props: ipInputProps,
emits: ["update:modelValue", "change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const reg = /\D/g;
const originObj = { value: "", invalid: false };
const inputRefs = vue.ref([]);
const segmentsLen = vue.computed(() => props.segmentsLen);
const formItemInjection = vue.inject(formItemInjectKey, null);
const color2 = vue.computed(() => {
var _a;
if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || void 0;
} else {
return props.color;
}
});
const initData = (data, n) => {
return Array(n).fill(null).map(() => ({ ...data }));
};
const ipSegments = vue.ref(initData(originObj, segmentsLen.value));
const validateSegment = (index) => {
const val = ipSegments.value[index].value;
const num = parseInt(val, 10);
if (Number.isNaN(num)) {
ipSegments.value[index].invalid = false;
return;
}
ipSegments.value[index].invalid = num < MIN_NUM || num > MAX_NUM;
};
const adjustSegment = (index) => {
validateSegment(index);
if (ipSegments.value[index].invalid) {
ipSegments.value[index].value = formateToString(MAX_NUM);
}
};
const initIpSegments = () => {
if (!props.modelValue) return;
const segments = props.modelValue.split(".");
segments.forEach((val, index) => {
if (index < segmentsLen.value) {
ipSegments.value[index].value = val.replace(reg, "");
adjustSegment(index);
}
});
};
const handleUpdate = (index, v) => {
ipSegments.value[index].value = v.replace(reg, "");
adjustSegment(index);
if (ipSegments.value[index].value.length === MAX_LEN && index < segmentsLen.value - 1) {
focusNextInput(index);
}
};
const handleKeydown = (e, index) => {
if (props.disabled) {
return;
}
if (e.key === Backspace.key && ipSegments.value[index].value === "" && index > 0) {
focusPrevInput(index);
}
};
const getValidIp = () => {
const validSegments = [];
let isValid = true;
ipSegments.value.forEach((segment) => {
const num = parseInt(segment.value, 10);
if (isNaN(num) || num < MIN_NUM || num > MAX_NUM) {
isValid = false;
}
validSegments.push(formateToString(num));
});
return isValid ? validSegments.join(".") : "";
};
const focusNextInput = (index) => {
if (index < segmentsLen.value) {
const nextInput = inputRefs.value[index + 1];
nextInput == null ? void 0 : nextInput.focus();
}
};
const focusPrevInput = (index) => {
if (index > 0) {
const prevInput = inputRefs.value[index - 1];
prevInput == null ? void 0 : prevInput.focus();
}
};
vue.watch(
() => props.modelValue,
() => initIpSegments(),
{ immediate: true }
);
vue.watch(
ipSegments,
() => {
var _a, _b;
const ip = getValidIp();
emit("update:modelValue", ip);
emit("change", Boolean(ip), ip);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
},
{ deep: true }
);
vue.onMounted(() => {
initIpSegments();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$1e), {
class: "o-ip-input",
color: color2.value,
size: props.size,
disabled: props.disabled,
round: props.round,
readonly: props.readonly,
variant: props.variant
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(ipSegments.value, (segment, index) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: index },
[
vue.createVNode(vue.unref(OInput), {
class: "o-ip-segment",
"show-length": "never",
variant: props.variant,
readonly: props.readonly,
size: props.size,
disabled: props.disabled,
modelValue: segment.value,
"max-length": 3,
"input-on-outlimit": false,
ref_for: true,
ref: (el) => inputRefs.value[index] = el,
onKeydown: ($event) => handleKeydown($event, index),
"onUpdate:modelValue": (v) => {
handleUpdate(index, v);
}
}, null, 8, ["variant", "readonly", "size", "disabled", "modelValue", "onKeydown", "onUpdate:modelValue"]),
index < ipSegments.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
}, 8, ["color", "size", "disabled", "round", "readonly", "variant"]);
};
}
});
const OIpInput = Object.assign(_sfc_main$w, {
install(app) {
app.component("OIpInput", _sfc_main$w);
}
});
const sliderInjectKey = Symbol("provide-slider");
const sliderProps = {
/**
* @zh-CN 双向绑定值
* @en-US v-model value.
* @default 0
*/
modelValue: {
type: [Number, Array],
default: 0
},
/**
* @zh-CN 滑动条最小值
* @en-US The min value.
* @default 0
*/
min: {
type: Number,
default: 0
},
/**
* @zh-CN 滑动条最大值
* @en-US The max value.
* @default 100
*/
max: {
type: Number,
default: 100
},
/**
* @zh-CN 每一分段值
* @en-US Each segment value.
* @default 1
*/
step: {
type: Number,
default: 1
},
/**
* @zh-CN 禁用
* @en-US Disabled.
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 输入框尺寸
* @en-US Input box size.
*/
inputSize: {
type: String
},
/**
* @zh-CN 显示输入框
* @en-US Show input box.
*/
showInput: {
type: Boolean
},
/**
* @zh-CN 显示输入框控制器
* @en-US Show input box controls.
*/
showInputControls: {
type: Boolean
},
/**
* @zh-CN 显示间隔点
* @en-US Show stops.
*/
showStops: {
type: Boolean
},
/**
* @zh-CN 范围
* @en-US Range.
*/
range: {
type: Boolean
},
/**
* @zh-CN 方向
* @en-US Direction.
*/
direction: {
type: String,
default: "h"
},
/**
* @zh-CN 垂直方向滑动条高度
* @en-US Vertical height.
*/
height: {
type: String
},
/**
* @zh-CN 气泡容器自定义类名
* @en-US Custom class name for bubble container.
*/
wrapClass: {
type: String
},
/**
* @zh-CN 气泡定位方向
* @en-US Bubble positioning direction.
*/
position: {
type: String,
default: "bottom"
},
/**
* @zh-CN 每个间隔点对应的标记
* @en-US The label corresponding to each interval point.
*/
marks: {
type: Object
},
/**
* @zh-CN 单位
* @en-US Unit.
*/
unit: {
type: String
},
/**
* @zh-CN 控制气泡渲染
* @en-US Control bubble rendering.
*/
showPopover: {
type: Boolean,
default: true
}
};
const sliderButtonProps = {
/**
* @zh-CN 双向绑定值
* @en-US v-model value.
* @default 0
*/
modelValue: {
type: Number,
default: 0
},
/**
* @zh-CN 气泡定位方向
* @en-US Bubble positioning direction.
*/
position: {
type: String,
default: "top"
},
/**
* @zh-CN 气泡容器自定义类名
* @en-US Custom class name for bubble container.
*/
wrapClass: {
type: String
},
/**
* @zh-CN 方向
* @en-US Direction.
*/
direction: {
type: String,
default: "h"
},
/**
* @zh-CN 控制间隔滑动条按钮实心圆渲染
* @en-US Rendering of the solid circle of the control interval slider button.
*/
showSolidCircle: {
type: Boolean
},
/**
* @zh-CN 控制气泡渲染
* @en-US Control bubble rendering.
*/
showPopover: {
type: Boolean
}
};
const sliderMarksProps = {
/**
* @zh-CN 每个间隔点对应的标记
* @en-US The label corresponding to each interval point.
*/
mark: {
type: [String, Object]
}
};
const isValidValue = (value) => isNumber(value) || isArray(value) && value.every(isNumber);
const sliderEmits = {
/**
* @zh-CN 双向绑定值更新
* @en-US v-model value update
*/
"update:modelValue": isValidValue,
/**
* @zh-CN 滑块拖动时触发
* @en-US Triggered while dragging the slider
*/
input: isValidValue,
/**
* @zh-CN 滑块值改变后触发
* @en-US Triggered after the slider value changes
*/
change: isValidValue
};
const _hoisted_1$o = ["tabindex"];
const _hoisted_2$f = {
key: 0,
class: "o-slider-circle"
};
const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
__name: "OSliderButton",
props: sliderButtonProps,
emits: ["update:modelValue"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const initData = vue.reactive({
hovering: false,
dragging: false,
isClick: false,
startX: 0,
currentX: 0,
startY: 0,
currentY: 0,
startPosition: 0,
newPosition: 0,
oldValue: props.modelValue
});
const { disabled: disabled2, min, max, step, sliderSize, emitChange, resetSize, updateDragging } = vue.inject(sliderInjectKey);
const button = vue.ref();
const { hovering, dragging } = vue.toRefs(initData);
const formatValue = vue.computed(() => {
return props.modelValue;
});
const showToolTip = vue.computed(() => {
return initData.hovering || initData.dragging;
});
const currentPosition = vue.computed(() => {
return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`;
});
const wrapperStyle = vue.computed(() => {
return { left: currentPosition.value };
});
const handleMouseEnter = () => {
initData.hovering = true;
};
const handleMouseLeave = () => {
initData.hovering = false;
};
const onButtonDown = (event) => {
if (disabled2.value) {
return;
}
event.preventDefault();
handleDragStart(event);
window.addEventListener("mousemove", handleDragging);
window.addEventListener("touchmove", handleDragging);
window.addEventListener("mouseup", handleDragEnd);
window.addEventListener("touchend", handleDragEnd);
window.addEventListener("contextmenu", handleDragEnd);
button.value.focus();
};
const incrementPosition = (amount) => {
if (disabled2.value) {
return;
}
initData.newPosition = Number.parseFloat(currentPosition.value) + amount / (max.value - min.value) * 100;
setPosition(initData.newPosition);
emitChange();
};
const onLeftKeyDown = () => {
incrementPosition(-step.value);
};
const onRightKeyDown = () => {
incrementPosition(step.value);
};
const onPageDownKeyDown = () => {
incrementPosition(-step.value * 4);
};
const onPageUpKeyDown = () => {
incrementPosition(step.value * 4);
};
const onHomeKeyDown = () => {
if (disabled2.value) {
return;
}
setPosition(0);
emitChange();
};
const onEndKeyDown = () => {
if (disabled2.value) {
return;
}
setPosition(100);
emitChange();
};
const onKeyDown = (event) => {
const code = event.code;
let isPreventDefault = true;
switch (code) {
case ArrowLeft.key:
case ArrowDown.key:
onLeftKeyDown();
break;
case ArrowRight.key:
case ArrowUp.key:
onRightKeyDown();
break;
case Home.key:
onHomeKeyDown();
break;
case End.key:
onEndKeyDown();
break;
case pageDown.key:
onPageDownKeyDown();
break;
case pageUp.key:
onPageUpKeyDown();
break;
default:
isPreventDefault = false;
break;
}
isPreventDefault && event.preventDefault();
};
const getClientXY = (event) => {
let clientX;
let clientY;
if (event.type.startsWith("touch")) {
clientY = event.touches[0].clientY;
clientX = event.touches[0].clientX;
} else {
clientY = event.clientY;
clientX = event.clientX;
}
return {
clientX,
clientY
};
};
const handleDragStart = (event) => {
initData.dragging = true;
initData.isClick = true;
const { clientX, clientY } = getClientXY(event);
if (props.direction === "v") {
initData.startY = clientY;
} else {
initData.startX = clientX;
}
initData.startPosition = Number.parseFloat(currentPosition.value);
initData.newPosition = initData.startPosition;
};
const handleDragging = (event) => {
if (initData.dragging) {
initData.isClick = false;
resetSize();
let diff;
const { clientX, clientY } = getClientXY(event);
if (props.direction === "v") {
initData.currentY = clientY;
diff = (initData.startY - initData.currentY) / sliderSize.value * 100;
} else {
initData.currentX = clientX;
diff = (initData.currentX - initData.startX) / sliderSize.value * 100;
}
initData.newPosition = initData.startPosition + diff;
setPosition(initData.newPosition);
}
};
const handleDragEnd = () => {
if (initData.dragging) {
setTimeout(() => {
initData.dragging = false;
if (!initData.isClick) {
setPosition(initData.newPosition);
}
emitChange();
}, 0);
window.removeEventListener("mousemove", handleDragging);
window.removeEventListener("touchmove", handleDragging);
window.removeEventListener("mouseup", handleDragEnd);
window.removeEventListener("touchend", handleDragEnd);
window.removeEventListener("contextmenu", handleDragEnd);
}
};
const clamp = (num, lower, upper) => {
return Math.max(lower, Math.min(num, upper));
};
const setPosition = async (newPosition) => {
if (newPosition === null || Number.isNaN(+newPosition)) {
return;
}
newPosition = clamp(newPosition, 0, 100);
const fullSteps = Math.floor((max.value - min.value) / step.value);
const fullRangePercentage = fullSteps * step.value / (max.value - min.value) * 100;
const threshold = fullRangePercentage + (100 - fullRangePercentage) / 2;
let value;
if (newPosition < fullRangePercentage) {
const valueBetween = fullRangePercentage / fullSteps;
const steps = Math.round(newPosition / valueBetween);
value = min.value + steps * step.value;
} else if (newPosition < threshold) {
value = min.value + fullSteps * step.value;
} else {
value = max.value;
}
value = Number.parseFloat(value.toFixed());
if (value !== props.modelValue) {
emit("update:modelValue", value);
}
if (!initData.dragging && props.modelValue !== initData.oldValue) {
initData.oldValue = props.modelValue;
}
};
vue.watch(
() => initData.dragging,
(val) => {
updateDragging(val);
}
);
vue.onMounted(() => {
var _a;
(_a = button.value) == null ? void 0 : _a.addEventListener("touchstart", onButtonDown, { passive: false });
});
vue.onUnmounted(() => {
var _a;
(_a = button.value) == null ? void 0 : _a.removeEventListener("touchstart", onButtonDown);
});
__expose({
onButtonDown,
onKeyDown,
setPosition,
hovering,
dragging
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
vue.createElementVNode("div", {
ref_key: "button",
ref: button,
class: vue.normalizeClass(["o-slider-btn-wrap", { "o-slider-btn-wrap-hover": showToolTip.value && !props.showSolidCircle && !vue.unref(disabled2) }]),
style: vue.normalizeStyle(wrapperStyle.value),
tabindex: vue.unref(disabled2) ? void 0 : 0,
onMouseenter: handleMouseEnter,
onMouseleave: handleMouseLeave,
onMousedown: onButtonDown,
onFocus: handleMouseEnter,
onBlur: handleMouseLeave,
onKeydown: onKeyDown
}, [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-slider-btn", { "o-slider-btn-hover": showToolTip.value && !props.showSolidCircle && !vue.unref(disabled2) }])
},
[
props.showSolidCircle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
)
], 46, _hoisted_1$o),
_ctx.showPopover ? (vue.openBlock(), vue.createBlock(vue.unref(OPopover), {
key: 0,
trigger: "none",
position: props.position,
visible: showToolTip.value && !vue.unref(disabled2),
"adjust-width": false,
"adjust-min-width": false,
target: button.value,
wrapper: button.value,
"wrap-class": vue.unref(mergeClass)("o-slider-popover", props.wrapClass)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(formatValue.value),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["position", "visible", "target", "wrapper", "wrap-class"])) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
};
}
});
const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
__name: "OSliderMarker",
props: sliderMarksProps,
setup(__props) {
const props = __props;
const label = vue.computed(() => {
return isString(props.mark) ? props.mark : props.mark.label;
});
const style = vue.computed(() => isString(props.mark) ? void 0 : props.mark.style);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: "o-slider-marks-text",
style: vue.normalizeStyle(style.value)
},
vue.toDisplayString(label.value),
5
/* TEXT, STYLE */
);
};
}
});
const useLifecycle = (props, initData, resetSize) => {
const slider = vue.ref();
vue.onMounted(async () => {
if (props.range) {
if (isArray(props.modelValue)) {
initData.firstBtnVal = Math.max(props.min, props.modelValue[0]);
initData.secondBtnVal = Math.min(props.max, props.modelValue[1]);
} else {
initData.firstBtnVal = props.min;
initData.secondBtnVal = props.max;
}
initData.oldValue = [initData.firstBtnVal, initData.secondBtnVal];
} else {
if (!isNumber(props.modelValue)) {
initData.firstBtnVal = props.min;
} else {
initData.firstBtnVal = Math.min(props.max, Math.max(props.min, props.modelValue));
}
initData.oldValue = initData.firstBtnVal;
}
window.addEventListener("resize", resetSize);
await vue.nextTick();
resetSize();
});
vue.onUnmounted(() => {
window.removeEventListener("resize", resetSize);
});
return {
slider
};
};
const useMarks = (props) => {
return vue.computed(() => {
if (!props.marks) {
return [];
}
const marksKeys = Object.keys(props.marks);
return marksKeys.map(Number.parseFloat).sort((a, b) => a - b).filter((point) => point <= props.max && point >= props.min).map(
(point) => ({
point,
position: (point - props.min) * 100 / (props.max - props.min),
mark: props.marks[point]
})
);
});
};
const useSlide = (props, initData, emit) => {
const sliderRunway = vue.shallowRef();
const firstButton = vue.ref();
const secondButton = vue.ref();
const buttonRefs = {
firstButton,
secondButton
};
const sliderDisabled = vue.computed(() => {
return props.disabled;
});
const minValue = vue.computed(() => {
return Math.min(initData.firstBtnVal, initData.secondBtnVal);
});
const maxValue = vue.computed(() => {
return Math.max(initData.firstBtnVal, initData.secondBtnVal);
});
const barSize = vue.computed(() => {
return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstBtnVal - props.min) / (props.max - props.min)}%`;
});
const barStart = vue.computed(() => {
return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "-4px";
});
const runwayStyle = vue.computed(() => {
return props.direction === "v" ? { height: props.height } : {};
});
const barStyle = vue.computed(() => {
return props.direction === "v" ? {
height: barSize.value,
bottom: barStart.value
} : {
width: barSize.value,
left: barStart.value
};
});
const resetSize = () => {
if (sliderRunway.value) {
const rect = sliderRunway.value.getBoundingClientRect();
initData.sliderSize = rect[props.direction === "v" ? "height" : "width"];
}
};
const getButtonRefByPercent = (percent) => {
const targetValue = props.min + percent * (props.max - props.min) / 100;
if (!props.range) {
return firstButton;
}
let buttonRefName;
if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) {
buttonRefName = initData.firstBtnVal < initData.secondBtnVal ? "firstButton" : "secondButton";
} else {
buttonRefName = initData.firstBtnVal > initData.secondBtnVal ? "firstButton" : "secondButton";
}
return buttonRefs[buttonRefName];
};
const setPosition = (percent) => {
const buttonRef = getButtonRefByPercent(percent);
buttonRef.value.setPosition(percent);
return buttonRef;
};
const setFirstValue = (firstValue) => {
initData.firstBtnVal = firstValue || props.min;
_emit(props.range ? [minValue.value, maxValue.value] : firstValue || props.min);
};
const setSecondValue = (secondValue) => {
initData.secondBtnVal = secondValue;
if (props.range) {
_emit([minValue.value, maxValue.value]);
}
};
const _emit = (val) => {
emit("update:modelValue", val);
emit("input", val);
};
const emitChange = async () => {
await vue.nextTick();
emit("change", props.range ? [minValue.value, maxValue.value] : props.modelValue);
};
const handleSliderPointerEvent = (event) => {
var _a, _b, _c, _d;
if (sliderDisabled.value || initData.isDragging) {
return;
}
resetSize();
let newPercent = 0;
if (props.direction === "v") {
const clientY = ((_b = (_a = event.touches) == null ? void 0 : _a.item(0)) == null ? void 0 : _b.clientY) ?? event.clientY;
const sliderOffsetBottom = sliderRunway.value.getBoundingClientRect().bottom;
newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100;
} else {
const clientX = ((_d = (_c = event.touches) == null ? void 0 : _c.item(0)) == null ? void 0 : _d.clientX) ?? event.clientX;
const sliderOffsetLeft = sliderRunway.value.getBoundingClientRect().left;
newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100;
}
if (newPercent < 0 || newPercent > 100) {
return;
}
return setPosition(newPercent);
};
const onSliderWrapperPrevent = (event) => {
var _a, _b;
if (((_a = buttonRefs["firstButton"].value) == null ? void 0 : _a.dragging) || ((_b = buttonRefs["secondButton"].value) == null ? void 0 : _b.dragging)) {
event.preventDefault();
}
};
const onSliderDown = async (event) => {
const buttonRef = handleSliderPointerEvent(event);
if (buttonRef) {
await vue.nextTick();
buttonRef.value.onButtonDown(event);
}
};
const onSliderClick = (event) => {
const buttonRef = handleSliderPointerEvent(event);
if (buttonRef) {
emitChange();
}
};
const onSliderMarkerDown = (position) => {
if (sliderDisabled.value || initData.isDragging) {
return;
}
const buttonRef = setPosition(position);
if (buttonRef) {
emitChange();
}
};
return {
sliderRunway,
firstButton,
secondButton,
sliderDisabled,
minValue,
maxValue,
runwayStyle,
barStyle,
resetSize,
setPosition,
emitChange,
onSliderWrapperPrevent,
onSliderClick,
onSliderDown,
onSliderMarkerDown,
setFirstValue,
setSecondValue
};
};
const useStops = (props, initData, minValue, maxValue) => {
const stops = vue.computed(() => {
if (!props.showStops || props.min > props.max) {
return [];
}
if (props.step === 0) {
return [];
}
const stopCount = Math.ceil((props.max - props.min) / props.step);
const stepWidth = 100 * props.step / (props.max - props.min);
const result = Array.from({ length: stopCount + 1 }).map((_, index) => index * stepWidth);
if (props.range) {
return result.map((step) => {
const notReached = step < 100 * (minValue.value - props.min) / (props.max - props.min) || step > 100 * (maxValue.value - props.min) / (props.max - props.min);
return {
step,
reached: !notReached
};
});
} else {
return result.map((step) => {
const notReached = step > 100 * (initData.firstBtnVal - props.min) / (props.max - props.min);
return {
step,
reached: !notReached
};
});
}
});
const getStopStyle = (position) => {
return props.direction === "v" ? { bottom: `${position}%` } : { left: `${position}%` };
};
return {
stops,
getStopStyle
};
};
const useWatch = (props, initData, minValue, maxValue, emit) => {
const handleEmit = (val) => {
emit("update:modelValue", val);
emit("input", val);
};
const valueChanged = () => {
if (props.range) {
return ![minValue.value, maxValue.value].every((item, index) => item === initData.oldValue[index]);
} else {
return props.modelValue !== initData.oldValue;
}
};
const setValues = () => {
if (props.min > props.max) {
return;
}
const val = props.modelValue;
if (props.range && isArray(val)) {
if (val[1] < props.min) {
handleEmit([props.min, props.min]);
} else if (val[0] > props.max) {
handleEmit([props.max, props.max]);
} else if (val[0] < props.min) {
handleEmit([props.min, val[1]]);
} else if (val[1] > props.max) {
handleEmit([val[0], props.max]);
} else {
initData.firstBtnVal = val[0];
initData.secondBtnVal = val[1];
if (valueChanged()) {
initData.oldValue = val.slice();
}
}
} else if (!props.range && isNumber(val)) {
if (val < props.min) {
handleEmit(props.min);
} else if (val > props.max) {
handleEmit(props.max);
} else {
initData.firstBtnVal = val;
if (valueChanged()) {
initData.oldValue = val;
}
}
}
};
setValues();
vue.watch(
() => initData.isDragging,
(val) => {
if (!val) {
setValues();
}
}
);
vue.watch(
() => props.modelValue,
(val, oldVal) => {
if (initData.isDragging || isArray(val) && isArray(oldVal) && val.every((item, index) => item === oldVal[index]) && initData.firstBtnVal === val[0] && initData.secondBtnVal === val[1]) {
return;
}
setValues();
},
{
deep: true
}
);
vue.watch(
() => [props.min, props.max],
() => {
setValues();
}
);
};
const _hoisted_1$n = { class: "o-slider-runway-wrap" };
const _hoisted_2$e = { key: 1 };
const _hoisted_3$9 = {
key: 2,
class: "o-slider-marks"
};
const _hoisted_4$8 = {
key: 0,
class: "o-slider-input-wrap"
};
const _hoisted_5$7 = {
key: 0,
class: "o-slider-input-unit"
};
const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
__name: "OSlider",
props: sliderProps,
emits: sliderEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const slots = vue.useSlots();
const initData = vue.reactive({
firstBtnVal: 0,
secondBtnVal: 0,
oldValue: 0,
isDragging: false,
sliderSize: 1
});
const {
sliderRunway,
firstButton: firstSliderBtn,
secondButton: secondSliderBtn,
sliderDisabled,
minValue: minVal,
maxValue: maxVal,
runwayStyle: sliderRunwayStyle,
barStyle: sliderBarStyle,
resetSize: resetSliderSize,
emitChange: onInputChange,
onSliderWrapperPrevent,
onSliderClick,
onSliderDown,
onSliderMarkerDown,
setFirstValue,
setSecondValue
} = useSlide(props, initData, emit);
const { stops, getStopStyle } = useStops(props, initData, minVal, maxVal);
const markList = useMarks(props);
useWatch(props, initData, minVal, maxVal, emit);
const hasUnit = vue.computed(() => {
return !isEmptySlot(slots.unit) || props.unit;
});
const { slider } = useLifecycle(props, initData, resetSliderSize);
const { firstBtnVal, secondBtnVal, sliderSize } = vue.toRefs(initData);
const updateDragging = (val) => {
initData.isDragging = val;
};
vue.onMounted(() => {
var _a, _b;
(_a = slider.value) == null ? void 0 : _a.addEventListener("touchstart", onSliderWrapperPrevent, { passive: false });
(_b = slider.value) == null ? void 0 : _b.addEventListener("touchmove", onSliderWrapperPrevent, { passive: false });
});
vue.onUnmounted(() => {
var _a, _b;
(_a = slider.value) == null ? void 0 : _a.removeEventListener("touchstart", onSliderWrapperPrevent);
(_b = slider.value) == null ? void 0 : _b.removeEventListener("touchmove", onSliderWrapperPrevent);
});
vue.provide(sliderInjectKey, {
...vue.toRefs(props),
sliderSize,
disabled: sliderDisabled,
emitChange: onInputChange,
resetSize: resetSliderSize,
updateDragging
});
__expose({
/**
* 点击滑轨时触发滑块移动
*/
onSliderClick
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "slider",
ref: slider,
class: vue.normalizeClass(["o-slider", {
"o-slider-vertical": props.direction === "v",
"o-slider-with-stops": props.showStops,
"o-slider-with-input": props.showInput,
"o-slider-disabled": vue.unref(sliderDisabled)
}])
},
[
vue.createElementVNode("div", _hoisted_1$n, [
vue.createElementVNode(
"div",
{
ref_key: "sliderRunway",
ref: sliderRunway,
class: "o-slider-runway",
style: vue.normalizeStyle(vue.unref(sliderRunwayStyle)),
onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => vue.unref(onSliderDown) && vue.unref(onSliderDown)(...args)),
onTouchstartPassive: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => vue.unref(onSliderDown) && vue.unref(onSliderDown)(...args))
},
[
vue.createElementVNode(
"div",
{
class: "o-slider-bar",
style: vue.normalizeStyle(vue.unref(sliderBarStyle))
},
null,
4
/* STYLE */
),
vue.createVNode(_sfc_main$v, {
ref_key: "firstSliderBtn",
ref: firstSliderBtn,
"model-value": vue.unref(firstBtnVal),
direction: _ctx.direction,
"wrap-class": _ctx.wrapClass,
position: _ctx.position,
"show-solid-circle": _ctx.showStops,
"show-popover": _ctx.showPopover,
"onUpdate:modelValue": vue.unref(setFirstValue)
}, null, 8, ["model-value", "direction", "wrap-class", "position", "show-solid-circle", "show-popover", "onUpdate:modelValue"]),
_ctx.range ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
key: 0,
ref_key: "secondSliderBtn",
ref: secondSliderBtn,
"model-value": vue.unref(secondBtnVal),
direction: _ctx.direction,
"wrap-class": _ctx.wrapClass,
position: _ctx.position,
"show-solid-circle": _ctx.showStops,
"show-popover": _ctx.showPopover,
"onUpdate:modelValue": vue.unref(setSecondValue)
}, null, 8, ["model-value", "direction", "wrap-class", "position", "show-solid-circle", "show-popover", "onUpdate:modelValue"])) : vue.createCommentVNode("v-if", true),
_ctx.showStops ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(stops), (item, key) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
key,
class: vue.normalizeClass(["o-slider-stop", { "o-slider-stop-reached": item.reached }]),
style: vue.normalizeStyle(vue.unref(getStopStyle)(item.step))
},
null,
6
/* CLASS, STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
])) : vue.createCommentVNode("v-if", true),
vue.unref(markList).length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(markList), (item, key) => {
return vue.openBlock(), vue.createBlock(_sfc_main$u, {
key,
mark: item.mark,
style: vue.normalizeStyle(vue.unref(getStopStyle)(item.position)),
onMousedown: vue.withModifiers(($event) => vue.unref(onSliderMarkerDown)(item.position), ["stop"])
}, null, 8, ["mark", "style", "onMousedown"]);
}),
128
/* KEYED_FRAGMENT */
))
])) : vue.createCommentVNode("v-if", true)
],
36
/* STYLE, NEED_HYDRATION */
)
]),
_ctx.showInput && !_ctx.range ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$8, [
vue.createVNode(vue.unref(OInputNumber), {
ref: "input",
class: "o-slider-input",
round: "pill",
controls: "none",
"model-value": vue.unref(firstBtnVal),
step: _ctx.step,
disabled: vue.unref(sliderDisabled),
min: _ctx.min,
max: _ctx.max,
size: props.inputSize,
"clear-value": 0,
"onUpdate:modelValue": vue.unref(setFirstValue),
onChange: vue.unref(onInputChange)
}, null, 8, ["model-value", "step", "disabled", "min", "max", "size", "onUpdate:modelValue", "onChange"]),
hasUnit.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [
vue.renderSlot(_ctx.$slots, "unit", {}, () => [
vue.createTextVNode(
vue.toDisplayString(props.unit),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
const OSlider = Object.assign(_sfc_main$t, {
install(app) {
app.component("OSlider", _sfc_main$t);
}
});
const ESCAPE_CHARACTER_REG = /[.*+?^${}()|[\]\\]/g;
function escapeRegExp(str) {
ESCAPE_CHARACTER_REG.lastIndex = 0;
return str.replace(ESCAPE_CHARACTER_REG, "\\$&");
}
function splitByMatch(dataSource, keyword) {
if (!dataSource || !keyword) {
return [];
}
const regexp = typeof keyword === "string" ? new RegExp(escapeRegExp(keyword), "ig") : keyword;
const matchedList = dataSource.matchAll(regexp);
const result = [];
let preMatchIndex = 0;
for (const match of matchedList) {
result.push(dataSource.slice(preMatchIndex, match.index));
result.push(match[0]);
preMatchIndex = match.index + match[0].length;
}
if (preMatchIndex < dataSource.length) {
result.push(dataSource.slice(preMatchIndex));
}
return result;
}
const { round: round$3, color: color$3, readonly: readonly$2, variant: variant$3 } = inBoxProps;
const searchProps = {
/**
* @zh-CN 输入框的值 v-model
* @en-US The value of the input box
*/
modelValue: {
type: String
},
/**
* @zh-CN 输入框的默认值,非受控
* @en-US The default value of the input box.Uncontrolled.
*/
defaultValue: {
type: String
},
/**
* @zh-CN 是否可以清除
* @en-US clearable.
* @default true
*/
clearable: {
type: Boolean,
default: true
},
/**
* @zh-CN 是否禁用
* @en-US Whether to disable.
*/
disabled: {
type: Boolean
},
/**
* @zh-CN 大小
* @en-US Size
* @default 'large'
*/
size: {
type: String,
default: "large"
},
/**
* @zh-CN 圆角值
* @en-US Round
*/
round: round$3,
/**
* @zh-CN 输入框颜色
* @en-US Color
* @default 'normal'
*/
color: color$3,
/**
* @zh-CN 是否只读
* @en-US Readonly
*/
readonly: readonly$2,
/**
* @zh-CN 输入框类型
* @en-US variant
* @default 'outline'
*/
variant: variant$3,
/**
* @zh-CN 输入框占位符
* @en-US Input field placeholder.
*/
placeholder: {
type: String
},
/**
* @zh-CN 头部筛选框占位符
* @en-US Head selection box placeholder.
*/
placeholderOfPrefixSelect: {
type: String
},
/**
* @zh-CN 尾部筛选框占位符
* @en-US Tail section filter placeholder.
*/
placeholderOfSuffixSelect: {
type: String
},
/**
* @zh-CN 头部筛选框默认选中值
* @en-US The default selected value of the header filter box.
*/
prefixSelectedVal: {
type: String
},
/**
* @zh-CN 尾部筛选框默认选中值
* @en-US The default selected value of the tail filter box.
*/
suffixSelectedVal: {
type: String
},
/**
* @zh-CN 头部筛选框下拉列表
* @en-US Display the head filter box.
*/
optionsOfPrefixSelect: {
type: Array
},
/**
* @zh-CN 尾部筛选框下拉列表
* @en-US Display the tail filter box.
*/
optionsOfSuffixSelect: {
type: Array
},
/**
* @zh-CN 显示头部筛选框
* @en-US Display the head filter box.
*/
showPrefixSelect: {
type: Boolean
},
/**
* @zh-CN 显示尾部筛选框
* @en-US Display the tail filter box.
*/
showSuffixSelect: {
type: Boolean
},
/**
* @zh-CN 联想内容
* @en-US Associated content.
*/
suggesstions: {
type: Array
}
};
const _hoisted_1$m = { class: "o-search-option" };
const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
__name: "OSearch",
props: searchProps,
emits: ["update:modelValue", "change", "input", "blur", "focus", "clear", "prefix-selected", "suffix-selected", "suggesstion-selected", "pressEnter", "options-visible-change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const formItemInjection = vue.inject(formItemInjectKey, null);
const searchInputRef = vue.ref();
const searchSelectRef = vue.ref();
const selectedValOfPrefix = vue.ref(props.prefixSelectedVal);
const selectedValOfSuffix = vue.ref(props.suffixSelectedVal);
const inputValue = vue.ref(props.modelValue ?? (props.defaultValue || ""));
let previousValue = inputValue.value;
const isOutClick = vue.ref(false);
const color2 = vue.computed(() => {
var _a;
if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || void 0;
} else {
return props.color;
}
});
const size2 = vue.computed(() => {
if (props.size === "medium") {
return props.size;
}
return "large";
});
const optionsOfPrefixSelect = vue.computed(() => {
return isArray(props.optionsOfPrefixSelect) ? props.optionsOfPrefixSelect : [];
});
const optionsOfSuffixSelect = vue.computed(() => {
return isArray(props.optionsOfSuffixSelect) ? props.optionsOfSuffixSelect : [];
});
const showPrefixSelect = vue.computed(() => {
return props.showPrefixSelect && optionsOfPrefixSelect.value.length;
});
const showSuffixSelect = vue.computed(() => {
return props.showSuffixSelect && optionsOfSuffixSelect.value.length;
});
const suggesstions = vue.computed(() => {
return isArray(props.suggesstions) ? props.suggesstions : [];
});
const formatOptions = (options, keyword) => {
return options.map((item) => {
return {
...item,
labelSegments: splitByMatch(item.label, keyword)
};
}).filter((v) => v.labelSegments.length > 1);
};
const realSuggesstions = vue.ref(formatOptions(suggesstions.value, inputValue.value));
const isShowingSuggesstiongs = vue.computed(() => {
var _a, _b;
return ((_a = realSuggesstions.value) == null ? void 0 : _a.length) && ((_b = searchSelectRef.value) == null ? void 0 : _b.isSelecting);
});
const updateSuggesstions = async (keyword) => {
var _a, _b;
realSuggesstions.value = formatOptions(suggesstions.value, keyword);
if (realSuggesstions.value.length) {
await vue.nextTick();
(_b = (_a = searchSelectRef.value) == null ? void 0 : _a.selectRef) == null ? void 0 : _b.click();
}
};
const formatSuggesstions = debounce(updateSuggesstions, 200, false);
const emitUpdateValue = () => {
emits("update:modelValue", inputValue.value);
};
const onInput = (evt, value) => {
var _a, _b;
emits("input", evt, value);
formatSuggesstions(value);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onInput) == null ? void 0 : _b.call(_a);
};
const onFocus = (evt) => {
var _a, _b;
emits("focus", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onFocus) == null ? void 0 : _b.call(_a);
};
const onBlur = (evt) => {
var _a, _b;
emits("blur", evt);
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onBlur) == null ? void 0 : _b.call(_a);
};
const onPressEnter = (evt) => {
emits("pressEnter", evt);
};
const onClear = (evt) => {
emits("clear", evt);
updateSuggesstions(inputValue.value);
};
const emitChange = () => {
var _a, _b;
if (inputValue.value !== previousValue) {
emits("change", inputValue.value);
previousValue = inputValue.value;
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
}
};
const onChange = (value) => {
inputValue.value = value;
emitChange();
};
const onUpdateModelValue = (value) => {
inputValue.value = value;
emitUpdateValue();
};
const onSuggesstionSelected = (val) => {
onUpdateModelValue(val);
emits("suggesstion-selected", val);
};
const handleClick = () => {
if (props.disabled) {
return;
}
isOutClick.value = false;
updateSuggesstions(inputValue.value);
};
const shouldHideOptions = () => {
return isOutClick.value || !isShowingSuggesstiongs.value;
};
const onOutClick = () => {
isOutClick.value = true;
};
vue.watch(
() => props.modelValue,
(val) => {
if (inputValue.value !== val) {
inputValue.value = val || "";
}
}
);
vue.watch(selectedValOfPrefix, (val) => {
emits("prefix-selected", val);
});
vue.watch(selectedValOfSuffix, (val) => {
emits("suffix-selected", val);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-search", [{ "o-search-with-prefix": showPrefixSelect.value, "o-search-with-suffix": showSuffixSelect.value }, `o-search-${props.size}`]])
},
[
vue.createCommentVNode(" 头部筛选框 "),
props.showPrefixSelect ? (vue.openBlock(), vue.createBlock(vue.unref(OSelect), {
key: 0,
modelValue: selectedValOfPrefix.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedValOfPrefix.value = $event),
class: "o-search-prefix o-search-select",
placeholder: props.placeholderOfPrefixSelect,
size: size2.value,
round: props.round,
color: color2.value,
variant: props.variant,
disabled: props.disabled,
readonly: props.readonly
}, {
prefix: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix-of-search-prefix")
]),
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(optionsOfPrefixSelect.value, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(OOption), {
key: item.value,
label: item.label,
value: item.value
}, null, 8, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 3
/* FORWARDED */
}, 8, ["modelValue", "placeholder", "size", "round", "color", "variant", "disabled", "readonly"])) : vue.createCommentVNode("v-if", true),
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: "o-search-input-wrap",
onClick: handleClick
}, [
vue.createVNode(vue.unref(OInput), {
ref_key: "searchInputRef",
ref: searchInputRef,
class: "o-search-input",
"model-value": inputValue.value,
placeholder: props.placeholder,
size: size2.value,
round: props.round,
color: color2.value,
variant: props.variant,
disabled: props.disabled,
readonly: props.readonly,
clearable: props.clearable,
onInput,
onBlur,
onFocus,
onChange,
onClear,
onPressEnter,
"onUpdate:modelValue": onUpdateModelValue,
onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["prevent"]))
}, {
prefix: vue.withCtx(() => [
vue.createVNode(vue.unref(OIconSearch), { class: "o-search-icon" })
]),
_: 1
/* STABLE */
}, 8, ["model-value", "placeholder", "size", "round", "color", "variant", "disabled", "readonly", "clearable"]),
vue.createCommentVNode(" 联想建议筛选框 "),
realSuggesstions.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(OSelect), {
key: 0,
ref_key: "searchSelectRef",
ref: searchSelectRef,
class: "o-search-select-placeholder",
"option-width-mode": "width",
trigger: "click-outclick",
"model-value": inputValue.value,
size: size2.value,
round: props.round,
color: color2.value,
variant: props.variant,
disabled: props.disabled,
readonly: props.readonly,
"before-options-hide": shouldHideOptions,
"no-responsive": true,
"onUpdate:modelValue": onSuggesstionSelected,
onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
}, ["stop"]))
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(realSuggesstions.value, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(OOption), {
key: item.value,
label: item.label,
value: item.value
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1$m, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(item.labelSegments, (segment, idx) => {
return vue.openBlock(), vue.createElementBlock(
"span",
{
key: idx,
class: vue.normalizeClass(["o-search-label", { "o-search-keyword-highlight": idx % 2 !== 0 }])
},
vue.toDisplayString(segment),
3
/* TEXT, CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
])
]),
_: 2
/* DYNAMIC */
}, 1032, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
}, 8, ["model-value", "size", "round", "color", "variant", "disabled", "readonly"])) : vue.createCommentVNode("v-if", true)
])), [
[vue.unref(vOutClick), onOutClick]
]),
vue.createCommentVNode(" 尾部筛选框 "),
props.showSuffixSelect ? (vue.openBlock(), vue.createBlock(vue.unref(OSelect), {
key: 1,
modelValue: selectedValOfSuffix.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selectedValOfSuffix.value = $event),
class: "o-search-suffix o-search-select",
placeholder: props.placeholderOfSuffixSelect,
size: size2.value,
round: props.round,
color: color2.value,
variant: props.variant,
disabled: props.disabled,
readonly: props.readonly
}, {
prefix: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix-of-search-suffix")
]),
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(optionsOfSuffixSelect.value, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(OOption), {
key: item.value,
label: item.label,
value: item.value
}, null, 8, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 3
/* FORWARDED */
}, 8, ["modelValue", "placeholder", "size", "round", "color", "variant", "disabled", "readonly"])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
const OSearch = Object.assign(_sfc_main$s, {
install(app) {
app.component("OSearch", _sfc_main$s);
}
});
function useFormField(props, emit) {
const formItem = vue.inject(formItemInjectKey, null);
const effectiveColor = vue.computed(() => {
const result = formItem == null ? void 0 : formItem.fieldResult.value;
return result ? result.type || "normal" : props.color ?? "normal";
});
const inputId2 = vue.ref(props.inputId);
vue.onMounted(() => {
if (!inputId2.value) {
inputId2.value = uniqueId();
}
});
const isFocus = vue.ref(false);
const onFocus = (e) => {
var _a, _b;
isFocus.value = true;
emit("focus", e);
(_b = formItem == null ? void 0 : (_a = formItem.fieldHandlers).onFocus) == null ? void 0 : _b.call(_a);
};
const onBlur = () => {
var _a, _b;
isFocus.value = false;
emit("blur");
(_b = formItem == null ? void 0 : (_a = formItem.fieldHandlers).onBlur) == null ? void 0 : _b.call(_a);
};
const onClear = (e) => {
e == null ? void 0 : e.stopPropagation();
emit("clear", e);
};
const onPressEnter = () => {
emit("pressEnter");
};
const notifyChange = () => {
var _a, _b;
(_b = formItem == null ? void 0 : (_a = formItem.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
};
return { effectiveColor, inputId: inputId2, isFocus, onFocus, onBlur, onClear, onPressEnter, notifyChange };
}
function useClickOutside(opts) {
const { targets, onOutside, disabled: disabled2 } = opts;
core.useEventListener("mousedown", (e) => {
if (vue.toValue(disabled2)) return;
const path = e.composedPath();
if (vue.toValue(targets).some((el) => {
const node = vue.toValue(el);
return node && path.includes(node);
}))
return;
onOutside();
});
}
const { placeholder: placeholder$2, inputId: inputId$1, disabled: disabled$2, readonly: readonly$1, size: size$1, round: round$2, color: color$2, variant: variant$2 } = inputProps;
const { noResponsive: noResponsive$1, optionTitle: optionTitle$1 } = selectProps;
const timePickerProps = {
placeholder: placeholder$2,
inputId: inputId$1,
disabled: disabled$2,
readonly: readonly$1,
size: size$1,
round: round$2,
color: color$2,
variant: variant$2,
noResponsive: noResponsive$1,
optionTitle: optionTitle$1,
/**
* @zh-CN 时间格式
* @en-US Time format.
* @default 'HH:mm:ss'
*/
format: {
type: String,
default: "HH:mm:ss"
},
/**
* @zh-CN 选项触发方式
* @en-US Option trigger method.
* @default 'click'
*/
trigger: {
type: String,
default: "click"
},
/**
* @zh-CN 支持快速清除
* @en-US Support quick clearing.
*/
clearable: {
type: Boolean
},
/**
* @zh-CN 弹出框位置
* @en-US Popup position.
* @default 'bl'
*/
popupPosition: {
type: String,
default: "bl"
},
/**
* @zh-CN 弹出框挂载容器
* @en-US Popup wrapper.
* @default 'body'
*/
popupWrapper: {
type: [String, Object],
default: "body"
},
/**
* @zh-CN 是否在结束选择时，卸载所有选项，v-model
* @en-US Whether to uninstall all options when ending the selection.
* @default true
*/
unmountOnHide: {
type: Boolean,
default: true
},
/**
* @zh-CN 过渡名称
* @en-US Transition name.
*/
transition: {
type: String
},
/**
* @zh-CN 步进：小时
* @en-US Step for hours.
* @default 1
*/
hourStep: {
type: Number,
default: 1
},
/**
* @zh-CN 步进：分钟
* @en-US Step for minutes.
* @default 1
*/
minuteStep: {
type: Number,
default: 1
},
/**
* @zh-CN 步进：秒
* @en-US Step for seconds.
* @default 1
*/
secondStep: {
type: Number,
default: 1
},
/**
* @zh-CN 禁用的小时列表，返回被禁用的小时数组
* @en-US Function to specify the hours that cannot be selected.
*/
disabledHours: {
type: Function,
default: void 0
},
/**
* @zh-CN 禁用的分钟列表，返回被禁用的分钟数组
* @en-US Function to specify the minutes that cannot be selected.
*/
disabledMinutes: {
type: Function,
default: void 0
},
/**
* @zh-CN 禁用的秒列表，返回被禁用的秒数组
* @en-US Function to specify the seconds that cannot be selected.
*/
disabledSeconds: {
type: Function,
default: void 0
},
/**
* @zh-CN 最小可选时间，可与 disabledHours/disabledMinutes/disabledSeconds 同时使用，约束效果取并集
* @en-US Minimum selectable time. Can be used together with disabledHours/disabledMinutes/disabledSeconds; constraints are merged.
*/
minTime: {
type: String,
default: void 0
},
/**
* @zh-CN 最大可选时间，可与 disabledHours/disabledMinutes/disabledSeconds 同时使用，约束效果取并集
* @en-US Maximum selectable time. Can be used together with disabledHours/disabledMinutes/disabledSeconds; constraints are merged.
*/
maxTime: {
type: String,
default: void 0
}
};
const {
format,
trigger,
clearable: clearable$1,
popupPosition,
popupWrapper,
unmountOnHide,
transition,
hourStep: hourStep$1,
minuteStep: minuteStep$1,
secondStep: secondStep$1,
disabledHours: disabledHours$1,
disabledMinutes: disabledMinutes$1,
disabledSeconds: disabledSeconds$1,
minTime: minTime$1,
maxTime: maxTime$1
} = timePickerProps;
const timeRangePickerProps = {
inputId: inputId$1,
disabled: disabled$2,
readonly: readonly$1,
size: size$1,
round: round$2,
color: color$2,
variant: variant$2,
noResponsive: noResponsive$1,
optionTitle: optionTitle$1,
format,
trigger,
clearable: clearable$1,
popupPosition,
popupWrapper,
unmountOnHide,
transition,
hourStep: hourStep$1,
minuteStep: minuteStep$1,
secondStep: secondStep$1,
disabledHours: disabledHours$1,
disabledMinutes: disabledMinutes$1,
disabledSeconds: disabledSeconds$1,
minTime: minTime$1,
maxTime: maxTime$1,
/**
* @zh-CN 提示文本-开始
* @en-US Start prompt text.
*/
placeholderStart: {
type: String
},
/**
* @zh-CN 提示文本-结束
* @en-US End prompt text.
*/
placeholderEnd: {
type: String
}
};
const TIME_PREFIX = "1970-01-01 ";
const timePickerInjectKey = Symbol("o-time-picker");
const pad = (n, maxLength = 2) => String(n).padStart(maxLength, "0");
const dateTimeNumberToString = ({ year, month, date, hour, minute, second }, {
format: format2,
timeOnly = false
}) => {
const toValidate = timeOnly ? [hour, minute, second] : [year, month, date, hour, minute, second];
if (toValidate.some((v) => isNil(v))) {
return void 0;
}
const dayjsDate = dayjs(`${isNil(year) ? 1970 : year}-${isNil(month) ? 1 : month}-${isNil(date) ? 1 : date} ${hour}:${minute}:${second}`);
return dayjsDate.isValid() ? dayjsDate.format(format2) : void 0;
};
function stringToDateTimeNumber(str, {
timeOnly
} = {}) {
if (isNil(str)) {
return void 0;
}
const dayjsDate = dayjs(timeOnly && !str.includes(" ") ? `1970-1-1 ${str}` : str);
const dateInfo = {
year: isNaN(dayjsDate.get("year")) ? null : dayjsDate.get("year"),
month: isNaN(dayjsDate.get("month")) ? null : dayjsDate.get("month") + 1,
date: isNaN(dayjsDate.get("date")) ? null : dayjsDate.get("date")
};
const timeInfo = {
hour: isNaN(dayjsDate.get("hour")) ? null : dayjsDate.get("hour"),
minute: isNaN(dayjsDate.get("minute")) ? null : dayjsDate.get("minute"),
second: isNaN(dayjsDate.get("second")) ? null : dayjsDate.get("second")
};
return timeOnly ? timeInfo : {
...dateInfo,
...timeInfo
};
}
function buildTimeStepOptions(limit, step) {
const list = [];
for (let i = 0; i < limit; i += step) {
list.push({ label: pad(i), value: i });
}
return list;
}
function parseTimeBound(time) {
if (!time) return null;
const parsed = stringToDateTimeNumber(time, { timeOnly: true });
if (!parsed || parsed.hour === null || parsed.minute === null || parsed.second === null) return null;
return parsed;
}
function addBoundaryDisabled(disabled2, options, bounds) {
for (const opt2 of options) {
if (bounds.min !== null && opt2.value < bounds.min) disabled2.add(opt2.value);
if (bounds.max !== null && opt2.value > bounds.max) disabled2.add(opt2.value);
}
}
function addCustomDisabled(disabled2, options, customValues) {
const validValues = new Set(options.map((o) => o.value));
for (const v of customValues) {
if (validValues.has(v)) disabled2.add(v);
}
}
function computeDisabledUnit({ options, bounds, customDisabled }) {
const disabled2 = /* @__PURE__ */ new Set();
addBoundaryDisabled(disabled2, options, bounds);
addCustomDisabled(disabled2, options, customDisabled);
return [...disabled2];
}
function resolveMinuteBounds(hour, min, max) {
const atMin = min !== null && hour === min.hour;
const atMax = max !== null && hour === max.hour;
return { min: atMin ? min.minute : null, max: atMax ? max.minute : null };
}
function resolveSecondBounds({ hour, minute, min, max }) {
const atMin = min !== null && hour === min.hour && minute === min.minute;
const atMax = max !== null && hour === max.hour && minute === max.minute;
return { min: atMin ? min.second : null, max: atMax ? max.second : null };
}
function useTimeStepOptions(hourStep2, minuteStep2, secondStep2) {
const hourOptions = vue.computed(() => buildTimeStepOptions(24, vue.toValue(hourStep2) || 1));
const minuteOptions = vue.computed(() => buildTimeStepOptions(60, vue.toValue(minuteStep2) || 1));
const secondOptions = vue.computed(() => buildTimeStepOptions(60, vue.toValue(secondStep2) || 1));
return { hourOptions, minuteOptions, secondOptions };
}
function useTimeDisabledOptions({
hourOptions,
minuteOptions,
secondOptions,
parsedMinTime,
parsedMaxTime,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2,
selectedHour,
selectedMinute
}) {
const disabledHourOptions = vue.computed(() => {
var _a;
const min = parsedMinTime.value;
const max = parsedMaxTime.value;
return computeDisabledUnit({
options: hourOptions.value,
bounds: { min: min ? min.hour : null, max: max ? max.hour : null },
customDisabled: ((_a = vue.toValue(disabledHours2)) == null ? void 0 : _a()) ?? []
});
});
const disabledMinuteOptions = vue.computed(() => {
var _a;
const hour = vue.toValue(selectedHour);
if (hour === null) return [];
return computeDisabledUnit({
options: minuteOptions.value,
bounds: resolveMinuteBounds(hour, parsedMinTime.value, parsedMaxTime.value),
customDisabled: ((_a = vue.toValue(disabledMinutes2)) == null ? void 0 : _a(hour)) ?? []
});
});
const disabledSecondOptions = vue.computed(() => {
var _a;
const hour = vue.toValue(selectedHour);
const minute = vue.toValue(selectedMinute);
if (hour === null || minute === null) return [];
return computeDisabledUnit({
options: secondOptions.value,
bounds: resolveSecondBounds({ hour, minute, min: parsedMinTime.value, max: parsedMaxTime.value }),
customDisabled: ((_a = vue.toValue(disabledSeconds2)) == null ? void 0 : _a(hour, minute)) ?? []
});
});
return { disabledHourOptions, disabledMinuteOptions, disabledSecondOptions };
}
const useTimePickerOptions = ({
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2,
minTime: minTime2,
maxTime: maxTime2,
selectedHour,
selectedMinute
}) => {
const parsedMinTime = vue.computed(() => parseTimeBound(vue.toValue(minTime2)));
const parsedMaxTime = vue.computed(() => parseTimeBound(vue.toValue(maxTime2)));
const { hourOptions, minuteOptions, secondOptions } = useTimeStepOptions(hourStep2, minuteStep2, secondStep2);
const { disabledHourOptions, disabledMinuteOptions, disabledSecondOptions } = useTimeDisabledOptions({
hourOptions,
minuteOptions,
secondOptions,
parsedMinTime,
parsedMaxTime,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2,
selectedHour,
selectedMinute
});
return { hourOptions, minuteOptions, secondOptions, disabledHourOptions, disabledMinuteOptions, disabledSecondOptions };
};
function addFnDisabled(disabled2, options, disabledFn) {
if (!disabledFn) return;
for (const v of disabledFn()) {
if (options.some((opt2) => opt2.value === v)) disabled2.add(v);
}
}
function buildDisabledSet({ options, minBoundary, maxBoundary, disabledFn }) {
const disabled2 = /* @__PURE__ */ new Set();
for (const opt2 of options) {
if ((minBoundary == null ? void 0 : minBoundary.match) && opt2.value < minBoundary.value) disabled2.add(opt2.value);
if ((maxBoundary == null ? void 0 : maxBoundary.match) && opt2.value > maxBoundary.value) disabled2.add(opt2.value);
}
addFnDisabled(disabled2, options, disabledFn);
return disabled2;
}
function findClosest(options, disabled2, target) {
const enabled = options.filter((opt2) => !disabled2.has(opt2.value));
if (enabled.length === 0) return void 0;
const atOrAfter = enabled.find((opt2) => opt2.value >= target);
return atOrAfter ? atOrAfter.value : enabled[enabled.length - 1].value;
}
function resolveHour({ options, bounds, disabledFn, target }) {
const disabled2 = buildDisabledSet({
options,
minBoundary: bounds.minT ? { match: true, value: bounds.minT.hour() } : void 0,
maxBoundary: bounds.maxT ? { match: true, value: bounds.maxT.hour() } : void 0,
disabledFn
});
return findClosest(options, disabled2, target);
}
function resolveMinute({ options, bounds, h, disabledFn, target }) {
var _a, _b, _c, _d;
const disabled2 = buildDisabledSet({
options,
minBoundary: { match: h === ((_a = bounds.minT) == null ? void 0 : _a.hour()), value: ((_b = bounds.minT) == null ? void 0 : _b.minute()) ?? 0 },
maxBoundary: { match: h === ((_c = bounds.maxT) == null ? void 0 : _c.hour()), value: ((_d = bounds.maxT) == null ? void 0 : _d.minute()) ?? 59 },
disabledFn: disabledFn ? () => disabledFn(h) : void 0
});
return findClosest(options, disabled2, target);
}
function resolveSecond({ options, bounds, h, m, disabledFn, target }) {
var _a, _b, _c, _d, _e, _f;
const disabled2 = buildDisabledSet({
options,
minBoundary: { match: h === ((_a = bounds.minT) == null ? void 0 : _a.hour()) && m === ((_b = bounds.minT) == null ? void 0 : _b.minute()), value: ((_c = bounds.minT) == null ? void 0 : _c.second()) ?? 0 },
maxBoundary: { match: h === ((_d = bounds.maxT) == null ? void 0 : _d.hour()) && m === ((_e = bounds.maxT) == null ? void 0 : _e.minute()), value: ((_f = bounds.maxT) == null ? void 0 : _f.second()) ?? 59 },
disabledFn: disabledFn ? () => disabledFn(h, m) : void 0
});
return findClosest(options, disabled2, target);
}
function findNearestTime(params) {
const { hourOptions, minuteOptions, secondOptions, format: format2, target } = params;
const bounds = {
minT: params.minTime ? dayjs(TIME_PREFIX + params.minTime) : null,
maxT: params.maxTime ? dayjs(TIME_PREFIX + params.maxTime) : null
};
const h = resolveHour({ options: hourOptions, bounds, disabledFn: params.disabledHours, target: target.hour });
if (h === void 0) return void 0;
const mTarget = h === target.hour ? target.minute : 0;
const m = resolveMinute({ options: minuteOptions, bounds, h, disabledFn: params.disabledMinutes, target: mTarget });
if (m === void 0) return void 0;
const sTarget = h === target.hour && m === target.minute ? target.second : 0;
const s = resolveSecond({ options: secondOptions, bounds, h, m, disabledFn: params.disabledSeconds, target: sTarget }) ?? 0;
return dayjs(`1970-01-01 ${pad(h)}:${pad(m)}:${pad(s)}`).format(format2);
}
const isTimeBefore = (a, b) => dayjs(TIME_PREFIX + a).isBefore(dayjs(TIME_PREFIX + b));
const isTimeAfter = (a, b) => dayjs(TIME_PREFIX + a).isAfter(dayjs(TIME_PREFIX + b));
function useTimeRangeConstraints(params) {
const { startTime, endTime, format: format2, hourStep: hourStep2, minuteStep: minuteStep2, secondStep: secondStep2, enabled } = params;
const smallestUnit = vue.computed(() => {
var _a;
const fmt = ((_a = vue.toValue(format2)) == null ? void 0 : _a.toLowerCase()) ?? "hh:mm:ss";
if (fmt.includes("ss")) return "second";
if (fmt.includes("mm")) return "minute";
return "hour";
});
const smallestStep = vue.computed(
() => ({
second: vue.toValue(secondStep2) ?? 1,
minute: vue.toValue(minuteStep2) ?? 1,
hour: vue.toValue(hourStep2) ?? 1
})[smallestUnit.value]
);
const maxStartTime = vue.computed(() => {
if (enabled !== void 0 && !vue.toValue(enabled)) return void 0;
const end = vue.toValue(endTime);
if (!end) return void 0;
return dayjs(TIME_PREFIX + end).subtract(smallestStep.value, smallestUnit.value).format("HH:mm:ss");
});
const minEndTime = vue.computed(() => {
if (enabled !== void 0 && !vue.toValue(enabled)) return void 0;
const start = vue.toValue(startTime);
if (!start) return void 0;
return dayjs(TIME_PREFIX + start).add(smallestStep.value, smallestUnit.value).format("HH:mm:ss");
});
return { maxStartTime, minEndTime };
}
function parseTimeString(time) {
const [hour, minute, second] = (time == null ? void 0 : time.split(":").map((v) => Number.parseInt(v))) ?? [];
return { hour, minute, second };
}
function isValidTimeUnit(value, options, disabled2) {
if (Number.isNaN(value)) return false;
if (!options.some((opt2) => opt2.value === value)) return false;
return !disabled2.includes(value);
}
function useTimeRangeInputValidation(params) {
const {
tempStart,
tempEnd,
format: format2,
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
minTime: minTime2,
maxTime: maxTime2,
maxStartTime,
minEndTime,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2
} = params;
const showSeconds = vue.computed(() => format2.value.toLowerCase().includes("ss"));
const parsedStart = vue.computed(() => parseTimeString(tempStart.value));
const parsedEnd = vue.computed(() => parseTimeString(tempEnd.value));
const startHour = vue.computed(() => Number.isNaN(parsedStart.value.hour) ? null : parsedStart.value.hour);
const startMinute = vue.computed(() => Number.isNaN(parsedStart.value.minute) ? null : parsedStart.value.minute);
const endHour = vue.computed(() => Number.isNaN(parsedEnd.value.hour) ? null : parsedEnd.value.hour);
const endMinute = vue.computed(() => Number.isNaN(parsedEnd.value.minute) ? null : parsedEnd.value.minute);
const startMaxTime = vue.computed(() => maxStartTime.value ?? (maxTime2 == null ? void 0 : maxTime2.value));
const endMinTime = vue.computed(() => minEndTime.value ?? (minTime2 == null ? void 0 : minTime2.value));
const startOptions = useTimePickerOptions({
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2,
minTime: minTime2,
maxTime: startMaxTime,
selectedHour: startHour,
selectedMinute: startMinute
});
const endOptions = useTimePickerOptions({
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2,
minTime: endMinTime,
maxTime: maxTime2,
selectedHour: endHour,
selectedMinute: endMinute
});
const isStartValid = createBoundaryValidator({
parsedTime: parsedStart,
options: startOptions,
showSeconds,
boundaryTime: startMaxTime,
tempTime: tempStart,
checkFn: isTimeAfter
});
const isEndValid = createBoundaryValidator({
parsedTime: parsedEnd,
options: endOptions,
showSeconds,
boundaryTime: endMinTime,
tempTime: tempEnd,
checkFn: isTimeBefore
});
return { isStartValid, isEndValid };
}
function createBoundaryValidator({ parsedTime, options, showSeconds, boundaryTime, tempTime, checkFn }) {
return vue.computed(() => {
const { hour, minute, second } = parsedTime.value;
if (!isValidTimeUnit(hour, options.hourOptions.value, options.disabledHourOptions.value)) return false;
if (!isValidTimeUnit(minute, options.minuteOptions.value, options.disabledMinuteOptions.value)) return false;
if (showSeconds.value && !isValidTimeUnit(second, options.secondOptions.value, options.disabledSecondOptions.value)) return false;
return !(boundaryTime.value && tempTime.value && checkFn(tempTime.value, boundaryTime.value));
});
}
const _hoisted_1$l = {
key: 0,
class: "o-time-panel-column-spacer"
};
const _hoisted_2$d = ["data-item-value", "onClick"];
const _hoisted_3$8 = { class: "o-time-panel-item__inner" };
const LANDED_THRESHOLD = 5;
const WHEEL_STEP = 3;
const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
__name: "TimeColumn",
props: /* @__PURE__ */ vue.mergeModels({
options: {},
disabledOptions: {},
noResponsive: { type: Boolean }
}, {
"modelValue": { required: true },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
function findLandedItemValue({ el, containerTop, responding, itemPadding }) {
const { top } = el.getBoundingClientRect();
const inRespondingMiddle = responding && Math.abs(itemPadding - (top - containerTop)) < LANDED_THRESHOLD;
const inUnrespondingTop = !responding && top - containerTop < LANDED_THRESHOLD;
if (inRespondingMiddle || inUnrespondingTop) {
return Number.parseInt(el.dataset.itemValue);
}
return null;
}
const props = __props;
const emits = __emit;
const modelValue2 = vue.useModel(__props, "modelValue");
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => !props.noResponsive && isPhonePad.value);
const columnRef = vue.ref();
const listRef = vue.ref();
const itemsRef = vue.ref();
const itemInnerHeightVar = core.useCssVar("--time-panel-item-height", listRef, { initialValue: "48px" });
const itemInnerHeight = vue.computed(() => Number.parseInt(itemInnerHeightVar.value));
const itemGapVar = core.useCssVar("--time-panel-item-gap", listRef, { initialValue: "4px" });
const itemGap = vue.computed(() => Number.parseInt(itemGapVar.value));
const itemHeight = vue.computed(() => itemInnerHeight.value + itemGap.value / 2);
const showItemCountVar = core.useCssVar("--time-panel-col-show-item-count", listRef, { initialValue: "5" });
const showItemCount = vue.computed(() => Number.parseInt(showItemCountVar.value));
const activeItemPadding = vue.computed(() => itemHeight.value * (showItemCount.value - 1) / 2);
let changedByOut = false;
const scrollToItem = async (smooth = false) => {
var _a;
await vue.nextTick();
if (!columnRef.value) return;
const activeItem = (_a = columnRef.value.getContainerEl()) == null ? void 0 : _a.querySelector(".active");
if (!activeItem) return;
changedByOut = !smooth;
if (isResponding.value) {
columnRef.value.scrollTo({ top: activeItem.offsetTop - activeItemPadding.value, behavior: smooth ? "smooth" : "instant" });
} else {
columnRef.value.scrollTo({ top: activeItem.offsetTop, behavior: smooth ? "smooth" : "instant" });
}
};
const handleWheel = (e) => {
var _a;
e.preventDefault();
const direction = e.deltaY > 0 ? itemHeight.value : -itemHeight.value;
(_a = columnRef.value) == null ? void 0 : _a.scrollBy({ top: direction * WHEEL_STEP, behavior: "smooth" });
};
const isItemDisabled = (item) => {
var _a;
return ((_a = props.disabledOptions) == null ? void 0 : _a.includes(item)) ?? false;
};
const findNearestEnabled = (value) => {
const enabled = props.options.filter((o) => !isItemDisabled(o.value));
if (enabled.length === 0) return null;
return enabled.reduce((closest, cur) => Math.abs(cur.value - value) < Math.abs(closest - value) ? cur.value : closest, enabled[0].value);
};
let scrollEndTimer = null;
let isAutoScrolling = false;
const onScrollEnd = (landedValue) => {
if (landedValue !== null && isItemDisabled(landedValue)) {
const nearest = findNearestEnabled(landedValue);
if (nearest !== null) {
modelValue2.value = nearest;
isAutoScrolling = true;
scrollToItem(true);
emits("change", nearest);
}
}
};
const handleScroll = () => {
var _a, _b, _c;
if (isAutoScrolling) {
isAutoScrolling = false;
return;
}
const containerTop = ((_b = (_a = columnRef.value) == null ? void 0 : _a.getContainerEl()) == null ? void 0 : _b.getBoundingClientRect().top) ?? 0;
let landedValue = null;
(_c = itemsRef.value) == null ? void 0 : _c.forEach((el) => {
const v = findLandedItemValue({ el, containerTop, responding: isResponding.value, itemPadding: activeItemPadding.value });
if (v !== null) landedValue = v;
});
if (landedValue !== null && !isItemDisabled(landedValue)) {
modelValue2.value = landedValue;
}
const _changedByOut = changedByOut;
changedByOut = false;
if (!_changedByOut) emits("change", modelValue2.value);
clearTimeout(scrollEndTimer);
scrollEndTimer = setTimeout(() => onScrollEnd(landedValue), 150);
};
const handleItemClick = (item) => {
if (isItemDisabled(item.value)) return;
modelValue2.value = item.value;
scrollToItem(true);
};
vue.onMounted(() => {
scrollToItem(false);
});
vue.watch(isResponding, () => {
scrollToItem(false);
});
vue.onUnmounted(() => {
if (scrollEndTimer) clearTimeout(scrollEndTimer);
});
__expose({
scrollToItem
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(OScroller), {
ref_key: "columnRef",
ref: columnRef,
size: "small",
"show-type": isResponding.value ? "never" : "auto",
"disabled-x": "",
class: "o-time-panel-column-scroller",
"wrap-class": "o-time-panel-column",
onScroll: handleScroll,
onWheel: handleWheel
}, {
default: vue.withCtx(() => [
_cache[1] || (_cache[1] = vue.createElementVNode(
"div",
{ class: "o-time-panel-indicator" },
null,
-1
/* CACHED */
)),
vue.createElementVNode(
"div",
{
ref_key: "listRef",
ref: listRef,
class: "o-time-panel-column-list"
},
[
isResponding.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l)) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(props.options, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item.value,
ref_for: true,
ref_key: "itemsRef",
ref: itemsRef,
class: vue.normalizeClass(["o-time-panel-item", { active: modelValue2.value === item.value, disabled: isItemDisabled(item.value) }]),
"data-item-value": item.value,
onClick: ($event) => handleItemClick(item)
}, [
vue.createElementVNode(
"div",
_hoisted_3$8,
vue.toDisplayString(item.label),
1
/* TEXT */
)
], 10, _hoisted_2$d);
}),
128
/* KEYED_FRAGMENT */
)),
_cache[0] || (_cache[0] = vue.createElementVNode(
"div",
{ class: "o-time-panel-column-spacer" },
null,
-1
/* CACHED */
))
],
512
/* NEED_PATCH */
)
]),
_: 1
/* STABLE */
}, 8, ["show-type"]);
};
}
});
const _hoisted_1$k = {
key: 0,
class: "o-time-panel-mask"
};
const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
__name: "TimeColumns",
props: {
minTime: {},
maxTime: {}
},
emits: ["change"],
setup(__props, { expose: __expose, emit: __emit }) {
var _a;
const props = __props;
const timePickerCtx = vue.inject(timePickerInjectKey);
const {
format: format2,
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
noResponsive: noResponsive2,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2,
minTime: contextMinTime,
maxTime: contextMaxTime
} = timePickerCtx;
const effectiveMinTime = vue.computed(() => props.minTime ?? (contextMinTime == null ? void 0 : contextMinTime.value));
const effectiveMaxTime = vue.computed(() => props.maxTime ?? (contextMaxTime == null ? void 0 : contextMaxTime.value));
const emits = __emit;
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => !(noResponsive2 == null ? void 0 : noResponsive2.value) && isPhonePad.value);
const round2 = getRoundClass({ round: (_a = timePickerCtx.round) == null ? void 0 : _a.value }, "time-picker-columns");
const showSecond = vue.computed(() => format2.value.toLowerCase().includes("s"));
const selectedHour = vue.ref(null);
const selectedMinute = vue.ref(null);
const selectedSecond = vue.ref(null);
const hasLocalConstraints = vue.computed(() => !!props.minTime || !!props.maxTime);
const injectedOptions = vue.computed(() => !hasLocalConstraints.value ? timePickerCtx.computedOptions : void 0);
const localOptions = useTimePickerOptions({
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2,
minTime: effectiveMinTime,
maxTime: effectiveMaxTime,
selectedHour,
selectedMinute
});
const hourOptions = vue.computed(() => {
var _a2;
return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.hourOptions.value) ?? localOptions.hourOptions.value;
});
const minuteOptions = vue.computed(() => {
var _a2;
return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.minuteOptions.value) ?? localOptions.minuteOptions.value;
});
const secondOptions = vue.computed(() => {
var _a2;
return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.secondOptions.value) ?? localOptions.secondOptions.value;
});
const disabledHourOptions = vue.computed(() => {
var _a2;
return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.disabledHourOptions.value) ?? localOptions.disabledHourOptions.value;
});
const { disabledMinuteOptions, disabledSecondOptions } = localOptions;
const hourIndex = vue.computed(() => {
if (selectedHour.value === null) return -1;
return hourOptions.value.findIndex((opt2) => opt2.value === selectedHour.value);
});
const minuteIndex = vue.computed(() => {
if (selectedMinute.value === null) return -1;
return minuteOptions.value.findIndex((opt2) => opt2.value === selectedMinute.value);
});
const secondIndex = vue.computed(() => {
if (selectedSecond.value === null) return -1;
return secondOptions.value.findIndex((opt2) => opt2.value === selectedSecond.value);
});
const hourColumnRef = vue.ref();
const minuteColumnRef = vue.ref();
const secondColumnRef = vue.ref();
const scrollAllToSelected = async (smooth = false) => {
var _a2, _b, _c;
await vue.nextTick();
if (hourIndex.value >= 0) {
(_a2 = hourColumnRef.value) == null ? void 0 : _a2.scrollToItem(smooth);
}
if (minuteIndex.value >= 0) {
(_b = minuteColumnRef.value) == null ? void 0 : _b.scrollToItem(smooth);
}
if (secondIndex.value >= 0) {
(_c = secondColumnRef.value) == null ? void 0 : _c.scrollToItem(smooth);
}
};
const snapToOption = (options, disabledOptions, value) => {
const enabled = options.filter((opt2) => !disabledOptions.includes(opt2.value));
const pool = enabled.length > 0 ? enabled : options;
if (pool.some((opt2) => opt2.value === value)) return value;
return pool.reduce((nearest, opt2) => Math.abs(opt2.value - value) < Math.abs(nearest - value) ? opt2.value : nearest, pool[0].value);
};
const setValue = (value) => {
if (value instanceof Date) {
selectedHour.value = snapToOption(hourOptions.value, disabledHourOptions.value, value.getHours());
selectedMinute.value = snapToOption(minuteOptions.value, disabledMinuteOptions.value, value.getMinutes());
selectedSecond.value = snapToOption(secondOptions.value, disabledSecondOptions.value, value.getSeconds());
} else if (value) {
const { hour, minute, second } = stringToDateTimeNumber(value, { timeOnly: true }) || { hour: null, minute: null, second: null };
selectedHour.value = hour !== null ? snapToOption(hourOptions.value, disabledHourOptions.value, hour) : null;
selectedMinute.value = minute !== null ? snapToOption(minuteOptions.value, disabledMinuteOptions.value, minute) : null;
selectedSecond.value = second !== null ? snapToOption(secondOptions.value, disabledSecondOptions.value, second) : null;
} else {
selectedHour.value = null;
selectedMinute.value = null;
selectedSecond.value = null;
}
scrollAllToSelected(false);
};
const getValue = () => {
return dateTimeNumberToString(
{ hour: selectedHour.value ?? 0, minute: selectedMinute.value ?? 0, second: selectedSecond.value ?? 0 },
{ timeOnly: true, format: format2.value }
);
};
const handleChange = () => {
emits("change", getValue());
};
const handleHourChange = () => {
var _a2, _b;
if (selectedMinute.value === null) {
selectedMinute.value = 0;
(_a2 = minuteColumnRef.value) == null ? void 0 : _a2.scrollToItem(true);
}
if (showSecond.value && selectedSecond.value === null) {
selectedSecond.value = 0;
(_b = secondColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
}
handleChange();
};
const handleMinuteChange = () => {
var _a2, _b;
if (selectedHour.value === null) {
selectedHour.value = 0;
(_a2 = hourColumnRef.value) == null ? void 0 : _a2.scrollToItem(true);
}
if (showSecond.value && selectedSecond.value === null) {
selectedSecond.value = 0;
(_b = secondColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
}
handleChange();
};
const handleSecondChange = () => {
var _a2, _b;
if (selectedHour.value === null) {
selectedHour.value = 0;
(_a2 = hourColumnRef.value) == null ? void 0 : _a2.scrollToItem(true);
}
if (selectedMinute.value === null) {
selectedMinute.value = 0;
(_b = minuteColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
}
handleChange();
};
__expose({
scrollAllToSelected,
setValue,
getValue
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-time-panel-columns", vue.unref(round2).class.value]),
style: vue.normalizeStyle(vue.unref(round2).style.value)
},
[
isResponding.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k)) : vue.createCommentVNode("v-if", true),
vue.createVNode(_sfc_main$r, {
ref_key: "hourColumnRef",
ref: hourColumnRef,
modelValue: selectedHour.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedHour.value = $event),
options: hourOptions.value,
"disabled-options": disabledHourOptions.value,
"no-responsive": vue.unref(noResponsive2),
onChange: handleHourChange
}, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"]),
!isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(ODivider), {
key: 1,
direction: "v",
class: "o-time-panel-column-divider"
})) : vue.createCommentVNode("v-if", true),
vue.createVNode(_sfc_main$r, {
ref_key: "minuteColumnRef",
ref: minuteColumnRef,
modelValue: selectedMinute.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedMinute.value = $event),
options: minuteOptions.value,
"disabled-options": vue.unref(disabledMinuteOptions),
"no-responsive": vue.unref(noResponsive2),
onChange: handleMinuteChange
}, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"]),
showSecond.value ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
!isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(ODivider), {
key: 0,
direction: "v",
class: "o-time-panel-column-divider"
})) : vue.createCommentVNode("v-if", true),
vue.createVNode(_sfc_main$r, {
ref_key: "secondColumnRef",
ref: secondColumnRef,
modelValue: selectedSecond.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedSecond.value = $event),
options: secondOptions.value,
"disabled-options": vue.unref(disabledSecondOptions),
"no-responsive": vue.unref(noResponsive2),
onChange: handleSecondChange
}, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
);
};
}
});
const _hoisted_1$j = { class: "o-select-options-head" };
const _hoisted_2$c = { class: "o-time-panel-content" };
const _hoisted_3$7 = { class: "o-time-panel-content" };
const _hoisted_4$7 = { class: "o-time-panel-footer" };
const _hoisted_5$6 = { class: "o-time-panel-shortcut" };
const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
__name: "TimePanel",
props: {
target: {},
optionTitle: {}
},
emits: ["cancel", "change", "confirm"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const visible = vue.ref(false);
const setVisible = (newVal) => {
visible.value = newVal;
if (!newVal) {
emits("cancel");
}
};
const timePickerCtx = vue.inject(timePickerInjectKey);
const { size: size2, transition: transition2, popupPosition: popupPosition2, popupWrapper: popupWrapper2, noResponsive: noResponsive2, isRange } = timePickerCtx;
const { t } = useI18n();
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => {
return !noResponsive2.value && isPhonePad.value;
});
const popupRef = vue.ref();
const timeColumnsRef = vue.ref();
const getValue = () => {
var _a;
return (_a = timeColumnsRef.value) == null ? void 0 : _a.getValue();
};
const setValue = (value, smooth = false) => {
var _a, _b;
(_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(value);
(_b = timeColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(smooth);
};
const open = async (newVal) => {
visible.value = true;
await core.until(timeColumnsRef).toBeTruthy();
await vue.nextTick();
setValue(newVal);
};
const close2 = () => {
visible.value = false;
};
const handleCancel = () => {
emits("cancel");
close2();
};
const handleConfirm = () => {
var _a;
emits("confirm", (_a = timeColumnsRef.value) == null ? void 0 : _a.getValue());
close2();
};
const handleChange = () => {
var _a;
emits("change", (_a = timeColumnsRef.value) == null ? void 0 : _a.getValue());
};
__expose({
getPopupEl: () => popupRef.value,
getValue,
setValue,
open,
close: close2
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(ODialog), {
key: 0,
visible: visible.value,
class: "o-select-dlg",
"main-class": ["o-time-panel", `o-time-panel-${vue.unref(size2)}`, { "o-time-panel-touch": isResponding.value }],
"hide-close": "",
size: "small",
"onUpdate:visible": setVisible
}, {
header: vue.withCtx(() => [
vue.createElementVNode(
"div",
_hoisted_1$j,
vue.toDisplayString(props.optionTitle ?? vue.unref(t)("timePicker.selectTime")),
1
/* TEXT */
)
]),
actions: vue.withCtx(() => [
vue.createVNode(vue.unref(OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
onClick: handleCancel
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.cancel")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}),
vue.createVNode(vue.unref(OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_2$c, [
vue.createVNode(
_sfc_main$q,
{
ref_key: "timeColumnsRef",
ref: timeColumnsRef,
onChange: handleChange
},
null,
512
/* NEED_PATCH */
)
])
]),
_: 1
/* STABLE */
}, 8, ["visible", "main-class"])) : (vue.openBlock(), vue.createBlock(vue.unref(OPopup), {
key: 1,
visible: visible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
class: vue.normalizeClass(["o-time-panel", `o-time-panel-${vue.unref(size2)}`]),
"hide-close": "",
target: props.target,
transition: vue.unref(transition2),
position: vue.unref(popupPosition2),
wrapper: vue.unref(popupWrapper2),
trigger: "none",
offset: vue.unref(isRange) ? 8 : 4,
"adjust-min-width": false,
"adjust-width": false
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "popupRef",
ref: popupRef
},
[
vue.createElementVNode("div", _hoisted_3$7, [
vue.createVNode(
_sfc_main$q,
{
ref_key: "timeColumnsRef",
ref: timeColumnsRef,
onChange: handleChange
},
null,
512
/* NEED_PATCH */
)
]),
vue.createVNode(vue.unref(ODivider), { class: "o-time-panel-divider" }),
vue.createElementVNode("div", _hoisted_4$7, [
vue.createElementVNode("span", _hoisted_5$6, [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange: handleChange
})
]),
vue.createVNode(vue.unref(OButton), {
round: "pill",
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
])
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "class", "target", "transition", "position", "wrapper", "offset"]))
]),
_: 3
/* FORWARDED */
});
};
}
});
const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
__name: "OTimePicker",
props: /* @__PURE__ */ vue.mergeModels(timePickerProps, {
"modelValue": { default: void 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const modelValue2 = vue.useModel(__props, "modelValue");
const {
effectiveColor: color2,
inputId: inputId2,
isFocus,
onFocus: formOnFocus,
onBlur: formOnBlur,
onClear: formOnClear,
onPressEnter: formOnPressEnter,
notifyChange
} = useFormField(props, emits);
const propsRefs = vue.toRefs(props);
const { format: format2, hourStep: hourStep2, minuteStep: minuteStep2, secondStep: secondStep2, disabled: disabled2, readonly: readonly2, noResponsive: noResponsive2 } = propsRefs;
const { t } = useI18n();
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => !(noResponsive2 == null ? void 0 : noResponsive2.value) && isPhonePad.value);
const inBoxRef = vue.ref();
const inInputRef = vue.ref();
const panelRef = vue.ref();
const tempInputValue = vue.ref();
const tempParsed = vue.computed(() => {
var _a;
const [hour, minute, second] = ((_a = tempInputValue.value) == null ? void 0 : _a.split(":").map((v) => Number.parseInt(v))) ?? [];
return { hour, minute, second };
});
const tempSelectedHour = vue.computed(() => Number.isNaN(tempParsed.value.hour) ? null : tempParsed.value.hour);
const tempSelectedMinute = vue.computed(() => Number.isNaN(tempParsed.value.minute) ? null : tempParsed.value.minute);
const { hourOptions, minuteOptions, secondOptions, disabledHourOptions, disabledMinuteOptions, disabledSecondOptions } = useTimePickerOptions({
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
disabledHours: propsRefs.disabledHours,
disabledMinutes: propsRefs.disabledMinutes,
disabledSeconds: propsRefs.disabledSeconds,
minTime: propsRefs.minTime,
maxTime: propsRefs.maxTime,
selectedHour: tempSelectedHour,
selectedMinute: tempSelectedMinute
});
vue.provide(timePickerInjectKey, {
...propsRefs,
computedOptions: { hourOptions, minuteOptions, secondOptions, disabledHourOptions }
});
const isTempInputValueValid = vue.computed(() => {
const { hour, minute, second } = tempParsed.value;
if (!isValidTimeUnit(hour, hourOptions.value, disabledHourOptions.value)) return false;
if (!isValidTimeUnit(minute, minuteOptions.value, disabledMinuteOptions.value)) return false;
if (!isValidTimeUnit(second, secondOptions.value, disabledSecondOptions.value)) return false;
return true;
});
vue.watch(
modelValue2,
(newValue) => {
tempInputValue.value = newValue ?? "";
},
{ immediate: true }
);
vue.watch(isFocus, (newVal, oldVal) => {
var _a;
if (!newVal && oldVal) {
tempInputValue.value = modelValue2.value ?? "";
if (!isResponding.value) {
(_a = panelRef.value) == null ? void 0 : _a.close();
}
}
});
useClickOutside({
targets: [() => {
var _a;
return (_a = inBoxRef.value) == null ? void 0 : _a.$el;
}, () => {
var _a;
return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
}],
onOutside: () => {
formOnBlur();
},
disabled: isResponding
});
const getNearestAvailableTime = () => {
const now = dayjs();
return findNearestTime({
hourOptions: hourOptions.value,
minuteOptions: minuteOptions.value,
secondOptions: secondOptions.value,
minTime: props.minTime,
maxTime: props.maxTime,
disabledHours: props.disabledHours,
disabledMinutes: props.disabledMinutes,
disabledSeconds: props.disabledSeconds,
target: { hour: now.hour(), minute: now.minute(), second: now.second() },
format: format2.value
});
};
let skipOpenPanel = false;
const onFocus = (e) => {
var _a;
if (readonly2.value) return;
if (!skipOpenPanel) {
let valueToOpen = tempInputValue.value;
if (!valueToOpen) {
const nearest = getNearestAvailableTime();
if (nearest) {
tempInputValue.value = nearest;
valueToOpen = nearest;
}
}
(_a = panelRef.value) == null ? void 0 : _a.open(valueToOpen);
}
skipOpenPanel = false;
if (isFocus.value) return;
formOnFocus(e);
};
let prevValue = modelValue2.value;
let internalChangePending = false;
vue.watch(modelValue2, (_, old) => {
if (internalChangePending) {
internalChangePending = false;
} else {
prevValue = old;
}
});
const handleChange = () => {
var _a;
internalChangePending = true;
modelValue2.value = isTempInputValueValid.value ? tempInputValue.value : (_a = panelRef.value) == null ? void 0 : _a.getValue();
emits("change", modelValue2.value, prevValue);
prevValue = modelValue2.value;
notifyChange();
};
const handleInput = core.useDebounceFn(async () => {
var _a;
await vue.nextTick();
if (isTempInputValueValid.value) {
(_a = panelRef.value) == null ? void 0 : _a.setValue(tempInputValue.value);
}
});
const blurAndClose = () => {
var _a, _b;
(_a = inInputRef.value) == null ? void 0 : _a.blur();
(_b = panelRef.value) == null ? void 0 : _b.close();
formOnBlur();
};
const cancelEdit = () => {
tempInputValue.value = modelValue2.value ?? "";
blurAndClose();
};
const handlePanelChange = (newVal) => {
tempInputValue.value = newVal;
};
const onPressEnter = () => {
if (!isTempInputValueValid.value) {
cancelEdit();
return;
}
handleChange();
blurAndClose();
formOnPressEnter();
};
const handleConfirm = () => {
handleChange();
formOnBlur();
formOnPressEnter();
};
const handleCancel = () => {
cancelEdit();
};
const onClear = (e) => {
e == null ? void 0 : e.stopPropagation();
const oldVal = prevValue;
internalChangePending = true;
modelValue2.value = void 0;
tempInputValue.value = "";
prevValue = void 0;
emits("change", void 0, oldVal);
formOnClear(e);
notifyChange();
blurAndClose();
};
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
if (!open) skipOpenPanel = true;
(_a = inInputRef.value) == null ? void 0 : _a.focus();
},
/**
* @zh-CN 使输入框失去焦点，校验合法则应用当前值，否则回滚
* @en-US Blur the input. Applies the current value if valid, otherwise rolls back.
*/
blur: () => {
if (isTempInputValueValid.value) {
handleChange();
blurAndClose();
} else {
cancelEdit();
}
},
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.clear();
},
/**
* @zh-CN 获取输入框 DOM 元素
* @en-US Get the input DOM element
*/
inputEl: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.inputEl;
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(
vue.unref(_sfc_main$1e),
vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(color2),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: vue.unref(isFocus)
}, { class: ["o-time-picker", "o-input"] }),
vue.createSlots({
default: vue.withCtx(() => {
var _a;
return [
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "inInputRef",
ref: inInputRef,
modelValue: tempInputValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tempInputValue.value = $event),
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": vue.unref(isFocus), "o-input-wrap-touch": isResponding.value }]),
disabled: vue.unref(disabled2),
clearable: props.clearable && !!tempInputValue.value,
placeholder: props.placeholder ?? vue.unref(t)("timePicker.placeholder"),
"input-id": vue.unref(inputId2),
"max-length": ((_a = vue.unref(format2)) == null ? void 0 : _a.length) ?? 8,
"input-on-outlimit": false,
"show-length": "never",
readonly: vue.unref(readonly2),
"no-keyboard": "",
onKeydown: vue.withKeys(handleCancel, ["esc"]),
onInput: vue.unref(handleInput),
onFocus,
onClear,
onPressEnter
}, vue.createSlots({
extra: vue.withCtx(() => {
var _a2;
return [
!vue.unref(disabled2) && !vue.unref(readonly2) ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: (_a2 = inBoxRef.value) == null ? void 0 : _a2.$el,
"option-title": props.optionTitle,
onChange: handlePanelChange,
onCancel: handleCancel,
onConfirm: handleConfirm
}, {
shortcut: vue.withCtx(({ setValue: panelSetValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue: panelSetValue,
emitChange
})
]),
_: 3
/* FORWARDED */
}, 8, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
];
}),
_: 2
/* DYNAMIC */
}, [
!isResponding.value || !tempInputValue.value ? {
name: "suffix",
fn: vue.withCtx(() => [
vue.createVNode(vue.unref(IconTime))
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "class", "disabled", "clearable", "placeholder", "input-id", "max-length", "readonly", "onInput"])
];
}),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
);
};
}
});
const _hoisted_1$i = { class: "o-time-range-panel-body" };
const _hoisted_2$b = { class: "o-time-range-panel-side o-time-panel-content" };
const _hoisted_3$6 = { class: "o-time-range-panel-side o-time-panel-content" };
const _hoisted_4$6 = { class: "o-time-panel-footer" };
const _hoisted_5$5 = { class: "o-time-panel-shortcut" };
const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
__name: "TimeRangePanel",
props: {
target: {},
optionTitle: {}
},
emits: ["change", "confirm"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const timePickerCtx = vue.inject(timePickerInjectKey);
const {
size: size2,
transition: transition2,
popupPosition: popupPosition2,
popupWrapper: popupWrapper2,
format: format2,
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
minTime: minTime2,
maxTime: maxTime2,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2
} = timePickerCtx;
const defaultOptions = useTimePickerOptions({
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
disabledHours: disabledHours2,
disabledMinutes: disabledMinutes2,
disabledSeconds: disabledSeconds2,
minTime: minTime2,
maxTime: maxTime2,
selectedHour: vue.ref(null),
selectedMinute: vue.ref(null)
});
const { t } = useI18n();
const visible = vue.ref(false);
const startTime = vue.ref();
const endTime = vue.ref();
const startColumnsRef = vue.ref();
const endColumnsRef = vue.ref();
const popupRef = vue.ref();
const hasBothTimes = vue.computed(() => !!startTime.value && !!endTime.value);
const { maxStartTime, minEndTime } = useTimeRangeConstraints({
startTime,
endTime,
format: format2,
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2
});
const computeDefaultEnd = (startStr) => {
const startDayjs = dayjs(TIME_PREFIX + startStr);
const endTarget = startDayjs.add(1, "hour");
return findNearestTime({
hourOptions: defaultOptions.hourOptions.value,
minuteOptions: defaultOptions.minuteOptions.value,
secondOptions: defaultOptions.secondOptions.value,
minTime: startStr,
maxTime: vue.toValue(maxTime2),
disabledHours: vue.toValue(disabledHours2),
disabledMinutes: vue.toValue(disabledMinutes2),
disabledSeconds: vue.toValue(disabledSeconds2),
target: { hour: endTarget.hour(), minute: endTarget.minute(), second: endTarget.second() },
format: format2.value
});
};
const open = async (start, end) => {
var _a, _b, _c, _d;
if (visible.value) return;
visible.value = true;
if (!start && !end) {
const now = dayjs();
const defaultStart = findNearestTime({
hourOptions: defaultOptions.hourOptions.value,
minuteOptions: defaultOptions.minuteOptions.value,
secondOptions: defaultOptions.secondOptions.value,
minTime: vue.toValue(minTime2),
maxTime: vue.toValue(maxTime2),
disabledHours: vue.toValue(disabledHours2),
disabledMinutes: vue.toValue(disabledMinutes2),
disabledSeconds: vue.toValue(disabledSeconds2),
target: { hour: now.hour(), minute: now.minute(), second: now.second() },
format: format2.value
});
startTime.value = defaultStart;
endTime.value = defaultStart ? computeDefaultEnd(defaultStart) : void 0;
} else {
startTime.value = start;
endTime.value = end;
}
await core.until(startColumnsRef).toBeTruthy();
await vue.nextTick();
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(startTime.value);
(_b = startColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(false);
(_c = endColumnsRef.value) == null ? void 0 : _c.setValue(endTime.value);
(_d = endColumnsRef.value) == null ? void 0 : _d.scrollAllToSelected(false);
};
const close2 = () => {
visible.value = false;
};
const handleStartChange = (val) => {
var _a, _b;
startTime.value = val;
if (endTime.value && minEndTime.value && isTimeBefore(endTime.value, minEndTime.value)) {
endTime.value = minEndTime.value;
(_a = endColumnsRef.value) == null ? void 0 : _a.setValue(endTime.value);
(_b = endColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
emits("change", startTime.value, endTime.value);
};
const handleEndChange = (val) => {
var _a, _b;
endTime.value = val;
if (startTime.value && maxStartTime.value && isTimeAfter(startTime.value, maxStartTime.value)) {
startTime.value = maxStartTime.value;
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(startTime.value);
(_b = startColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
emits("change", startTime.value, endTime.value);
};
const handleConfirm = () => {
emits("confirm", startTime.value, endTime.value);
close2();
};
const shortcutSetValue = (start, end) => {
var _a, _b, _c, _d;
if (start !== void 0) {
startTime.value = start;
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(start);
(_b = startColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
if (end !== void 0) {
endTime.value = end;
(_c = endColumnsRef.value) == null ? void 0 : _c.setValue(end);
(_d = endColumnsRef.value) == null ? void 0 : _d.scrollAllToSelected(true);
}
};
const shortcutEmitChange = () => emits("change", startTime.value, endTime.value);
const setStartValue = (val) => {
var _a;
startTime.value = val;
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(val);
};
const setEndValue = (val) => {
var _a;
endTime.value = val;
(_a = endColumnsRef.value) == null ? void 0 : _a.setValue(val);
};
__expose({
getPopupEl: () => popupRef.value,
open,
close: close2,
setStartValue,
setEndValue
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(OPopup), {
visible: visible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
class: vue.normalizeClass(["o-time-panel", `o-time-panel-${vue.unref(size2)}`, "o-time-range-panel"]),
"hide-close": "",
target: props.target,
transition: vue.unref(transition2),
position: vue.unref(popupPosition2),
wrapper: vue.unref(popupWrapper2),
trigger: "none",
offset: 4,
"adjust-min-width": false,
"adjust-width": false
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "popupRef",
ref: popupRef
},
[
vue.createElementVNode("div", _hoisted_1$i, [
vue.createElementVNode("div", _hoisted_2$b, [
vue.createVNode(_sfc_main$q, {
ref_key: "startColumnsRef",
ref: startColumnsRef,
"max-time": vue.unref(maxStartTime),
onChange: handleStartChange
}, null, 8, ["max-time"])
]),
vue.createElementVNode("div", _hoisted_3$6, [
vue.createVNode(_sfc_main$q, {
ref_key: "endColumnsRef",
ref: endColumnsRef,
"min-time": vue.unref(minEndTime),
onChange: handleEndChange
}, null, 8, ["min-time"])
])
]),
vue.createVNode(vue.unref(ODivider), { class: "o-time-panel-divider" }),
vue.createElementVNode("div", _hoisted_4$6, [
vue.createElementVNode("span", _hoisted_5$5, [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue: shortcutSetValue,
emitChange: shortcutEmitChange
})
]),
vue.createVNode(vue.unref(OButton), {
round: "pill",
disabled: !hasBothTimes.value,
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"])
])
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "class", "target", "transition", "position", "wrapper"])
]),
_: 3
/* FORWARDED */
});
};
}
});
const _hoisted_1$h = { class: "o_input-suffix-icon" };
const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
__name: "OTimeRangePicker",
props: /* @__PURE__ */ vue.mergeModels(timeRangePickerProps, {
"start": { default: void 0, required: true },
"startModifiers": {},
"end": { default: void 0, required: true },
"endModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:start", "update:end"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const start = vue.useModel(__props, "start");
const end = vue.useModel(__props, "end");
const tempStart = vue.ref(start.value ?? "");
vue.watch(start, (newVal) => tempStart.value = newVal ?? "");
const tempEnd = vue.ref(end.value ?? "");
vue.watch(end, (newVal) => tempEnd.value = newVal ?? "");
const startFocused = vue.ref(false);
const endFocused = vue.ref(false);
const focused = vue.computed(() => startFocused.value || endFocused.value);
vue.watch(focused, (newVal, oldVal) => {
if (!newVal && oldVal) {
emits("blur");
}
});
const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly && (!!tempStart.value || !!tempEnd.value));
const { t } = useI18n();
const inBoxRef = vue.ref();
const startInputRef = vue.ref();
const endInputRef = vue.ref();
const panelRef = vue.ref();
const { maxStartTime, minEndTime } = useTimeRangeConstraints({
startTime: tempStart,
endTime: tempEnd,
format: vue.toRef(props, "format"),
hourStep: vue.toRef(props, "hourStep"),
minuteStep: vue.toRef(props, "minuteStep"),
secondStep: vue.toRef(props, "secondStep")
});
const { isStartValid, isEndValid } = useTimeRangeInputValidation({
tempStart,
tempEnd,
format: vue.toRef(props, "format"),
hourStep: vue.toRef(props, "hourStep"),
minuteStep: vue.toRef(props, "minuteStep"),
secondStep: vue.toRef(props, "secondStep"),
minTime: vue.toRef(props, "minTime"),
maxTime: vue.toRef(props, "maxTime"),
maxStartTime,
minEndTime,
disabledHours: vue.toRef(props, "disabledHours"),
disabledMinutes: vue.toRef(props, "disabledMinutes"),
disabledSeconds: vue.toRef(props, "disabledSeconds")
});
vue.watch(
tempStart,
core.useDebounceFn(async () => {
var _a;
await vue.nextTick();
if (isStartValid.value && tempStart.value) (_a = panelRef.value) == null ? void 0 : _a.setStartValue(tempStart.value);
}, 300)
);
vue.watch(
tempEnd,
core.useDebounceFn(async () => {
var _a;
await vue.nextTick();
if (isEndValid.value && tempEnd.value) (_a = panelRef.value) == null ? void 0 : _a.setEndValue(tempEnd.value);
}, 300)
);
const { effectiveColor: color2, inputId: startInputId, notifyChange } = useFormField(props, emits);
let skipOpenPanel = false;
const openPanel = () => {
var _a;
if (props.disabled || props.readonly) return;
(_a = panelRef.value) == null ? void 0 : _a.open(tempStart.value || void 0, tempEnd.value || void 0);
};
const blurAndClose = () => {
var _a, _b, _c;
(_a = panelRef.value) == null ? void 0 : _a.close();
startFocused.value = false;
endFocused.value = false;
(_b = startInputRef.value) == null ? void 0 : _b.blur();
(_c = endInputRef.value) == null ? void 0 : _c.blur();
};
const cancelEdit = () => {
tempStart.value = start.value ?? "";
tempEnd.value = end.value ?? "";
blurAndClose();
};
useClickOutside({
targets: [() => {
var _a;
return (_a = inBoxRef.value) == null ? void 0 : _a.$el;
}, () => {
var _a;
return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
}],
onOutside: cancelEdit
});
const onFocus = (e, rangeType) => {
if (!focused.value) {
emits("focus", e);
}
if (rangeType === "start") {
startFocused.value = true;
} else {
endFocused.value = true;
}
if (!skipOpenPanel) openPanel();
skipOpenPanel = false;
};
let prevRangeValue = { start: start.value, end: end.value };
let internalRangeChangePending = false;
vue.watch([start, end], ([_newStart, _newEnd], [oldStart, oldEnd]) => {
if (internalRangeChangePending) {
internalRangeChangePending = false;
} else {
prevRangeValue = { start: oldStart, end: oldEnd };
}
});
const onChange = () => {
const empty = !tempStart.value && !tempEnd.value;
const full = tempStart.value && tempEnd.value;
if (empty || full) {
const oldVal = prevRangeValue;
internalRangeChangePending = true;
start.value = tempStart.value;
end.value = tempEnd.value;
prevRangeValue = { start: start.value, end: end.value };
emits("change", prevRangeValue, oldVal);
notifyChange();
}
};
const confirmAndClose = () => {
onChange();
blurAndClose();
emits("pressEnter");
};
const onPanelChange = (startVal, endVal) => {
tempStart.value = startVal ?? "";
tempEnd.value = endVal ?? "";
};
const onPanelConfirm = (startVal, endVal) => {
tempStart.value = startVal ?? "";
tempEnd.value = endVal ?? "";
onChange();
startFocused.value = false;
endFocused.value = false;
};
const switchFocusTo = (targetRange) => {
const targetRef = targetRange === "start" ? startInputRef : endInputRef;
startFocused.value = targetRange === "start";
endFocused.value = targetRange === "end";
requestAnimationFrame(() => {
var _a;
return (_a = targetRef.value) == null ? void 0 : _a.focus();
});
};
const isCursorAtEdge = (inputRef, position) => {
var _a;
const inputEl = (_a = inputRef.value) == null ? void 0 : _a.inputEl;
if (!inputEl) return false;
const { selectionStart, selectionEnd, value } = inputEl;
return selectionStart === selectionEnd && (position === "start" ? selectionStart === 0 : selectionStart === value.length);
};
const handleTab = (e, rangeType) => {
const toEnd = rangeType === "start" && !e.shiftKey;
const toStart = rangeType === "end" && e.shiftKey;
if (toEnd || toStart) {
e.preventDefault();
switchFocusTo(
toEnd ? "end" : "start"
/* s */
);
} else {
const bothValid = isStartValid.value && isEndValid.value;
if (bothValid) confirmAndClose();
else cancelEdit();
}
};
const handleArrowRight = (e, rangeType) => {
if (rangeType === "start" && isCursorAtEdge(startInputRef, "end")) {
e.preventDefault();
switchFocusTo(
"end"
/* e */
);
}
};
const handleArrowLeft = (e, rangeType) => {
if (rangeType === "end" && isCursorAtEdge(endInputRef, "start")) {
e.preventDefault();
switchFocusTo(
"start"
/* s */
);
}
};
const keyHandlers = {
[Tab.key]: handleTab,
[ArrowRight.key]: handleArrowRight,
[ArrowLeft.key]: handleArrowLeft
};
const onKeydown = (e, rangeType) => {
var _a;
(_a = keyHandlers[e.key]) == null ? void 0 : _a.call(keyHandlers, e, rangeType);
};
const confirmOrSwitchFocus = (rangeType) => {
const bothValid = isStartValid.value && isEndValid.value;
if (rangeType === "start") {
if (!tempEnd.value) {
switchFocusTo(
"end"
/* e */
);
} else if (bothValid) {
confirmAndClose();
}
} else {
if (!tempStart.value) {
switchFocusTo(
"start"
/* s */
);
} else if (bothValid) {
confirmAndClose();
}
}
};
const onPressEnter = (rangeType) => {
if (rangeType === "start" && !isStartValid.value) {
cancelEdit();
return;
}
if (rangeType === "end" && !isEndValid.value) {
cancelEdit();
return;
}
confirmOrSwitchFocus(rangeType);
};
const onClear = () => {
const oldVal = prevRangeValue;
internalRangeChangePending = true;
start.value = void 0;
end.value = void 0;
tempStart.value = "";
tempEnd.value = "";
prevRangeValue = { start: void 0, end: void 0 };
emits("clear");
emits("change", prevRangeValue, oldVal);
notifyChange();
blurAndClose();
};
vue.provide(timePickerInjectKey, {
...vue.toRefs(props),
isRange: vue.ref(true)
});
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
if (!open) skipOpenPanel = true;
(_a = startInputRef.value) == null ? void 0 : _a.focus();
},
/**
* @zh-CN 使输入框失去焦点，校验合法则应用当前值，否则回滚
* @en-US Blur the input. Applies the current value if valid, otherwise rolls back.
*/
blur: () => {
if (isStartValid.value && isEndValid.value) {
confirmAndClose();
} else {
cancelEdit();
}
},
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => onClear()
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$1e), vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(color2),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: !!focused.value
}, {
class: ["o-time-picker", "o-time-range-picker", { "o_input-clearable": isClearable.value }, "o-input"]
}), vue.createSlots({
default: vue.withCtx(() => {
var _a, _b;
return [
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "startInputRef",
ref: startInputRef,
modelValue: tempStart.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tempStart.value = $event),
class: vue.normalizeClass(["o-input-wrap o-range-start-input-wrap", { "o-input-wrap-focused": startFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
"input-id": vue.unref(startInputId),
placeholder: props.placeholderStart ?? vue.unref(t)("timePicker.startTime"),
"max-length": ((_a = props.format) == null ? void 0 : _a.length) ?? 8,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: _cache[1] || (_cache[1] = (e) => onFocus(
e,
"start"
/* s */
)),
onKeydown: _cache[2] || (_cache[2] = (e) => onKeydown(
e,
"start"
/* s */
)),
onPressEnter: _cache[3] || (_cache[3] = () => onPressEnter(
"start"
/* s */
))
}, {
extra: vue.withCtx(() => {
var _a2;
return [
!_ctx.disabled && !_ctx.readonly ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: (_a2 = inBoxRef.value) == null ? void 0 : _a2.$el,
"option-title": props.optionTitle,
onChange: onPanelChange,
onConfirm: onPanelConfirm
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
];
}),
_: 3
/* FORWARDED */
}, 8, ["modelValue", "class", "disabled", "readonly", "input-id", "placeholder", "max-length"]),
_cache[10] || (_cache[10] = vue.createElementVNode(
"div",
{ class: "o-time-range-picker-divider" },
"-",
-1
/* CACHED */
)),
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "endInputRef",
ref: endInputRef,
modelValue: tempEnd.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => tempEnd.value = $event),
class: vue.normalizeClass(["o-input-wrap o-range-end-input-wrap", { "o-input-wrap-focused": endFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderEnd ?? vue.unref(t)("timePicker.endTime"),
"max-length": ((_b = props.format) == null ? void 0 : _b.length) ?? 8,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: _cache[5] || (_cache[5] = (e) => onFocus(
e,
"end"
/* e */
)),
onKeydown: _cache[6] || (_cache[6] = (e) => onKeydown(
e,
"end"
/* e */
)),
onPressEnter: _cache[7] || (_cache[7] = () => onPressEnter(
"end"
/* e */
))
}, null, 8, ["modelValue", "class", "disabled", "readonly", "placeholder", "max-length"]),
vue.createElementVNode(
"div",
{
class: "o_input-suffix",
onMousedown: _cache[9] || (_cache[9] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createElementVNode("span", _hoisted_1$h, [
vue.createVNode(vue.unref(IconTime))
]),
isClearable.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: "o_input-clear",
onClick: onClear,
onMousedown: _cache[8] || (_cache[8] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createVNode(vue.unref(IconClose), { class: "o_input-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)
];
}),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]), 1040, ["class"]);
};
}
});
const OTimePicker = Object.assign(_sfc_main$o, {
install(app) {
app.component("OTimePicker", _sfc_main$o);
}
});
const OTimeRangePicker = Object.assign(_sfc_main$m, {
install(app) {
app.component("OTimeRangePicker", _sfc_main$m);
}
});
const { placeholder: placeholder$1, inputId, disabled: disabled$1, readonly, size, round: round$1, color: color$1, variant: variant$1 } = inputProps;
const { noResponsive, optionTitle } = selectProps;
const basePickerProps = {
placeholder: placeholder$1,
inputId,
disabled: disabled$1,
readonly,
size,
round: round$1,
color: color$1,
variant: variant$1,
noResponsive,
optionTitle
};
const popupPickerProps = {
/**
* @zh-CN 选项触发方式
* @en-US Option trigger method.
* @default 'click'
*/
trigger: {
type: String,
default: "click"
},
/**
* @zh-CN 弹出框位置
* @en-US Popup position.
* @default 'bl'
*/
popupPosition: {
type: String,
default: "bl"
},
/**
* @zh-CN 弹出框挂载容器
* @en-US Popup wrapper.
* @default 'body'
*/
popupWrapper: {
type: [String, Object],
default: "body"
},
/**
* @zh-CN 是否在结束选择时，卸载所有选项
* @en-US Whether to unmount all options when ending the selection.
* @default true
*/
unmountOnHide: {
type: Boolean,
default: true
},
/**
* @zh-CN 过渡名称
* @en-US Transition name.
*/
transition: {
type: String
}
};
const dateConstraintProps = {
/**
* @zh-CN 禁用日期的判断函数
* @en-US Function to specify the dates that cannot be selected.
*/
disabledDate: {
type: Function,
default: void 0
},
/**
* @zh-CN 禁用月份的判断函数，month 为 0-indexed（0=一月，11=十二月）
* @en-US Function to specify the months that cannot be selected. month is 0-indexed (0=January, 11=December).
*/
disabledMonth: {
type: Function,
default: void 0
},
/**
* @zh-CN 禁用年份的判断函数
* @en-US Function to specify the years that cannot be selected.
*/
disabledYear: {
type: Function,
default: void 0
},
/**
* @zh-CN 最小可选日期（Date、格式字符串或时间戳）
* @en-US Minimum selectable date (Date object, formatted string or timestamp).
*/
minDate: {
type: [Date, String, Number],
default: void 0
},
/**
* @zh-CN 最大可选日期（Date、格式字符串或时间戳）
* @en-US Maximum selectable date (Date object, formatted string or timestamp).
*/
maxDate: {
type: [Date, String, Number],
default: void 0
},
/**
* @zh-CN 每周起始日，0=周日，1=周一，...，6=周六
* @en-US Day start of week. 0=Sunday, 1=Monday, ..., 6=Saturday.
* @default 1
*/
dayStartOfWeek: {
type: Number,
default: 1
}
};
const { hourStep, minuteStep, secondStep, disabledHours, disabledMinutes, disabledSeconds, minTime, maxTime } = timePickerProps;
const timeConstraintProps = {
hourStep,
minuteStep,
secondStep,
disabledHours,
disabledMinutes,
disabledSeconds,
minTime,
maxTime
};
const formatProps = {
/**
* @zh-CN 输入和显示日期格式，支持dayjs的format允许的值
* @en-US Input and display date format. Support valid dayjs format param.
* @default 'YYYY-MM-DD'
*/
format: {
type: String,
default: "YYYY/MM/DD"
},
/**
* @zh-CN 绑定值日期格式，支持dayjs的format允许的值, 'x' 代表时间戳
* @en-US Bound Date format. Support valid dayjs format param. 'x' as timestamp
*/
valueFormat: {
type: String,
default: "x"
},
/**
* @zh-CN 支持快速清除
* @en-US Support quick clearing.
*/
clearable: {
type: Boolean
}
};
const yearPickerProps = {
...basePickerProps,
...popupPickerProps,
...formatProps,
format: {
type: String,
default: "YYYY"
},
disabledYear: dateConstraintProps.disabledYear,
/**
* @zh-CN 当返回值只有年、月份或日期时，补全细节时间戳的默认值
* @en-US When the return value only contains year, month, or date, populate the timestamp with default values for the missing time components.
*/
defaultValue: {
type: Date,
default: () => /* @__PURE__ */ new Date("1970/01/01 00:00:00")
}
};
const monthPickerProps = {
...yearPickerProps,
format: {
type: String,
default: "YYYY/MM"
},
disabledMonth: dateConstraintProps.disabledMonth,
disabledYear: dateConstraintProps.disabledYear
};
const datePickerProps = {
...monthPickerProps,
format: {
type: String,
default: "YYYY/MM/DD"
},
disabledDate: dateConstraintProps.disabledDate,
minDate: dateConstraintProps.minDate,
maxDate: dateConstraintProps.maxDate,
dayStartOfWeek: dateConstraintProps.dayStartOfWeek
};
const dateTimePickerProps = {
...datePickerProps,
...timeConstraintProps,
format: { type: String, default: "YYYY/MM/DD HH:mm:ss" }
};
const rangeExtraProps = {
/**
* @zh-CN 开始日期占位文本
* @en-US Placeholder for start date input.
*/
placeholderStart: {
type: String,
default: void 0
},
/**
* @zh-CN 结束日期占位文本
* @en-US Placeholder for end date input.
*/
placeholderEnd: {
type: String,
default: void 0
}
};
const yearRangePickerProps = {
...yearPickerProps,
defaultValue: {
type: Array,
default: () => [/* @__PURE__ */ new Date("1970/01/01 00:00:00"), /* @__PURE__ */ new Date("1970/12/31 23:59:59")]
},
...rangeExtraProps
};
const monthRangePickerProps = {
...monthPickerProps,
defaultValue: {
type: Array,
default: () => [/* @__PURE__ */ new Date("1970/01/01 00:00:00"), /* @__PURE__ */ new Date("1970/12/31 23:59:59")]
},
...rangeExtraProps
};
const dateRangePickerProps = {
...datePickerProps,
/**
* @zh-CN 当返回值只有年、月份或日期时，补全细节时间戳的默认值
* @en-US When the return value only contains year, month, or date, populate the timestamp with default values for the missing time components.
*/
defaultValue: {
type: Array,
default: () => [/* @__PURE__ */ new Date("1970/01/01 00:00:00"), /* @__PURE__ */ new Date("1970/12/31 23:59:59")]
},
...rangeExtraProps
};
const dateTimeRangePickerProps = {
...dateTimePickerProps,
defaultValue: {
type: Array,
default: () => [/* @__PURE__ */ new Date("1970/01/01 00:00:00"), /* @__PURE__ */ new Date("1970/12/31 23:59:59")]
},
...rangeExtraProps,
format: { type: String, default: "YYYY/MM/DD HH:mm:ss" }
};
const datePickerInjectKey = Symbol("o-date-picker");
function computeRangeState({ cell, unit, rangeStart, rangeEnd, anchorDate, hoverDate }) {
if (rangeStart && rangeEnd) {
return {
isRangeStart: cell.isSame(rangeStart, unit),
isRangeEnd: cell.isSame(rangeEnd, unit),
isInRange: cell.isAfter(rangeStart, unit) && cell.isBefore(rangeEnd, unit)
};
}
if (anchorDate) {
if (hoverDate) {
const [effStart, effEnd] = hoverDate.isBefore(anchorDate, unit) ? [hoverDate, anchorDate] : [anchorDate, hoverDate];
return {
isRangeStart: cell.isSame(effStart, unit),
isRangeEnd: cell.isSame(effEnd, unit),
isInRange: cell.isAfter(effStart, unit) && cell.isBefore(effEnd, unit)
};
}
return { isRangeStart: cell.isSame(anchorDate, unit), isRangeEnd: false, isInRange: false };
}
return { isRangeStart: false, isRangeEnd: false, isInRange: false };
}
dayjs.extend(customParseFormat);
const YEAR_VIEW_STEP = 10;
function parseValue(value) {
if (isNil(value) || value === "") return null;
if (typeof value === "number" || value instanceof Date) {
const _d = dayjs(value);
return _d.isValid() ? _d : null;
}
const d = dayjs(value);
return d.isValid() ? d : null;
}
function isMonthDisabled(year, month, options) {
const { disabledMonth, minDate, maxDate } = options;
const d = dayjs().year(year).month(month);
if (minDate && d.endOf("month").isBefore(minDate, "day")) return true;
if (maxDate && d.startOf("month").isAfter(maxDate, "day")) return true;
if (disabledMonth && disabledMonth({ date: d.toDate(), year, month })) return true;
return false;
}
function isYearDisabled(year, options) {
const { disabledYear, minDate, maxDate } = options;
if (minDate && year < minDate.year()) return true;
if (maxDate && year > maxDate.year()) return true;
if (disabledYear && disabledYear({ date: dayjs().year(year).toDate(), year })) return true;
return false;
}
function useTimestampValue(modelValue2, valueFormat) {
return vue.computed({
get() {
var _a;
return (_a = parseValue(modelValue2.value)) == null ? void 0 : _a.valueOf();
},
set(ts) {
if (isNil(ts)) {
modelValue2.value = void 0;
return;
}
if (vue.toValue(valueFormat) === "x") {
modelValue2.value = ts;
} else {
modelValue2.value = dayjs(ts).format(vue.toValue(valueFormat));
}
}
});
}
function usePickerBase(opts) {
const { props, mode, modelValue: modelValue2, emit } = opts;
const propsRefs = vue.toRefs(props);
const formField = useFormField(props, emit);
const timestampValue = useTimestampValue(modelValue2, propsRefs.valueFormat);
const modeRef = vue.computed(() => mode);
vue.provide(datePickerInjectKey, {
...propsRefs,
mode: modeRef,
color: formField.effectiveColor,
disabledMonth: propsRefs.disabledMonth,
disabledYear: propsRefs.disabledYear
});
return { timestampValue, ...formField };
}
const NO_RANGE = { isRangeStart: false, isRangeEnd: false, isInRange: false };
function resolveRangeDeps({ rangeStart, rangeEnd, anchorDate, hoverDate }) {
return {
rangeStart: (rangeStart == null ? void 0 : rangeStart.value) || null,
rangeEnd: (rangeEnd == null ? void 0 : rangeEnd.value) || null,
anchorDate: (anchorDate == null ? void 0 : anchorDate.value) || null,
hoverDate: (hoverDate == null ? void 0 : hoverDate.value) || null
};
}
function computeIsSelected(date, selectedValue) {
if (isArray(selectedValue)) {
return selectedValue.some((v) => v && date.isSame(v));
}
return selectedValue ? date.isSame(selectedValue, "day") : false;
}
function computeIsDisabled(date, { minDate, maxDate, disabledDateFn }) {
if (minDate && date.isBefore(minDate, "day")) return true;
if (maxDate && date.isAfter(maxDate, "day")) return true;
if (disabledDateFn == null ? void 0 : disabledDateFn({ date: date.toDate(), year: date.year(), month: date.month(), day: date.date() })) return true;
return false;
}
function useCalendar(params) {
const { displayYear, displayMonth, selectedDate, dayStartOfWeek, disabledDate, minDate, maxDate, rangeStart, rangeEnd, anchorDate, hoverDate } = params;
const today = vue.ref(null);
vue.onMounted(() => {
today.value = dayjs();
});
const rows = vue.computed(() => {
const year = displayYear.value;
const month = displayMonth.value;
const firstDay = dayjs().year(year).month(month).date(1).startOf("day");
const daysInMonth = firstDay.daysInMonth();
const startDow = firstDay.day();
const leadingBlanks = (startDow - dayStartOfWeek.value + 7) % 7;
const todayVal = today.value;
const cells = [];
const prevMonth = firstDay.subtract(1, "month");
const prevDays = prevMonth.daysInMonth();
for (let i = leadingBlanks - 1; i >= 0; i--) {
const d = prevMonth.date(prevDays - i);
cells.push(makeCell(d, false, todayVal));
}
for (let i = 1; i <= daysInMonth; i++) {
const d = firstDay.date(i);
cells.push(makeCell(d, true, todayVal));
}
const remaining = 42 - cells.length;
const nextMonth = firstDay.add(1, "month");
for (let i = 1; i <= remaining; i++) {
const d = nextMonth.date(i);
cells.push(makeCell(d, false, todayVal));
}
const result = [];
for (let r = 0; r < 6; r++) {
result.push(cells.slice(r * 7, r * 7 + 7));
}
return result;
});
function makeCell(date, isCurrentMonth, _today) {
const isToday = _today ? date.isSame(_today, "day") : false;
const isSelected = computeIsSelected(date, vue.toValue(selectedDate));
const isDisabled = computeIsDisabled(date, {
minDate: (minDate == null ? void 0 : minDate.value) || null,
maxDate: (maxDate == null ? void 0 : maxDate.value) || null,
disabledDateFn: disabledDate == null ? void 0 : disabledDate.value
});
const rangeState = isCurrentMonth ? computeRangeState({ cell: date, unit: "day", ...resolveRangeDeps({ rangeStart, rangeEnd, anchorDate, hoverDate }) }) : NO_RANGE;
return { date, day: date.date(), isCurrentMonth, isToday, isSelected, isDisabled, ...rangeState };
}
const weekDayHeaders = vue.computed(() => {
const base = [0, 1, 2, 3, 4, 5, 6];
const offset = dayStartOfWeek.value;
return [...base.slice(offset), ...base.slice(0, offset)];
});
return { rows, weekDayHeaders };
}
const _hoisted_1$g = { class: "o-date-panel-header" };
const _hoisted_2$a = { class: "o-date-panel-header-label" };
const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
__name: "DatePanelHeader",
props: /* @__PURE__ */ vue.mergeModels({
min: {},
max: {},
hideLeftNav: { type: Boolean },
hideRightNav: { type: Boolean }
}, {
"currentView": { required: true },
"currentViewModifiers": {},
"year": { required: true },
"yearModifiers": {},
"month": { required: true },
"monthModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["prev-year", "next-year", "prev-month", "next-month", "click-month", "click-year"], ["update:currentView", "update:year", "update:month"]),
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const currentView = vue.useModel(__props, "currentView");
const year = vue.useModel(__props, "year");
const month = vue.useModel(__props, "month");
const { t } = useI18n();
const datePickerCtx = vue.inject(datePickerInjectKey);
const current = vue.computed(() => dayjs().year(year.value).month(month.value));
const decadeStart = vue.computed(() => Math.floor(year.value / 10) * 10);
const yearLabel = vue.computed(() => currentView.value === "year" ? `${decadeStart.value}-${decadeStart.value + 10}` : `${year.value}${t("datePicker.year")}`);
const yearNavStep = vue.computed(() => currentView.value === "year" ? YEAR_VIEW_STEP : 1);
const hidePrevYear = vue.computed(() => props.min && current.value.isSame(props.min, "year"));
const hideNextYear = vue.computed(() => props.max && current.value.isSame(props.max, "year"));
const hidePrevMonth = vue.computed(() => props.min && current.value.isSame(props.min, "month"));
const hideNextMonth = vue.computed(() => props.max && current.value.isSame(props.max, "month"));
const handlePrevYearClick = () => {
if (!hidePrevYear.value) {
year.value -= yearNavStep.value;
emits("prev-year");
}
};
const handleNextYearClick = () => {
if (!hideNextYear.value) {
year.value += yearNavStep.value;
emits("next-year");
}
};
const handlePrevMonthClick = () => {
if (!hidePrevMonth.value) {
if (month.value === 0) {
year.value -= 1;
month.value = 11;
} else {
month.value -= 1;
}
emits("prev-month");
}
};
const handleNextMonthClick = () => {
if (!hideNextMonth.value) {
if (month.value === 11) {
year.value += 1;
month.value = 0;
} else {
month.value += 1;
}
emits("next-month");
}
};
const handleClickYear = () => {
currentView.value = "year";
emits("click-year");
};
const handleClickMonth = () => {
currentView.value = "month";
emits("click-month");
};
return (_ctx, _cache) => {
var _a, _b, _c, _d, _e, _f;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-date-panel-header-direction", { hidden: __props.hideLeftNav }])
},
[
vue.createVNode(vue.unref(OButton), {
round: (_a = vue.unref(datePickerCtx).round) == null ? void 0 : _a.value,
variant: "solid",
class: vue.normalizeClass(["o-date-panel-btn", "o-date-panel-header-btn", { hidden: hidePrevYear.value }]),
icon: vue.unref(IconCalendarPrevYear),
onClick: handlePrevYearClick
}, null, 8, ["round", "class", "icon"]),
currentView.value.startsWith("date") ? (vue.openBlock(), vue.createBlock(vue.unref(OButton), {
key: 0,
round: (_b = vue.unref(datePickerCtx).round) == null ? void 0 : _b.value,
variant: "solid",
class: vue.normalizeClass(["o-date-panel-btn", "o-date-panel-header-btn", { hidden: hidePrevMonth.value }]),
icon: vue.unref(IconCalendarPrevMonth),
onClick: handlePrevMonthClick
}, null, 8, ["round", "class", "icon"])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
),
vue.createElementVNode("div", _hoisted_2$a, [
vue.createVNode(vue.unref(OButton), {
round: (_c = vue.unref(datePickerCtx).round) == null ? void 0 : _c.value,
variant: "solid",
class: "o-date-panel-btn o-date-panel-header-btn o-date-panel-header-label-btn",
onClick: handleClickYear
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(yearLabel.value),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["round"]),
currentView.value.startsWith("date") ? (vue.openBlock(), vue.createBlock(vue.unref(OButton), {
key: 0,
round: (_d = vue.unref(datePickerCtx).round) == null ? void 0 : _d.value,
variant: "solid",
class: "o-date-panel-btn o-date-panel-header-btn o-date-panel-header-label-btn",
onClick: handleClickMonth
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)(`datePicker.months.${month.value}`)),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["round"])) : vue.createCommentVNode("v-if", true)
]),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-date-panel-header-direction", { hidden: __props.hideRightNav }])
},
[
currentView.value.startsWith("date") ? (vue.openBlock(), vue.createBlock(vue.unref(OButton), {
key: 0,
round: (_e = vue.unref(datePickerCtx).round) == null ? void 0 : _e.value,
variant: "solid",
class: vue.normalizeClass(["o-date-panel-btn", "o-date-panel-header-btn", { hidden: hideNextMonth.value }]),
icon: vue.unref(IconCalendarNextMonth),
onClick: handleNextMonthClick
}, null, 8, ["round", "class", "icon"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(OButton), {
round: (_f = vue.unref(datePickerCtx).round) == null ? void 0 : _f.value,
variant: "solid",
class: vue.normalizeClass(["o-date-panel-btn", "o-date-panel-header-btn", { hidden: hideNextYear.value }]),
icon: vue.unref(IconCalendarNextYear),
onClick: handleNextYearClick
}, null, 8, ["round", "class", "icon"])
],
2
/* CLASS */
)
]);
};
}
});
const _hoisted_1$f = ["onClick", "onMouseover"];
const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
__name: "DatePanelCalendar",
props: {
rows: {},
weekDayHeaders: {}
},
emits: ["select", "hover", "leave"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const { t } = useI18n();
const datePickerCtx = vue.inject(datePickerInjectKey);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: "o-date-panel-calendar",
onMouseleave: _cache[0] || (_cache[0] = ($event) => emits("leave"))
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(props.weekDayHeaders, (dow) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
key: dow,
class: "o-date-panel-cell o-date-panel-weekday"
},
vue.toDisplayString(vue.unref(t)(`datePicker.weekdays.${dow}`)),
1
/* TEXT */
);
}),
128
/* KEYED_FRAGMENT */
)),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(props.rows, (row, ri) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: ri },
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(row, (cell) => {
var _a;
return vue.openBlock(), vue.createElementBlock("div", {
key: cell.date.valueOf(),
class: vue.normalizeClass(["o-date-panel-cell", {
"is-current-month": cell.isCurrentMonth,
"is-current": cell.isToday,
"is-selected": cell.isSelected,
"is-disabled": cell.isDisabled,
"is-other-period": !cell.isCurrentMonth,
"is-range-start": cell.isRangeStart,
"is-range-end": cell.isRangeEnd,
"is-in-range": cell.isInRange
}]),
onClick: ($event) => !cell.isDisabled && cell.isCurrentMonth && emits("select", cell.date),
onMouseover: ($event) => !cell.isDisabled && cell.isCurrentMonth && emits("hover", cell.date)
}, [
vue.createVNode(vue.unref(OButton), {
round: (_a = vue.unref(datePickerCtx).round) == null ? void 0 : _a.value,
variant: "solid",
class: "o-date-panel-btn",
disabled: cell.isDisabled || !cell.isCurrentMonth
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(cell.day),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["round", "disabled"])
], 42, _hoisted_1$f);
}),
128
/* KEYED_FRAGMENT */
))
],
64
/* STABLE_FRAGMENT */
);
}),
128
/* KEYED_FRAGMENT */
))
],
32
/* NEED_HYDRATION */
);
};
}
});
const _hoisted_1$e = { class: "o-date-panel-months" };
const _hoisted_2$9 = ["onClick", "onMouseenter"];
const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
__name: "DatePanelMonth",
props: {
year: {},
selectedDate: {},
disabledMonth: { type: Function },
minDate: {},
maxDate: {},
rangeStart: {},
rangeEnd: {},
anchorMonth: {},
hoverMonth: {}
},
emits: ["select", "hover"],
setup(__props, { emit: __emit }) {
function computeMonthCellBase({ index, year, selectedDate, todayDate }) {
const isSelected = selectedDate ? selectedDate.year() === year && selectedDate.month() === index : false;
const isCurrent = todayDate ? todayDate.year() === year && todayDate.month() === index : false;
return { isSelected, isCurrent };
}
const props = __props;
const emits = __emit;
const datePickerCtx = vue.inject(datePickerInjectKey);
const { t } = useI18n();
const today = vue.ref(null);
vue.onMounted(() => {
today.value = dayjs();
});
const months = vue.computed(() => {
const todayVal = today.value;
return Array.from({ length: 12 }, (_, i) => {
const { isSelected, isCurrent } = computeMonthCellBase({ index: i, year: props.year, selectedDate: props.selectedDate, todayDate: todayVal });
const isDisabled = isMonthDisabled(props.year, i, { disabledMonth: props.disabledMonth, minDate: props.minDate ?? null, maxDate: props.maxDate ?? null });
const cellDate = dayjs().year(props.year).month(i).startOf("month");
const { isRangeStart, isRangeEnd, isInRange } = computeRangeState({
cell: cellDate,
unit: "month",
rangeStart: props.rangeStart ? props.rangeStart.startOf("month") : null,
rangeEnd: props.rangeEnd ? props.rangeEnd.startOf("month") : null,
anchorDate: props.anchorMonth ? props.anchorMonth.startOf("month") : null,
hoverDate: props.hoverMonth ? props.hoverMonth.startOf("month") : null
});
return { index: i, isSelected, isCurrent, isDisabled, isRangeStart, isRangeEnd, isInRange };
});
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(months.value, (m) => {
var _a;
return vue.openBlock(), vue.createElementBlock("div", {
key: m.index,
class: vue.normalizeClass(["o-date-panel-cell", {
"is-selected": m.isSelected,
"is-disabled": m.isDisabled,
"is-current": m.isCurrent,
"is-range-start": m.isRangeStart,
"is-range-end": m.isRangeEnd,
"is-in-range": m.isInRange
}]),
onClick: ($event) => !m.isDisabled && emits("select", m.index),
onMouseenter: ($event) => !m.isDisabled && emits("hover", vue.unref(dayjs)().year(props.year).month(m.index))
}, [
vue.createVNode(vue.unref(OButton), {
round: (_a = vue.unref(datePickerCtx).round) == null ? void 0 : _a.value,
variant: "solid",
class: "o-date-panel-btn",
disabled: m.isDisabled
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)(`datePicker.monthsShort.${m.index}`)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["round", "disabled"])
], 42, _hoisted_2$9);
}),
128
/* KEYED_FRAGMENT */
))
]);
};
}
});
const _hoisted_1$d = { class: "o-date-panel-years" };
const _hoisted_2$8 = ["onClick", "onMouseenter"];
const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
__name: "DatePanelYear",
props: {
year: {},
selectedDate: {},
disabledYear: { type: Function },
minDate: {},
maxDate: {},
rangeStart: {},
rangeEnd: {},
anchorYear: {},
hoverYear: {},
hideOutOfDecade: { type: Boolean }
},
emits: ["select", "hover"],
setup(__props, { emit: __emit }) {
const NO_RANGE2 = { isRangeStart: false, isRangeEnd: false, isInRange: false };
function computeYearRangeState({ y, isInDecade, rangeStart, rangeEnd, anchorYear, hoverYear }) {
if (!isInDecade) return NO_RANGE2;
return computeRangeState({
cell: dayjs().year(y).startOf("year"),
unit: "year",
rangeStart: rangeStart || null,
rangeEnd: rangeEnd || null,
anchorDate: anchorYear || null,
hoverDate: hoverYear || null
});
}
const props = __props;
const emits = __emit;
const datePickerCtx = vue.inject(datePickerInjectKey);
const today = vue.ref(null);
vue.onMounted(() => {
today.value = dayjs();
});
const decadeStart = vue.computed(() => Math.floor(props.year / 10) * 10);
const years = vue.computed(() => {
const todayVal = today.value;
return Array.from({ length: 12 }, (_, i) => {
const y = decadeStart.value - 1 + i;
const isSelected = props.selectedDate ? props.selectedDate.year() === y : false;
const isCurrent = todayVal ? todayVal.year() === y : false;
const isDisabled = isYearDisabled(y, { disabledYear: props.disabledYear, minDate: props.minDate ?? null, maxDate: props.maxDate ?? null });
const isInDecade = i >= 1 && i <= 10;
const isHidden = props.hideOutOfDecade && !isInDecade;
const { isRangeStart, isRangeEnd, isInRange } = computeYearRangeState({
y,
isInDecade,
rangeStart: props.rangeStart,
rangeEnd: props.rangeEnd,
anchorYear: props.anchorYear,
hoverYear: props.hoverYear
});
return { year: y, isSelected, isCurrent, isDisabled, isInDecade, isRangeStart, isRangeEnd, isInRange, isHidden };
});
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(years.value, (y) => {
var _a;
return vue.openBlock(), vue.createElementBlock("div", {
key: y.year,
class: vue.normalizeClass(["o-date-panel-cell", {
"is-selected": y.isSelected,
"is-disabled": y.isDisabled,
"is-current": y.isCurrent,
"is-other-period": !y.isInDecade,
"is-range-start": y.isRangeStart,
"is-range-end": y.isRangeEnd,
"is-in-range": y.isInRange
}]),
onClick: ($event) => !y.isDisabled && !y.isHidden && emits("select", y.year),
onMouseenter: ($event) => !y.isDisabled && !y.isHidden && emits("hover", vue.unref(dayjs)().year(y.year))
}, [
vue.createVNode(vue.unref(OButton), {
round: (_a = vue.unref(datePickerCtx).round) == null ? void 0 : _a.value,
variant: "solid",
class: "o-date-panel-btn",
disabled: y.isDisabled || !y.isInDecade
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(y.year),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["round", "disabled"])
], 42, _hoisted_2$8);
}),
128
/* KEYED_FRAGMENT */
))
]);
};
}
});
const _hoisted_1$c = { class: "o-date-panel-time-aside" };
const _hoisted_2$7 = { class: "o-date-panel-header" };
const _hoisted_3$5 = { class: "o-data-panel-header-time-label" };
const _hoisted_4$5 = { class: "o-date-panel-time-columns" };
const _hoisted_5$4 = { class: "o-time-panel-content" };
const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
__name: "DatePanelTime",
emits: ["change"],
setup(__props, { expose: __expose, emit: __emit }) {
const { format: format2 } = vue.inject(timePickerInjectKey);
const timeColumnsRef = vue.ref();
const defaultTime = vue.computed(() => format2.value === "HH:mm" ? "00:00" : "00:00:00");
const currentTimeDisplay = vue.ref(defaultTime.value);
const getValue = () => {
var _a;
return ((_a = timeColumnsRef.value) == null ? void 0 : _a.getValue()) ?? defaultTime.value;
};
const setValue = (value) => {
currentTimeDisplay.value = value;
if (timeColumnsRef.value) {
timeColumnsRef.value.setValue(value);
currentTimeDisplay.value = timeColumnsRef.value.getValue() || value;
} else {
vue.nextTick(() => {
var _a, _b;
(_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(value);
if (timeColumnsRef.value) {
currentTimeDisplay.value = timeColumnsRef.value.getValue() || value;
}
(_b = timeColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(false);
});
}
};
const reset = () => {
currentTimeDisplay.value = defaultTime.value;
vue.nextTick(() => {
var _a, _b;
(_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(defaultTime.value);
(_b = timeColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(false);
});
};
const emits = __emit;
const handleTimeColumnsChange = (val) => {
if (val) currentTimeDisplay.value = val;
emits("change");
};
__expose({ getValue, setValue, reset });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
vue.createElementVNode("div", _hoisted_2$7, [
vue.createElementVNode(
"span",
_hoisted_3$5,
vue.toDisplayString(currentTimeDisplay.value),
1
/* TEXT */
)
]),
vue.createVNode(vue.unref(ODivider), { class: "o-date-panel-divider" }),
vue.createElementVNode("div", _hoisted_4$5, [
vue.createElementVNode("div", _hoisted_5$4, [
vue.createVNode(
_sfc_main$q,
{
ref_key: "timeColumnsRef",
ref: timeColumnsRef,
onChange: handleTimeColumnsChange
},
null,
512
/* NEED_PATCH */
)
])
])
]);
};
}
});
function parseDateBound(value) {
return value ? dayjs(value) : null;
}
function resolveYearRange(parsedMin, parsedMax) {
return {
minYear: parsedMin ? parsedMin.year() : 1900,
maxYear: parsedMax ? parsedMax.year() : 2100
};
}
function buildYearOptions(minYear, maxYear, yearUnit) {
const years = [];
for (let y = minYear; y <= maxYear; y++) {
years.push({ label: `${y}${yearUnit}`, value: y });
}
return years;
}
function buildMonthOptions({ currentYear, parsedMin, parsedMax, getLabel }) {
const minMonth = parsedMin && currentYear === parsedMin.year() ? parsedMin.month() : 0;
const maxMonth = parsedMax && currentYear === parsedMax.year() ? parsedMax.month() : 11;
const months = [];
for (let m = minMonth; m <= maxMonth; m++) {
months.push({ label: getLabel(m), value: m });
}
return months;
}
function buildDayOptions({ currentYear, currentMonth, parsedMin, parsedMax, dayUnit }) {
const daysInMonth = dayjs().year(currentYear).month(currentMonth).daysInMonth();
const minDay = parsedMin && currentYear === parsedMin.year() && currentMonth === parsedMin.month() ? parsedMin.date() : 1;
const maxDay = parsedMax && currentYear === parsedMax.year() && currentMonth === parsedMax.month() ? parsedMax.date() : daysInMonth;
const days = [];
for (let d = minDay; d <= maxDay; d++) {
days.push({ label: `${d}${dayUnit}`, value: d });
}
return days;
}
function isMonthItemDisabled(year, month, options) {
var _a, _b;
const testDate = dayjs().year(year).month(month).date(1);
const params = { date: testDate.toDate(), year: testDate.year(), month: testDate.month(), day: testDate.date() };
return !!(((_a = options.disabledMonth) == null ? void 0 : _a.call(options, params)) || ((_b = options.disabledDate) == null ? void 0 : _b.call(options, params)));
}
function computeDisabledMonths({ currentYear, disabledDate, disabledMonth }) {
if (!disabledDate && !disabledMonth) return void 0;
const disabled2 = [];
for (let m = 0; m < 12; m++) {
if (isMonthItemDisabled(currentYear, m, { disabledDate, disabledMonth })) disabled2.push(m);
}
return disabled2.length > 0 ? disabled2 : void 0;
}
function isDayDisabled({ year, month, day, disabledDate }) {
const testDate = dayjs().year(year).month(month).date(day);
const params = { date: testDate.toDate(), year: testDate.year(), month: testDate.month(), day: testDate.date() };
return disabledDate(params);
}
function computeDisabledDays({ currentYear, currentMonth, disabledDate }) {
if (!disabledDate) return void 0;
const disabled2 = [];
for (let d = 1; d <= 31; d++) {
const testDate = dayjs().year(currentYear).month(currentMonth).date(d);
if (testDate.month() !== currentMonth && d > testDate.daysInMonth()) break;
if (isDayDisabled({ year: currentYear, month: currentMonth, day: d, disabledDate })) disabled2.push(d);
}
return disabled2.length > 0 ? disabled2 : void 0;
}
function isYearItemDisabled(year, options) {
const testDate = dayjs().year(year).month(0).date(1);
const { disabledDate, disabledYear } = options;
return !!((disabledYear == null ? void 0 : disabledYear({ date: testDate.toDate(), year })) || (disabledDate == null ? void 0 : disabledDate({ date: testDate.toDate(), year, month: 0, day: 1 })));
}
function computeDisabledYears({ yearOptions, disabledDate, disabledYear }) {
if (!disabledDate && !disabledYear) return void 0;
const disabled2 = [];
for (const opt2 of yearOptions) {
if (isYearItemDisabled(opt2.value, { disabledDate, disabledYear })) disabled2.push(opt2.value);
}
return disabled2.length > 0 ? disabled2 : void 0;
}
function useDateBounds(minDate, maxDate) {
const parsedMinDate = vue.computed(() => parseDateBound(minDate == null ? void 0 : minDate.value));
const parsedMaxDate = vue.computed(() => parseDateBound(maxDate == null ? void 0 : maxDate.value));
return { parsedMinDate, parsedMaxDate };
}
function useDateOptions({ parsedMinDate, parsedMaxDate, currentYear, currentMonth, getMonthLabel, getYearUnit, getDayUnit }) {
const yearOptions = vue.computed(() => {
const { minYear, maxYear } = resolveYearRange(parsedMinDate.value, parsedMaxDate.value);
return buildYearOptions(minYear, maxYear, getYearUnit());
});
const monthOptions = vue.computed(
() => buildMonthOptions({ currentYear: currentYear.value, parsedMin: parsedMinDate.value, parsedMax: parsedMaxDate.value, getLabel: getMonthLabel })
);
const dayOptions = vue.computed(
() => buildDayOptions({
currentYear: currentYear.value,
currentMonth: currentMonth.value,
parsedMin: parsedMinDate.value,
parsedMax: parsedMaxDate.value,
dayUnit: getDayUnit()
})
);
return { yearOptions, monthOptions, dayOptions };
}
function useDateDisabledOptions({ yearOptions, currentYear, currentMonth, disabledDate, disabledMonth, disabledYear }) {
const disabledMonthOptions = vue.computed(
() => computeDisabledMonths({ currentYear: currentYear.value, disabledDate: disabledDate == null ? void 0 : disabledDate.value, disabledMonth: disabledMonth == null ? void 0 : disabledMonth.value })
);
const disabledDayOptions = vue.computed(
() => computeDisabledDays({ currentYear: currentYear.value, currentMonth: currentMonth.value, disabledDate: disabledDate == null ? void 0 : disabledDate.value })
);
const disabledYearOptions = vue.computed(
() => computeDisabledYears({ yearOptions: yearOptions.value, disabledDate: disabledDate == null ? void 0 : disabledDate.value, disabledYear: disabledYear == null ? void 0 : disabledYear.value })
);
return { disabledYearOptions, disabledMonthOptions, disabledDayOptions };
}
const useDatePickerOptions = ({
currentYear,
currentMonth,
disabledDate,
disabledMonth,
disabledYear,
minDate,
maxDate
}) => {
const { t } = useI18n();
const { parsedMinDate, parsedMaxDate } = useDateBounds(minDate, maxDate);
const { yearOptions, monthOptions, dayOptions } = useDateOptions({
parsedMinDate,
parsedMaxDate,
currentYear,
currentMonth,
getMonthLabel: (m) => t(`datePicker.monthsShort.${m}`),
getYearUnit: () => t("datePicker.yearUnit"),
getDayUnit: () => t("datePicker.dayUnit")
});
const { disabledYearOptions, disabledMonthOptions, disabledDayOptions } = useDateDisabledOptions({
yearOptions,
currentYear,
currentMonth,
disabledDate,
disabledMonth,
disabledYear
});
return { yearOptions, monthOptions, dayOptions, disabledYearOptions, disabledMonthOptions, disabledDayOptions };
};
const _hoisted_1$b = {
key: 0,
class: "o-time-panel-mask o-date-panel-mask"
};
const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
__name: "DateColumns",
props: {
mode: {}
},
emits: ["change"],
setup(__props, { expose: __expose, emit: __emit }) {
const datePickerCtx = vue.inject(datePickerInjectKey);
const { minDate, maxDate, noResponsive: noResponsive2, disabledDate, disabledMonth, disabledYear, round: round2, mode: effectiveMode } = datePickerCtx;
const props = __props;
const currentMode = vue.computed(() => props.mode ?? effectiveMode.value ?? "date");
const emit = __emit;
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => !(noResponsive2 == null ? void 0 : noResponsive2.value) && isPhonePad.value);
const roundClass = getRoundClass({ round: round2 == null ? void 0 : round2.value }, "date-picker-columns");
const currentYear = vue.ref(0);
const currentMonth = vue.ref(0);
const currentDay = vue.ref(1);
const { yearOptions, monthOptions, dayOptions, disabledYearOptions, disabledMonthOptions, disabledDayOptions } = useDatePickerOptions({
currentYear,
currentMonth,
disabledDate,
disabledMonth,
disabledYear,
minDate,
maxDate
});
const yearColumnRef = vue.ref();
const monthColumnRef = vue.ref();
const dayColumnRef = vue.ref();
const scrollAllToSelected = async (smooth = false) => {
var _a, _b, _c;
await vue.nextTick();
(_a = yearColumnRef.value) == null ? void 0 : _a.scrollToItem(smooth);
(_b = monthColumnRef.value) == null ? void 0 : _b.scrollToItem(smooth);
(_c = dayColumnRef.value) == null ? void 0 : _c.scrollToItem(smooth);
};
vue.onMounted(() => {
currentYear.value = dayjs().year();
currentMonth.value = dayjs().month();
currentDay.value = dayjs().date();
scrollAllToSelected(false);
});
const setValue = (value) => {
const d = value ? dayjs(value) : dayjs();
currentYear.value = d.year();
currentMonth.value = d.month();
currentDay.value = d.date();
scrollAllToSelected(false);
};
const getValue = () => {
if (currentMode.value === "year") {
return { year: currentYear.value };
}
if (currentMode.value === "month") {
return { year: currentYear.value, month: currentMonth.value };
}
return { year: currentYear.value, month: currentMonth.value, day: currentDay.value };
};
const handleYearChange = () => {
var _a, _b, _c, _d;
if (currentMode.value === "year") {
emit("change", getValue());
return;
}
const validMonth = monthOptions.value.some((opt2) => opt2.value === currentMonth.value);
if (!validMonth) {
currentMonth.value = ((_a = monthOptions.value[0]) == null ? void 0 : _a.value) ?? 0;
(_b = monthColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
}
if (currentMode.value === "month") {
emit("change", getValue());
return;
}
const validDay = dayOptions.value.some((opt2) => opt2.value === currentDay.value);
if (!validDay) {
currentDay.value = ((_c = dayOptions.value[0]) == null ? void 0 : _c.value) ?? 1;
(_d = dayColumnRef.value) == null ? void 0 : _d.scrollToItem(true);
}
emit("change", getValue());
};
const handleMonthChange = () => {
var _a, _b;
if (currentMode.value === "month") {
emit("change", getValue());
return;
}
const validDay = dayOptions.value.some((opt2) => opt2.value === currentDay.value);
if (!validDay) {
currentDay.value = ((_a = dayOptions.value[0]) == null ? void 0 : _a.value) ?? 1;
(_b = dayColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
}
emit("change", getValue());
};
const handleDayChange = () => {
emit("change", getValue());
};
vue.watch(
() => [minDate == null ? void 0 : minDate.value, maxDate == null ? void 0 : maxDate.value],
() => scrollAllToSelected(false)
);
__expose({
scrollAllToSelected,
setValue,
getValue
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-time-panel-columns", "o-date-panel-columns", vue.unref(roundClass).class.value]),
style: vue.normalizeStyle(vue.unref(roundClass).style.value)
},
[
isResponding.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b)) : vue.createCommentVNode("v-if", true),
vue.createVNode(_sfc_main$r, {
ref_key: "yearColumnRef",
ref: yearColumnRef,
modelValue: currentYear.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentYear.value = $event),
class: "o-date-panel-column-scroller",
options: vue.unref(yearOptions),
"disabled-options": vue.unref(disabledYearOptions),
"no-responsive": vue.unref(noResponsive2),
onChange: handleYearChange
}, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"]),
currentMode.value !== "year" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
!isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(ODivider), {
key: 0,
direction: "v",
class: "o-time-panel-column-divider o-date-panel-column-divider"
})) : vue.createCommentVNode("v-if", true),
vue.createVNode(_sfc_main$r, {
ref_key: "monthColumnRef",
ref: monthColumnRef,
modelValue: currentMonth.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => currentMonth.value = $event),
class: "o-date-panel-column-scroller",
options: vue.unref(monthOptions),
"disabled-options": vue.unref(disabledMonthOptions),
"no-responsive": vue.unref(noResponsive2),
onChange: handleMonthChange
}, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true),
currentMode.value === "date" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
!isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(ODivider), {
key: 0,
direction: "v",
class: "o-time-panel-column-divider o-date-panel-column-divider"
})) : vue.createCommentVNode("v-if", true),
vue.createVNode(_sfc_main$r, {
ref_key: "dayColumnRef",
ref: dayColumnRef,
modelValue: currentDay.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => currentDay.value = $event),
class: "o-date-panel-column-scroller",
options: vue.unref(dayOptions),
"disabled-options": vue.unref(disabledDayOptions),
"no-responsive": vue.unref(noResponsive2),
onChange: handleDayChange
}, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
);
};
}
});
const _hoisted_1$a = {
key: 1,
class: "o-select-options-head"
};
const _hoisted_2$6 = { class: "o-date-panel-date-side" };
const _hoisted_3$4 = { class: "o-date-panel-content" };
const _hoisted_4$4 = { class: "o-date-panel-footer" };
const _hoisted_5$3 = { class: "o-date-panel-shortcut" };
const _hoisted_6$2 = { key: 0 };
const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
__name: "DatePanel",
props: {
target: {},
optionTitle: {}
},
emits: ["cancel", "change", "confirm", "preview"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const calendarPanelRef = vue.ref();
const monthPanelRef = vue.ref();
const yearPanelRef = vue.ref();
const datePanelTimeRef = vue.ref();
const dateColumnsRef = vue.ref();
const timeColumnsRef = vue.ref();
const visible = vue.ref(false);
const setVisible = (newVal) => {
visible.value = newVal;
if (!newVal) {
emits("cancel");
}
};
const datePickerCtx = vue.inject(datePickerInjectKey);
const {
size: size2,
transition: transition2,
popupPosition: popupPosition2,
popupWrapper: popupWrapper2,
noResponsive: noResponsive2,
mode: effectiveMode,
format: format2,
disabledDate,
disabledMonth,
disabledYear,
minDate,
maxDate
} = datePickerCtx;
const safeDayStartOfWeek = vue.computed(() => {
var _a;
return ((_a = datePickerCtx.dayStartOfWeek) == null ? void 0 : _a.value) ?? 1;
});
const timeFormat = vue.computed(() => {
var _a;
const match = (_a = format2 == null ? void 0 : format2.value) == null ? void 0 : _a.match(/HH:mm(?::ss)?/);
return match ? match[0] : "HH:mm:ss";
});
const parsedMinDate = vue.computed(() => {
return (minDate == null ? void 0 : minDate.value) ? parseValue(minDate.value) : null;
});
const parsedMaxDate = vue.computed(() => {
return (maxDate == null ? void 0 : maxDate.value) ? parseValue(maxDate.value) : null;
});
const { t } = useI18n();
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => {
return !(noResponsive2 == null ? void 0 : noResponsive2.value) && isPhonePad.value;
});
const popupRef = vue.ref();
const mobileDateTimeTab = vue.ref("date");
vue.watch(effectiveMode, () => {
mobileDateTimeTab.value = "date";
});
const displayYear = vue.ref(0);
const displayMonth = vue.ref(0);
vue.onMounted(() => {
if (!displayYear.value) {
displayYear.value = dayjs().year();
displayMonth.value = dayjs().month();
}
});
const selectedDate = vue.ref(null);
const pendingTimeStr = vue.ref("00:00:00");
const currentView = vue.ref("date");
const { rows, weekDayHeaders } = useCalendar({
displayYear,
displayMonth,
selectedDate,
dayStartOfWeek: safeDayStartOfWeek,
disabledDate,
minDate: parsedMinDate,
maxDate: parsedMaxDate
});
const isMainPanel = vue.computed(() => {
if (effectiveMode.value === "year") return currentView.value === "year";
if (effectiveMode.value === "month") return currentView.value === "month";
return currentView.value === "date";
});
const getValue = () => {
var _a, _b;
if (!selectedDate.value) return void 0;
if (effectiveMode.value === "datetime") {
let timeStr = "00:00:00";
if (isResponding.value) {
timeStr = ((_a = timeColumnsRef.value) == null ? void 0 : _a.getValue()) ?? pendingTimeStr.value;
} else {
timeStr = ((_b = datePanelTimeRef.value) == null ? void 0 : _b.getValue()) ?? "00:00:00";
}
const [h = 0, m = 0, s = 0] = timeStr.split(":").map(Number);
return selectedDate.value.hour(h).minute(m).second(s).valueOf();
}
return selectedDate.value.valueOf();
};
const isColumnMode = vue.computed(
() => isResponding.value && (effectiveMode.value === "date" || effectiveMode.value === "month" || effectiveMode.value === "year" || effectiveMode.value === "datetime")
);
const applyDatetimeTime = (timeStr) => {
pendingTimeStr.value = timeStr;
if (isResponding.value) {
core.until(timeColumnsRef).toBeTruthy().then(() => {
var _a;
(_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(timeStr);
});
} else if (datePanelTimeRef.value) {
datePanelTimeRef.value.setValue(timeStr);
} else {
core.until(datePanelTimeRef).toBeTruthy().then(() => {
var _a;
(_a = datePanelTimeRef.value) == null ? void 0 : _a.setValue(timeStr);
emits("preview", getValue());
});
}
};
const setValueWithDate = (d, value) => {
selectedDate.value = d;
displayYear.value = d.year();
displayMonth.value = d.month();
if (isColumnMode.value) {
core.until(dateColumnsRef).toBeTruthy().then(() => {
var _a;
(_a = dateColumnsRef.value) == null ? void 0 : _a.setValue(value);
});
}
if (effectiveMode.value === "datetime") {
applyDatetimeTime(d.format(timeFormat.value));
}
};
const setValueEmpty = () => {
if (isColumnMode.value) {
const d = dayjs();
selectedDate.value = d;
displayYear.value = d.year();
displayMonth.value = d.month();
core.until(dateColumnsRef).toBeTruthy().then(() => {
var _a;
(_a = dateColumnsRef.value) == null ? void 0 : _a.setValue(void 0);
});
} else {
selectedDate.value = null;
}
if (effectiveMode.value === "datetime") {
pendingTimeStr.value = dayjs().format(timeFormat.value);
if (isResponding.value) {
core.until(timeColumnsRef).toBeTruthy().then(() => {
var _a;
(_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(void 0);
});
} else {
core.until(datePanelTimeRef).toBeTruthy().then(() => {
var _a;
(_a = datePanelTimeRef.value) == null ? void 0 : _a.reset();
});
}
}
};
const setValue = (value) => {
if (value) {
setValueWithDate(dayjs(value), value);
} else {
setValueEmpty();
}
};
const open = async (newVal) => {
visible.value = true;
mobileDateTimeTab.value = "date";
if (effectiveMode.value === "year") {
currentView.value = "year";
} else if (effectiveMode.value === "month") {
currentView.value = "month";
} else {
currentView.value = "date";
}
setValue(newVal);
};
const close2 = () => {
visible.value = false;
};
const handleSelectDate = (date) => {
selectedDate.value = date;
displayYear.value = date.year();
displayMonth.value = date.month();
if (currentView.value === "date" && effectiveMode.value !== "datetime") {
emits("change", getValue());
} else if (effectiveMode.value === "datetime") {
emits("preview", getValue());
}
};
const handleTimeChange = () => {
if (effectiveMode.value === "datetime") {
emits("preview", getValue());
}
};
const handleSelectMonth = (month) => {
displayMonth.value = month;
if (effectiveMode.value === "month") {
selectedDate.value = dayjs().year(displayYear.value).month(month).date(1);
emits("change", getValue());
} else {
currentView.value = "date";
}
};
const handleSelectYear = (year) => {
displayYear.value = year;
if (effectiveMode.value === "year") {
selectedDate.value = dayjs().year(year).month(0).date(1);
emits("change", getValue());
} else if (effectiveMode.value === "month") {
currentView.value = "month";
} else {
currentView.value = "date";
}
};
const handleCancel = () => {
emits("cancel");
close2();
};
const handleConfirm = () => {
emits("confirm", getValue());
close2();
};
const handleDateColumnsChange = (value) => {
if (value) {
displayYear.value = value.year;
if (value.month !== void 0) {
displayMonth.value = value.month;
selectedDate.value = dayjs().year(value.year).month(value.month).date(value.day ?? 1);
} else {
selectedDate.value = dayjs().year(value.year).month(0).date(1);
}
if (effectiveMode.value === "datetime" || isResponding.value) {
emits("preview", getValue());
} else {
emits("change", getValue());
}
}
};
const handleTimeColumnsChange = () => {
if (effectiveMode.value === "datetime") {
emits("preview", getValue());
}
};
__expose({
getPopupEl: () => popupRef.value,
getValue,
setValue,
open,
close: close2
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
vue.createCommentVNode(" 移动端 "),
isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(ODialog), {
key: 0,
visible: visible.value,
class: "o-select-dlg",
"main-class": [
"o-date-panel",
`o-date-panel-${vue.unref(size2)}`,
"o-time-panel",
`o-time-panel-${vue.unref(size2)}`,
{ "o-date-panel-touch": isResponding.value, "o-time-panel-touch": isResponding.value }
],
"hide-close": "",
size: "small",
"onUpdate:visible": setVisible
}, {
header: vue.withCtx(() => [
vue.createCommentVNode(" 移动端 datetime 模式：日期/时间切换 "),
isResponding.value && vue.unref(effectiveMode) === "datetime" ? (vue.openBlock(), vue.createBlock(vue.unref(OTab), {
key: 0,
modelValue: mobileDateTimeTab.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => mobileDateTimeTab.value = $event),
variant: "button",
round: "pill"
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(_sfc_main$R), {
label: vue.unref(t)("datePicker.date"),
value: "date"
}, null, 8, ["label"]),
vue.createVNode(vue.unref(_sfc_main$R), {
label: vue.unref(t)("datePicker.time"),
value: "time"
}, null, 8, ["label"])
]),
_: 1
/* STABLE */
}, 8, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock(
"div",
_hoisted_1$a,
vue.toDisplayString(props.optionTitle ?? vue.unref(t)("datePicker.selectDate")),
1
/* TEXT */
))
]),
actions: vue.withCtx(() => [
vue.createVNode(vue.unref(OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
onClick: handleCancel
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.cancel")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}),
vue.createVNode(vue.unref(OButton), {
class: "o-dlg-btn",
variant: "text",
size: "large",
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
]),
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-date-panel-body", { "o-date-panel-body-datetime": vue.unref(effectiveMode) === "datetime" }])
},
[
vue.unref(effectiveMode) === "datetime" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
mobileDateTimeTab.value === "date" ? (vue.openBlock(), vue.createBlock(
_sfc_main$g,
{
key: 0,
ref_key: "dateColumnsRef",
ref: dateColumnsRef,
mode: "date",
onChange: handleDateColumnsChange
},
null,
512
/* NEED_PATCH */
)) : vue.createCommentVNode("v-if", true),
mobileDateTimeTab.value === "time" ? (vue.openBlock(), vue.createBlock(
_sfc_main$q,
{
key: 1,
ref_key: "timeColumnsRef",
ref: timeColumnsRef,
onChange: handleTimeColumnsChange
},
null,
512
/* NEED_PATCH */
)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" 移动端非 datetime 模式 "),
vue.createVNode(_sfc_main$g, {
ref_key: "dateColumnsRef",
ref: dateColumnsRef,
mode: vue.unref(effectiveMode),
onChange: handleDateColumnsChange
}, null, 8, ["mode"])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
))
],
2
/* CLASS */
)
]),
_: 1
/* STABLE */
}, 8, ["visible", "main-class"])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" PC端 "),
vue.createVNode(vue.unref(OPopup), {
visible: visible.value,
"onUpdate:visible": _cache[4] || (_cache[4] = ($event) => visible.value = $event),
class: vue.normalizeClass(["o-date-panel", `o-date-panel-${vue.unref(size2)}`, "o-time-panel", `o-time-panel-${vue.unref(size2)}`]),
"hide-close": "",
target: props.target,
transition: vue.unref(transition2),
position: vue.unref(popupPosition2),
wrapper: vue.unref(popupWrapper2),
trigger: "none",
offset: 4,
"adjust-min-width": false,
"adjust-width": false
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "popupRef",
ref: popupRef
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-date-panel-body", { "o-date-panel-body-datetime": vue.unref(effectiveMode) === "datetime" }])
},
[
vue.createElementVNode("div", _hoisted_2$6, [
vue.createElementVNode("div", _hoisted_3$4, [
vue.createVNode(_sfc_main$l, {
year: displayYear.value,
"onUpdate:year": _cache[1] || (_cache[1] = ($event) => displayYear.value = $event),
month: displayMonth.value,
"onUpdate:month": _cache[2] || (_cache[2] = ($event) => displayMonth.value = $event),
"current-view": currentView.value,
"onUpdate:currentView": _cache[3] || (_cache[3] = ($event) => currentView.value = $event)
}, null, 8, ["year", "month", "current-view"]),
vue.createVNode(vue.unref(ODivider), { class: "o-date-panel-divider" }),
currentView.value === "year" ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
key: 0,
ref_key: "yearPanelRef",
ref: yearPanelRef,
year: displayYear.value,
"selected-date": selectedDate.value,
"disabled-year": vue.unref(disabledYear),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
onSelect: handleSelectYear
}, null, 8, ["year", "selected-date", "disabled-year", "min-date", "max-date"])) : currentView.value === "month" ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
key: 1,
ref_key: "monthPanelRef",
ref: monthPanelRef,
year: displayYear.value,
"selected-date": selectedDate.value,
"disabled-month": vue.unref(disabledMonth),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
onSelect: handleSelectMonth
}, null, 8, ["year", "selected-date", "disabled-month", "min-date", "max-date"])) : (vue.openBlock(), vue.createBlock(_sfc_main$k, {
key: 2,
ref_key: "calendarPanelRef",
ref: calendarPanelRef,
rows: vue.unref(rows),
"week-day-headers": vue.unref(weekDayHeaders),
onSelect: handleSelectDate
}, null, 8, ["rows", "week-day-headers"]))
])
]),
vue.unref(effectiveMode) === "datetime" && currentView.value === "date" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createVNode(vue.unref(ODivider), {
direction: "v",
class: "o-date-panel-divider-v"
}),
vue.createVNode(
_sfc_main$h,
{
ref_key: "datePanelTimeRef",
ref: datePanelTimeRef,
onChange: handleTimeChange
},
null,
512
/* NEED_PATCH */
)
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
),
(!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) || vue.unref(effectiveMode) === "datetime") && isMainPanel.value ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createVNode(vue.unref(ODivider), { class: "o-date-panel-divider" }),
vue.createElementVNode("div", _hoisted_4$4, [
vue.createElementVNode("span", _hoisted_5$3, [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange: () => emits("change", getValue())
})
]),
vue.unref(effectiveMode) === "datetime" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$2, [
vue.createVNode(vue.unref(OButton), {
round: "pill",
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})
])) : vue.createCommentVNode("v-if", true)
])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "class", "target", "transition", "position", "wrapper"])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
))
]),
_: 3
/* FORWARDED */
});
};
}
});
const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
__name: "InnerDatePicker",
props: /* @__PURE__ */ vue.mergeModels({
placeholder: { default: void 0 },
optionTitle: { default: void 0 },
inBoxRef: { default: void 0 },
inputId: { default: void 0 },
hasIcon: { type: Boolean, default: false }
}, {
"modelValue": { default: void 0, required: true },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const modelValue2 = vue.useModel(__props, "modelValue");
const datePickerCtx = vue.inject(datePickerInjectKey);
const { clearable: clearable2, disabled: disabled2, readonly: readonly2, noResponsive: noResponsive2, mode: effectiveMode, minDate, maxDate } = datePickerCtx;
const effectiveFormat = vue.computed(() => {
var _a;
return (_a = datePickerCtx.format) == null ? void 0 : _a.value;
});
const parsedMinDate = vue.computed(() => {
return (minDate == null ? void 0 : minDate.value) ? parseValue(minDate.value) : null;
});
const parsedMaxDate = vue.computed(() => {
return (maxDate == null ? void 0 : maxDate.value) ? parseValue(maxDate.value) : null;
});
const { t } = useI18n();
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => !(noResponsive2 == null ? void 0 : noResponsive2.value) && isPhonePad.value);
const inInputRef = vue.ref();
const panelRef = vue.ref();
const effectivePlaceholder = vue.computed(() => {
if (props.placeholder !== void 0) return props.placeholder;
if (effectiveMode.value === "year") return t("datePicker.yearPlaceholder");
if (effectiveMode.value === "month") return t("datePicker.monthPlaceholder");
return t("datePicker.placeholder");
});
const tempInputValue = vue.ref();
const isTempInputValueValid = vue.computed(() => {
var _a, _b;
if (!tempInputValue.value) return true;
const d = dayjs(tempInputValue.value);
if (!d.isValid()) return false;
if (parsedMinDate.value && d.isBefore(parsedMinDate.value)) return false;
if (parsedMaxDate.value && d.isAfter(parsedMaxDate.value)) return false;
if ((_b = (_a = datePickerCtx.disabledDate) == null ? void 0 : _a.value) == null ? void 0 : _b.call(_a, { date: d.toDate(), year: d.year(), month: d.month(), day: d.date() })) return false;
return true;
});
vue.watch(
modelValue2,
(newValue) => {
if (!newValue && newValue !== 0) {
tempInputValue.value = "";
return;
}
tempInputValue.value = dayjs(newValue).format(effectiveFormat.value);
},
{
immediate: true
}
);
const isFocus = vue.ref(false);
vue.watch(isFocus, (newVal, oldVal) => {
var _a;
if (!newVal && oldVal) {
tempInputValue.value = modelValue2.value ? dayjs(modelValue2.value).format(effectiveFormat.value) : "";
if (!isResponding.value) {
(_a = panelRef.value) == null ? void 0 : _a.close();
}
emits("blur");
}
});
useClickOutside({
targets: [() => props.inBoxRef, () => {
var _a;
return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
}],
onOutside: () => {
isFocus.value = false;
},
disabled: isResponding
});
let skipOpenPanel = false;
const onFocus = (e) => {
var _a;
if (readonly2 == null ? void 0 : readonly2.value) {
return;
}
if (!skipOpenPanel) {
let valueToOpen = tempInputValue.value;
if (!valueToOpen) {
const today = dayjs().format(effectiveFormat.value);
tempInputValue.value = today;
valueToOpen = today;
}
(_a = panelRef.value) == null ? void 0 : _a.open(dayjs(valueToOpen, effectiveFormat.value).valueOf());
}
skipOpenPanel = false;
if (isFocus.value) {
return;
}
isFocus.value = true;
emits("focus", e);
};
let prevValue = modelValue2.value;
const handleChange = () => {
var _a, _b;
const useTempInput = effectiveMode.value !== "datetime" && isTempInputValueValid.value;
const newFormatted = useTempInput ? (_a = parseValue(tempInputValue.value)) == null ? void 0 : _a.valueOf() : (_b = panelRef.value) == null ? void 0 : _b.getValue();
modelValue2.value = newFormatted;
emits("change", newFormatted, prevValue);
prevValue = newFormatted;
};
const handleInput = core.useDebounceFn(async () => {
var _a, _b;
if (isTempInputValueValid.value) {
(_b = panelRef.value) == null ? void 0 : _b.setValue((_a = parseValue(tempInputValue.value)) == null ? void 0 : _a.valueOf());
}
});
const handlePanelChange = (newVal) => {
var _a, _b;
tempInputValue.value = newVal ? dayjs(newVal).format(effectiveFormat.value) : "";
handleChange();
(_a = panelRef.value) == null ? void 0 : _a.close();
isFocus.value = false;
(_b = inInputRef.value) == null ? void 0 : _b.blur();
};
const handlePanelPreview = (newVal) => {
tempInputValue.value = newVal ? dayjs(newVal).format(effectiveFormat.value) : "";
};
const onPressEnter = () => {
var _a, _b;
if (!isTempInputValueValid.value) {
return;
}
handleChange();
(_a = panelRef.value) == null ? void 0 : _a.close();
isFocus.value = false;
(_b = inInputRef.value) == null ? void 0 : _b.blur();
emits("pressEnter");
};
const handleConfirm = () => {
var _a, _b, _c;
const panelVal = (_a = panelRef.value) == null ? void 0 : _a.getValue();
if (panelVal) {
tempInputValue.value = dayjs(panelVal).format(effectiveFormat.value);
}
handleChange();
(_b = panelRef.value) == null ? void 0 : _b.close();
isFocus.value = false;
(_c = inInputRef.value) == null ? void 0 : _c.blur();
emits("pressEnter");
};
const handleCancel = () => {
var _a, _b;
isFocus.value = false;
(_a = inInputRef.value) == null ? void 0 : _a.blur();
(_b = panelRef.value) == null ? void 0 : _b.close();
};
const onClear = (e) => {
var _a, _b;
e == null ? void 0 : e.stopPropagation();
const oldVal = prevValue;
modelValue2.value = void 0;
tempInputValue.value = "";
prevValue = void 0;
emits("clear", e);
emits("change", void 0, oldVal);
(_a = panelRef.value) == null ? void 0 : _a.close();
isFocus.value = false;
(_b = inInputRef.value) == null ? void 0 : _b.blur();
};
const inputId2 = props.inputId;
__expose({
focus: (open = true) => {
var _a;
if (!open) skipOpenPanel = true;
(_a = inInputRef.value) == null ? void 0 : _a.focus();
},
blur: () => {
var _a, _b;
(_a = inInputRef.value) == null ? void 0 : _a.blur();
(_b = panelRef.value) == null ? void 0 : _b.close();
isFocus.value = false;
},
clear: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.clear();
},
inputEl: () => {
var _a;
return (_a = inInputRef.value) == null ? void 0 : _a.inputEl;
},
getTempValue: () => {
var _a;
return isTempInputValueValid.value ? tempInputValue.value : (_a = panelRef.value) == null ? void 0 : _a.getValue();
}
});
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$1f), {
ref_key: "inInputRef",
ref: inInputRef,
modelValue: tempInputValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tempInputValue.value = $event),
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": isFocus.value, "o-input-wrap-touch": isResponding.value }]),
disabled: vue.unref(disabled2),
clearable: vue.unref(clearable2) && !!tempInputValue.value,
placeholder: effectivePlaceholder.value,
"input-id": vue.unref(inputId2),
"max-length": (_a = effectiveFormat.value) == null ? void 0 : _a.length,
"input-on-outlimit": false,
"show-length": "never",
readonly: vue.unref(readonly2),
"no-keyboard": "",
onKeydown: vue.withKeys(handleCancel, ["esc"]),
onInput: vue.unref(handleInput),
onFocus,
onClear,
onPressEnter
}, vue.createSlots({
extra: vue.withCtx(() => [
!vue.unref(disabled2) && !vue.unref(readonly2) ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: props.inBoxRef,
"option-title": props.optionTitle,
onChange: handlePanelChange,
onPreview: handlePanelPreview,
onCancel: handleCancel,
onConfirm: handleConfirm
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
}, [
props.hasIcon && (!isResponding.value || !tempInputValue.value) ? {
name: "suffix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix", {}, () => [
vue.createVNode(vue.unref(IconCalendar))
])
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "class", "disabled", "clearable", "placeholder", "input-id", "max-length", "readonly", "onInput"]);
};
}
});
const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
__name: "OYearPicker",
props: /* @__PURE__ */ vue.mergeModels(yearPickerProps, {
"modelValue": { default: void 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const modelValue2 = vue.useModel(__props, "modelValue");
const { timestampValue, effectiveColor, inputId: inputId2, isFocus, onFocus, onBlur, onClear, onPressEnter, notifyChange } = usePickerBase({
props,
mode: "year",
modelValue: modelValue2,
emit: emits
});
const onChange = (newVal, oldVal) => {
emits("change", newVal, oldVal);
notifyChange();
};
const inBoxRef = vue.ref();
const innerRef = vue.ref();
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.focus(open);
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.blur();
},
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.clear();
},
/**
* @zh-CN 获取输入框 DOM 元素
* @en-US Get the input DOM element
*/
inputEl: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.inputEl();
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(
vue.unref(_sfc_main$1e),
vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: vue.unref(isFocus)
}, { class: ["o-date-picker", "o-year-picker", "o-input"] }),
vue.createSlots({
default: vue.withCtx(() => {
var _a;
return [
vue.createVNode(_sfc_main$e, {
ref_key: "innerRef",
ref: innerRef,
modelValue: vue.unref(timestampValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(timestampValue) ? timestampValue.value = $event : null),
"in-box-ref": (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"input-id": vue.unref(inputId2),
"has-icon": "",
onFocus: vue.unref(onFocus),
onBlur: vue.unref(onBlur),
onClear: vue.unref(onClear),
onPressEnter: vue.unref(onPressEnter),
onChange
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "in-box-ref", "input-id", "onFocus", "onBlur", "onClear", "onPressEnter"])
];
}),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
);
};
}
});
const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
__name: "OMonthPicker",
props: /* @__PURE__ */ vue.mergeModels(monthPickerProps, {
"modelValue": { default: void 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const modelValue2 = vue.useModel(__props, "modelValue");
const { timestampValue, effectiveColor, inputId: inputId2, isFocus, onFocus, onBlur, onClear, onPressEnter, notifyChange } = usePickerBase({
props,
mode: "month",
modelValue: modelValue2,
emit: emits
});
const onChange = (newVal, oldVal) => {
emits("change", newVal, oldVal);
notifyChange();
};
const inBoxRef = vue.ref();
const innerRef = vue.ref();
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.focus(open);
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.blur();
},
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.clear();
},
/**
* @zh-CN 获取输入框 DOM 元素
* @en-US Get the input DOM element
*/
inputEl: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.inputEl();
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(
vue.unref(_sfc_main$1e),
vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: vue.unref(isFocus)
}, { class: ["o-date-picker", "o-month-picker", "o-input"] }),
vue.createSlots({
default: vue.withCtx(() => {
var _a;
return [
vue.createVNode(_sfc_main$e, {
ref_key: "innerRef",
ref: innerRef,
modelValue: vue.unref(timestampValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(timestampValue) ? timestampValue.value = $event : null),
"in-box-ref": (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"input-id": vue.unref(inputId2),
"has-icon": "",
onFocus: vue.unref(onFocus),
onBlur: vue.unref(onBlur),
onClear: vue.unref(onClear),
onPressEnter: vue.unref(onPressEnter),
onChange
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "in-box-ref", "input-id", "onFocus", "onBlur", "onClear", "onPressEnter"])
];
}),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
);
};
}
});
const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
__name: "ODatePicker",
props: /* @__PURE__ */ vue.mergeModels(datePickerProps, {
"modelValue": { default: void 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const modelValue2 = vue.useModel(__props, "modelValue");
const { timestampValue, effectiveColor, inputId: inputId2, isFocus, onFocus, onBlur, onClear, onPressEnter, notifyChange } = usePickerBase({
props,
mode: "date",
modelValue: modelValue2,
emit: emits
});
const onChange = (newVal, oldVal) => {
emits("change", newVal, oldVal);
notifyChange();
};
const inBoxRef = vue.ref();
const innerDatePickerRef = vue.ref();
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
return (_a = innerDatePickerRef.value) == null ? void 0 : _a.focus(open);
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => {
var _a;
return (_a = innerDatePickerRef.value) == null ? void 0 : _a.blur();
},
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => {
var _a;
return (_a = innerDatePickerRef.value) == null ? void 0 : _a.clear();
},
/**
* @zh-CN 获取输入框 DOM 元素
* @en-US Get the input DOM element
*/
inputEl: () => {
var _a;
return (_a = innerDatePickerRef.value) == null ? void 0 : _a.inputEl();
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(
vue.unref(_sfc_main$1e),
vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: vue.unref(isFocus)
}, { class: ["o-date-picker", "o-input"] }),
vue.createSlots({
default: vue.withCtx(() => {
var _a;
return [
vue.createVNode(_sfc_main$e, {
ref_key: "innerDatePickerRef",
ref: innerDatePickerRef,
modelValue: vue.unref(timestampValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(timestampValue) ? timestampValue.value = $event : null),
"in-box-ref": (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"input-id": vue.unref(inputId2),
"has-icon": "",
onFocus: vue.unref(onFocus),
onBlur: vue.unref(onBlur),
onClear: vue.unref(onClear),
onPressEnter: vue.unref(onPressEnter),
onChange
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "in-box-ref", "input-id", "onFocus", "onBlur", "onClear", "onPressEnter"])
];
}),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
);
};
}
});
const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
__name: "ODateTimePicker",
props: /* @__PURE__ */ vue.mergeModels(dateTimePickerProps, {
"modelValue": { default: void 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const modelValue2 = vue.useModel(__props, "modelValue");
const { timestampValue, effectiveColor, inputId: inputId2, isFocus, onFocus, onBlur, onClear, onPressEnter, notifyChange } = usePickerBase({
props,
mode: "datetime",
modelValue: modelValue2,
emit: emits
});
const propsRefs = vue.toRefs(props);
vue.provide(timePickerInjectKey, {
disabled: propsRefs.disabled,
readonly: propsRefs.readonly,
size: propsRefs.size,
round: propsRefs.round,
noResponsive: propsRefs.noResponsive,
popupPosition: propsRefs.popupPosition,
popupWrapper: propsRefs.popupWrapper,
transition: propsRefs.transition,
// 时间格式：从 format 中提取时间部分
format: vue.computed(() => {
const match = props.format.match(/HH:mm(?::ss)?/);
return match ? match[0] : "HH:mm:ss";
}),
// 时间约束：dateTimePickerProps 包含 timeConstraintProps，直接使用
hourStep: propsRefs.hourStep,
minuteStep: propsRefs.minuteStep,
secondStep: propsRefs.secondStep,
disabledHours: propsRefs.disabledHours,
disabledMinutes: propsRefs.disabledMinutes,
disabledSeconds: propsRefs.disabledSeconds,
minTime: vue.computed(() => {
var _a, _b, _c;
return ((_a = propsRefs.minTime) == null ? void 0 : _a.value) ?? (((_b = propsRefs.minDate) == null ? void 0 : _b.value) ? (_c = parseValue(propsRefs.minDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
}),
maxTime: vue.computed(() => {
var _a, _b, _c;
return ((_a = propsRefs.maxTime) == null ? void 0 : _a.value) ?? (((_b = propsRefs.maxDate) == null ? void 0 : _b.value) ? (_c = parseValue(propsRefs.maxDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
})
});
const onChange = (newVal, oldVal) => {
emits("change", newVal, oldVal);
notifyChange();
};
const inBoxRef = vue.ref();
const innerRef = vue.ref();
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.focus(open);
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.blur();
},
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.clear();
},
/**
* @zh-CN 获取输入框 DOM 元素
* @en-US Get the input DOM element
*/
inputEl: () => {
var _a;
return (_a = innerRef.value) == null ? void 0 : _a.inputEl();
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(
vue.unref(_sfc_main$1e),
vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: vue.unref(isFocus)
}, { class: ["o-date-picker", "o-datetime-picker", "o-input"] }),
vue.createSlots({
default: vue.withCtx(() => {
var _a;
return [
vue.createVNode(_sfc_main$e, {
ref_key: "innerRef",
ref: innerRef,
modelValue: vue.unref(timestampValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(timestampValue) ? timestampValue.value = $event : null),
"in-box-ref": (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"input-id": vue.unref(inputId2),
"has-icon": "",
onFocus: vue.unref(onFocus),
onBlur: vue.unref(onBlur),
onClear: vue.unref(onClear),
onPressEnter: vue.unref(onPressEnter),
onChange
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "in-box-ref", "input-id", "onFocus", "onBlur", "onClear", "onPressEnter"])
];
}),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
);
};
}
});
const END_UNIT_MAP = {
year: "year",
month: "month",
date: "day",
datetime: null
};
function toTimestamp(value) {
var _a;
if (isNil(value)) return void 0;
return (_a = parseValue(value)) == null ? void 0 : _a.valueOf();
}
function formatOut(ts, valueFormat) {
return valueFormat === "x" ? ts : dayjs(ts).format(valueFormat);
}
function useRangePickerBase(opts) {
const { props, mode, start, end, emit } = opts;
const propsRefs = vue.toRefs(props);
const formField = useFormField(props, emit);
const modeRef = vue.computed(() => mode);
const startTimestamp = vue.computed({
get: () => toTimestamp(start.value),
set: (ts) => {
start.value = isNil(ts) ? void 0 : formatOut(ts, props.valueFormat);
}
});
const endTimestamp = vue.computed({
get: () => toTimestamp(end.value),
set: (ts) => {
if (isNil(ts)) {
end.value = void 0;
return;
}
const unit = END_UNIT_MAP[mode];
const finalTs = unit ? dayjs(ts).endOf(unit).valueOf() : ts;
end.value = formatOut(finalTs, props.valueFormat);
}
});
vue.provide(datePickerInjectKey, {
...propsRefs,
mode: modeRef,
color: formField.effectiveColor
});
return { startTimestamp, endTimestamp, ...formField };
}
const _hoisted_1$9 = { class: "o-date-range-panel-body" };
const _hoisted_2$5 = {
key: 0,
class: "o-date-range-panel-side"
};
const _hoisted_3$3 = { class: "o-date-panel-content" };
const _hoisted_4$3 = { class: "o-date-range-panel-side" };
const _hoisted_5$2 = { class: "o-date-panel-content" };
const _hoisted_6$1 = { class: "o-date-range-panel-side" };
const _hoisted_7$1 = { class: "o-date-panel-content" };
const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
__name: "DateRangePanelContent",
props: {
"currentView": { required: true },
"currentViewModifiers": {}
},
emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:currentView"]),
setup(__props, { expose: __expose, emit: __emit }) {
const emits = __emit;
const datePickerCtx = vue.inject(datePickerInjectKey);
const { mode: effectiveMode, disabledDate, disabledMonth, disabledYear, minDate, maxDate } = datePickerCtx;
const getOffsetRight = (base) => {
if (effectiveMode.value === "year") return base.add(YEAR_VIEW_STEP, "year");
if (effectiveMode.value === "month") return base.add(1, "year");
return base.add(1, "month");
};
const dayStartOfWeek = vue.computed(() => {
var _a;
return ((_a = datePickerCtx.dayStartOfWeek) == null ? void 0 : _a.value) ?? 1;
});
const parsedMinDate = vue.computed(() => {
const v = minDate == null ? void 0 : minDate.value;
return v ? parseValue(v) : null;
});
const parsedMaxDate = vue.computed(() => {
const v = maxDate == null ? void 0 : maxDate.value;
return v ? parseValue(v) : null;
});
const anchorDate = vue.ref(null);
const rangeStart = vue.ref(null);
const rangeEnd = vue.ref(null);
const hoverDate = vue.ref(null);
const selecting = vue.ref("start");
const currentView = vue.useModel(__props, "currentView");
const activeSelectSide = vue.ref("left");
const isNavView = vue.computed(() => {
if (effectiveMode.value === "year") return false;
if (effectiveMode.value === "month") return currentView.value === "year";
return currentView.value !== "date";
});
const leftYear = vue.ref(0);
const leftMonth = vue.ref(0);
const { rows: leftCalRows, weekDayHeaders } = useCalendar({
displayYear: leftYear,
displayMonth: leftMonth,
selectedDate: vue.computed(() => [anchorDate.value ?? rangeStart.value, rangeEnd.value]),
dayStartOfWeek,
disabledDate,
minDate: parsedMinDate,
maxDate: parsedMaxDate,
rangeStart,
rangeEnd,
anchorDate,
hoverDate
});
const rightYear = vue.ref(0);
const rightMonth = vue.ref(0);
const navYear = vue.computed({
get: () => activeSelectSide.value === "left" ? leftYear.value : rightYear.value,
set: (v) => {
if (activeSelectSide.value === "left") leftYear.value = v;
else rightYear.value = v;
}
});
const navMonth = vue.computed({
get: () => activeSelectSide.value === "left" ? leftMonth.value : rightMonth.value,
set: (v) => {
if (activeSelectSide.value === "left") leftMonth.value = v;
else rightMonth.value = v;
}
});
let isInitializing = false;
const alignRightToLeft = (newLY, newLM) => {
if (newLY > rightYear.value || newLY === rightYear.value && newLM >= rightMonth.value) {
rightYear.value = newLY;
rightMonth.value = newLM + 1;
if (rightMonth.value > 11) {
rightYear.value += 1;
rightMonth.value = 0;
}
}
};
const alignLeftToRight = (newRY, newRM) => {
if (newRY < leftYear.value || newRY === leftYear.value && newRM <= leftMonth.value) {
leftYear.value = newRY;
leftMonth.value = newRM - 1;
if (leftMonth.value < 0) {
leftYear.value -= 1;
leftMonth.value = 11;
}
}
};
vue.watch(
[leftYear, leftMonth],
([newLY, newLM]) => {
if (isInitializing) return;
if (effectiveMode.value === "year") {
rightYear.value = newLY + YEAR_VIEW_STEP;
} else if (effectiveMode.value === "month") {
if (newLY >= rightYear.value) rightYear.value = newLY + 1;
} else {
alignRightToLeft(newLY, newLM);
}
},
{ flush: "sync" }
);
vue.watch(
[rightYear, rightMonth],
([newRY, newRM]) => {
if (isInitializing) return;
if (effectiveMode.value === "year") {
leftYear.value = newRY - YEAR_VIEW_STEP;
} else if (effectiveMode.value === "month") {
if (newRY <= leftYear.value) leftYear.value = newRY - 1;
} else {
alignLeftToRight(newRY, newRM);
}
},
{ flush: "sync" }
);
const { rows: rightCalRows } = useCalendar({
displayYear: rightYear,
displayMonth: rightMonth,
selectedDate: vue.computed(() => [anchorDate.value ?? rangeStart.value, rangeEnd.value]),
dayStartOfWeek,
disabledDate,
minDate: parsedMinDate,
maxDate: parsedMaxDate,
rangeStart,
rangeEnd,
anchorDate,
hoverDate
});
const getValue = () => {
var _a, _b;
return {
start: (_a = rangeStart.value) == null ? void 0 : _a.valueOf(),
end: (_b = rangeEnd.value) == null ? void 0 : _b.valueOf()
};
};
const toDayjs = (val) => val ? dayjs(val) : null;
const setRangeBothEnds = (start, end) => {
const startDate = dayjs(start);
leftYear.value = startDate.year();
leftMonth.value = startDate.month();
const endDate = dayjs(end);
const compareUnit = effectiveMode.value === "month" ? "year" : "month";
const sameUnit = startDate.isSame(endDate, compareUnit);
if (sameUnit) {
const offsetRight = getOffsetRight(startDate);
rightYear.value = offsetRight.year();
rightMonth.value = offsetRight.month();
} else {
rightYear.value = endDate.year();
rightMonth.value = endDate.month();
}
};
const setSingleEdge = (edgeVal) => {
const edgeDate = dayjs(edgeVal);
leftYear.value = edgeDate.year();
leftMonth.value = edgeDate.month();
rightYear.value = getOffsetRight(edgeDate).year();
rightMonth.value = getOffsetRight(edgeDate).month();
};
const setEmptyRange = () => {
leftYear.value = dayjs().year();
leftMonth.value = dayjs().month();
rightYear.value = getOffsetRight(dayjs()).year();
rightMonth.value = getOffsetRight(dayjs()).month();
};
const setValue = (start, end) => {
var _a;
rangeStart.value = toDayjs(start);
rangeEnd.value = toDayjs(end);
if (effectiveMode.value === "year") {
leftYear.value = ((_a = rangeStart.value) == null ? void 0 : _a.year()) ?? dayjs().year();
return;
}
if (start && end) {
setRangeBothEnds(start, end);
return;
}
if ([start, end].filter((v) => v).length === 1) {
setSingleEdge(start || end);
return;
}
setEmptyRange();
};
const init = (start, end) => {
selecting.value = "start";
anchorDate.value = null;
hoverDate.value = null;
currentView.value = effectiveMode.value === "datetime" ? "date" : effectiveMode.value;
setValue(start ?? void 0, end ?? void 0);
};
const modeUnitMap = { year: "year", month: "month" };
const finishSelection = (anchor, second) => {
const compareUnit = modeUnitMap[effectiveMode.value] ?? "day";
if (anchor.isAfter(second, compareUnit)) {
rangeStart.value = second;
rangeEnd.value = anchor;
} else {
rangeStart.value = anchor;
rangeEnd.value = second;
}
anchorDate.value = null;
selecting.value = "start";
const { start: s, end: e } = getValue();
emits("change", s, e);
};
const handleSelectDate = (date) => {
if (selecting.value === "start" || !anchorDate.value) {
anchorDate.value = date;
rangeStart.value = null;
rangeEnd.value = null;
hoverDate.value = null;
selecting.value = "end";
} else {
finishSelection(anchorDate.value, date);
hoverDate.value = null;
}
};
const handleHover = (date) => {
if (selecting.value === "end") hoverDate.value = date;
};
const handleLeave = () => {
if (selecting.value === "end") hoverDate.value = null;
};
const handleSelectMonth = (month, isRight = false) => {
const year = isRight ? rightYear.value : leftYear.value;
if (effectiveMode.value === "month") {
const date = dayjs().year(year).month(month).date(1).startOf("day");
if (selecting.value === "start" || !anchorDate.value) {
anchorDate.value = date;
rangeStart.value = null;
rangeEnd.value = null;
selecting.value = "end";
} else {
finishSelection(anchorDate.value, date);
}
} else {
if (activeSelectSide.value === "right") {
rightMonth.value = month;
} else {
leftMonth.value = month;
}
currentView.value = "date";
}
};
const handleSelectYear = (year) => {
if (effectiveMode.value === "year") {
const date = dayjs().year(year).month(0).date(1).startOf("day");
if (selecting.value === "start" || !anchorDate.value) {
anchorDate.value = date;
rangeStart.value = null;
rangeEnd.value = null;
selecting.value = "end";
} else {
finishSelection(anchorDate.value, date);
}
} else if (effectiveMode.value === "month") {
if (activeSelectSide.value === "right") {
rightYear.value = year;
} else {
leftYear.value = year;
}
currentView.value = "month";
} else {
if (activeSelectSide.value === "right") {
rightYear.value = year;
} else {
leftYear.value = year;
}
currentView.value = "date";
}
};
vue.onMounted(() => {
isInitializing = true;
leftYear.value = dayjs().year();
leftMonth.value = dayjs().month();
rightYear.value = getOffsetRight(dayjs()).year();
rightMonth.value = getOffsetRight(dayjs()).month();
isInitializing = false;
});
__expose({
getValue,
setValue,
init
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
vue.createCommentVNode(" Mobile & Desktop: dual calendar "),
vue.createElementVNode("div", _hoisted_1$9, [
vue.createCommentVNode(" 导航视图（二级单点选择）：只渲染触发侧的单个面板，无范围高亮 "),
isNavView.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
vue.createElementVNode("div", _hoisted_3$3, [
vue.createVNode(_sfc_main$l, {
year: navYear.value,
"onUpdate:year": _cache[0] || (_cache[0] = ($event) => navYear.value = $event),
month: navMonth.value,
"onUpdate:month": _cache[1] || (_cache[1] = ($event) => navMonth.value = $event),
"current-view": currentView.value,
"onUpdate:currentView": _cache[2] || (_cache[2] = ($event) => currentView.value = $event),
onClickYear: () => {
},
onClickMonth: () => {
}
}, null, 8, ["year", "month", "current-view"]),
vue.createVNode(vue.unref(ODivider), { class: "o-date-panel-divider" }),
currentView.value === "month" ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
key: 0,
year: navYear.value,
"selected-date": null,
"disabled-month": vue.unref(disabledMonth),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": null,
"range-end": null,
"hover-month": null,
onSelect: _cache[3] || (_cache[3] = (m) => handleSelectMonth(m, activeSelectSide.value === "right")),
onHover: () => {
}
}, null, 8, ["year", "disabled-month", "min-date", "max-date"])) : (vue.openBlock(), vue.createBlock(_sfc_main$i, {
key: 1,
year: navYear.value,
"selected-date": null,
"disabled-year": vue.unref(disabledYear),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": null,
"range-end": null,
"hover-year": null,
"hide-out-of-decade": false,
onSelect: handleSelectYear,
onHover: () => {
}
}, null, 8, ["year", "disabled-year", "min-date", "max-date"]))
])
])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" 主范围选择视图：双面板 + 范围高亮 "),
vue.createCommentVNode(" Left panel "),
vue.createElementVNode("div", _hoisted_4$3, [
vue.createElementVNode("div", _hoisted_5$2, [
vue.createVNode(_sfc_main$l, {
year: leftYear.value,
"onUpdate:year": _cache[4] || (_cache[4] = ($event) => leftYear.value = $event),
month: leftMonth.value,
"onUpdate:month": _cache[5] || (_cache[5] = ($event) => leftMonth.value = $event),
"current-view": currentView.value,
"onUpdate:currentView": _cache[6] || (_cache[6] = ($event) => currentView.value = $event),
"hide-right-nav": vue.unref(effectiveMode) === "year",
onClickYear: _cache[7] || (_cache[7] = ($event) => activeSelectSide.value = "left"),
onClickMonth: _cache[8] || (_cache[8] = ($event) => activeSelectSide.value = "left")
}, null, 8, ["year", "month", "current-view", "hide-right-nav"]),
vue.createVNode(vue.unref(ODivider), { class: "o-date-panel-divider" }),
currentView.value === "date" ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
key: 0,
rows: vue.unref(leftCalRows),
"week-day-headers": vue.unref(weekDayHeaders),
onSelect: handleSelectDate,
onHover: handleHover,
onLeave: handleLeave
}, null, 8, ["rows", "week-day-headers"])) : currentView.value === "month" ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
key: 1,
year: leftYear.value,
"selected-date": null,
"disabled-month": vue.unref(disabledMonth),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": rangeStart.value,
"range-end": rangeEnd.value,
"anchor-month": selecting.value === "end" ? anchorDate.value : null,
"hover-month": selecting.value === "end" ? hoverDate.value : null,
onSelect: _cache[9] || (_cache[9] = (m) => handleSelectMonth(m, false)),
onHover: handleHover
}, null, 8, ["year", "disabled-month", "min-date", "max-date", "range-start", "range-end", "anchor-month", "hover-month"])) : (vue.openBlock(), vue.createBlock(_sfc_main$i, {
key: 2,
year: leftYear.value,
"selected-date": null,
"disabled-year": vue.unref(disabledYear),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": rangeStart.value,
"range-end": rangeEnd.value,
"anchor-year": selecting.value === "end" ? anchorDate.value : null,
"hover-year": selecting.value === "end" ? hoverDate.value : null,
"hide-out-of-decade": vue.unref(effectiveMode) === "year",
onSelect: handleSelectYear,
onHover: handleHover
}, null, 8, ["year", "disabled-year", "min-date", "max-date", "range-start", "range-end", "anchor-year", "hover-year", "hide-out-of-decade"]))
])
]),
vue.createCommentVNode(" Right panel "),
vue.createElementVNode("div", _hoisted_6$1, [
vue.createElementVNode("div", _hoisted_7$1, [
vue.createVNode(_sfc_main$l, {
year: rightYear.value,
"onUpdate:year": _cache[10] || (_cache[10] = ($event) => rightYear.value = $event),
month: rightMonth.value,
"onUpdate:month": _cache[11] || (_cache[11] = ($event) => rightMonth.value = $event),
"current-view": currentView.value,
"onUpdate:currentView": _cache[12] || (_cache[12] = ($event) => currentView.value = $event),
"hide-left-nav": vue.unref(effectiveMode) === "year",
onClickYear: _cache[13] || (_cache[13] = ($event) => activeSelectSide.value = "right"),
onClickMonth: _cache[14] || (_cache[14] = ($event) => activeSelectSide.value = "right")
}, null, 8, ["year", "month", "current-view", "hide-left-nav"]),
vue.createVNode(vue.unref(ODivider), { class: "o-date-panel-divider" }),
currentView.value === "date" ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
key: 0,
rows: vue.unref(rightCalRows),
"week-day-headers": vue.unref(weekDayHeaders),
onSelect: handleSelectDate,
onHover: handleHover,
onLeave: handleLeave
}, null, 8, ["rows", "week-day-headers"])) : currentView.value === "month" ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
key: 1,
year: rightYear.value,
"selected-date": null,
"disabled-month": vue.unref(disabledMonth),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": rangeStart.value,
"range-end": rangeEnd.value,
"anchor-month": selecting.value === "end" ? anchorDate.value : null,
"hover-month": selecting.value === "end" ? hoverDate.value : null,
onSelect: _cache[15] || (_cache[15] = (m) => handleSelectMonth(m, true)),
onHover: handleHover
}, null, 8, ["year", "disabled-month", "min-date", "max-date", "range-start", "range-end", "anchor-month", "hover-month"])) : (vue.openBlock(), vue.createBlock(_sfc_main$i, {
key: 2,
year: rightYear.value,
"selected-date": null,
"disabled-year": vue.unref(disabledYear),
"min-date": parsedMinDate.value,
"max-date": parsedMaxDate.value,
"range-start": rangeStart.value,
"range-end": rangeEnd.value,
"anchor-year": selecting.value === "end" ? anchorDate.value : null,
"hover-year": selecting.value === "end" ? hoverDate.value : null,
"hide-out-of-decade": vue.unref(effectiveMode) === "year",
onSelect: handleSelectYear,
onHover: handleHover
}, null, 8, ["year", "disabled-year", "min-date", "max-date", "range-start", "range-end", "anchor-year", "hover-year", "hide-out-of-decade"]))
])
])
],
64
/* STABLE_FRAGMENT */
))
])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
);
};
}
});
const _hoisted_1$8 = { class: "o-date-panel-footer" };
const _hoisted_2$4 = { class: "o-date-panel-shortcut" };
const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
__name: "DateRangePanel",
props: {
target: {},
optionTitle: {}
},
emits: ["change"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const visible = vue.ref(false);
const currentView = vue.ref("date");
const datePickerCtx = vue.inject(datePickerInjectKey);
const { size: size2, mode: effectiveMode, transition: transition2, popupPosition: popupPosition2, popupWrapper: popupWrapper2 } = datePickerCtx;
const popupRef = vue.ref();
const contentRef = vue.ref();
const isMainPanel = vue.computed(() => {
if (effectiveMode.value === "year") return currentView.value === "year";
if (effectiveMode.value === "month") return currentView.value === "month";
return currentView.value === "date";
});
const getValue = () => {
var _a;
return ((_a = contentRef.value) == null ? void 0 : _a.getValue()) ?? { start: void 0, end: void 0 };
};
const setValue = (start, end) => {
var _a;
(_a = contentRef.value) == null ? void 0 : _a.setValue(start, end);
};
const open = async (start, end) => {
var _a;
if (visible.value) return;
visible.value = true;
await core.until(contentRef).toBeTruthy();
(_a = contentRef.value) == null ? void 0 : _a.init(start, end);
};
const close2 = () => {
visible.value = false;
};
const handleContentChange = (start, end) => {
emits("change", start, end);
};
__expose({
getPopupEl: () => popupRef.value,
getValue,
setValue,
open,
close: close2
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(OPopup), {
visible: visible.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
class: vue.normalizeClass(["o-date-panel", `o-date-panel-${vue.unref(size2)}`, "o-date-range-panel"]),
"hide-close": "",
target: props.target,
transition: vue.unref(transition2),
position: vue.unref(popupPosition2),
wrapper: vue.unref(popupWrapper2),
trigger: "none",
offset: 4,
"adjust-min-width": false,
"adjust-width": false
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "popupRef",
ref: popupRef
},
[
vue.createVNode(_sfc_main$9, {
ref_key: "contentRef",
ref: contentRef,
"current-view": currentView.value,
"onUpdate:currentView": _cache[0] || (_cache[0] = ($event) => currentView.value = $event),
onChange: handleContentChange
}, null, 8, ["current-view"]),
!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) && isMainPanel.value ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createVNode(vue.unref(ODivider), { class: "o-date-panel-divider" }),
vue.createElementVNode("div", _hoisted_1$8, [
vue.createElementVNode("span", _hoisted_2$4, [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange: () => emits("change", getValue().start, getValue().end)
})
])
])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "class", "target", "transition", "position", "wrapper"])
]),
_: 3
/* FORWARDED */
});
};
}
});
const _hoisted_1$7 = {
key: 0,
class: "o_input-suffix-icon"
};
const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
__name: "OYearRangePicker",
props: /* @__PURE__ */ vue.mergeModels(yearRangePickerProps, {
"start": { default: void 0 },
"startModifiers": {},
"end": { default: void 0 },
"endModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear"], ["update:start", "update:end"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const start = vue.useModel(__props, "start");
const end = vue.useModel(__props, "end");
const {
startTimestamp,
endTimestamp,
effectiveColor,
onFocus: baseOnFocus,
notifyChange
} = useRangePickerBase({ props, mode: "year", start, end, emit: emits });
const { t } = useI18n();
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => !props.noResponsive && isPhonePad.value);
const format2 = vue.computed(() => props.format ?? "YYYY");
const toDisplayStr = (ts) => {
var _a;
if (ts === void 0) return "";
return ((_a = parseValue(ts)) == null ? void 0 : _a.format(format2.value)) ?? "";
};
const tempStart = vue.computed(() => toDisplayStr(startTimestamp.value));
const tempEnd = vue.computed(() => toDisplayStr(endTimestamp.value));
const startFocused = vue.ref(false);
const endFocused = vue.ref(false);
const anyFocused = vue.computed(() => startFocused.value || endFocused.value);
vue.watch(anyFocused, (newVal, oldVal) => {
if (!newVal && oldVal) {
emits("blur");
}
});
const inBoxRef = vue.ref();
const startInputRef = vue.ref();
const endInputRef = vue.ref();
const panelRef = vue.ref();
const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly && (!!tempStart.value || !!tempEnd.value));
let skipOpenPanel = false;
const openPanel = () => {
var _a;
if (props.disabled || props.readonly) return;
(_a = panelRef.value) == null ? void 0 : _a.open(startTimestamp.value, endTimestamp.value);
};
const closeAndBlur = () => {
var _a, _b, _c;
(_a = panelRef.value) == null ? void 0 : _a.close();
startFocused.value = false;
endFocused.value = false;
(_b = startInputRef.value) == null ? void 0 : _b.blur();
(_c = endInputRef.value) == null ? void 0 : _c.blur();
};
const onStartFocus = (e) => {
if (!anyFocused.value) {
baseOnFocus(e);
}
startFocused.value = true;
if (!skipOpenPanel) openPanel();
skipOpenPanel = false;
};
const onEndFocus = (e) => {
if (!anyFocused.value) {
baseOnFocus(e);
}
endFocused.value = true;
openPanel();
};
useClickOutside({
targets: [() => {
var _a;
return (_a = inBoxRef.value) == null ? void 0 : _a.$el;
}, () => {
var _a;
return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
}],
onOutside: () => closeAndBlur(),
disabled: isResponding
});
const handlePanelChange = (newStart, newEnd) => {
startTimestamp.value = newStart;
endTimestamp.value = newEnd;
if (newStart && newEnd || !newStart && !newEnd) {
emits("change", start.value, end.value);
notifyChange();
if (newStart && newEnd) closeAndBlur();
}
};
const onClear = (e) => {
e == null ? void 0 : e.stopPropagation();
startTimestamp.value = void 0;
endTimestamp.value = void 0;
emits("clear", e);
emits("change", void 0, void 0);
notifyChange();
closeAndBlur();
};
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
if (!open) skipOpenPanel = true;
(_a = startInputRef.value) == null ? void 0 : _a.focus();
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => closeAndBlur(),
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => onClear()
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$1e), vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: !!anyFocused.value
}, {
class: ["o-date-picker", "o-year-range-picker", "o-time-picker", "o-time-range-picker", { "o_input-clearable": isClearable.value }, "o-input"]
}), vue.createSlots({
default: vue.withCtx(() => [
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "startInputRef",
ref: startInputRef,
"model-value": tempStart.value,
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": startFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderStart ?? vue.unref(t)("dateRangePicker.placeholderStart"),
"max-length": format2.value.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onStartFocus
}, {
extra: vue.withCtx(() => {
var _a;
return [
!_ctx.disabled && !_ctx.readonly ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"option-title": props.optionTitle,
onChange: handlePanelChange
}, {
shortcut: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
_: 3
/* FORWARDED */
}, 8, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
];
}),
_: 3
/* FORWARDED */
}, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
_cache[2] || (_cache[2] = vue.createElementVNode(
"div",
{ class: "o-date-range-picker-divider" },
"-",
-1
/* CACHED */
)),
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "endInputRef",
ref: endInputRef,
"model-value": tempEnd.value,
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": endFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderEnd ?? vue.unref(t)("dateRangePicker.placeholderEnd"),
"max-length": format2.value.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onEndFocus
}, null, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
vue.createElementVNode(
"div",
{
class: "o_input-suffix",
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
!isResponding.value || !isClearable.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$7, [
vue.createVNode(vue.unref(IconCalendar))
])) : vue.createCommentVNode("v-if", true),
isClearable.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_input-clear",
onClick: onClear,
onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createVNode(vue.unref(IconClose), { class: "o_input-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)
]),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]), 1040, ["class"]);
};
}
});
const _hoisted_1$6 = {
key: 0,
class: "o_input-suffix-icon"
};
const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
__name: "OMonthRangePicker",
props: /* @__PURE__ */ vue.mergeModels(monthRangePickerProps, {
"start": { default: void 0 },
"startModifiers": {},
"end": { default: void 0 },
"endModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear"], ["update:start", "update:end"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const start = vue.useModel(__props, "start");
const end = vue.useModel(__props, "end");
const {
startTimestamp,
endTimestamp,
effectiveColor,
onFocus: baseOnFocus,
notifyChange
} = useRangePickerBase({ props, mode: "month", start, end, emit: emits });
const { t } = useI18n();
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => !props.noResponsive && isPhonePad.value);
const format2 = vue.computed(() => props.format ?? "YYYY-MM");
const toDisplayStr = (ts) => {
var _a;
if (ts === void 0) return "";
return ((_a = parseValue(ts)) == null ? void 0 : _a.format(format2.value)) ?? "";
};
const tempStart = vue.computed(() => toDisplayStr(startTimestamp.value));
const tempEnd = vue.computed(() => toDisplayStr(endTimestamp.value));
const startFocused = vue.ref(false);
const endFocused = vue.ref(false);
const anyFocused = vue.computed(() => startFocused.value || endFocused.value);
vue.watch(anyFocused, (newVal, oldVal) => {
if (!newVal && oldVal) {
emits("blur");
}
});
const inBoxRef = vue.ref();
const startInputRef = vue.ref();
const endInputRef = vue.ref();
const panelRef = vue.ref();
const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly && (!!tempStart.value || !!tempEnd.value));
let skipOpenPanel = false;
const openPanel = () => {
var _a;
if (props.disabled || props.readonly) return;
(_a = panelRef.value) == null ? void 0 : _a.open(startTimestamp.value, endTimestamp.value);
};
const closeAndBlur = () => {
var _a, _b, _c;
(_a = panelRef.value) == null ? void 0 : _a.close();
startFocused.value = false;
endFocused.value = false;
(_b = startInputRef.value) == null ? void 0 : _b.blur();
(_c = endInputRef.value) == null ? void 0 : _c.blur();
};
const onStartFocus = (e) => {
if (!anyFocused.value) {
baseOnFocus(e);
}
startFocused.value = true;
if (!skipOpenPanel) openPanel();
skipOpenPanel = false;
};
const onEndFocus = (e) => {
if (!anyFocused.value) {
baseOnFocus(e);
}
endFocused.value = true;
openPanel();
};
useClickOutside({
targets: [() => {
var _a;
return (_a = inBoxRef.value) == null ? void 0 : _a.$el;
}, () => {
var _a;
return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
}],
onOutside: () => closeAndBlur(),
disabled: isResponding
});
const handlePanelChange = (newStart, newEnd) => {
startTimestamp.value = newStart;
endTimestamp.value = newEnd;
if (newStart && newEnd || !newStart && !newEnd) {
emits("change", start.value, end.value);
notifyChange();
if (newStart && newEnd) closeAndBlur();
}
};
const onClear = (e) => {
e == null ? void 0 : e.stopPropagation();
startTimestamp.value = void 0;
endTimestamp.value = void 0;
emits("clear", e);
emits("change", void 0, void 0);
notifyChange();
closeAndBlur();
};
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
if (!open) skipOpenPanel = true;
(_a = startInputRef.value) == null ? void 0 : _a.focus();
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => closeAndBlur(),
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => onClear()
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$1e), vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: !!anyFocused.value
}, {
class: ["o-date-picker", "o-month-range-picker", "o-time-picker", "o-time-range-picker", { "o_input-clearable": isClearable.value }, "o-input"]
}), vue.createSlots({
default: vue.withCtx(() => [
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "startInputRef",
ref: startInputRef,
"model-value": tempStart.value,
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": startFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderStart ?? vue.unref(t)("dateRangePicker.placeholderStart"),
"max-length": format2.value.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onStartFocus
}, {
extra: vue.withCtx(() => {
var _a;
return [
!_ctx.disabled && !_ctx.readonly ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"option-title": props.optionTitle,
onChange: handlePanelChange
}, {
shortcut: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
_: 3
/* FORWARDED */
}, 8, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
];
}),
_: 3
/* FORWARDED */
}, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
_cache[2] || (_cache[2] = vue.createElementVNode(
"div",
{ class: "o-date-range-picker-divider" },
"-",
-1
/* CACHED */
)),
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "endInputRef",
ref: endInputRef,
"model-value": tempEnd.value,
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": endFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderEnd ?? vue.unref(t)("dateRangePicker.placeholderEnd"),
"max-length": format2.value.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onEndFocus
}, null, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
vue.createElementVNode(
"div",
{
class: "o_input-suffix",
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
!isResponding.value || !isClearable.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$6, [
vue.createVNode(vue.unref(IconCalendar))
])) : vue.createCommentVNode("v-if", true),
isClearable.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_input-clear",
onClick: onClear,
onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createVNode(vue.unref(IconClose), { class: "o_input-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)
]),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]), 1040, ["class"]);
};
}
});
const _hoisted_1$5 = {
key: 0,
class: "o_input-suffix-icon"
};
const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
__name: "ODateRangePicker",
props: /* @__PURE__ */ vue.mergeModels(dateRangePickerProps, {
"start": { default: void 0 },
"startModifiers": {},
"end": { default: void 0 },
"endModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear"], ["update:start", "update:end"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const start = vue.useModel(__props, "start");
const end = vue.useModel(__props, "end");
const {
startTimestamp,
endTimestamp,
effectiveColor,
onFocus: baseOnFocus,
notifyChange
} = useRangePickerBase({ props, mode: "date", start, end, emit: emits });
const { t } = useI18n();
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => !props.noResponsive && isPhonePad.value);
const toDisplayStr = (ts) => {
var _a;
if (ts === void 0) return "";
return ((_a = parseValue(ts)) == null ? void 0 : _a.format(props.format)) ?? "";
};
const tempStart = vue.computed(() => toDisplayStr(startTimestamp.value));
const tempEnd = vue.computed(() => toDisplayStr(endTimestamp.value));
const startFocused = vue.ref(false);
const endFocused = vue.ref(false);
const anyFocused = vue.computed(() => startFocused.value || endFocused.value);
vue.watch(anyFocused, (newVal, oldVal) => {
if (!newVal && oldVal) {
emits("blur");
}
});
const inBoxRef = vue.ref();
const startInputRef = vue.ref();
const endInputRef = vue.ref();
const panelRef = vue.ref();
const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly && (!!tempStart.value || !!tempEnd.value));
let skipOpenPanel = false;
const openPanel = () => {
var _a;
if (props.disabled || props.readonly) return;
(_a = panelRef.value) == null ? void 0 : _a.open(startTimestamp.value, endTimestamp.value);
};
const closeAndBlur = () => {
var _a, _b, _c;
(_a = panelRef.value) == null ? void 0 : _a.close();
startFocused.value = false;
endFocused.value = false;
(_b = startInputRef.value) == null ? void 0 : _b.blur();
(_c = endInputRef.value) == null ? void 0 : _c.blur();
};
const onStartFocus = (e) => {
if (!anyFocused.value) {
baseOnFocus(e);
}
startFocused.value = true;
if (!skipOpenPanel) openPanel();
skipOpenPanel = false;
};
const onEndFocus = (e) => {
if (!anyFocused.value) {
baseOnFocus(e);
}
endFocused.value = true;
openPanel();
};
useClickOutside({
targets: [() => {
var _a;
return (_a = inBoxRef.value) == null ? void 0 : _a.$el;
}, () => {
var _a;
return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
}],
onOutside: () => closeAndBlur(),
disabled: isResponding
});
const handlePanelChange = (newStart, newEnd) => {
startTimestamp.value = newStart;
endTimestamp.value = newEnd;
if (newStart && newEnd || !newStart && !newEnd) {
emits("change", start.value, end.value);
notifyChange();
if (newStart && newEnd) closeAndBlur();
}
};
const onClear = (e) => {
e == null ? void 0 : e.stopPropagation();
startTimestamp.value = void 0;
endTimestamp.value = void 0;
emits("clear", e);
emits("change", void 0, void 0);
notifyChange();
closeAndBlur();
};
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
if (!open) skipOpenPanel = true;
(_a = startInputRef.value) == null ? void 0 : _a.focus();
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => closeAndBlur(),
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => onClear()
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$1e), vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: !!anyFocused.value
}, {
class: ["o-date-picker", "o-date-range-picker", "o-time-picker", "o-time-range-picker", { "o_input-clearable": isClearable.value }, "o-input"]
}), vue.createSlots({
default: vue.withCtx(() => [
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "startInputRef",
ref: startInputRef,
"model-value": tempStart.value,
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": startFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderStart ?? vue.unref(t)("dateRangePicker.placeholderStart"),
"max-length": props.format.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onStartFocus
}, {
extra: vue.withCtx(() => {
var _a;
return [
!_ctx.disabled && !_ctx.readonly ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"option-title": props.optionTitle,
onChange: handlePanelChange
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
];
}),
_: 3
/* FORWARDED */
}, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
_cache[2] || (_cache[2] = vue.createElementVNode(
"div",
{ class: "o-date-range-picker-divider" },
"-",
-1
/* CACHED */
)),
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "endInputRef",
ref: endInputRef,
"model-value": tempEnd.value,
class: vue.normalizeClass(["o-input-wrap", { "o-input-wrap-focused": endFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderEnd ?? vue.unref(t)("dateRangePicker.placeholderEnd"),
"max-length": props.format.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onEndFocus
}, null, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
vue.createElementVNode(
"div",
{
class: "o_input-suffix",
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
!isResponding.value || !isClearable.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$5, [
vue.createVNode(vue.unref(IconCalendar))
])) : vue.createCommentVNode("v-if", true),
isClearable.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_input-clear",
onClick: onClear,
onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createVNode(vue.unref(IconClose), { class: "o_input-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)
]),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]), 1040, ["class"]);
};
}
});
const _hoisted_1$4 = { class: "o-date-range-panel-body" };
const _hoisted_2$3 = { class: "o-date-range-panel-side o-time-panel-content" };
const _hoisted_3$2 = { class: "o-date-range-panel-side o-time-panel-content" };
const _hoisted_4$2 = { class: "o-date-panel-footer" };
const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
__name: "DateTimeRangePanel",
props: {
target: {},
optionTitle: {}
},
emits: ["change", "confirm"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const visible = vue.ref(false);
const datePickerCtx = vue.inject(datePickerInjectKey);
const ctx = datePickerCtx;
const { size: size2, transition: transition2, popupPosition: popupPosition2, popupWrapper: popupWrapper2 } = datePickerCtx;
const { t } = useI18n();
const timeFormat = vue.computed(() => {
var _a;
const fmt = ((_a = datePickerCtx.format) == null ? void 0 : _a.value) ?? "YYYY-MM-DD HH:mm:ss";
const match = fmt.match(/HH:mm(?::ss)?/);
return match ? match[0] : "HH:mm:ss";
});
const hourStep2 = ctx.hourStep ?? vue.ref(1);
const minuteStep2 = ctx.minuteStep ?? vue.ref(1);
const secondStep2 = ctx.secondStep ?? vue.ref(1);
vue.provide(timePickerInjectKey, {
disabled: datePickerCtx.disabled,
readonly: datePickerCtx.readonly,
size: datePickerCtx.size,
round: datePickerCtx.round,
noResponsive: datePickerCtx.noResponsive,
popupPosition: popupPosition2,
popupWrapper: popupWrapper2,
transition: datePickerCtx.transition,
format: timeFormat,
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
disabledHours: ctx.disabledHours ?? vue.ref(void 0),
disabledMinutes: ctx.disabledMinutes ?? vue.ref(void 0),
disabledSeconds: ctx.disabledSeconds ?? vue.ref(void 0),
minTime: vue.computed(() => {
var _a, _b, _c;
return ((_a = ctx.minTime) == null ? void 0 : _a.value) ?? (((_b = datePickerCtx.minDate) == null ? void 0 : _b.value) ? (_c = parseValue(datePickerCtx.minDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
}),
maxTime: vue.computed(() => {
var _a, _b, _c;
return ((_a = ctx.maxTime) == null ? void 0 : _a.value) ?? (((_b = datePickerCtx.maxDate) == null ? void 0 : _b.value) ? (_c = parseValue(datePickerCtx.maxDate.value)) == null ? void 0 : _c.format("HH:mm:ss") : void 0);
})
});
const isTimeView = vue.ref(false);
const currentView = vue.ref("date");
const isMainPanel = vue.computed(() => {
if (isTimeView.value) return false;
return currentView.value === "date";
});
const hasBothDates = vue.ref(false);
const popupRef = vue.ref();
const contentRef = vue.ref();
const startColumnsRef = vue.ref();
const endColumnsRef = vue.ref();
const startTime = vue.ref("00:00:00");
const endTime = vue.ref("23:59:59");
const cachedStartDate = vue.ref();
const cachedEndDate = vue.ref();
const isSameDay = vue.computed(() => {
if (!cachedStartDate.value || !cachedEndDate.value) return false;
const s = new Date(cachedStartDate.value);
const e = new Date(cachedEndDate.value);
return s.getFullYear() === e.getFullYear() && s.getMonth() === e.getMonth() && s.getDate() === e.getDate();
});
const { maxStartTime: sameDayMaxStart, minEndTime: sameDayMinEnd } = useTimeRangeConstraints({
startTime,
endTime,
format: timeFormat,
hourStep: hourStep2,
minuteStep: minuteStep2,
secondStep: secondStep2,
enabled: isSameDay
});
const getMergedStart = () => {
var _a, _b;
const dateTs = ((_a = contentRef.value) == null ? void 0 : _a.getValue().start) ?? cachedStartDate.value;
if (!dateTs) return void 0;
const timeStr = ((_b = startColumnsRef.value) == null ? void 0 : _b.getValue()) ?? startTime.value;
const [h = 0, m = 0, s = 0] = timeStr.split(":").map(Number);
return new Date(dateTs).setHours(h, m, s, 0);
};
const getMergedEnd = () => {
var _a, _b;
const dateTs = ((_a = contentRef.value) == null ? void 0 : _a.getValue().end) ?? cachedEndDate.value;
if (!dateTs) return void 0;
const timeStr = ((_b = endColumnsRef.value) == null ? void 0 : _b.getValue()) ?? endTime.value;
const [h = 23, m = 59, s = 59] = timeStr.split(":").map(Number);
return new Date(dateTs).setHours(h, m, s, 999);
};
const initTimeFromTs = (ts, fallback) => {
if (!ts) return fallback;
const d = new Date(ts);
return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}:${String(d.getSeconds()).padStart(2, "0")}`;
};
const open = async (start, end) => {
if (visible.value) return;
visible.value = true;
isTimeView.value = false;
hasBothDates.value = start !== void 0 && end !== void 0;
cachedStartDate.value = start;
cachedEndDate.value = end;
await core.until(contentRef).toBeTruthy();
contentRef.value.init(start, end);
startTime.value = initTimeFromTs(start, "00:00:00");
endTime.value = initTimeFromTs(end, "23:59:59");
};
const close2 = () => {
visible.value = false;
};
const setValueFromShortcut = (start, end) => {
var _a;
(_a = contentRef.value) == null ? void 0 : _a.setValue(start, end);
hasBothDates.value = start !== void 0 && end !== void 0;
cachedStartDate.value = start;
cachedEndDate.value = end;
startTime.value = initTimeFromTs(start, "00:00:00");
endTime.value = initTimeFromTs(end, "23:59:59");
if (isTimeView.value) {
vue.nextTick(() => {
var _a2, _b;
(_a2 = startColumnsRef.value) == null ? void 0 : _a2.setValue(startTime.value);
(_b = endColumnsRef.value) == null ? void 0 : _b.setValue(endTime.value);
});
}
};
const handleDateChange = (start, end) => {
hasBothDates.value = start !== void 0 && end !== void 0;
cachedStartDate.value = start;
cachedEndDate.value = end;
if (hasBothDates.value) {
emits("change", getMergedStart(), getMergedEnd());
}
};
const handleTimeStartChange = (val) => {
var _a, _b;
if (!val) return;
startTime.value = val;
if (endTime.value && sameDayMinEnd.value && isTimeBefore(endTime.value, sameDayMinEnd.value)) {
endTime.value = sameDayMinEnd.value;
(_a = endColumnsRef.value) == null ? void 0 : _a.setValue(endTime.value);
(_b = endColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
};
const handleTimeEndChange = (val) => {
var _a, _b;
if (!val) return;
endTime.value = val;
if (startTime.value && sameDayMaxStart.value && isTimeAfter(startTime.value, sameDayMaxStart.value)) {
startTime.value = sameDayMaxStart.value;
(_a = startColumnsRef.value) == null ? void 0 : _a.setValue(startTime.value);
(_b = startColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(true);
}
};
const handleConfirm = () => {
emits("confirm", getMergedStart(), getMergedEnd());
close2();
};
const handleSwitchToTime = () => {
var _a, _b;
cachedStartDate.value = ((_a = contentRef.value) == null ? void 0 : _a.getValue().start) ?? cachedStartDate.value;
cachedEndDate.value = ((_b = contentRef.value) == null ? void 0 : _b.getValue().end) ?? cachedEndDate.value;
isTimeView.value = true;
vue.nextTick(() => {
var _a2, _b2, _c, _d;
(_a2 = startColumnsRef.value) == null ? void 0 : _a2.setValue(startTime.value);
(_b2 = startColumnsRef.value) == null ? void 0 : _b2.scrollAllToSelected(false);
(_c = endColumnsRef.value) == null ? void 0 : _c.setValue(endTime.value);
(_d = endColumnsRef.value) == null ? void 0 : _d.scrollAllToSelected(false);
});
};
const handleSwitchToDate = () => {
var _a, _b;
const sv = (_a = startColumnsRef.value) == null ? void 0 : _a.getValue();
if (sv) startTime.value = sv;
const ev = (_b = endColumnsRef.value) == null ? void 0 : _b.getValue();
if (ev) endTime.value = ev;
isTimeView.value = false;
};
const toggleView = () => {
if (!isTimeView.value) {
handleSwitchToTime();
} else {
handleSwitchToDate();
}
};
__expose({
getPopupEl: () => popupRef.value,
open,
close: close2,
setValue: setValueFromShortcut
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(OPopup), {
visible: visible.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
class: vue.normalizeClass(["o-date-panel", `o-date-panel-${vue.unref(size2)}`, "o-time-panel", `o-time-panel-${vue.unref(size2)}`, "o-date-range-panel", "o-datetime-range-panel"]),
"hide-close": "",
target: props.target,
transition: vue.unref(transition2),
position: vue.unref(popupPosition2),
wrapper: vue.unref(popupWrapper2),
trigger: "none",
offset: 4,
"adjust-min-width": false,
"adjust-width": false
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "popupRef",
ref: popupRef
},
[
vue.createCommentVNode(" Date view "),
!isTimeView.value ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
key: 0,
ref_key: "contentRef",
ref: contentRef,
"current-view": currentView.value,
"onUpdate:currentView": _cache[0] || (_cache[0] = ($event) => currentView.value = $event),
onChange: handleDateChange
}, null, 8, ["current-view"])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" Time view "),
vue.createElementVNode("div", _hoisted_1$4, [
vue.createElementVNode("div", _hoisted_2$3, [
vue.createVNode(_sfc_main$q, {
ref_key: "startColumnsRef",
ref: startColumnsRef,
"max-time": vue.unref(sameDayMaxStart),
onChange: handleTimeStartChange
}, null, 8, ["max-time"])
]),
vue.createElementVNode("div", _hoisted_3$2, [
vue.createVNode(_sfc_main$q, {
ref_key: "endColumnsRef",
ref: endColumnsRef,
"min-time": vue.unref(sameDayMinEnd),
onChange: handleTimeEndChange
}, null, 8, ["min-time"])
])
])
],
64
/* STABLE_FRAGMENT */
)),
currentView.value === "date" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createVNode(vue.unref(ODivider), { class: "o-date-panel-divider" }),
vue.createElementVNode("div", _hoisted_4$2, [
vue.createElementVNode(
"span",
{
class: vue.normalizeClass(["o-date-panel-shortcut", { hidden: !isMainPanel.value }])
},
[
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue: setValueFromShortcut,
emitChange: () => emits("change", getMergedStart(), getMergedEnd())
})
],
2
/* CLASS */
),
vue.createElementVNode("span", null, [
vue.createVNode(vue.unref(OLink), {
color: "primary",
"hover-underline": false,
disabled: !hasBothDates.value,
onClick: toggleView
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(!isTimeView.value ? vue.unref(t)("datePicker.selectTime") : vue.unref(t)("datePicker.selectDate")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"]),
vue.createVNode(vue.unref(OButton), {
round: "pill",
disabled: !hasBothDates.value,
onClick: handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("select.confirm")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["disabled"])
])
])
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "class", "target", "transition", "position", "wrapper"])
]),
_: 3
/* FORWARDED */
});
};
}
});
const _hoisted_1$3 = {
key: 0,
class: "o_input-suffix-icon"
};
const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
__name: "ODateTimeRangePicker",
props: /* @__PURE__ */ vue.mergeModels(dateTimeRangePickerProps, {
"start": { default: void 0 },
"startModifiers": {},
"end": { default: void 0 },
"endModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear"], ["update:start", "update:end"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const start = vue.useModel(__props, "start");
const end = vue.useModel(__props, "end");
const {
startTimestamp,
endTimestamp,
effectiveColor,
onFocus: baseOnFocus,
notifyChange
} = useRangePickerBase({ props, mode: "datetime", start, end, emit: emits });
const { t } = useI18n();
const { isPhonePad } = useScreen();
const isResponding = vue.computed(() => !props.noResponsive && isPhonePad.value);
const toDisplayStr = (ts) => {
var _a;
return ts ? ((_a = parseValue(ts)) == null ? void 0 : _a.format(props.format)) ?? "" : "";
};
const tempStart = vue.computed(() => toDisplayStr(startTimestamp.value));
const tempEnd = vue.computed(() => toDisplayStr(endTimestamp.value));
const startFocused = vue.ref(false);
const endFocused = vue.ref(false);
const anyFocused = vue.computed(() => startFocused.value || endFocused.value);
vue.watch(anyFocused, (newVal, oldVal) => {
if (!newVal && oldVal) {
emits("blur");
}
});
const inBoxRef = vue.ref();
const startInputRef = vue.ref();
const endInputRef = vue.ref();
const panelRef = vue.ref();
const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly && (!!tempStart.value || !!tempEnd.value));
let skipOpenPanel = false;
const openPanel = () => {
var _a;
if (props.disabled || props.readonly) return;
(_a = panelRef.value) == null ? void 0 : _a.open(startTimestamp.value, endTimestamp.value);
};
const closeAndBlur = () => {
var _a, _b, _c;
(_a = panelRef.value) == null ? void 0 : _a.close();
startFocused.value = false;
endFocused.value = false;
(_b = startInputRef.value) == null ? void 0 : _b.blur();
(_c = endInputRef.value) == null ? void 0 : _c.blur();
};
const onStartFocus = (e) => {
if (!anyFocused.value) baseOnFocus(e);
startFocused.value = true;
if (!skipOpenPanel) openPanel();
skipOpenPanel = false;
};
const onEndFocus = (e) => {
if (!anyFocused.value) baseOnFocus(e);
endFocused.value = true;
openPanel();
};
useClickOutside({
targets: [() => {
var _a;
return (_a = inBoxRef.value) == null ? void 0 : _a.$el;
}, () => {
var _a;
return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
}],
onOutside: () => closeAndBlur(),
disabled: isResponding
});
const handlePanelDateChange = (newStart, newEnd) => {
startTimestamp.value = newStart;
endTimestamp.value = newEnd;
};
const handlePanelChange = (newStart, newEnd) => {
startTimestamp.value = newStart;
endTimestamp.value = newEnd;
if (newStart && newEnd || !newStart && !newEnd) {
emits("change", start.value, end.value);
notifyChange();
if (newStart && newEnd) closeAndBlur();
}
};
const onClear = (e) => {
e == null ? void 0 : e.stopPropagation();
startTimestamp.value = void 0;
endTimestamp.value = void 0;
emits("clear", e);
emits("change", void 0, void 0);
notifyChange();
closeAndBlur();
};
__expose({
/**
* @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
* @en-US Focus the input. Pass false to focus without opening the panel.
*/
focus: (open = true) => {
var _a;
if (!open) skipOpenPanel = true;
(_a = startInputRef.value) == null ? void 0 : _a.focus();
},
/**
* @zh-CN 使输入框失去焦点
* @en-US Blur the input
*/
blur: () => closeAndBlur(),
/**
* @zh-CN 清除输入值
* @en-US Clear the input value
*/
clear: () => onClear()
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$1e), vue.mergeProps({
ref_key: "inBoxRef",
ref: inBoxRef
}, {
size: props.size,
variant: props.variant,
color: vue.unref(effectiveColor),
disabled: props.disabled,
readonly: props.readonly,
round: props.round,
focused: !!anyFocused.value
}, {
class: ["o-date-picker", "o-datetime-range-picker", "o-time-picker", "o-time-range-picker", { "o_input-clearable": isClearable.value }, "o-input"]
}), vue.createSlots({
default: vue.withCtx(() => [
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "startInputRef",
ref: startInputRef,
"model-value": tempStart.value,
class: vue.normalizeClass(["o-input-wrap o-range-start-input-wrap", { "o-input-wrap-focused": startFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderStart ?? vue.unref(t)("dateRangePicker.placeholderStart"),
"max-length": props.format.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onStartFocus
}, {
extra: vue.withCtx(() => {
var _a;
return [
!_ctx.disabled && !_ctx.readonly ? (vue.openBlock(), vue.createBlock(_sfc_main$4, {
key: 0,
ref_key: "panelRef",
ref: panelRef,
target: (_a = inBoxRef.value) == null ? void 0 : _a.$el,
"option-title": props.optionTitle,
onChange: handlePanelDateChange,
onConfirm: handlePanelChange
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
name: "shortcut",
fn: vue.withCtx(({ setValue, emitChange }) => [
vue.renderSlot(_ctx.$slots, "shortcut", {
setValue,
emitChange
})
]),
key: "0"
} : void 0
]), 1032, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
];
}),
_: 3
/* FORWARDED */
}, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
_cache[2] || (_cache[2] = vue.createElementVNode(
"div",
{ class: "o-date-range-picker-divider" },
"-",
-1
/* CACHED */
)),
vue.createVNode(vue.unref(_sfc_main$1f), {
ref_key: "endInputRef",
ref: endInputRef,
"model-value": tempEnd.value,
class: vue.normalizeClass(["o-input-wrap o-range-end-input-wrap", { "o-input-wrap-focused": endFocused.value }]),
disabled: _ctx.disabled,
readonly: _ctx.readonly,
placeholder: props.placeholderEnd ?? vue.unref(t)("dateRangePicker.placeholderEnd"),
"max-length": props.format.length,
"input-on-outlimit": false,
"show-length": "never",
"no-keyboard": "",
onFocus: onEndFocus
}, null, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
vue.createElementVNode(
"div",
{
class: "o_input-suffix",
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
!isResponding.value || !isClearable.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$3, [
vue.createVNode(vue.unref(IconCalendar))
])) : vue.createCommentVNode("v-if", true),
isClearable.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_input-clear",
onClick: onClear,
onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createVNode(vue.unref(IconClose), { class: "o_input-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)
]),
_: 2
/* DYNAMIC */
}, [
!vue.unref(isEmptySlot)(_ctx.$slots.prepend) ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
!vue.unref(isEmptySlot)(_ctx.$slots.append) ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]), 1040, ["class"]);
};
}
});
const OYearPicker = Object.assign(_sfc_main$d, {
install(app) {
app.component("OYearPicker", _sfc_main$d);
}
});
const OMonthPicker = Object.assign(_sfc_main$c, {
install(app) {
app.component("OMonthPicker", _sfc_main$c);
}
});
const ODatePicker = Object.assign(_sfc_main$b, {
install(app) {
app.component("ODatePicker", _sfc_main$b);
}
});
const ODateTimePicker = Object.assign(_sfc_main$a, {
install(app) {
app.component("ODateTimePicker", _sfc_main$a);
}
});
const OYearRangePicker = Object.assign(_sfc_main$7, {
install(app) {
app.component("OYearRangePicker", _sfc_main$7);
}
});
const OMonthRangePicker = Object.assign(_sfc_main$6, {
install(app) {
app.component("OMonthRangePicker", _sfc_main$6);
}
});
const ODateRangePicker = Object.assign(_sfc_main$5, {
install(app) {
app.component("ODateRangePicker", _sfc_main$5);
}
});
const ODateTimeRangePicker = Object.assign(_sfc_main$3, {
install(app) {
app.component("ODateTimeRangePicker", _sfc_main$3);
}
});
const { modelValue } = cascaderProps;
const { round, color, variant, disabled, loading, clearable, multiple, placeholder } = selectProps;
const cascaderV2Props = {
/**
* @zh-CN 级联选择器选中值(v-model)
* @en-US Cascader selected value (v-model)
* @CascaderValueT string | number | Array<string | number>
*/
modelValue,
/**
* @zh-CN 级联选择器选项值
* @en-US Cascader option value
* @CascaderOptionT { value: string | number, label?: string, children?: Array<CascaderOptionT> }
*/
options: {
type: Array
},
/**
* @zh-CN 选择框大小
* @en-US Select box size.
* @default 'large'
*/
size: {
type: String,
default: "large"
},
/**
* @zh-CN 选择框圆角
* @en-US Select the rounded corners of the box
*/
round,
/**
* @zh-CN 选择框颜色
* @en-US Select box color.
* @default 'normal'
*/
color,
/**
* @zh-CN 选择框变体
* @en-US Selection box variant.
* @default 'outline'
*/
variant,
/**
* @zh-CN 支持禁用
* @en-US Support disabling.
*/
disabled,
/**
* @zh-CN 加载中
* @en-US loading.
*/
loading,
/**
* @zh-CN 支持快速清除
* @en-US Support quick clearing.
*/
clearable,
/**
* @zh-CN 支持多选
* @en-US Support multiple selections.
*/
multiple,
/**
* @zh-CN 选择框提示文本
* @en-US Select box prompt text.
*/
placeholder,
/**
* @zh-CN 支持筛选
* @en-US Whether to support filtering.
*/
filterable: {
type: Boolean
},
/**
* @zh-CN 多选标签最大显示数量
* @en-US Maximum display quantity of multiple selection tags.
*/
maxTagCount: {
type: Number
},
/**
* @zh-CN 多选超过最大tag时，以文本显示
* @en-US When multiple selections exceed the maximum tag, they will be displayed as text.
*/
foldLabel: {
type: Function
},
/**
* @zh-CN 浮层显示收起的多选tag
* @en-US The floating layer shows the multiple selected tags that have been folded.
* @default 'hover'
*/
showFoldTags: {
type: [Boolean, String],
default: "hover"
},
/**
* @zh-CN 选择前回调，根据返回值判断是否显示
* @en-US Select the pre-callback and determine whether to display based on the return value.
*/
beforeSelect: {
type: Function
},
/**
* @zh-CN 过渡名称
* @en-US Transition name.
*/
transition: {
type: String
},
/**
* @zh-CN 是否在结束选择时，卸载所有选项，v-model
* @en-US Whether to uninstall all options when ending the selection.
* @default true
*/
unmountOnHide: {
type: Boolean,
default: true
},
/**
* @zh-CN 选项布局位置
* @en-US Option layout location.
* @default 'bl'
*/
optionPosition: {
type: String,
default: "bl"
},
/**
* @zh-CN 选项挂载容器，默认为body
* @en-US The option mounts the container, with the default being body.
* @default 'body'
*/
optionsWrapper: {
type: [String, Object],
default: "body"
},
/**
* @zh-CN 选项触发方式
* @en-US Option trigger method.
* @default 'click-outclick'
*/
trigger: {
type: String,
default: "click-outclick"
},
/**
* @zh-CN 选项宽度自适应规则
* 'auto': 自动
* 'min-width': 最小宽度与选择框一致
* 'width': 宽度与选择框一致
* @en-US Option width adaptive rule.
* 'auto': auto
* 'min-width': The minimum width is consistent with the selection box.
* 'width': The width is consistent with the selection box.
* @default 'min-width'
*/
optionWidthMode: {
type: String,
default: "auto"
},
/**
* @zh-CN 显示前回调，根据返回值判断是否显示
* @en-US Display the callback before display, and determine whether to display based on the return value.
*/
beforeOptionsShow: {
type: Function
},
/**
* @zh-CN 隐藏前回调，根据返回值判断是否隐藏
* @en-US Hide the previous callback and determine whether to hide it based on the return value.
*/
beforeOptionsHide: {
type: Function
},
/**
* @zh-CN modelValue 是否使用路径模式
* @en-US Whether to use path mode for modelValue
* @default false
*/
pathMode: {
type: Boolean,
default: false
},
/**
* @zh-CN 展开菜单选项的触发方式
* @en-US Trigger method to expand menu options
*/
expandTrigger: {
type: String,
default: "click"
},
/**
* @zh-CN 输入框中是否显示完整的路径
* @en-US Whether to display the complete path in the input box.
* @default true
*/
showAllLevels: {
type: Boolean,
default: true
},
/**
* @zh-CN 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
* @en-US Whether to return an array composed of the values of each level menu where the node is located when the selected node changes. If set to false, only the value of the node is returned.
* @default true
*/
emitPath: {
type: Boolean,
default: true
},
/**
* @zh-CN 是否允许选中任意节点，父子节点勾选互不关联
* @en-US Whether to allow selecting any node, parent and child nodes are checked independently.
* @default false
*/
allowSelectAnyNode: {
type: Boolean,
default: false
},
/**
* @zh-CN 是否动态加载子节点，需与 lazyLoad 方法结合使用
* @en-US whether to dynamic load child nodes, use with lazyload attribute.
* @default false
* TODO: 当允许懒加载时，若搜索的值还没加载为节点，此时应该如何展示搜索结果
*/
lazy: {
type: Boolean,
default: false
},
/**
* @zh-CN 加载动态数据的方法，仅在 lazy 为 true 时有效
* @en-US method for loading child nodes data, only works when lazy is true.
*/
lazyload: {
type: Function
}
};
const cascaderV2PanelProps = {
/**
* @zh-CN 级联选择器选中值(v-model)
* @en-US Cascader selected value (v-model)
*/
modelValue: {
type: [String, Number, Array],
default: ""
},
/**
* @zh-CN 级联选择器选项值
* @en-US Cascader option value
*/
options: {
type: Array
},
/**
* @zh-CN modelValue 是否使用路径模式
* @en-US Whether to use path mode for modelValue
* @default false
*/
pathMode: {
type: Boolean,
default: false
},
/**
* @zh-CN 展开菜单选项的触发方式
* @en-US Trigger method to expand menu options
* @default false
*/
expandTrigger: {
type: String,
default: "click"
},
/**
* @zh-CN 下拉面板大小
* @en-US Dropdown panel size.
* @default 'large'
*/
size: {
type: String,
default: "large"
},
/**
* @zh-CN 输入框中是否显示完整的路径
* @en-US Whether to display the complete path in the input box.
* @default true
*/
showAllLevels: {
type: Boolean,
default: true
},
/**
* @zh-CN 支持筛选
* @en-US Whether to support filtering.
*/
filterable: {
type: Boolean
},
/**
* @zh-CN 是否开启动态加载
* @en-US Whether to enable dynamic loading.
* @default false
*/
lazy: {
type: Boolean,
default: false
},
/**
* @zh-CN 动态加载数据的方法，仅在 lazy 为 true 时有效
* @en-US Method for dynamically loading data, only effective when lazy is true.
*/
lazyload: {
type: Function
}
};
const cascaderV2InjectKey = Symbol("provide-cascader-v2-option");
const _hoisted_1$2 = {
key: 2,
class: "o-cascader-v2-option-arrow"
};
const _hoisted_2$2 = { class: "o-cascader-v2-option-whole-label" };
const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
__name: "OCascaderV2Label",
props: {
multiple: { type: Boolean },
allowSelectAnyNode: { type: Boolean },
disabled: { type: Boolean },
value: {},
label: {},
labelParts: {},
indeterminate: { type: Boolean },
isLeaf: { type: Boolean },
isFullySelected: { type: Boolean },
loading: { type: Boolean }
},
emits: ["select"],
setup(__props, { emit: __emit }) {
const cascaderV2Inject = vue.inject(cascaderV2InjectKey, null);
const props = __props;
const emit = __emit;
const optionLabelRef = vue.ref();
const showPopover = vue.ref(false);
const checkedList = vue.computed(() => (cascaderV2Inject == null ? void 0 : cascaderV2Inject.selectValue.value) ?? []);
const singleValue = vue.computed(() => checkedList.value[0]);
const checkboxChecked = vue.ref(false);
vue.watchEffect(() => {
const list = cascaderV2Inject == null ? void 0 : cascaderV2Inject.selectValue.value;
checkboxChecked.value = list ? list.includes(props.value) : false;
});
const checkboxModelValue = vue.computed(() => {
if (props.isFullySelected !== void 0) {
return props.isFullySelected ? [props.value] : [];
}
return checkboxChecked.value ? [props.value] : [];
});
const labelParts = vue.computed(() => {
if (props.labelParts && props.labelParts.length > 0) {
return props.labelParts;
}
return [{ text: props.label, isHighlighted: false }];
});
const onMouseenter = (e) => {
showPopover.value = isOverflown(e.target);
};
const onMouseleave = () => {
showPopover.value = false;
};
const onSelectorClick = (e) => {
if (props.disabled) {
return;
}
if (props.multiple || props.allowSelectAnyNode) {
e.stopPropagation();
e.preventDefault();
emit("select");
}
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
vue.createCommentVNode(" 单选 + allowSelectAnyNode：使用 ORadio "),
!props.multiple && props.allowSelectAnyNode ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: "o-cascader-v2-option-selector",
onClick: onSelectorClick
}, [
vue.createVNode(vue.unref(ORadio), {
"model-value": singleValue.value,
value: props.value,
disabled: props.disabled
}, null, 8, ["model-value", "value", "disabled"])
])) : props.multiple ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" 多选：使用 OCheckbox（allowSelectAnyNode 时阻止冒泡，否则让事件冒泡至 li） "),
vue.createElementVNode("span", {
class: "o-cascader-v2-option-selector",
onClick: onSelectorClick
}, [
vue.createVNode(vue.unref(OCheckbox), {
"model-value": checkboxModelValue.value,
value: props.value,
indeterminate: props.isFullySelected ? false : props.indeterminate,
disabled: props.disabled
}, null, 8, ["model-value", "value", "indeterminate", "disabled"])
])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" 选项文本 "),
vue.createElementVNode(
"span",
{
ref_key: "optionLabelRef",
ref: optionLabelRef,
class: "o-cascader-v2-option-label",
onMouseenter,
onMouseleave
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(labelParts.value, (part, index) => {
return vue.openBlock(), vue.createElementBlock(
"span",
{
key: index,
class: vue.normalizeClass({ "o-cascader-v2-option-highlight": part.isHighlighted })
},
vue.toDisplayString(part.text),
3
/* TEXT, CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
],
544
/* NEED_HYDRATION, NEED_PATCH */
),
vue.createCommentVNode(" 非叶子节点展开箭头（懒加载时显示 loading 图标） "),
!props.isLeaf ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$2, [
props.loading ? (vue.openBlock(), vue.createBlock(vue.unref(IconLoading), {
key: 0,
class: "o-rotating"
})) : (vue.openBlock(), vue.createBlock(vue.unref(IconChevronRight), { key: 1 }))
])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(OPopover), {
visible: showPopover.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => showPopover.value = $event),
trigger: "none",
target: optionLabelRef.value,
"wrap-class": "o-cascader-v2-option-popover",
position: "top"
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_2$2, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(labelParts.value, (part, index) => {
return vue.openBlock(), vue.createElementBlock(
"span",
{
key: index,
class: vue.normalizeClass({ "o-cascader-v2-option-popover-highlight": part.isHighlighted })
},
vue.toDisplayString(part.text),
3
/* TEXT, CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
])
]),
_: 1
/* STABLE */
}, 8, ["visible", "target"])
],
64
/* STABLE_FRAGMENT */
);
};
}
});
const _hoisted_1$1 = { class: "o-cascader-v2-panel-loading" };
const _hoisted_2$1 = ["onClick"];
const _hoisted_3$1 = {
key: 1,
class: "o-cascader-v2-panel-empty"
};
const _hoisted_4$1 = { class: "o-cascader-v2-options" };
const _hoisted_5$1 = ["onClick", "onMouseenter"];
const ROOT_KEY = "__root__";
const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
__name: "OCascaderV2Panel",
props: cascaderV2PanelProps,
emits: ["change", "update:modelValue"],
setup(__props, { emit: __emit }) {
const cascaderV2Inject = vue.inject(cascaderV2InjectKey, null);
const props = __props;
const emits = __emit;
const { t } = useI18n();
const isMultiple = cascaderV2Inject == null ? void 0 : cascaderV2Inject.multiple;
const allowSelectAnyNode = (cascaderV2Inject == null ? void 0 : cascaderV2Inject.allowSelectAnyNode) ?? false;
const filterValue = cascaderV2Inject == null ? void 0 : cascaderV2Inject.filterValue;
const isSelecting = cascaderV2Inject == null ? void 0 : cascaderV2Inject.isSelecting;
const isLoading = cascaderV2Inject == null ? void 0 : cascaderV2Inject.loading;
const cascaderTree = new CascaderTree();
const lazyLoadState = vue.ref({});
const panelInfo = vue.ref();
const selectedVal = vue.computed(() => {
return (cascaderV2Inject == null ? void 0 : cascaderV2Inject.selectValue.value) ?? [];
});
const selectedLeafNode = vue.computed(() => {
return selectedVal.value.map((val) => {
const node = cascaderTree.getNode(val);
if (!node || !node.isLeaf) {
return;
}
return node;
}).filter(Boolean);
});
const selectedLeafPath = vue.computed(() => {
return selectedLeafNode.value.map((val) => {
return val == null ? void 0 : val.fullPath;
}).filter((item) => item == null ? void 0 : item.length);
});
const isNodeFullySelected = (val) => {
const node = cascaderTree.getNode(val);
if (!node) return false;
if (node.isLeaf) return selectedVal.value.includes(val);
return node.children.length > 0 && node.children.every((child) => isNodeFullySelected(child.value));
};
const innerExpandTrigger = vue.computed(() => {
if (isTouchDevice) {
return "click";
}
if (props.expandTrigger === "hover" || props.expandTrigger === "click") {
return props.expandTrigger;
}
return "click";
});
const leafNodes = vue.ref([]);
const collectAllDescendants = (root) => {
const result = [];
const dfs = (node) => {
for (const child of node.children) {
result.push(child);
dfs(child);
}
};
dfs(root);
return result;
};
const splitLabelByKeyword = (label, keyword) => {
const parts = [];
let lastIndex = 0;
while (true) {
const index = label.indexOf(keyword, lastIndex);
if (index === -1) break;
if (index > lastIndex) {
parts.push({ text: label.substring(lastIndex, index), isHighlighted: false });
}
parts.push({ text: label.substring(index, index + keyword.length), isHighlighted: true });
lastIndex = index + keyword.length;
}
if (lastIndex < label.length) {
parts.push({ text: label.substring(lastIndex), isHighlighted: false });
}
return parts;
};
const filteredOptions = vue.computed(() => {
if (!props.filterable || !(cascaderV2Inject == null ? void 0 : cascaderV2Inject.filterValue.value)) {
return [];
}
const searchValue = cascaderV2Inject.filterValue.value;
const sourceNodes = allowSelectAnyNode ? (void leafNodes.value, collectAllDescendants(cascaderTree.root)) : leafNodes.value;
return sourceNodes.filter((item) => item.fullLabel.includes(searchValue)).map((node) => ({
label: node.fullLabel,
labelParts: splitLabelByKeyword(node.fullLabel, searchValue),
value: node.value,
disabled: node.disabled,
isActive: selectedVal.value.includes(node.value),
isLeaf: node.isLeaf
}));
});
const updateSelectedValue = (option, doSelect = true, path) => {
cascaderV2Inject == null ? void 0 : cascaderV2Inject.registerOption(option);
if (path) {
cascaderV2Inject == null ? void 0 : cascaderV2Inject.registerPath(option.value, path);
}
if (doSelect) {
cascaderV2Inject == null ? void 0 : cascaderV2Inject.doSelect(option, path);
}
};
const hidePanel = (shouldHide) => {
if (!shouldHide) {
return;
}
cascaderV2Inject == null ? void 0 : cascaderV2Inject.hidePanel();
};
const isNonLeafPathCovered = (currPath) => {
const currLen = currPath.length;
return selectedLeafPath.value.some((path) => {
if (path) {
const pathLen = path.length;
return isArrayEqual(currPath, path.slice(0, currLen - pathLen));
}
});
};
const deactivateAllNonLeafNodesInColumn = (columnInfo) => {
columnInfo.forEach((item) => {
item.isActive = !item.isLeaf ? false : item.isActive;
});
};
const initColumnInfo = (columnInfo) => {
columnInfo.forEach((item) => {
if (!item.isLeaf) {
item.hasActiveChild = allowSelectAnyNode ? false : isNonLeafPathCovered(item.fullPath);
return;
}
if (selectedVal.value.includes(item.value)) {
item.isActive = true;
}
});
};
const refrashCheckStateByBubble = (option, columnInfo) => {
if (allowSelectAnyNode) {
return;
}
const depth = option.depth;
if (depth < 2) {
return;
}
const hasActiveChild = columnInfo.some((item) => item.isLeaf && item.isActive || item.hasActiveChild);
const prevColumnInfo = panelInfo.value[depth - 2];
const parentOption = prevColumnInfo.find((item) => {
var _a;
return item.value === ((_a = option.parent) == null ? void 0 : _a.value);
});
if (!parentOption) {
return;
}
parentOption.hasActiveChild = hasActiveChild;
refrashCheckStateByBubble(parentOption, prevColumnInfo);
};
const getOptionList = () => {
var _a;
const panelInfoLen = ((_a = panelInfo.value) == null ? void 0 : _a.length) || 0;
const nonLeafOptionList = [];
for (let i = 0; i < panelInfoLen; i++) {
const columnInfo = panelInfo.value[i];
const columnInfoLen = columnInfo.length;
for (let j = 0; j < columnInfoLen; j++) {
const currOption = columnInfo[j];
if (!currOption.isLeaf) {
nonLeafOptionList.push(currOption);
continue;
}
if (selectedVal.value.includes(currOption.value)) {
currOption.isActive = true;
} else {
currOption.isActive = false;
}
}
}
return nonLeafOptionList;
};
const refrashCheckStateByCapture = () => {
const nonLeafOptionList = getOptionList();
nonLeafOptionList.forEach((option) => {
option.hasActiveChild = allowSelectAnyNode ? false : isNonLeafPathCovered(option.fullPath);
});
};
const selectOption = (option, columnInfo) => {
var _a;
while (option.depth < panelInfo.value.length) {
(_a = panelInfo.value) == null ? void 0 : _a.pop();
}
if (isMultiple) {
option.isActive = !option.isActive;
deactivateAllNonLeafNodesInColumn(columnInfo);
if (!allowSelectAnyNode) {
refrashCheckStateByBubble(option, columnInfo);
}
} else {
columnInfo.forEach((item) => {
item.isActive = item.value === option.value;
});
}
const { label, fullLabel, value, fullPath } = option;
const simpleVal = value;
if (props.pathMode) {
emits("change", fullPath);
emits("update:modelValue", fullPath);
} else {
emits("change", simpleVal);
emits("update:modelValue", simpleVal);
}
updateSelectedValue({ label: props.showAllLevels ? fullLabel : label ?? "", value }, true, fullPath);
};
const selectNonLeafStrict = (option) => {
updateSelectedValue({ label: props.showAllLevels ? option.fullLabel : option.label ?? "", value: option.value }, true, option.fullPath);
};
const getLeafDescendants = (nodeValue) => {
const node = cascaderTree.getNode(nodeValue);
if (!node) return [];
const leaves = [];
const traverse = (n) => {
if (n.isLeaf) {
leaves.push(n);
} else {
n.children.forEach(traverse);
}
};
node.children.forEach(traverse);
return leaves;
};
const toggleNonLeafDescendants = (option) => {
const leaves = getLeafDescendants(option.value);
if (!leaves.length) return;
if (isNodeFullySelected(option.value)) {
cascaderV2Inject == null ? void 0 : cascaderV2Inject.doSelectBatch(
[],
leaves.map((l) => l.value)
);
} else {
const toAdd = leaves.filter((l) => !l.disabled).map((l) => ({
value: l.value,
label: props.showAllLevels ? l.fullLabel : l.label ?? "",
path: l.fullPath
}));
cascaderV2Inject == null ? void 0 : cascaderV2Inject.doSelectBatch(toAdd, []);
}
refrashCheckStateByCapture();
};
const syncColumnActiveState = (option, columnInfo) => {
if (isMultiple) {
deactivateAllNonLeafNodesInColumn(columnInfo);
option.isActive = !option.isActive;
return;
}
columnInfo.forEach((item) => {
item.isActive = item.value === option.value;
});
};
const pushChildrenColumn = (node) => {
const nextColumnInfo = cascaderTree.getColumnInfo(node, selectedVal.value);
initColumnInfo(nextColumnInfo);
panelInfo.value.push(nextColumnInfo);
};
const triggerLazyLoad = (option, node) => {
var _a;
lazyLoadState.value[String(option.value)] = "loading";
const lazyNode = {
value: node.value,
level: node.depth,
isLeaf: node.isLeaf,
data: { value: node.value, label: node.label },
path: node.fullPath,
label: node.fullLabel
};
const nodeResolve = (children) => {
cascaderTree.addChildren(node.value, children, true);
leafNodes.value = cascaderTree.getLeafNodes();
lazyLoadState.value[String(option.value)] = "loaded";
const updatedNode = cascaderTree.getNode(option.value);
if (updatedNode) {
option.isLeaf = updatedNode.isLeaf;
}
if (!option.isLeaf && updatedNode) {
pushChildrenColumn(updatedNode);
}
};
const nodeReject = () => {
lazyLoadState.value[String(option.value)] = "error";
cascaderV2Inject == null ? void 0 : cascaderV2Inject.onLazyloadError(lazyNode);
};
const result = (_a = props.lazyload) == null ? void 0 : _a.call(props, lazyNode, nodeResolve, nodeReject);
if (result instanceof Promise) {
result.then(nodeResolve).catch(nodeReject);
}
};
const expandOption = (option, columnInfo) => {
var _a;
if (props.lazy && lazyLoadState.value[String(option.value)] === "loading") return;
while (option.depth < panelInfo.value.length) {
(_a = panelInfo.value) == null ? void 0 : _a.pop();
}
syncColumnActiveState(option, columnInfo);
const node = cascaderTree.getNode(option.value);
if (!node) return;
if (props.lazy && props.lazyload && lazyLoadState.value[String(option.value)] !== "loaded") {
triggerLazyLoad(option, node);
return;
}
pushChildrenColumn(node);
};
const selectNonLeafOption = (option) => {
if (isMultiple) {
if (allowSelectAnyNode) {
selectNonLeafStrict(option);
return;
}
toggleNonLeafDescendants(option);
return;
}
const { label, fullLabel, value, fullPath } = option;
updateSelectedValue({ label: props.showAllLevels ? fullLabel : label ?? "", value }, true, fullPath);
};
const onLabelSelect = (option, columnInfo) => {
if (!isArray(panelInfo.value) || option.disabled) {
return;
}
if (option.isLeaf) {
selectOption(option, columnInfo);
hidePanel(!isMultiple);
return;
}
selectNonLeafOption(option);
if (!option.isActive && innerExpandTrigger.value === "click") {
expandOption(option, columnInfo);
}
};
const onClick = (option, columnInfo) => {
if (!isArray(panelInfo.value) || option.disabled) {
return;
}
if (option.isLeaf) {
selectOption(option, columnInfo);
hidePanel(!isMultiple);
return;
}
if (innerExpandTrigger.value !== "click") return;
expandOption(option, columnInfo);
};
const onMouseenter = (option, columnInfo) => {
if (!isArray(panelInfo.value) || option.isLeaf || option.isActive || innerExpandTrigger.value !== "hover") {
return;
}
expandOption(option, columnInfo);
};
const getFinalPath = () => {
const numSet = /* @__PURE__ */ new Set();
selectedLeafPath.value.forEach((item) => {
numSet.add((item == null ? void 0 : item.length) ?? 0);
});
const maxPathLen = Math.max(...Array.from(numSet));
const filteredPathList = selectedLeafPath.value.filter((item) => (item == null ? void 0 : item.length) === maxPathLen);
return filteredPathList[filteredPathList.length - 1];
};
const buildSelectedOption = (node) => ({
label: props.showAllLevels ? node.fullLabel : node.label ?? "",
value: node.value
});
const syncMultipleSelection = () => {
selectedLeafNode.value.forEach((item) => {
updateSelectedValue(buildSelectedOption(item), false, item.fullPath);
});
if (!allowSelectAnyNode) return;
selectedVal.value.forEach((v) => {
const node = cascaderTree.getNode(v);
if (node && !node.isLeaf) {
updateSelectedValue(buildSelectedOption(node), false, node.fullPath);
}
});
};
const refreshSingleSelection = (modelValue2) => {
if (!modelValue2 && modelValue2 !== 0) {
panelInfo.value = cascaderTree.root.children.length ? [cascaderTree.getColumnInfo(cascaderTree.root)] : void 0;
return;
}
panelInfo.value = cascaderTree.getPanelInfo(modelValue2, props.lazy);
if (isArray(modelValue2)) return;
const node = cascaderTree.getNode(modelValue2);
if (!node) return;
updateSelectedValue(buildSelectedOption(node), true, node.fullPath);
};
const refreshCascaderV2Data = (modelValue2) => {
if (isArray(modelValue2) && modelValue2.length) {
const finalPath = getFinalPath();
panelInfo.value = finalPath ? cascaderTree.getPanelInfo(finalPath, props.lazy) : [cascaderTree.getColumnInfo(cascaderTree.root)];
syncMultipleSelection();
refrashCheckStateByCapture();
return;
}
refreshSingleSelection(modelValue2);
};
const loadRoot = () => {
if (!props.lazy || !props.lazyload) return;
if (lazyLoadState.value[ROOT_KEY] === "loading" || lazyLoadState.value[ROOT_KEY] === "loaded") return;
lazyLoadState.value[ROOT_KEY] = "loading";
cascaderV2Inject == null ? void 0 : cascaderV2Inject.setRootLoading(true);
const rootNode = {
value: null,
level: 0,
isLeaf: false,
data: null,
path: [],
label: ""
};
const rootResolve = (children) => {
cascaderTree.addChildren(null, children, true);
leafNodes.value = cascaderTree.getLeafNodes();
lazyLoadState.value[ROOT_KEY] = "loaded";
cascaderV2Inject == null ? void 0 : cascaderV2Inject.setRootLoading(false);
refreshCascaderV2Data(props.modelValue);
};
const rootReject = () => {
lazyLoadState.value[ROOT_KEY] = "error";
cascaderV2Inject == null ? void 0 : cascaderV2Inject.setRootLoading(false);
cascaderV2Inject == null ? void 0 : cascaderV2Inject.onLazyloadError(rootNode);
};
const result = props.lazyload(rootNode, rootResolve, rootReject);
if (result instanceof Promise) {
result.then(rootResolve).catch(rootReject);
}
};
vue.watch(
() => props.options,
(val) => {
if (!isUndefined(val)) {
cascaderTree.updateTree(val, props.lazy);
leafNodes.value = cascaderTree.getLeafNodes();
refreshCascaderV2Data(props.modelValue);
} else {
cascaderTree.updateTree([], props.lazy);
leafNodes.value = [];
panelInfo.value = void 0;
lazyLoadState.value = {};
}
},
{
immediate: true,
deep: true
}
);
vue.watch(
() => props.modelValue,
(newValue) => {
if (!newValue) return;
if (isArray(newValue)) {
syncMultipleSelection();
refrashCheckStateByCapture();
return;
}
const node = cascaderTree.getNode(newValue);
if (!node) return;
updateSelectedValue(buildSelectedOption(node), true, node.fullPath);
refrashCheckStateByCapture();
}
);
vue.watch(
() => cascaderV2Inject == null ? void 0 : cascaderV2Inject.isSelecting.value,
(val) => {
if (val) {
if (props.lazy && cascaderTree.root.children.length === 0) {
loadRoot();
} else {
refreshCascaderV2Data(props.modelValue);
}
}
}
);
vue.watch(
() => cascaderV2Inject == null ? void 0 : cascaderV2Inject.filterValue.value,
(newVal, oldVal) => {
if (oldVal && !newVal && isMultiple) {
refreshCascaderV2Data(props.modelValue);
}
}
);
const handleClick = (option) => {
if (option.disabled) {
return;
}
const node = cascaderTree.getNode(option.value);
updateSelectedValue(option, true, node == null ? void 0 : node.fullPath);
hidePanel(!isMultiple);
};
return (_ctx, _cache) => {
return vue.unref(isSelecting) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-cascader-v2-panel", [`o-cascader-v2-panel-${props.size}`]]),
onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.unref(isLoading) ? (vue.openBlock(), vue.createBlock(vue.unref(OScroller), {
key: 0,
class: "o-cascader-v2-panel-scroller",
"wrap-class": "o-cascader-v2-panel-container",
"show-type": "hover",
size: "small",
"disabled-x": ""
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1$1, [
vue.createVNode(vue.unref(IconLoading), { class: "o-rotating" })
])
]),
_: 1
/* STABLE */
})) : props.filterable && vue.unref(filterValue) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
filteredOptions.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(OScroller), {
key: 0,
class: "o-cascader-v2-panel-scroller",
"wrap-class": "o-cascader-v2-panel-container",
"show-type": "hover",
size: "small",
"disabled-x": ""
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"ul",
{
class: vue.normalizeClass(["o-cascader-v2-options", { "o-cascader-v2-options-filterable": props.filterable }])
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(filteredOptions.value, (option) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: option.value,
class: vue.normalizeClass([{ "o-cascader-v2-option-selected": option.isActive, "o-cascader-v2-option-disabled": option.disabled }, "o-cascader-v2-option"]),
onClick: ($event) => handleClick(option)
}, [
vue.createVNode(_sfc_main$2, {
label: option.label,
"label-parts": option.labelParts,
value: option.value,
multiple: vue.unref(isMultiple),
"allow-select-any-node": vue.unref(allowSelectAnyNode),
"is-leaf": true,
disabled: option.disabled,
"is-fully-selected": vue.unref(isMultiple) ? option.isActive : void 0,
onSelect: ($event) => handleClick({ label: option.label, value: option.value })
}, null, 8, ["label", "label-parts", "value", "multiple", "allow-select-any-node", "disabled", "is-fully-selected", "onSelect"])
], 10, _hoisted_2$1);
}),
128
/* KEYED_FRAGMENT */
))
],
2
/* CLASS */
)
]),
_: 1
/* STABLE */
})) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(vue.unref(t)("common.empty")),
1
/* TEXT */
)
]))
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
vue.renderList(panelInfo.value, (columnInfo, index) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: index },
[
index > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(ODivider), {
key: 0,
direction: "v",
class: "o-cascader-v2-panel-divider"
})) : vue.createCommentVNode("v-if", true),
vue.createVNode(
vue.unref(OScroller),
{
class: "o-cascader-v2-panel-scroller",
"wrap-class": "o-cascader-v2-panel-container",
"show-type": "hover",
size: "small",
"disabled-x": ""
},
{
default: vue.withCtx(() => [
vue.createElementVNode("ul", _hoisted_4$1, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(columnInfo, (option) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: option.value,
class: vue.normalizeClass([{
"o-cascader-v2-option-selected": option.isActive && (!option.isLeaf || !vue.unref(isMultiple)),
"o-cascader-v2-option-disabled": option.disabled
}, "o-cascader-v2-option"]),
onClick: ($event) => onClick(option, columnInfo),
onMouseenter: ($event) => onMouseenter(option, columnInfo)
}, [
vue.createVNode(_sfc_main$2, {
label: option.label,
value: option.value,
multiple: vue.unref(isMultiple),
"allow-select-any-node": vue.unref(allowSelectAnyNode),
disabled: option.disabled,
"is-leaf": option.isLeaf,
indeterminate: !vue.unref(allowSelectAnyNode) && option.hasActiveChild,
"is-fully-selected": !option.isLeaf && !vue.unref(allowSelectAnyNode) && vue.unref(isMultiple) ? isNodeFullySelected(option.value) : void 0,
loading: props.lazy && lazyLoadState.value[String(option.value)] === "loading",
onSelect: ($event) => onLabelSelect(option, columnInfo)
}, null, 8, ["label", "value", "multiple", "allow-select-any-node", "disabled", "is-leaf", "indeterminate", "is-fully-selected", "loading", "onSelect"])
], 42, _hoisted_5$1);
}),
128
/* KEYED_FRAGMENT */
))
])
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)
],
64
/* STABLE_FRAGMENT */
);
}),
128
/* KEYED_FRAGMENT */
))
],
34
/* CLASS, NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true);
};
}
});
const _hoisted_1 = ["disabled", "value", "placeholder", "readonly"];
const _hoisted_2 = {
key: 1,
class: "o-cascader-v2-tags-wrap"
};
const _hoisted_3 = { class: "o-cascader-v2-tag-text" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = { class: "o-cascader-v2-tags" };
const _hoisted_6 = { class: "o-cascader-v2-tag-text" };
const _hoisted_7 = ["onClick"];
const _hoisted_8 = ["value", "readonly", "disabled"];
const _hoisted_9 = { class: "o-cascader-v2-suffix" };
const _hoisted_10 = { class: "o-cascader-v2-suffix-icon" };
const _hoisted_11 = {
key: 0,
class: "o-cascader-v2-loading"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "OCascaderV2",
props: cascaderV2Props,
emits: ["update:modelValue", "change", "options-visible-change", "clear", "lazyload-error"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const cascaderV2Ref = vue.ref();
const cascaderV2El = vue.computed(() => {
var _a;
return (_a = cascaderV2Ref.value) == null ? void 0 : _a.$el;
});
const cascaderv2Panel = vue.ref();
const inputRef = vue.ref();
const inputMirrorRef = vue.ref();
const inputWidth = vue.ref(12);
const isSelecting = vue.ref(false);
const lazyRootLoading = vue.ref(false);
const lastClickWasInside = vue.ref(false);
const effectiveLoading = vue.computed(() => props.loading);
const tagPopoverVisible = vue.ref(false);
const formItemInjection = vue.inject(formItemInjectKey, null);
const foldTrigger = typeof props.showFoldTags === "string" ? props.showFoldTags : "hover";
const color2 = vue.computed(() => {
var _a;
if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || "normal";
}
return props.color;
});
const optionLabels = vue.ref({});
const valueList = vue.ref([]);
const finalValueList = vue.ref([]);
const filterValue = vue.ref();
const pathMap = vue.ref({});
const parseMultipleModelValue = (v) => {
const leaves = [];
const paths = {};
if (!isArray(v)) {
return { leaves, paths };
}
v.forEach((item) => {
if (props.emitPath && isArray(item)) {
const path = item;
const leaf = path[path.length - 1];
leaves.push(leaf);
paths[leaf] = path;
return;
}
leaves.push(item);
});
return { leaves, paths };
};
const parseSingleModelValue = (v) => {
const leaves = [];
const paths = {};
if (props.emitPath && isArray(v) && v.length > 0) {
const path = v;
const leaf = path[path.length - 1];
leaves.push(leaf);
paths[leaf] = path;
return { leaves, paths };
}
if (isArray(v)) {
const arr = v;
if (arr.length > 0) leaves.push(arr[arr.length - 1]);
return { leaves, paths };
}
if (!isUndefined(v)) {
leaves.push(v);
}
return { leaves, paths };
};
const parseModelValue = (v) => {
return props.multiple ? parseMultipleModelValue(v) : parseSingleModelValue(v);
};
const { leaves: initLeaves, paths: initPaths } = parseModelValue(props.modelValue);
valueList.value = initLeaves;
Object.assign(pathMap.value, initPaths);
finalValueList.value = [...valueList.value];
const valueListDisplay = vue.computed(() => {
if (!props.maxTagCount) {
return finalValueList.value;
}
return finalValueList.value.slice(0, props.maxTagCount);
});
const valueListFold = vue.computed(() => {
if (!props.maxTagCount) {
return [];
}
return finalValueList.value.slice(props.maxTagCount);
});
const foldLabel = vue.computed(() => {
if (props.foldLabel) {
const tags = valueListFold.value.map((item) => ({
value: item,
label: optionLabels.value[item]
}));
return props.foldLabel(tags);
}
return `+${valueListFold.value.length}`;
});
const isClearable = vue.computed(
() => props.clearable && !props.disabled && (valueList.value.some((v) => v !== "" && !isUndefined(v)) || Boolean(filterValue.value))
);
vue.watch(
() => props.modelValue,
(v) => {
const { leaves, paths } = parseModelValue(v);
if (props.multiple) {
if (!isArrayEqual(leaves, valueList.value)) {
valueList.value = leaves;
}
} else {
valueList.value = leaves;
}
Object.assign(pathMap.value, paths);
finalValueList.value = [...valueList.value];
}
);
const getEmitValue = (value) => {
if (props.emitPath) {
if (props.multiple) {
return value.map((v) => pathMap.value[v] ?? [v]);
} else {
const leaf = value[0];
return leaf !== void 0 ? pathMap.value[leaf] ?? [leaf] : void 0;
}
} else {
if (props.multiple) {
return [...value];
} else {
return value[0];
}
}
};
const emitChange = (value) => {
var _a, _b;
emits("change", getEmitValue(value));
(_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
};
const emitUpdateValue = (value) => {
emits("update:modelValue", getEmitValue(value));
};
const clearClick = (e) => {
e.stopPropagation();
valueList.value = [];
finalValueList.value = [];
pathMap.value = {};
filterValue.value = "";
emits("clear", e);
emitChange(valueList.value);
emitUpdateValue(valueList.value);
};
const resolveSelectValue = async (value) => {
if (!isFunction(props.beforeSelect)) return value;
const rlt = await props.beforeSelect(value, props.multiple ? valueList.value : valueList.value[0]);
if (rlt === false) return null;
return typeof rlt === "boolean" ? value : rlt;
};
const applySingleSelect = (toValue) => {
if (valueList.value[0] === toValue) return;
valueList.value[0] = toValue;
emitUpdateValue(valueList.value);
emitChange(valueList.value);
};
const applyMultipleSelect = (toValue) => {
const idx = valueList.value.indexOf(toValue);
if (idx > -1) {
valueList.value.splice(idx, 1);
} else {
valueList.value.push(toValue);
}
emitUpdateValue(valueList.value);
emitChange(valueList.value);
if (props.filterable) {
filterValue.value = "";
}
};
const handleInput = (e) => {
const input = e.target;
filterValue.value = input.value;
};
vue.provide(cascaderV2InjectKey, {
multiple: props.multiple,
allowSelectAnyNode: props.allowSelectAnyNode,
selectValue: valueList,
filterValue,
isSelecting,
loading: vue.computed(() => props.loading),
doSelectBatch(toAdd, toRemove) {
toAdd.forEach((item) => {
if (!valueList.value.includes(item.value)) {
valueList.value.push(item.value);
optionLabels.value[item.value] = item.label;
pathMap.value[item.value] = item.path;
}
});
toRemove.forEach((v) => {
const idx = valueList.value.indexOf(v);
if (idx > -1) valueList.value.splice(idx, 1);
});
emitUpdateValue(valueList.value);
emitChange(valueList.value);
},
doSelect: async (option, path) => {
const toValue = await resolveSelectValue(option.value);
if (toValue === null) return;
if (path && toValue === option.value) {
pathMap.value[toValue] = path;
}
if (props.multiple) {
applyMultipleSelect(toValue);
return;
}
applySingleSelect(toValue);
},
registerOption(option) {
if (optionLabels.value[option.value] !== option.label) {
optionLabels.value[option.value] = option.label;
}
},
registerPath(value, path) {
pathMap.value[value] = path;
},
hidePanel() {
isSelecting.value = false;
},
showPanel() {
isSelecting.value = true;
},
setRootLoading(v) {
lazyRootLoading.value = v;
},
onLazyloadError(node) {
emits("lazyload-error", node);
}
});
const onOptionVisibleChange = (visible) => {
emits("options-visible-change", visible);
};
const onRemoveTag = (value, e) => {
if (props.disabled) {
return;
}
e.stopPropagation();
const idx = valueList.value.indexOf(value);
if (idx > -1) {
valueList.value.splice(idx, 1);
emitChange(valueList.value);
emitUpdateValue(valueList.value);
}
};
const onFoldTagClick = (e) => {
if (foldTrigger === "click") {
e.stopPropagation();
}
};
const beforeTagPopoverShow = () => {
if (props.disabled) {
return false;
}
return true;
};
const handleClickEvent = (e) => {
if (props.disabled) {
e.stopPropagation();
e.preventDefault();
return false;
}
lastClickWasInside.value = true;
if (props.filterable && inputRef.value && e.target !== inputRef.value) {
inputRef.value.focus();
}
};
const handleMouseLeave = () => {
lastClickWasInside.value = false;
};
const beforeOptionsHide = () => {
if (props.filterable && lastClickWasInside.value) {
return false;
}
if (isFunction(props.beforeOptionsHide)) {
return props.beforeOptionsHide();
}
return true;
};
vue.watch(filterValue, async () => {
await vue.nextTick();
if (props.filterable && valueListDisplay.value.length > 0 && inputMirrorRef.value) {
inputWidth.value = Math.max(12, inputMirrorRef.value.offsetWidth + 2);
} else {
inputWidth.value = 12;
}
});
vue.watch(
() => isSelecting.value,
(newVal) => {
if (newVal) {
tagPopoverVisible.value = false;
if (props.filterable) {
vue.nextTick(() => {
if (inputRef.value) {
inputRef.value.focus();
}
});
}
} else {
filterValue.value = "";
}
}
);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$1e), vue.mergeProps({
ref_key: "cascaderV2Ref",
ref: cascaderV2Ref
}, {
size: props.size,
variant: props.variant,
color: color2.value,
disabled: props.disabled,
round: props.round,
focused: isSelecting.value
}, {
class: ["o-cascader-v2", [
`o-cascader-v2-${props.size}`,
{
"is-selecting": isSelecting.value,
"is-multiple": props.multiple && valueList.value.length > 0,
"o-cascader-v2-clearable": isClearable.value,
"o-cascader-v2-is-loading": effectiveLoading.value
}
]],
onClick: handleClickEvent,
onMouseleave: handleMouseLeave
}), {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(OScroller), {
class: "o-cascader-v2-tags-scroller",
"wrap-class": "o-cascader-v2-value-list",
"show-type": "hover",
size: "small",
"disabled-y": props.disabled,
"disabled-x": ""
}, {
default: vue.withCtx(() => [
!props.multiple || props.multiple && valueList.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("input", {
key: 0,
ref_key: "inputRef",
ref: inputRef,
disabled: props.disabled,
value: filterValue.value || optionLabels.value[valueList.value[0]],
placeholder: props.placeholder,
readonly: !props.filterable,
type: "text",
class: "o-cascader-v2-input",
onInput: handleInput
}, null, 40, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(valueListDisplay.value, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item,
class: "o-cascader-v2-tag"
}, [
vue.createElementVNode(
"span",
_hoisted_3,
vue.toDisplayString(optionLabels.value[item]),
1
/* TEXT */
),
vue.createElementVNode("div", {
class: vue.normalizeClass(["o-cascader-v2-tag-remove", { "o-cascader-v2-tag-remove-disabled": props.disabled }]),
onClick: (e) => onRemoveTag(item, e)
}, [
vue.createVNode(vue.unref(IconClose))
], 10, _hoisted_4)
]);
}),
128
/* KEYED_FRAGMENT */
)),
_ctx.showFoldTags && valueListFold.value.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(OPopover), {
key: 0,
visible: tagPopoverVisible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => tagPopoverVisible.value = $event),
trigger: vue.unref(foldTrigger),
"before-show": beforeTagPopoverShow,
disabled: props.disabled,
"wrap-class": "o-cascader-v2-tag-popover",
position: "top"
}, {
target: vue.withCtx(() => [
vue.createElementVNode("div", {
class: "o-cascader-v2-tag",
onClick: onFoldTagClick
}, [
vue.renderSlot(_ctx.$slots, "tag-fold", {}, () => [
vue.createTextVNode(
vue.toDisplayString(foldLabel.value),
1
/* TEXT */
)
])
])
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_5, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(valueListFold.value, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item,
class: "o-cascader-v2-tag"
}, [
vue.createElementVNode(
"span",
_hoisted_6,
vue.toDisplayString(optionLabels.value[item]),
1
/* TEXT */
),
vue.createElementVNode("div", {
class: vue.normalizeClass(["o-cascader-v2-tag-remove", { "o-cascader-v2-tag-remove-disabled": props.disabled }]),
onClick: (e) => onRemoveTag(item, e)
}, [
vue.createVNode(vue.unref(IconClose))
], 10, _hoisted_7)
]);
}),
128
/* KEYED_FRAGMENT */
))
])
]),
_: 3
/* FORWARDED */
}, 8, ["visible", "trigger", "disabled"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" 镜像元素，可搜索模式下用于动态测量输入框宽度 "),
props.filterable && valueListDisplay.value.length > 0 ? (vue.openBlock(), vue.createElementBlock(
"span",
{
key: 1,
ref_key: "inputMirrorRef",
ref: inputMirrorRef,
class: "o-cascader-v2-input-mirror",
"aria-hidden": "true"
},
vue.toDisplayString(filterValue.value || ""),
513
/* TEXT, NEED_PATCH */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" 多选搜索框 "),
props.filterable ? (vue.openBlock(), vue.createElementBlock("input", {
key: 2,
ref_key: "inputRef",
ref: inputRef,
value: filterValue.value,
readonly: !props.filterable,
disabled: props.disabled,
type: "text",
class: "o-cascader-v2-input",
style: vue.normalizeStyle(props.filterable && valueListDisplay.value.length > 0 ? { width: `${inputWidth.value}px` } : { width: "100%" }),
onInput: handleInput
}, null, 44, _hoisted_8)) : vue.createCommentVNode("v-if", true)
])),
vue.createElementVNode("div", _hoisted_9, [
vue.createElementVNode("div", _hoisted_10, [
effectiveLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [
vue.createVNode(vue.unref(IconLoading), { class: "o-rotating" })
])) : isClearable.value ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: "o-cascader-v2-clear",
onClick: clearClick
}, [
vue.createVNode(vue.unref(IconClose), { class: "o-cascader-v2-clear-icon" })
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-cascader-v2-arrow", { active: isSelecting.value }])
},
[
vue.renderSlot(_ctx.$slots, "arrow", { active: isSelecting.value }, () => [
vue.createVNode(vue.unref(IconChevronDown))
])
],
2
/* CLASS */
)
]),
vue.renderSlot(_ctx.$slots, "suffix", { active: isSelecting.value })
])
]),
_: 3
/* FORWARDED */
}, 8, ["disabled-y"]),
vue.createVNode(vue.unref(ClientOnly), null, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.Teleport, {
to: cascaderv2Panel.value,
disabled: !cascaderv2Panel.value
}, [
vue.withDirectives(vue.createElementVNode(
"div",
null,
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createVNode(_sfc_main$1, {
options: props.options,
"model-value": props.modelValue,
"path-mode": props.pathMode,
"expand-trigger": props.expandTrigger,
size: props.size,
"show-all-levels": props.showAllLevels,
filterable: props.filterable,
lazy: props.lazy,
lazyload: props.lazyload
}, null, 8, ["options", "model-value", "path-mode", "expand-trigger", "size", "show-all-levels", "filterable", "lazy", "lazyload"])
])
],
512
/* NEED_PATCH */
), [
[vue.vShow, cascaderv2Panel.value]
])
], 8, ["to", "disabled"])),
!props.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(OPopup), {
key: 0,
visible: isSelecting.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => isSelecting.value = $event),
transition: props.transition,
"unmount-on-hide": props.unmountOnHide,
position: props.optionPosition,
wrapper: props.optionsWrapper,
target: cascaderV2El.value,
trigger: props.trigger,
"adjust-min-width": props.optionWidthMode === "min-width",
"adjust-width": props.optionWidthMode === "width",
"before-show": props.beforeOptionsShow,
"before-hide": beforeOptionsHide,
offset: 4,
"wrap-class": "o-cascader-v2-panel-popup",
onChange: onOptionVisibleChange
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "cascaderv2Panel",
ref: cascaderv2Panel
},
null,
512
/* NEED_PATCH */
)
]),
_: 1
/* STABLE */
}, 8, ["visible", "transition", "unmount-on-hide", "position", "wrapper", "target", "trigger", "adjust-min-width", "adjust-width", "before-show"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" TODO 移动端 ")
]),
_: 3
/* FORWARDED */
})
]),
_: 3
/* FORWARDED */
}, 16, ["class"]);
};
}
});
const OCascaderV2 = Object.assign(_sfc_main, {
OCascaderV2Panel: _sfc_main$1,
install(app) {
app.component("OCascaderV2", _sfc_main);
app.component("OCascaderV2Panel", _sfc_main$1);
}
});
exports2.AnchorSizeTypes = AnchorSizeTypes;
exports2.BadgeColorTypes = BadgeColorTypes;
exports2.CardCoverFitTypes = CardCoverFitTypes;
exports2.CardHoverCursorTypes = CardHoverCursorTypes;
exports2.Color2Types = Color2Types;
exports2.ColorPool = ColorPool;
exports2.ColorTypes = ColorTypes;
exports2.DEFAULT_CELL_FIRST_COL_MARKER = DEFAULT_CELL_FIRST_COL_MARKER;
exports2.DEFAULT_CELL_LAST_COL_MARKER = DEFAULT_CELL_LAST_COL_MARKER;
exports2.DEFAULT_CELL_LAST_ROW_MARKER = DEFAULT_CELL_LAST_ROW_MARKER;
exports2.DEFAULT_ROW_LAST_MARKER = DEFAULT_ROW_LAST_MARKER;
exports2.DataTableFixedTypes = DataTableFixedTypes;
exports2.DataTableHeaderStyles = DataTableHeaderStyles;
exports2.DataTableSizes = DataTableSizes;
exports2.DataTableSortMethod = DataTableSortMethod;
exports2.DataTableSortModes = DataTableSortModes;
exports2.DialogSizeTypes = DialogSizeTypes;
exports2.DirectionTypes = DirectionTypes;
exports2.DividerVariantTypes = DividerVariantTypes;
exports2.Duration = Duration;
exports2.InputNumberControlTypes = InputNumberControlTypes;
exports2.LinkSizeTypes = LinkSizeTypes;
exports2.MenuSizeTypes = MenuSizeTypes;
exports2.MessageStatusTypes = MessageStatusTypes;
exports2.OAnchor = OAnchor;
exports2.OAnchorItem = _sfc_main$1P;
exports2.OAvatar = OAvatar;
exports2.OAvatarGroup = OAvatarGroup;
exports2.OBadge = OBadge;
exports2.OBreadcrumb = OBreadcrumb;
exports2.OBreadcrumbItem = _sfc_main$1K;
exports2.OButton = OButton;
exports2.OCard = OCard;
exports2.OCarousel = OCarousel;
exports2.OCarouselItem = _sfc_main$1D;
exports2.OCascader = OCascader;
exports2.OCascaderPanel = _sfc_main$1r;
exports2.OCascaderV2 = OCascaderV2;
exports2.OCascaderV2Panel = _sfc_main$1;
exports2.OCheckbox = OCheckbox;
exports2.OCheckboxGroup = OCheckboxGroup;
exports2.OChildOnly = OChildOnly;
exports2.OCol = _sfc_main$1g;
exports2.OCollapse = OCollapse;
exports2.OCollapseItem = _sfc_main$1n;
exports2.OConfigProvider = OConfigProvider;
exports2.ODataTable = ODataTable;
exports2.ODatePicker = ODatePicker;
exports2.ODateRangePicker = ODateRangePicker;
exports2.ODateTimePicker = ODateTimePicker;
exports2.ODateTimeRangePicker = ODateTimeRangePicker;
exports2.ODialog = ODialog;
exports2.ODivider = ODivider;
exports2.ODropdown = ODropdown;
exports2.ODropdownItem = _sfc_main$1k;
exports2.OFigure = OFigure;
exports2.OForm = OForm;
exports2.OFormItem = _sfc_main$1i;
exports2.OIcon = OIcon;
exports2.OIconAdd = OIconAdd;
exports2.OIconArrowDown = OIconArrowDown;
exports2.OIconArrowLeft = OIconArrowLeft;
exports2.OIconArrowRight = OIconArrowRight;
exports2.OIconArrowUp = OIconArrowUp;
exports2.OIconAscend = OIconAscend;
exports2.OIconAvatar = OIconAvatar;
exports2.OIconCalendar = OIconCalendar;
exports2.OIconCaretDown = OIconCaretDown;
exports2.OIconCaretLeft = OIconCaretLeft;
exports2.OIconCaretRight = OIconCaretRight;
exports2.OIconCaretUp = OIconCaretUp;
exports2.OIconCheckMark = OIconCheckMark;
exports2.OIconChecked = OIconChecked;
exports2.OIconChevronDown = OIconChevronDown;
exports2.OIconChevronDownBold = OIconChevronDownBold;
exports2.OIconChevronLeft = OIconChevronLeft;
exports2.OIconChevronRight = OIconChevronRight;
exports2.OIconChevronRightSmall = OIconChevronRightSmall;
exports2.OIconChevronUp = OIconChevronUp;
exports2.OIconClose = OIconClose;
exports2.OIconDanger = OIconDanger;
exports2.OIconDelete = OIconDelete;
exports2.OIconDone = OIconDone;
exports2.OIconDoubleArrowDown = OIconDoubleArrowDown;
exports2.OIconDoubleArrowLeft = OIconDoubleArrowLeft;
exports2.OIconDoubleArrowRight = OIconDoubleArrowRight;
exports2.OIconDoubleArrowUp = OIconDoubleArrowUp;
exports2.OIconDownload = OIconDownload;
exports2.OIconEdit = OIconEdit;
exports2.OIconEllipsis = OIconEllipsis;
exports2.OIconExclamationMark = OIconExclamationMark;
exports2.OIconEye = OIconEye;
exports2.OIconEyeOff = OIconEyeOff;
exports2.OIconFile = OIconFile;
exports2.OIconFilter = OIconFilter;
exports2.OIconImageError = OIconImageError;
exports2.OIconImgError = OIconImgError;
exports2.OIconInfo = OIconInfo;
exports2.OIconInfoTip = OIconInfoTip;
exports2.OIconKunpeng = OIconKunpeng;
exports2.OIconLink = OIconLink;
exports2.OIconLoading = OIconLoading;
exports2.OIconLoadingSmall = OIconLoadingSmall;
exports2.OIconMinus = OIconMinus;
exports2.OIconMoon = OIconMoon;
exports2.OIconNoData = OIconNoData;
exports2.OIconOneToOne = OIconOneToOne;
exports2.OIconRefresh = OIconRefresh;
exports2.OIconSearch = OIconSearch;
exports2.OIconSkill = OIconSkill;
exports2.OIconSort = OIconSort;
exports2.OIconStar = OIconStar;
exports2.OIconSuccess = OIconSuccess;
exports2.OIconSun = OIconSun;
exports2.OIconTime = OIconTime;
exports2.OIconVideoPlay = OIconVideoPlay;
exports2.OIconWarning = OIconWarning;
exports2.OIconZoomIn = OIconZoomIn;
exports2.OIconZoomOut = OIconZoomOut;
exports2.OInput = OInput;
exports2.OInputNumber = OInputNumber;
exports2.OIntersectionObserver = intersectionObserver;
exports2.OIpInput = OIpInput;
exports2.OLayer = OLayer;
exports2.OLink = OLink;
exports2.OLoading = OLoading;
exports2.OMenu = OMenu;
exports2.OMenuItem = _sfc_main$16;
exports2.OMessage = OMessage;
exports2.OMonthPicker = OMonthPicker;
exports2.OMonthRangePicker = OMonthRangePicker;
exports2.OOption = OOption;
exports2.OOptionGroup = _sfc_main$1v;
exports2.OOptionList = _sfc_main$1w;
exports2.OPagination = OPagination;
exports2.OPopover = OPopover;
exports2.OPopup = OPopup;
exports2.OProgress = OProgress;
exports2.ORadio = ORadio;
exports2.ORadioGroup = ORadioGroup;
exports2.ORate = ORate;
exports2.OResizeObserver = OResizeObserver;
exports2.OResult = OResult;
exports2.ORow = ORow;
exports2.OScrollbar = _sfc_main$1B;
exports2.OScroller = OScroller;
exports2.OSearch = OSearch;
exports2.OSelect = OSelect;
exports2.OSkeleton = OSkeleton;
exports2.OSkeletonAvatar = _sfc_main$U;
exports2.OSkeletonFigure = OSkeletonFigure;
exports2.OSkeletonText = _sfc_main$W;
exports2.OSlider = OSlider;
exports2.OStep = OStep;
exports2.OStepItem = _sfc_main$z;
exports2.OSubMenu = _sfc_main$17;
exports2.OSwitch = OSwitch;
exports2.OTab = OTab;
exports2.OTabPane = _sfc_main$R;
exports2.OTable = OTable;
exports2.OTag = OTag;
exports2.OTextarea = OTextarea;
exports2.OTimePicker = OTimePicker;
exports2.OTimeRangePicker = OTimeRangePicker;
exports2.OToast = OToast;
exports2.OToggle = OToggle;
exports2.OUpload = OUpload;
exports2.OVirtualList = OVirtualList;
exports2.OYearPicker = OYearPicker;
exports2.OYearRangePicker = OYearRangePicker;
exports2.ObjectFitTypes = ObjectFitTypes;
exports2.OptionWidthModeTypes = OptionWidthModeTypes;
exports2.PaginationLayoutTypes = PaginationLayoutTypes;
exports2.PaginationVariantTypes = PaginationVariantTypes;
exports2.PopupPositionTypes = PopupPositionTypes;
exports2.PopupTriggerTypes = PopupTriggerTypes;
exports2.PositionTypes = PositionTypes;
exports2.ProgressColorTypes = ProgressColorTypes;
exports2.ProgressSizeTypes = ProgressSizeTypes;
exports2.ProgressVariantTypes = ProgressVariantTypes;
exports2.RateItemStatusTypes = RateItemStatusTypes;
exports2.RateSizeTypes = RateSizeTypes;
exports2.ResultStatusTypes = ResultStatusTypes;
exports2.ScrollerSizeTypes = ScrollerSizeTypes;
exports2.SizeTypes = SizeTypes;
exports2.SkeletonAvatarSizeTypes = SkeletonAvatarSizeTypes;
exports2.StepItemStatusTypes = StepItemStatusTypes;
exports2.SwitchSizeTypes = SwitchSizeTypes;
exports2.TABLE_ALL_OPTION_VALUE = TABLE_ALL_OPTION_VALUE;
exports2.TABLE_EMPTY_OPTION_VALUE = TABLE_EMPTY_OPTION_VALUE;
exports2.TIME_PREFIX = TIME_PREFIX;
exports2.TabVariantTypes = TabVariantTypes;
exports2.TableBorderTypes = TableBorderTypes;
exports2.TagColorTypes = TagColorTypes;
exports2.TagVariantTypes = TagVariantTypes;
exports2.TextOverflowTypes = TextOverflowTypes;
exports2.UploadFileStatusTypes = UploadFileStatusTypes;
exports2.UploadListTypes = UploadListTypes;
exports2.VariantTypes = VariantTypes;
exports2.addLocale = addLocale;
exports2.anchorItemProps = anchorItemProps;
exports2.anchorProps = anchorProps;
exports2.asyncSome = asyncSome;
exports2.avatarGroupProps = avatarGroupProps;
exports2.avatarProps = avatarProps;
exports2.badgeProps = badgeProps;
exports2.basePickerProps = basePickerProps;
exports2.baseScrollarProps = baseScrollarProps;
exports2.breadcrumbItemProps = breadcrumbItemProps;
exports2.breadcrumbProps = breadcrumbProps;
exports2.buttonProps = buttonProps;
exports2.buttonToggleProps = buttonToggleProps;
exports2.cardProps = cardProps;
exports2.carouselProps = carouselProps;
exports2.cascaderPanelProps = cascaderPanelProps;
exports2.cascaderProps = cascaderProps;
exports2.cascaderV2InjectKey = cascaderV2InjectKey;
exports2.cascaderV2PanelProps = cascaderV2PanelProps;
exports2.cascaderV2Props = cascaderV2Props;
exports2.checkboxGroupProps = checkboxGroupProps;
exports2.checkboxProps = checkboxProps;
exports2.chunk = chunk;
exports2.colProps = colProps;
exports2.collapseItemProps = collapseItemProps;
exports2.collapseProps = collapseProps;
exports2.configProviderInjectKey = configProviderInjectKey;
exports2.configProviderProps = configProviderProps;
exports2.dataTableInjectKey = dataTableInjectKey;
exports2.dataTableProps = dataTableProps;
exports2.dataTableRowInjectKey = dataTableRowInjectKey;
exports2.dateConstraintProps = dateConstraintProps;
exports2.datePickerProps = datePickerProps;
exports2.dateRangePickerProps = dateRangePickerProps;
exports2.dateTimePickerProps = dateTimePickerProps;
exports2.dateTimeRangePickerProps = dateTimeRangePickerProps;
exports2.debounce = debounce;
exports2.debounceRAF = debounceRAF;
exports2.dialogProps = dialogProps;
exports2.dividerProps = dividerProps;
exports2.dropdownItemProps = dropdownItemProps;
exports2.dropdownProps = dropdownProps;
exports2.figureProps = figureProps;
exports2.formInjectKey = formInjectKey;
exports2.formItemInjectKey = formItemInjectKey;
exports2.formItemProps = formItemProps;
exports2.formProps = formProps;
exports2.formateToString = formateToString;
exports2.getUId = getUId;
exports2.getValueByPath = getValueByPath;
exports2.iconProps = iconProps;
exports2.idlePerformTask = idlePerformTask;
exports2.initIconAdd = initIconAdd;
exports2.initIconChevronDown = initIconChevronDown;
exports2.initIconChevronLeft = initIconChevronLeft;
exports2.initIconChevronRight = initIconChevronRight;
exports2.initIconChevronUp = initIconChevronUp;
exports2.initIconClose = initIconClose;
exports2.initIconDone = initIconDone;
exports2.initIconEllipsis = initIconEllipsis;
exports2.initIconLinkArrow = initIconLinkArrow;
exports2.initIconLinkPrefix = initIconLinkPrefix;
exports2.initIconLoading = initIconLoading;
exports2.initIconMinus = initIconMinus;
exports2.initIconStar = initIconStar;
exports2.initIconVideoPlay = initIconVideoPlay;
exports2.initMediaPoint = initMediaPoint;
exports2.initPrestColor = initPrestColor;
exports2.initRound = initRound;
exports2.initSize = initSize;
exports2.initZIndex = initZIndex;
exports2.inputNumberProps = inputNumberProps;
exports2.inputProps = inputProps;
exports2.ipInputProps = ipInputProps;
exports2.isArray = isArray;
exports2.isArrayEqual = isArrayEqual;
exports2.isBoolean = isBoolean;
exports2.isClient = isClient;
exports2.isCurrentPageLink = isCurrentPageLink;
exports2.isEmptyArray = isEmptyArray;
exports2.isEmptyObject = isEmptyObject;
exports2.isFunction = isFunction;
exports2.isHoverDevice = isHoverDevice;
exports2.isIosDevice = isIosDevice;
exports2.isNil = isNil;
exports2.isNull = isNull;
exports2.isNumber = isNumber;
exports2.isNumeric = isNumeric;
exports2.isObject = isObject;
exports2.isPlainObject = isPlainObject;
exports2.isPromise = isPromise;
exports2.isString = isString;
exports2.isTouchDevice = isTouchDevice;
exports2.isUndefined = isUndefined;
exports2.isValidDate = isValidDate;
exports2.isWindow = isWindow;
exports2.layerProps = layerProps;
exports2.linkProps = linkProps;
exports2.loadingProps = loadingProps;
exports2.menuInjectKey = menuInjectKey;
exports2.menuItemProps = menuItemProps;
exports2.menuProps = menuProps;
exports2.messageListProps = messageListProps;
exports2.messageProps = messageProps;
exports2.monthPickerProps = monthPickerProps;
exports2.monthRangePickerProps = monthRangePickerProps;
exports2.moveToFirst = moveToFirst;
exports2.optionProps = optionProps;
exports2.paginationProps = paginationProps;
exports2.performTask = performTask;
exports2.pick = pick;
exports2.popoverProps = popoverProps;
exports2.popupPickerProps = popupPickerProps;
exports2.popupProps = popupProps;
exports2.progressProps = progressProps;
exports2.promiseWithResolvers = promiseWithResolvers;
exports2.radioGroupProps = radioGroupProps;
exports2.radioProps = radioProps;
exports2.rateItemProps = rateItemProps;
exports2.rateProps = rateProps;
exports2.requestImage = requestImage;
exports2.resultProps = resultProps;
exports2.rowProps = rowProps;
exports2.scrollbarProps = scrollbarProps;
exports2.scrollerProps = scrollerProps;
exports2.searchProps = searchProps;
exports2.selectProps = selectProps;
exports2.setVLoadingOption = setVLoadingOption;
exports2.setValueByPath = setValueByPath;
exports2.skeletonAvatarProps = skeletonAvatarProps;
exports2.skeletonFigureProps = skeletonFigureProps;
exports2.skeletonProps = skeletonProps;
exports2.skeletonTextProps = skeletonTextProps;
exports2.sliderButtonProps = sliderButtonProps;
exports2.sliderEmits = sliderEmits;
exports2.sliderMarksProps = sliderMarksProps;
exports2.sliderProps = sliderProps;
exports2.stepItemProps = stepItemProps;
exports2.stepProps = stepProps;
exports2.subMenuInjectKey = subMenuInjectKey;
exports2.subMenuProps = subMenuProps;
exports2.switchProps = switchProps;
exports2.tabPaneProps = tabPaneProps;
exports2.tabProps = tabProps;
exports2.tableProps = tableProps;
exports2.tagProps = tagProps;
exports2.textareaProps = textareaProps;
exports2.throttleRAF = throttleRAF;
exports2.timeConstraintProps = timeConstraintProps;
exports2.timePickerProps = timePickerProps;
exports2.timeRangePickerProps = timeRangePickerProps;
exports2.toastListProps = toastListProps;
exports2.toastProps = toastProps;
exports2.uniqueId = uniqueId;
exports2.uploadProps = uploadProps;
exports2.useElementDirective = useElementDirective;
exports2.useElementOverflown = useElementOverflown;
exports2.useI18n = useI18n;
exports2.useIntersectionObserver = useIntersectionObserver;
exports2.useIntersectionObserverDirective = useIntersectionObserverDirective;
exports2.useLoading = useLoading;
exports2.useLocale = useLocale;
exports2.useMessage = useMessage;
exports2.useReiszeObserverDirective = useReiszeObserverDirective;
exports2.useResizeObserver = useResizeObserver;
exports2.useResponseCssVar = useResponseCssVar;
exports2.useRunOnceNextTick = useRunOnceNextTick;
exports2.useScreen = useScreen;
exports2.useScrollbar = useScrollbar;
exports2.useSortedTeleportChildren = useSortedTeleportChildren;
exports2.useTableMeta = useTableMeta;
exports2.useTheme = useTheme;
exports2.useToast = useToast;
exports2.vFocus = vFocus;
exports2.vIntersection = vIntersection;
exports2.vLoading = vLoading;
exports2.vOnResize = vOnResize;
exports2.vOutClick = vOutClick;
exports2.vScrollbar = vScrollbar;
exports2.vUid = vUid;
exports2.virtualListProps = virtualListProps;
exports2.yearPickerProps = yearPickerProps;
exports2.yearRangePickerProps = yearRangePickerProps;
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
}));
//# sourceMappingURL=opendesign.js.map