@pancake-pos/ui-extensions 2026.1.6 → 2026.1.7

package/dist/elements.generated.d.ts

@@ -47,6 +47,8 @@ export interface PosButtonProps {
     size?: "small" | "medium";
     loading?: boolean;
     disabled?: boolean;
+    icon?: "plus" | "edit" | "delete" | "download" | "upload" | "refresh" | "filter" | "search" | "settings" | "print" | "copy" | "link" | "external" | "view" | "send" | "check" | "close" | "more" | "calendar" | "info" | "warning";
+    tooltip?: string;
 }
 /** Sự kiện của `<pos-button>` → kiểu `event.detail`. */
 export interface PosButtonEvents {
@@ -67,17 +69,25 @@ export interface PosChartProps {
     series?: ({
         key: string;
         label: string;
-        format?: "number" | "money";
+        format?: "number" | "money" | "percent";
+        type?: "line" | "bar";
     })[];
     stacked?: boolean;
+    horizontal?: boolean;
     height?: number;
     loading?: boolean;
     emptyText?: string;
+    selected?: string | number | null;
 }
 /** Sự kiện của `<pos-chart>` → kiểu `event.detail`. */
 export interface PosChartEvents {
+    select: {
+        x: string | number | null;
+        series: string | null;
+    };
 }
 export interface PosChartAttributes extends PosChartProps, PosBaseAttributes {
+    onSelect?: (event: PosEvent<PosChartEvents["select"]>) => void;
 }
 export interface PosChartElement extends PosChartProps {
     scrollIntoView(): void;
@@ -128,6 +138,55 @@ export interface PosDatePickerElement extends PosDatePickerProps {
     focus(): void;
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-date-range>`. */
+export interface PosDateRangeProps {
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string;
+    help?: string;
+    value?: {
+        from: string;
+        to: string;
+    } | null;
+    min?: string;
+    max?: string;
+    presets?: boolean;
+}
+/** Sự kiện của `<pos-date-range>` → kiểu `event.detail`. */
+export interface PosDateRangeEvents {
+    change: {
+        from: string;
+        to: string;
+    } | null;
+    blur: null;
+}
+export interface PosDateRangeAttributes extends PosDateRangeProps, PosBaseAttributes {
+    onChange?: (event: PosEvent<PosDateRangeEvents["change"]>) => void;
+    onBlur?: (event: PosEvent<PosDateRangeEvents["blur"]>) => void;
+}
+export interface PosDateRangeElement extends PosDateRangeProps {
+    focus(): void;
+    scrollIntoView(): void;
+}
+/** Thuộc tính của `<pos-description-list>`. */
+export interface PosDescriptionListProps {
+    items?: ({
+        label: string;
+        value?: string | number | null;
+        format?: "text" | "number" | "money" | "percent" | "date" | "datetime" | "badge";
+        tone?: "default" | "info" | "success" | "warning" | "critical";
+    })[];
+    columns?: number;
+}
+/** Sự kiện của `<pos-description-list>` → kiểu `event.detail`. */
+export interface PosDescriptionListEvents {
+}
+export interface PosDescriptionListAttributes extends PosDescriptionListProps, PosBaseAttributes {
+}
+export interface PosDescriptionListElement extends PosDescriptionListProps {
+    scrollIntoView(): void;
+}
 /** Thuộc tính của `<pos-divider>`. */
 export interface PosDividerProps {
 }
@@ -139,6 +198,35 @@ export interface PosDividerAttributes extends PosDividerProps, PosBaseAttributes
 export interface PosDividerElement extends PosDividerProps {
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-drawer>`. */
+export interface PosDrawerProps {
+    open?: boolean;
+    heading?: string;
+    width?: "small" | "medium" | "large";
+}
+/** Sự kiện của `<pos-drawer>` → kiểu `event.detail`. */
+export interface PosDrawerEvents {
+    close: null;
+}
+export interface PosDrawerAttributes extends PosDrawerProps, PosBaseAttributes {
+    onClose?: (event: PosEvent<PosDrawerEvents["close"]>) => void;
+}
+export interface PosDrawerElement extends PosDrawerProps {
+    scrollIntoView(): void;
+}
+/** Thuộc tính của `<pos-empty>`. */
+export interface PosEmptyProps {
+    heading?: string;
+    description?: string;
+}
+/** Sự kiện của `<pos-empty>` → kiểu `event.detail`. */
+export interface PosEmptyEvents {
+}
+export interface PosEmptyAttributes extends PosEmptyProps, PosBaseAttributes {
+}
+export interface PosEmptyElement extends PosEmptyProps {
+    scrollIntoView(): void;
+}
 /** Thuộc tính của `<pos-filter-bar>`. */
 export interface PosFilterBarProps {
 }
@@ -206,6 +294,32 @@ export interface PosLinkElement extends PosLinkProps {
     focus(): void;
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-menu-button>`. */
+export interface PosMenuButtonProps {
+    label?: string;
+    icon?: "plus" | "edit" | "delete" | "download" | "upload" | "refresh" | "filter" | "search" | "settings" | "print" | "copy" | "link" | "external" | "view" | "send" | "check" | "close" | "more" | "calendar" | "info" | "warning";
+    variant?: "primary" | "secondary" | "tertiary";
+    size?: "small" | "medium";
+    disabled?: boolean;
+    tooltip?: string;
+    items?: {
+        id: string;
+        label: string;
+        danger?: boolean;
+        disabled?: boolean;
+    }[];
+}
+/** Sự kiện của `<pos-menu-button>` → kiểu `event.detail`. */
+export interface PosMenuButtonEvents {
+    select: string;
+}
+export interface PosMenuButtonAttributes extends PosMenuButtonProps, PosBaseAttributes {
+    onSelect?: (event: PosEvent<PosMenuButtonEvents["select"]>) => void;
+}
+export interface PosMenuButtonElement extends PosMenuButtonProps {
+    focus(): void;
+    scrollIntoView(): void;
+}
 /** Thuộc tính của `<pos-modal>`. */
 export interface PosModalProps {
     open?: boolean;
@@ -275,6 +389,21 @@ export interface PosPageAttributes extends PosPageProps, PosBaseAttributes {
 export interface PosPageElement extends PosPageProps {
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-progress>`. */
+export interface PosProgressProps {
+    value?: number;
+    label?: string;
+    tone?: "default" | "info" | "success" | "warning" | "critical";
+    showValue?: boolean;
+}
+/** Sự kiện của `<pos-progress>` → kiểu `event.detail`. */
+export interface PosProgressEvents {
+}
+export interface PosProgressAttributes extends PosProgressProps, PosBaseAttributes {
+}
+export interface PosProgressElement extends PosProgressProps {
+    scrollIntoView(): void;
+}
 /** Thuộc tính của `<pos-section>`. */
 export interface PosSectionProps {
     heading?: string;
@@ -346,6 +475,30 @@ export interface PosStackAttributes extends PosStackProps, PosBaseAttributes {
 export interface PosStackElement extends PosStackProps {
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-stat>`. */
+export interface PosStatProps {
+    label?: string;
+    value?: number | string | null;
+    format?: "number" | "money" | "percent";
+    currency?: string;
+    tone?: "default" | "info" | "success" | "warning" | "critical";
+    help?: string;
+    change?: number;
+    changeLabel?: string;
+    inverse?: boolean;
+    selected?: boolean;
+    loading?: boolean;
+}
+/** Sự kiện của `<pos-stat>` → kiểu `event.detail`. */
+export interface PosStatEvents {
+    click: null;
+}
+export interface PosStatAttributes extends PosStatProps, PosBaseAttributes {
+    onClick?: (event: PosEvent<PosStatEvents["click"]>) => void;
+}
+export interface PosStatElement extends PosStatProps {
+    scrollIntoView(): void;
+}
 /** Thuộc tính của `<pos-table>`. */
 export interface PosTableProps {
     columns?: ({
@@ -353,7 +506,12 @@ export interface PosTableProps {
         title: string;
         align?: "left" | "center" | "right";
         width?: number;
-        format?: "text" | "number" | "money" | "date" | "datetime";
+        format?: "text" | "number" | "money" | "percent" | "date" | "datetime" | "badge" | "link";
+        tones?: Record<string, "default" | "info" | "success" | "warning" | "critical">;
+        subtitle?: string;
+        sortable?: boolean;
+        fixed?: "left" | "right";
+        ellipsis?: boolean;
     })[];
     rows?: (Record<string, string | number | boolean | null>)[];
     rowKey?: string;
@@ -364,6 +522,13 @@ export interface PosTableProps {
         total: number;
     } | null;
     emptyText?: string;
+    sort?: {
+        key: string;
+        order: "asc" | "desc";
+    } | null;
+    summary?: Record<string, string | number | boolean | null> | null;
+    selectable?: boolean;
+    selected?: (string | number)[];
 }
 /** Sự kiện của `<pos-table>` → kiểu `event.detail`. */
 export interface PosTableEvents {
@@ -372,10 +537,22 @@ export interface PosTableEvents {
         pageSize: number;
     };
     rowclick: Record<string, string | number | boolean | null>;
+    sortchange: {
+        key: string;
+        order: "asc" | "desc";
+    } | null;
+    selectionchange: (string | number)[];
+    cellclick: {
+        key: string;
+        row: Record<string, string | number | boolean | null>;
+    };
 }
 export interface PosTableAttributes extends PosTableProps, PosBaseAttributes {
     onPageChange?: (event: PosEvent<PosTableEvents["pagechange"]>) => void;
     onRowClick?: (event: PosEvent<PosTableEvents["rowclick"]>) => void;
+    onSortChange?: (event: PosEvent<PosTableEvents["sortchange"]>) => void;
+    onSelectionChange?: (event: PosEvent<PosTableEvents["selectionchange"]>) => void;
+    onCellClick?: (event: PosEvent<PosTableEvents["cellclick"]>) => void;
 }
 export interface PosTableElement extends PosTableProps {
     scrollIntoView(): void;
@@ -439,6 +616,23 @@ export interface PosTextFieldElement extends PosTextFieldProps {
     focus(): void;
     scrollIntoView(): void;
 }
+/** Thuộc tính của `<pos-timeline>`. */
+export interface PosTimelineProps {
+    items?: ({
+        title: string;
+        time?: string;
+        description?: string;
+        tone?: "default" | "info" | "success" | "warning" | "critical";
+    })[];
+}
+/** Sự kiện của `<pos-timeline>` → kiểu `event.detail`. */
+export interface PosTimelineEvents {
+}
+export interface PosTimelineAttributes extends PosTimelineProps, PosBaseAttributes {
+}
+export interface PosTimelineElement extends PosTimelineProps {
+    scrollIntoView(): void;
+}
 /** Tên element → thuộc tính trong JSX. */
 export interface PosIntrinsicElements {
     "pos-badge": PosBadgeAttributes;
@@ -447,24 +641,32 @@ export interface PosIntrinsicElements {
     "pos-chart": PosChartAttributes;
     "pos-checkbox": PosCheckboxAttributes;
     "pos-date-picker": PosDatePickerAttributes;
+    "pos-date-range": PosDateRangeAttributes;
+    "pos-description-list": PosDescriptionListAttributes;
     "pos-divider": PosDividerAttributes;
+    "pos-drawer": PosDrawerAttributes;
+    "pos-empty": PosEmptyAttributes;
     "pos-filter-bar": PosFilterBarAttributes;
     "pos-grid": PosGridAttributes;
     "pos-heading": PosHeadingAttributes;
     "pos-image": PosImageAttributes;
     "pos-link": PosLinkAttributes;
+    "pos-menu-button": PosMenuButtonAttributes;
     "pos-modal": PosModalAttributes;
     "pos-money": PosMoneyAttributes;
     "pos-number-field": PosNumberFieldAttributes;
     "pos-page": PosPageAttributes;
+    "pos-progress": PosProgressAttributes;
     "pos-section": PosSectionAttributes;
     "pos-select": PosSelectAttributes;
     "pos-spinner": PosSpinnerAttributes;
     "pos-stack": PosStackAttributes;
+    "pos-stat": PosStatAttributes;
     "pos-table": PosTableAttributes;
     "pos-tabs": PosTabsAttributes;
     "pos-text": PosTextAttributes;
     "pos-text-field": PosTextFieldAttributes;
+    "pos-timeline": PosTimelineAttributes;
 }
 /** Tên element → element tạo bằng `document.createElement` (JS thuần). */
 export interface PosHTMLElementTagNameMap {
@@ -474,22 +676,30 @@ export interface PosHTMLElementTagNameMap {
     "pos-chart": Omit<HTMLElement, keyof PosChartElement> & PosChartElement;
     "pos-checkbox": Omit<HTMLElement, keyof PosCheckboxElement> & PosCheckboxElement;
     "pos-date-picker": Omit<HTMLElement, keyof PosDatePickerElement> & PosDatePickerElement;
+    "pos-date-range": Omit<HTMLElement, keyof PosDateRangeElement> & PosDateRangeElement;
+    "pos-description-list": Omit<HTMLElement, keyof PosDescriptionListElement> & PosDescriptionListElement;
     "pos-divider": Omit<HTMLElement, keyof PosDividerElement> & PosDividerElement;
+    "pos-drawer": Omit<HTMLElement, keyof PosDrawerElement> & PosDrawerElement;
+    "pos-empty": Omit<HTMLElement, keyof PosEmptyElement> & PosEmptyElement;
     "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;
     "pos-link": Omit<HTMLElement, keyof PosLinkElement> & PosLinkElement;
+    "pos-menu-button": Omit<HTMLElement, keyof PosMenuButtonElement> & PosMenuButtonElement;
     "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-progress": Omit<HTMLElement, keyof PosProgressElement> & PosProgressElement;
     "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-stat": Omit<HTMLElement, keyof PosStatElement> & PosStatElement;
     "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;
+    "pos-timeline": Omit<HTMLElement, keyof PosTimelineElement> & PosTimelineElement;
 }

package/dist/page.js

@@ -1,5 +1,13 @@
 // ../app-protocol/src/protocol.ts
 var PROTOCOL_VERSION = 1;
+var DOWNLOAD_TYPES = {
+  csv: "text/csv",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  json: "application/json",
+  txt: "text/plain",
+  pdf: "application/pdf"
+};
+var MAX_DOWNLOAD_BYTES = 10 * 1024 * 1024;
 function hostEvents(context) {
   return context === "page" ? ["primary-action"] : [];
 }
@@ -21,6 +29,7 @@ var AVAILABILITY = {
   "element.scrollIntoView": ["block", "action-ui", "page"],
   "page.setTitle": ["page"],
   "page.setPrimaryAction": ["page"],
+  download: ["block", "action-headless", "action-ui", "page"],
   "data-change": ["block", "action-ui", "page"]
 };
 function isAvailable(capability, context) {
@@ -175,6 +184,35 @@ function createPos(deps) {
         return await callHost("ui.confirm", [options], "pos.ui.confirm") === true;
       }
     }),
+    // File do app tạo (CSV, Excel, PDF…): worker không tạo được link tải, POS tải hộ. Nhị phân gửi dạng base64.
+    async download(file) {
+      require2("download", "pos.download");
+      const filename = String(file?.filename ?? "").trim().slice(0, 200);
+      const extension = /\.([a-z0-9]+)$/i.exec(filename)?.[1]?.toLowerCase() ?? "";
+      const type = file?.type ?? DOWNLOAD_TYPES[extension];
+      if (!filename || !type || !Object.values(DOWNLOAD_TYPES).includes(type)) {
+        throw new PosRuntimeError("invalid_download", `filename must end with .${Object.keys(DOWNLOAD_TYPES).join(", .")} (or pass a supported type)`);
+      }
+      let content;
+      let encoding;
+      let bytes;
+      if (typeof file.content === "string") {
+        content = file.content;
+        encoding = "text";
+        bytes = new TextEncoder().encode(content).length;
+      } else if (file.content instanceof ArrayBuffer || ArrayBuffer.isView(file.content)) {
+        const view = file.content instanceof ArrayBuffer ? new Uint8Array(file.content) : new Uint8Array(file.content.buffer, file.content.byteOffset, file.content.byteLength);
+        bytes = view.length;
+        let binary = "";
+        for (let i = 0; i < view.length; i += 32768) binary += String.fromCharCode(...view.subarray(i, i + 32768));
+        content = btoa(binary);
+        encoding = "base64";
+      } else {
+        throw new PosRuntimeError("invalid_download", "content must be a string, ArrayBuffer or typed array");
+      }
+      if (bytes > MAX_DOWNLOAD_BYTES) throw new PosRuntimeError("invalid_download", `file is larger than ${MAX_DOWNLOAD_BYTES} bytes`);
+      await callHost("download", [{ filename, type, content, encoding }], "pos.download");
+    },
     navigate(to) {
       void callHost("navigate", [to], "pos.navigate");
     },

package/dist/types.d.ts

@@ -231,6 +231,12 @@ export type ConfirmOptions = {
     cancelText?: string;
     danger?: boolean;
 };
+/** `pos.download`: đuôi file quyết định loại (.csv, .xlsx, .json, .txt, .pdf); tối đa 10 MB. */
+export type DownloadFile = {
+    filename: string;
+    content: string | ArrayBuffer | ArrayBufferView;
+    type?: string;
+};
 export type NavigateTarget = {
     page: string;
     path?: string;
@@ -301,6 +307,8 @@ export interface Pos<D = any> {
     readonly ui: {
         confirm(options: ConfirmOptions): Promise<boolean>;
     };
+    /** Tải file do app tạo (CSV, Excel, PDF…) về máy người dùng. Không có trong hook. */
+    download(file: DownloadFile): Promise<void>;
     navigate(to: NavigateTarget): void;
     refresh(): void;
     close(): void;

package/package.json

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