mortise-tenon-design 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/{expand-box → expand}/index.mjs +3 -3
- package/es/components/expand/index.mjs.map +1 -0
- package/es/components/expand/src/expand.css +1 -0
- package/es/components/expand/src/expand.vue.mjs +8 -0
- package/es/components/expand/src/expand.vue.mjs.map +1 -0
- package/es/components/{expand-box/src/expand-box.vue2.mjs → expand/src/expand.vue2.mjs} +8 -8
- package/es/components/expand/src/expand.vue2.mjs.map +1 -0
- package/es/components/sort/index.mjs +9 -0
- package/es/components/sort/index.mjs.map +1 -0
- package/es/components/sort/src/sort.mjs +54 -0
- package/es/components/sort/src/sort.mjs.map +1 -0
- package/es/index.mjs +4 -2
- package/es/index.mjs.map +1 -1
- package/lib/components/expand/index.js +3 -0
- package/lib/components/expand/index.js.map +1 -0
- package/lib/components/expand/src/expand.css +1 -0
- package/lib/components/expand/src/expand.vue.js +2 -0
- package/lib/components/expand/src/expand.vue.js.map +1 -0
- package/lib/components/expand/src/expand.vue2.js +2 -0
- package/lib/components/expand/src/expand.vue2.js.map +1 -0
- package/lib/components/sort/index.js +2 -0
- package/lib/components/sort/index.js.map +1 -0
- package/lib/components/sort/src/sort.js +2 -0
- package/lib/components/sort/src/sort.js.map +1 -0
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/types/{expand-box → expand}/index.d.ts +5 -4
- package/types/{expand-box/src/expand-box.d.ts → expand/src/expand.d.ts} +1 -1
- package/types/{expand-box/src/expand-box.vue.d.ts → expand/src/expand.vue.d.ts} +2 -2
- package/types/index.d.ts +2 -1
- package/types/sort/index.d.ts +25 -0
- package/types/sort/src/sort.d.ts +36 -0
- package/es/components/expand-box/index.mjs.map +0 -1
- package/es/components/expand-box/src/expand-box.css +0 -1
- package/es/components/expand-box/src/expand-box.vue.mjs +0 -8
- package/es/components/expand-box/src/expand-box.vue.mjs.map +0 -1
- package/es/components/expand-box/src/expand-box.vue2.mjs.map +0 -1
- package/lib/components/expand-box/index.js +0 -3
- package/lib/components/expand-box/index.js.map +0 -1
- package/lib/components/expand-box/src/expand-box.css +0 -1
- package/lib/components/expand-box/src/expand-box.vue.js +0 -2
- package/lib/components/expand-box/src/expand-box.vue.js.map +0 -1
- package/lib/components/expand-box/src/expand-box.vue2.js +0 -2
- package/lib/components/expand-box/src/expand-box.vue2.js.map +0 -1
@@ -1,10 +1,10 @@
|
|
1
|
-
import n from "./src/expand
|
1
|
+
import n from "./src/expand.vue.mjs";
|
2
2
|
n.install = (o) => {
|
3
3
|
n.name && o.component(n.name, n);
|
4
4
|
};
|
5
5
|
const a = n;
|
6
6
|
export {
|
7
|
-
a as
|
7
|
+
a as MtExpand
|
8
8
|
};
|
9
9
|
//# sourceMappingURL=index.mjs.map
|
10
|
-
import './src/expand
|
10
|
+
import './src/expand.css';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/expand/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport Expand from './src/expand.vue';\r\n\r\nExpand.install = (app: App): void => {\r\n if (Expand.name) {\r\n app.component(Expand.name, Expand);\r\n }\r\n};\r\n\r\nexport const MtExpand = Expand;\r\n\r\nexport * from './src/expand';\r\n"],"names":["Expand","app","MtExpand"],"mappings":";AAGAA,EAAO,UAAU,CAACC,MAAmB;AACnC,EAAID,EAAO,QACLC,EAAA,UAAUD,EAAO,MAAMA,CAAM;AAErC;AAEO,MAAME,IAAWF;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.mt-expand[data-v-60128610]{overflow:hidden}.mt-expand-transition[data-v-60128610]{transition:height var(--2863d212) ease-in-out}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"expand.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { defineComponent as m, useCssVars as p, computed as a, ref as i, onMounted as d, openBlock as f, createElementBlock as g, normalizeClass as v, normalizeStyle as R, createElementVNode as x, renderSlot as y } from "vue";
|
2
2
|
import { useResizeObserver as z } from "@vueuse/core";
|
3
3
|
import { debounce as _ } from "lodash-es";
|
4
|
-
const
|
5
|
-
name: "
|
6
|
-
__name: "expand
|
4
|
+
const B = /* @__PURE__ */ m({
|
5
|
+
name: "MtExpand",
|
6
|
+
__name: "expand",
|
7
7
|
props: {
|
8
8
|
open: { type: Boolean, default: !1 },
|
9
9
|
targetRange: { default: 0 },
|
@@ -11,7 +11,7 @@ const T = /* @__PURE__ */ m({
|
|
11
11
|
},
|
12
12
|
setup(l) {
|
13
13
|
p((e) => ({
|
14
|
-
"
|
14
|
+
"2863d212": u.value
|
15
15
|
}));
|
16
16
|
const t = l, u = a(() => `${t.transitionTime}ms`), n = i(0), s = a(() => n.value > t.targetRange), c = a(() => ({ height: `${!s.value || t.open ? n.value : t.targetRange}px` })), o = i(), r = _(() => {
|
17
17
|
var e;
|
@@ -19,8 +19,8 @@ const T = /* @__PURE__ */ m({
|
|
19
19
|
}, t.transitionTime);
|
20
20
|
return z(o, r), d(() => {
|
21
21
|
r();
|
22
|
-
}), (e,
|
23
|
-
class: v(["mt-expand
|
22
|
+
}), (e, h) => (f(), g("div", {
|
23
|
+
class: v(["mt-expand", { "mt-expand-transition": !!e.transitionTime }]),
|
24
24
|
style: R(c.value)
|
25
25
|
}, [
|
26
26
|
x("div", {
|
@@ -36,6 +36,6 @@ const T = /* @__PURE__ */ m({
|
|
36
36
|
}
|
37
37
|
});
|
38
38
|
export {
|
39
|
-
|
39
|
+
B as default
|
40
40
|
};
|
41
|
-
//# sourceMappingURL=expand
|
41
|
+
//# sourceMappingURL=expand.vue2.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"expand.vue2.mjs","sources":["../../../../../../packages/components/expand/src/expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandProps } from './expand.ts';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\ndefineOptions({ name: 'MtExpand' });\r\n\r\nconst props = withDefaults(defineProps<ExpandProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":";;;;;;;;;;;;;;;AAQA,UAAMA,IAAQC,GAMRC,IAAqBC,EAAS,MAAM,GAAGH,EAAM,cAAc,IAAI,GAG/DI,IAAeC,EAAI,CAAC,GAGpBC,IAAaH,EAAS,MAAMC,EAAa,QAAQJ,EAAM,WAAW,GAGlEO,IAAeJ,EAAS,OAErB,EAAE,QAAQ,GADJ,CAACG,EAAW,SAASN,EAAM,OAAOI,EAAa,QAAQJ,EAAM,WAClD,KAAK,EAC9B,GAGKQ,IAAaH,EAAI,GAGjBI,IAAkBC,EAAS,MAAM;;AACxB,MAAAN,EAAA,SAAQO,IAAAH,EAAW,UAAX,gBAAAG,EAAkB;AAAA,IAAA,GACtCX,EAAM,cAAc;AAGvB,WAAAY,EAAkBJ,GAAYC,CAAe,GAG7CI,EAAU,MAAM;AACE,MAAAJ,EAAA;AAAA,IAAA,CACjB;;;;;;;;;;;;;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/sort/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport Sort from './src/sort';\r\n\r\nSort.install = (app: App): void => {\r\n if (Sort.name) {\r\n app.component(Sort.name, Sort);\r\n }\r\n};\r\n\r\nexport const MtSort = Sort;\r\n\r\nexport * from './src/sort';\r\n"],"names":["Sort","app","MtSort"],"mappings":";AAGAA,EAAK,UAAU,CAACC,MAAmB;AACjC,EAAID,EAAK,QACHC,EAAA,UAAUD,EAAK,MAAMA,CAAI;AAEjC;AAEO,MAAME,IAASF;"}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import { defineComponent as l, computed as p } from "vue";
|
2
|
+
const d = l({
|
3
|
+
name: "MtSort",
|
4
|
+
props: {
|
5
|
+
/** 排序配置 */
|
6
|
+
sortList: {
|
7
|
+
type: Array,
|
8
|
+
default: () => []
|
9
|
+
},
|
10
|
+
/** 排序key名 */
|
11
|
+
keyName: {
|
12
|
+
type: String,
|
13
|
+
default: "sort-key"
|
14
|
+
}
|
15
|
+
},
|
16
|
+
setup(t, { slots: s }) {
|
17
|
+
const o = p(() => {
|
18
|
+
var c;
|
19
|
+
const e = ((c = s.default) == null ? void 0 : c.call(s)) || [], n = f(t.keyName, e), r = Array.from(new Set(t.sortList)).map((i) => n[i]).filter(Boolean);
|
20
|
+
return u(t.keyName, e, t.sortList, r);
|
21
|
+
});
|
22
|
+
return () => o.value;
|
23
|
+
}
|
24
|
+
});
|
25
|
+
function f(t, s, o = {}) {
|
26
|
+
return s.forEach((e) => {
|
27
|
+
var r;
|
28
|
+
const n = (r = e.props) == null ? void 0 : r[t];
|
29
|
+
if (n) {
|
30
|
+
o[n] ? console.warn(`<mt-sort-space> ${t}: ${n} repeat`) : o[n] = e;
|
31
|
+
return;
|
32
|
+
}
|
33
|
+
Array.isArray(e.children) && f(t, e.children, o);
|
34
|
+
}), o;
|
35
|
+
}
|
36
|
+
function u(t, s, o, e) {
|
37
|
+
const n = [];
|
38
|
+
return s.forEach((r) => {
|
39
|
+
var i;
|
40
|
+
const c = (i = r.props) == null ? void 0 : i[t];
|
41
|
+
if (c && o.includes(c)) {
|
42
|
+
const a = e.shift();
|
43
|
+
if (a) {
|
44
|
+
n.push(a);
|
45
|
+
return;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
Array.isArray(r.children) && (r = { ...r }, r.children = u(t, r.children, o, e)), n.push(r);
|
49
|
+
}), n;
|
50
|
+
}
|
51
|
+
export {
|
52
|
+
d as default
|
53
|
+
};
|
54
|
+
//# sourceMappingURL=sort.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"sort.mjs","sources":["../../../../../../packages/components/sort/src/sort.ts"],"sourcesContent":["import type { PropType, VNode } from 'vue';\nimport { computed, defineComponent } from 'vue';\n\nexport interface SortSpaceProps {\n /** 排序配置 */\n sortList?: (string | number)[]\n /** 排序key名 */\n keyName?: string\n}\n\nexport default defineComponent({\n name: 'MtSort',\n props: {\n /** 排序配置 */\n sortList: {\n type: Array as PropType<(string | number)[]>,\n default: () => [],\n },\n /** 排序key名 */\n keyName: {\n type: String,\n default: 'sort-key',\n },\n },\n setup(props, { slots }) {\n const renderVNodes = computed(() => {\n const vNodeList = slots.default?.() || [];\n const sortVNodeMap = getVNodeMap(props.keyName, vNodeList);\n const sortVNodeList = Array.from(new Set(props.sortList)).map(key => sortVNodeMap[key]).filter(Boolean);\n return sortDefaultVNodes(props.keyName, vNodeList, props.sortList, sortVNodeList);\n });\n\n return () => renderVNodes.value;\n },\n});\n\n/** 获取插槽中需要排序的节点 */\nfunction getVNodeMap(keyName: string, vNodeList: VNode[], vNodeMap: Record<(string | number), VNode> = {}) {\n vNodeList.forEach((item) => {\n const sortKey = item.props?.[keyName];\n if (sortKey) {\n if (vNodeMap[sortKey]) {\n console.warn(`<mt-sort-space> ${keyName}: ${sortKey} repeat`);\n }\n else {\n vNodeMap[sortKey] = item;\n }\n return;\n }\n if (Array.isArray(item.children)) {\n getVNodeMap(keyName, item.children as VNode[], vNodeMap);\n }\n });\n return vNodeMap;\n}\n\n/** 根据排序后的节点跟换位置 */\nfunction sortDefaultVNodes(keyName: string, vNodeList: VNode[], sortList: (string | number)[], sortVNodeList: VNode[]) {\n const newList: VNode[] = [];\n vNodeList.forEach((vNode) => {\n const sortKey = vNode.props?.[keyName];\n if (sortKey && sortList.includes(sortKey)) {\n const sortVNode = sortVNodeList.shift();\n if (sortVNode) {\n newList.push(sortVNode);\n return;\n }\n }\n if (Array.isArray(vNode.children)) {\n vNode = { ...vNode }; // 避免修改原节点数据\n vNode.children = sortDefaultVNodes(keyName, vNode.children as VNode[], sortList, sortVNodeList);\n }\n newList.push(vNode);\n });\n return newList;\n}\n"],"names":["Sort","defineComponent","props","slots","renderVNodes","computed","vNodeList","_a","sortVNodeMap","getVNodeMap","sortVNodeList","key","sortDefaultVNodes","keyName","vNodeMap","item","sortKey","sortList","newList","vNode","sortVNode"],"mappings":";AAUA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA,IAEL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS,MAAM,CAAA;AAAA,IACjB;AAAA;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,MAAMC,GAAO,EAAE,OAAAC,KAAS;AAChB,UAAAC,IAAeC,EAAS,MAAM;;AAClC,YAAMC,MAAYC,IAAAJ,EAAM,YAAN,gBAAAI,EAAA,KAAAJ,OAAqB,CAAC,GAClCK,IAAeC,EAAYP,EAAM,SAASI,CAAS,GACnDI,IAAgB,MAAM,KAAK,IAAI,IAAIR,EAAM,QAAQ,CAAC,EAAE,IAAI,OAAOM,EAAaG,CAAG,CAAC,EAAE,OAAO,OAAO;AACtG,aAAOC,EAAkBV,EAAM,SAASI,GAAWJ,EAAM,UAAUQ,CAAa;AAAA,IAAA,CACjF;AAED,WAAO,MAAMN,EAAa;AAAA,EAAA;AAE9B,CAAC;AAGD,SAASK,EAAYI,GAAiBP,GAAoBQ,IAA6C,CAAA,GAAI;AAC/F,SAAAR,EAAA,QAAQ,CAACS,MAAS;;AACpB,UAAAC,KAAUT,IAAAQ,EAAK,UAAL,gBAAAR,EAAaM;AAC7B,QAAIG,GAAS;AACP,MAAAF,EAASE,CAAO,IAClB,QAAQ,KAAK,mBAAmBH,CAAO,KAAKG,CAAO,SAAS,IAG5DF,EAASE,CAAO,IAAID;AAEtB;AAAA,IAAA;AAEF,IAAI,MAAM,QAAQA,EAAK,QAAQ,KACjBN,EAAAI,GAASE,EAAK,UAAqBD,CAAQ;AAAA,EACzD,CACD,GACMA;AACT;AAGA,SAASF,EAAkBC,GAAiBP,GAAoBW,GAA+BP,GAAwB;AACrH,QAAMQ,IAAmB,CAAC;AAChB,SAAAZ,EAAA,QAAQ,CAACa,MAAU;;AACrB,UAAAH,KAAUT,IAAAY,EAAM,UAAN,gBAAAZ,EAAcM;AAC9B,QAAIG,KAAWC,EAAS,SAASD,CAAO,GAAG;AACnC,YAAAI,IAAYV,EAAc,MAAM;AACtC,UAAIU,GAAW;AACb,QAAAF,EAAQ,KAAKE,CAAS;AACtB;AAAA,MAAA;AAAA,IACF;AAEF,IAAI,MAAM,QAAQD,EAAM,QAAQ,MACtBA,IAAA,EAAE,GAAGA,EAAM,GACnBA,EAAM,WAAWP,EAAkBC,GAASM,EAAM,UAAqBF,GAAUP,CAAa,IAEhGQ,EAAQ,KAAKC,CAAK;AAAA,EAAA,CACnB,GACMD;AACT;"}
|
package/es/index.mjs
CHANGED
@@ -1,5 +1,7 @@
|
|
1
|
-
import {
|
1
|
+
import { MtExpand as t } from "./components/expand/index.mjs";
|
2
|
+
import { MtSort as x } from "./components/sort/index.mjs";
|
2
3
|
export {
|
3
|
-
|
4
|
+
t as MtExpand,
|
5
|
+
x as MtSort
|
4
6
|
};
|
5
7
|
//# sourceMappingURL=index.mjs.map
|
package/es/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
@@ -0,0 +1,3 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./src/expand.vue.js");e.default.install=t=>{e.default.name&&t.component(e.default.name,e.default)};const a=e.default;exports.MtExpand=a;
|
2
|
+
//# sourceMappingURL=index.js.map
|
3
|
+
require('./src/expand.css');
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../packages/components/expand/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport Expand from './src/expand.vue';\r\n\r\nExpand.install = (app: App): void => {\r\n if (Expand.name) {\r\n app.component(Expand.name, Expand);\r\n }\r\n};\r\n\r\nexport const MtExpand = Expand;\r\n\r\nexport * from './src/expand';\r\n"],"names":["Expand","app","MtExpand"],"mappings":"uHAGAA,EAAAA,QAAO,QAAWC,GAAmB,CAC/BD,EAAAA,QAAO,MACLC,EAAA,UAAUD,UAAO,KAAMA,EAAAA,OAAM,CAErC,EAEO,MAAME,EAAWF,EAAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.mt-expand[data-v-60128610]{overflow:hidden}.mt-expand-transition[data-v-60128610]{transition:height var(--2863d212) ease-in-out}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./expand.vue2.js");;/* empty css */const t=require("../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-60128610"]]);exports.default=u;
|
2
|
+
//# sourceMappingURL=expand.vue.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"expand.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@vueuse/core"),d=require("lodash-es"),p=e.defineComponent({name:"MtExpand",__name:"expand",props:{open:{type:Boolean,default:!1},targetRange:{default:0},transitionTime:{default:200}},setup(i){e.useCssVars(t=>({"2863d212":u.value}));const n=i,u=e.computed(()=>`${n.transitionTime}ms`),o=e.ref(0),s=e.computed(()=>o.value>n.targetRange),l=e.computed(()=>({height:`${!s.value||n.open?o.value:n.targetRange}px`})),a=e.ref(),r=d.debounce(()=>{var t;o.value=(t=a.value)==null?void 0:t.offsetHeight},n.transitionTime);return c.useResizeObserver(a,r),e.onMounted(()=>{r()}),(t,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mt-expand",{"mt-expand-transition":!!t.transitionTime}]),style:e.normalizeStyle(l.value)},[e.createElementVNode("div",{ref_key:"contentRef",ref:a},[e.renderSlot(t.$slots,"default",{open:t.open,isOutRange:s.value},void 0,!0)],512)],6))}});exports.default=p;
|
2
|
+
//# sourceMappingURL=expand.vue2.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"expand.vue2.js","sources":["../../../../../../packages/components/expand/src/expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandProps } from './expand.ts';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\ndefineOptions({ name: 'MtExpand' });\r\n\r\nconst props = withDefaults(defineProps<ExpandProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":"sXAQA,MAAMA,EAAQC,EAMRC,EAAqBC,EAAAA,SAAS,IAAM,GAAGH,EAAM,cAAc,IAAI,EAG/DI,EAAeC,MAAI,CAAC,EAGpBC,EAAaH,EAAAA,SAAS,IAAMC,EAAa,MAAQJ,EAAM,WAAW,EAGlEO,EAAeJ,EAAAA,SAAS,KAErB,CAAE,OAAQ,GADJ,CAACG,EAAW,OAASN,EAAM,KAAOI,EAAa,MAAQJ,EAAM,WAClD,IAAK,EAC9B,EAGKQ,EAAaH,EAAAA,IAAI,EAGjBI,EAAkBC,EAAAA,SAAS,IAAM,OACxBN,EAAA,OAAQO,EAAAH,EAAW,QAAX,YAAAG,EAAkB,YAAA,EACtCX,EAAM,cAAc,EAGvBY,OAAAA,EAAA,kBAAkBJ,EAAYC,CAAe,EAG7CI,EAAAA,UAAU,IAAM,CACEJ,EAAA,CAAA,CACjB"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../packages/components/sort/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport Sort from './src/sort';\r\n\r\nSort.install = (app: App): void => {\r\n if (Sort.name) {\r\n app.component(Sort.name, Sort);\r\n }\r\n};\r\n\r\nexport const MtSort = Sort;\r\n\r\nexport * from './src/sort';\r\n"],"names":["Sort","app","MtSort"],"mappings":"iHAGAA,EAAAA,QAAK,QAAWC,GAAmB,CAC7BD,EAAAA,QAAK,MACHC,EAAA,UAAUD,UAAK,KAAMA,EAAAA,OAAI,CAEjC,EAEO,MAAME,EAASF,EAAAA"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),d=a.defineComponent({name:"MtSort",props:{sortList:{type:Array,default:()=>[]},keyName:{type:String,default:"sort-key"}},setup(e,{slots:s}){const o=a.computed(()=>{var u;const t=((u=s.default)==null?void 0:u.call(s))||[],n=f(e.keyName,t),r=Array.from(new Set(e.sortList)).map(i=>n[i]).filter(Boolean);return l(e.keyName,t,e.sortList,r)});return()=>o.value}});function f(e,s,o={}){return s.forEach(t=>{var r;const n=(r=t.props)==null?void 0:r[e];if(n){o[n]?console.warn(`<mt-sort-space> ${e}: ${n} repeat`):o[n]=t;return}Array.isArray(t.children)&&f(e,t.children,o)}),o}function l(e,s,o,t){const n=[];return s.forEach(r=>{var i;const u=(i=r.props)==null?void 0:i[e];if(u&&o.includes(u)){const c=t.shift();if(c){n.push(c);return}}Array.isArray(r.children)&&(r={...r},r.children=l(e,r.children,o,t)),n.push(r)}),n}exports.default=d;
|
2
|
+
//# sourceMappingURL=sort.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"sort.js","sources":["../../../../../../packages/components/sort/src/sort.ts"],"sourcesContent":["import type { PropType, VNode } from 'vue';\nimport { computed, defineComponent } from 'vue';\n\nexport interface SortSpaceProps {\n /** 排序配置 */\n sortList?: (string | number)[]\n /** 排序key名 */\n keyName?: string\n}\n\nexport default defineComponent({\n name: 'MtSort',\n props: {\n /** 排序配置 */\n sortList: {\n type: Array as PropType<(string | number)[]>,\n default: () => [],\n },\n /** 排序key名 */\n keyName: {\n type: String,\n default: 'sort-key',\n },\n },\n setup(props, { slots }) {\n const renderVNodes = computed(() => {\n const vNodeList = slots.default?.() || [];\n const sortVNodeMap = getVNodeMap(props.keyName, vNodeList);\n const sortVNodeList = Array.from(new Set(props.sortList)).map(key => sortVNodeMap[key]).filter(Boolean);\n return sortDefaultVNodes(props.keyName, vNodeList, props.sortList, sortVNodeList);\n });\n\n return () => renderVNodes.value;\n },\n});\n\n/** 获取插槽中需要排序的节点 */\nfunction getVNodeMap(keyName: string, vNodeList: VNode[], vNodeMap: Record<(string | number), VNode> = {}) {\n vNodeList.forEach((item) => {\n const sortKey = item.props?.[keyName];\n if (sortKey) {\n if (vNodeMap[sortKey]) {\n console.warn(`<mt-sort-space> ${keyName}: ${sortKey} repeat`);\n }\n else {\n vNodeMap[sortKey] = item;\n }\n return;\n }\n if (Array.isArray(item.children)) {\n getVNodeMap(keyName, item.children as VNode[], vNodeMap);\n }\n });\n return vNodeMap;\n}\n\n/** 根据排序后的节点跟换位置 */\nfunction sortDefaultVNodes(keyName: string, vNodeList: VNode[], sortList: (string | number)[], sortVNodeList: VNode[]) {\n const newList: VNode[] = [];\n vNodeList.forEach((vNode) => {\n const sortKey = vNode.props?.[keyName];\n if (sortKey && sortList.includes(sortKey)) {\n const sortVNode = sortVNodeList.shift();\n if (sortVNode) {\n newList.push(sortVNode);\n return;\n }\n }\n if (Array.isArray(vNode.children)) {\n vNode = { ...vNode }; // 避免修改原节点数据\n vNode.children = sortDefaultVNodes(keyName, vNode.children as VNode[], sortList, sortVNodeList);\n }\n newList.push(vNode);\n });\n return newList;\n}\n"],"names":["Sort","defineComponent","props","slots","renderVNodes","computed","vNodeList","_a","sortVNodeMap","getVNodeMap","sortVNodeList","key","sortDefaultVNodes","keyName","vNodeMap","item","sortKey","sortList","newList","vNode","sortVNode"],"mappings":"mIAUAA,EAAeC,kBAAgB,CAC7B,KAAM,SACN,MAAO,CAEL,SAAU,CACR,KAAM,MACN,QAAS,IAAM,CAAA,CACjB,EAEA,QAAS,CACP,KAAM,OACN,QAAS,UAAA,CAEb,EACA,MAAMC,EAAO,CAAE,MAAAC,GAAS,CAChB,MAAAC,EAAeC,EAAAA,SAAS,IAAM,OAClC,MAAMC,IAAYC,EAAAJ,EAAM,UAAN,YAAAI,EAAA,KAAAJ,KAAqB,CAAC,EAClCK,EAAeC,EAAYP,EAAM,QAASI,CAAS,EACnDI,EAAgB,MAAM,KAAK,IAAI,IAAIR,EAAM,QAAQ,CAAC,EAAE,OAAWM,EAAaG,CAAG,CAAC,EAAE,OAAO,OAAO,EACtG,OAAOC,EAAkBV,EAAM,QAASI,EAAWJ,EAAM,SAAUQ,CAAa,CAAA,CACjF,EAED,MAAO,IAAMN,EAAa,KAAA,CAE9B,CAAC,EAGD,SAASK,EAAYI,EAAiBP,EAAoBQ,EAA6C,CAAA,EAAI,CAC/F,OAAAR,EAAA,QAASS,GAAS,OACpB,MAAAC,GAAUT,EAAAQ,EAAK,QAAL,YAAAR,EAAaM,GAC7B,GAAIG,EAAS,CACPF,EAASE,CAAO,EAClB,QAAQ,KAAK,mBAAmBH,CAAO,KAAKG,CAAO,SAAS,EAG5DF,EAASE,CAAO,EAAID,EAEtB,MAAA,CAEE,MAAM,QAAQA,EAAK,QAAQ,GACjBN,EAAAI,EAASE,EAAK,SAAqBD,CAAQ,CACzD,CACD,EACMA,CACT,CAGA,SAASF,EAAkBC,EAAiBP,EAAoBW,EAA+BP,EAAwB,CACrH,MAAMQ,EAAmB,CAAC,EAChB,OAAAZ,EAAA,QAASa,GAAU,OACrB,MAAAH,GAAUT,EAAAY,EAAM,QAAN,YAAAZ,EAAcM,GAC9B,GAAIG,GAAWC,EAAS,SAASD,CAAO,EAAG,CACnC,MAAAI,EAAYV,EAAc,MAAM,EACtC,GAAIU,EAAW,CACbF,EAAQ,KAAKE,CAAS,EACtB,MAAA,CACF,CAEE,MAAM,QAAQD,EAAM,QAAQ,IACtBA,EAAA,CAAE,GAAGA,CAAM,EACnBA,EAAM,SAAWP,EAAkBC,EAASM,EAAM,SAAqBF,EAAUP,CAAa,GAEhGQ,EAAQ,KAAKC,CAAK,CAAA,CACnB,EACMD,CACT"}
|
package/lib/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components/expand/index.js"),e=require("./components/sort/index.js");exports.MtExpand=t.MtExpand;exports.MtSort=e.MtSort;
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
export declare const
|
2
|
-
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('
|
1
|
+
export declare const MtExpand: {
|
2
|
+
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('.').ExpandProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
|
3
3
|
open: boolean;
|
4
4
|
targetRange: number;
|
5
5
|
transitionTime: number;
|
@@ -10,7 +10,7 @@ export declare const MtExpandBox: {
|
|
10
10
|
C: {};
|
11
11
|
M: {};
|
12
12
|
Defaults: {};
|
13
|
-
}, Readonly<import('
|
13
|
+
}, Readonly<import('.').ExpandProps> & Readonly<{}>, {}, {}, {}, {}, {
|
14
14
|
open: boolean;
|
15
15
|
targetRange: number;
|
16
16
|
transitionTime: number;
|
@@ -18,7 +18,7 @@ export declare const MtExpandBox: {
|
|
18
18
|
__isFragment?: never;
|
19
19
|
__isTeleport?: never;
|
20
20
|
__isSuspense?: never;
|
21
|
-
} & import('vue').ComponentOptionsBase<Readonly<import('
|
21
|
+
} & import('vue').ComponentOptionsBase<Readonly<import('.').ExpandProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
|
22
22
|
open: boolean;
|
23
23
|
targetRange: number;
|
24
24
|
transitionTime: number;
|
@@ -30,3 +30,4 @@ export declare const MtExpandBox: {
|
|
30
30
|
}): any;
|
31
31
|
};
|
32
32
|
});
|
33
|
+
export * from './src/expand';
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import { ExpandProps } from './expand.ts';
|
2
2
|
declare function __VLS_template(): {
|
3
3
|
slots: {
|
4
4
|
default?(_: {
|
@@ -12,7 +12,7 @@ declare function __VLS_template(): {
|
|
12
12
|
attrs: Partial<{}>;
|
13
13
|
};
|
14
14
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
15
|
-
declare const __VLS_component: import('vue').DefineComponent<
|
15
|
+
declare const __VLS_component: import('vue').DefineComponent<ExpandProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ExpandProps> & Readonly<{}>, {
|
16
16
|
open: boolean;
|
17
17
|
targetRange: number;
|
18
18
|
transitionTime: number;
|
package/types/index.d.ts
CHANGED
@@ -1 +1,2 @@
|
|
1
|
-
export * from './expand
|
1
|
+
export * from './expand';
|
2
|
+
export * from './sort';
|
@@ -0,0 +1,25 @@
|
|
1
|
+
export declare const MtSort: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
2
|
+
sortList: {
|
3
|
+
type: import('vue').PropType<(string | number)[]>;
|
4
|
+
default: () => never[];
|
5
|
+
};
|
6
|
+
keyName: {
|
7
|
+
type: StringConstructor;
|
8
|
+
default: string;
|
9
|
+
};
|
10
|
+
}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
11
|
+
[key: string]: any;
|
12
|
+
}>[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
13
|
+
sortList: {
|
14
|
+
type: import('vue').PropType<(string | number)[]>;
|
15
|
+
default: () => never[];
|
16
|
+
};
|
17
|
+
keyName: {
|
18
|
+
type: StringConstructor;
|
19
|
+
default: string;
|
20
|
+
};
|
21
|
+
}>> & Readonly<{}>, {
|
22
|
+
sortList: (string | number)[];
|
23
|
+
keyName: string;
|
24
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
25
|
+
export * from './src/sort';
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import { PropType, VNode } from 'vue';
|
2
|
+
export interface SortSpaceProps {
|
3
|
+
/** 排序配置 */
|
4
|
+
sortList?: (string | number)[];
|
5
|
+
/** 排序key名 */
|
6
|
+
keyName?: string;
|
7
|
+
}
|
8
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
9
|
+
/** 排序配置 */
|
10
|
+
sortList: {
|
11
|
+
type: PropType<(string | number)[]>;
|
12
|
+
default: () => never[];
|
13
|
+
};
|
14
|
+
/** 排序key名 */
|
15
|
+
keyName: {
|
16
|
+
type: StringConstructor;
|
17
|
+
default: string;
|
18
|
+
};
|
19
|
+
}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
20
|
+
[key: string]: any;
|
21
|
+
}>[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
22
|
+
/** 排序配置 */
|
23
|
+
sortList: {
|
24
|
+
type: PropType<(string | number)[]>;
|
25
|
+
default: () => never[];
|
26
|
+
};
|
27
|
+
/** 排序key名 */
|
28
|
+
keyName: {
|
29
|
+
type: StringConstructor;
|
30
|
+
default: string;
|
31
|
+
};
|
32
|
+
}>> & Readonly<{}>, {
|
33
|
+
sortList: (string | number)[];
|
34
|
+
keyName: string;
|
35
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
36
|
+
export default _default;
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/expand-box/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport ExpandBox from './src/expand-box.vue';\r\n\r\nExpandBox.install = (app: App): void => {\r\n if (ExpandBox.name) {\r\n app.component(ExpandBox.name, ExpandBox);\r\n }\r\n};\r\n\r\nexport const MtExpandBox = ExpandBox;\r\n"],"names":["ExpandBox","app","MtExpandBox"],"mappings":";AAGAA,EAAU,UAAU,CAACC,MAAmB;AACtC,EAAID,EAAU,QACRC,EAAA,UAAUD,EAAU,MAAMA,CAAS;AAE3C;AAEO,MAAME,IAAcF;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
.mt-expand-box[data-v-d3ac876b]{overflow:hidden}.mt-expand-transition[data-v-d3ac876b]{transition:height var(--01836c4a) ease-in-out}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import o from "./expand-box.vue2.mjs";
|
2
|
-
/* empty css */
|
3
|
-
import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
|
4
|
-
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d3ac876b"]]);
|
5
|
-
export {
|
6
|
-
m as default
|
7
|
-
};
|
8
|
-
//# sourceMappingURL=expand-box.vue.mjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"expand-box.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"expand-box.vue2.mjs","sources":["../../../../../../packages/components/expand-box/src/expand-box.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandBoxProps } from './expand-box';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\ndefineOptions({ name: 'MtExpandBox' });\r\n\r\nconst props = withDefaults(defineProps<ExpandBoxProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand-box\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand-box {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":";;;;;;;;;;;;;;;AAQA,UAAMA,IAAQC,GAMRC,IAAqBC,EAAS,MAAM,GAAGH,EAAM,cAAc,IAAI,GAG/DI,IAAeC,EAAI,CAAC,GAGpBC,IAAaH,EAAS,MAAMC,EAAa,QAAQJ,EAAM,WAAW,GAGlEO,IAAeJ,EAAS,OAErB,EAAE,QAAQ,GADJ,CAACG,EAAW,SAASN,EAAM,OAAOI,EAAa,QAAQJ,EAAM,WAClD,KAAK,EAC9B,GAGKQ,IAAaH,EAAI,GAGjBI,IAAkBC,EAAS,MAAM;;AACxB,MAAAN,EAAA,SAAQO,IAAAH,EAAW,UAAX,gBAAAG,EAAkB;AAAA,IAAA,GACtCX,EAAM,cAAc;AAGvB,WAAAY,EAAkBJ,GAAYC,CAAe,GAG7CI,EAAU,MAAM;AACE,MAAAJ,EAAA;AAAA,IAAA,CACjB;;;;;;;;;;;;;;;;"}
|
@@ -1,3 +0,0 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./src/expand-box.vue.js");e.default.install=t=>{e.default.name&&t.component(e.default.name,e.default)};const a=e.default;exports.MtExpandBox=a;
|
2
|
-
//# sourceMappingURL=index.js.map
|
3
|
-
require('./src/expand-box.css');
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../packages/components/expand-box/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport ExpandBox from './src/expand-box.vue';\r\n\r\nExpandBox.install = (app: App): void => {\r\n if (ExpandBox.name) {\r\n app.component(ExpandBox.name, ExpandBox);\r\n }\r\n};\r\n\r\nexport const MtExpandBox = ExpandBox;\r\n"],"names":["ExpandBox","app","MtExpandBox"],"mappings":"2HAGAA,EAAAA,QAAU,QAAWC,GAAmB,CAClCD,EAAAA,QAAU,MACRC,EAAA,UAAUD,UAAU,KAAMA,EAAAA,OAAS,CAE3C,EAEO,MAAME,EAAcF,EAAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
.mt-expand-box[data-v-d3ac876b]{overflow:hidden}.mt-expand-transition[data-v-d3ac876b]{transition:height var(--01836c4a) ease-in-out}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./expand-box.vue2.js");;/* empty css */const t=require("../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-d3ac876b"]]);exports.default=u;
|
2
|
-
//# sourceMappingURL=expand-box.vue.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"expand-box.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@vueuse/core"),d=require("lodash-es"),p=e.defineComponent({name:"MtExpandBox",__name:"expand-box",props:{open:{type:Boolean,default:!1},targetRange:{default:0},transitionTime:{default:200}},setup(i){e.useCssVars(t=>({"01836c4a":u.value}));const n=i,u=e.computed(()=>`${n.transitionTime}ms`),o=e.ref(0),s=e.computed(()=>o.value>n.targetRange),l=e.computed(()=>({height:`${!s.value||n.open?o.value:n.targetRange}px`})),a=e.ref(),r=d.debounce(()=>{var t;o.value=(t=a.value)==null?void 0:t.offsetHeight},n.transitionTime);return c.useResizeObserver(a,r),e.onMounted(()=>{r()}),(t,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mt-expand-box",{"mt-expand-transition":!!t.transitionTime}]),style:e.normalizeStyle(l.value)},[e.createElementVNode("div",{ref_key:"contentRef",ref:a},[e.renderSlot(t.$slots,"default",{open:t.open,isOutRange:s.value},void 0,!0)],512)],6))}});exports.default=p;
|
2
|
-
//# sourceMappingURL=expand-box.vue2.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"expand-box.vue2.js","sources":["../../../../../../packages/components/expand-box/src/expand-box.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandBoxProps } from './expand-box';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\ndefineOptions({ name: 'MtExpandBox' });\r\n\r\nconst props = withDefaults(defineProps<ExpandBoxProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand-box\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand-box {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":"6XAQA,MAAMA,EAAQC,EAMRC,EAAqBC,EAAAA,SAAS,IAAM,GAAGH,EAAM,cAAc,IAAI,EAG/DI,EAAeC,MAAI,CAAC,EAGpBC,EAAaH,EAAAA,SAAS,IAAMC,EAAa,MAAQJ,EAAM,WAAW,EAGlEO,EAAeJ,EAAAA,SAAS,KAErB,CAAE,OAAQ,GADJ,CAACG,EAAW,OAASN,EAAM,KAAOI,EAAa,MAAQJ,EAAM,WAClD,IAAK,EAC9B,EAGKQ,EAAaH,EAAAA,IAAI,EAGjBI,EAAkBC,EAAAA,SAAS,IAAM,OACxBN,EAAA,OAAQO,EAAAH,EAAW,QAAX,YAAAG,EAAkB,YAAA,EACtCX,EAAM,cAAc,EAGvBY,OAAAA,EAAA,kBAAkBJ,EAAYC,CAAe,EAG7CI,EAAAA,UAAU,IAAM,CACEJ,EAAA,CAAA,CACjB"}
|