Skip to content

Commit 52382a3

Browse files
DuffscsDuffscs
committed
remove useless cross, optional title, improve readability by moving style in stylesheet
1 parent 1d11021 commit 52382a3

File tree

6 files changed

+275
-218
lines changed

6 files changed

+275
-218
lines changed

‎components/dist/van-ui.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ChildDom, State } from "vanjs-core";
22
export type CSSPropertyBag = Record<string, string | number>;
3+
export type CSSStyles = Record<string, CSSPropertyBag>;
34
export interface ModalProps {
45
readonly closed: State<boolean>;
56
readonly backgroundColor?: string;
@@ -109,7 +110,7 @@ export interface BannerProps {
109110
}
110111
export declare const Banner: ({ backgroundColor, fontColor, sticky, bannerClass, bannerStyleOverrides, }: BannerProps, ...children: readonly ChildDom[]) => HTMLElement;
111112
export interface FloatingWindowProps {
112-
readonly title: string | ChildDom;
113+
readonly title?: string | ChildDom;
113114
readonly closed: State<boolean>;
114115
readonly x?: State<number>;
115116
readonly y?: State<number>;

‎components/dist/van-ui.js

Lines changed: 85 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import van from "vanjs-core";
22
// Quote all tag names so that they're not mangled by minifier
33
const { "button": button, "div": div, "header": header, "input": input, "label": label, "span": span, "style": style } = van.tags;
44
const toStyleStr = (style) => Object.entries(style).map(([k, v]) => `${k}: ${v};`).join("");
5+
const toStyleSheet = (styles) => {
6+
return Object.entries(styles)
7+
.map(([selector, properties]) => `${selector} { ${toStyleStr(properties)} }`)
8+
.join("\n");
9+
};
510
export const Modal = ({ closed, backgroundColor = "rgba(0,0,0,.5)", blurBackground = false, backgroundClass = "", backgroundStyleOverrides = {}, modalClass = "", modalStyleOverrides = {}, }, ...children) => {
611
const backgroundStyle = {
712
display: "flex",
@@ -288,93 +293,107 @@ export const FloatingWindow = ({ title, closed, x = van.state(100), y = van.stat
288293
document.addEventListener('mouseup', onMouseUp);
289294
const grabAreaBgColor = 'transparent';
290295
const crossId = `vanui-close-cross-${++windowId}`;
291-
document.head.appendChild(style({ type: "text/css" }, `
292-
#${crossId}:hover {${toStyleStr({
293-
"background-color": "red",
294-
color: "white",
295-
})}}
296-
`));
297-
return () => closed.val ? null : van.add(div({
298-
style: toStyleStr({
296+
if (document.getElementById('vanui-window-style') == null) {
297+
const static_styles = style({ type: "text/css", id: "vanui-window-style" }, toStyleSheet({
298+
".vanui-window-dragarea": {
299+
cursor: 'move',
300+
position: 'absolute',
301+
left: '0',
302+
top: '0',
303+
width: '100%',
304+
height: '1rem',
305+
},
306+
".vanui-window-resize-right": {
307+
cursor: 'e-resize',
308+
position: 'absolute',
309+
right: '0',
310+
top: '0',
311+
width: '10px',
312+
height: '100%',
313+
'background-color': grabAreaBgColor,
314+
},
315+
".vanui-window-resize-bottom": {
316+
cursor: 's-resize',
317+
position: 'absolute',
318+
left: '0',
319+
bottom: '0',
320+
width: '100%',
321+
height: '10px',
322+
'background-color': grabAreaBgColor,
323+
},
324+
".vanui-window-resize-rightbottom": {
325+
cursor: 'se-resize',
326+
position: 'absolute',
327+
right: '0',
328+
bottom: '0',
329+
width: '10px',
330+
height: '10px',
331+
'background-color': grabAreaBgColor,
332+
},
333+
}));
334+
document.head.appendChild(static_styles);
335+
}
336+
const dynamic_styles = style({ type: "text/css" }, toStyleSheet({
337+
[`#${crossId}`]: {
338+
cursor: 'pointer',
339+
fontSize: '18px',
340+
transition: 'background-color 0.3s, color 0.3s',
341+
"border-radius": '50%',
342+
width: '24px',
343+
height: '24px',
344+
display: 'flex',
345+
"align-items": 'center',
346+
"justify-content": 'center',
347+
},
348+
[`#${crossId}:hover`]: {
349+
"background-color": "red",
350+
color: "white",
351+
},
352+
[`#vanui-window-${windowId}`]: {
299353
position: 'fixed',
300-
left: `${x.val}px`,
301-
top: `${y.val}px`,
302-
width: `${width.val}px`,
303-
height: `${height.val}px`,
304354
'background-color': 'white',
305355
border: '1px solid black',
306356
'border-radius': '0.5rem',
307357
overflow: 'hidden',
308-
...windowStyleOverrides,
309-
}),
310-
}, div({
311-
style: toStyleStr({
312-
cursor: 'move',
313-
position: 'absolute',
314-
left: 0,
315-
top: 0,
316-
width: '100%',
317-
height: "1rem"
318-
}),
319-
onmousedown: onMouseDown,
320-
}), header({
321-
style: toStyleStr({
358+
},
359+
[`#vanui-window-${windowId}-header`]: {
322360
cursor: 'move',
323361
'background-color': 'lightgray',
324362
"user-select": 'none',
325363
display: 'flex',
326364
"justify-content": 'space-between',
327365
"align-items": 'center',
328366
padding: '0.5rem',
329-
...headerStyleOverrides,
367+
}
368+
}));
369+
document.head.appendChild(dynamic_styles);
370+
return () => closed.val ? null : van.add(div({
371+
id: `vanui-window-${windowId}`,
372+
style: toStyleStr({
373+
left: `${x.val}px`,
374+
top: `${y.val}px`,
375+
width: `${width.val}px`,
376+
height: `${height.val}px`,
377+
...windowStyleOverrides,
330378
}),
379+
}, title != null ? header({
380+
id: `vanui-window-${windowId}-header`,
381+
style: toStyleStr(headerStyleOverrides),
331382
onmousedown: onMouseDown,
332383
}, title, closeCross ? span({
333-
style: toStyleStr({
334-
cursor: 'pointer',
335-
fontSize: '18px',
336-
transition: 'background-color 0.3s, color 0.3s',
337-
"border-radius": '50%',
338-
width: '24px',
339-
height: '24px',
340-
display: 'flex',
341-
"align-items": 'center',
342-
"justify-content": 'center',
343-
}),
344384
id: crossId,
345385
onclick: () => closed.val = true,
346-
}, '×') : null), div({
347-
style: toStyleStr({
348-
cursor: 'e-resize',
349-
position: 'absolute',
350-
right: 0,
351-
top: 0,
352-
width: '10px',
353-
height: '100%',
354-
'background-color': grabAreaBgColor,
355-
}),
386+
}, '×') : null) : div({
387+
class: 'vanui-window-dragarea',
388+
onmousedown: onMouseDown,
389+
}), div({
390+
class: 'vanui-window-resize-right',
356391
onmousedown: onResizeMouseDown('right'),
357392
}), div({
358-
style: toStyleStr({
359-
cursor: 's-resize',
360-
position: 'absolute',
361-
left: 0,
362-
bottom: 0,
363-
width: '100%',
364-
height: '10px',
365-
'background-color': grabAreaBgColor,
366-
}),
393+
class: 'vanui-window-resize-bottom',
367394
onmousedown: onResizeMouseDown('bottom'),
368395
}), div({
369-
style: toStyleStr({
370-
cursor: 'se-resize',
371-
position: 'absolute',
372-
right: 0,
373-
bottom: 0,
374-
width: '10px',
375-
height: '10px',
376-
'background-color': grabAreaBgColor,
377-
}),
396+
class: 'vanui-window-resize-rightbottom',
378397
onmousedown: onResizeMouseDown('rightbottom'),
379398
}), div({ style: toStyleStr(childrenContainerStyleOverrides) }, children)));
380399
};

‎components/dist/van-ui.nomodule.js

Lines changed: 88 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
// Quote all tag names so that they're not mangled by minifier
33
const { "button": button, "div": div, "header": header, "input": input, "label": label, "span": span, "style": style } = van.tags;
44
const toStyleStr = (style) => Object.entries(style).map(([k, v]) => `${k}: ${v};`).join("");
5+
const toStyleSheet = (styles) => {
6+
return Object.entries(styles)
7+
.map(([selector, properties]) => `${selector} { ${toStyleStr(properties)} }`)
8+
.join("\n");
9+
};
510
window.Modal = ({ closed, backgroundColor = "rgba(0,0,0,.5)", blurBackground = false, backgroundClass = "", backgroundStyleOverrides = {}, modalClass = "", modalStyleOverrides = {}, }, ...children) => {
611
const backgroundStyle = {
712
display: "flex",
@@ -239,6 +244,7 @@
239244
});
240245
return header({ class: bannerClass, style: bannerStyleStr }, children);
241246
};
247+
let windowId = 0;
242248
window.FloatingWindow = ({ title, closed, x = van.state(100), y = van.state(100), width = van.state(300), height = van.state(200), windowStyleOverrides = {}, headerStyleOverrides = {}, childrenContainerStyleOverrides = {}, closeCross = false }, ...children) => {
243249
let dragging = van.state(false);
244250
let resizingDirection = van.state(null);
@@ -286,92 +292,108 @@
286292
document.addEventListener('mousemove', onMouseMove);
287293
document.addEventListener('mouseup', onMouseUp);
288294
const grabAreaBgColor = 'transparent';
289-
return () => closed.val ? null : van.add(div({
290-
style: toStyleStr({
295+
const crossId = `vanui-close-cross-${++windowId}`;
296+
if (document.getElementById('vanui-window-style') == null) {
297+
const static_styles = style({ type: "text/css", id: "vanui-window-style" }, toStyleSheet({
298+
".vanui-window-dragarea": {
299+
cursor: 'move',
300+
position: 'absolute',
301+
left: '0',
302+
top: '0',
303+
width: '100%',
304+
height: '1rem',
305+
},
306+
".vanui-window-resize-right": {
307+
cursor: 'e-resize',
308+
position: 'absolute',
309+
right: '0',
310+
top: '0',
311+
width: '10px',
312+
height: '100%',
313+
'background-color': grabAreaBgColor,
314+
},
315+
".vanui-window-resize-bottom": {
316+
cursor: 's-resize',
317+
position: 'absolute',
318+
left: '0',
319+
bottom: '0',
320+
width: '100%',
321+
height: '10px',
322+
'background-color': grabAreaBgColor,
323+
},
324+
".vanui-window-resize-rightbottom": {
325+
cursor: 'se-resize',
326+
position: 'absolute',
327+
right: '0',
328+
bottom: '0',
329+
width: '10px',
330+
height: '10px',
331+
'background-color': grabAreaBgColor,
332+
},
333+
}));
334+
document.head.appendChild(static_styles);
335+
}
336+
const dynamic_styles = style({ type: "text/css" }, toStyleSheet({
337+
[`#${crossId}`]: {
338+
cursor: 'pointer',
339+
fontSize: '18px',
340+
transition: 'background-color 0.3s, color 0.3s',
341+
"border-radius": '50%',
342+
width: '24px',
343+
height: '24px',
344+
display: 'flex',
345+
"align-items": 'center',
346+
"justify-content": 'center',
347+
},
348+
[`#${crossId}:hover`]: {
349+
"background-color": "red",
350+
color: "white",
351+
},
352+
[`#vanui-window-${windowId}`]: {
291353
position: 'fixed',
292-
left: `${x.val}px`,
293-
top: `${y.val}px`,
294-
width: `${width.val}px`,
295-
height: `${height.val}px`,
296354
'background-color': 'white',
297355
border: '1px solid black',
298356
'border-radius': '0.5rem',
299357
overflow: 'hidden',
300-
...windowStyleOverrides,
301-
}),
302-
}, div({
303-
style: toStyleStr({
304-
cursor: 'move',
305-
position: 'absolute',
306-
left: 0,
307-
top: 0,
308-
width: '100%',
309-
height: "1rem"
310-
}),
311-
onmousedown: onMouseDown,
312-
}), header({
313-
style: toStyleStr({
358+
},
359+
[`#vanui-window-${windowId}-header`]: {
314360
cursor: 'move',
315361
'background-color': 'lightgray',
316362
"user-select": 'none',
317363
display: 'flex',
318364
"justify-content": 'space-between',
319365
"align-items": 'center',
320366
padding: '0.5rem',
321-
...headerStyleOverrides,
367+
}
368+
}));
369+
document.head.appendChild(dynamic_styles);
370+
return () => closed.val ? null : van.add(div({
371+
id: `vanui-window-${windowId}`,
372+
style: toStyleStr({
373+
left: `${x.val}px`,
374+
top: `${y.val}px`,
375+
width: `${width.val}px`,
376+
height: `${height.val}px`,
377+
...windowStyleOverrides,
322378
}),
379+
}, title != null ? header({
380+
id: `vanui-window-${windowId}-header`,
381+
style: toStyleStr(headerStyleOverrides),
323382
onmousedown: onMouseDown,
324383
}, title, closeCross ? span({
325-
style: toStyleStr({
326-
cursor: 'pointer',
327-
fontSize: '18px',
328-
transition: 'background-color 0.3s, color 0.3s',
329-
"border-radius": '50%',
330-
width: '24px',
331-
height: '24px',
332-
display: 'flex',
333-
"align-items": 'center',
334-
"justify-content": 'center',
335-
}),
336-
class: "vanui-close-cross",
384+
id: crossId,
337385
onclick: () => closed.val = true,
338-
}, '×') : null), style({ type: "text/css" }, `
339-
.vanui-close-cross:hover {${toStyleStr({
340-
"background-color": "red",
341-
color: "white",
342-
})}}
343-
`), div({
344-
style: toStyleStr({
345-
cursor: 'e-resize',
346-
position: 'absolute',
347-
right: 0,
348-
top: 0,
349-
width: '10px',
350-
height: '100%',
351-
'background-color': grabAreaBgColor,
352-
}),
386+
}, '×') : null) : div({
387+
class: 'vanui-window-dragarea',
388+
onmousedown: onMouseDown,
389+
}), div({
390+
class: 'vanui-window-resize-right',
353391
onmousedown: onResizeMouseDown('right'),
354392
}), div({
355-
style: toStyleStr({
356-
cursor: 's-resize',
357-
position: 'absolute',
358-
left: 0,
359-
bottom: 0,
360-
width: '100%',
361-
height: '10px',
362-
'background-color': grabAreaBgColor,
363-
}),
393+
class: 'vanui-window-resize-bottom',
364394
onmousedown: onResizeMouseDown('bottom'),
365395
}), div({
366-
style: toStyleStr({
367-
cursor: 'se-resize',
368-
position: 'absolute',
369-
right: 0,
370-
bottom: 0,
371-
width: '10px',
372-
height: '10px',
373-
'background-color': grabAreaBgColor,
374-
}),
396+
class: 'vanui-window-resize-rightbottom',
375397
onmousedown: onResizeMouseDown('rightbottom'),
376398
}), div({ style: toStyleStr(childrenContainerStyleOverrides) }, children)));
377399
};

0 commit comments

Comments
 (0)