mortise-tenon-design 0.0.13 → 0.0.15

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.
Files changed (45) hide show
  1. package/es/components/expand-box/index.d.ts +91 -0
  2. package/es/components/expand-box/index.mjs +10 -0
  3. package/es/components/expand-box/index.mjs.map +1 -0
  4. package/es/components/expand-box/src/expand-box.css +1 -0
  5. package/es/components/expand-box/src/expand-box.d.ts +19 -0
  6. package/es/components/expand-box/src/expand-box.vue.d.ts +68 -0
  7. package/es/components/expand-box/src/expand-box.vue.mjs +8 -0
  8. package/es/components/expand-box/src/expand-box.vue.mjs.map +1 -0
  9. package/es/components/expand-box/src/expand-box.vue2.mjs +98 -0
  10. package/es/components/expand-box/src/expand-box.vue2.mjs.map +1 -0
  11. package/es/components/index.d.ts +1 -1
  12. package/es/index.mjs +2 -2
  13. package/lib/components/expand-box/index.d.ts +91 -0
  14. package/lib/components/expand-box/index.js +3 -0
  15. package/lib/components/expand-box/index.js.map +1 -0
  16. package/lib/components/expand-box/src/expand-box.css +1 -0
  17. package/lib/components/expand-box/src/expand-box.d.ts +19 -0
  18. package/lib/components/expand-box/src/expand-box.vue.d.ts +68 -0
  19. package/lib/components/expand-box/src/expand-box.vue.js +2 -0
  20. package/lib/components/expand-box/src/expand-box.vue.js.map +1 -0
  21. package/lib/components/expand-box/src/expand-box.vue2.js +2 -0
  22. package/lib/components/expand-box/src/expand-box.vue2.js.map +1 -0
  23. package/lib/components/index.d.ts +1 -1
  24. package/lib/index.js +1 -1
  25. package/package.json +5 -9
  26. package/es/components/button/index.d.ts +0 -34
  27. package/es/components/button/index.mjs +0 -10
  28. package/es/components/button/index.mjs.map +0 -1
  29. package/es/components/button/src/button.css +0 -1
  30. package/es/components/button/src/button.vue.d.ts +0 -25
  31. package/es/components/button/src/button.vue.mjs +0 -8
  32. package/es/components/button/src/button.vue.mjs.map +0 -1
  33. package/es/components/button/src/button.vue2.mjs +0 -37
  34. package/es/components/button/src/button.vue2.mjs.map +0 -1
  35. package/es/components/button/src/types.d.ts +0 -8
  36. package/lib/components/button/index.d.ts +0 -34
  37. package/lib/components/button/index.js +0 -3
  38. package/lib/components/button/index.js.map +0 -1
  39. package/lib/components/button/src/button.css +0 -1
  40. package/lib/components/button/src/button.vue.d.ts +0 -25
  41. package/lib/components/button/src/button.vue.js +0 -2
  42. package/lib/components/button/src/button.vue.js.map +0 -1
  43. package/lib/components/button/src/button.vue2.js +0 -2
  44. package/lib/components/button/src/button.vue2.js.map +0 -1
  45. package/lib/components/button/src/types.d.ts +0 -8
