@pancake-pos/ui-extensions 2026.1.3 → 2026.1.5

package/dist/elements.generated.d.ts

@@ -59,6 +59,29 @@ export interface PosButtonElement extends PosButtonProps {
     focus(): void;
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-chart>`. */
+export interface PosChartProps {
+    type?: "line" | "bar" | "area" | "pie";
+    data?: (Record<string, string | number | null>)[];
+    xKey?: string;
+    series?: ({
+        key: string;
+        label: string;
+        format?: "number" | "money";
+    })[];
+    stacked?: boolean;
+    height?: number;
+    loading?: boolean;
+    emptyText?: string;
+}
+/** Sự kiện của `<pos-chart>` → kiểu `event.detail`. */
+export interface PosChartEvents {
+}
+export interface PosChartAttributes extends PosChartProps, PosBaseAttributes {
+}
+export interface PosChartElement extends PosChartProps {
+    scrollIntoView(): void;
+}
 /** Thuộc tính của `<pos-checkbox>`. */
 export interface PosCheckboxProps {
     label?: string;
@@ -116,6 +139,17 @@ export interface PosDividerAttributes extends PosDividerProps, PosBaseAttributes
 export interface PosDividerElement extends PosDividerProps {
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-filter-bar>`. */
+export interface PosFilterBarProps {
+}
+/** Sự kiện của `<pos-filter-bar>` → kiểu `event.detail`. */
+export interface PosFilterBarEvents {
+}
+export interface PosFilterBarAttributes extends PosFilterBarProps, PosBaseAttributes {
+}
+export interface PosFilterBarElement extends PosFilterBarProps {
+    scrollIntoView(): void;
+}
 /** Thuộc tính của `<pos-grid>`. */
 export interface PosGridProps {
     columns?: number;
@@ -227,6 +261,20 @@ export interface PosNumberFieldElement extends PosNumberFieldProps {
     focus(): void;
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-page>`. */
+export interface PosPageProps {
+    heading?: string;
+    description?: string;
+    width?: "narrow" | "default" | "full";
+}
+/** Sự kiện của `<pos-page>` → kiểu `event.detail`. */
+export interface PosPageEvents {
+}
+export interface PosPageAttributes extends PosPageProps, PosBaseAttributes {
+}
+export interface PosPageElement extends PosPageProps {
+    scrollIntoView(): void;
+}
 /** Thuộc tính của `<pos-section>`. */
 export interface PosSectionProps {
     heading?: string;
@@ -332,6 +380,26 @@ export interface PosTableAttributes extends PosTableProps, PosBaseAttributes {
 export interface PosTableElement extends PosTableProps {
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-tabs>`. */
+export interface PosTabsProps {
+    tabs?: {
+        id: string;
+        label: string;
+        badge?: number;
+        disabled?: boolean;
+    }[];
+    selected?: string;
+}
+/** Sự kiện của `<pos-tabs>` → kiểu `event.detail`. */
+export interface PosTabsEvents {
+    change: string;
+}
+export interface PosTabsAttributes extends PosTabsProps, PosBaseAttributes {
+    onChange?: (event: PosEvent<PosTabsEvents["change"]>) => void;
+}
+export interface PosTabsElement extends PosTabsProps {
+    scrollIntoView(): void;
+}
 /** Thuộc tính của `<pos-text>`. */
 export interface PosTextProps {
     tone?: "default" | "subdued" | "success" | "warning" | "critical";
@@ -376,9 +444,11 @@ export interface PosIntrinsicElements {
     "pos-badge": PosBadgeAttributes;
     "pos-banner": PosBannerAttributes;
     "pos-button": PosButtonAttributes;
+    "pos-chart": PosChartAttributes;
     "pos-checkbox": PosCheckboxAttributes;
     "pos-date-picker": PosDatePickerAttributes;
     "pos-divider": PosDividerAttributes;
+    "pos-filter-bar": PosFilterBarAttributes;
     "pos-grid": PosGridAttributes;
     "pos-heading": PosHeadingAttributes;
     "pos-image": PosImageAttributes;
@@ -386,11 +456,13 @@ export interface PosIntrinsicElements {
     "pos-modal": PosModalAttributes;
     "pos-money": PosMoneyAttributes;
     "pos-number-field": PosNumberFieldAttributes;
+    "pos-page": PosPageAttributes;
     "pos-section": PosSectionAttributes;
     "pos-select": PosSelectAttributes;
     "pos-spinner": PosSpinnerAttributes;
     "pos-stack": PosStackAttributes;
     "pos-table": PosTableAttributes;
+    "pos-tabs": PosTabsAttributes;
     "pos-text": PosTextAttributes;
     "pos-text-field": PosTextFieldAttributes;
 }
@@ -399,9 +471,11 @@ export interface PosHTMLElementTagNameMap {
     "pos-badge": Omit<HTMLElement, keyof PosBadgeElement> & PosBadgeElement;
     "pos-banner": Omit<HTMLElement, keyof PosBannerElement> & PosBannerElement;
     "pos-button": Omit<HTMLElement, keyof PosButtonElement> & PosButtonElement;
+    "pos-chart": Omit<HTMLElement, keyof PosChartElement> & PosChartElement;
     "pos-checkbox": Omit<HTMLElement, keyof PosCheckboxElement> & PosCheckboxElement;
     "pos-date-picker": Omit<HTMLElement, keyof PosDatePickerElement> & PosDatePickerElement;
     "pos-divider": Omit<HTMLElement, keyof PosDividerElement> & PosDividerElement;
+    "pos-filter-bar": Omit<HTMLElement, keyof PosFilterBarElement> & PosFilterBarElement;
     "pos-grid": Omit<HTMLElement, keyof PosGridElement> & PosGridElement;
     "pos-heading": Omit<HTMLElement, keyof PosHeadingElement> & PosHeadingElement;
     "pos-image": Omit<HTMLElement, keyof PosImageElement> & PosImageElement;
@@ -409,11 +483,13 @@ export interface PosHTMLElementTagNameMap {
     "pos-modal": Omit<HTMLElement, keyof PosModalElement> & PosModalElement;
     "pos-money": Omit<HTMLElement, keyof PosMoneyElement> & PosMoneyElement;
     "pos-number-field": Omit<HTMLElement, keyof PosNumberFieldElement> & PosNumberFieldElement;
+    "pos-page": Omit<HTMLElement, keyof PosPageElement> & PosPageElement;
     "pos-section": Omit<HTMLElement, keyof PosSectionElement> & PosSectionElement;
     "pos-select": Omit<HTMLElement, keyof PosSelectElement> & PosSelectElement;
     "pos-spinner": Omit<HTMLElement, keyof PosSpinnerElement> & PosSpinnerElement;
     "pos-stack": Omit<HTMLElement, keyof PosStackElement> & PosStackElement;
     "pos-table": Omit<HTMLElement, keyof PosTableElement> & PosTableElement;
+    "pos-tabs": Omit<HTMLElement, keyof PosTabsElement> & PosTabsElement;
     "pos-text": Omit<HTMLElement, keyof PosTextElement> & PosTextElement;
     "pos-text-field": Omit<HTMLElement, keyof PosTextFieldElement> & PosTextFieldElement;
 }

package/dist/page.js

@@ -1,5 +1,8 @@
 // ../app-protocol/src/protocol.ts
 var PROTOCOL_VERSION = 1;
+function hostEvents(context) {
+  return context === "page" ? ["primary-action"] : [];
+}
 function extensionContext(kind, target) {
   if (kind === "hook") return "hook";
   if (kind === "headless") return "action-headless";
@@ -45,6 +48,9 @@ var PosApiError = class extends Error {
     this.name = "PosApiError";
   }
 };
+function withData(value) {
+  return Object.defineProperties({}, Object.getOwnPropertyDescriptors(value));
+}
 function buildQuery(query) {
   if (!query) return "";
   const params = new URLSearchParams();
@@ -60,6 +66,7 @@ function createPos(deps) {
   const { init } = deps;
   const now = deps.now ?? Date.now;
   const context = extensionContext(init.kind, init.target);
+  const events = hostEvents(context);
   const listeners = /* @__PURE__ */ new Map();
   let data = init.data;
   let token = { ...init.token };
@@ -179,18 +186,28 @@ function createPos(deps) {
     },
     on(event, handler) {
       if (event === "data-change") require2("data-change", "pos.on('data-change')");
-      else if (!deps.events?.includes(event)) throw new PosRuntimeError("unavailable", `event ${event} is not available in ${init.target}`);
+      else if (!events.includes(event)) throw new PosRuntimeError("unavailable", `event ${event} is not available in ${init.target}`);
       let set = listeners.get(event);
       if (!set) listeners.set(event, set = /* @__PURE__ */ new Set());
       set.add(handler);
       return () => set.delete(handler);
     }
   };
+  const page = Object.freeze({
+    setTitle(title) {
+      void callHost("page.setTitle", [String(title).slice(0, 200)], "pos.page.setTitle");
+    },
+    setPrimaryAction(action) {
+      const value = action ? { label: String(action.label).slice(0, 50), disabled: !!action.disabled, loading: !!action.loading } : null;
+      void callHost("page.setPrimaryAction", [value], "pos.page.setPrimaryAction");
+    }
+  });
   const emit = (event, payload) => {
+    if (event !== "data-change" && !events.includes(event)) return;
     for (const handler of [...listeners.get(event) ?? []]) handler(payload);
   };
   return {
-    pos: Object.freeze(pos),
+    pos: Object.freeze(context === "page" ? Object.defineProperty(withData(pos), "page", { value: page, enumerable: true }) : pos),
     setData(next) {
       data = next;
       emit("data-change", next);
@@ -257,7 +274,6 @@ function start(port, init) {
   });
   const runtime = createPos({
     init: { ...init, kind: "ui", data: currentLocation() },
-    events: ["primary-action"],
     call,
     fetch: window.fetch.bind(window)
   });
@@ -314,16 +330,8 @@ function start(port, init) {
   };
   window.addEventListener("error", (event) => reportError(event.error ?? event.message));
   window.addEventListener("unhandledrejection", (event) => reportError(event.reason));
-  const page = Object.freeze({
-    setTitle(title) {
-      void call("page.setTitle", [String(title).slice(0, 200)]);
-    },
-    setPrimaryAction(action) {
-      void call("page.setPrimaryAction", [action ? { label: String(action.label).slice(0, 50), disabled: !!action.disabled, loading: !!action.loading } : null]);
-    }
-  });
-  const pos = Object.defineProperties({}, { ...Object.getOwnPropertyDescriptors(runtime.pos), page: { value: page, enumerable: true } });
-  return Object.freeze(pos);
+  const pos = runtime.pos;
+  return pos;
 }
 export {
   PosApiError2 as PosApiError,

package/dist/types.d.ts

@@ -1,4 +1,6 @@
 export type Resource = 'order' | 'product' | 'purchase' | 'export' | 'warehouse_transfer';
+/** Resource có danh sách và action: 5 resource có form chi tiết và khách hàng (`customer.*`). */
+export type ListResource = Resource | 'customer';
 export type OrderRef = {
     /** Mã đơn hiển thị (mã tuỳ chỉnh nếu shop dùng, ngược lại là mã hệ thống). */
     id: string | number;
@@ -104,12 +106,23 @@ export type WarehouseTransferDraft = {
         quantity: number;
     }[];
 };
+/** Khách hàng (`customer.*`). `id` dùng với Open API: `/shops/{shop_id}/customers/{id}`. */
+export type CustomerRef = {
+    id: string;
+    name: string;
+    phone_numbers: string[];
+    tags: (number | string)[];
+    level_id: string | null;
+    assigned_user_id: string | null;
+    updated_at: string | null;
+};
 interface Refs {
     order: OrderRef;
     product: ProductRef;
     purchase: PurchaseRef;
     export: ExportRef;
     warehouse_transfer: WarehouseTransferRef;
+    customer: CustomerRef;
 }
 interface Drafts {
     order: OrderDraft;
@@ -118,7 +131,7 @@ interface Drafts {
     export: ExportDraft;
     warehouse_transfer: WarehouseTransferDraft;
 }
-export type RefOf<R extends Resource> = Refs[R];
+export type RefOf<R extends ListResource> = Refs[R];
 export type DraftOf<R extends Resource> = Drafts[R];
 /** Form chi tiết: `*.details.action`, `*.details.block`, `*.before_submit`. */
 export type DetailsData<R extends Resource = Resource> = {
@@ -130,12 +143,12 @@ export type DetailsData<R extends Resource = Resource> = {
     draft: DraftOf<R>;
 };
 /** Một dòng của danh sách: `*.index.action`. */
-export type IndexData<R extends Resource = Resource> = {
+export type IndexData<R extends ListResource = ListResource> = {
     resource: R;
     record: RefOf<R>;
 };
 /** Thanh thao tác hàng loạt: `*.index.selection-action` (tối đa 500 bản ghi). */
-export type SelectionData<R extends Resource = Resource> = {
+export type SelectionData<R extends ListResource = ListResource> = {
     resource: R;
     records: RefOf<R>[];
 };
@@ -145,13 +158,51 @@ export type AfterSaveInput<R extends Resource = Resource> = {
     record: RefOf<R>;
 };
 export type BeforeSubmitInput<R extends Resource = Resource> = DetailsData<R>;
+/**
+ * Thay đổi app muốn áp vào bản ghi trước khi lưu (`before_submit`): `note` ghi đè ghi chú (≤ 2000 ký tự),
+ * `add_tags` thêm thẻ theo mã thẻ của shop (≤ 20). Resource không có trường đó thì bị bỏ qua.
+ */
+export type BeforeSubmitChanges = {
+    note?: string;
+    add_tags?: (number | string)[];
+};
 /** `message` tối đa 200 ký tự, hiện cho người dùng. */
 export type BeforeSubmitResult = {
     ok: true;
+    changes?: BeforeSubmitChanges;
 } | {
     ok: false;
     message: string;
 };
+/** Hồ sơ khách hàng: `customer.details.block`, `customer.details.action` (cùng dạng `IndexData<'customer'>`). */
+export type CustomerData = {
+    resource: 'customer';
+    record: CustomerRef;
+};
+/** Resource có mẫu in của app (`<resource>.print-action`); sản phẩm chỉ in mã vạch nên không có. */
+export type PrintResource = 'order' | 'purchase' | 'export' | 'warehouse_transfer';
+/** Bản ghi được chọn để in: `<resource>.print-action` (1–500 bản ghi). */
+export type PrintData<R extends PrintResource = PrintResource> = {
+    resource: R;
+    records: RefOf<R>[];
+};
+/** HTML của bản in (≤ 2 MB). POS lọc bỏ script, chỉ giữ ảnh hợp lệ rồi in. */
+export type PrintResult = {
+    html: string;
+    title?: string;
+};
+/** Bản ghi đang hiển thị trên trang danh sách: `<resource>.index.column` (tối đa 500). */
+export type ColumnData<R extends ListResource = ListResource> = {
+    resource: R;
+    records: RefOf<R>[];
+};
+/**
+ * Giá trị của ô theo mã bản ghi: `system_id` với đơn, `id` với resource khác (chuỗi tối đa 200 ký tự). Bản ghi không
+ * có trong `values` để trống.
+ */
+export type ColumnResult = {
+    values: Record<string, string | number | null>;
+};
 export type HeadlessActionResult = {
     message?: string;
     refresh?: boolean;
@@ -162,12 +213,13 @@ export type PageData = {
     query: Record<string, string>;
 };
 export type DetailsTarget<R extends Resource = Resource> = `${R}.details.action` | `${R}.details.block`;
-export type Target = 'app.page' | DetailsTarget | `${Resource}.index.action` | `${Resource}.index.selection-action` | `${Resource}.before_submit` | `${Resource}.after_save`;
-type ResourceOf<T extends string> = T extends `${infer R extends Resource}.${string}` ? R : never;
+export type Target = 'app.page' | DetailsTarget | `${ListResource}.index.action` | `${ListResource}.index.selection-action` | `${Resource}.before_submit` | `${Resource}.after_save` | `${ListResource}.index.column` | `${PrintResource}.print-action` | 'customer.details.block' | 'customer.details.action';
+type ResourceOf<T extends string> = T extends `${infer R extends ListResource}.${string}` ? R : never;
+type FormResourceOf<T extends string> = Extract<ResourceOf<T>, Resource>;
 /** `pos.data` và tham số của module theo target. */
-export type DataOf<T extends Target> = T extends 'app.page' ? PageData : T extends `${string}.index.selection-action` ? SelectionData<ResourceOf<T>> : T extends `${string}.index.action` ? IndexData<ResourceOf<T>> : T extends `${string}.after_save` ? AfterSaveInput<ResourceOf<T>> : DetailsData<ResourceOf<T>>;
+export type DataOf<T extends Target> = T extends 'app.page' ? PageData : T extends 'customer.details.block' | 'customer.details.action' ? CustomerData : T extends `${infer R extends PrintResource}.print-action` ? PrintData<R> : T extends `${string}.index.column` ? ColumnData<ResourceOf<T>> : T extends `${string}.index.selection-action` ? SelectionData<ResourceOf<T>> : T extends `${string}.index.action` ? IndexData<ResourceOf<T>> : T extends `${string}.after_save` ? AfterSaveInput<FormResourceOf<T>> : DetailsData<FormResourceOf<T>>;
 /** Giá trị module trả về theo target (action có giao diện và block tự render, không trả gì). */
-export type ResultOf<T extends Target> = T extends `${string}.before_submit` ? BeforeSubmitResult : T extends `${string}.after_save` | `${string}.details.block` | 'app.page' ? void : HeadlessActionResult;
+export type ResultOf<T extends Target> = T extends `${string}.print-action` ? PrintResult : T extends `${string}.index.column` ? ColumnResult : T extends `${string}.before_submit` ? BeforeSubmitResult : T extends `${string}.after_save` | `${string}.details.block` | 'app.page' ? void : HeadlessActionResult;
 export type ToastOptions = {
     tone?: 'success' | 'error' | 'info' | 'warning';
     duration?: number;
@@ -204,6 +256,15 @@ export interface PosApi {
     delete<T = any>(path: string, options?: RequestOptions): Promise<T>;
 }
 export type PosEventName = 'data-change' | 'primary-action';
+/** Thanh tiêu đề của POS trên trang `app.page` (iframe và Worker UI). */
+export interface PosPageApi {
+    setTitle(title: string): void;
+    setPrimaryAction(action: {
+        label: string;
+        disabled?: boolean;
+        loading?: boolean;
+    } | null): void;
+}
 export interface Pos<D = any> {
     readonly apiVersion: string;
     readonly target: string;
@@ -245,17 +306,12 @@ export interface Pos<D = any> {
     close(): void;
     on(event: 'data-change', handler: (data: D) => void): () => void;
     on(event: PosEventName, handler: (payload: any) => void): () => void;
+    /** Chỉ có ở `app.page` (iframe và Worker UI). */
+    readonly page?: PosPageApi;
 }
-/** `pos` của trang iframe: thêm `pos.page`. */
+/** `pos` của trang (`connect()` ở trang iframe, biến `pos` của trang Worker UI): luôn có `pos.page`. */
 export interface PosPage extends Pos<PageData> {
-    readonly page: {
-        setTitle(title: string): void;
-        setPrimaryAction(action: {
-            label: string;
-            disabled?: boolean;
-            loading?: boolean;
-        } | null): void;
-    };
+    readonly page: PosPageApi;
 }
 /** Lỗi khi gọi `pos.api`; dùng `error.name === 'PosApiError'` hoặc kiểm `status`. */
 export interface PosApiError extends Error {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pancake-pos/ui-extensions",
-  "version": "2026.1.3",
+  "version": "2026.1.5",
   "description": "Types for pos and pos-* elements, defineExtension, and connect() for iframe pages of Pancake POS apps",
   "license": "UNLICENSED",
   "type": "module",