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.
Files changed (54) hide show
  1. package/es/components/expand-box/index.d.ts +32 -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 +8 -0
  6. package/es/components/expand-box/src/expand-box.vue.d.ts +26 -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 +40 -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/hooks/index.d.ts +1 -0
  13. package/es/hooks/use-throttle-control/index.d.ts +14 -0
  14. package/es/hooks/use-throttle-control/index.mjs +29 -0
  15. package/es/hooks/use-throttle-control/index.mjs.map +1 -0
  16. package/es/index.mjs +4 -2
  17. package/es/index.mjs.map +1 -1
  18. package/lib/components/expand-box/index.d.ts +32 -0
  19. package/lib/components/expand-box/index.js +3 -0
  20. package/lib/components/expand-box/index.js.map +1 -0
  21. package/lib/components/expand-box/src/expand-box.css +1 -0
  22. package/lib/components/expand-box/src/expand-box.d.ts +8 -0
  23. package/lib/components/expand-box/src/expand-box.vue.d.ts +26 -0
  24. package/lib/components/expand-box/src/expand-box.vue.js +2 -0
  25. package/lib/components/expand-box/src/expand-box.vue.js.map +1 -0
  26. package/lib/components/expand-box/src/expand-box.vue2.js +2 -0
  27. package/lib/components/expand-box/src/expand-box.vue2.js.map +1 -0
  28. package/lib/components/index.d.ts +1 -1
  29. package/lib/hooks/index.d.ts +1 -0
  30. package/lib/hooks/use-throttle-control/index.d.ts +14 -0
  31. package/lib/hooks/use-throttle-control/index.js +2 -0
  32. package/lib/hooks/use-throttle-control/index.js.map +1 -0
  33. package/lib/index.js +1 -1
  34. package/package.json +5 -9
  35. package/es/components/button/index.d.ts +0 -34
  36. package/es/components/button/index.mjs +0 -10
  37. package/es/components/button/index.mjs.map +0 -1
  38. package/es/components/button/src/button.css +0 -1
  39. package/es/components/button/src/button.vue.d.ts +0 -25
  40. package/es/components/button/src/button.vue.mjs +0 -8
  41. package/es/components/button/src/button.vue.mjs.map +0 -1
  42. package/es/components/button/src/button.vue2.mjs +0 -37
  43. package/es/components/button/src/button.vue2.mjs.map +0 -1
  44. package/es/components/button/src/types.d.ts +0 -8
  45. package/lib/components/button/index.d.ts +0 -34
  46. package/lib/components/button/index.js +0 -3
  47. package/lib/components/button/index.js.map +0 -1
  48. package/lib/components/button/src/button.css +0 -1
  49. package/lib/components/button/src/button.vue.d.ts +0 -25
  50. package/lib/components/button/src/button.vue.js +0 -2
  51. package/lib/components/button/src/button.vue.js.map +0 -1
  52. package/lib/components/button/src/button.vue2.js +0 -2
  53. package/lib/components/button/src/button.vue2.js.map +0 -1
  54. 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,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
+ .mt-expand-box[data-v-c6fd30b0]{overflow:hidden}.mt-expand-transition[data-v-c6fd30b0]{transition:height var(--6beda65b) ease-in-out}
@@ -0,0 +1,8 @@
1
+ export interface ExpandBoxProps {
2
+ /** 控制是否展开 */
3
+ open?: boolean;
4
+ /** 达到可调整的目标范围(px) */
5
+ targetRange?: number;
6
+ /** 过渡时间(ms) */
7
+ transitionTime?: number;
8
+ }
@@ -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;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- export * from './button';
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 { MtButton as r } from "./components/button/index.mjs";
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
- r as MtButton
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,8 @@
1
+ export interface ExpandBoxProps {
2
+ /** 控制是否展开 */
3
+ open?: boolean;
4
+ /** 达到可调整的目标范围(px) */
5
+ targetRange?: number;
6
+ /** 过渡时间(ms) */
7
+ transitionTime?: number;
8
+ }
@@ -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 './button';
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 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"),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.14",
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,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
- }