@xto/layout 1.0.7 → 1.1.0

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 (5) hide show
  1. package/es/index.mjs +135 -79
  2. package/es/style.css +1 -1
  3. package/lib/index.cjs +1 -1
  4. package/lib/style.css +1 -1
  5. package/package.json +2 -2
package/es/index.mjs CHANGED
@@ -1,94 +1,94 @@
1
- import { defineComponent as i, computed as l, provide as w, openBlock as c, createElementBlock as d, normalizeClass as p, renderSlot as u, normalizeStyle as f, unref as g, inject as _, createBlock as y, resolveDynamicComponent as x, withCtx as v } from "vue";
2
- import { useNamespace as h } from "@xto/core";
3
- const X = /* @__PURE__ */ i({
1
+ import { defineComponent as m, computed as u, provide as E, openBlock as h, createElementBlock as v, normalizeClass as c, renderSlot as l, normalizeStyle as p, unref as d, inject as b, createBlock as C, resolveDynamicComponent as R, withCtx as X, ref as x, createElementVNode as z } from "vue";
2
+ import { useNamespace as $ } from "@xto/core";
3
+ const M = /* @__PURE__ */ m({
4
4
  name: "XContainer",
5
5
  __name: "index",
6
6
  props: {
7
7
  direction: { default: "vertical" }
8
8
  },
9
- setup(a) {
10
- const t = a, e = h("container"), r = l(() => [
11
- e.b(),
12
- e.is("flex", t.direction === "vertical")
9
+ setup(i) {
10
+ const e = i, t = $("container"), o = u(() => [
11
+ t.b(),
12
+ t.is("flex", e.direction === "vertical")
13
13
  ]);
14
- return w("container", {
15
- direction: t.direction
16
- }), (o, s) => (c(), d("div", {
17
- class: p(r.value)
14
+ return E("container", {
15
+ direction: e.direction
16
+ }), (a, s) => (h(), v("div", {
17
+ class: c(o.value)
18
18
  }, [
19
- u(o.$slots, "default")
19
+ l(a.$slots, "default")
20
20
  ], 2));
21
21
  }
22
- }), A = /* @__PURE__ */ i({
22
+ }), j = /* @__PURE__ */ m({
23
23
  name: "XHeader",
24
24
  __name: "index",
25
25
  props: {
26
26
  height: { default: 60 }
27
27
  },
28
- setup(a) {
29
- const t = a, e = h("header"), r = l(() => ({
30
- height: typeof t.height == "number" ? `${t.height}px` : t.height
28
+ setup(i) {
29
+ const e = i, t = $("header"), o = u(() => ({
30
+ height: typeof e.height == "number" ? `${e.height}px` : e.height
31
31
  }));
32
- return (o, s) => (c(), d("header", {
33
- class: p(g(e).b()),
34
- style: f(r.value)
32
+ return (a, s) => (h(), v("header", {
33
+ class: c(d(t).b()),
34
+ style: p(o.value)
35
35
  }, [
36
- u(o.$slots, "default")
36
+ l(a.$slots, "default")
37
37
  ], 6));
38
38
  }
39
- }), R = /* @__PURE__ */ i({
39
+ }), k = /* @__PURE__ */ m({
40
40
  name: "XAside",
41
41
  __name: "index",
42
42
  props: {
43
43
  width: { default: 200 }
44
44
  },
45
- setup(a) {
46
- const t = a, e = h("aside"), r = l(() => ({
47
- width: typeof t.width == "number" ? `${t.width}px` : t.width
45
+ setup(i) {
46
+ const e = i, t = $("aside"), o = u(() => ({
47
+ width: typeof e.width == "number" ? `${e.width}px` : e.width
48
48
  }));
49
- return (o, s) => (c(), d("aside", {
50
- class: p(g(e).b()),
51
- style: f(r.value)
49
+ return (a, s) => (h(), v("aside", {
50
+ class: c(d(t).b()),
51
+ style: p(o.value)
52
52
  }, [
53
- u(o.$slots, "default")
53
+ l(a.$slots, "default")
54
54
  ], 6));
55
55
  }
56
- }), j = /* @__PURE__ */ i({
56
+ }), V = /* @__PURE__ */ m({
57
57
  name: "XMain",
58
58
  __name: "index",
59
59
  props: {
60
60
  padding: { default: 20 }
61
61
  },
62
- setup(a) {
63
- const t = a, e = _("container", { direction: "vertical" }), r = (e == null ? void 0 : e.direction) || "vertical", o = l(() => ({
64
- padding: typeof t.padding == "number" ? `${t.padding}px` : t.padding,
65
- flex: r === "vertical" ? 1 : "auto"
62
+ setup(i) {
63
+ const e = i, t = b("container", { direction: "vertical" }), o = (t == null ? void 0 : t.direction) || "vertical", a = u(() => ({
64
+ padding: typeof e.padding == "number" ? `${e.padding}px` : e.padding,
65
+ flex: o === "vertical" ? 1 : "auto"
66
66
  }));
67
- return (s, n) => (c(), d("main", {
67
+ return (s, n) => (h(), v("main", {
68
68
  class: "x-main",
69
- style: f(o.value)
69
+ style: p(a.value)
70
70
  }, [
71
- u(s.$slots, "default")
71
+ l(s.$slots, "default")
72
72
  ], 4));
73
73
  }
74
- }), L = /* @__PURE__ */ i({
74
+ }), F = /* @__PURE__ */ m({
75
75
  name: "XFooter",
76
76
  __name: "index",
77
77
  props: {
78
78
  height: { default: 60 }
79
79
  },
80
- setup(a) {
81
- const t = a, e = h("footer"), r = l(() => ({
82
- height: typeof t.height == "number" ? `${t.height}px` : t.height
80
+ setup(i) {
81
+ const e = i, t = $("footer"), o = u(() => ({
82
+ height: typeof e.height == "number" ? `${e.height}px` : e.height
83
83
  }));
84
- return (o, s) => (c(), d("footer", {
85
- class: p(g(e).b()),
86
- style: f(r.value)
84
+ return (a, s) => (h(), v("footer", {
85
+ class: c(d(t).b()),
86
+ style: p(o.value)
87
87
  }, [
88
- u(o.$slots, "default")
88
+ l(a.$slots, "default")
89
89
  ], 6));
90
90
  }
91
- }), k = /* @__PURE__ */ i({
91
+ }), H = /* @__PURE__ */ m({
92
92
  name: "XRow",
93
93
  __name: "Row",
94
94
  props: {
@@ -97,9 +97,9 @@ const X = /* @__PURE__ */ i({
97
97
  align: { default: "top" },
98
98
  tag: { default: "div" }
99
99
  },
100
- setup(a) {
101
- const t = a, e = h("row"), r = l(() => {
102
- const s = t.gutter;
100
+ setup(i) {
101
+ const e = i, t = $("row"), o = u(() => {
102
+ const s = e.gutter;
103
103
  return Array.isArray(s) ? {
104
104
  marginLeft: `-${s[0] / 2}px`,
105
105
  marginRight: `-${s[0] / 2}px`,
@@ -108,22 +108,22 @@ const X = /* @__PURE__ */ i({
108
108
  marginLeft: `-${s / 2}px`,
109
109
  marginRight: `-${s / 2}px`
110
110
  } : {};
111
- }), o = l(() => [
112
- e.b(),
113
- e.is(`justify-${t.justify}`),
114
- e.is(`align-${t.align}`)
111
+ }), a = u(() => [
112
+ t.b(),
113
+ t.is(`justify-${e.justify}`),
114
+ t.is(`align-${e.align}`)
115
115
  ]);
116
- return (s, n) => (c(), y(x(a.tag), {
117
- class: p(o.value),
118
- style: f(r.value)
116
+ return (s, n) => (h(), C(R(i.tag), {
117
+ class: c(a.value),
118
+ style: p(o.value)
119
119
  }, {
120
- default: v(() => [
121
- u(s.$slots, "default")
120
+ default: X(() => [
121
+ l(s.$slots, "default")
122
122
  ]),
123
123
  _: 3
124
124
  }, 8, ["class", "style"]));
125
125
  }
126
- }), B = /* @__PURE__ */ i({
126
+ }), N = /* @__PURE__ */ m({
127
127
  name: "XCol",
128
128
  __name: "Col",
129
129
  props: {
@@ -133,35 +133,91 @@ const X = /* @__PURE__ */ i({
133
133
  pull: { default: 0 },
134
134
  tag: { default: "div" }
135
135
  },
136
- setup(a) {
137
- const t = a, e = _("x-row", { gutter: 0 }), r = (e == null ? void 0 : e.gutter) || 0, o = l(() => {
138
- const n = {}, m = Array.isArray(r) ? r[0] : r;
139
- if (m > 0) {
140
- const $ = m / 2;
141
- n.paddingLeft = `${$}px`, n.paddingRight = `${$}px`;
136
+ setup(i) {
137
+ const e = i, t = b("x-row", { gutter: 0 }), o = (t == null ? void 0 : t.gutter) || 0, a = u(() => {
138
+ const n = {}, f = Array.isArray(o) ? o[0] : o;
139
+ if (f > 0) {
140
+ const _ = f / 2;
141
+ n.paddingLeft = `${_}px`, n.paddingRight = `${_}px`;
142
142
  }
143
- return t.span && (n.flex = `0 0 ${t.span / 24 * 100}%`), t.offset && (n.marginLeft = `${t.offset / 24 * 100}%`), t.push && (n.left = `${t.push / 24 * 100}%`), t.pull && (n.right = `${t.pull / 24 * 100}%`), n;
144
- }), s = l(() => {
143
+ return e.span && (n.flex = `0 0 ${e.span / 24 * 100}%`), e.offset && (n.marginLeft = `${e.offset / 24 * 100}%`), e.push && (n.left = `${e.push / 24 * 100}%`), e.pull && (n.right = `${e.pull / 24 * 100}%`), n;
144
+ }), s = u(() => {
145
145
  const n = [];
146
- return t.span && n.push(`x-col-${t.span}`), t.offset && n.push(`x-col-offset-${t.offset}`), t.push && n.push(`x-col-push-${t.push}`), t.pull && n.push(`x-col-pull-${t.pull}`), n;
146
+ return e.span && n.push(`x-col-${e.span}`), e.offset && n.push(`x-col-offset-${e.offset}`), e.push && n.push(`x-col-push-${e.push}`), e.pull && n.push(`x-col-pull-${e.pull}`), n;
147
147
  });
148
- return (n, m) => (c(), y(x(a.tag), {
149
- class: p(s.value),
150
- style: f(o.value)
148
+ return (n, f) => (h(), C(R(i.tag), {
149
+ class: c(s.value),
150
+ style: p(a.value)
151
151
  }, {
152
- default: v(() => [
153
- u(n.$slots, "default")
152
+ default: X(() => [
153
+ l(n.$slots, "default")
154
154
  ]),
155
155
  _: 3
156
156
  }, 8, ["class", "style"]));
157
157
  }
158
+ }), P = /* @__PURE__ */ m({
159
+ name: "XSplit",
160
+ __name: "index",
161
+ props: {
162
+ defaultSize: { default: 0.5 },
163
+ minSize: { default: 0.1 },
164
+ maxSize: { default: 0.9 },
165
+ direction: { default: "horizontal" },
166
+ disabled: { type: Boolean, default: !1 }
167
+ },
168
+ emits: ["resize"],
169
+ setup(i, { emit: e }) {
170
+ const t = i, o = e, a = $("split"), s = x(), n = x(t.defaultSize), f = x(!1), _ = u(() => {
171
+ const r = `${n.value * 100}%`;
172
+ return t.direction === "horizontal" ? { width: r } : { height: r };
173
+ }), L = u(() => {
174
+ const r = `${(1 - n.value) * 100}%`;
175
+ return t.direction === "horizontal" ? { width: r } : { height: r };
176
+ }), A = (r) => {
177
+ t.disabled || (f.value = !0, document.addEventListener("mousemove", w), document.addEventListener("mouseup", S));
178
+ }, w = (r) => {
179
+ if (!f.value || !s.value) return;
180
+ const y = s.value.getBoundingClientRect();
181
+ let g;
182
+ t.direction === "horizontal" ? g = (r.clientX - y.left) / y.width : g = (r.clientY - y.top) / y.height, g = Math.max(t.minSize, Math.min(t.maxSize, g)), n.value = g, o("resize", g);
183
+ }, S = () => {
184
+ f.value = !1, document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", S);
185
+ };
186
+ return (r, y) => (h(), v("div", {
187
+ ref_key: "containerRef",
188
+ ref: s,
189
+ class: c([d(a).b(), d(a).m(i.direction)])
190
+ }, [
191
+ z("div", {
192
+ class: c(d(a).e("panel")),
193
+ style: p(_.value)
194
+ }, [
195
+ l(r.$slots, "left", {}, () => [
196
+ l(r.$slots, "first")
197
+ ])
198
+ ], 6),
199
+ z("div", {
200
+ class: c([d(a).e("divider"), d(a).is("dragging", f.value)]),
201
+ onMousedown: A
202
+ }, null, 34),
203
+ z("div", {
204
+ class: c(d(a).e("panel")),
205
+ style: p(L.value)
206
+ }, [
207
+ l(r.$slots, "right", {}, () => [
208
+ l(r.$slots, "second")
209
+ ])
210
+ ], 6)
211
+ ], 2));
212
+ }
158
213
  });
159
214
  export {
160
- R as Aside,
161
- B as Col,
162
- X as Container,
163
- L as Footer,
164
- A as Header,
165
- j as Main,
166
- k as Row
215
+ k as Aside,
216
+ N as Col,
217
+ M as Container,
218
+ F as Footer,
219
+ j as Header,
220
+ V as Main,
221
+ H as Row,
222
+ P as Split
167
223
  };
package/es/style.css CHANGED
@@ -1 +1 @@
1
- .x-container{display:flex;flex-direction:column;height:100%;width:100%}.x-container.is-flex{flex-direction:column}.x-header{flex-shrink:0;box-sizing:border-box;padding:0 20px;background-color:#fff;border-bottom:1px solid #dcdfe6}.x-aside{flex-shrink:0;box-sizing:border-box;overflow:auto;background-color:#fff;border-right:1px solid #dcdfe6}.x-main{flex:1;box-sizing:border-box;overflow:auto;background-color:#f5f7fa}.x-footer{flex-shrink:0;box-sizing:border-box;padding:0 20px;background-color:#fff;border-top:1px solid #dcdfe6}.x-row{position:relative;box-sizing:border-box}.x-row:before,.x-row:after{display:table;content:""}.x-row:after{clear:both}.x-row.is-justify-start{justify-content:flex-start}.x-row.is-justify-end{justify-content:flex-end}.x-row.is-justify-center{justify-content:center}.x-row.is-justify-space-around{justify-content:space-around}.x-row.is-justify-space-between{justify-content:space-between}.x-row.is-justify-space-evenly{justify-content:space-evenly}.x-row.is-align-top{align-items:flex-start}.x-row.is-align-middle{align-items:center}.x-row.is-align-bottom{align-items:flex-end}[class*=x-col-]{float:left;box-sizing:border-box}.x-col-1{width:4.1666666667%}.x-col-offset-1{margin-left:4.1666666667%}.x-col-pull-1{position:relative;right:4.1666666667%}.x-col-push-1{position:relative;left:4.1666666667%}.x-col-2{width:8.3333333333%}.x-col-offset-2{margin-left:8.3333333333%}.x-col-pull-2{position:relative;right:8.3333333333%}.x-col-push-2{position:relative;left:8.3333333333%}.x-col-3{width:12.5%}.x-col-offset-3{margin-left:12.5%}.x-col-pull-3{position:relative;right:12.5%}.x-col-push-3{position:relative;left:12.5%}.x-col-4{width:16.6666666667%}.x-col-offset-4{margin-left:16.6666666667%}.x-col-pull-4{position:relative;right:16.6666666667%}.x-col-push-4{position:relative;left:16.6666666667%}.x-col-5{width:20.8333333333%}.x-col-offset-5{margin-left:20.8333333333%}.x-col-pull-5{position:relative;right:20.8333333333%}.x-col-push-5{position:relative;left:20.8333333333%}.x-col-6{width:25%}.x-col-offset-6{margin-left:25%}.x-col-pull-6{position:relative;right:25%}.x-col-push-6{position:relative;left:25%}.x-col-7{width:29.1666666667%}.x-col-offset-7{margin-left:29.1666666667%}.x-col-pull-7{position:relative;right:29.1666666667%}.x-col-push-7{position:relative;left:29.1666666667%}.x-col-8{width:33.3333333333%}.x-col-offset-8{margin-left:33.3333333333%}.x-col-pull-8{position:relative;right:33.3333333333%}.x-col-push-8{position:relative;left:33.3333333333%}.x-col-9{width:37.5%}.x-col-offset-9{margin-left:37.5%}.x-col-pull-9{position:relative;right:37.5%}.x-col-push-9{position:relative;left:37.5%}.x-col-10{width:41.6666666667%}.x-col-offset-10{margin-left:41.6666666667%}.x-col-pull-10{position:relative;right:41.6666666667%}.x-col-push-10{position:relative;left:41.6666666667%}.x-col-11{width:45.8333333333%}.x-col-offset-11{margin-left:45.8333333333%}.x-col-pull-11{position:relative;right:45.8333333333%}.x-col-push-11{position:relative;left:45.8333333333%}.x-col-12{width:50%}.x-col-offset-12{margin-left:50%}.x-col-pull-12{position:relative;right:50%}.x-col-push-12{position:relative;left:50%}.x-col-13{width:54.1666666667%}.x-col-offset-13{margin-left:54.1666666667%}.x-col-pull-13{position:relative;right:54.1666666667%}.x-col-push-13{position:relative;left:54.1666666667%}.x-col-14{width:58.3333333333%}.x-col-offset-14{margin-left:58.3333333333%}.x-col-pull-14{position:relative;right:58.3333333333%}.x-col-push-14{position:relative;left:58.3333333333%}.x-col-15{width:62.5%}.x-col-offset-15{margin-left:62.5%}.x-col-pull-15{position:relative;right:62.5%}.x-col-push-15{position:relative;left:62.5%}.x-col-16{width:66.6666666667%}.x-col-offset-16{margin-left:66.6666666667%}.x-col-pull-16{position:relative;right:66.6666666667%}.x-col-push-16{position:relative;left:66.6666666667%}.x-col-17{width:70.8333333333%}.x-col-offset-17{margin-left:70.8333333333%}.x-col-pull-17{position:relative;right:70.8333333333%}.x-col-push-17{position:relative;left:70.8333333333%}.x-col-18{width:75%}.x-col-offset-18{margin-left:75%}.x-col-pull-18{position:relative;right:75%}.x-col-push-18{position:relative;left:75%}.x-col-19{width:79.1666666667%}.x-col-offset-19{margin-left:79.1666666667%}.x-col-pull-19{position:relative;right:79.1666666667%}.x-col-push-19{position:relative;left:79.1666666667%}.x-col-20{width:83.3333333333%}.x-col-offset-20{margin-left:83.3333333333%}.x-col-pull-20{position:relative;right:83.3333333333%}.x-col-push-20{position:relative;left:83.3333333333%}.x-col-21{width:87.5%}.x-col-offset-21{margin-left:87.5%}.x-col-pull-21{position:relative;right:87.5%}.x-col-push-21{position:relative;left:87.5%}.x-col-22{width:91.6666666667%}.x-col-offset-22{margin-left:91.6666666667%}.x-col-pull-22{position:relative;right:91.6666666667%}.x-col-push-22{position:relative;left:91.6666666667%}.x-col-23{width:95.8333333333%}.x-col-offset-23{margin-left:95.8333333333%}.x-col-pull-23{position:relative;right:95.8333333333%}.x-col-push-23{position:relative;left:95.8333333333%}.x-col-24{width:100%}.x-col-offset-24{margin-left:100%}.x-col-pull-24{position:relative;right:100%}.x-col-push-24{position:relative;left:100%}
1
+ .x-container{display:flex;flex-direction:column;height:100%;width:100%}.x-container.is-flex{flex-direction:column}.x-header{flex-shrink:0;box-sizing:border-box;padding:0 20px;background-color:#fff;border-bottom:1px solid #dcdfe6}.x-aside{flex-shrink:0;box-sizing:border-box;overflow:auto;background-color:#fff;border-right:1px solid #dcdfe6}.x-main{flex:1;box-sizing:border-box;overflow:auto;background-color:#f5f7fa}.x-footer{flex-shrink:0;box-sizing:border-box;padding:0 20px;background-color:#fff;border-top:1px solid #dcdfe6}.x-row{position:relative;box-sizing:border-box}.x-row:before,.x-row:after{display:table;content:""}.x-row:after{clear:both}.x-row.is-justify-start{justify-content:flex-start}.x-row.is-justify-end{justify-content:flex-end}.x-row.is-justify-center{justify-content:center}.x-row.is-justify-space-around{justify-content:space-around}.x-row.is-justify-space-between{justify-content:space-between}.x-row.is-justify-space-evenly{justify-content:space-evenly}.x-row.is-align-top{align-items:flex-start}.x-row.is-align-middle{align-items:center}.x-row.is-align-bottom{align-items:flex-end}[class*=x-col-]{float:left;box-sizing:border-box}.x-col-1{width:4.1666666667%}.x-col-offset-1{margin-left:4.1666666667%}.x-col-pull-1{position:relative;right:4.1666666667%}.x-col-push-1{position:relative;left:4.1666666667%}.x-col-2{width:8.3333333333%}.x-col-offset-2{margin-left:8.3333333333%}.x-col-pull-2{position:relative;right:8.3333333333%}.x-col-push-2{position:relative;left:8.3333333333%}.x-col-3{width:12.5%}.x-col-offset-3{margin-left:12.5%}.x-col-pull-3{position:relative;right:12.5%}.x-col-push-3{position:relative;left:12.5%}.x-col-4{width:16.6666666667%}.x-col-offset-4{margin-left:16.6666666667%}.x-col-pull-4{position:relative;right:16.6666666667%}.x-col-push-4{position:relative;left:16.6666666667%}.x-col-5{width:20.8333333333%}.x-col-offset-5{margin-left:20.8333333333%}.x-col-pull-5{position:relative;right:20.8333333333%}.x-col-push-5{position:relative;left:20.8333333333%}.x-col-6{width:25%}.x-col-offset-6{margin-left:25%}.x-col-pull-6{position:relative;right:25%}.x-col-push-6{position:relative;left:25%}.x-col-7{width:29.1666666667%}.x-col-offset-7{margin-left:29.1666666667%}.x-col-pull-7{position:relative;right:29.1666666667%}.x-col-push-7{position:relative;left:29.1666666667%}.x-col-8{width:33.3333333333%}.x-col-offset-8{margin-left:33.3333333333%}.x-col-pull-8{position:relative;right:33.3333333333%}.x-col-push-8{position:relative;left:33.3333333333%}.x-col-9{width:37.5%}.x-col-offset-9{margin-left:37.5%}.x-col-pull-9{position:relative;right:37.5%}.x-col-push-9{position:relative;left:37.5%}.x-col-10{width:41.6666666667%}.x-col-offset-10{margin-left:41.6666666667%}.x-col-pull-10{position:relative;right:41.6666666667%}.x-col-push-10{position:relative;left:41.6666666667%}.x-col-11{width:45.8333333333%}.x-col-offset-11{margin-left:45.8333333333%}.x-col-pull-11{position:relative;right:45.8333333333%}.x-col-push-11{position:relative;left:45.8333333333%}.x-col-12{width:50%}.x-col-offset-12{margin-left:50%}.x-col-pull-12{position:relative;right:50%}.x-col-push-12{position:relative;left:50%}.x-col-13{width:54.1666666667%}.x-col-offset-13{margin-left:54.1666666667%}.x-col-pull-13{position:relative;right:54.1666666667%}.x-col-push-13{position:relative;left:54.1666666667%}.x-col-14{width:58.3333333333%}.x-col-offset-14{margin-left:58.3333333333%}.x-col-pull-14{position:relative;right:58.3333333333%}.x-col-push-14{position:relative;left:58.3333333333%}.x-col-15{width:62.5%}.x-col-offset-15{margin-left:62.5%}.x-col-pull-15{position:relative;right:62.5%}.x-col-push-15{position:relative;left:62.5%}.x-col-16{width:66.6666666667%}.x-col-offset-16{margin-left:66.6666666667%}.x-col-pull-16{position:relative;right:66.6666666667%}.x-col-push-16{position:relative;left:66.6666666667%}.x-col-17{width:70.8333333333%}.x-col-offset-17{margin-left:70.8333333333%}.x-col-pull-17{position:relative;right:70.8333333333%}.x-col-push-17{position:relative;left:70.8333333333%}.x-col-18{width:75%}.x-col-offset-18{margin-left:75%}.x-col-pull-18{position:relative;right:75%}.x-col-push-18{position:relative;left:75%}.x-col-19{width:79.1666666667%}.x-col-offset-19{margin-left:79.1666666667%}.x-col-pull-19{position:relative;right:79.1666666667%}.x-col-push-19{position:relative;left:79.1666666667%}.x-col-20{width:83.3333333333%}.x-col-offset-20{margin-left:83.3333333333%}.x-col-pull-20{position:relative;right:83.3333333333%}.x-col-push-20{position:relative;left:83.3333333333%}.x-col-21{width:87.5%}.x-col-offset-21{margin-left:87.5%}.x-col-pull-21{position:relative;right:87.5%}.x-col-push-21{position:relative;left:87.5%}.x-col-22{width:91.6666666667%}.x-col-offset-22{margin-left:91.6666666667%}.x-col-pull-22{position:relative;right:91.6666666667%}.x-col-push-22{position:relative;left:91.6666666667%}.x-col-23{width:95.8333333333%}.x-col-offset-23{margin-left:95.8333333333%}.x-col-pull-23{position:relative;right:95.8333333333%}.x-col-push-23{position:relative;left:95.8333333333%}.x-col-24{width:100%}.x-col-offset-24{margin-left:100%}.x-col-pull-24{position:relative;right:100%}.x-col-push-24{position:relative;left:100%}.x-split{display:flex;width:100%;height:100%}.x-split--horizontal{flex-direction:row}.x-split--vertical{flex-direction:column}.x-split__panel{overflow:hidden}.x-split__divider{flex-shrink:0;background-color:var(--color-border, #dcdfe6);cursor:col-resize;transition:background-color .2s}.x-split__divider:hover,.x-split__divider.is-dragging{background-color:var(--color-primary, #409eff)}.x-split--horizontal .x-split__divider{width:1px;cursor:col-resize}.x-split--vertical .x-split__divider{height:1px;cursor:row-resize}
package/lib/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=require("@xto/core"),p=e.defineComponent({name:"XContainer",__name:"index",props:{direction:{default:"vertical"}},setup(a){const t=a,n=c.useNamespace("container"),l=e.computed(()=>[n.b(),n.is("flex",t.direction==="vertical")]);return e.provide("container",{direction:t.direction}),(r,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(l.value)},[e.renderSlot(r.$slots,"default")],2))}}),d=e.defineComponent({name:"XHeader",__name:"index",props:{height:{default:60}},setup(a){const t=a,n=c.useNamespace("header"),l=e.computed(()=>({height:typeof t.height=="number"?`${t.height}px`:t.height}));return(r,s)=>(e.openBlock(),e.createElementBlock("header",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(l.value)},[e.renderSlot(r.$slots,"default")],6))}}),f=e.defineComponent({name:"XAside",__name:"index",props:{width:{default:200}},setup(a){const t=a,n=c.useNamespace("aside"),l=e.computed(()=>({width:typeof t.width=="number"?`${t.width}px`:t.width}));return(r,s)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(l.value)},[e.renderSlot(r.$slots,"default")],6))}}),m=e.defineComponent({name:"XMain",__name:"index",props:{padding:{default:20}},setup(a){const t=a,n=e.inject("container",{direction:"vertical"}),l=(n==null?void 0:n.direction)||"vertical",r=e.computed(()=>({padding:typeof t.padding=="number"?`${t.padding}px`:t.padding,flex:l==="vertical"?1:"auto"}));return(s,o)=>(e.openBlock(),e.createElementBlock("main",{class:"x-main",style:e.normalizeStyle(r.value)},[e.renderSlot(s.$slots,"default")],4))}}),h=e.defineComponent({name:"XFooter",__name:"index",props:{height:{default:60}},setup(a){const t=a,n=c.useNamespace("footer"),l=e.computed(()=>({height:typeof t.height=="number"?`${t.height}px`:t.height}));return(r,s)=>(e.openBlock(),e.createElementBlock("footer",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(l.value)},[e.renderSlot(r.$slots,"default")],6))}}),g=e.defineComponent({name:"XRow",__name:"Row",props:{gutter:{default:0},justify:{default:"start"},align:{default:"top"},tag:{default:"div"}},setup(a){const t=a,n=c.useNamespace("row"),l=e.computed(()=>{const s=t.gutter;return Array.isArray(s)?{marginLeft:`-${s[0]/2}px`,marginRight:`-${s[0]/2}px`,rowGap:`${s[1]}px`}:s>0?{marginLeft:`-${s/2}px`,marginRight:`-${s/2}px`}:{}}),r=e.computed(()=>[n.b(),n.is(`justify-${t.justify}`),n.is(`align-${t.align}`)]);return(s,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.tag),{class:e.normalizeClass(r.value),style:e.normalizeStyle(l.value)},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["class","style"]))}}),y=e.defineComponent({name:"XCol",__name:"Col",props:{span:{default:24},offset:{default:0},push:{default:0},pull:{default:0},tag:{default:"div"}},setup(a){const t=a,n=e.inject("x-row",{gutter:0}),l=(n==null?void 0:n.gutter)||0,r=e.computed(()=>{const o={},i=Array.isArray(l)?l[0]:l;if(i>0){const u=i/2;o.paddingLeft=`${u}px`,o.paddingRight=`${u}px`}return t.span&&(o.flex=`0 0 ${t.span/24*100}%`),t.offset&&(o.marginLeft=`${t.offset/24*100}%`),t.push&&(o.left=`${t.push/24*100}%`),t.pull&&(o.right=`${t.pull/24*100}%`),o}),s=e.computed(()=>{const o=[];return t.span&&o.push(`x-col-${t.span}`),t.offset&&o.push(`x-col-offset-${t.offset}`),t.push&&o.push(`x-col-push-${t.push}`),t.pull&&o.push(`x-col-pull-${t.pull}`),o});return(o,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.tag),{class:e.normalizeClass(s.value),style:e.normalizeStyle(r.value)},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},8,["class","style"]))}});exports.Aside=f;exports.Col=y;exports.Container=p;exports.Footer=h;exports.Header=d;exports.Main=m;exports.Row=g;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),d=require("@xto/core"),y=e.defineComponent({name:"XContainer",__name:"index",props:{direction:{default:"vertical"}},setup(l){const t=l,n=d.useNamespace("container"),r=e.computed(()=>[n.b(),n.is("flex",t.direction==="vertical")]);return e.provide("container",{direction:t.direction}),(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.value)},[e.renderSlot(a.$slots,"default")],2))}}),$=e.defineComponent({name:"XHeader",__name:"index",props:{height:{default:60}},setup(l){const t=l,n=d.useNamespace("header"),r=e.computed(()=>({height:typeof t.height=="number"?`${t.height}px`:t.height}));return(a,s)=>(e.openBlock(),e.createElementBlock("header",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(r.value)},[e.renderSlot(a.$slots,"default")],6))}}),z=e.defineComponent({name:"XAside",__name:"index",props:{width:{default:200}},setup(l){const t=l,n=d.useNamespace("aside"),r=e.computed(()=>({width:typeof t.width=="number"?`${t.width}px`:t.width}));return(a,s)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(r.value)},[e.renderSlot(a.$slots,"default")],6))}}),_=e.defineComponent({name:"XMain",__name:"index",props:{padding:{default:20}},setup(l){const t=l,n=e.inject("container",{direction:"vertical"}),r=(n==null?void 0:n.direction)||"vertical",a=e.computed(()=>({padding:typeof t.padding=="number"?`${t.padding}px`:t.padding,flex:r==="vertical"?1:"auto"}));return(s,o)=>(e.openBlock(),e.createElementBlock("main",{class:"x-main",style:e.normalizeStyle(a.value)},[e.renderSlot(s.$slots,"default")],4))}}),S=e.defineComponent({name:"XFooter",__name:"index",props:{height:{default:60}},setup(l){const t=l,n=d.useNamespace("footer"),r=e.computed(()=>({height:typeof t.height=="number"?`${t.height}px`:t.height}));return(a,s)=>(e.openBlock(),e.createElementBlock("footer",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(r.value)},[e.renderSlot(a.$slots,"default")],6))}}),x=e.defineComponent({name:"XRow",__name:"Row",props:{gutter:{default:0},justify:{default:"start"},align:{default:"top"},tag:{default:"div"}},setup(l){const t=l,n=d.useNamespace("row"),r=e.computed(()=>{const s=t.gutter;return Array.isArray(s)?{marginLeft:`-${s[0]/2}px`,marginRight:`-${s[0]/2}px`,rowGap:`${s[1]}px`}:s>0?{marginLeft:`-${s/2}px`,marginRight:`-${s/2}px`}:{}}),a=e.computed(()=>[n.b(),n.is(`justify-${t.justify}`),n.is(`align-${t.align}`)]);return(s,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.tag),{class:e.normalizeClass(a.value),style:e.normalizeStyle(r.value)},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["class","style"]))}}),C=e.defineComponent({name:"XCol",__name:"Col",props:{span:{default:24},offset:{default:0},push:{default:0},pull:{default:0},tag:{default:"div"}},setup(l){const t=l,n=e.inject("x-row",{gutter:0}),r=(n==null?void 0:n.gutter)||0,a=e.computed(()=>{const o={},c=Array.isArray(r)?r[0]:r;if(c>0){const f=c/2;o.paddingLeft=`${f}px`,o.paddingRight=`${f}px`}return t.span&&(o.flex=`0 0 ${t.span/24*100}%`),t.offset&&(o.marginLeft=`${t.offset/24*100}%`),t.push&&(o.left=`${t.push/24*100}%`),t.pull&&(o.right=`${t.pull/24*100}%`),o}),s=e.computed(()=>{const o=[];return t.span&&o.push(`x-col-${t.span}`),t.offset&&o.push(`x-col-offset-${t.offset}`),t.push&&o.push(`x-col-push-${t.push}`),t.pull&&o.push(`x-col-pull-${t.pull}`),o});return(o,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.tag),{class:e.normalizeClass(s.value),style:e.normalizeStyle(a.value)},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},8,["class","style"]))}}),B=e.defineComponent({name:"XSplit",__name:"index",props:{defaultSize:{default:.5},minSize:{default:.1},maxSize:{default:.9},direction:{default:"horizontal"},disabled:{type:Boolean,default:!1}},emits:["resize"],setup(l,{emit:t}){const n=l,r=t,a=d.useNamespace("split"),s=e.ref(),o=e.ref(n.defaultSize),c=e.ref(!1),f=e.computed(()=>{const i=`${o.value*100}%`;return n.direction==="horizontal"?{width:i}:{height:i}}),g=e.computed(()=>{const i=`${(1-o.value)*100}%`;return n.direction==="horizontal"?{width:i}:{height:i}}),v=i=>{n.disabled||(c.value=!0,document.addEventListener("mousemove",m),document.addEventListener("mouseup",h))},m=i=>{if(!c.value||!s.value)return;const p=s.value.getBoundingClientRect();let u;n.direction==="horizontal"?u=(i.clientX-p.left)/p.width:u=(i.clientY-p.top)/p.height,u=Math.max(n.minSize,Math.min(n.maxSize,u)),o.value=u,r("resize",u)},h=()=>{c.value=!1,document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",h)};return(i,p)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:s,class:e.normalizeClass([e.unref(a).b(),e.unref(a).m(l.direction)])},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).e("panel")),style:e.normalizeStyle(f.value)},[e.renderSlot(i.$slots,"left",{},()=>[e.renderSlot(i.$slots,"first")])],6),e.createElementVNode("div",{class:e.normalizeClass([e.unref(a).e("divider"),e.unref(a).is("dragging",c.value)]),onMousedown:v},null,34),e.createElementVNode("div",{class:e.normalizeClass(e.unref(a).e("panel")),style:e.normalizeStyle(g.value)},[e.renderSlot(i.$slots,"right",{},()=>[e.renderSlot(i.$slots,"second")])],6)],2))}});exports.Aside=z;exports.Col=C;exports.Container=y;exports.Footer=S;exports.Header=$;exports.Main=_;exports.Row=x;exports.Split=B;
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .x-container{display:flex;flex-direction:column;height:100%;width:100%}.x-container.is-flex{flex-direction:column}.x-header{flex-shrink:0;box-sizing:border-box;padding:0 20px;background-color:#fff;border-bottom:1px solid #dcdfe6}.x-aside{flex-shrink:0;box-sizing:border-box;overflow:auto;background-color:#fff;border-right:1px solid #dcdfe6}.x-main{flex:1;box-sizing:border-box;overflow:auto;background-color:#f5f7fa}.x-footer{flex-shrink:0;box-sizing:border-box;padding:0 20px;background-color:#fff;border-top:1px solid #dcdfe6}.x-row{position:relative;box-sizing:border-box}.x-row:before,.x-row:after{display:table;content:""}.x-row:after{clear:both}.x-row.is-justify-start{justify-content:flex-start}.x-row.is-justify-end{justify-content:flex-end}.x-row.is-justify-center{justify-content:center}.x-row.is-justify-space-around{justify-content:space-around}.x-row.is-justify-space-between{justify-content:space-between}.x-row.is-justify-space-evenly{justify-content:space-evenly}.x-row.is-align-top{align-items:flex-start}.x-row.is-align-middle{align-items:center}.x-row.is-align-bottom{align-items:flex-end}[class*=x-col-]{float:left;box-sizing:border-box}.x-col-1{width:4.1666666667%}.x-col-offset-1{margin-left:4.1666666667%}.x-col-pull-1{position:relative;right:4.1666666667%}.x-col-push-1{position:relative;left:4.1666666667%}.x-col-2{width:8.3333333333%}.x-col-offset-2{margin-left:8.3333333333%}.x-col-pull-2{position:relative;right:8.3333333333%}.x-col-push-2{position:relative;left:8.3333333333%}.x-col-3{width:12.5%}.x-col-offset-3{margin-left:12.5%}.x-col-pull-3{position:relative;right:12.5%}.x-col-push-3{position:relative;left:12.5%}.x-col-4{width:16.6666666667%}.x-col-offset-4{margin-left:16.6666666667%}.x-col-pull-4{position:relative;right:16.6666666667%}.x-col-push-4{position:relative;left:16.6666666667%}.x-col-5{width:20.8333333333%}.x-col-offset-5{margin-left:20.8333333333%}.x-col-pull-5{position:relative;right:20.8333333333%}.x-col-push-5{position:relative;left:20.8333333333%}.x-col-6{width:25%}.x-col-offset-6{margin-left:25%}.x-col-pull-6{position:relative;right:25%}.x-col-push-6{position:relative;left:25%}.x-col-7{width:29.1666666667%}.x-col-offset-7{margin-left:29.1666666667%}.x-col-pull-7{position:relative;right:29.1666666667%}.x-col-push-7{position:relative;left:29.1666666667%}.x-col-8{width:33.3333333333%}.x-col-offset-8{margin-left:33.3333333333%}.x-col-pull-8{position:relative;right:33.3333333333%}.x-col-push-8{position:relative;left:33.3333333333%}.x-col-9{width:37.5%}.x-col-offset-9{margin-left:37.5%}.x-col-pull-9{position:relative;right:37.5%}.x-col-push-9{position:relative;left:37.5%}.x-col-10{width:41.6666666667%}.x-col-offset-10{margin-left:41.6666666667%}.x-col-pull-10{position:relative;right:41.6666666667%}.x-col-push-10{position:relative;left:41.6666666667%}.x-col-11{width:45.8333333333%}.x-col-offset-11{margin-left:45.8333333333%}.x-col-pull-11{position:relative;right:45.8333333333%}.x-col-push-11{position:relative;left:45.8333333333%}.x-col-12{width:50%}.x-col-offset-12{margin-left:50%}.x-col-pull-12{position:relative;right:50%}.x-col-push-12{position:relative;left:50%}.x-col-13{width:54.1666666667%}.x-col-offset-13{margin-left:54.1666666667%}.x-col-pull-13{position:relative;right:54.1666666667%}.x-col-push-13{position:relative;left:54.1666666667%}.x-col-14{width:58.3333333333%}.x-col-offset-14{margin-left:58.3333333333%}.x-col-pull-14{position:relative;right:58.3333333333%}.x-col-push-14{position:relative;left:58.3333333333%}.x-col-15{width:62.5%}.x-col-offset-15{margin-left:62.5%}.x-col-pull-15{position:relative;right:62.5%}.x-col-push-15{position:relative;left:62.5%}.x-col-16{width:66.6666666667%}.x-col-offset-16{margin-left:66.6666666667%}.x-col-pull-16{position:relative;right:66.6666666667%}.x-col-push-16{position:relative;left:66.6666666667%}.x-col-17{width:70.8333333333%}.x-col-offset-17{margin-left:70.8333333333%}.x-col-pull-17{position:relative;right:70.8333333333%}.x-col-push-17{position:relative;left:70.8333333333%}.x-col-18{width:75%}.x-col-offset-18{margin-left:75%}.x-col-pull-18{position:relative;right:75%}.x-col-push-18{position:relative;left:75%}.x-col-19{width:79.1666666667%}.x-col-offset-19{margin-left:79.1666666667%}.x-col-pull-19{position:relative;right:79.1666666667%}.x-col-push-19{position:relative;left:79.1666666667%}.x-col-20{width:83.3333333333%}.x-col-offset-20{margin-left:83.3333333333%}.x-col-pull-20{position:relative;right:83.3333333333%}.x-col-push-20{position:relative;left:83.3333333333%}.x-col-21{width:87.5%}.x-col-offset-21{margin-left:87.5%}.x-col-pull-21{position:relative;right:87.5%}.x-col-push-21{position:relative;left:87.5%}.x-col-22{width:91.6666666667%}.x-col-offset-22{margin-left:91.6666666667%}.x-col-pull-22{position:relative;right:91.6666666667%}.x-col-push-22{position:relative;left:91.6666666667%}.x-col-23{width:95.8333333333%}.x-col-offset-23{margin-left:95.8333333333%}.x-col-pull-23{position:relative;right:95.8333333333%}.x-col-push-23{position:relative;left:95.8333333333%}.x-col-24{width:100%}.x-col-offset-24{margin-left:100%}.x-col-pull-24{position:relative;right:100%}.x-col-push-24{position:relative;left:100%}
1
+ .x-container{display:flex;flex-direction:column;height:100%;width:100%}.x-container.is-flex{flex-direction:column}.x-header{flex-shrink:0;box-sizing:border-box;padding:0 20px;background-color:#fff;border-bottom:1px solid #dcdfe6}.x-aside{flex-shrink:0;box-sizing:border-box;overflow:auto;background-color:#fff;border-right:1px solid #dcdfe6}.x-main{flex:1;box-sizing:border-box;overflow:auto;background-color:#f5f7fa}.x-footer{flex-shrink:0;box-sizing:border-box;padding:0 20px;background-color:#fff;border-top:1px solid #dcdfe6}.x-row{position:relative;box-sizing:border-box}.x-row:before,.x-row:after{display:table;content:""}.x-row:after{clear:both}.x-row.is-justify-start{justify-content:flex-start}.x-row.is-justify-end{justify-content:flex-end}.x-row.is-justify-center{justify-content:center}.x-row.is-justify-space-around{justify-content:space-around}.x-row.is-justify-space-between{justify-content:space-between}.x-row.is-justify-space-evenly{justify-content:space-evenly}.x-row.is-align-top{align-items:flex-start}.x-row.is-align-middle{align-items:center}.x-row.is-align-bottom{align-items:flex-end}[class*=x-col-]{float:left;box-sizing:border-box}.x-col-1{width:4.1666666667%}.x-col-offset-1{margin-left:4.1666666667%}.x-col-pull-1{position:relative;right:4.1666666667%}.x-col-push-1{position:relative;left:4.1666666667%}.x-col-2{width:8.3333333333%}.x-col-offset-2{margin-left:8.3333333333%}.x-col-pull-2{position:relative;right:8.3333333333%}.x-col-push-2{position:relative;left:8.3333333333%}.x-col-3{width:12.5%}.x-col-offset-3{margin-left:12.5%}.x-col-pull-3{position:relative;right:12.5%}.x-col-push-3{position:relative;left:12.5%}.x-col-4{width:16.6666666667%}.x-col-offset-4{margin-left:16.6666666667%}.x-col-pull-4{position:relative;right:16.6666666667%}.x-col-push-4{position:relative;left:16.6666666667%}.x-col-5{width:20.8333333333%}.x-col-offset-5{margin-left:20.8333333333%}.x-col-pull-5{position:relative;right:20.8333333333%}.x-col-push-5{position:relative;left:20.8333333333%}.x-col-6{width:25%}.x-col-offset-6{margin-left:25%}.x-col-pull-6{position:relative;right:25%}.x-col-push-6{position:relative;left:25%}.x-col-7{width:29.1666666667%}.x-col-offset-7{margin-left:29.1666666667%}.x-col-pull-7{position:relative;right:29.1666666667%}.x-col-push-7{position:relative;left:29.1666666667%}.x-col-8{width:33.3333333333%}.x-col-offset-8{margin-left:33.3333333333%}.x-col-pull-8{position:relative;right:33.3333333333%}.x-col-push-8{position:relative;left:33.3333333333%}.x-col-9{width:37.5%}.x-col-offset-9{margin-left:37.5%}.x-col-pull-9{position:relative;right:37.5%}.x-col-push-9{position:relative;left:37.5%}.x-col-10{width:41.6666666667%}.x-col-offset-10{margin-left:41.6666666667%}.x-col-pull-10{position:relative;right:41.6666666667%}.x-col-push-10{position:relative;left:41.6666666667%}.x-col-11{width:45.8333333333%}.x-col-offset-11{margin-left:45.8333333333%}.x-col-pull-11{position:relative;right:45.8333333333%}.x-col-push-11{position:relative;left:45.8333333333%}.x-col-12{width:50%}.x-col-offset-12{margin-left:50%}.x-col-pull-12{position:relative;right:50%}.x-col-push-12{position:relative;left:50%}.x-col-13{width:54.1666666667%}.x-col-offset-13{margin-left:54.1666666667%}.x-col-pull-13{position:relative;right:54.1666666667%}.x-col-push-13{position:relative;left:54.1666666667%}.x-col-14{width:58.3333333333%}.x-col-offset-14{margin-left:58.3333333333%}.x-col-pull-14{position:relative;right:58.3333333333%}.x-col-push-14{position:relative;left:58.3333333333%}.x-col-15{width:62.5%}.x-col-offset-15{margin-left:62.5%}.x-col-pull-15{position:relative;right:62.5%}.x-col-push-15{position:relative;left:62.5%}.x-col-16{width:66.6666666667%}.x-col-offset-16{margin-left:66.6666666667%}.x-col-pull-16{position:relative;right:66.6666666667%}.x-col-push-16{position:relative;left:66.6666666667%}.x-col-17{width:70.8333333333%}.x-col-offset-17{margin-left:70.8333333333%}.x-col-pull-17{position:relative;right:70.8333333333%}.x-col-push-17{position:relative;left:70.8333333333%}.x-col-18{width:75%}.x-col-offset-18{margin-left:75%}.x-col-pull-18{position:relative;right:75%}.x-col-push-18{position:relative;left:75%}.x-col-19{width:79.1666666667%}.x-col-offset-19{margin-left:79.1666666667%}.x-col-pull-19{position:relative;right:79.1666666667%}.x-col-push-19{position:relative;left:79.1666666667%}.x-col-20{width:83.3333333333%}.x-col-offset-20{margin-left:83.3333333333%}.x-col-pull-20{position:relative;right:83.3333333333%}.x-col-push-20{position:relative;left:83.3333333333%}.x-col-21{width:87.5%}.x-col-offset-21{margin-left:87.5%}.x-col-pull-21{position:relative;right:87.5%}.x-col-push-21{position:relative;left:87.5%}.x-col-22{width:91.6666666667%}.x-col-offset-22{margin-left:91.6666666667%}.x-col-pull-22{position:relative;right:91.6666666667%}.x-col-push-22{position:relative;left:91.6666666667%}.x-col-23{width:95.8333333333%}.x-col-offset-23{margin-left:95.8333333333%}.x-col-pull-23{position:relative;right:95.8333333333%}.x-col-push-23{position:relative;left:95.8333333333%}.x-col-24{width:100%}.x-col-offset-24{margin-left:100%}.x-col-pull-24{position:relative;right:100%}.x-col-push-24{position:relative;left:100%}.x-split{display:flex;width:100%;height:100%}.x-split--horizontal{flex-direction:row}.x-split--vertical{flex-direction:column}.x-split__panel{overflow:hidden}.x-split__divider{flex-shrink:0;background-color:var(--color-border, #dcdfe6);cursor:col-resize;transition:background-color .2s}.x-split__divider:hover,.x-split__divider.is-dragging{background-color:var(--color-primary, #409eff)}.x-split--horizontal .x-split__divider{width:1px;cursor:col-resize}.x-split--vertical .x-split__divider{height:1px;cursor:row-resize}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xto/layout",
3
- "version": "1.0.7",
3
+ "version": "1.1.0",
4
4
  "description": "Xto Layout - Layout components",
5
5
  "homepage": "https://jinguchu.github.io/xto-ui/",
6
6
  "repository": {
@@ -27,7 +27,7 @@
27
27
  "access": "public"
28
28
  },
29
29
  "dependencies": {
30
- "@xto/core": "^1.0.3"
30
+ "@xto/core": "^1.1.0"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "vue": "^3.4.0"