@xto/layout 1.0.4 → 1.0.6

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 +85 -177
  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 +5 -2
package/es/index.mjs CHANGED
@@ -1,94 +1,94 @@
1
- import { defineComponent as m, computed as p, provide as B, openBlock as i, createElementBlock as d, normalizeClass as r, renderSlot as f, normalizeStyle as h, unref as c, inject as C, createBlock as w, resolveDynamicComponent as _, withCtx as b, onMounted as V, onUnmounted as z, Teleport as X, createVNode as L, Transition as A, createCommentVNode as v, createElementVNode as x, toDisplayString as R } from "vue";
2
- import { useNamespace as y } from "@xto/core";
3
- const S = /* @__PURE__ */ m({
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({
4
4
  name: "XContainer",
5
5
  __name: "index",
6
6
  props: {
7
7
  direction: { default: "vertical" }
8
8
  },
9
- setup(s) {
10
- const e = s, t = y("container"), o = p(() => [
11
- t.b(),
12
- t.is("flex", e.direction === "vertical")
9
+ setup(a) {
10
+ const t = a, e = h("container"), r = l(() => [
11
+ e.b(),
12
+ e.is("flex", t.direction === "vertical")
13
13
  ]);
14
- return B("container", {
15
- direction: e.direction
16
- }), (a, l) => (i(), d("div", {
17
- class: r(o.value)
14
+ return w("container", {
15
+ direction: t.direction
16
+ }), (o, s) => (c(), d("div", {
17
+ class: p(r.value)
18
18
  }, [
19
- f(a.$slots, "default")
19
+ u(o.$slots, "default")
20
20
  ], 2));
21
21
  }
22
- }), j = /* @__PURE__ */ m({
22
+ }), A = /* @__PURE__ */ i({
23
23
  name: "XHeader",
24
24
  __name: "index",
25
25
  props: {
26
26
  height: { default: 60 }
27
27
  },
28
- setup(s) {
29
- const e = s, t = y("header"), o = p(() => ({
30
- height: typeof e.height == "number" ? `${e.height}px` : e.height
28
+ setup(a) {
29
+ const t = a, e = h("header"), r = l(() => ({
30
+ height: typeof t.height == "number" ? `${t.height}px` : t.height
31
31
  }));
32
- return (a, l) => (i(), d("header", {
33
- class: r(c(t).b()),
34
- style: h(o.value)
32
+ return (o, s) => (c(), d("header", {
33
+ class: p(g(e).b()),
34
+ style: f(r.value)
35
35
  }, [
36
- f(a.$slots, "default")
36
+ u(o.$slots, "default")
37
37
  ], 6));
38
38
  }
39
- }), D = /* @__PURE__ */ m({
39
+ }), R = /* @__PURE__ */ i({
40
40
  name: "XAside",
41
41
  __name: "index",
42
42
  props: {
43
43
  width: { default: 200 }
44
44
  },
45
- setup(s) {
46
- const e = s, t = y("aside"), o = p(() => ({
47
- width: typeof e.width == "number" ? `${e.width}px` : e.width
45
+ setup(a) {
46
+ const t = a, e = h("aside"), r = l(() => ({
47
+ width: typeof t.width == "number" ? `${t.width}px` : t.width
48
48
  }));
49
- return (a, l) => (i(), d("aside", {
50
- class: r(c(t).b()),
51
- style: h(o.value)
49
+ return (o, s) => (c(), d("aside", {
50
+ class: p(g(e).b()),
51
+ style: f(r.value)
52
52
  }, [
53
- f(a.$slots, "default")
53
+ u(o.$slots, "default")
54
54
  ], 6));
55
55
  }
56
- }), F = /* @__PURE__ */ m({
56
+ }), j = /* @__PURE__ */ i({
57
57
  name: "XMain",
58
58
  __name: "index",
59
59
  props: {
60
60
  padding: { default: 20 }
61
61
  },
62
- setup(s) {
63
- const e = s, t = C("container", { direction: "vertical" }), o = (t == null ? void 0 : t.direction) || "vertical", a = p(() => ({
64
- padding: typeof e.padding == "number" ? `${e.padding}px` : e.padding,
65
- flex: o === "vertical" ? 1 : "auto"
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"
66
66
  }));
67
- return (l, n) => (i(), d("main", {
67
+ return (s, n) => (c(), d("main", {
68
68
  class: "x-main",
69
- style: h(a.value)
69
+ style: f(o.value)
70
70
  }, [
71
- f(l.$slots, "default")
71
+ u(s.$slots, "default")
72
72
  ], 4));
73
73
  }
74
- }), N = /* @__PURE__ */ m({
74
+ }), L = /* @__PURE__ */ i({
75
75
  name: "XFooter",
76
76
  __name: "index",
77
77
  props: {
78
78
  height: { default: 60 }
79
79
  },
80
- setup(s) {
81
- const e = s, t = y("footer"), o = p(() => ({
82
- height: typeof e.height == "number" ? `${e.height}px` : e.height
80
+ setup(a) {
81
+ const t = a, e = h("footer"), r = l(() => ({
82
+ height: typeof t.height == "number" ? `${t.height}px` : t.height
83
83
  }));
84
- return (a, l) => (i(), d("footer", {
85
- class: r(c(t).b()),
86
- style: h(o.value)
84
+ return (o, s) => (c(), d("footer", {
85
+ class: p(g(e).b()),
86
+ style: f(r.value)
87
87
  }, [
88
- f(a.$slots, "default")
88
+ u(o.$slots, "default")
89
89
  ], 6));
90
90
  }
91
- }), H = /* @__PURE__ */ m({
91
+ }), k = /* @__PURE__ */ i({
92
92
  name: "XRow",
93
93
  __name: "Row",
94
94
  props: {
@@ -97,33 +97,33 @@ const S = /* @__PURE__ */ m({
97
97
  align: { default: "top" },
98
98
  tag: { default: "div" }
99
99
  },
100
- setup(s) {
101
- const e = s, t = y("row"), o = p(() => {
102
- const l = e.gutter;
103
- return Array.isArray(l) ? {
104
- marginLeft: `-${l[0] / 2}px`,
105
- marginRight: `-${l[0] / 2}px`,
106
- rowGap: `${l[1]}px`
107
- } : l > 0 ? {
108
- marginLeft: `-${l / 2}px`,
109
- marginRight: `-${l / 2}px`
100
+ setup(a) {
101
+ const t = a, e = h("row"), r = l(() => {
102
+ const s = t.gutter;
103
+ return Array.isArray(s) ? {
104
+ marginLeft: `-${s[0] / 2}px`,
105
+ marginRight: `-${s[0] / 2}px`,
106
+ rowGap: `${s[1]}px`
107
+ } : s > 0 ? {
108
+ marginLeft: `-${s / 2}px`,
109
+ marginRight: `-${s / 2}px`
110
110
  } : {};
111
- }), a = p(() => [
112
- t.b(),
113
- t.is(`justify-${e.justify}`),
114
- t.is(`align-${e.align}`)
111
+ }), o = l(() => [
112
+ e.b(),
113
+ e.is(`justify-${t.justify}`),
114
+ e.is(`align-${t.align}`)
115
115
  ]);
116
- return (l, n) => (i(), w(_(s.tag), {
117
- class: r(a.value),
118
- style: h(o.value)
116
+ return (s, n) => (c(), y(x(a.tag), {
117
+ class: p(o.value),
118
+ style: f(r.value)
119
119
  }, {
120
- default: b(() => [
121
- f(l.$slots, "default")
120
+ default: v(() => [
121
+ u(s.$slots, "default")
122
122
  ]),
123
123
  _: 3
124
124
  }, 8, ["class", "style"]));
125
125
  }
126
- }), T = /* @__PURE__ */ m({
126
+ }), B = /* @__PURE__ */ i({
127
127
  name: "XCol",
128
128
  __name: "Col",
129
129
  props: {
@@ -133,127 +133,35 @@ const S = /* @__PURE__ */ m({
133
133
  pull: { default: 0 },
134
134
  tag: { default: "div" }
135
135
  },
136
- setup(s) {
137
- const e = s, t = C("x-row", { gutter: 0 }), o = (t == null ? void 0 : t.gutter) || 0, a = p(() => {
138
- const n = {}, g = Array.isArray(o) ? o[0] : o;
139
- if (g > 0) {
140
- const $ = g / 2;
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
141
  n.paddingLeft = `${$}px`, n.paddingRight = `${$}px`;
142
142
  }
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
- }), l = p(() => {
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(() => {
145
145
  const 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;
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;
147
147
  });
148
- return (n, g) => (i(), w(_(s.tag), {
149
- class: r(l.value),
150
- style: h(a.value)
148
+ return (n, m) => (c(), y(x(a.tag), {
149
+ class: p(s.value),
150
+ style: f(o.value)
151
151
  }, {
152
- default: b(() => [
153
- f(n.$slots, "default")
152
+ default: v(() => [
153
+ u(n.$slots, "default")
154
154
  ]),
155
155
  _: 3
156
156
  }, 8, ["class", "style"]));
157
157
  }
158
- }), G = /* @__PURE__ */ m({
159
- name: "XDrawer",
160
- __name: "index",
161
- props: {
162
- modelValue: { type: Boolean, default: !1 },
163
- placement: { default: "right" },
164
- size: { default: 480 },
165
- title: {},
166
- closable: { type: Boolean, default: !0 },
167
- mask: { type: Boolean, default: !0 },
168
- maskClosable: { type: Boolean, default: !0 },
169
- showFooter: { type: Boolean, default: !1 },
170
- escClosable: { type: Boolean, default: !0 },
171
- customClass: { default: "" }
172
- },
173
- emits: ["update:modelValue", "close", "open"],
174
- setup(s, { emit: e }) {
175
- const t = s, o = e, a = y("drawer"), l = p(() => {
176
- const u = typeof t.size == "number" ? `${t.size}px` : t.size;
177
- return t.placement === "left" || t.placement === "right" ? { width: u } : { height: u };
178
- }), n = () => {
179
- o("update:modelValue", !1), o("close");
180
- }, g = () => {
181
- t.maskClosable && n();
182
- }, $ = (u) => {
183
- t.escClosable && u.key === "Escape" && t.modelValue && n();
184
- };
185
- return V(() => {
186
- document.addEventListener("keydown", $);
187
- }), z(() => {
188
- document.removeEventListener("keydown", $);
189
- }), (u, k) => (i(), w(X, { to: "body" }, [
190
- L(A, { name: "x-drawer" }, {
191
- default: b(() => [
192
- s.modelValue ? (i(), d("div", {
193
- key: 0,
194
- class: r([c(a).b(), s.customClass])
195
- }, [
196
- s.mask ? (i(), d("div", {
197
- key: 0,
198
- class: r(c(a).e("mask")),
199
- onClick: g
200
- }, null, 2)) : v("", !0),
201
- x("div", {
202
- class: r([c(a).e("content"), c(a).em("content", s.placement)]),
203
- style: h(l.value)
204
- }, [
205
- s.title || u.$slots.header || s.closable ? (i(), d("div", {
206
- key: 0,
207
- class: r(c(a).e("header"))
208
- }, [
209
- f(u.$slots, "header", {}, () => [
210
- x("span", {
211
- class: r(c(a).e("title"))
212
- }, R(s.title), 3)
213
- ]),
214
- s.closable ? (i(), d("button", {
215
- key: 0,
216
- class: r(c(a).e("close")),
217
- onClick: n
218
- }, [...k[0] || (k[0] = [
219
- x("svg", {
220
- viewBox: "0 0 24 24",
221
- width: "16",
222
- height: "16"
223
- }, [
224
- x("path", {
225
- fill: "currentColor",
226
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
227
- })
228
- ], -1)
229
- ])], 2)) : v("", !0)
230
- ], 2)) : v("", !0),
231
- x("div", {
232
- class: r(c(a).e("body"))
233
- }, [
234
- f(u.$slots, "default")
235
- ], 2),
236
- s.showFooter || u.$slots.footer ? (i(), d("div", {
237
- key: 1,
238
- class: r(c(a).e("footer"))
239
- }, [
240
- f(u.$slots, "footer")
241
- ], 2)) : v("", !0)
242
- ], 6)
243
- ], 2)) : v("", !0)
244
- ]),
245
- _: 3
246
- })
247
- ]));
248
- }
249
158
  });
250
159
  export {
251
- D as Aside,
252
- T as Col,
253
- S as Container,
254
- G as Drawer,
255
- N as Footer,
256
- j as Header,
257
- F as Main,
258
- H as Row
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
259
167
  };
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%}.x-drawer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000}.x-drawer__mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080}.x-drawer__content{position:absolute;background:var(--bg-color, #fff);box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;overflow:hidden}.x-drawer__content--left{top:0;left:0;height:100%}.x-drawer__content--right{top:0;right:0;height:100%}.x-drawer__content--top{top:0;left:0;width:100%}.x-drawer__content--bottom{bottom:0;left:0;width:100%}.x-drawer__header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--color-border-lighter, #e8e8e8);flex-shrink:0}.x-drawer__title{font-size:18px;font-weight:600;color:var(--color-text-primary, #333);margin:0}.x-drawer__close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-text-secondary, #999);cursor:pointer;border-radius:4px;transition:all .2s}.x-drawer__close:hover{background:var(--color-fill, #f5f5f5);color:var(--color-text-primary, #333)}.x-drawer__body{flex:1;padding:24px;overflow-y:auto}.x-drawer__footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid var(--color-border-lighter, #e8e8e8);flex-shrink:0}.x-drawer-enter-active,.x-drawer-leave-active{transition:opacity .3s}.x-drawer-enter-active .x-drawer__content--left,.x-drawer-leave-active .x-drawer__content--left,.x-drawer-enter-active .x-drawer__content--right,.x-drawer-leave-active .x-drawer__content--right,.x-drawer-enter-active .x-drawer__content--top,.x-drawer-leave-active .x-drawer__content--top,.x-drawer-enter-active .x-drawer__content--bottom,.x-drawer-leave-active .x-drawer__content--bottom{transition:transform .3s}.x-drawer-enter-from,.x-drawer-leave-to{opacity:0}.x-drawer-enter-from .x-drawer__content--left,.x-drawer-leave-to .x-drawer__content--left{transform:translate(-100%)}.x-drawer-enter-from .x-drawer__content--right,.x-drawer-leave-to .x-drawer__content--right{transform:translate(100%)}.x-drawer-enter-from .x-drawer__content--top,.x-drawer-leave-to .x-drawer__content--top{transform:translateY(-100%)}.x-drawer-enter-from .x-drawer__content--bottom,.x-drawer-leave-to .x-drawer__content--bottom{transform:translateY(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%}
package/lib/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),i=require("@xto/core"),p=e.defineComponent({name:"XContainer",__name:"index",props:{direction:{default:"vertical"}},setup(o){const t=o,n=i.useNamespace("container"),r=e.computed(()=>[n.b(),n.is("flex",t.direction==="vertical")]);return e.provide("container",{direction:t.direction}),(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.value)},[e.renderSlot(l.$slots,"default")],2))}}),f=e.defineComponent({name:"XHeader",__name:"index",props:{height:{default:60}},setup(o){const t=o,n=i.useNamespace("header"),r=e.computed(()=>({height:typeof t.height=="number"?`${t.height}px`:t.height}));return(l,a)=>(e.openBlock(),e.createElementBlock("header",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(r.value)},[e.renderSlot(l.$slots,"default")],6))}}),h=e.defineComponent({name:"XAside",__name:"index",props:{width:{default:200}},setup(o){const t=o,n=i.useNamespace("aside"),r=e.computed(()=>({width:typeof t.width=="number"?`${t.width}px`:t.width}));return(l,a)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(r.value)},[e.renderSlot(l.$slots,"default")],6))}}),y=e.defineComponent({name:"XMain",__name:"index",props:{padding:{default:20}},setup(o){const t=o,n=e.inject("container",{direction:"vertical"}),r=(n==null?void 0:n.direction)||"vertical",l=e.computed(()=>({padding:typeof t.padding=="number"?`${t.padding}px`:t.padding,flex:r==="vertical"?1:"auto"}));return(a,s)=>(e.openBlock(),e.createElementBlock("main",{class:"x-main",style:e.normalizeStyle(l.value)},[e.renderSlot(a.$slots,"default")],4))}}),g=e.defineComponent({name:"XFooter",__name:"index",props:{height:{default:60}},setup(o){const t=o,n=i.useNamespace("footer"),r=e.computed(()=>({height:typeof t.height=="number"?`${t.height}px`:t.height}));return(l,a)=>(e.openBlock(),e.createElementBlock("footer",{class:e.normalizeClass(e.unref(n).b()),style:e.normalizeStyle(r.value)},[e.renderSlot(l.$slots,"default")],6))}}),C=e.defineComponent({name:"XRow",__name:"Row",props:{gutter:{default:0},justify:{default:"start"},align:{default:"top"},tag:{default:"div"}},setup(o){const t=o,n=i.useNamespace("row"),r=e.computed(()=>{const a=t.gutter;return Array.isArray(a)?{marginLeft:`-${a[0]/2}px`,marginRight:`-${a[0]/2}px`,rowGap:`${a[1]}px`}:a>0?{marginLeft:`-${a/2}px`,marginRight:`-${a/2}px`}:{}}),l=e.computed(()=>[n.b(),n.is(`justify-${t.justify}`),n.is(`align-${t.align}`)]);return(a,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:e.normalizeClass(l.value),style:e.normalizeStyle(r.value)},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},8,["class","style"]))}}),k=e.defineComponent({name:"XCol",__name:"Col",props:{span:{default:24},offset:{default:0},push:{default:0},pull:{default:0},tag:{default:"div"}},setup(o){const t=o,n=e.inject("x-row",{gutter:0}),r=(n==null?void 0:n.gutter)||0,l=e.computed(()=>{const s={},u=Array.isArray(r)?r[0]:r;if(u>0){const d=u/2;s.paddingLeft=`${d}px`,s.paddingRight=`${d}px`}return t.span&&(s.flex=`0 0 ${t.span/24*100}%`),t.offset&&(s.marginLeft=`${t.offset/24*100}%`),t.push&&(s.left=`${t.push/24*100}%`),t.pull&&(s.right=`${t.pull/24*100}%`),s}),a=e.computed(()=>{const s=[];return t.span&&s.push(`x-col-${t.span}`),t.offset&&s.push(`x-col-offset-${t.offset}`),t.push&&s.push(`x-col-push-${t.push}`),t.pull&&s.push(`x-col-pull-${t.pull}`),s});return(s,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:e.normalizeClass(a.value),style:e.normalizeStyle(l.value)},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["class","style"]))}}),$=e.defineComponent({name:"XDrawer",__name:"index",props:{modelValue:{type:Boolean,default:!1},placement:{default:"right"},size:{default:480},title:{},closable:{type:Boolean,default:!0},mask:{type:Boolean,default:!0},maskClosable:{type:Boolean,default:!0},showFooter:{type:Boolean,default:!1},escClosable:{type:Boolean,default:!0},customClass:{default:""}},emits:["update:modelValue","close","open"],setup(o,{emit:t}){const n=o,r=t,l=i.useNamespace("drawer"),a=e.computed(()=>{const c=typeof n.size=="number"?`${n.size}px`:n.size;return n.placement==="left"||n.placement==="right"?{width:c}:{height:c}}),s=()=>{r("update:modelValue",!1),r("close")},u=()=>{n.maskClosable&&s()},d=c=>{n.escClosable&&c.key==="Escape"&&n.modelValue&&s()};return e.onMounted(()=>{document.addEventListener("keydown",d)}),e.onUnmounted(()=>{document.removeEventListener("keydown",d)}),(c,m)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"x-drawer"},{default:e.withCtx(()=>[o.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(l).b(),o.customClass])},[o.mask?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(l).e("mask")),onClick:u},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass([e.unref(l).e("content"),e.unref(l).em("content",o.placement)]),style:e.normalizeStyle(a.value)},[o.title||c.$slots.header||o.closable?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(l).e("header"))},[e.renderSlot(c.$slots,"header",{},()=>[e.createElementVNode("span",{class:e.normalizeClass(e.unref(l).e("title"))},e.toDisplayString(o.title),3)]),o.closable?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(e.unref(l).e("close")),onClick:s},[...m[0]||(m[0]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"16",height:"16"},[e.createElementVNode("path",{fill:"currentColor",d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"})],-1)])],2)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(l).e("body"))},[e.renderSlot(c.$slots,"default")],2),o.showFooter||c.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(l).e("footer"))},[e.renderSlot(c.$slots,"footer")],2)):e.createCommentVNode("",!0)],6)],2)):e.createCommentVNode("",!0)]),_:3})]))}});exports.Aside=h;exports.Col=k;exports.Container=p;exports.Drawer=$;exports.Footer=g;exports.Header=f;exports.Main=y;exports.Row=C;
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;
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%}.x-drawer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000}.x-drawer__mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080}.x-drawer__content{position:absolute;background:var(--bg-color, #fff);box-shadow:-4px 0 20px #0000001a;display:flex;flex-direction:column;overflow:hidden}.x-drawer__content--left{top:0;left:0;height:100%}.x-drawer__content--right{top:0;right:0;height:100%}.x-drawer__content--top{top:0;left:0;width:100%}.x-drawer__content--bottom{bottom:0;left:0;width:100%}.x-drawer__header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--color-border-lighter, #e8e8e8);flex-shrink:0}.x-drawer__title{font-size:18px;font-weight:600;color:var(--color-text-primary, #333);margin:0}.x-drawer__close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-text-secondary, #999);cursor:pointer;border-radius:4px;transition:all .2s}.x-drawer__close:hover{background:var(--color-fill, #f5f5f5);color:var(--color-text-primary, #333)}.x-drawer__body{flex:1;padding:24px;overflow-y:auto}.x-drawer__footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid var(--color-border-lighter, #e8e8e8);flex-shrink:0}.x-drawer-enter-active,.x-drawer-leave-active{transition:opacity .3s}.x-drawer-enter-active .x-drawer__content--left,.x-drawer-leave-active .x-drawer__content--left,.x-drawer-enter-active .x-drawer__content--right,.x-drawer-leave-active .x-drawer__content--right,.x-drawer-enter-active .x-drawer__content--top,.x-drawer-leave-active .x-drawer__content--top,.x-drawer-enter-active .x-drawer__content--bottom,.x-drawer-leave-active .x-drawer__content--bottom{transition:transform .3s}.x-drawer-enter-from,.x-drawer-leave-to{opacity:0}.x-drawer-enter-from .x-drawer__content--left,.x-drawer-leave-to .x-drawer__content--left{transform:translate(-100%)}.x-drawer-enter-from .x-drawer__content--right,.x-drawer-leave-to .x-drawer__content--right{transform:translate(100%)}.x-drawer-enter-from .x-drawer__content--top,.x-drawer-leave-to .x-drawer__content--top{transform:translateY(-100%)}.x-drawer-enter-from .x-drawer__content--bottom,.x-drawer-leave-to .x-drawer__content--bottom{transform:translateY(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%}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xto/layout",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "Xto Layout - Layout components",
5
5
  "main": "./lib/index.cjs",
6
6
  "module": "./es/index.mjs",
@@ -10,7 +10,8 @@
10
10
  "import": "./es/index.mjs",
11
11
  "require": "./lib/index.cjs",
12
12
  "types": "./es/index.d.ts"
13
- }
13
+ },
14
+ "./style.css": "./es/style.css"
14
15
  },
15
16
  "files": [
16
17
  "es",
@@ -29,6 +30,8 @@
29
30
  "vue": "^3.4.0"
30
31
  },
31
32
  "devDependencies": {
33
+ "@vitejs/plugin-vue": "^5.0.4",
34
+ "@vitejs/plugin-vue-jsx": "^3.1.0",
32
35
  "@xto/build": "workspace:*",
33
36
  "typescript": "^5.4.2",
34
37
  "vite": "^5.2.0",