eco-vue-js 0.26.29 → 0.26.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/InfiniteList/WInfiniteListWrapper.vue.d.ts.map +1 -1
- package/dist/components/InfiniteList/WInfiniteListWrapper.vue_vue_type_script_setup_true_lang.js +23 -3
- package/dist/components/List/components/ListToolbar.vue.d.ts.map +1 -1
- package/dist/components/List/components/ListToolbar.vue_vue_type_script_setup_true_lang.js +1 -1
- package/docs/llms.txt +1 -1
- package/package.json +1 -1
- package/tailwind-base/css/surfaces.css +25 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WInfiniteListWrapper.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/InfiniteList/WInfiniteListWrapper.vue"],"names":[],"mappings":"AAmDA;
|
|
1
|
+
{"version":3,"file":"WInfiniteListWrapper.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/InfiniteList/WInfiniteListWrapper.vue"],"names":[],"mappings":"AAmDA;AAmRA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAA;AAEpD,OAAO,EAAC,KAAK,KAAK,EAA0E,MAAM,KAAK,CAAA;AAYvG,KAAK,WAAW,GAAG;IACjB,gIAAgI;IAChI,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,mGAAmG;IACnG,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC;AAkMF,KAAK,WAAW,GAAG;IACjB,uGAAuG;IACvG,MAAM,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,EAAE,CAAA;IACnD,+EAA+E;IAC/E,OAAO,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,EAAE,CAAA;CACrD,CAAC;AA8FF,QAAA,MAAM,UAAU;;oPAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|
package/dist/components/InfiniteList/WInfiniteListWrapper.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -58,15 +58,27 @@ var WInfiniteListWrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE
|
|
|
58
58
|
const isPadding = () => !joined && !isContained && !props.noHeaderUpdate;
|
|
59
59
|
const updatePadding = () => {
|
|
60
60
|
if (!isPadding()) return;
|
|
61
|
-
const intersecting = props.inPlace || isIntersecting.value;
|
|
61
|
+
const intersecting = props.inPlace || isSectionInView.value || isIntersecting.value;
|
|
62
62
|
if (intersecting === null) return;
|
|
63
63
|
const offset = indicatorRef.value?.closest(".w-list-page") ? 0 : stickyGap.value;
|
|
64
64
|
const height = headerHeight.value + offset;
|
|
65
65
|
updateHeaderPadding(!intersecting && height ? height : 0);
|
|
66
66
|
};
|
|
67
|
+
/**
|
|
68
|
+
* Whether the page list's section fits the screen below the header bar. Its frame then has no room to stick, so the
|
|
69
|
+
* section's top scrolls away above where a stuck header would draw it: the header scrolls along, as in a section.
|
|
70
|
+
*/
|
|
71
|
+
const isSectionInView = ref(false);
|
|
72
|
+
const updateSectionInView = () => {
|
|
73
|
+
const page = indicatorRef.value?.closest(".w-list-page");
|
|
74
|
+
const surface = page?.querySelector(":scope > .w-list-page-surface");
|
|
75
|
+
const frame = page?.querySelector(":scope > .w-list-page-frame");
|
|
76
|
+
isSectionInView.value = !!surface && !!frame && getComputedStyle(frame).top !== "auto" && frame.getBoundingClientRect().height >= surface.getBoundingClientRect().height - 1;
|
|
77
|
+
};
|
|
67
78
|
watch(() => [
|
|
68
79
|
props.inPlace,
|
|
69
80
|
isIntersecting.value,
|
|
81
|
+
isSectionInView.value,
|
|
70
82
|
headerHeight.value,
|
|
71
83
|
stickyGap.value
|
|
72
84
|
], updatePadding);
|
|
@@ -97,8 +109,10 @@ var WInfiniteListWrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE
|
|
|
97
109
|
const onResize = () => {
|
|
98
110
|
updateHeaderTop();
|
|
99
111
|
observe();
|
|
112
|
+
updateSectionInView();
|
|
100
113
|
};
|
|
101
114
|
let resizeObserver = null;
|
|
115
|
+
let sectionObserver = null;
|
|
102
116
|
onMounted(() => {
|
|
103
117
|
if (!getIsClientSide() || joined || !headerRef.value) return;
|
|
104
118
|
resizeObserver = new ResizeObserver((entries) => {
|
|
@@ -108,12 +122,18 @@ var WInfiniteListWrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE
|
|
|
108
122
|
updateHeaderTop();
|
|
109
123
|
});
|
|
110
124
|
resizeObserver.observe(headerRef.value);
|
|
125
|
+
const page = indicatorRef.value?.closest(".w-list-page");
|
|
126
|
+
if (page && !isContained) {
|
|
127
|
+
sectionObserver = new ResizeObserver(updateSectionInView);
|
|
128
|
+
sectionObserver.observe(page);
|
|
129
|
+
}
|
|
111
130
|
observe();
|
|
112
131
|
window.addEventListener("resize", onResize);
|
|
113
132
|
});
|
|
114
133
|
onBeforeUnmount(() => {
|
|
115
134
|
window.removeEventListener("resize", onResize);
|
|
116
135
|
resizeObserver?.disconnect();
|
|
136
|
+
sectionObserver?.disconnect();
|
|
117
137
|
intersectionObserver?.disconnect();
|
|
118
138
|
if (isPadding()) updateHeaderPadding(0);
|
|
119
139
|
});
|
|
@@ -139,10 +159,10 @@ var WInfiniteListWrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE
|
|
|
139
159
|
createElementVNode("div", {
|
|
140
160
|
ref: "header",
|
|
141
161
|
class: normalizeClass(["print:hidden", __props.inPlace ? void 0 : {
|
|
142
|
-
"sticky":
|
|
162
|
+
"sticky": !isSectionInView.value,
|
|
143
163
|
"top-(--w-header-inner)": !unref(isContained),
|
|
144
164
|
"w-infinite-list-header": !unref(isContained) && !__props.noHeaderUpdate,
|
|
145
|
-
"w-infinite-list-header-stuck": !unref(isContained) && !__props.noHeaderUpdate && isIntersecting.value === false,
|
|
165
|
+
"w-infinite-list-header-stuck": !unref(isContained) && !__props.noHeaderUpdate && !isSectionInView.value && isIntersecting.value === false,
|
|
146
166
|
"top-0 not-empty:pt-(--w-list-contained-top,0.75rem)": unref(isContained) && !unref(isModal),
|
|
147
167
|
"top---modal-header-height": unref(isModal),
|
|
148
168
|
"bg-surface": __props.noHeaderUpdate || unref(isContained)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListToolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/components/ListToolbar.vue"],"names":[],"mappings":"AA4NA;AAoUA,OAAO,KAAK,EAAC,eAAe,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAC,MAAM,UAAU,CAAA;AACpG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAA;AAsB3C,QAAA,MAAM,YAAY,GAAK,IAAI,SAAS,WAAW,EAAE,WAAW,EAC3D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;
|
|
1
|
+
{"version":3,"file":"ListToolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/components/ListToolbar.vue"],"names":[],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
|
|
|
15
15
|
// src/components/List/components/ListToolbar.vue?vue&type=script&setup=true&lang.ts
|
|
16
16
|
var _hoisted_1 = {
|
|
17
17
|
key: 0,
|
|
18
|
-
class: "w-list-header"
|
|
18
|
+
class: "w-list-header list:left---left-inner list:w---width-inner list:sticky"
|
|
19
19
|
};
|
|
20
20
|
var _hoisted_2 = { class: "grid grid-cols-[1fr_auto] gap-4" };
|
|
21
21
|
var _hoisted_3 = { class: "text-description whitespace-nowrap" };
|
package/docs/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# eco-vue-js
|
|
2
2
|
|
|
3
|
-
> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.
|
|
3
|
+
> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.30, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
|
|
4
4
|
|
|
5
5
|
Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
|
|
6
6
|
|
package/package.json
CHANGED
|
@@ -329,6 +329,14 @@
|
|
|
329
329
|
* its parts, and not in a stack the page sets, which spaces its own: `surface-stack` runs sections together in flat.
|
|
330
330
|
*/
|
|
331
331
|
@layer components {
|
|
332
|
+
/*
|
|
333
|
+
* A page list is a section of its own: apart from the content before it, as sections in a `surface-stack` are. In
|
|
334
|
+
* this layer, under the page's spacing below, which wins in block flow; a stack the list is in sets its own.
|
|
335
|
+
*/
|
|
336
|
+
:where(* + .w-list-page-table) {
|
|
337
|
+
margin-top: var(--w-section-gap);
|
|
338
|
+
}
|
|
339
|
+
|
|
332
340
|
@scope (.w-page) to (.surface-section *, .surface-root *) {
|
|
333
341
|
:where(:scope, :scope :not(.grid, .flex, .inline-grid, .inline-flex, .surface-columns, .surface-stack, .surface-stack-divided))
|
|
334
342
|
> :where(.surface-section, .surface-stack, .surface-stack-divided, .surface-columns, .w-list-page, .w-page-bleed, .w-tabs-section)
|
|
@@ -1003,11 +1011,6 @@
|
|
|
1003
1011
|
}
|
|
1004
1012
|
}
|
|
1005
1013
|
|
|
1006
|
-
/* A section of its own: apart from the page content before it, as sections in a `surface-stack` are. A stack it is in sets its own. */
|
|
1007
|
-
:where(* + .w-list-page-table) {
|
|
1008
|
-
margin-top: var(--w-section-gap);
|
|
1009
|
-
}
|
|
1010
|
-
|
|
1011
1014
|
/* As wide as its rows, plus the right inset: the last column scrolls clear of the sticky menu column. */
|
|
1012
1015
|
.w-list-page-table {
|
|
1013
1016
|
width: max-content;
|
|
@@ -1055,6 +1058,23 @@
|
|
|
1055
1058
|
}
|
|
1056
1059
|
}
|
|
1057
1060
|
|
|
1061
|
+
/*
|
|
1062
|
+
* A page list of cards wraps and never scrolls sideways: while a table scrolls the window, its content keeps to the
|
|
1063
|
+
* view as content beside the table does. Its parts stick on their own, as a table's toolbar does, and not as one
|
|
1064
|
+
* box: the stuck header would stick inside another sticky box, which browsers move apart from it while scrolling,
|
|
1065
|
+
* and the box's layer would hold the header and the edges under the frame. The surface, frame and edges keep to the
|
|
1066
|
+
* view already.
|
|
1067
|
+
*/
|
|
1068
|
+
:root[data-w-page-table] .w-list-page:not(.w-list-page-table) {
|
|
1069
|
+
@variant sm {
|
|
1070
|
+
& :where(.w-list-page-content > :not(.w-infinite-list-header, .w-list-page-end), .w-infinite-list-header > :not(.w-infinite-list-header-edge)) {
|
|
1071
|
+
position: sticky;
|
|
1072
|
+
left: var(--w-left-inner);
|
|
1073
|
+
max-width: var(--w-width-inner);
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1058
1078
|
/* What a page sets in the list's header, such as its title, keeps the page inset there. */
|
|
1059
1079
|
.w-list-page .w-list-header {
|
|
1060
1080
|
@variant sm-not {
|