mortise-tenon-design 0.0.14 → 0.0.16
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/index.d.ts +32 -0
- package/es/components/expand-box/index.mjs +10 -0
- package/es/components/expand-box/index.mjs.map +1 -0
- package/es/components/expand-box/src/expand-box.css +1 -0
- package/es/components/expand-box/src/expand-box.d.ts +8 -0
- package/es/components/expand-box/src/expand-box.vue.d.ts +26 -0
- package/es/components/expand-box/src/expand-box.vue.mjs +8 -0
- package/es/components/expand-box/src/expand-box.vue.mjs.map +1 -0
- package/es/components/expand-box/src/expand-box.vue2.mjs +40 -0
- package/es/components/expand-box/src/expand-box.vue2.mjs.map +1 -0
- package/es/components/index.d.ts +1 -1
- package/es/hooks/index.d.ts +1 -0
- package/es/hooks/use-throttle-control/index.d.ts +14 -0
- package/es/hooks/use-throttle-control/index.mjs +29 -0
- package/es/hooks/use-throttle-control/index.mjs.map +1 -0
- package/es/index.mjs +4 -2
- package/es/index.mjs.map +1 -1
- package/lib/components/expand-box/index.d.ts +32 -0
- package/lib/components/expand-box/index.js +3 -0
- package/lib/components/expand-box/index.js.map +1 -0
- package/lib/components/expand-box/src/expand-box.css +1 -0
- package/lib/components/expand-box/src/expand-box.d.ts +8 -0
- package/lib/components/expand-box/src/expand-box.vue.d.ts +26 -0
- package/lib/components/expand-box/src/expand-box.vue.js +2 -0
- package/lib/components/expand-box/src/expand-box.vue.js.map +1 -0
- package/lib/components/expand-box/src/expand-box.vue2.js +2 -0
- package/lib/components/expand-box/src/expand-box.vue2.js.map +1 -0
- package/lib/components/index.d.ts +1 -1
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/use-throttle-control/index.d.ts +14 -0
- package/lib/hooks/use-throttle-control/index.js +2 -0
- package/lib/hooks/use-throttle-control/index.js.map +1 -0
- package/lib/index.js +1 -1
- package/package.json +5 -9
- package/es/components/button/index.d.ts +0 -34
- package/es/components/button/index.mjs +0 -10
- package/es/components/button/index.mjs.map +0 -1
- package/es/components/button/src/button.css +0 -1
- package/es/components/button/src/button.vue.d.ts +0 -25
- package/es/components/button/src/button.vue.mjs +0 -8
- package/es/components/button/src/button.vue.mjs.map +0 -1
- package/es/components/button/src/button.vue2.mjs +0 -37
- package/es/components/button/src/button.vue2.mjs.map +0 -1
- package/es/components/button/src/types.d.ts +0 -8
- package/lib/components/button/index.d.ts +0 -34
- package/lib/components/button/index.js +0 -3
- package/lib/components/button/index.js.map +0 -1
- package/lib/components/button/src/button.css +0 -1
- package/lib/components/button/src/button.vue.d.ts +0 -25
- package/lib/components/button/src/button.vue.js +0 -2
- package/lib/components/button/src/button.vue.js.map +0 -1
- package/lib/components/button/src/button.vue2.js +0 -2
- package/lib/components/button/src/button.vue2.js.map +0 -1
- package/lib/components/button/src/types.d.ts +0 -8
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export declare const MtExpandBox: {
|
|
2
|
+
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
|
|
3
|
+
open: boolean;
|
|
4
|
+
targetRange: number;
|
|
5
|
+
transitionTime: number;
|
|
6
|
+
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
|
|
7
|
+
P: {};
|
|
8
|
+
B: {};
|
|
9
|
+
D: {};
|
|
10
|
+
C: {};
|
|
11
|
+
M: {};
|
|
12
|
+
Defaults: {};
|
|
13
|
+
}, Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, {
|
|
14
|
+
open: boolean;
|
|
15
|
+
targetRange: number;
|
|
16
|
+
transitionTime: number;
|
|
17
|
+
}>;
|
|
18
|
+
__isFragment?: never;
|
|
19
|
+
__isTeleport?: never;
|
|
20
|
+
__isSuspense?: never;
|
|
21
|
+
} & import('vue').ComponentOptionsBase<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
|
|
22
|
+
open: boolean;
|
|
23
|
+
targetRange: number;
|
|
24
|
+
transitionTime: number;
|
|
25
|
+
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
26
|
+
$slots: {
|
|
27
|
+
default?(_: {
|
|
28
|
+
open: boolean;
|
|
29
|
+
isOutRange: boolean;
|
|
30
|
+
}): any;
|
|
31
|
+
};
|
|
32
|
+
});
|
|
@@ -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
|
+
.mt-expand-box[data-v-c6fd30b0]{overflow:hidden}.mt-expand-transition[data-v-c6fd30b0]{transition:height var(--6beda65b) ease-in-out}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ExpandBoxProps } from './expand-box';
|
|
2
|
+
declare function __VLS_template(): {
|
|
3
|
+
slots: {
|
|
4
|
+
default?(_: {
|
|
5
|
+
open: boolean;
|
|
6
|
+
isOutRange: boolean;
|
|
7
|
+
}): any;
|
|
8
|
+
};
|
|
9
|
+
refs: {
|
|
10
|
+
contentRef: HTMLDivElement;
|
|
11
|
+
};
|
|
12
|
+
attrs: Partial<{}>;
|
|
13
|
+
};
|
|
14
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
15
|
+
declare const __VLS_component: import('vue').DefineComponent<ExpandBoxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ExpandBoxProps> & Readonly<{}>, {
|
|
16
|
+
open: boolean;
|
|
17
|
+
targetRange: number;
|
|
18
|
+
transitionTime: number;
|
|
19
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
20
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
21
|
+
export default _default;
|
|
22
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
23
|
+
new (): {
|
|
24
|
+
$slots: S;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
@@ -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-c6fd30b0"]]);
|
|
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,40 @@
|
|
|
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 b, renderSlot as x } from "vue";
|
|
2
|
+
import { useResizeObserver as y } from "@vueuse/core";
|
|
3
|
+
import { debounce as z } from "lodash-es";
|
|
4
|
+
const k = /* @__PURE__ */ m({
|
|
5
|
+
__name: "expand-box",
|
|
6
|
+
props: {
|
|
7
|
+
open: { type: Boolean, default: !1 },
|
|
8
|
+
targetRange: { default: 0 },
|
|
9
|
+
transitionTime: { default: 200 }
|
|
10
|
+
},
|
|
11
|
+
setup(l) {
|
|
12
|
+
p((e) => ({
|
|
13
|
+
"6beda65b": u.value
|
|
14
|
+
}));
|
|
15
|
+
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 = z(() => {
|
|
16
|
+
var e;
|
|
17
|
+
n.value = (e = o.value) == null ? void 0 : e.offsetHeight;
|
|
18
|
+
}, t.transitionTime);
|
|
19
|
+
return y(o, r), d(() => {
|
|
20
|
+
r();
|
|
21
|
+
}), (e, _) => (f(), g("div", {
|
|
22
|
+
class: v(["mt-expand-box", { "mt-expand-transition": !!e.transitionTime }]),
|
|
23
|
+
style: R(c.value)
|
|
24
|
+
}, [
|
|
25
|
+
b("div", {
|
|
26
|
+
ref_key: "contentRef",
|
|
27
|
+
ref: o
|
|
28
|
+
}, [
|
|
29
|
+
x(e.$slots, "default", {
|
|
30
|
+
open: e.open,
|
|
31
|
+
isOutRange: s.value
|
|
32
|
+
}, void 0, !0)
|
|
33
|
+
], 512)
|
|
34
|
+
], 6));
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
export {
|
|
38
|
+
k as default
|
|
39
|
+
};
|
|
40
|
+
//# 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 { 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\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":";;;;;;;;;;;;;;AAMA,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,KAGbI,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;IAAA,CACjB;;;;;;;;;;;;;;;;"}
|
package/es/components/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './
|
|
1
|
+
export * from './expand-box';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './use-throttle-control';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
type AnyFn = (...args: any[]) => any;
|
|
2
|
+
/**
|
|
3
|
+
* 节流控制
|
|
4
|
+
* @param ms 节流时间(ms)
|
|
5
|
+
* @param fn 节流函数
|
|
6
|
+
*/
|
|
7
|
+
export declare function useThrottleControl<Fn extends AnyFn>(ms?: number, fn?: Fn): {
|
|
8
|
+
throttleOpen: import('vue').Ref<boolean, boolean>;
|
|
9
|
+
throttleFn: Fn;
|
|
10
|
+
openThrottle: () => NodeJS.Timeout;
|
|
11
|
+
closeThrottle: (timer?: NodeJS.Timeout) => void;
|
|
12
|
+
};
|
|
13
|
+
export type UseThrottleControlReturn = ReturnType<typeof useThrottleControl>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ref as c, onBeforeUnmount as f } from "vue";
|
|
2
|
+
function a(l = 200, n) {
|
|
3
|
+
const e = c(!1);
|
|
4
|
+
let t;
|
|
5
|
+
function u() {
|
|
6
|
+
return o(), e.value = !0, t = setTimeout(() => {
|
|
7
|
+
o();
|
|
8
|
+
}, l), t;
|
|
9
|
+
}
|
|
10
|
+
function o(r) {
|
|
11
|
+
(!r || r === t) && (e.value = !1, t && (clearTimeout(t), t = void 0));
|
|
12
|
+
}
|
|
13
|
+
const i = (...r) => {
|
|
14
|
+
if (!e.value)
|
|
15
|
+
return u(), n == null ? void 0 : n(...r);
|
|
16
|
+
};
|
|
17
|
+
return f(() => {
|
|
18
|
+
o();
|
|
19
|
+
}), {
|
|
20
|
+
throttleOpen: e,
|
|
21
|
+
throttleFn: i,
|
|
22
|
+
openThrottle: u,
|
|
23
|
+
closeThrottle: o
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
a as useThrottleControl
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-throttle-control/index.ts"],"sourcesContent":["import { onBeforeUnmount, ref } from 'vue';\r\n\r\ntype AnyFn = (...args: any[]) => any;\r\n\r\n/**\r\n * 节流控制\r\n * @param ms 节流时间(ms)\r\n * @param fn 节流函数\r\n */\r\nexport function useThrottleControl<Fn extends AnyFn>(ms: number = 200, fn?: Fn) {\r\n /** 节流状态 */\r\n const throttleOpen = ref(false);\r\n /** 当前执行的定时器 */\r\n let runningTimer: NodeJS.Timeout | undefined;\r\n\r\n /** 开启节流,已在执行的会被覆盖 */\r\n function openThrottle() {\r\n closeThrottle();\r\n throttleOpen.value = true;\r\n runningTimer = setTimeout(() => {\r\n closeThrottle();\r\n }, ms);\r\n return runningTimer;\r\n }\r\n\r\n /** 关闭节流定时器 */\r\n function closeThrottle(timer?: NodeJS.Timeout) {\r\n // 如果有传入timer时,会判断是否为当前执行开启的定时器\r\n if (!timer || timer === runningTimer) {\r\n throttleOpen.value = false;\r\n if (runningTimer) {\r\n clearTimeout(runningTimer);\r\n runningTimer = undefined;\r\n }\r\n }\r\n }\r\n\r\n /** 节流控制方法 */\r\n const throttleFn = ((...args: any[]) => {\r\n // 节流状态开启中,不可重复执行\r\n if (throttleOpen.value) {\r\n return;\r\n }\r\n openThrottle();\r\n return fn?.(...args);\r\n }) as Fn;\r\n\r\n /** 移除时销毁定时器 */\r\n onBeforeUnmount(() => {\r\n closeThrottle();\r\n });\r\n\r\n return {\r\n throttleOpen,\r\n throttleFn,\r\n openThrottle,\r\n closeThrottle,\r\n };\r\n}\r\n\r\nexport type UseThrottleControlReturn = ReturnType<typeof useThrottleControl>;\r\n"],"names":["useThrottleControl","ms","fn","throttleOpen","ref","runningTimer","openThrottle","closeThrottle","timer","throttleFn","args","onBeforeUnmount"],"mappings":";AASgB,SAAAA,EAAqCC,IAAa,KAAKC,GAAS;AAExE,QAAAC,IAAeC,EAAI,EAAK;AAE1B,MAAAC;AAGJ,WAASC,IAAe;AACR,WAAAC,KACdJ,EAAa,QAAQ,IACrBE,IAAe,WAAW,MAAM;AAChB,MAAAE;OACbN,CAAE,GACEI;AAAA,EACT;AAGA,WAASE,EAAcC,GAAwB;AAEzC,KAAA,CAACA,KAASA,MAAUH,OACtBF,EAAa,QAAQ,IACjBE,MACF,aAAaA,CAAY,GACVA,IAAA;AAAA,EAGrB;AAGM,QAAAI,IAAc,IAAIC,MAAgB;AAEtC,QAAI,CAAAP,EAAa;AAGJ,aAAAG,KACNJ,KAAA,gBAAAA,EAAK,GAAGQ;AAAA,EAAI;AAIrB,SAAAC,EAAgB,MAAM;AACN,IAAAJ;EAAA,CACf,GAEM;AAAA,IACL,cAAAJ;AAAA,IACA,YAAAM;AAAA,IACA,cAAAH;AAAA,IACA,eAAAC;AAAA,EAAA;AAEJ;"}
|
package/es/index.mjs
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { MtExpandBox as t } from "./components/expand-box/index.mjs";
|
|
2
|
+
import { useThrottleControl as x } from "./hooks/use-throttle-control/index.mjs";
|
|
2
3
|
export {
|
|
3
|
-
|
|
4
|
+
t as MtExpandBox,
|
|
5
|
+
x as useThrottleControl
|
|
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,32 @@
|
|
|
1
|
+
export declare const MtExpandBox: {
|
|
2
|
+
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
|
|
3
|
+
open: boolean;
|
|
4
|
+
targetRange: number;
|
|
5
|
+
transitionTime: number;
|
|
6
|
+
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
|
|
7
|
+
P: {};
|
|
8
|
+
B: {};
|
|
9
|
+
D: {};
|
|
10
|
+
C: {};
|
|
11
|
+
M: {};
|
|
12
|
+
Defaults: {};
|
|
13
|
+
}, Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, {
|
|
14
|
+
open: boolean;
|
|
15
|
+
targetRange: number;
|
|
16
|
+
transitionTime: number;
|
|
17
|
+
}>;
|
|
18
|
+
__isFragment?: never;
|
|
19
|
+
__isTeleport?: never;
|
|
20
|
+
__isSuspense?: never;
|
|
21
|
+
} & import('vue').ComponentOptionsBase<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
|
|
22
|
+
open: boolean;
|
|
23
|
+
targetRange: number;
|
|
24
|
+
transitionTime: number;
|
|
25
|
+
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
26
|
+
$slots: {
|
|
27
|
+
default?(_: {
|
|
28
|
+
open: boolean;
|
|
29
|
+
isOutRange: boolean;
|
|
30
|
+
}): any;
|
|
31
|
+
};
|
|
32
|
+
});
|
|
@@ -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
|
+
.mt-expand-box[data-v-c6fd30b0]{overflow:hidden}.mt-expand-transition[data-v-c6fd30b0]{transition:height var(--6beda65b) ease-in-out}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ExpandBoxProps } from './expand-box';
|
|
2
|
+
declare function __VLS_template(): {
|
|
3
|
+
slots: {
|
|
4
|
+
default?(_: {
|
|
5
|
+
open: boolean;
|
|
6
|
+
isOutRange: boolean;
|
|
7
|
+
}): any;
|
|
8
|
+
};
|
|
9
|
+
refs: {
|
|
10
|
+
contentRef: HTMLDivElement;
|
|
11
|
+
};
|
|
12
|
+
attrs: Partial<{}>;
|
|
13
|
+
};
|
|
14
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
15
|
+
declare const __VLS_component: import('vue').DefineComponent<ExpandBoxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ExpandBoxProps> & Readonly<{}>, {
|
|
16
|
+
open: boolean;
|
|
17
|
+
targetRange: number;
|
|
18
|
+
transitionTime: number;
|
|
19
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
20
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
21
|
+
export default _default;
|
|
22
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
23
|
+
new (): {
|
|
24
|
+
$slots: S;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
@@ -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-c6fd30b0"]]);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"),c=require("@vueuse/core"),d=require("lodash-es"),p=e.defineComponent({__name:"expand-box",props:{open:{type:Boolean,default:!1},targetRange:{default:0},transitionTime:{default:200}},setup(i){e.useCssVars(t=>({"6beda65b":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
|
|
@@ -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 { 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\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":"0WAMA,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,MAGbI,EAAkBC,EAAAA,SAAS,IAAM,OACxBN,EAAA,OAAQO,EAAAH,EAAW,QAAX,YAAAG,EAAkB,YAAA,EACtCX,EAAM,cAAc,EAGvBY,OAAAA,oBAAkBJ,EAAYC,CAAe,EAG7CI,EAAAA,UAAU,IAAM,CACEJ,GAAA,CACjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './
|
|
1
|
+
export * from './expand-box';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './use-throttle-control';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
type AnyFn = (...args: any[]) => any;
|
|
2
|
+
/**
|
|
3
|
+
* 节流控制
|
|
4
|
+
* @param ms 节流时间(ms)
|
|
5
|
+
* @param fn 节流函数
|
|
6
|
+
*/
|
|
7
|
+
export declare function useThrottleControl<Fn extends AnyFn>(ms?: number, fn?: Fn): {
|
|
8
|
+
throttleOpen: import('vue').Ref<boolean, boolean>;
|
|
9
|
+
throttleFn: Fn;
|
|
10
|
+
openThrottle: () => NodeJS.Timeout;
|
|
11
|
+
closeThrottle: (timer?: NodeJS.Timeout) => void;
|
|
12
|
+
};
|
|
13
|
+
export type UseThrottleControlReturn = ReturnType<typeof useThrottleControl>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue");function c(i=200,n){const t=l.ref(!1);let e;function u(){return o(),t.value=!0,e=setTimeout(()=>{o()},i),e}function o(r){(!r||r===e)&&(t.value=!1,e&&(clearTimeout(e),e=void 0))}const s=(...r)=>{if(!t.value)return u(),n==null?void 0:n(...r)};return l.onBeforeUnmount(()=>{o()}),{throttleOpen:t,throttleFn:s,openThrottle:u,closeThrottle:o}}exports.useThrottleControl=c;
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-throttle-control/index.ts"],"sourcesContent":["import { onBeforeUnmount, ref } from 'vue';\r\n\r\ntype AnyFn = (...args: any[]) => any;\r\n\r\n/**\r\n * 节流控制\r\n * @param ms 节流时间(ms)\r\n * @param fn 节流函数\r\n */\r\nexport function useThrottleControl<Fn extends AnyFn>(ms: number = 200, fn?: Fn) {\r\n /** 节流状态 */\r\n const throttleOpen = ref(false);\r\n /** 当前执行的定时器 */\r\n let runningTimer: NodeJS.Timeout | undefined;\r\n\r\n /** 开启节流,已在执行的会被覆盖 */\r\n function openThrottle() {\r\n closeThrottle();\r\n throttleOpen.value = true;\r\n runningTimer = setTimeout(() => {\r\n closeThrottle();\r\n }, ms);\r\n return runningTimer;\r\n }\r\n\r\n /** 关闭节流定时器 */\r\n function closeThrottle(timer?: NodeJS.Timeout) {\r\n // 如果有传入timer时,会判断是否为当前执行开启的定时器\r\n if (!timer || timer === runningTimer) {\r\n throttleOpen.value = false;\r\n if (runningTimer) {\r\n clearTimeout(runningTimer);\r\n runningTimer = undefined;\r\n }\r\n }\r\n }\r\n\r\n /** 节流控制方法 */\r\n const throttleFn = ((...args: any[]) => {\r\n // 节流状态开启中,不可重复执行\r\n if (throttleOpen.value) {\r\n return;\r\n }\r\n openThrottle();\r\n return fn?.(...args);\r\n }) as Fn;\r\n\r\n /** 移除时销毁定时器 */\r\n onBeforeUnmount(() => {\r\n closeThrottle();\r\n });\r\n\r\n return {\r\n throttleOpen,\r\n throttleFn,\r\n openThrottle,\r\n closeThrottle,\r\n };\r\n}\r\n\r\nexport type UseThrottleControlReturn = ReturnType<typeof useThrottleControl>;\r\n"],"names":["useThrottleControl","ms","fn","throttleOpen","ref","runningTimer","openThrottle","closeThrottle","timer","throttleFn","args","onBeforeUnmount"],"mappings":"uGASgB,SAAAA,EAAqCC,EAAa,IAAKC,EAAS,CAExE,MAAAC,EAAeC,MAAI,EAAK,EAE1B,IAAAC,EAGJ,SAASC,GAAe,CACR,OAAAC,IACdJ,EAAa,MAAQ,GACrBE,EAAe,WAAW,IAAM,CAChBE,KACbN,CAAE,EACEI,CACT,CAGA,SAASE,EAAcC,EAAwB,EAEzC,CAACA,GAASA,IAAUH,KACtBF,EAAa,MAAQ,GACjBE,IACF,aAAaA,CAAY,EACVA,EAAA,QAGrB,CAGM,MAAAI,EAAc,IAAIC,IAAgB,CAEtC,GAAI,CAAAP,EAAa,MAGJ,OAAAG,IACNJ,GAAA,YAAAA,EAAK,GAAGQ,EAAI,EAIrBC,OAAAA,EAAAA,gBAAgB,IAAM,CACNJ,GAAA,CACf,EAEM,CACL,aAAAJ,EACA,WAAAM,EACA,aAAAH,EACA,cAAAC,CAAA,CAEJ"}
|
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 e=require("./components/expand-box/index.js"),t=require("./hooks/use-throttle-control/index.js");exports.MtExpandBox=e.MtExpandBox;exports.useThrottleControl=t.useThrottleControl;
|
|
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.
|
|
4
|
+
"version": "0.0.16",
|
|
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 +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 +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,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"}
|