@wssto2/vue-core 0.19.0 → 0.20.0

package/dist/content/previewFrame.d.ts

@@ -0,0 +1,50 @@
+/** The widths a page is previewed at, in CSS pixels. */
+export declare const PREVIEW_WIDTHS: {
+    readonly desktop: 1280;
+    readonly tablet: 768;
+    readonly mobile: 375;
+};
+export type PreviewDevice = keyof typeof PREVIEW_WIDTHS;
+/**
+ * How much a page rendered at `width` px must shrink to fit `available` px: never above 1 (a narrow page is not stretched), and 1 while
+ * the pane has not been measured yet.
+ */
+export declare function previewScale(available: number, width: number): number;
+/**
+ * What the previewed page tells the editor, as `window.parent.postMessage(action, origin)` from the page's own script: the edit,
+ * delete, add, reorder, duplicate and copy-locale buttons the page draws on its components. `id` names the component.
+ */
+export type PreviewAction = {
+    type: "edit";
+    id: string;
+} | {
+    type: "delete";
+    id: string;
+} | {
+    type: "duplicate";
+    id: string;
+}
+/** A new component after the one `after` names; without it, at the start. */
+ | {
+    type: "add";
+    after?: string;
+}
+/** The component moves to position `to` (from 0). */
+ | {
+    type: "reorder";
+    id: string;
+    to: number;
+}
+/** Fill the component's current language with the text of `from`. */
+ | {
+    type: "copy-locale";
+    id: string;
+    from: string;
+};
+/** What the editor tells the page, through `PreviewFrame.post()`: anything with a `type`. */
+export type PreviewCommand = {
+    type: string;
+    [key: string]: unknown;
+};
+/** The default reading of a message from the page: one of `PreviewAction`, with the fields its kind needs, or null. */
+export declare function parsePreviewAction(data: unknown): PreviewAction | null;

package/dist/{contributions-B0x5x5xD.js → contributions-BSmIRPg1.js}

@@ -1,6 +1,6 @@
 import { defineComponent as i, h as l } from "vue";
 import { d as u } from "./context-Ch1r4fdN.js";