@@ -0,0 +1,91 @@
1
+ export declare const MtExpandBox: {
2
+ new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
3
+ "onUpdate:open"?: ((open: boolean) => any) | undefined;
4
+ onChange?: ((value: boolean) => any) | undefined;
5
+ }>, {
6
+ isOutRange: import('vue').ComputedRef<boolean>;
7
+ hasExtendMore: import('vue').Ref<boolean, boolean>;
8
+ changeExtendMore: (value: boolean) => void;
9
+ toggleExtendMore: () => void;
10
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
11
+ "update:open": (open: boolean) => any;
12
+ change: (value: boolean) => any;
13
+ }, import('vue').PublicProps, {
14
+ open: boolean;
15
+ targetRange: number;
16
+ transitionTime: string;
17
+ placement: "top" | "bottom";
18
+ }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
19
+ P: {};
20
+ B: {};
21
+ D: {};
22
+ C: {};
23
+ M: {};
24
+ Defaults: {};
25
+ }, Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
26
+ "onUpdate:open"?: ((open: boolean) => any) | undefined;
27
+ onChange?: ((value: boolean) => any) | undefined;
28
+ }>, {
29
+ isOutRange: import('vue').ComputedRef<boolean>;
30
+ hasExtendMore: import('vue').Ref<boolean, boolean>;
31
+ changeExtendMore: (value: boolean) => void;
32
+ toggleExtendMore: () => void;
33
+ }, {}, {}, {}, {
34
+ open: boolean;
35
+ targetRange: number;
36
+ transitionTime: string;
37
+ placement: "top" | "bottom";
38
+ }>;
39
+ __isFragment?: never;
40
+ __isTeleport?: never;
41
+ __isSuspense?: never;
42
+ } & import('vue').ComponentOptionsBase<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
43
+ "onUpdate:open"?: ((open: boolean) => any) | undefined;
44
+ onChange?: ((value: boolean) => any) | undefined;
45
+ }>, {
46
+ isOutRange: import('vue').ComputedRef<boolean>;
47
+ hasExtendMore: import('vue').Ref<boolean, boolean>;
48
+ changeExtendMore: (value: boolean) => void;
49
+ toggleExtendMore: () => void;
50
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
51
+ "update:open": (open: boolean) => any;
52
+ change: (value: boolean) => any;
53
+ }, string, {
54
+ open: boolean;
55
+ targetRange: number;
56
+ transitionTime: string;
57
+ placement: "top" | "bottom";
58
+ }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
59
+ $slots: {
60
+ content?(_: {
61
+ hasExtendMore: boolean;
62
+ isOutRange: boolean;
63
+ toggleExtendMore: () => void;
64
+ }): any;
65
+ content?(_: {
66
+ hasExtendMore: boolean;
67
+ isOutRange: boolean;
68
+ toggleExtendMore: () => void;
69
+ }): any;
70
+ custom?(_: {
71
+ hasExtendMore: boolean;
72
+ isOutRange: boolean;
73
+ toggleExtendMore: () => void;
74
+ }): any;
75
+ before?(_: {
76
+ hasExtendMore: boolean;
77
+ isOutRange: boolean;
78
+ toggleExtendMore: () => void;
79
+ }): any;
80
+ button?(_: {
81
+ hasExtendMore: boolean;
82
+ isOutRange: boolean;
83
+ toggleExtendMore: () => void;
84
+ }): any;
85
+ after?(_: {
86
+ hasExtendMore: boolean;
87
+ isOutRange: boolean;
88
+ toggleExtendMore: () => void;
89
+ }): any;
90
+ };
91
+ });
@@ -0,0 +1,10 @@
1
+ import n from "./src/expand-box.vue.mjs";
2
+ n.install = (o) => {
3
+ n.name && o.component(n.name, n);
4
+ };
5
+ const a = n;
6
+ export {
7
+ a as MtExpandBox
8
+ };
9
+ //# sourceMappingURL=index.mjs.map
10
+ import './src/expand-box.css';
@@ -0,0 +1 @@
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;"}
@@ -0,0 +1 @@
1
+ .button-box[data-v-1d132f79]{display:flex;align-items:center}.button-box .extend-button[data-v-1d132f79]{display:flex;align-items:center;color:#061533a6;border-radius:4px;cursor:pointer}.button-box .btn-icon[data-v-1d132f79]{margin:4px;font-size:12px}.button-box .active[data-v-1d132f79]{transform:rotate(180deg)}.button-box .extend-content[data-v-1d132f79]{color:#061533a6}
@@ -0,0 +1,19 @@
1
+ import { CSSProperties } from 'vue';
2
+ export interface ExpandBoxProps {
3
+ /** 控制是否展开(v-model) */
4
+ open?: boolean;
5
+ /** 达到可调整的目标范围(px) */
6
+ targetRange?: number;
7
+ /** 过渡时间 */
8
+ transitionTime?: string;
9
+ /** 展开按钮样式 */
10
+ buttonStyle?: CSSProperties;
11
+ /** 展开的位置 */
12
+ placement?: 'top' | 'bottom';
13
+ }
14
+ export interface ExpandBoxEmits {
15
+ /** open绑定修改 */
16
+ (e: 'update:open', open: boolean): void;
17
+ /** 展开状态变更 */
18
+ (e: 'change', value: boolean): void;
19
+ }
@@ -0,0 +1,68 @@
1
+ import { ExpandBoxProps } from './expand-box';
2
+ /** 修改是否展开更多 */
3
+ declare function changeExtendMore(value: boolean): void;
4
+ /** 切换是否展开更多 */
5
+ declare function toggleExtendMore(): void;
6
+ declare function __VLS_template(): {
7
+ slots: {
8
+ content?(_: {
9
+ hasExtendMore: boolean;
10
+ isOutRange: boolean;
11
+ toggleExtendMore: typeof toggleExtendMore;
12
+ }): any;
13
+ content?(_: {
14
+ hasExtendMore: boolean;
15
+ isOutRange: boolean;
16
+ toggleExtendMore: typeof toggleExtendMore;
17
+ }): any;
18
+ custom?(_: {
19
+ hasExtendMore: boolean;
20
+ isOutRange: boolean;
21
+ toggleExtendMore: typeof toggleExtendMore;
22
+ }): any;
23
+ before?(_: {
24
+ hasExtendMore: boolean;
25
+ isOutRange: boolean;
26
+ toggleExtendMore: typeof toggleExtendMore;
27
+ }): any;
28
+ button?(_: {
29
+ hasExtendMore: boolean;
30
+ isOutRange: boolean;
31
+ toggleExtendMore: typeof toggleExtendMore;
32
+ }): any;
33
+ after?(_: {
34
+ hasExtendMore: boolean;
35
+ isOutRange: boolean;
36
+ toggleExtendMore: typeof toggleExtendMore;
37
+ }): any;
38
+ };
39
+ refs: {
40
+ contentRef: HTMLDivElement;
41
+ };
42
+ attrs: Partial<{}>;
43
+ };
44
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
45
+ declare const __VLS_component: import('vue').DefineComponent<ExpandBoxProps, {
46
+ isOutRange: import('vue').ComputedRef<boolean>;
47
+ hasExtendMore: import('vue').Ref<boolean, boolean>;
48
+ changeExtendMore: typeof changeExtendMore;
49
+ toggleExtendMore: typeof toggleExtendMore;
50
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
51
+ "update:open": (open: boolean) => any;
52
+ change: (value: boolean) => any;
53
+ }, string, import('vue').PublicProps, Readonly<ExpandBoxProps> & Readonly<{
54
+ "onUpdate:open"?: ((open: boolean) => any) | undefined;
55
+ onChange?: ((value: boolean) => any) | undefined;
56
+ }>, {
57
+ open: boolean;
58
+ targetRange: number;
59
+ transitionTime: string;
60
+ placement: "top" | "bottom";
61
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
62
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
63
+ export default _default;
64
+ type __VLS_WithTemplateSlots<T, S> = T & {
65
+ new (): {
66
+ $slots: S;
67
+ };
68
+ };
@@ -0,0 +1,8 @@
1
+ import o from "./expand-box.vue2.mjs";
2
+ /* empty css */
3
+ import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
4
+ const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-1d132f79"]]);
5
+ export {
6
+ f as default
7
+ };
8
+ //# sourceMappingURL=expand-box.vue.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"expand-box.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,98 @@
1
+ import { defineComponent as B, ref as p, computed as g, watch as C, onMounted as w, onBeforeUnmount as x, openBlock as c, createElementBlock as d, normalizeStyle as h, createElementVNode as v, renderSlot as a, normalizeProps as l, guardReactiveProps as s, createCommentVNode as R, normalizeClass as N } from "vue";
2
+ import { debounce as O } from "lodash-es";
3
+ const P = { class: "button-box" }, H = /* @__PURE__ */ B({
4
+ __name: "expand-box",
5
+ props: {
6
+ open: { type: Boolean, default: !1 },
7
+ targetRange: { default: 0 },
8
+ transitionTime: { default: "0.2s" },
9
+ buttonStyle: {},
10
+ placement: { default: "bottom" }
11
+ },
12
+ emits: ["update:open", "change"],
13
+ setup(z, { expose: E, emit: M }) {
14
+ const u = z, b = M, i = p(), f = p(0), t = p(!1), r = g(() => f.value > u.targetRange), y = g(() => ({
15
+ overflow: "hidden",
16
+ height: `${!r.value || t.value ? f.value : u.targetRange}px`,
17
+ transition: `height ${u.transitionTime} ease-in-out`
18
+ }));
19
+ C(
20
+ () => u.open,
21
+ (e) => {
22
+ t.value = e;
23
+ },
24
+ { immediate: !0 }
25
+ );
26
+ function k(e) {
27
+ b("change", e), b("update:open", e), t.value = e;
28
+ }
29
+ function m() {
30
+ k(!t.value);
31
+ }
32
+ const o = g(() => ({
33
+ hasExtendMore: t.value,
34
+ isOutRange: r.value,
35
+ toggleExtendMore: m
36
+ }));
37
+ function $() {
38
+ var e;
39
+ f.value = (e = i.value) == null ? void 0 : e.offsetHeight;
40
+ }
41
+ const S = O($, 200);
42
+ let n;
43
+ return w(() => {
44
+ $(), n = new ResizeObserver(S), n == null || n.observe(i.value);
45
+ }), x(() => {
46
+ n && n.disconnect();
47
+ }), E({
48
+ isOutRange: r,
49
+ hasExtendMore: t,
50
+ changeExtendMore: k,
51
+ toggleExtendMore: m
52
+ }), (e, T) => (c(), d("div", null, [
53
+ e.placement === "top" ? (c(), d("div", {
54
+ key: 0,
55
+ style: h(y.value)
56
+ }, [
57
+ v("div", {
58
+ ref_key: "contentRef",
59
+ ref: i
60
+ }, [
61
+ a(e.$slots, "content", l(s(o.value)), void 0, !0)
62
+ ], 512)
63
+ ], 4)) : R("", !0),
64
+ a(e.$slots, "custom", l(s(o.value)), () => [
65
+ v("div", P, [
66
+ a(e.$slots, "before", l(s(o.value)), void 0, !0),
67
+ r.value ? (c(), d("div", {
68
+ key: 0,
69
+ class: "extend-button",
70
+ style: h(e.buttonStyle),
71
+ onClick: m
72
+ }, [
73
+ a(e.$slots, "button", l(s(o.value)), void 0, !0),
74
+ v("div", {
75
+ class: N(["btn-icon", { active: t.value }])
76
+ }, " ﹀ ", 2)
77
+ ], 4)) : R("", !0),
78
+ a(e.$slots, "after", l(s(o.value)), void 0, !0)
79
+ ])
80
+ ], !0),
81
+ e.placement === "bottom" ? (c(), d("div", {
82
+ key: 1,
83
+ style: h(y.value)
84
+ }, [
85
+ v("div", {
86
+ ref_key: "contentRef",
87
+ ref: i
88
+ }, [
89
+ a(e.$slots, "content", l(s(o.value)), void 0, !0)
90
+ ], 512)
91
+ ], 4)) : R("", !0)
92
+ ]));
93
+ }
94
+ });
95
+ export {
96
+ H as default
97
+ };
98
+ //# sourceMappingURL=expand-box.vue2.mjs.map
@@ -0,0 +1 @@
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 { ExpandBoxEmits, ExpandBoxProps } from './expand-box';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\r\n\r\nconst props = withDefaults(defineProps<ExpandBoxProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: '0.2s',\r\n placement: 'bottom',\r\n});\r\n\r\nconst emit = defineEmits<ExpandBoxEmits>();\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n/** 内容大小 */\r\nconst contentRange = ref(0);\r\n/** 是否展开更多 */\r\nconst hasExtendMore = ref(false);\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || hasExtendMore.value ? contentRange.value : props.targetRange;\r\n return {\r\n overflow: 'hidden',\r\n height: `${size}px`,\r\n transition: `height ${props.transitionTime} ease-in-out`,\r\n };\r\n});\r\n\r\nwatch(\r\n () => props.open,\r\n (value) => {\r\n hasExtendMore.value = value;\r\n },\r\n { immediate: true },\r\n);\r\n\r\n/** 修改是否展开更多 */\r\nfunction changeExtendMore(value: boolean) {\r\n emit('change', value);\r\n emit('update:open', value);\r\n hasExtendMore.value = value;\r\n}\r\n\r\n/** 切换是否展开更多 */\r\nfunction toggleExtendMore() {\r\n changeExtendMore(!hasExtendMore.value);\r\n}\r\n\r\n/** 插槽数据 */\r\nconst slotData = computed(() => ({\r\n hasExtendMore: hasExtendMore.value,\r\n isOutRange: isOutRange.value,\r\n toggleExtendMore,\r\n}));\r\n\r\n/** 获取内容实际范围 */\r\nfunction getRealRange() {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}\r\n\r\n/** 自动监听触发,重新计算高度 */\r\nconst handleResize = debounce(getRealRange, 200);\r\n\r\nlet resizeObserver: ResizeObserver | undefined;\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getRealRange(); // 获取内容实际范围\r\n // ================= 监听元素尺寸变化 ==================\r\n resizeObserver = new ResizeObserver(handleResize);\r\n resizeObserver?.observe(contentRef.value);\r\n});\r\n\r\n// 移除监听事件\r\nonBeforeUnmount(() => {\r\n if (resizeObserver) {\r\n resizeObserver.disconnect();\r\n }\r\n});\r\n\r\ndefineExpose({\r\n isOutRange,\r\n hasExtendMore,\r\n changeExtendMore,\r\n toggleExtendMore,\r\n});\r\n</script>\r\n\r\n<template>\r\n <div>\r\n <!-- 展开的内容(位于按钮前方) -->\r\n <div\r\n v-if=\"placement === 'top'\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot\r\n name=\"content\"\r\n v-bind=\"slotData\"\r\n />\r\n </div>\r\n </div>\r\n <!-- 控制展开/收起的按钮区域 -->\r\n <slot\r\n v-bind=\"slotData\"\r\n name=\"custom\"\r\n >\r\n <div class=\"button-box\">\r\n <!-- 定义在按钮前方的插槽 -->\r\n <slot\r\n name=\"before\"\r\n v-bind=\"slotData\"\r\n />\r\n <!-- 切换按钮,仅在isOutRange为ture时显示 -->\r\n <div\r\n v-if=\"isOutRange\"\r\n class=\"extend-button\"\r\n :style=\"buttonStyle\"\r\n @click=\"toggleExtendMore\"\r\n >\r\n <slot\r\n v-bind=\"slotData\"\r\n name=\"button\"\r\n />\r\n <div\r\n class=\"btn-icon\"\r\n :class=\"{ active: hasExtendMore }\"\r\n >\r\n ﹀\r\n </div>\r\n </div>\r\n <!-- 定义在按钮后方的插槽 -->\r\n <slot\r\n name=\"after\"\r\n v-bind=\"slotData\"\r\n />\r\n </div>\r\n </slot>\r\n <!-- 展开的内容(位于按钮后方) -->\r\n <div\r\n v-if=\"placement === 'bottom'\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot\r\n name=\"content\"\r\n v-bind=\"slotData\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"less\" scoped>\r\n.button-box {\r\n display: flex;\r\n align-items: center;\r\n\r\n .extend-button {\r\n display: flex;\r\n align-items: center;\r\n color: rgba(6, 21, 51, 0.65);\r\n border-radius: 4px;\r\n cursor: pointer;\r\n }\r\n\r\n .btn-icon {\r\n margin: 4px;\r\n font-size: 12px;\r\n }\r\n\r\n .active {\r\n transform: rotateZ(180deg);\r\n }\r\n\r\n .extend-content {\r\n color: rgba(6, 21, 51, 0.65);\r\n }\r\n}\r\n</style>\r\n"],"names":["props","__props","emit","__emit","contentRef","ref","contentRange","hasExtendMore","isOutRange","computed","contentStyle","watch","value","changeExtendMore","toggleExtendMore","slotData","getRealRange","_a","handleResize","debounce","resizeObserver","onMounted","onBeforeUnmount","__expose"],"mappings":";;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAORC,IAAOC,GAGPC,IAAaC,KAEbC,IAAeD,EAAI,CAAC,GAEpBE,IAAgBF,EAAI,EAAK,GAEzBG,IAAaC,EAAS,MAAMH,EAAa,QAAQN,EAAM,WAAW,GAElEU,IAAeD,EAAS,OAErB;AAAA,MACL,UAAU;AAAA,MACV,QAAQ,GAHG,CAACD,EAAW,SAASD,EAAc,QAAQD,EAAa,QAAQN,EAAM,WAGlE;AAAA,MACf,YAAY,UAAUA,EAAM,cAAc;AAAA,IAAA,EAE7C;AAED,IAAAW;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACY,MAAU;AACT,QAAAL,EAAc,QAAQK;AAAA,MACxB;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA;AAIpB,aAASC,EAAiBD,GAAgB;AACxC,MAAAV,EAAK,UAAUU,CAAK,GACpBV,EAAK,eAAeU,CAAK,GACzBL,EAAc,QAAQK;AAAA,IACxB;AAGA,aAASE,IAAmB;AACT,MAAAD,EAAA,CAACN,EAAc,KAAK;AAAA,IACvC;AAGM,UAAAQ,IAAWN,EAAS,OAAO;AAAA,MAC/B,eAAeF,EAAc;AAAA,MAC7B,YAAYC,EAAW;AAAA,MACvB,kBAAAM;AAAA,IACA,EAAA;AAGF,aAASE,IAAe;;AACT,MAAAV,EAAA,SAAQW,IAAAb,EAAW,UAAX,gBAAAa,EAAkB;AAAA,IACzC;AAGM,UAAAC,IAAeC,EAASH,GAAc,GAAG;AAE3C,QAAAI;AAGJ,WAAAC,EAAU,MAAM;AACD,MAAAL,KAEII,IAAA,IAAI,eAAeF,CAAY,GAChCE,KAAA,QAAAA,EAAA,QAAQhB,EAAW;AAAA,IAAK,CACzC,GAGDkB,EAAgB,MAAM;AACpB,MAAIF,KACFA,EAAe,WAAW;AAAA,IAC5B,CACD,GAEYG,EAAA;AAAA,MACX,YAAAf;AAAA,MACA,eAAAD;AAAA,MACA,kBAAAM;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- export * from './button';
1
+ export * from './expand-box';
package/es/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { MtButton as r } from "./components/button/index.mjs";
1
+ import { MtExpandBox as p } from "./components/expand-box/index.mjs";
2
2
  export {
3
- r as MtButton
3
+ p as MtExpandBox
4
4
  };
