@webx-ui/module-banners 0.1.12 → 0.2.1
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/LayerInspector.d.ts +30 -0
- package/dist/LayersField.d.ts +14 -0
- package/dist/api.d.ts +3 -1
- package/dist/editor.d.ts +14 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1994 -487
- package/dist/index.js.map +1 -1
- package/dist/layers.d.ts +122 -0
- package/dist/style.css +1 -1
- package/dist/types.d.ts +31 -0
- package/package.json +5 -4
package/dist/layers.d.ts
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { LocalizedValue } from '@webx-ui/core';
|
|
2
|
+
import { LinkValue } from '@webx-ui/module-admin';
|
|
3
|
+
/**
|
|
4
|
+
* The layers of a banner on the panel's side (the layers spec, §3.2): their shape, the ones a
|
|
5
|
+
* banner starts with, and the custom properties `layers.css` reads — the same numbers the server
|
|
6
|
+
* prints (`Rendering\Layers`), so the canvas is the site.
|
|
7
|
+
*/
|
|
8
|
+
export type LayerType = 'text' | 'image' | 'button' | 'buttons';
|
|
9
|
+
export type LayerOrigin = 'tl' | 't' | 'tr' | 'l' | 'c' | 'r' | 'bl' | 'b' | 'br';
|
|
10
|
+
export type LayerView = 'desktop' | 'mobile';
|
|
11
|
+
/** One layout's geometry, every length in percent of the picture's width (decision 1). */
|
|
12
|
+
export interface LayerFrame {
|
|
13
|
+
x: number;
|
|
14
|
+
y: number;
|
|
15
|
+
w: number;
|
|
16
|
+
size: number;
|
|
17
|
+
pad: number;
|
|
18
|
+
radius: number;
|
|
19
|
+
/** In em: letter spacing follows the type, not the picture. */
|
|
20
|
+
tracking: number;
|
|
21
|
+
rotate: number;
|
|
22
|
+
gap: number;
|
|
23
|
+
origin: LayerOrigin;
|
|
24
|
+
hidden: boolean;
|
|
25
|
+
}
|
|
26
|
+
export interface LayerStyle {
|
|
27
|
+
font: 'heading' | 'body' | null;
|
|
28
|
+
weight: number;
|
|
29
|
+
italic: boolean;
|
|
30
|
+
uppercase: boolean;
|
|
31
|
+
align: 'start' | 'center' | 'end';
|
|
32
|
+
line_height: number;
|
|
33
|
+
/** `#rrggbb`, `token:<name of the palette>` or `null` — the site's. */
|
|
34
|
+
color: string | null;
|
|
35
|
+
background: string | null;
|
|
36
|
+
opacity: number;
|
|
37
|
+
shadow: boolean;
|
|
38
|
+
}
|
|
39
|
+
export interface LayerMotion {
|
|
40
|
+
in: 'fade' | 'rise' | 'slide-start' | 'slide-end' | 'zoom' | null;
|
|
41
|
+
loop: 'spin' | 'float' | null;
|
|
42
|
+
delay: number;
|
|
43
|
+
duration: number;
|
|
44
|
+
}
|
|
45
|
+
export interface MediaRef {
|
|
46
|
+
path: string;
|
|
47
|
+
url?: string;
|
|
48
|
+
alt?: LocalizedValue | string;
|
|
49
|
+
}
|
|
50
|
+
export interface BannerLayer {
|
|
51
|
+
id: string;
|
|
52
|
+
type: LayerType;
|
|
53
|
+
name?: string;
|
|
54
|
+
text?: LocalizedValue;
|
|
55
|
+
tag?: string;
|
|
56
|
+
image?: MediaRef | null;
|
|
57
|
+
link?: LinkValue | null;
|
|
58
|
+
variant?: string | null;
|
|
59
|
+
style: LayerStyle;
|
|
60
|
+
frames: {
|
|
61
|
+
desktop: LayerFrame;
|
|
62
|
+
mobile: LayerFrame | null;
|
|
63
|
+
};
|
|
64
|
+
motion: LayerMotion;
|
|
65
|
+
}
|
|
66
|
+
/** Range, step and default of each number of a layout — as `LayerRules::FRAME` has them. */
|
|
67
|
+
export declare const FRAME_LIMITS: Record<Exclude<keyof LayerFrame, 'origin' | 'hidden'>, [
|
|
68
|
+
number,
|
|
69
|
+
number,
|
|
70
|
+
number
|
|
71
|
+
]>;
|
|
72
|
+
export declare const ORIGINS: LayerOrigin[];
|
|
73
|
+
export declare const ENTRANCES: readonly ["fade", "rise", "slide-start", "slide-end", "zoom"];
|
|
74
|
+
export declare const LOOPS: readonly ["spin", "float"];
|
|
75
|
+
/** The two fields of a banner a layer's words may put in. */
|
|
76
|
+
export declare const FIELDS: readonly ["title", "text"];
|
|
77
|
+
export declare function frame(over?: Partial<LayerFrame>): LayerFrame;
|
|
78
|
+
export declare function style(over?: Partial<LayerStyle>): LayerStyle;
|
|
79
|
+
export declare function motion(over?: Partial<LayerMotion>): LayerMotion;
|
|
80
|
+
/**
|
|
81
|
+
* A deep copy of a layer. Not `structuredClone`: what the form holds is a reactive proxy, and the
|
|
82
|
+
* browser refuses to clone one.
|
|
83
|
+
*/
|
|
84
|
+
export declare function clone<T>(value: T): T;
|
|
85
|
+
/** A short id, unique among the layers it joins. */
|
|
86
|
+
export declare function layerId(taken?: Iterable<string>): string;
|
|
87
|
+
/** A new layer of a kind, where a new layer of that kind usually goes. */
|
|
88
|
+
export declare function newLayer(type: LayerType, taken: Iterable<string>, locale: string): BannerLayer;
|
|
89
|
+
/**
|
|
90
|
+
* What a banner of a place with layers starts with (decision 5): its title, its text and its
|
|
91
|
+
* buttons, in a column on the left. The words are written once, in the default language — the
|
|
92
|
+
* others take them from there (decision 6) — and the fields are put in in the page's language.
|
|
93
|
+
*/
|
|
94
|
+
export declare function defaultLayers(defaultLocale: string): BannerLayer[];
|
|
95
|
+
/**
|
|
96
|
+
* A layer's words in this language: the page's, else the site's default, else the first one
|
|
97
|
+
* written in the order of the site's languages (decision 6) — then the banner's fields put in,
|
|
98
|
+
* in the page's language. The same as `Rendering\Layers::words()`.
|
|
99
|
+
*/
|
|
100
|
+
export declare function layerWords(text: LocalizedValue | undefined, locale: string, order: string[], fields: Partial<Record<(typeof FIELDS)[number], string>>): string;
|
|
101
|
+
/** `{title}` and `{text}` are fields; any other `{…}` in a layer's words is very likely a typo. */
|
|
102
|
+
export declare function unknownFields(text: string): string[];
|
|
103
|
+
/** A colour of the theme's palette, or one of its own; anything else is no colour at all. */
|
|
104
|
+
export declare function cssColor(color: string | null | undefined): string | null;
|
|
105
|
+
/** The custom properties of a layer, as the server prints them, for both layouts. */
|
|
106
|
+
export declare function layerVars(layer: BannerLayer, z: number): Record<string, string>;
|
|
107
|
+
/** The classes of a layer's element, as the server prints them (motion is the site's, not the canvas's). */
|
|
108
|
+
export declare function layerClasses(layer: BannerLayer): string[];
|
|
109
|
+
/** `16/6`, `16 / 6`, `2.4` → width over height; anything else is `fallback`. */
|
|
110
|
+
export declare function ratioOf(value: string | number | null | undefined, fallback: number): number;
|
|
111
|
+
/**
|
|
112
|
+
* Where the frame of the place falls on the picture — what the site shows of it — as percent of
|
|
113
|
+
* the picture's width and height. `cover` crops the longer side, centred.
|
|
114
|
+
*/
|
|
115
|
+
export declare function cropBox(image: number, frameRatio: number): {
|
|
116
|
+
left: number;
|
|
117
|
+
top: number;
|
|
118
|
+
width: number;
|
|
119
|
+
height: number;
|
|
120
|
+
};
|
|
121
|
+
/** A layer as it is stored: the phone's layout, when it differs, or `null`. */
|
|
122
|
+
export declare function clampFrame(one: LayerFrame): LayerFrame;
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.wx-banner-editor[data-v-2c21e525]{display:flex;flex-direction:column;gap:var(--wx-gap, var(--wx-space-16));container-type:inline-size}.wx-banner-editor__ghost[data-v-2c21e525]{max-width:420px}.wx-banner-editor__place[data-v-2c21e525] .wx-form-item{max-width:420px;margin-bottom:0}.wx-banner-place[data-v-23c95ae5]{display:flex;flex-direction:column;gap:var(--wx-space-12);min-width:0;padding:var(--wx-gap, var(--wx-space-16))}.wx-banner-place__lock[data-v-23c95ae5]{display:inline-flex;color:var(--wx-text-muted)}.wx-banner-place__usage[data-v-23c95ae5]{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--wx-space-6);margin:0;color:var(--wx-text-muted);font-size:var(--wx-font-size-sm)}.wx-banner-place__usage code[data-v-23c95ae5]{padding:0 var(--wx-space-4);border-radius:var(--wx-radius-xs);background:var(--wx-bg-subtle);color:var(--wx-text-default);font-family:var(--wx-font-family-mono);user-select:all}.wx-banner-place__views[data-v-23c95ae5]{align-self:flex-start}.wx-banner-place__list.is-loading[data-v-23c95ae5]{opacity:.6}.wx-banner-place__list[data-v-23c95ae5] .wx-sortable-list__row{gap:var(--wx-space-4);padding-inline:var(--wx-space-4);border-radius:var(--wx-radius-sm)}.wx-banner-place__list[data-v-23c95ae5] .wx-sortable-list__row:hover{background:var(--wx-bg-subtle)}.wx-banner-row[data-v-23c95ae5]{display:flex;align-items:center;gap:var(--wx-space-12);flex:1 1 auto;width:100%;min-width:0;padding-block:var(--wx-space-8);color:inherit;text-decoration:none}.wx-banner-row.is-off .wx-banner-row__thumb[data-v-23c95ae5],.wx-banner-row.is-off .wx-banner-row__title[data-v-23c95ae5]{opacity:.55}.wx-banner-row__thumb[data-v-23c95ae5]{display:flex;flex:none;align-items:center;justify-content:center;width:80px;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--wx-radius-xs);background:var(--wx-bg-fill);color:var(--wx-text-muted)}.wx-banner-row__thumb img[data-v-23c95ae5]{width:100%;height:100%;min-width:0;object-fit:cover}.wx-banner-row__body[data-v-23c95ae5]{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--wx-space-4);min-width:0}.wx-banner-row__title[data-v-23c95ae5]{min-width:0;overflow:hidden;font-weight:var(--wx-font-weight-medium);text-overflow:ellipsis;white-space:nowrap}a.wx-banner-row:hover .wx-banner-row__title[data-v-23c95ae5]{color:var(--wx-color-primary)}.wx-banner-row__facts[data-v-23c95ae5]{display:flex;flex-wrap:wrap;gap:var(--wx-space-4)}.wx-banner-place__note[data-v-23c95ae5]{margin-top:var(--wx-space-4)}.wx-banners>.wx-card__body{display:flex;flex-direction:column;overflow:clip;border-radius:inherit}.wx-banners__loading[data-v-615232f0]{padding:var(--wx-space-16)}.wx-banners__list[data-v-615232f0]{margin:0;padding:var(--wx-space-8);list-style:none}.wx-banners__row[data-v-615232f0]{display:flex;align-items:center;gap:var(--wx-space-4);margin:0;padding-inline:var(--wx-space-8);border-radius:var(--wx-radius-sm)}.wx-banners__row[data-v-615232f0]:has(.is-current){background:var(--wx-bg-subtle)}.wx-banners__open[data-v-615232f0]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--wx-space-2);flex:1 1 auto;min-width:0;padding-block:var(--wx-space-8);padding-inline:0;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer}.wx-banners__open.is-current[data-v-615232f0]{color:var(--wx-color-primary)}.wx-banners__name[data-v-615232f0]{display:flex;align-items:center;gap:var(--wx-space-6);min-width:0;max-width:100%}.wx-banners__lock[data-v-615232f0]{flex:none;color:var(--wx-text-muted)}.wx-banners__count[data-v-615232f0]{flex:0 0 auto}
|
|
1
|
+
.wx-banner-editor[data-v-b6bd4d3f]{display:flex;flex-direction:column;gap:var(--wx-gap, var(--wx-space-16));container-type:inline-size}.wx-banner-editor__ghost[data-v-b6bd4d3f]{max-width:420px}.wx-banner-editor__place[data-v-b6bd4d3f] .wx-form-item{max-width:420px;margin-bottom:0}.wx-banner-place[data-v-48d645bf]{display:flex;flex-direction:column;gap:var(--wx-space-12);min-width:0;padding:var(--wx-gap, var(--wx-space-16))}.wx-banner-place__lock[data-v-48d645bf]{display:inline-flex;color:var(--wx-text-muted)}.wx-banner-place__usage[data-v-48d645bf]{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--wx-space-6);margin:0;color:var(--wx-text-muted);font-size:var(--wx-font-size-sm)}.wx-banner-place__usage code[data-v-48d645bf]{padding:0 var(--wx-space-4);border-radius:var(--wx-radius-xs);background:var(--wx-bg-subtle);color:var(--wx-text-default);font-family:var(--wx-font-family-mono);user-select:all}.wx-banner-place__views[data-v-48d645bf]{align-self:flex-start}.wx-banner-place__list.is-loading[data-v-48d645bf]{opacity:.6}.wx-banner-place__list[data-v-48d645bf] .wx-sortable-list__row{gap:var(--wx-space-4);padding-inline:var(--wx-space-4)}.wx-banner-row[data-v-48d645bf]{display:flex;align-items:center;gap:var(--wx-space-12);flex:1 1 auto;width:100%;min-width:0;padding-block:var(--wx-space-8);color:inherit;text-decoration:none}.wx-banner-row.is-off .wx-banner-row__thumb[data-v-48d645bf],.wx-banner-row.is-off .wx-banner-row__title[data-v-48d645bf]{opacity:.55}.wx-banner-row__thumb[data-v-48d645bf]{display:flex;flex:none;align-items:center;justify-content:center;width:80px;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--wx-radius-xs);background:var(--wx-bg-fill);color:var(--wx-text-muted)}.wx-banner-row__thumb img[data-v-48d645bf]{width:100%;height:100%;min-width:0;object-fit:cover}.wx-banner-row__body[data-v-48d645bf]{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--wx-space-4);min-width:0}.wx-banner-row__title[data-v-48d645bf]{min-width:0;overflow:hidden;font-weight:var(--wx-font-weight-medium);text-overflow:ellipsis;white-space:nowrap}a.wx-banner-row:hover .wx-banner-row__title[data-v-48d645bf]{color:var(--wx-color-primary)}.wx-banner-row__facts[data-v-48d645bf]{display:flex;flex-wrap:wrap;gap:var(--wx-space-4)}.wx-banner-place__note[data-v-48d645bf]{margin-top:var(--wx-space-4)}.wx-banners>.wx-card__body{display:flex;flex-direction:column;overflow:clip;border-radius:inherit}.wx-banners__loading[data-v-615232f0]{padding:var(--wx-space-16)}.wx-banners__list[data-v-615232f0]{margin:0;padding:var(--wx-space-8);list-style:none}.wx-banners__row[data-v-615232f0]{display:flex;align-items:center;gap:var(--wx-space-4);margin:0;padding-inline:var(--wx-space-8);border-radius:var(--wx-radius-sm)}.wx-banners__row[data-v-615232f0]:has(.is-current){background:var(--wx-bg-subtle)}.wx-banners__open[data-v-615232f0]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--wx-space-2);flex:1 1 auto;min-width:0;padding-block:var(--wx-space-8);padding-inline:0;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer}.wx-banners__open.is-current[data-v-615232f0]{color:var(--wx-color-primary)}.wx-banners__name[data-v-615232f0]{display:flex;align-items:center;gap:var(--wx-space-6);min-width:0;max-width:100%}.wx-banners__lock[data-v-615232f0]{flex:none;color:var(--wx-text-muted)}.wx-banners__count[data-v-615232f0]{flex:0 0 auto}.wx-banner-layer-inspector[data-v-32ff51cd]{display:flex;flex-direction:column;gap:var(--wx-space-12);min-width:0}.wx-banner-layer-inspector__head[data-v-32ff51cd]{display:flex;gap:var(--wx-space-8)}.wx-banner-layer-inspector__fields[data-v-32ff51cd]{display:flex;gap:var(--wx-space-4);margin-top:calc(-1 * var(--wx-space-8))}.wx-banner-layer-inspector__group[data-v-32ff51cd]{display:flex;flex-direction:column;gap:var(--wx-space-8);padding-top:var(--wx-space-12);border-top:1px solid var(--wx-border-default)}.wx-banner-layer-inspector__title[data-v-32ff51cd]{display:flex;align-items:center;justify-content:space-between;gap:var(--wx-space-8)}.wx-banner-layer-inspector__grid[data-v-32ff51cd]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--wx-space-8)}.wx-banner-layer-inspector__grid[data-v-32ff51cd] .wx-form-item,.wx-banner-layer-inspector[data-v-32ff51cd] .wx-form-item{margin-bottom:var(--wx-space-4)}.wx-banner-layer-inspector__switches[data-v-32ff51cd]{display:flex;flex-wrap:wrap;gap:var(--wx-space-12)}.wx-banner-layer-inspector__origins[data-v-32ff51cd]{display:grid;grid-template-columns:repeat(3,18px);gap:var(--wx-space-4)}.wx-banner-layer-inspector__origin[data-v-32ff51cd]{width:18px;height:18px;padding:0;border:1px solid var(--wx-border-default);border-radius:var(--wx-radius-xs);background:var(--wx-bg-surface);cursor:pointer}.wx-banner-layer-inspector__origin.is-active[data-v-32ff51cd]{border-color:var(--wx-color-primary);background:var(--wx-color-primary)}.wx-banner-layer-inspector__color[data-v-32ff51cd]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wx-space-4)}.wx-banner-layer-inspector__swatch[data-v-32ff51cd]{width:22px;height:22px;padding:0;border:1px solid var(--wx-border-default);border-radius:var(--wx-radius-full);cursor:pointer}.wx-banner-layer-inspector__swatch.is-active[data-v-32ff51cd]{outline:2px solid var(--wx-color-primary);outline-offset:1px}.webx-banners{position:relative;min-width:0}.webx-banners--overflow{z-index:1;overflow-x:clip}.webx-banners--overflow .webx-slider__viewport{overflow:visible}.webx-banners__strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.webx-banners__strip>.webx-banners__item{flex:0 0 100%;scroll-snap-align:start}.webx-banners__strip.is-ready{scrollbar-width:none}.webx-banners__controls{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem}.webx-banners__controls[hidden]{display:none}.webx-banners__arrow{width:2.25rem;height:2.25rem;padding:0;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}.webx-banners__dots{display:flex;gap:.4rem}.webx-banners__dot{width:.6rem;height:.6rem;padding:0;border:0;border-radius:50%;background:currentColor;opacity:.3;cursor:pointer}.webx-banners__dot[aria-current=true]{opacity:1}.webx-banner{position:relative;aspect-ratio:var(--ratio, 16 / 6);container-type:size;overflow:hidden}.webx-banners--overflow .webx-banner{overflow:visible}.webx-banner__picture{position:absolute;inset:0;overflow:hidden}.webx-banner__picture>picture{display:contents}.webx-banner__image,.webx-banner__video{display:block;width:100%;height:100%;object-fit:cover}.webx-banner__video{position:absolute;inset:0}.webx-banner__stage{position:absolute;top:50%;left:50%;width:max(100cqw,100cqh * var(--img, 2.6667));aspect-ratio:var(--img, 2.6667);translate:-50% -50%;container-type:inline-size;pointer-events:none}.webx-banner__layer{position:absolute;top:calc(var(--y) * 1cqw);left:calc(var(--x) * 1cqw);display:var(--display, block);box-sizing:border-box;width:calc(var(--w) * 1cqw);margin:0;padding:calc(var(--pad) * 1cqw);border-radius:calc(var(--radius) * 1cqw);background:var(--background, transparent);color:var(--color, inherit);font-family:var(--font, inherit);font-size:calc(var(--size) * 1cqw);font-weight:var(--weight, 400);line-height:var(--leading, 1.2);letter-spacing:calc(var(--tracking) * 1em);text-align:var(--align, start);overflow-wrap:break-word;opacity:var(--opacity, 1);translate:var(--ox) var(--oy);rotate:calc(var(--rotate) * 1deg);pointer-events:auto}.webx-banner__layer--image{padding:0}.webx-banner__layer--image:has(img[alt=""]){pointer-events:none}.webx-banner__layer--image .webx-banner__inner{display:block;width:100%;height:auto}.webx-banner__layer.is-italic{font-style:italic}.webx-banner__layer.is-uppercase{text-transform:uppercase}.webx-banner__layer.is-shadow{text-shadow:0 .05em .3em rgb(0 0 0 / .45)}.webx-banner__layer.has-background{width:fit-content;max-width:calc(var(--w) * 1cqw)}.webx-banner__buttons{display:flex;flex-wrap:wrap;justify-content:var(--align, start);gap:calc(var(--gap) * 1cqw)}.webx-banner__button{display:inline-block;padding:.6em 1.4em;border-radius:var(--site-radius-control, .4em);background:var(--site-color-accent, #111);color:var(--site-color-accent-contrast, #fff);font:inherit;text-decoration:none;white-space:nowrap}.webx-banner__button--secondary{background:var(--site-color-surface, #fff);color:var(--site-color-text, #111)}.webx-banner__button--link{padding-inline:0;background:none;color:inherit;text-decoration:underline}.webx-banner__content{position:absolute;inset:auto 0 0;display:grid;gap:.5em;padding:clamp(1rem,4cqw,3rem);color:#fff;text-shadow:0 1px 8px rgb(0 0 0 / .5)}.webx-banner__title,.webx-banner__text{margin:0}.webx-banner.is-mobile{aspect-ratio:var(--ratio-mobile, 4 / 5)}.webx-banner.is-mobile .webx-banner__stage{width:max(100cqw,100cqh * var(--img-m, var(--img, .8)));aspect-ratio:var(--img-m, var(--img, .8))}.webx-banner.is-mobile .webx-banner__layer{top:calc(var(--m-y) * 1cqw);left:calc(var(--m-x) * 1cqw);display:var(--m-display, block);width:calc(var(--m-w) * 1cqw);padding:calc(var(--m-pad) * 1cqw);border-radius:calc(var(--m-radius) * 1cqw);font-size:calc(var(--m-size) * 1cqw);letter-spacing:calc(var(--m-tracking) * 1em);translate:var(--m-ox) var(--m-oy);rotate:calc(var(--m-rotate) * 1deg)}.webx-banner.is-mobile .webx-banner__layer--image{padding:0}.webx-banner.is-mobile .webx-banner__layer.has-background{max-width:calc(var(--m-w) * 1cqw)}.webx-banner.is-mobile .webx-banner__buttons{gap:calc(var(--m-gap) * 1cqw)}.webx-banner__layer[class*=is-in-]{animation-duration:var(--duration, .6s);animation-delay:var(--delay, 0ms);animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1)}.webx-banner__layer.is-in-fade{animation-name:webx-banner-fade}.webx-banner__layer.is-in-rise{animation-name:webx-banner-rise}.webx-banner__layer.is-in-slide-start{animation-name:webx-banner-slide-start}.webx-banner__layer.is-in-slide-end{animation-name:webx-banner-slide-end}.webx-banner__layer.is-in-zoom{animation-name:webx-banner-zoom}.webx-slider__track.is-ready .webx-slider__slide:not(.is-active) .webx-banner__layer[class*=is-in-],.webx-banners__strip.is-ready>.webx-banners__item:not(.is-active) .webx-banner__layer[class*=is-in-]{animation-name:none}.webx-banner__layer.is-loop-spin>.webx-banner__inner{animation:webx-banner-spin 24s linear infinite}.webx-banner__layer.is-loop-float>.webx-banner__inner{animation:webx-banner-float 3.2s ease-in-out infinite alternate}.webx-banner__layer>.webx-banner__inner{display:block}@keyframes webx-banner-fade{0%{opacity:0}}@keyframes webx-banner-rise{0%{opacity:0;transform:translateY(.8em)}}@keyframes webx-banner-slide-start{0%{opacity:0;transform:translate(-1.5em)}}@keyframes webx-banner-slide-end{0%{opacity:0;transform:translate(1.5em)}}@keyframes webx-banner-zoom{0%{opacity:0;transform:scale(.85)}}@keyframes webx-banner-spin{to{transform:rotate(1turn)}}@keyframes webx-banner-float{to{transform:translateY(-6%)}}@media(prefers-reduced-motion:reduce){.webx-banner__layer,.webx-banner__layer>.webx-banner__inner{animation:none!important}}.wx-banner-layers[data-v-540c304c]{display:flex;flex-direction:column;gap:var(--wx-space-12);container-type:inline-size;min-width:0}.wx-banner-layers__bar[data-v-540c304c]{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--wx-space-8)}.wx-banner-layers__tools[data-v-540c304c]{display:flex;flex-wrap:wrap;gap:var(--wx-space-4)}.wx-banner-layers__body[data-v-540c304c]{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--wx-space-16)}@container (min-width: 900px){.wx-banner-layers__body[data-v-540c304c]{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}.wx-banner-layers__main[data-v-540c304c]{display:flex;flex-direction:column;gap:var(--wx-space-8);min-width:0}.wx-banner-layers__canvas[data-v-540c304c]{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--wx-radius-sm);background:var(--wx-bg-muted, var(--wx-bg-surface));outline-offset:2px;user-select:none;touch-action:none}.wx-banner-layers__canvas.is-overflow[data-v-540c304c]{padding-bottom:24%;background-image:repeating-linear-gradient(45deg,transparent 0 8px,color-mix(in srgb,var(--wx-text-muted) 12%,transparent) 8px 9px)}.wx-banner-layers__canvas[data-v-540c304c]:focus-visible{outline:2px solid var(--wx-color-primary)}.wx-banner-layers__frame[data-v-540c304c]{overflow:visible}.wx-banner-layers__frame[data-v-540c304c] .webx-banner__stage{pointer-events:auto}.wx-banner-layers__frame[data-v-540c304c] .webx-banner__layer,.wx-banner-layers__frame[data-v-540c304c] .webx-banner__inner{animation:none!important;cursor:move;pointer-events:auto}.wx-banner-layers__words[data-v-540c304c]{white-space:pre-line}.wx-banner-layers__frame[data-v-540c304c] .webx-banner__layer.is-selected{outline:2px solid var(--wx-color-primary);outline-offset:1px}.wx-banner-layers__frame[data-v-540c304c] .webx-banner__layer:hover:not(.is-selected){outline:1px dashed var(--wx-color-primary)}.wx-banner-layers__frame[data-v-540c304c] .webx-banner__layer.is-outside{opacity:.5}.wx-banner-layers__handle[data-v-540c304c]{position:absolute;width:10px;height:10px;border:2px solid var(--wx-color-primary);border-radius:2px;background:var(--wx-bg-surface);translate:50% -50%}.wx-banner-layers__handle--width[data-v-540c304c]{top:50%;right:0;cursor:ew-resize}.wx-banner-layers__handle--scale[data-v-540c304c]{right:0;bottom:0;translate:50% 50%;cursor:nwse-resize}.wx-banner-layers__crop[data-v-540c304c]{position:absolute;z-index:1000;box-shadow:0 0 0 100vmax #00000073;outline:1px dashed rgb(255 255 255 / .8);pointer-events:none}.wx-banner-layers__guide[data-v-540c304c]{position:absolute;z-index:1001;background:var(--wx-color-primary);pointer-events:none}.wx-banner-layers__guide--x[data-v-540c304c]{top:0;bottom:0;width:1px}.wx-banner-layers__guide--y[data-v-540c304c]{left:0;right:0;height:1px}.wx-banner-layers__empty[data-v-540c304c]{display:grid;place-items:center;height:100%;color:var(--wx-text-muted)}.wx-banner-layers__row[data-v-540c304c]{display:flex;align-items:center;gap:var(--wx-space-8);width:100%;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}.wx-banner-layers__row.is-selected[data-v-540c304c]{color:var(--wx-color-primary);font-weight:600}.wx-banner-layers__name[data-v-540c304c]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-banner-layers__warn[data-v-540c304c]{color:var(--wx-color-warning)}
|
package/dist/types.d.ts
CHANGED
|
@@ -24,6 +24,37 @@ export interface PlaceRow {
|
|
|
24
24
|
layout: string;
|
|
25
25
|
/** Banners outside the bin. */
|
|
26
26
|
count: number;
|
|
27
|
+
/** Present when the place's banners have layers (§4.4 of the layers spec): the frame the site prints. */
|
|
28
|
+
layers?: PlaceLayers;
|
|
29
|
+
}
|
|
30
|
+
/** What the layer editor draws its canvas by. */
|
|
31
|
+
export interface PlaceLayers {
|
|
32
|
+
/** The frame on wide screens and below the breakpoint — `16/6`, `4/5`. */
|
|
33
|
+
ratio: string;
|
|
34
|
+
ratio_mobile: string;
|
|
35
|
+
/** px: below it the site switches to the phone's picture and layout. */
|
|
36
|
+
breakpoint: number;
|
|
37
|
+
/** Whether a layer may step out of the frame (decision 13). */
|
|
38
|
+
overflow: boolean;
|
|
39
|
+
/** The tags a text layer may be printed as. */
|
|
40
|
+
tags: {
|
|
41
|
+
value: string;
|
|
42
|
+
label: string;
|
|
43
|
+
}[];
|
|
44
|
+
/** The looks of a button. */
|
|
45
|
+
variants: {
|
|
46
|
+
value: string;
|
|
47
|
+
label: string;
|
|
48
|
+
}[];
|
|
49
|
+
}
|
|
50
|
+
/** What makes the canvas look like the site: the theme's tokens, its fonts, its palette. */
|
|
51
|
+
export interface BannersTheme {
|
|
52
|
+
tokens_css: string;
|
|
53
|
+
fonts_css: string;
|
|
54
|
+
palette: {
|
|
55
|
+
key: string;
|
|
56
|
+
value: string;
|
|
57
|
+
}[];
|
|
27
58
|
}
|
|
28
59
|
/** What makes or renames a place of somebody's own. The title is required in the default language. */
|
|
29
60
|
export interface PlaceInput {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webx-ui/module-banners",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Banners for the WebX UI admin panel: pictures, a video and up to three buttons in named places, arranged by hand and printed by the site's own templates.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -44,9 +44,10 @@
|
|
|
44
44
|
"vue-router": "^4.5.0"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@webx-ui/core": "^0.
|
|
48
|
-
"@webx-ui/module-admin": "^0.
|
|
49
|
-
"@webx-ui/
|
|
47
|
+
"@webx-ui/core": "^0.41.0",
|
|
48
|
+
"@webx-ui/module-admin": "^0.26.1",
|
|
49
|
+
"@webx-ui/module-media": "^0.10.3",
|
|
50
|
+
"@webx-ui/schema": "^0.9.1"
|
|
50
51
|
},
|
|
51
52
|
"devDependencies": {
|
|
52
53
|
"@types/node": "^24.10.1",
|