-import { h as a } from "./platform-DU9QFts8.js";
+import { h as a } from "./platform-YWfOO7b2.js";
 function h(o, n) {
   const t = o.map(({ contribution: e }) => e).sort((e, r) => (e.order ?? 0) - (r.order ?? 0));
   return {

package/dist/controls/SortableList.vue.d.ts

@@ -0,0 +1,31 @@
+declare const _default: <Item>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onMove?: ((item: Item, from: number, to: number) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: Item[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onMove"> & ({
+        itemKey: (keyof Item & string) | ((item: Item) => string | number);
+        /** The accessible name of the list. */
+        label?: string;
+        /** What the handle and the announcement call a row; by default the row's key. */
+        itemLabel?: (item: Item) => string;
+        disabled?: boolean;
+    } & {
+        modelValue: Item[];
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        item?: (scope: {
+            item: Item;
+            index: number;
+            dragging: boolean;
+        }) => unknown;
+    };
+    emit: ((evt: "move", item: Item, from: number, to: number) => void) & ((evt: "update:modelValue", value: Item[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/controls/Tabs.vue.d.ts

@@ -13,6 +13,8 @@ export interface TabItem<Value extends string | number = string | number> {
     badge?: string | number;
     /** The reason this tab needs attention; shown as an icon with this text as its name. */
     warning?: string;
+    /** A failed field inside this tab: a red icon with this text as its name (a warning is amber and softer). */
+    error?: string;
     to?: RouteLocationRaw;
 }
 declare const _default: <Value extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{

package/dist/controls/index.d.ts

@@ -2,6 +2,7 @@ export { default as IconTile } from "./IconTile.vue";
 export { default as PopupButton } from "./PopupButton.vue";
 export { default as DateButton } from "./DateButton.vue";
 export { default as SearchInput } from "./SearchInput.vue";
+export { default as SortableList } from "./SortableList.vue";
 export { default as Tabs, type TabItem } from "./Tabs.vue";
 export { default as SwipeActions, type SwipeAction } from "./SwipeActions.vue";
 export { controlSurface, controlSurfacePairs, controlWidth, controlWidthPair, type ClassPair, type ControlKind, type ControlState, type ControlWidth, } from "./controlSurface";

package/dist/controls/index.js

@@ -1,15 +1,16 @@
-import { _ as C } from "../IconTile.vue_vue_type_script_setup_true_lang-BmxCuUZ9.js";
-import { defineComponent as p, useSlots as c, openBlock as o, createElementBlock as a, normalizeClass as u, createElementVNode as f, renderSlot as m, toDisplayString as x, createVNode as b, unref as _ } from "vue";
-import { _ as v } from "../Icon.vue_vue_type_script_lang-BhhsFYwp.js";
-import { _ as z } from "../DateButton.vue_vue_type_script_setup_true_lang-CovKG5lN.js";
-import { _ as I } from "../SearchInput.vue_vue_type_script_setup_true_lang-w4eAqyZ9.js";
-import { _ as T } from "../Tabs.vue_vue_type_script_setup_true_lang-tpkGp98F.js";
-import { _ as W } from "../SwipeActions.vue_vue_type_script_setup_true_lang-D8SiC0G7.js";
-import { c as A, a as L, b as U, d as j } from "../controlSurface-t7OEFESJ.js";
-const h = ["disabled", "aria-haspopup", "aria-expanded", "aria-invalid"], y = { class: "min-w-0 truncate" }, g = {
+import { _ as pe } from "../IconTile.vue_vue_type_script_setup_true_lang-BWHQiA7d.js";
+import { defineComponent as P, useSlots as N, openBlock as u, createElementBlock as p, normalizeClass as A, createElementVNode as b, renderSlot as C, toDisplayString as w, createVNode as D, unref as c, useModel as U, useId as q, useTemplateRef as F, ref as $, computed as O, Fragment as R, renderList as W, normalizeStyle as j, createCommentVNode as G, mergeModels as I, nextTick as H } from "vue";
+import { _ as M } from "../Icon.vue_vue_type_script_lang-0pW1XBaE.js";
+import { _ as me } from "../DateButton.vue_vue_type_script_setup_true_lang-CovKG5lN.js";
+import { _ as ve } from "../SearchInput.vue_vue_type_script_setup_true_lang-w4eAqyZ9.js";
+import { useI18n as J } from "vue-i18n";
+import { _ as ge } from "../Tabs.vue_vue_type_script_setup_true_lang-Cma_ma6V.js";
+import { _ as _e } from "../SwipeActions.vue_vue_type_script_setup_true_lang-BBqcW3MR.js";
+import { c as we, a as ke, b as Le, d as Se } from "../controlSurface-t7OEFESJ.js";
+const Q = ["disabled", "aria-haspopup", "aria-expanded", "aria-invalid"], X = { class: "min-w-0 truncate" }, Z = {
   key: 1,
   class: "text-content-disabled"
-}, S = /* @__PURE__ */ p({
+}, ie = /* @__PURE__ */ P({
   __name: "PopupButton",
   props: {
     variant: { default: "filled" },
@@ -20,37 +21,135 @@ const h = ["disabled", "aria-haspopup", "aria-expanded", "aria-invalid"], y = {
     popup: { default: "listbox" }
   },
   emits: ["click"],
-  setup(n, { emit: i }) {
-    const e = n, s = i, l = c();
-    return (r, t) => (o(), a("button", {
+  setup(v, { emit: _ }) {
+    const o = v, s = _, x = N();
+    return (f, m) => (u(), p("button", {
       type: "button",
-      disabled: e.disabled,
-      "aria-haspopup": e.popup,
-      "aria-expanded": e.expanded,
-      "aria-invalid": e.invalid || void 0,
-      class: u(["hit-target inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-control text-body transition-colors duration-motion-fast ease-motion-standard focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:cursor-not-allowed disabled:opacity-45", e.variant === "filled" ? ["py-1 pl-2.5 pr-2 text-content-strong", e.expanded ? "bg-fill-strong" : "bg-fill hover:bg-fill-strong"] : ["py-1", e.expanded ? "text-content-link" : "text-content-muted hover:text-content"]]),
-      onClick: t[0] || (t[0] = (d) => s("click", d))
+      disabled: o.disabled,
+      "aria-haspopup": o.popup,
+      "aria-expanded": o.expanded,
+      "aria-invalid": o.invalid || void 0,
+      class: A(["hit-target inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-control text-body transition-colors duration-motion-fast ease-motion-standard focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:cursor-not-allowed disabled:opacity-45", o.variant === "filled" ? ["py-1 pl-2.5 pr-2 text-content-strong", o.expanded ? "bg-fill-strong" : "bg-fill hover:bg-fill-strong"] : ["py-1", o.expanded ? "text-content-link" : "text-content-muted hover:text-content"]]),
+      onClick: m[0] || (m[0] = (y) => s("click", y))
     }, [
-      f("span", y, [
-        l.default ? m(r.$slots, "default", {}, void 0, void 0, 0) : (o(), a("span", g, x(e.placeholder), 1))
+      b("span", X, [
+        x.default ? C(f.$slots, "default", {}, void 0, void 0, 0) : (u(), p("span", Z, w(o.placeholder), 1))
       ]),
-      b(_(v), {
+      D(c(M), {
         name: "expandUpDownLine",
         size: 14,
         class: "text-content-muted"
       })
-    ], 10, h));
+    ], 10, Q));
+  }
+}), ee = ["aria-label"], te = ["aria-label", "aria-describedby", "onKeydown", "onPointerdown"], oe = { class: "min-w-0 flex-1 py-1.5 pr-2" }, ae = ["id"], ne = {
+  role: "status",
+  "aria-live": "polite",
+  class: "sr-only",
+  "data-sortable-live": ""
+}, de = /* @__PURE__ */ P({
+  __name: "SortableList",
+  props: /* @__PURE__ */ I({
+    itemKey: {},
+    label: { default: void 0 },
+    itemLabel: { type: Function, default: void 0 },
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ I(["move"], ["update:modelValue"]),
+  setup(v, { emit: _ }) {
+    const o = v, s = U(v, "modelValue"), x = _, { t: f } = J(), m = q(), y = F("list"), k = $(""), a = $(null), L = (e) => typeof o.itemKey == "function" ? o.itemKey(e) : e[o.itemKey], S = (e) => o.itemLabel?.(e) ?? String(L(e)), T = O(() => s.value.length);
+    function B(e, r) {
+      const t = Math.min(Math.max(r, 0), s.value.length - 1);
+      if (e === t) return !1;
+      const n = [...s.value], [l] = n.splice(e, 1);
+      return n.splice(t, 0, l), s.value = n, x("move", l, e, t), k.value = f("core.sortable.moved", { item: S(l), position: t + 1, total: T.value }), !0;
+    }
+    async function V(e, r) {
+      if (!e.altKey || e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+      e.preventDefault();
+      const t = e.currentTarget;
+      B(r, r + (e.key === "ArrowUp" ? -1 : 1)) && (await H(), document.activeElement !== t && t.focus());
+    }
+    function z() {
+      return Array.from(y.value?.querySelectorAll(":scope > [data-sortable-row]") ?? []);
+    }
+    function Y(e, r) {
+      if (o.disabled || e.button !== 0) return;
+      const t = e.currentTarget;
+      t.setPointerCapture?.(e.pointerId);
+      const n = e.clientY;
+      a.value = { from: r, to: r, offset: 0 };
+      const l = (i) => {
+        const d = z().map((h) => h.getBoundingClientRect()), K = d.findIndex((h) => i < h.top + h.height / 2);
+        return K < 0 ? d.length - 1 : K;
+      }, E = (i) => {
+        a.value && (a.value = { from: r, to: l(i.clientY), offset: i.clientY - n });
+      }, g = (i) => {
+        t.removeEventListener("pointermove", E), t.removeEventListener("pointerup", g), t.removeEventListener("pointercancel", g);
+        const d = i.type === "pointerup" ? a.value : null;
+        a.value = null, d && B(d.from, d.to);
+      };
+      t.addEventListener("pointermove", E), t.addEventListener("pointerup", g), t.addEventListener("pointercancel", g);
+    }
+    return (e, r) => (u(), p("div", null, [
+      b("ul", {
+        ref_key: "list",
+        ref: y,
+        "aria-label": o.label,
+        class: "flex flex-col gap-1.5",
+        "data-sortable-list": ""
+      }, [
+        (u(!0), p(R, null, W(s.value, (t, n) => (u(), p("li", {
+          key: L(t),
+          "data-sortable-row": "",
+          class: A(["relative flex items-stretch gap-1 rounded-md border border-border-separator bg-surface-cell", [a.value?.from === n ? "z-10 shadow-md" : "", a.value && a.value.from !== n && a.value.to === n ? a.value.to > a.value.from ? "border-b-2 border-b-border-focus" : "border-t-2 border-t-border-focus" : ""]]),
+          style: j(a.value?.from === n ? { transform: `translateY(${a.value.offset}px)` } : void 0)
+        }, [
+          o.disabled ? G("", !0) : (u(), p("button", {
+            key: 0,
+            type: "button",
+            "data-sortable-handle": "",
+            "aria-label": c(f)("core.sortable.handle", { item: S(t) }),
+            "aria-describedby": c(m),
+            class: "flex w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-l-md text-content-muted hover:bg-fill focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-border-focus",
+            onKeydown: (l) => V(l, n),
+            onPointerdown: (l) => Y(l, n)
+          }, [
+            D(c(M), {
+              name: "draggable",
+              size: 16
+            })
+          ], 40, te)),
+          b("div", oe, [
+            C(e.$slots, "item", {
+              item: t,
+              index: n,
+              dragging: a.value?.from === n
+            })
+          ])
+        ], 6))), 128))
+      ], 8, ee),
+      b("p", {
+        id: c(m),
+        class: "sr-only"
+      }, w(c(f)("core.sortable.hint")), 9, ae),
+      b("p", ne, w(k.value), 1)
+    ]));
   }
 });
 export {
-  z as DateButton,
-  C as IconTile,
-  S as PopupButton,
-  I as SearchInput,
-  W as SwipeActions,
-  T as Tabs,
-  A as controlSurface,
-  L as controlSurfacePairs,
-  U as controlWidth,
-  j as controlWidthPair
+  me as DateButton,
+  pe as IconTile,
+  ie as PopupButton,
+  ve as SearchInput,
+  de as SortableList,
+  _e as SwipeActions,
+  ge as Tabs,
+  we as controlSurface,
+  ke as controlSurfacePairs,
+  Le as controlWidth,
+  Se as controlWidthPair
 };

package/dist/form/CodeEditor.vue.d.ts

@@ -0,0 +1,61 @@
+import { type CodeLanguage, type CodeMarker } from "./codeEditor";
+/**
+ * The editor of `CodeField` without the field around it (no label, no error row, no border): source code in a box that you place
+ * yourself, as the pane of a workbench. It is CodeMirror 6, optional peer dependencies loaded when the editor first shows (see
+ * `loadCodeEditor`); an application that never shows one never loads them.
+ *
+ * - `fill`: the editor takes the height of its parent (which must have one); otherwise `height`.
+ * - `reveal(line, column?)` (template ref): puts the cursor there, scrolls it into view and focuses the editor. A call made while
+ *   the editor is still loading is carried out when it is ready.
+ * - `@cursor`: `{ line, column }` (from 1) whenever the cursor moves, for a "Line 14, column 8" readout.
+ * - `markers`: the server's findings, drawn in the gutter and as an underline (the browser checks nothing).
+ * - `@save`: Ctrl/Cmd+S (the browser's own save is suppressed). Tab indents; Esc, then Tab, moves on to the next control.
+ *
+ *   <CodeEditor ref="editor" v-model="source" language="liquid" fill :markers="lint" label="Template" @save="save" @cursor="at = $event" />
+ *   editor.value?.reveal(14, 8)
+ */
+type __VLS_Props = {
+    modelValue?: string;
+    language?: CodeLanguage;
+    /** Visible and selectable, not editable. */
+    readonly?: boolean;
+    lineNumbers?: boolean;
+    /** The editor takes the height of its parent instead of `height`. */
+    fill?: boolean;
+    /** Any CSS length; ignored with `fill`. */
+    height?: string;
+    markers?: readonly CodeMarker[];
+    /** The accessible name of the editor. */
+    label?: string;
+};
+declare function reveal(line: number, column?: number): void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    focus: () => void | undefined;
+    reveal: typeof reveal;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    save: () => any;
+    failed: () => any;
+    "update:modelValue": (source: string) => any;
+    cursor: (position: {
+        line: number;
+        column: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSave?: (() => any) | undefined;
+    onFailed?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((source: string) => any) | undefined;
+    onCursor?: ((position: {
+        line: number;
+        column: number;
+    }) => any) | undefined;
+}>, {
+    fill: boolean;
+    label: string;
+    height: string;
+    modelValue: string;
+    readonly: boolean;
+    language: CodeLanguage;
+    lineNumbers: boolean;
+    markers: readonly CodeMarker[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/form/I18nField.vue.d.ts

@@ -40,8 +40,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     required: boolean;
     presentation: "control" | "value";
     maxLength: number;
-    labelHidden: boolean;
     rows: number;
+    labelHidden: boolean;
     hint: string;
     editable: boolean;
     lockedReason: string;

package/dist/form/MarkerList.vue.d.ts

@@ -0,0 +1,20 @@
+import type { CodeMarker } from "./codeEditor";
+/**
+ * The findings of the server's linter as a list under the editor: errors first, then warnings, each group headed by its count
+ * ("2 greške"; the plural forms of the locale), each finding one button ("Redak 6, stupac 2 · message") that reports `select`
+ * so the app can `reveal` the line in the `CodeEditor`. Nothing to list shows "All clear" ("U redu"). Severity is a word and an
+ * icon, never a colour alone. The buttons are in the tab order.
+ *
+ *   <MarkerList :markers="lint" @select="(marker) => editor?.reveal(marker.line, marker.column)" />
+ *
+ * Counts use the plural rules of the application's locale: `createApplication` installs them; a bare `createI18n` needs `pluralRules: slavicPluralRules`.
+ */
+type __VLS_Props = {
+    markers: readonly CodeMarker[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (marker: CodeMarker) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((marker: CodeMarker) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/form/TextareaField.vue.d.ts

@@ -37,9 +37,9 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     required: boolean;
     presentation: "control" | "value";
     maxLength: number;
+    rows: number;
     stacked: boolean;
     labelHidden: boolean;
-    rows: number;
     hint: string;
     editable: boolean;
     lockedReason: string;

package/dist/form/index.d.ts

@@ -85,7 +85,9 @@ export { default as DynamicForm } from "./dynamic/DynamicForm.vue";
 export { default as RepeatField } from "./dynamic/RepeatField.vue";
 export { default as ResourceField } from "./dynamic/ResourceField.vue";
 export { default as RichTextField } from "./dynamic/RichTextField.vue";
+export { default as CodeEditor } from "./CodeEditor.vue";
 export { default as CodeField } from "./CodeField.vue";
+export { default as MarkerList } from "./MarkerList.vue";
 export type { CodeLanguage, CodeMarker } from "./codeEditor";
 export { evaluateVisibility, isEmptyValue } from "./dynamic/visibility";
 export { buildValidator } from "./dynamic/validator";