5
5
  //# sourceMappingURL=index.mjs.map
@@ -0,0 +1,91 @@
1
+ export declare const MtExpandBox: {
2
+ new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
3
+ "onUpdate:open"?: ((open: boolean) => any) | undefined;
4
+ onChange?: ((value: boolean) => any) | undefined;
5
+ }>, {
6
+ isOutRange: import('vue').ComputedRef<boolean>;
7
+ hasExtendMore: import('vue').Ref<boolean, boolean>;
8
+ changeExtendMore: (value: boolean) => void;
9
+ toggleExtendMore: () => void;
10
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
11
+ "update:open": (open: boolean) => any;
12
+ change: (value: boolean) => any;
13
+ }, import('vue').PublicProps, {
14
+ open: boolean;
15
+ targetRange: number;
16
+ transitionTime: string;
17
+ placement: "top" | "bottom";
18
+ }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
19
+ P: {};
20
+ B: {};
21
+ D: {};
22
+ C: {};
23
+ M: {};
24
+ Defaults: {};
25
+ }, Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
26
+ "onUpdate:open"?: ((open: boolean) => any) | undefined;
27
+ onChange?: ((value: boolean) => any) | undefined;
28
+ }>, {
29
+ isOutRange: import('vue').ComputedRef<boolean>;
30
+ hasExtendMore: import('vue').Ref<boolean, boolean>;
31
+ changeExtendMore: (value: boolean) => void;
32
+ toggleExtendMore: () => void;
33
+ }, {}, {}, {}, {
34
+ open: boolean;
35
+ targetRange: number;
36
+ transitionTime: string;
37
+ placement: "top" | "bottom";
38
+ }>;
39
+ __isFragment?: never;
40
+ __isTeleport?: never;
41
+ __isSuspense?: never;
42
+ } & import('vue').ComponentOptionsBase<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
43
+ "onUpdate:open"?: ((open: boolean) => any) | undefined;
44
+ onChange?: ((value: boolean) => any) | undefined;
45
+ }>, {
46
+ isOutRange: import('vue').ComputedRef<boolean>;
47
+ hasExtendMore: import('vue').Ref<boolean, boolean>;
48
+ changeExtendMore: (value: boolean) => void;
49
+ toggleExtendMore: () => void;
50
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
51
+ "update:open": (open: boolean) => any;
52
+ change: (value: boolean) => any;
53
+ }, string, {
54
+ open: boolean;
55
+ targetRange: number;
56
+ transitionTime: string;
57
+ placement: "top" | "bottom";
58
+ }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
59
+ $slots: {
60
+ content?(_: {
61
+ hasExtendMore: boolean;
62
+ isOutRange: boolean;
63
+ toggleExtendMore: () => void;
64
+ }): any;
65
+ content?(_: {
66
+ hasExtendMore: boolean;
67
+ isOutRange: boolean;
68
+ toggleExtendMore: () => void;
69
+ }): any;
70
+ custom?(_: {
71
+ hasExtendMore: boolean;
72
+ isOutRange: boolean;
73
+ toggleExtendMore: () => void;
74
+ }): any;
75
+ before?(_: {
76
+ hasExtendMore: boolean;
77
+ isOutRange: boolean;
78
+ toggleExtendMore: () => void;
79
+ }): any;
80
+ button?(_: {
81
+ hasExtendMore: boolean;
82
+ isOutRange: boolean;
83
+ toggleExtendMore: () => void;
84
+ }): any;
85
+ after?(_: {
86
+ hasExtendMore: boolean;
87
+ isOutRange: boolean;
88
+ toggleExtendMore: () => void;
89
+ }): any;
90
+ };
91
+ });
@@ -0,0 +1,3 @@
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');
@@ -0,0 +1 @@
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,EAAAA,QAAU,KAAMA,EAAS,OAAA,CAE3C,EAEO,MAAME,EAAcF,EAAAA"}
@@ -0,0 +1 @@
1
+ .button-box[data-v-1d132f79]{display:flex;align-items:center}.button-box .extend-button[data-v-1d132f79]{display:flex;align-items:center;color:#061533a6;border-radius:4px;cursor:pointer}.button-box .btn-icon[data-v-1d132f79]{margin:4px;font-size:12px}.button-box .active[data-v-1d132f79]{transform:rotate(180deg)}.button-box .extend-content[data-v-1d132f79]{color:#061533a6}
@@ -0,0 +1,19 @@
1
+ import { CSSProperties } from 'vue';
2
+ export interface ExpandBoxProps {
3
+ /** 控制是否展开(v-model) */
4
+ open?: boolean;
5
+ /** 达到可调整的目标范围(px) */
6
+ targetRange?: number;
7
+ /** 过渡时间 */
8
+ transitionTime?: string;
9
+ /** 展开按钮样式 */
10
+ buttonStyle?: CSSProperties;
11
+ /** 展开的位置 */
12
+ placement?: 'top' | 'bottom';
13
+ }
14
+ export interface ExpandBoxEmits {
15
+ /** open绑定修改 */
16
+ (e: 'update:open', open: boolean): void;
17
+ /** 展开状态变更 */
18
+ (e: 'change', value: boolean): void;
19
+ }
@@ -0,0 +1,68 @@
1
+ import { ExpandBoxProps } from './expand-box';
2
+ /** 修改是否展开更多 */
3
+ declare function changeExtendMore(value: boolean): void;
4
+ /** 切换是否展开更多 */
5
+ declare function toggleExtendMore(): void;
6
+ declare function __VLS_template(): {
7
+ slots: {
8
+ content?(_: {
9
+ hasExtendMore: boolean;
10
+ isOutRange: boolean;
11
+ toggleExtendMore: typeof toggleExtendMore;
12
+ }): any;
13
+ content?(_: {
14
+ hasExtendMore: boolean;
15
+ isOutRange: boolean;
16
+ toggleExtendMore: typeof toggleExtendMore;
17
+ }): any;
18
+ custom?(_: {
19
+ hasExtendMore: boolean;
20
+ isOutRange: boolean;
21
+ toggleExtendMore: typeof toggleExtendMore;
22
+ }): any;
23
+ before?(_: {
24
+ hasExtendMore: boolean;
25
+ isOutRange: boolean;
26
+ toggleExtendMore: typeof toggleExtendMore;
27
+ }): any;
28
+ button?(_: {
29
+ hasExtendMore: boolean;
30
+ isOutRange: boolean;
31
+ toggleExtendMore: typeof toggleExtendMore;
32
+ }): any;
33
+ after?(_: {
34
+ hasExtendMore: boolean;
35
+ isOutRange: boolean;
36
+ toggleExtendMore: typeof toggleExtendMore;
37
+ }): any;
38
+ };
39
+ refs: {
40
+ contentRef: HTMLDivElement;
41
+ };
42
+ attrs: Partial<{}>;
43
+ };
44
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
45
+ declare const __VLS_component: import('vue').DefineComponent<ExpandBoxProps, {
46
+ isOutRange: import('vue').ComputedRef<boolean>;
47
+ hasExtendMore: import('vue').Ref<boolean, boolean>;
48
+ changeExtendMore: typeof changeExtendMore;
49
+ toggleExtendMore: typeof toggleExtendMore;
50
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
51
+ "update:open": (open: boolean) => any;
52
+ change: (value: boolean) => any;
53
+ }, string, import('vue').PublicProps, Readonly<ExpandBoxProps> & Readonly<{
54
+ "onUpdate:open"?: ((open: boolean) => any) | undefined;
55
+ onChange?: ((value: boolean) => any) | undefined;
56
+ }>, {
57
+ open: boolean;
58
+ targetRange: number;
59
+ transitionTime: string;
60
+ placement: "top" | "bottom";
61
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
62
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
63
+ export default _default;
64
+ type __VLS_WithTemplateSlots<T, S> = T & {
65
+ new (): {
66
+ $slots: S;
67
+ };
68
+ };
@@ -0,0 +1,2 @@
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-1d132f79"]]);exports.default=u;
2
+ //# sourceMappingURL=expand-box.vue.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"expand-box.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"),h=require("lodash-es"),y={class:"button-box"},b=e.defineComponent({__name:"expand-box",props:{open:{type:Boolean,default:!1},targetRange:{default:0},transitionTime:{default:"0.2s"},buttonStyle:{},placement:{default:"bottom"}},emits:["update:open","change"],setup(p,{expose:f,emit:g}){const r=p,c=g,l=e.ref(),u=e.ref(0),o=e.ref(!1),s=e.computed(()=>u.value>r.targetRange),d=e.computed(()=>({overflow:"hidden",height:`${!s.value||o.value?u.value:r.targetRange}px`,transition:`height ${r.transitionTime} ease-in-out`}));e.watch(()=>r.open,t=>{o.value=t},{immediate:!0});function m(t){c("change",t),c("update:open",t),o.value=t}function i(){m(!o.value)}const n=e.computed(()=>({hasExtendMore:o.value,isOutRange:s.value,toggleExtendMore:i}));function v(){var t;u.value=(t=l.value)==null?void 0:t.offsetHeight}const R=h.debounce(v,200);let a;return e.onMounted(()=>{v(),a=new ResizeObserver(R),a==null||a.observe(l.value)}),e.onBeforeUnmount(()=>{a&&a.disconnect()}),f({isOutRange:s,hasExtendMore:o,changeExtendMore:m,toggleExtendMore:i}),(t,k)=>(e.openBlock(),e.createElementBlock("div",null,[t.placement==="top"?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(d.value)},[e.createElementVNode("div",{ref_key:"contentRef",ref:l},[e.renderSlot(t.$slots,"content",e.normalizeProps(e.guardReactiveProps(n.value)),void 0,!0)],512)],4)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"custom",e.normalizeProps(e.guardReactiveProps(n.value)),()=>[e.createElementVNode("div",y,[e.renderSlot(t.$slots,"before",e.normalizeProps(e.guardReactiveProps(n.value)),void 0,!0),s.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"extend-button",style:e.normalizeStyle(t.buttonStyle),onClick:i},[e.renderSlot(t.$slots,"button",e.normalizeProps(e.guardReactiveProps(n.value)),void 0,!0),e.createElementVNode("div",{class:e.normalizeClass(["btn-icon",{active:o.value}])}," ﹀ ",2)],4)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"after",e.normalizeProps(e.guardReactiveProps(n.value)),void 0,!0)])],!0),t.placement==="bottom"?(e.openBlock(),e.createElementBlock("div",{key:1,style:e.normalizeStyle(d.value)},[e.createElementVNode("div",{ref_key:"contentRef",ref:l},[e.renderSlot(t.$slots,"content",e.normalizeProps(e.guardReactiveProps(n.value)),void 0,!0)],512)],4)):e.createCommentVNode("",!0)]))}});exports.default=b;
2
+ //# sourceMappingURL=expand-box.vue2.js.map
@@ -0,0 +1 @@
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 { ExpandBoxEmits, ExpandBoxProps } from './expand-box';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\r\n\r\nconst props = withDefaults(defineProps<ExpandBoxProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: '0.2s',\r\n placement: 'bottom',\r\n});\r\n\r\nconst emit = defineEmits<ExpandBoxEmits>();\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n/** 内容大小 */\r\nconst contentRange = ref(0);\r\n/** 是否展开更多 */\r\nconst hasExtendMore = ref(false);\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || hasExtendMore.value ? contentRange.value : props.targetRange;\r\n return {\r\n overflow: 'hidden',\r\n height: `${size}px`,\r\n transition: `height ${props.transitionTime} ease-in-out`,\r\n };\r\n});\r\n\r\nwatch(\r\n () => props.open,\r\n (value) => {\r\n hasExtendMore.value = value;\r\n },\r\n { immediate: true },\r\n);\r\n\r\n/** 修改是否展开更多 */\r\nfunction changeExtendMore(value: boolean) {\r\n emit('change', value);\r\n emit('update:open', value);\r\n hasExtendMore.value = value;\r\n}\r\n\r\n/** 切换是否展开更多 */\r\nfunction toggleExtendMore() {\r\n changeExtendMore(!hasExtendMore.value);\r\n}\r\n\r\n/** 插槽数据 */\r\nconst slotData = computed(() => ({\r\n hasExtendMore: hasExtendMore.value,\r\n isOutRange: isOutRange.value,\r\n toggleExtendMore,\r\n}));\r\n\r\n/** 获取内容实际范围 */\r\nfunction getRealRange() {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}\r\n\r\n/** 自动监听触发,重新计算高度 */\r\nconst handleResize = debounce(getRealRange, 200);\r\n\r\nlet resizeObserver: ResizeObserver | undefined;\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getRealRange(); // 获取内容实际范围\r\n // ================= 监听元素尺寸变化 ==================\r\n resizeObserver = new ResizeObserver(handleResize);\r\n resizeObserver?.observe(contentRef.value);\r\n});\r\n\r\n// 移除监听事件\r\nonBeforeUnmount(() => {\r\n if (resizeObserver) {\r\n resizeObserver.disconnect();\r\n }\r\n});\r\n\r\ndefineExpose({\r\n isOutRange,\r\n hasExtendMore,\r\n changeExtendMore,\r\n toggleExtendMore,\r\n});\r\n</script>\r\n\r\n<template>\r\n <div>\r\n <!-- 展开的内容(位于按钮前方) -->\r\n <div\r\n v-if=\"placement === 'top'\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot\r\n name=\"content\"\r\n v-bind=\"slotData\"\r\n />\r\n </div>\r\n </div>\r\n <!-- 控制展开/收起的按钮区域 -->\r\n <slot\r\n v-bind=\"slotData\"\r\n name=\"custom\"\r\n >\r\n <div class=\"button-box\">\r\n <!-- 定义在按钮前方的插槽 -->\r\n <slot\r\n name=\"before\"\r\n v-bind=\"slotData\"\r\n />\r\n <!-- 切换按钮,仅在isOutRange为ture时显示 -->\r\n <div\r\n v-if=\"isOutRange\"\r\n class=\"extend-button\"\r\n :style=\"buttonStyle\"\r\n @click=\"toggleExtendMore\"\r\n >\r\n <slot\r\n v-bind=\"slotData\"\r\n name=\"button\"\r\n />\r\n <div\r\n class=\"btn-icon\"\r\n :class=\"{ active: hasExtendMore }\"\r\n >\r\n ﹀\r\n </div>\r\n </div>\r\n <!-- 定义在按钮后方的插槽 -->\r\n <slot\r\n name=\"after\"\r\n v-bind=\"slotData\"\r\n />\r\n </div>\r\n </slot>\r\n <!-- 展开的内容(位于按钮后方) -->\r\n <div\r\n v-if=\"placement === 'bottom'\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot\r\n name=\"content\"\r\n v-bind=\"slotData\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"less\" scoped>\r\n.button-box {\r\n display: flex;\r\n align-items: center;\r\n\r\n .extend-button {\r\n display: flex;\r\n align-items: center;\r\n color: rgba(6, 21, 51, 0.65);\r\n border-radius: 4px;\r\n cursor: pointer;\r\n }\r\n\r\n .btn-icon {\r\n margin: 4px;\r\n font-size: 12px;\r\n }\r\n\r\n .active {\r\n transform: rotateZ(180deg);\r\n }\r\n\r\n .extend-content {\r\n color: rgba(6, 21, 51, 0.65);\r\n }\r\n}\r\n</style>\r\n"],"names":["props","__props","emit","__emit","contentRef","ref","contentRange","hasExtendMore","isOutRange","computed","contentStyle","watch","value","changeExtendMore","toggleExtendMore","slotData","getRealRange","_a","handleResize","debounce","resizeObserver","onMounted","onBeforeUnmount","__expose"],"mappings":"+ZAKA,MAAMA,EAAQC,EAORC,EAAOC,EAGPC,EAAaC,EAAAA,MAEbC,EAAeD,MAAI,CAAC,EAEpBE,EAAgBF,MAAI,EAAK,EAEzBG,EAAaC,EAAAA,SAAS,IAAMH,EAAa,MAAQN,EAAM,WAAW,EAElEU,EAAeD,EAAAA,SAAS,KAErB,CACL,SAAU,SACV,OAAQ,GAHG,CAACD,EAAW,OAASD,EAAc,MAAQD,EAAa,MAAQN,EAAM,WAGlE,KACf,WAAY,UAAUA,EAAM,cAAc,cAAA,EAE7C,EAEDW,EAAA,MACE,IAAMX,EAAM,KACXY,GAAU,CACTL,EAAc,MAAQK,CACxB,EACA,CAAE,UAAW,EAAK,CAAA,EAIpB,SAASC,EAAiBD,EAAgB,CACxCV,EAAK,SAAUU,CAAK,EACpBV,EAAK,cAAeU,CAAK,EACzBL,EAAc,MAAQK,CACxB,CAGA,SAASE,GAAmB,CACTD,EAAA,CAACN,EAAc,KAAK,CACvC,CAGM,MAAAQ,EAAWN,EAAAA,SAAS,KAAO,CAC/B,cAAeF,EAAc,MAC7B,WAAYC,EAAW,MACvB,iBAAAM,CACA,EAAA,EAGF,SAASE,GAAe,OACTV,EAAA,OAAQW,EAAAb,EAAW,QAAX,YAAAa,EAAkB,YACzC,CAGM,MAAAC,EAAeC,EAAAA,SAASH,EAAc,GAAG,EAE3C,IAAAI,EAGJC,OAAAA,EAAAA,UAAU,IAAM,CACDL,IAEII,EAAA,IAAI,eAAeF,CAAY,EAChCE,GAAA,MAAAA,EAAA,QAAQhB,EAAW,MAAK,CACzC,EAGDkB,EAAAA,gBAAgB,IAAM,CAChBF,GACFA,EAAe,WAAW,CAC5B,CACD,EAEYG,EAAA,CACX,WAAAf,EACA,cAAAD,EACA,iBAAAM,EACA,iBAAAC,CAAA,CACD"}
@@ -1 +1 @@
1
- export * from './button';
1
+ export * from './expand-box';
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components/button/index.js");exports.MtButton=t.MtButton;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/expand-box/index.js");exports.MtExpandBox=e.MtExpandBox;
2
2
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mortise-tenon-design",
3
3
  "type": "module",
