mortise-tenon-design 0.1.1 → 0.1.11

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 (33) hide show
  1. package/es/components/{expand-box → expand}/index.mjs +3 -3
  2. package/es/components/expand/index.mjs.map +1 -0
  3. package/es/components/expand/src/expand.css +1 -0
  4. package/es/components/expand/src/expand.vue.mjs +8 -0
  5. package/es/components/expand/src/expand.vue.mjs.map +1 -0
  6. package/es/components/{expand-box/src/expand-box.vue2.mjs → expand/src/expand.vue2.mjs} +8 -8
  7. package/es/components/expand/src/expand.vue2.mjs.map +1 -0
  8. package/es/index.mjs +2 -2
  9. package/lib/components/expand/index.js +3 -0
  10. package/lib/components/expand/index.js.map +1 -0
  11. package/lib/components/expand/src/expand.css +1 -0
  12. package/lib/components/expand/src/expand.vue.js +2 -0
  13. package/lib/components/expand/src/expand.vue.js.map +1 -0
  14. package/lib/components/expand/src/expand.vue2.js +2 -0
  15. package/lib/components/expand/src/expand.vue2.js.map +1 -0
  16. package/lib/index.js +1 -1
  17. package/package.json +1 -1
  18. package/types/{expand-box → expand}/index.d.ts +4 -4
  19. package/types/{expand-box/src/expand-box.d.ts → expand/src/expand.d.ts} +1 -1
  20. package/types/{expand-box/src/expand-box.vue.d.ts → expand/src/expand.vue.d.ts} +2 -2
  21. package/types/index.d.ts +1 -1
  22. package/es/components/expand-box/index.mjs.map +0 -1
  23. package/es/components/expand-box/src/expand-box.css +0 -1
  24. package/es/components/expand-box/src/expand-box.vue.mjs +0 -8
  25. package/es/components/expand-box/src/expand-box.vue.mjs.map +0 -1
  26. package/es/components/expand-box/src/expand-box.vue2.mjs.map +0 -1
  27. package/lib/components/expand-box/index.js +0 -3
  28. package/lib/components/expand-box/index.js.map +0 -1
  29. package/lib/components/expand-box/src/expand-box.css +0 -1
  30. package/lib/components/expand-box/src/expand-box.vue.js +0 -2
  31. package/lib/components/expand-box/src/expand-box.vue.js.map +0 -1
  32. package/lib/components/expand-box/src/expand-box.vue2.js +0 -2
  33. package/lib/components/expand-box/src/expand-box.vue2.js.map +0 -1
@@ -1,10 +1,10 @@
1
- import n from "./src/expand-box.vue.mjs";
1
+ import n from "./src/expand.vue.mjs";
2
2
  n.install = (o) => {
3
3
  n.name && o.component(n.name, n);
4
4
  };
5
5
  const a = n;
6
6
  export {
7
- a as MtExpandBox
7
+ a as MtExpand
8
8
  };
9
9
  //# sourceMappingURL=index.mjs.map
10
- import './src/expand-box.css';
10
+ import './src/expand.css';
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sources":["../../../../../packages/components/expand/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport Expand from './src/expand.vue';\r\n\r\nExpand.install = (app: App): void => {\r\n if (Expand.name) {\r\n app.component(Expand.name, Expand);\r\n }\r\n};\r\n\r\nexport const MtExpand = Expand;\r\n"],"names":["Expand","app","MtExpand"],"mappings":";AAGAA,EAAO,UAAU,CAACC,MAAmB;AACnC,EAAID,EAAO,QACLC,EAAA,UAAUD,EAAO,MAAMA,CAAM;AAErC;AAEO,MAAME,IAAWF;"}
@@ -0,0 +1 @@
1
+ .mt-expand[data-v-60128610]{overflow:hidden}.mt-expand-transition[data-v-60128610]{transition:height var(--2863d212) ease-in-out}
@@ -0,0 +1,8 @@
1
+ import o from "./expand.vue2.mjs";
2
+ /* empty css */
3
+ import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
4
+ const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-60128610"]]);
5
+ export {
6
+ m as default
7
+ };
8
+ //# sourceMappingURL=expand.vue.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"expand.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,9 +1,9 @@
1
1
  import { defineComponent as m, useCssVars as p, computed as a, ref as i, onMounted as d, openBlock as f, createElementBlock as g, normalizeClass as v, normalizeStyle as R, createElementVNode as x, renderSlot as y } from "vue";
