@webx-ui/module-admin 0.8.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AdminNav.d.ts +3 -0
- package/dist/BackButton.d.ts +1 -1
- package/dist/DateText.d.ts +6 -0
- package/dist/FilterChips.d.ts +18 -0
- package/dist/HelpButton.d.ts +2 -2
- package/dist/ListScreen.d.ts +29 -6
- package/dist/RenameButton.d.ts +5 -5
- package/dist/RichTextField.d.ts +2 -0
- package/dist/RowMenu.d.ts +1 -15
- package/dist/Screen.d.ts +1 -1
- package/dist/ScreenHead.d.ts +112 -0
- package/dist/admin.d.ts +6 -1
- package/dist/dates.d.ts +9 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.js +1028 -771
- package/dist/index.js.map +1 -1
- package/dist/rowMenu.d.ts +13 -0
- package/dist/screenTypes.d.ts +4 -0
- package/dist/style.css +1 -1
- package/dist/types.d.ts +68 -1
- package/package.json +3 -3
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* How wide the column holding a row's `···` has to be.
|
|
3
|
+
*
|
|
4
|
+
* The menu is a finger target — 44px under `(pointer: coarse)`, which is what `WxActions` gives
|
|
5
|
+
* a collapsed row — and the cell around it keeps `--wx-table-padding-x` on both sides. 44 and 16
|
|
6
|
+
* and 16 is this number; the 56 the sections used to declare was never enough for it, and the
|
|
7
|
+
* button simply painted outside its column, which nothing said out loud until cells began to
|
|
8
|
+
* clip what does not fit.
|
|
9
|
+
*
|
|
10
|
+
* One constant rather than a number in seven files: when the touch target changes, the columns
|
|
11
|
+
* that hold it change with it.
|
|
12
|
+
*/
|
|
13
|
+
export declare const rowMenuWidth = 76;
|
package/dist/screenTypes.d.ts
CHANGED
|
@@ -10,5 +10,9 @@ import { TypeRegistry } from '@webx-ui/schema';
|
|
|
10
10
|
*
|
|
11
11
|
* The rows themselves are still a module's own type — `wx-pages-table`, `wx-media` — because
|
|
12
12
|
* only the module knows what it is listing and where it asks for it.
|
|
13
|
+
*
|
|
14
|
+
* `wx-rich-text` is here rather than in `@webx-ui/schema` because it is not the editor that
|
|
15
|
+
* makes it a panel field: it is the panel's words on its toolbar and the panel's library behind
|
|
16
|
+
* its image button, and the schema package knows about neither.
|
|
13
17
|
*/
|
|
14
18
|
export declare const adminTypes: TypeRegistry;
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.wx-
|
|
1
|
+
.wx-row-menu[data-v-cab01f7f]{--wx-action-bg: transparent}.wx-screen-head[data-v-e27d184e]{--wx-head-line: calc(var(--wx-font-size-2xl) * var(--wx-font-line-height-tight));display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back name actions" ". subtitle .";align-items:start;row-gap:var(--wx-space-4);flex:none;min-width:0}.wx-screen-head[data-level="3"][data-v-e27d184e]{--wx-head-line: calc(var(--wx-font-size-xl) * var(--wx-font-line-height-tight))}.wx-screen-head.has-trail[data-v-e27d184e]{grid-template-areas:"trail trail trail" "back name actions" ". subtitle ."}.wx-screen-head.has-divider[data-v-e27d184e]{padding-block-end:var(--wx-space-12);border-block-end:1px solid var(--wx-border-default)}.wx-screen-head__trail[data-v-e27d184e]{grid-area:trail;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.wx-screen-head__trail[data-v-e27d184e]::-webkit-scrollbar{display:none}.wx-screen-head__trail[data-v-e27d184e]>*{flex-wrap:nowrap;white-space:nowrap}.wx-screen-head__trail[data-v-e27d184e] .wx-breadcrumb__list{flex-wrap:nowrap}.wx-screen-head__trail[data-v-e27d184e] .wx-breadcrumb-item{flex:none}.wx-screen-head__trail[data-v-e27d184e] .wx-breadcrumb-item__link{overflow:visible}.wx-screen-head[data-v-e27d184e]>.wx-screen-head__back{grid-area:back;margin-inline-end:var(--wx-space-8);margin-block-start:calc((var(--wx-head-line) - 30px) / 2)}.wx-screen-head__name[data-v-e27d184e]{grid-area:name;display:flex;align-items:center;gap:var(--wx-space-8);flex-wrap:wrap;min-width:0}.wx-screen-head__title[data-v-e27d184e]{min-width:0}.wx-screen-head__subtitle[data-v-e27d184e]{grid-area:subtitle;min-width:0}.wx-screen-head__actions[data-v-e27d184e]{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:var(--wx-space-8);flex-wrap:wrap;min-width:0;margin-inline-start:var(--wx-space-12);margin-block-start:calc((var(--wx-head-line) - var(--wx-size-control-md)) / 2)}.wx-screen-head__actions[data-v-e27d184e] .wx-action{--wx-action-size: var(--wx-size-control-md)}.wx-admin--drawer .wx-screen-head__actions[data-v-e27d184e]{--wx-size-control-md: 36px}.wx-screen-head.is-narrow.has-button[data-v-e27d184e]{grid-template-areas:"back name name" ". subtitle subtitle" "actions actions actions"}.wx-screen-head.is-narrow.has-button.has-trail[data-v-e27d184e]{grid-template-areas:"trail trail trail" "back name name" ". subtitle subtitle" "actions actions actions"}.wx-screen-head.is-narrow.has-button .wx-screen-head__actions[data-v-e27d184e]{margin-inline-start:0;margin-block-start:var(--wx-space-8)}.wx-screen-head.is-narrow .wx-screen-head__actions[data-v-e27d184e]>.wx-screen-head__button{flex:1 1 auto}.wx-list-screen[data-v-8c7e5ad1]{display:flex;flex-direction:column;gap:var(--wx-gap, var(--wx-space-16));min-width:0;container-type:inline-size}.wx-list-screen.is-fill[data-v-8c7e5ad1]{min-height:0}.wx-list-screen.is-fill[data-v-8c7e5ad1]>:last-child{flex:1 1 auto;min-height:0}.wx-list-screen.is-fill[data-v-8c7e5ad1] .wx-tabs,.wx-list-screen.is-fill[data-v-8c7e5ad1] .wx-tabs__layout,.wx-list-screen.is-fill[data-v-8c7e5ad1] .wx-tabs__panels{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.wx-list-screen.is-fill[data-v-8c7e5ad1] .wx-tabs__panel,.wx-list-screen.is-fill[data-v-8c7e5ad1] .wx-tabs__panel>*{flex:1 1 auto;min-height:0}.wx-list-screen.is-fill[data-v-8c7e5ad1] .wx-tabs__bar{flex:0 0 auto}.wx-admin[data-v-5baa6cbf]{--wx-admin-header-height: 52px;min-height:100dvh;background:var(--wx-bg-body)}.wx-admin--drawer[data-v-5baa6cbf]{--wx-gap: var(--wx-space-8)}.wx-admin--rail[data-v-5baa6cbf]{--wx-gap: var(--wx-space-12)}.wx-admin--sidebar[data-v-5baa6cbf]{--wx-gap: var(--wx-space-16)}.wx-admin__frame[data-v-5baa6cbf]{padding:var(--wx-gap);gap:var(--wx-gap)}.wx-admin__header[data-v-5baa6cbf]{--wx-header-top: var(--wx-gap)}.wx-admin__aside[data-v-5baa6cbf]{--wx-aside-top: var(--wx-gap);--wx-aside-height: calc(100dvh - var(--wx-gap) * 2)}.wx-admin__brand[data-v-5baa6cbf]{display:flex;align-items:center;gap:var(--wx-space-8);box-sizing:border-box;min-height:48px;padding:var(--wx-space-8);border-bottom:1px solid var(--wx-border-muted)}.wx-aside--collapsed .wx-admin__brand[data-v-5baa6cbf]{justify-content:center;padding-inline:var(--wx-space-4)}.wx-admin__brand--stacked[data-v-5baa6cbf]{flex-direction:column;gap:var(--wx-space-4)}.wx-admin__title[data-v-5baa6cbf]{flex:1 1 auto;min-width:0}.wx-admin__brand>.wx-admin__logo[data-v-5baa6cbf]{margin-inline-end:auto}.wx-admin__logo[data-v-5baa6cbf]{flex:0 1 auto;min-width:0;height:28px;width:auto;max-width:100%;object-fit:contain;object-position:left center}.wx-admin__mark[data-v-5baa6cbf]{height:24px;width:24px;object-fit:contain}.wx-admin__user[data-v-5baa6cbf]{display:flex;align-items:center;padding:var(--wx-space-8);border-top:1px solid var(--wx-border-muted)}.wx-aside--collapsed .wx-admin__user[data-v-5baa6cbf]{justify-content:center}.wx-admin__user--drawer[data-v-5baa6cbf]{flex:1 1 auto;justify-content:flex-start;padding:0;border-top:none}.wx-admin__screen[data-v-5baa6cbf]{--wx-fill-height: calc(100dvh - var(--wx-gap) * 2);--wx-action-bar-bottom: var(--wx-gap);min-width:0;min-height:0}.wx-admin--drawer .wx-admin__screen[data-v-5baa6cbf]{--wx-fill-height: calc(100dvh - var(--wx-gap) * 3 - var(--wx-admin-header-height))}.wx-admin-plain[data-v-5baa6cbf]{display:grid;place-items:center;box-sizing:border-box;min-height:100dvh;padding:var(--wx-space-16);background:var(--wx-bg-body)}html:has(>body>#webx-app),body:has(>#webx-app){margin:0}.wx-admin--drawer .wx-action--md{--wx-action-size: 30px}.wx-admin--drawer .wx-action--lg{--wx-action-size: 36px}.wx-admin__drawer .wx-drawer__content>.wx-menu{padding-inline:0}:root[data-wx-shell=drawer]{--wx-gap: var(--wx-space-8)}:root[data-wx-shell=rail]{--wx-gap: var(--wx-space-12)}:root[data-wx-shell=sidebar]{--wx-gap: var(--wx-space-16)}.wx-rename[data-v-d879e8d3]{display:flex;flex-direction:column;gap:var(--wx-space-12)}.wx-rename__footer[data-v-d879e8d3]{display:flex;justify-content:flex-end}.wx-help[data-v-6c280d42]{color:var(--wx-text-default);font-size:var(--wx-font-size-md);line-height:var(--wx-font-line-height-normal)}.wx-help[data-v-6c280d42] h2,.wx-help[data-v-6c280d42] h3,.wx-help[data-v-6c280d42] h4{margin-block:var(--wx-space-18) var(--wx-space-8);font-weight:var(--wx-font-weight-semibold)}.wx-help[data-v-6c280d42] h2{font-size:var(--wx-font-size-lg)}.wx-help[data-v-6c280d42] h3,.wx-help[data-v-6c280d42] h4{font-size:var(--wx-font-size-md)}.wx-help[data-v-6c280d42] :is(h2,h3,h4):first-child{margin-block-start:0}.wx-help[data-v-6c280d42] p,.wx-help[data-v-6c280d42] ul,.wx-help[data-v-6c280d42] ol{margin-block:0 var(--wx-space-12)}.wx-help[data-v-6c280d42] ul,.wx-help[data-v-6c280d42] ol{padding-inline-start:var(--wx-space-24)}.wx-help[data-v-6c280d42] li{margin-block-end:var(--wx-space-4)}.wx-help[data-v-6c280d42] code{padding:0 var(--wx-space-4);border-radius:var(--wx-radius-xs);background:var(--wx-bg-subtle);font-family:var(--wx-font-family-mono);font-size:var(--wx-font-size-sm)}.wx-help[data-v-6c280d42] pre{margin-block:0 var(--wx-space-12);padding:var(--wx-space-12);border-radius:var(--wx-radius-sm);background:var(--wx-bg-subtle);overflow:auto}.wx-help[data-v-6c280d42] pre code{padding:0;background:none}.wx-help[data-v-6c280d42] a{color:var(--wx-color-primary)}.wx-notes[data-v-71004c1a]{display:flex;flex-direction:column;gap:var(--wx-space-12);min-width:0;container-type:inline-size}.wx-notes__list[data-v-71004c1a]{display:flex;flex-direction:column;gap:var(--wx-space-12);margin:0;padding:0;list-style:none}.wx-note[data-v-71004c1a]{display:flex;gap:var(--wx-space-8);min-width:0}.wx-note__body[data-v-71004c1a]{display:flex;flex-direction:column;gap:var(--wx-space-4);flex:1 1 auto;min-width:0}.wx-note__head[data-v-71004c1a]{display:flex;align-items:center;gap:var(--wx-space-8);min-width:0}.wx-note__head[data-v-71004c1a]>:last-child{margin-inline-start:auto}.wx-note__text[data-v-71004c1a]{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--wx-font-size-sm);color:var(--wx-text-default)}.wx-note__buttons[data-v-71004c1a]{display:flex;align-items:flex-start;gap:var(--wx-space-8)}.wx-notes__new[data-v-71004c1a]{display:flex;flex-direction:column;align-items:stretch;gap:var(--wx-space-8)}.wx-notes__new[data-v-71004c1a]>:first-child{min-width:0}.wx-notes__new[data-v-71004c1a]>:last-child{align-self:flex-start}@container (max-width: 440px){.wx-note__buttons[data-v-71004c1a]{flex-direction:column;align-items:stretch}.wx-notes__new[data-v-71004c1a]>:last-child{align-self:stretch}}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { RouteRecordRaw } from 'vue-router';
|
|
2
|
-
import { IconName } from '@webx-ui/core';
|
|
2
|
+
import { ButtonVariant, IconName } from '@webx-ui/core';
|
|
3
3
|
import { TypeRegistry } from '@webx-ui/schema';
|
|
4
4
|
import { LocaleDescriptor } from './i18n';
|
|
5
5
|
/**
|
|
@@ -44,6 +44,8 @@ export interface BrandingImage {
|
|
|
44
44
|
export interface ManifestGroup {
|
|
45
45
|
id: string;
|
|
46
46
|
title: string;
|
|
47
|
+
/** A name from the icon set; `null` or absent leaves the branch with the default picture. */
|
|
48
|
+
icon?: string | null;
|
|
47
49
|
order: number;
|
|
48
50
|
}
|
|
49
51
|
export interface ManifestModule {
|
|
@@ -106,6 +108,30 @@ export interface AdminModule {
|
|
|
106
108
|
* registry every screen in the panel is drawn with.
|
|
107
109
|
*/
|
|
108
110
|
types?: TypeRegistry;
|
|
111
|
+
/**
|
|
112
|
+
* Opens a library and answers with the picture that was chosen, or `null` if nobody chose
|
|
113
|
+
* one.
|
|
114
|
+
*
|
|
115
|
+
* The seam exists because the panel's own fields need a picture — `wx-rich-text` has an
|
|
116
|
+
* image button — and the panel cannot depend on the module that has the files: it is the
|
|
117
|
+
* other way round. A module supplies this, the panel asks for it, and a panel without one
|
|
118
|
+
* simply does not offer the button.
|
|
119
|
+
*/
|
|
120
|
+
pickImage?: () => Promise<PickedImage | null>;
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* A picture out of a library: where it is right now, and the key it is filed under.
|
|
124
|
+
*
|
|
125
|
+
* Both, because they answer different questions. The address is what draws the picture in this
|
|
126
|
+
* browser this minute — it may be signed and about to expire, and it carries a version stamp
|
|
127
|
+
* that changes the moment somebody crops the image. The key is what goes into the record, so
|
|
128
|
+
* the address can be worked out again: a library that moves to another bucket, a site deployed
|
|
129
|
+
* against a different CDN and an image edited in place all change the address and none of them
|
|
130
|
+
* change the key.
|
|
131
|
+
*/
|
|
132
|
+
export interface PickedImage {
|
|
133
|
+
url: string;
|
|
134
|
+
path?: string;
|
|
109
135
|
}
|
|
110
136
|
export type AdminStatus = 'loading' | 'ready' | 'unauthenticated' | 'error';
|
|
111
137
|
export interface NavEntry {
|
|
@@ -120,6 +146,7 @@ export interface NavEntry {
|
|
|
120
146
|
export interface NavGroup {
|
|
121
147
|
id: string;
|
|
122
148
|
title: string;
|
|
149
|
+
icon: string | null;
|
|
123
150
|
entries: NavEntry[];
|
|
124
151
|
}
|
|
125
152
|
/**
|
|
@@ -147,3 +174,43 @@ export interface RowAction {
|
|
|
147
174
|
target?: string;
|
|
148
175
|
run?: () => void;
|
|
149
176
|
}
|
|
177
|
+
/**
|
|
178
|
+
* One thing a screen offers, in its head.
|
|
179
|
+
*
|
|
180
|
+
* The same reason a row's menu is data: the head draws the action twice over its life — as a
|
|
181
|
+
* button while there is room for one, as a line of the `···` once there is not — and a vnode
|
|
182
|
+
* cannot be mounted in two places (CLAUDE.md §4). Declared once, `WxScreenHead` decides which
|
|
183
|
+
* it is at the width it happens to have.
|
|
184
|
+
*/
|
|
185
|
+
export interface ScreenAction extends RowAction {
|
|
186
|
+
/**
|
|
187
|
+
* The one action the screen exists for: filled, blue, with the word on it. It is the one
|
|
188
|
+
* that stays a button when everything else folds into the menu. One per screen (§18.3) —
|
|
189
|
+
* a screen with two of these has none.
|
|
190
|
+
*/
|
|
191
|
+
primary?: boolean;
|
|
192
|
+
/**
|
|
193
|
+
* Never a button: this one lives in the `···` at every width. A destructive action is there
|
|
194
|
+
* whether it says so or not — red beside the name of the record is not where it belongs.
|
|
195
|
+
*/
|
|
196
|
+
menu?: boolean;
|
|
197
|
+
/** Shows a spinner and blocks the button: saving, publishing. */
|
|
198
|
+
loading?: boolean;
|
|
199
|
+
/** Weight of a button that is not the primary one. `outline` unless said otherwise. */
|
|
200
|
+
variant?: ButtonVariant;
|
|
201
|
+
}
|
|
202
|
+
/**
|
|
203
|
+
* One filter that is on, said in the reader's words.
|
|
204
|
+
*
|
|
205
|
+
* A shut panel of filters says nothing about itself, and a list narrowed by something nobody
|
|
206
|
+
* can see is a list that looks wrong. Sections build these — only a section knows that
|
|
207
|
+
* `rubric=2` reads "Rubric: News" — and `WxFilterChips` draws them the same way everywhere.
|
|
208
|
+
*/
|
|
209
|
+
export interface AppliedFilter {
|
|
210
|
+
/** Unique within the strip. */
|
|
211
|
+
key: string;
|
|
212
|
+
/** What it says on the chip: the field and its value. */
|
|
213
|
+
label: string;
|
|
214
|
+
/** Takes this one filter off. */
|
|
215
|
+
clear: () => void;
|
|
216
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webx-ui/module-admin",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "The frame a WebX UI admin panel runs in: bootstrap, the shell, the HTTP client and the module registry that pairs with webx-ui/module-admin on the server.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"vue-router": "^4.5.0"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@webx-ui/core": "^0.
|
|
48
|
-
"@webx-ui/schema": "^0.3.
|
|
47
|
+
"@webx-ui/core": "^0.26.0",
|
|
48
|
+
"@webx-ui/schema": "^0.3.3",
|
|
49
49
|
"@webx-ui/tokens": "^0.3.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|