4
- "version": "0.0.13",
4
+ "version": "0.0.15",
5
5
  "description": "榫卯组件库",
6
6
  "author": "nixwai",
7
7
  "license": "ISC",
@@ -12,15 +12,11 @@
12
12
  "main": "lib/index.js",
13
13
  "module": "es/index.mjs",
14
14
  "types": "es/components/index.d.ts",
15
- "files": [
16
- "es",
17
- "lib"
18
- ],
19
- "scripts": {
20
- "build": "vite build",
21
- "release": "release-it"
22
- },
15
+ "files": ["es", "lib"],
23
16
  "peerDependencies": {
24
17
  "vue": "^3.4.0"
18
+ },
19
+ "dependencies": {
20
+ "lodash-es": "^4.17.21"
25
21
  }
26
22
  }
@@ -1,34 +0,0 @@
1
- export declare const MtButton: {
2
- new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('.').ButtonProps> & Readonly<{
3
- onClick?: ((...args: any[]) => any) | undefined;
4
- }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
5
- click: (...args: any[]) => void;
6
- }, import('vue').PublicProps, {
7
- time: string;
8
- }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
9
- P: {};
10
- B: {};
11
- D: {};
12
- C: {};
13
- M: {};
14
- Defaults: {};
15
- }, Readonly<import('.').ButtonProps> & Readonly<{
16
- onClick?: ((...args: any[]) => any) | undefined;
17
- }>, {}, {}, {}, {}, {
18
- time: string;
19
- }>;
20
- __isFragment?: never;
21
- __isTeleport?: never;
22
- __isSuspense?: never;
23
- } & import('vue').ComponentOptionsBase<Readonly<import('.').ButtonProps> & Readonly<{
24
- onClick?: ((...args: any[]) => any) | undefined;
25
- }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
26
- click: (...args: any[]) => void;
27
- }, string, {
28
- time: string;
29
- }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
30
- $slots: {
31
- default?(_: {}): any;
32
- };
33
- });
34
- export * from './src/types';
@@ -1,10 +0,0 @@
1
- import t from "./src/button.vue.mjs";
2
- t.install = (n) => {
3
- t.name && n.component(t.name, t);
4
- };
5
- const m = t;
6
- export {
7
- m as MtButton
8
- };
9
- //# sourceMappingURL=index.mjs.map
10
- import './src/button.css';
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../../../../packages/components/button/index.ts"],"sourcesContent":["import type { App } from 'vue';\nimport Button from './src/button.vue';\n\nButton.install = (app: App): void => {\n if (Button.name) {\n app.component(Button.name, Button);\n }\n};\n\nexport const MtButton = Button;\n\nexport * from './src/types';\n"],"names":["Button","app","MtButton"],"mappings":";AAGAA,EAAO,UAAU,CAACC,MAAmB;AACnC,EAAID,EAAO,QACLC,EAAA,UAAUD,EAAO,MAAMA,CAAM;AAErC;AAEO,MAAME,IAAWF;"}
@@ -1 +0,0 @@
1
- @charset "UTF-8";.ex-button[data-v-c52e631f]{display:flex;animation:temp-animation-c52e631f step-end forwards}.ex-button[data-v-c52e631f]:active{animation:none}@keyframes temp-animation-c52e631f{}.mt-button[data-v-c52e631f]{display:flex;padding:4px 8px;cursor:pointer;background-color:#fff;border:#2d2d2d solid 1px;border-radius:5px}
@@ -1,25 +0,0 @@
1
- import { ButtonProps } from './types';
2
- declare function __VLS_template(): {
3
- slots: {
4
- default?(_: {}): any;
5
- };
6
- refs: {
7
- buttonRef: HTMLButtonElement;
8
- };
9
- attrs: Partial<{}>;
10
- };
11
- type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
12
- declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
13
- click: (...args: any[]) => void;
14
- }, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{
15
- onClick?: ((...args: any[]) => any) | undefined;
16
- }>, {
17
- time: string;
18
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
19
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
20
- export default _default;
21
- type __VLS_WithTemplateSlots<T, S> = T & {
22
- new (): {
23
- $slots: S;
24
- };
25
- };
@@ -1,8 +0,0 @@
1
- import o from "./button.vue2.mjs";
2
- /* empty css */
3
- import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
4
- const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c52e631f"]]);
5
- export {
6
- p as default
7
- };
8
- //# sourceMappingURL=button.vue.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,37 +0,0 @@
1
- import { defineComponent as c, ref as i, computed as m, onMounted as f, openBlock as b, createElementBlock as p, normalizeClass as v, unref as k, normalizeStyle as _, renderSlot as h } from "vue";
2
- const y = ["disabled"], M = /* @__PURE__ */ c({
3
- name: "MtButton",
4
- __name: "button",
5
- props: {
6
- mode: {},
7
- time: { default: "1s" },
8
- disabled: { type: Boolean }
9
- },
10
- emits: ["click"],
11
- setup(s, { emit: u }) {
12
- const t = s, r = u, n = i(!1), l = m(() => t.disabled ? !0 : t.mode === "throttle" && n.value), o = t.mode && ["throttle", "debounce"].includes(t.mode), a = i();
13
- f(() => {
14
- var e;
15
- o && ((e = a.value) == null || e.addEventListener("animationend", () => {
16
- n.value = !1;
17
- }));
18
- });
19
- function d(e) {
20
- n.value || (r("click", e), o && (n.value = !0));
21
- }
22
- return (e, B) => (b(), p("button", {
23
- ref_key: "buttonRef",
24
- ref: a,
25
- disabled: l.value,
26
- class: v(["mt-button", { "ex-button": k(o) }]),
27
- style: _({ "animation-duration": e.time, "pointer-events": l.value ? "none" : "all" }),
28
- onClick: d
29
- }, [
30
- h(e.$slots, "default", {}, void 0, !0)
31
- ], 14, y));
32
- }
33
- });
34
- export {
35
- M as default
36
- };
37
- //# sourceMappingURL=button.vue2.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button.vue2.mjs","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ButtonProps } from './types';\nimport { computed, onMounted, ref } from 'vue';\n\ndefineOptions({ name: 'MtButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), { time: '1s' });\nconst emit = defineEmits(['click']);\n\n/** 禁止点击状态 */\nconst forbidStatus = ref(false);\nconst buttonDisabled = computed(() => {\n if (props.disabled) {\n return true;\n }\n return props.mode === 'throttle' && forbidStatus.value;\n});\n\nconst hasMode = props.mode && ['throttle', 'debounce'].includes(props.mode);\nconst buttonRef = ref<Element>();\n\nonMounted(() => {\n if (hasMode) {\n // 监听动画执行结束\n buttonRef.value?.addEventListener('animationend', () => {\n forbidStatus.value = false;\n });\n }\n});\n\nfunction handleClick(e: MouseEvent) {\n if (forbidStatus.value) {\n return;\n }\n emit('click', e);\n if (hasMode) {\n forbidStatus.value = true;\n }\n}\n</script>\n\n<template>\n <button\n ref=\"buttonRef\"\n :disabled=\"buttonDisabled\"\n class=\"mt-button\"\n :class=\"{ 'ex-button': hasMode }\"\n :style=\"{ 'animation-duration': time, 'pointer-events': buttonDisabled ? 'none' : 'all' }\"\n @click=\"handleClick\"\n >\n <slot />\n </button>\n</template>\n\n<style scoped lang=\"scss\">\n@import url('./style/index.scss');\n\n.mt-button {\n display: flex;\n padding: 4px 8px;\n cursor: pointer;\n background-color: #fff;\n border: #2d2d2d solid 1px;\n border-radius: 5px;\n}\n</style>\n"],"names":["props","__props","emit","__emit","forbidStatus","ref","buttonDisabled","computed","hasMode","buttonRef","onMounted","_a","handleClick"],"mappings":";;;;;;;;;;;AAMA,UAAMA,IAAQC,GACRC,IAAOC,GAGPC,IAAeC,EAAI,EAAK,GACxBC,IAAiBC,EAAS,MAC1BP,EAAM,WACD,KAEFA,EAAM,SAAS,cAAcI,EAAa,KAClD,GAEKI,IAAUR,EAAM,QAAQ,CAAC,YAAY,UAAU,EAAE,SAASA,EAAM,IAAI,GACpES,IAAYJ;AAElB,IAAAK,EAAU,MAAM;;AACd,MAAIF,OAEQG,IAAAF,EAAA,UAAA,QAAAE,EAAO,iBAAiB,gBAAgB,MAAM;AACtD,QAAAP,EAAa,QAAQ;AAAA,MAAA;AAAA,IAEzB,CACD;AAED,aAASQ,EAAY,GAAe;AAClC,MAAIR,EAAa,UAGjBF,EAAK,SAAS,CAAC,GACXM,MACFJ,EAAa,QAAQ;AAAA,IAEzB;;;;;;;;;;;;;"}
@@ -1,8 +0,0 @@
1
- export interface ButtonProps {
2
- /** debounce:防抖;throttle:节流 */
3
- mode?: 'debounce' | 'throttle';
4
- /** 间隔时间 */
5
- time?: string;
6
- /** 禁用 */
7
- disabled?: boolean;
8
- }
@@ -1,34 +0,0 @@
1
- export declare const MtButton: {
2
- new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('.').ButtonProps> & Readonly<{
3
- onClick?: ((...args: any[]) => any) | undefined;
4
- }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
5
- click: (...args: any[]) => void;
6
- }, import('vue').PublicProps, {
7
- time: string;
8
- }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
9
- P: {};
10
- B: {};
11
- D: {};
12
- C: {};
13
- M: {};
14
- Defaults: {};
15
- }, Readonly<import('.').ButtonProps> & Readonly<{
16
- onClick?: ((...args: any[]) => any) | undefined;
17
- }>, {}, {}, {}, {}, {
18
- time: string;
19
- }>;
20
- __isFragment?: never;
21
- __isTeleport?: never;
22
- __isSuspense?: never;
23
- } & import('vue').ComponentOptionsBase<Readonly<import('.').ButtonProps> & Readonly<{
24
- onClick?: ((...args: any[]) => any) | undefined;
25
- }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
26
- click: (...args: any[]) => void;
27
- }, string, {
28
- time: string;
29
- }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
30
- $slots: {
31
- default?(_: {}): any;
32
- };
33
- });
34
- export * from './src/types';
@@ -1,3 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./src/button.vue.js");t.default.install=e=>{t.default.name&&e.component(t.default.name,t.default)};const n=t.default;exports.MtButton=n;
2
- //# sourceMappingURL=index.js.map
3
- require('./src/button.css');
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../packages/components/button/index.ts"],"sourcesContent":["import type { App } from 'vue';\nimport Button from './src/button.vue';\n\nButton.install = (app: App): void => {\n if (Button.name) {\n app.component(Button.name, Button);\n }\n};\n\nexport const MtButton = Button;\n\nexport * from './src/types';\n"],"names":["Button","app","MtButton"],"mappings":"uHAGAA,EAAAA,QAAO,QAAWC,GAAmB,CAC/BD,EAAAA,QAAO,MACLC,EAAA,UAAUD,EAAAA,QAAO,KAAMA,EAAM,OAAA,CAErC,EAEO,MAAME,EAAWF,EAAAA"}
@@ -1 +0,0 @@
1
- @charset "UTF-8";.ex-button[data-v-c52e631f]{display:flex;animation:temp-animation-c52e631f step-end forwards}.ex-button[data-v-c52e631f]:active{animation:none}@keyframes temp-animation-c52e631f{}.mt-button[data-v-c52e631f]{display:flex;padding:4px 8px;cursor:pointer;background-color:#fff;border:#2d2d2d solid 1px;border-radius:5px}
@@ -1,25 +0,0 @@
1
- import { ButtonProps } from './types';
2
- declare function __VLS_template(): {
3
- slots: {
4
- default?(_: {}): any;
5
- };
6
- refs: {
7
- buttonRef: HTMLButtonElement;
8
- };
9
- attrs: Partial<{}>;
10
- };
11
- type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
12
- declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
13
- click: (...args: any[]) => void;
14
- }, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{
15
- onClick?: ((...args: any[]) => any) | undefined;
16
- }>, {
17
- time: string;
18
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
19
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
20
- export default _default;
21
- type __VLS_WithTemplateSlots<T, S> = T & {
22
- new (): {
23
- $slots: S;
24
- };
25
- };
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./button.vue2.js");;/* empty css */const t=require("../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-c52e631f"]]);exports.default=u;
2
- //# sourceMappingURL=button.vue.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button.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=["disabled"],f=e.defineComponent({name:"MtButton",__name:"button",props:{mode:{},time:{default:"1s"},disabled:{type:Boolean}},emits:["click"],setup(i,{emit:s}){const n=i,r=s,o=e.ref(!1),u=e.computed(()=>n.disabled?!0:n.mode==="throttle"&&o.value),l=n.mode&&["throttle","debounce"].includes(n.mode),a=e.ref();e.onMounted(()=>{var t;l&&((t=a.value)==null||t.addEventListener("animationend",()=>{o.value=!1}))});function d(t){o.value||(r("click",t),l&&(o.value=!0))}return(t,m)=>(e.openBlock(),e.createElementBlock("button",{ref_key:"buttonRef",ref:a,disabled:u.value,class:e.normalizeClass(["mt-button",{"ex-button":e.unref(l)}]),style:e.normalizeStyle({"animation-duration":t.time,"pointer-events":u.value?"none":"all"}),onClick:d},[e.renderSlot(t.$slots,"default",{},void 0,!0)],14,c))}});exports.default=f;
2
- //# sourceMappingURL=button.vue2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button.vue2.js","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ButtonProps } from './types';\nimport { computed, onMounted, ref } from 'vue';\n\ndefineOptions({ name: 'MtButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), { time: '1s' });\nconst emit = defineEmits(['click']);\n\n/** 禁止点击状态 */\nconst forbidStatus = ref(false);\nconst buttonDisabled = computed(() => {\n if (props.disabled) {\n return true;\n }\n return props.mode === 'throttle' && forbidStatus.value;\n});\n\nconst hasMode = props.mode && ['throttle', 'debounce'].includes(props.mode);\nconst buttonRef = ref<Element>();\n\nonMounted(() => {\n if (hasMode) {\n // 监听动画执行结束\n buttonRef.value?.addEventListener('animationend', () => {\n forbidStatus.value = false;\n });\n }\n});\n\nfunction handleClick(e: MouseEvent) {\n if (forbidStatus.value) {\n return;\n }\n emit('click', e);\n if (hasMode) {\n forbidStatus.value = true;\n }\n}\n</script>\n\n<template>\n <button\n ref=\"buttonRef\"\n :disabled=\"buttonDisabled\"\n class=\"mt-button\"\n :class=\"{ 'ex-button': hasMode }\"\n :style=\"{ 'animation-duration': time, 'pointer-events': buttonDisabled ? 'none' : 'all' }\"\n @click=\"handleClick\"\n >\n <slot />\n </button>\n</template>\n\n<style scoped lang=\"scss\">\n@import url('./style/index.scss');\n\n.mt-button {\n display: flex;\n padding: 4px 8px;\n cursor: pointer;\n background-color: #fff;\n border: #2d2d2d solid 1px;\n border-radius: 5px;\n}\n</style>\n"],"names":["props","__props","emit","__emit","forbidStatus","ref","buttonDisabled","computed","hasMode","buttonRef","onMounted","_a","handleClick","e"],"mappings":"qSAMA,MAAMA,EAAQC,EACRC,EAAOC,EAGPC,EAAeC,MAAI,EAAK,EACxBC,EAAiBC,EAAAA,SAAS,IAC1BP,EAAM,SACD,GAEFA,EAAM,OAAS,YAAcI,EAAa,KAClD,EAEKI,EAAUR,EAAM,MAAQ,CAAC,WAAY,UAAU,EAAE,SAASA,EAAM,IAAI,EACpES,EAAYJ,EAAAA,MAElBK,EAAAA,UAAU,IAAM,OACVF,KAEQG,EAAAF,EAAA,QAAA,MAAAE,EAAO,iBAAiB,eAAgB,IAAM,CACtDP,EAAa,MAAQ,EAAA,GAEzB,CACD,EAED,SAASQ,EAAYC,EAAe,CAC9BT,EAAa,QAGjBF,EAAK,QAASW,CAAC,EACXL,IACFJ,EAAa,MAAQ,IAEzB"}
@@ -1,8 +0,0 @@
1
- export interface ButtonProps {
2
- /** debounce:防抖;throttle:节流 */
3
- mode?: 'debounce' | 'throttle';
4
- /** 间隔时间 */
5
- time?: string;
6
- /** 禁用 */
7
- disabled?: boolean;
8
- }