2
2
  import { useResizeObserver as z } from "@vueuse/core";
3
3
  import { debounce as _ } from "lodash-es";
4
- const T = /* @__PURE__ */ m({
5
- name: "MtExpandBox",
6
- __name: "expand-box",
4
+ const B = /* @__PURE__ */ m({
5
+ name: "MtExpand",
6
+ __name: "expand",
7
7
  props: {
8
8
  open: { type: Boolean, default: !1 },
9
9
  targetRange: { default: 0 },
@@ -11,7 +11,7 @@ const T = /* @__PURE__ */ m({
11
11
  },
12
12
  setup(l) {
13
13
  p((e) => ({
14
- "01836c4a": u.value
14
+ "2863d212": u.value
15
15
  }));
16
16
  const t = l, u = a(() => `${t.transitionTime}ms`), n = i(0), s = a(() => n.value > t.targetRange), c = a(() => ({ height: `${!s.value || t.open ? n.value : t.targetRange}px` })), o = i(), r = _(() => {
17
17
  var e;
@@ -19,8 +19,8 @@ const T = /* @__PURE__ */ m({
19
19
  }, t.transitionTime);
20
20
  return z(o, r), d(() => {
21
21
  r();
22
- }), (e, b) => (f(), g("div", {
23
- class: v(["mt-expand-box", { "mt-expand-transition": !!e.transitionTime }]),
22
+ }), (e, h) => (f(), g("div", {
23
+ class: v(["mt-expand", { "mt-expand-transition": !!e.transitionTime }]),
24
24
  style: R(c.value)
25
25
  }, [
26
26
  x("div", {
@@ -36,6 +36,6 @@ const T = /* @__PURE__ */ m({
36
36
  }
37
37
  });
38
38
  export {
39
- T as default
39
+ B as default
40
40
  };
41
- //# sourceMappingURL=expand-box.vue2.mjs.map
41
+ //# sourceMappingURL=expand.vue2.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"expand.vue2.mjs","sources":["../../../../../../packages/components/expand/src/expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandProps } from './expand.ts';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\ndefineOptions({ name: 'MtExpand' });\r\n\r\nconst props = withDefaults(defineProps<ExpandProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":";;;;;;;;;;;;;;;AAQA,UAAMA,IAAQC,GAMRC,IAAqBC,EAAS,MAAM,GAAGH,EAAM,cAAc,IAAI,GAG/DI,IAAeC,EAAI,CAAC,GAGpBC,IAAaH,EAAS,MAAMC,EAAa,QAAQJ,EAAM,WAAW,GAGlEO,IAAeJ,EAAS,OAErB,EAAE,QAAQ,GADJ,CAACG,EAAW,SAASN,EAAM,OAAOI,EAAa,QAAQJ,EAAM,WAClD,KAAK,EAC9B,GAGKQ,IAAaH,EAAI,GAGjBI,IAAkBC,EAAS,MAAM;;AACxB,MAAAN,EAAA,SAAQO,IAAAH,EAAW,UAAX,gBAAAG,EAAkB;AAAA,IAAA,GACtCX,EAAM,cAAc;AAGvB,WAAAY,EAAkBJ,GAAYC,CAAe,GAG7CI,EAAU,MAAM;AACE,MAAAJ,EAAA;AAAA,IAAA,CACjB;;;;;;;;;;;;;;;;"}
package/es/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { MtExpandBox as p } from "./components/expand-box/index.mjs";
1
+ import { MtExpand as r } from "./components/expand/index.mjs";
2
2
  export {
3
- p as MtExpandBox
3
+ r as MtExpand
4
4
  };
5
5
  //# sourceMappingURL=index.mjs.map
@@ -0,0 +1,3 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./src/expand.vue.js");e.default.install=t=>{e.default.name&&t.component(e.default.name,e.default)};const a=e.default;exports.MtExpand=a;
2
+ //# sourceMappingURL=index.js.map
3
+ require('./src/expand.css');
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../../packages/components/expand/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport Expand from './src/expand.vue';\r\n\r\nExpand.install = (app: App): void => {\r\n if (Expand.name) {\r\n app.component(Expand.name, Expand);\r\n }\r\n};\r\n\r\nexport const MtExpand = Expand;\r\n"],"names":["Expand","app","MtExpand"],"mappings":"uHAGAA,EAAAA,QAAO,QAAWC,GAAmB,CAC/BD,EAAAA,QAAO,MACLC,EAAA,UAAUD,UAAO,KAAMA,EAAAA,OAAM,CAErC,EAEO,MAAME,EAAWF,EAAAA"}
@@ -0,0 +1 @@
1
+ .mt-expand[data-v-60128610]{overflow:hidden}.mt-expand-transition[data-v-60128610]{transition:height var(--2863d212) ease-in-out}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./expand.vue2.js");;/* empty css */const t=require("../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-60128610"]]);exports.default=u;
2
+ //# sourceMappingURL=expand.vue.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"expand.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@vueuse/core"),d=require("lodash-es"),p=e.defineComponent({name:"MtExpand",__name:"expand",props:{open:{type:Boolean,default:!1},targetRange:{default:0},transitionTime:{default:200}},setup(i){e.useCssVars(t=>({"2863d212":u.value}));const n=i,u=e.computed(()=>`${n.transitionTime}ms`),o=e.ref(0),s=e.computed(()=>o.value>n.targetRange),l=e.computed(()=>({height:`${!s.value||n.open?o.value:n.targetRange}px`})),a=e.ref(),r=d.debounce(()=>{var t;o.value=(t=a.value)==null?void 0:t.offsetHeight},n.transitionTime);return c.useResizeObserver(a,r),e.onMounted(()=>{r()}),(t,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mt-expand",{"mt-expand-transition":!!t.transitionTime}]),style:e.normalizeStyle(l.value)},[e.createElementVNode("div",{ref_key:"contentRef",ref:a},[e.renderSlot(t.$slots,"default",{open:t.open,isOutRange:s.value},void 0,!0)],512)],6))}});exports.default=p;
2
+ //# sourceMappingURL=expand.vue2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"expand.vue2.js","sources":["../../../../../../packages/components/expand/src/expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandProps } from './expand.ts';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\ndefineOptions({ name: 'MtExpand' });\r\n\r\nconst props = withDefaults(defineProps<ExpandProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":"sXAQA,MAAMA,EAAQC,EAMRC,EAAqBC,EAAAA,SAAS,IAAM,GAAGH,EAAM,cAAc,IAAI,EAG/DI,EAAeC,MAAI,CAAC,EAGpBC,EAAaH,EAAAA,SAAS,IAAMC,EAAa,MAAQJ,EAAM,WAAW,EAGlEO,EAAeJ,EAAAA,SAAS,KAErB,CAAE,OAAQ,GADJ,CAACG,EAAW,OAASN,EAAM,KAAOI,EAAa,MAAQJ,EAAM,WAClD,IAAK,EAC9B,EAGKQ,EAAaH,EAAAA,IAAI,EAGjBI,EAAkBC,EAAAA,SAAS,IAAM,OACxBN,EAAA,OAAQO,EAAAH,EAAW,QAAX,YAAAG,EAAkB,YAAA,EACtCX,EAAM,cAAc,EAGvBY,OAAAA,EAAA,kBAAkBJ,EAAYC,CAAe,EAG7CI,EAAAA,UAAU,IAAM,CACEJ,EAAA,CAAA,CACjB"}
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/expand-box/index.js");exports.MtExpandBox=e.MtExpandBox;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/expand/index.js");exports.MtExpand=e.MtExpand;
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.1.1",
4
+ "version": "0.1.11",
5
5
  "description": "榫卯组件库",
6
6
  "author": "nixwai",
7
7
  "license": "ISC",
@@ -1,5 +1,5 @@
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, {
1
+ export declare const MtExpand: {
2
+ new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./src/expand').ExpandProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
3
3
  open: boolean;
4
4
  targetRange: number;
5
5
  transitionTime: number;
@@ -10,7 +10,7 @@ export declare const MtExpandBox: {
10
10
  C: {};
11
11
  M: {};
12
12
  Defaults: {};
13
- }, Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, {
13
+ }, Readonly<import('./src/expand').ExpandProps> & Readonly<{}>, {}, {}, {}, {}, {
14
14
  open: boolean;
15
15
  targetRange: number;
16
16
  transitionTime: number;
@@ -18,7 +18,7 @@ export declare const MtExpandBox: {
18
18
  __isFragment?: never;
19
19
  __isTeleport?: never;
20
20
  __isSuspense?: never;
21
- } & import('vue').ComponentOptionsBase<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
21
+ } & import('vue').ComponentOptionsBase<Readonly<import('./src/expand').ExpandProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
22
22
  open: boolean;
23
23
  targetRange: number;
24
24
  transitionTime: number;
@@ -1,4 +1,4 @@
1
- export interface ExpandBoxProps {
1
+ export interface ExpandProps {
2
2
  /** 控制是否展开 */
3
3
  open?: boolean;
4
4
  /** 达到可调整的目标范围(px) */
@@ -1,4 +1,4 @@
1
- import { ExpandBoxProps } from './expand-box';
1
+ import { ExpandProps } from './expand.ts';
2
2
  declare function __VLS_template(): {
3
3
  slots: {
4
4
  default?(_: {
@@ -12,7 +12,7 @@ declare function __VLS_template(): {
12
12
  attrs: Partial<{}>;
13
13
  };
14
14
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
15
- declare const __VLS_component: import('vue').DefineComponent<ExpandBoxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ExpandBoxProps> & Readonly<{}>, {
15
+ declare const __VLS_component: import('vue').DefineComponent<ExpandProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ExpandProps> & Readonly<{}>, {
16
16
  open: boolean;
17
17
  targetRange: number;
18
18
  transitionTime: number;
package/types/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from './expand-box';
1
+ export * from './expand';
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../../../../packages/components/expand-box/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport ExpandBox from './src/expand-box.vue';\r\n\r\nExpandBox.install = (app: App): void => {\r\n if (ExpandBox.name) {\r\n app.component(ExpandBox.name, ExpandBox);\r\n }\r\n};\r\n\r\nexport const MtExpandBox = ExpandBox;\r\n"],"names":["ExpandBox","app","MtExpandBox"],"mappings":";AAGAA,EAAU,UAAU,CAACC,MAAmB;AACtC,EAAID,EAAU,QACRC,EAAA,UAAUD,EAAU,MAAMA,CAAS;AAE3C;AAEO,MAAME,IAAcF;"}
@@ -1 +0,0 @@
1
- .mt-expand-box[data-v-d3ac876b]{overflow:hidden}.mt-expand-transition[data-v-d3ac876b]{transition:height var(--01836c4a) ease-in-out}
@@ -1,8 +0,0 @@
1
- import o from "./expand-box.vue2.mjs";
2
- /* empty css */
3
- import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
4
- const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d3ac876b"]]);
5
- export {
6
- m as default
7
- };
8
- //# sourceMappingURL=expand-box.vue.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"expand-box.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"expand-box.vue2.mjs","sources":["../../../../../../packages/components/expand-box/src/expand-box.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandBoxProps } from './expand-box';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\ndefineOptions({ name: 'MtExpandBox' });\r\n\r\nconst props = withDefaults(defineProps<ExpandBoxProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand-box\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand-box {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":";;;;;;;;;;;;;;;AAQA,UAAMA,IAAQC,GAMRC,IAAqBC,EAAS,MAAM,GAAGH,EAAM,cAAc,IAAI,GAG/DI,IAAeC,EAAI,CAAC,GAGpBC,IAAaH,EAAS,MAAMC,EAAa,QAAQJ,EAAM,WAAW,GAGlEO,IAAeJ,EAAS,OAErB,EAAE,QAAQ,GADJ,CAACG,EAAW,SAASN,EAAM,OAAOI,EAAa,QAAQJ,EAAM,WAClD,KAAK,EAC9B,GAGKQ,IAAaH,EAAI,GAGjBI,IAAkBC,EAAS,MAAM;;AACxB,MAAAN,EAAA,SAAQO,IAAAH,EAAW,UAAX,gBAAAG,EAAkB;AAAA,IAAA,GACtCX,EAAM,cAAc;AAGvB,WAAAY,EAAkBJ,GAAYC,CAAe,GAG7CI,EAAU,MAAM;AACE,MAAAJ,EAAA;AAAA,IAAA,CACjB;;;;;;;;;;;;;;;;"}
@@ -1,3 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./src/expand-box.vue.js");e.default.install=t=>{e.default.name&&t.component(e.default.name,e.default)};const a=e.default;exports.MtExpandBox=a;
2
- //# sourceMappingURL=index.js.map
3
- require('./src/expand-box.css');
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../packages/components/expand-box/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport ExpandBox from './src/expand-box.vue';\r\n\r\nExpandBox.install = (app: App): void => {\r\n if (ExpandBox.name) {\r\n app.component(ExpandBox.name, ExpandBox);\r\n }\r\n};\r\n\r\nexport const MtExpandBox = ExpandBox;\r\n"],"names":["ExpandBox","app","MtExpandBox"],"mappings":"2HAGAA,EAAAA,QAAU,QAAWC,GAAmB,CAClCD,EAAAA,QAAU,MACRC,EAAA,UAAUD,UAAU,KAAMA,EAAAA,OAAS,CAE3C,EAEO,MAAME,EAAcF,EAAAA"}
@@ -1 +0,0 @@
1
- .mt-expand-box[data-v-d3ac876b]{overflow:hidden}.mt-expand-transition[data-v-d3ac876b]{transition:height var(--01836c4a) ease-in-out}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./expand-box.vue2.js");;/* empty css */const t=require("../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-d3ac876b"]]);exports.default=u;
2
- //# sourceMappingURL=expand-box.vue.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"expand-box.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@vueuse/core"),d=require("lodash-es"),p=e.defineComponent({name:"MtExpandBox",__name:"expand-box",props:{open:{type:Boolean,default:!1},targetRange:{default:0},transitionTime:{default:200}},setup(i){e.useCssVars(t=>({"01836c4a":u.value}));const n=i,u=e.computed(()=>`${n.transitionTime}ms`),o=e.ref(0),s=e.computed(()=>o.value>n.targetRange),l=e.computed(()=>({height:`${!s.value||n.open?o.value:n.targetRange}px`})),a=e.ref(),r=d.debounce(()=>{var t;o.value=(t=a.value)==null?void 0:t.offsetHeight},n.transitionTime);return c.useResizeObserver(a,r),e.onMounted(()=>{r()}),(t,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mt-expand-box",{"mt-expand-transition":!!t.transitionTime}]),style:e.normalizeStyle(l.value)},[e.createElementVNode("div",{ref_key:"contentRef",ref:a},[e.renderSlot(t.$slots,"default",{open:t.open,isOutRange:s.value},void 0,!0)],512)],6))}});exports.default=p;
2
- //# sourceMappingURL=expand-box.vue2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"expand-box.vue2.js","sources":["../../../../../../packages/components/expand-box/src/expand-box.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandBoxProps } from './expand-box';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\ndefineOptions({ name: 'MtExpandBox' });\r\n\r\nconst props = withDefaults(defineProps<ExpandBoxProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand-box\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand-box {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":"6XAQA,MAAMA,EAAQC,EAMRC,EAAqBC,EAAAA,SAAS,IAAM,GAAGH,EAAM,cAAc,IAAI,EAG/DI,EAAeC,MAAI,CAAC,EAGpBC,EAAaH,EAAAA,SAAS,IAAMC,EAAa,MAAQJ,EAAM,WAAW,EAGlEO,EAAeJ,EAAAA,SAAS,KAErB,CAAE,OAAQ,GADJ,CAACG,EAAW,OAASN,EAAM,KAAOI,EAAa,MAAQJ,EAAM,WAClD,IAAK,EAC9B,EAGKQ,EAAaH,EAAAA,IAAI,EAGjBI,EAAkBC,EAAAA,SAAS,IAAM,OACxBN,EAAA,OAAQO,EAAAH,EAAW,QAAX,YAAAG,EAAkB,YAAA,EACtCX,EAAM,cAAc,EAGvBY,OAAAA,EAAA,kBAAkBJ,EAAYC,CAAe,EAG7CI,EAAAA,UAAU,IAAM,CACEJ,EAAA,CAAA,CACjB"}