@qfei-design/make-app-approval 0.0.0-stage → 0.1.0

package/dist/list/ui-components.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentType, ReactNode } from "react";
+import type { ApprovalListTab, ApprovalStatusOption } from "./types.js";
+/** 宿主将组件库事件转换成值；包不依赖 DOM Event 或任何日期库对象。 */
+export type ApprovalInputProps = Readonly<{
+    id: string;
+    ariaLabel: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}>;
+export type ApprovalSelectProps = ApprovalInputProps & Readonly<{
+    options: readonly ApprovalStatusOption[];
+}>;
+/** value / onChange 使用 YYYY-MM-DD；清空必须回传空字符串。 */
+export type ApprovalDatePickerProps = ApprovalInputProps;
+export type ApprovalButtonProps = Readonly<{
+    children: ReactNode;
+    htmlType: "button" | "submit";
+    variant: "primary" | "default" | "text";
+    onClick?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    ariaLabel?: string;
+}>;
+export type ApprovalTabsProps = Readonly<{
+    items: readonly Readonly<{
+        value: ApprovalListTab;
+        label: string;
+    }>[];
+    value: ApprovalListTab;
+    onChange: (value: ApprovalListTab) => void;
+    ariaLabel: string;
+    /** 仅在当前激活的面板渲染一次；宿主 Tabs 负责键盘与 tab/panel 关联。 */
+    children: ReactNode;
+}>;
+/** 必须由宿主完整提供；应在模块作用域定义，避免重渲染时创建新的组件类型。 */
+export type ApprovalUIComponents = Readonly<{
+    Input: ComponentType<ApprovalInputProps>;
+    Select: ComponentType<ApprovalSelectProps>;
+    DatePicker: ComponentType<ApprovalDatePickerProps>;
+    Button: ComponentType<ApprovalButtonProps>;
+    Tabs: ComponentType<ApprovalTabsProps>;
+}>;

package/dist/list/use-approval-page.d.ts

@@ -0,0 +1,12 @@
+import type { ApprovalListQuery, ApprovalListProvider, ApprovalLogger, ApprovalPage } from "./types.js";
+type LoadState = ApprovalPage & {
+    token: object;
+    status: "success" | "error";
+};
+export declare const useApprovalPage: (provider: ApprovalListProvider, query: ApprovalListQuery, refreshKey: string | number | undefined, logger?: ApprovalLogger) => {
+    initialPage: LoadState | undefined;
+    total: number;
+    status: string;
+    reload: () => void;
+};
+export {};

package/dist/list/virtual-page-loader.d.ts

@@ -0,0 +1,26 @@
+import type { CanvasTableComponent, IVirtualPageRequestContext } from "@qfei-design/canvas-table";
+import type { ApprovalListItem, ApprovalListProvider, ApprovalListQuery, ApprovalLogger, ApprovalPage } from "./types.js";
+export type VirtualListSnapshot = Readonly<{
+    total: number;
+    rows: readonly ApprovalListItem[];
+    failed: boolean;
+    loading: boolean;
+}>;
+type Table = Pick<CanvasTableComponent, "setVirtualPageData" | "markPageLoadFailed" | "getPagesInView" | "getTableData" | "scrollToRow">;
+/** 页面交互不暴露页码；这里只负责 Canvas 的零基数据页。 */
+export declare const createVirtualPageLoader: ({ table, query, initialPage, loadPage, onChange, retryViewport, onReload, logger }: {
+    table: Table;
+    query: ApprovalListQuery;
+    initialPage: ApprovalPage;
+    loadPage: ApprovalListProvider["loadPage"];
+    onChange: (snapshot: VirtualListSnapshot) => void;
+    retryViewport: () => void;
+    onReload: () => void;
+    logger?: ApprovalLogger;
+}) => {
+    load(page: number, request: IVirtualPageRequestContext): void;
+    viewportChanged(): void;
+    retry(): void;
+    dispose(): void;
+};
+export {};

package/dist/list.cjs

@@ -0,0 +1 @@
+"use strict";var ne=Object.create;var Z=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var de=(e,t,n,I)=>{if(t&&typeof t=="object"||typeof t=="function")for(let T of ie(t))!pe.call(e,T)&&T!==n&&Z(e,T,{get:()=>t[T],enumerable:!(I=le(t,T))||I.enumerable});return e};var ue=(e,t,n)=>(n=e!=null?ne(ce(e)):{},de(t||!e||!e.__esModule?Z(n,"default",{value:e,enumerable:!0}):n,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react"),fe=require("./index.cjs"),te=e=>e==null||e==="UNSUBMITTED"?"状态未知":fe.getApprovalStatusDisplay(e).label,z=(e,t)=>{try{e?e(t):t.phase==="error"?console.warn("[make-app-approval]",t):console.info("[make-app-approval]",t)}catch{console.warn("[make-app-approval] diagnostic sink failed")}},ae=e=>typeof e=="object"&&e!==null,he=e=>ae(e)?["id","entityKey","recordId"].every(t=>typeof e[t]=="string"&&e[t].trim().length>0)&&["applicationNo","applicationType","applicantName","applicationTime"].every(t=>typeof e[t]=="string")&&["taskId","processInstanceId"].every(t=>e[t]===void 0||typeof e[t]=="string"&&e[t].trim().length>0)&&(typeof e.processStatus=="string"||e.processStatus===null):!1,Y=(e,t)=>{if(!ae(e)||!Array.isArray(e.rows)||!e.rows.every(he)||typeof e.total!="number"||!Number.isSafeInteger(e.total)||e.total<0||e.rows.length>t||e.rows.length>e.total||new Set(e.rows.map(n=>n.id)).size!==e.rows.length)throw new Error("Invalid approval page contract");return{rows:e.rows,total:e.total}},ge=({table:e,query:t,initialPage:n,loadPage:I,onChange:T,retryViewport:V,onReload:F,logger:P})=>{const g=new Map,C=new Set;let j=[];const p=new WeakMap,m=new Set;let w=n,f=n.total,d=0,k=!1,x=!1,y;const D=r=>Number.isSafeInteger(r)&&r>=0&&r*t.pageSize<f,b=(r,a,v)=>z(P,{operation:"list",phase:a,tab:t.tab,page:r+1,pageSize:t.pageSize,rowCount:v}),u=()=>{k||T({total:f,rows:j,failed:x||m.size>0,loading:g.size>0})},N=r=>{r.finished||(r.finished=!0,r.removeAbort(),g.get(r.page)===r&&g.delete(r.page),e.markPageLoadFailed(r.page,r.request),r.controller.abort(),b(r.page,"cancel"))},h=r=>{d=r;const a=e.getPagesInView()??[],v=new Set([d,...a].flatMap(l=>[l-1,l,l+1]).filter(D));for(const l of g.values())v.has(l.page)||N(l);for(const l of m)v.has(l)||m.delete(l)},E=(r,a,v)=>{const l=a.rows.map(s=>{const A={...s,statusLabel:te(s.processStatus)};return p.set(A,s),A});if(!e.setVirtualPageData(l,r,a.total,v)){b(r,"skip");return}f=a.total;try{j=Y({rows:e.getTableData()??[],total:f},Number.MAX_SAFE_INTEGER).rows.map(s=>p.get(s)??s)}catch(s){x=!0,j=[],w=void 0,y&&clearTimeout(y),y=void 0;for(const A of g.values())N(A);throw s}w&&w.total!==f&&(w=void 0),m.delete(r);for(const s of g.values())D(s.page)||N(s);!D(r)&&r>0&&e.scrollToRow(Math.max(0,f-1)),b(r,"success",a.rows.length)},M=()=>{if(k||y)return;const r=[...g.values()].filter(a=>!a.running&&!a.finished).sort((a,v)=>Math.abs(a.page-d)-Math.abs(v.page-d)||a.page-v.page);for(const a of r){if(C.size>=2)break;a.running=!0,C.add(a),b(a.page,"start"),(async()=>{try{const v=await I({...t,page:a.page+1},{signal:a.controller.signal});if(k||a.finished||a.controller.signal.aborted)return;const l=Y(v,t.pageSize);a.finished=!0,a.removeAbort(),g.delete(a.page),E(a.page,l,a.request)}catch{!k&&!a.controller.signal.aborted&&(m.add(a.page),b(a.page,"error"),e.markPageLoadFailed(a.page,a.request))}finally{a.finished||(a.finished=!0,a.removeAbort(),g.get(a.page)===a&&g.delete(a.page)),C.delete(a),u(),M()}})()}u()},O=()=>{y&&clearTimeout(y),y=setTimeout(()=>{y=void 0,M()},120)};return{load(r,a){if(a.useRequestIdentity(),k||x||a.signal.aborted||!D(r)){e.markPageLoadFailed(r,a),b(r,"skip");return}const v=g.get(r);if(v?.request===a&&!v.finished)return;if(v&&N(v),h(r),r===0&&w){const s=w;w=void 0;try{E(0,s,a)}catch{m.add(r),e.markPageLoadFailed(r,a),b(r,"error")}u();return}const l={page:r,request:a,controller:new AbortController,running:!1,finished:!1,removeAbort:()=>{}},c=()=>{N(l),u()};a.signal.addEventListener("abort",c,{once:!0}),l.removeAbort=()=>a.signal.removeEventListener("abort",c),g.set(r,l),O(),u()},viewportChanged(){if(k)return;const r=e.getPagesInView();r?.length&&(h(r[0]),g.size&&O(),u())},retry(){if(!k){if(x){F();return}m.size!==0&&(m.clear(),V(),u())}},dispose(){k=!0,y&&clearTimeout(y),y=void 0;for(const r of g.values())N(r);j=[],m.clear(),w=void 0}}},me=[{key:"applicationNo",title:"申请单编号",width:260},{key:"applicationType",title:"申请单类型",width:180},{key:"applicantName",title:"申请人",width:170},{key:"applicationTime",title:"申请时间",width:220},{key:"statusLabel",title:"流程状态",width:140}].map(e=>({...e,showEllipsis:!0,sortable:!1})),q=40,ve=e=>{const t=i.useRef(void 0);return e.initialPage?o.jsx(be,{...e,initialPage:e.initialPage,restoreScroll:t.current?.query===e.query?t.current.position:void 0,rememberScroll:n=>{t.current={query:e.query,position:n}}}):o.jsx("div",{className:"make-app-approval-canvas",role:"group","aria-label":"审批记录表格"})},be=({components:{Button:e},initialPage:t,query:n,provider:I,themeKey:T,onOpen:V,onReload:F,logger:P,restoreScroll:g,rememberScroll:C})=>{const j=i.useRef(null),p=i.useRef(null),m=i.useRef(null),[w,f]=i.useState(!1),[d,k]=i.useState(0),[x,y]=i.useState({...t,failed:!1,loading:!1}),D=i.useRef(t.rows),b=i.useRef(g),u=i.useRef({provider:I,onOpen:V,onReload:F,logger:P,rememberScroll:C});u.current={provider:I,onOpen:V,onReload:F,logger:P,rememberScroll:C};const N=i.useRef(()=>{});return i.useEffect(()=>{const h=j.current;if(!h)return;let E=!1,M,O,r,a=t.total;z(u.current.logger,{operation:"table",phase:"start"});const v=()=>{E||(f(!0),z(u.current.logger,{operation:"table",phase:"error"}))};return import("@qfei-design/canvas-table").then(l=>{if(E)return;const c=()=>{const A=p.current,$=A?.getScrollState();A&&$&&l.globalEventBus.emitWithNamespace("scroll:change",A.tableId,$)},s=()=>{if(!E)try{const{width:A,height:$}=h.getBoundingClientRect();if(A<=0||$<=0)return;const L=getComputedStyle(h),G={rowHeight:q,headerHeight:40,fontSize:14,fontFamily:L.fontFamily||"Arial, sans-serif",...L.color?{textColor:L.color}:{},...L.getPropertyValue("--make-approval-bg").trim()?{rowBgColor:L.getPropertyValue("--make-approval-bg").trim()}:{},...L.getPropertyValue("--make-approval-header").trim()?{headerBgColor:L.getPropertyValue("--make-approval-header").trim()}:{},...L.getPropertyValue("--make-approval-border").trim()?{borderColor:L.getPropertyValue("--make-approval-border").trim()}:{}},re=Math.max(Math.ceil(300/n.pageSize),Math.ceil($*3/q/n.pageSize)+2)*n.pageSize,J={enabled:!0,totalRowCount:a,pageSize:n.pageSize,maxCachedRows:re};if(p.current){p.current.updateProps({canvasWidth:A,canvasHeight:$,style:G,virtualOptions:J}),p.current.updateCanvasSize(A,$,!0),c();return}p.current=new l.CanvasTableComponent(h,{columns:me,canvasWidth:A,canvasHeight:$,style:G,rowKey:"id",showSN:{enabled:!0,width:64,formatter:(S,R)=>R+1},virtualOptions:J,selectable:{enabled:!1},rowSortable:{enabled:!1},editApplyMode:"controlled",customEdit:S=>{S.cancel()},emptyStateOptions:{text:"暂无审批记录"},bodyRowHeadSuffixOptions:{enabled:!0,width:20,render:({group:S,x:R,height:_,rowData:U})=>{const oe=U?.id,W=new l.RectShape({name:"approval-open",x:R,y:_/2-10,cursor:"pointer",tooltip:"查看审批详情",attrs:{width:20,height:20,fill:"transparent",stroke:"transparent"}});W.addChild(new l.ImgShape({name:"approval-open-icon",x:3,y:3,attrs:{width:14,height:14,img:"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${L.color||"#64748b"}" stroke-width="1.8"><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/></svg>`)}})),W.on("mousedown",X=>X.stopPropagation?.()),W.on("click",X=>{X.stopPropagation?.();const Q=D.current.find(se=>se.id===oe);Q&&u.current.onOpen(Q)}),S.addChild(W)}}});const B=p.current,K=ge({table:B,query:n,initialPage:t,retryViewport:c,onReload:()=>u.current.onReload(),loadPage:(S,R)=>u.current.provider.loadPage(S,R),logger:S=>z(u.current.logger,S),onChange:S=>{E||(a=S.total,D.current=S.rows,y(R=>R.total===S.total&&R.failed===S.failed&&R.loading===S.loading&&R.rows.length===S.rows.length&&R.rows.every((_,U)=>_===S.rows[U])?R:S))}});m.current=K,O=l.globalEventBus.onWithNamespace("data:load",B.tableId,(S,R)=>K.load(S,R)),r=l.globalEventBus.onWithNamespace("scroll:change",B.tableId,()=>K.viewportChanged()),b.current&&B.scrollTo(b.current.scrollX,b.current.scrollY),f(!1),z(u.current.logger,{operation:"table",phase:"success"})}catch{v()}};N.current=s,M=new ResizeObserver(s),M.observe(h),s()}).catch(v),()=>{E=!0,M?.disconnect(),N.current=()=>{},p.current&&(b.current=p.current.getScrollState(),b.current&&u.current.rememberScroll(b.current)),O?.(),r?.(),m.current?.dispose(),m.current=null,p.current?.destroy(),p.current=null,z(u.current.logger,{operation:"table",phase:"destroy"})}},[t,n,d]),i.useEffect(()=>{N.current()},[T]),o.jsxs("div",{className:"make-app-approval-table-frame","aria-busy":x.loading,children:[o.jsx("div",{ref:j,className:"make-app-approval-canvas",role:"group","aria-label":"审批记录表格"}),w&&o.jsxs("div",{className:"make-app-approval-overlay",role:"alert",children:["表格加载失败 ",o.jsx(e,{htmlType:"button",variant:"default",onClick:()=>{f(!1),k(h=>h+1)},children:"重新加载表格"})]}),!w&&x.failed&&o.jsxs("div",{className:"make-app-approval-table-feedback",role:"alert",children:["部分审批记录加载失败 ",o.jsx(e,{htmlType:"button",variant:"default",onClick:()=>m.current?.retry(),children:"重试加载"})]}),!w&&!x.failed&&x.loading&&o.jsxs("div",{className:"make-app-approval-table-loading",role:"status","aria-label":"正在加载审批记录","aria-live":"polite",children:[o.jsx("span",{className:"make-app-approval-loading-spinner","aria-hidden":"true"}),o.jsx("span",{children:"加载中"})]}),o.jsxs("ul",{className:"make-app-approval-accessible-rows","aria-label":"审批记录文字视图",children:[x.total===0&&o.jsx("li",{children:"暂无审批记录"}),x.rows.map(h=>o.jsxs("li",{children:[o.jsxs("span",{children:[h.applicationNo,"，",h.applicationType,"，",h.applicantName,"，",h.applicationTime,"，",te(h.processStatus),"。"]}),o.jsxs(e,{htmlType:"button",variant:"text",onClick:()=>V(h),children:["打开 ",h.applicationNo||h.applicationType," 的审批详情"]})]},h.id))]})]})},we=[],ye=(e,t,n,I)=>{const[T,V]=i.useState(0),[F,P]=i.useState(),g=i.useRef({provider:e,logger:I});g.current={provider:e,logger:I};const C=i.useMemo(()=>({}),[t,n,T]);i.useEffect(()=>{const p=new AbortController,{provider:m,logger:w}=g.current,f={operation:"list",tab:t.tab,page:t.page,pageSize:t.pageSize};z(w,{...f,phase:"start"});let d=!1;return(async()=>{try{const k=await m.loadPage(t,{signal:p.signal});if(p.signal.aborted)return;const x=Y(k,t.pageSize);d=!0,P({...x,token:C,status:"success"}),z(w,{...f,phase:"success",rowCount:x.rows.length})}catch{if(p.signal.aborted)return;d=!0,P({token:C,status:"error",rows:we,total:0}),z(w,{...f,phase:"error"})}})(),()=>{p.abort(),d||z(w,{...f,phase:"cancel"})}},[t,C]);const j=F?.token===C?F:void 0;return{initialPage:j?.status==="success"?j:void 0,total:j?.total??0,status:j?.status??"loading",reload:()=>V(p=>p+1)}},H={keyword:"",processStatus:"",startDate:"",endDate:""},Se=[{value:"pending",label:"待我处理"},{value:"approved",label:"已审批"}],ee=e=>{if(e==="")return!0;if(!/^\d{4}-\d{2}-\d{2}$/.test(e))return!1;const t=new Date(`${e}T00:00:00Z`);return Number.isFinite(t.getTime())&&t.toISOString().slice(0,10)===e},ke=({components:e,provider:t,onOpenApproval:n,statusOptions:I=[],pageSize:T=20,refreshKey:V,themeKey:F,logger:P,className:g})=>{const{Input:C,Select:j,DatePicker:p,Button:m,Tabs:w}=e,f=i.useId(),[d,k]=i.useState(H),[x,y]=i.useState(""),[D,b]=i.useState(""),[u,N]=i.useState({...H,tab:"pending",page:1,pageSize:T}),{initialPage:h,status:E,reload:M}=ye(t,u,V,P),O=i.useRef(!1),r=i.useRef(!0);i.useEffect(()=>(r.current=!0,()=>{r.current=!1}),[]);const a=E==="loading",v=async c=>{if(!O.current){O.current=!0,b(""),z(P,{operation:"open",phase:"start"});try{await n(c),z(P,{operation:"open",phase:"success"})}catch{r.current&&b("审批详情打开失败，请重试"),z(P,{operation:"open",phase:"error"})}finally{O.current=!1}}},l=c=>{c!==u.tab&&(y(""),b(""),N(s=>({...s,tab:c,page:1})))};return o.jsx("section",{className:["make-app-approval",g].filter(Boolean).join(" "),"aria-label":"我的审批",children:o.jsxs(w,{items:Se,value:u.tab,onChange:l,ariaLabel:"审批分类",children:[o.jsxs("form",{className:"make-app-approval-filters",onSubmit:c=>{if(c.preventDefault(),!ee(d.startDate)||!ee(d.endDate)){y("请选择有效日期");return}if(d.startDate&&d.endDate&&d.startDate>d.endDate){y("开始日期不能晚于结束日期");return}y(""),b(""),N(s=>({...s,...d,keyword:d.keyword.trim(),page:1}))},children:[o.jsxs("div",{className:"make-app-approval-filter-field",children:[o.jsx("label",{htmlFor:`${f}-keyword`,children:"申请单号或申请人"}),o.jsx(C,{id:`${f}-keyword`,ariaLabel:"申请单号或申请人",placeholder:"搜索申请单号、申请人",value:d.keyword,onChange:c=>k(s=>({...s,keyword:c}))})]}),o.jsxs("div",{className:"make-app-approval-filter-field",children:[o.jsx("label",{htmlFor:`${f}-status`,children:"流程状态"}),o.jsx(j,{id:`${f}-status`,ariaLabel:"流程状态",value:d.processStatus,options:[{value:"",label:"全部流程状态"},...I],onChange:c=>k(s=>({...s,processStatus:c}))})]}),o.jsxs("fieldset",{className:"make-app-approval-date-field",children:[o.jsx("legend",{children:"申请时间"}),o.jsxs("div",{className:"make-app-approval-date-range",children:[o.jsx("div",{className:"make-app-approval-date-control",children:o.jsx(p,{id:`${f}-start`,ariaLabel:"申请开始日期",placeholder:"开始日期",value:d.startDate,onChange:c=>k(s=>({...s,startDate:c}))})}),o.jsx("span",{children:"至"}),o.jsx("div",{className:"make-app-approval-date-control",children:o.jsx(p,{id:`${f}-end`,ariaLabel:"申请结束日期",placeholder:"结束日期",value:d.endDate,onChange:c=>k(s=>({...s,endDate:c}))})})]})]}),o.jsxs("div",{className:"make-app-approval-filter-actions",children:[o.jsx(m,{htmlType:"submit",variant:"primary",children:"查询"}),o.jsx(m,{htmlType:"button",variant:"default",onClick:()=>{k(H),y(""),b(""),N(c=>({...c,...H,page:1}))},children:"重置"}),o.jsx(m,{htmlType:"button",variant:"default",disabled:a,loading:a,onClick:M,children:"刷新"})]})]}),x&&o.jsx("p",{role:"alert",className:"make-app-approval-error",children:x}),D&&o.jsx("p",{role:"alert",className:"make-app-approval-error",children:D}),o.jsxs("div",{className:"make-app-approval-results","aria-busy":a,children:[o.jsx(ve,{components:e,initialPage:h,query:u,provider:t,onOpen:c=>{v(c)},onReload:M,themeKey:F,logger:P}),a&&o.jsx("div",{className:"make-app-approval-overlay",role:"status",children:"正在加载审批记录…"}),E==="error"&&o.jsxs("div",{className:"make-app-approval-overlay",role:"alert",children:[o.jsx("span",{children:"审批列表加载失败，请重试"}),o.jsx(m,{htmlType:"button",variant:"default",onClick:M,children:"重试"})]})]})]})})},xe=e=>{const t=e.pageSize??20;if(!e.scopeKey.trim())throw new Error("MyApprovalsPage requires scopeKey");for(const n of["Input","Select","DatePicker","Button","Tabs"])if(!e.components?.[n])throw new Error(`MyApprovalsPage requires components.${n}`);if(!Number.isSafeInteger(t)||t<1||t>200)throw new Error("pageSize must be an integer from 1 to 200");return o.jsx(ke,{...e,pageSize:t},JSON.stringify([e.scopeKey,t]))};exports.MyApprovalsPage=xe;

package/dist/list.mjs

@@ -0,0 +1,381 @@
+import { jsx as n, jsxs as N } from "react/jsx-runtime";
+import { useRef as E, useState as x, useEffect as j, useMemo as ie, useId as ce } from "react";
+import { getApprovalStatusDisplay as pe } from "./index.mjs";
+const re = (e) => e == null || e === "UNSUBMITTED" ? "状态未知" : pe(e).label, I = (e, a) => {
+  try {
+    e ? e(a) : a.phase === "error" ? console.warn("[make-app-approval]", a) : console.info("[make-app-approval]", a);
+  } catch {
+    console.warn("[make-app-approval] diagnostic sink failed");
+  }
+}, oe = (e) => typeof e == "object" && e !== null, de = (e) => oe(e) ? ["id", "entityKey", "recordId"].every((a) => typeof e[a] == "string" && e[a].trim().length > 0) && ["applicationNo", "applicationType", "applicantName", "applicationTime"].every((a) => typeof e[a] == "string") && ["taskId", "processInstanceId"].every((a) => e[a] === void 0 || typeof e[a] == "string" && e[a].trim().length > 0) && (typeof e.processStatus == "string" || e.processStatus === null) : !1, Q = (e, a) => {
+  if (!oe(e) || !Array.isArray(e.rows) || !e.rows.every(de) || typeof e.total != "number" || !Number.isSafeInteger(e.total) || e.total < 0 || e.rows.length > a || e.rows.length > e.total || new Set(e.rows.map((m) => m.id)).size !== e.rows.length)
+    throw new Error("Invalid approval page contract");
+  return { rows: e.rows, total: e.total };
+}, ue = ({ table: e, query: a, initialPage: m, loadPage: F, onChange: H, retryViewport: $, onReload: B, logger: R }) => {
+  const f = /* @__PURE__ */ new Map(), z = /* @__PURE__ */ new Set();
+  let T = [];
+  const i = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new Set();
+  let b = m, d = m.total, c = 0, k = !1, S = !1, w;
+  const M = (r) => Number.isSafeInteger(r) && r >= 0 && r * a.pageSize < d, v = (r, t, g) => I(R, { operation: "list", phase: t, tab: a.tab, page: r + 1, pageSize: a.pageSize, rowCount: g }), p = () => {
+    k || H({ total: d, rows: T, failed: S || h.size > 0, loading: f.size > 0 });
+  }, C = (r) => {
+    r.finished || (r.finished = !0, r.removeAbort(), f.get(r.page) === r && f.delete(r.page), e.markPageLoadFailed(r.page, r.request), r.controller.abort(), v(r.page, "cancel"));
+  }, u = (r) => {
+    c = r;
+    const t = e.getPagesInView() ?? [], g = new Set([c, ...t].flatMap((s) => [s - 1, s, s + 1]).filter(M));
+    for (const s of f.values()) g.has(s.page) || C(s);
+    for (const s of h) g.has(s) || h.delete(s);
+  }, D = (r, t, g) => {
+    const s = t.rows.map((o) => {
+      const A = { ...o, statusLabel: re(o.processStatus) };
+      return i.set(A, o), A;
+    });
+    if (!e.setVirtualPageData(s, r, t.total, g)) {
+      v(r, "skip");
+      return;
+    }
+    d = t.total;
+    try {
+      T = Q({ rows: e.getTableData() ?? [], total: d }, Number.MAX_SAFE_INTEGER).rows.map((o) => i.get(o) ?? o);
+    } catch (o) {
+      S = !0, T = [], b = void 0, w && clearTimeout(w), w = void 0;
+      for (const A of f.values()) C(A);
+      throw o;
+    }
+    b && b.total !== d && (b = void 0), h.delete(r);
+    for (const o of f.values()) M(o.page) || C(o);
+    !M(r) && r > 0 && e.scrollToRow(Math.max(0, d - 1)), v(r, "success", t.rows.length);
+  }, L = () => {
+    if (k || w) return;
+    const r = [...f.values()].filter((t) => !t.running && !t.finished).sort((t, g) => Math.abs(t.page - c) - Math.abs(g.page - c) || t.page - g.page);
+    for (const t of r) {
+      if (z.size >= 2) break;
+      t.running = !0, z.add(t), v(t.page, "start"), (async () => {
+        try {
+          const g = await F({ ...a, page: t.page + 1 }, { signal: t.controller.signal });
+          if (k || t.finished || t.controller.signal.aborted) return;
+          const s = Q(g, a.pageSize);
+          t.finished = !0, t.removeAbort(), f.delete(t.page), D(t.page, s, t.request);
+        } catch {
+          !k && !t.controller.signal.aborted && (h.add(t.page), v(t.page, "error"), e.markPageLoadFailed(t.page, t.request));
+        } finally {
+          t.finished || (t.finished = !0, t.removeAbort(), f.get(t.page) === t && f.delete(t.page)), z.delete(t), p(), L();
+        }
+      })();
+    }
+    p();
+  }, O = () => {
+    w && clearTimeout(w), w = setTimeout(() => {
+      w = void 0, L();
+    }, 120);
+  };
+  return {
+    load(r, t) {
+      if (t.useRequestIdentity(), k || S || t.signal.aborted || !M(r)) {
+        e.markPageLoadFailed(r, t), v(r, "skip");
+        return;
+      }
+      const g = f.get(r);
+      if (g?.request === t && !g.finished) return;
+      if (g && C(g), u(r), r === 0 && b) {
+        const o = b;
+        b = void 0;
+        try {
+          D(0, o, t);
+        } catch {
+          h.add(r), e.markPageLoadFailed(r, t), v(r, "error");
+        }
+        p();
+        return;
+      }
+      const s = { page: r, request: t, controller: new AbortController(), running: !1, finished: !1, removeAbort: () => {
+      } }, l = () => {
+        C(s), p();
+      };
+      t.signal.addEventListener("abort", l, { once: !0 }), s.removeAbort = () => t.signal.removeEventListener("abort", l), f.set(r, s), O(), p();
+    },
+    viewportChanged() {
+      if (k) return;
+      const r = e.getPagesInView();
+      r?.length && (u(r[0]), f.size && O(), p());
+    },
+    retry() {
+      if (!k) {
+        if (S) {
+          B();
+          return;
+        }
+        h.size !== 0 && (h.clear(), $(), p());
+      }
+    },
+    dispose() {
+      k = !0, w && clearTimeout(w), w = void 0;
+      for (const r of f.values()) C(r);
+      T = [], h.clear(), b = void 0;
+    }
+  };
+}, fe = [
+  { key: "applicationNo", title: "申请单编号", width: 260 },
+  { key: "applicationType", title: "申请单类型", width: 180 },
+  { key: "applicantName", title: "申请人", width: 170 },
+  { key: "applicationTime", title: "申请时间", width: 220 },
+  { key: "statusLabel", title: "流程状态", width: 140 }
+].map((e) => ({ ...e, showEllipsis: !0, sortable: !1 })), te = 40, he = (e) => {
+  const a = E(void 0);
+  return e.initialPage ? /* @__PURE__ */ n(
+    ge,
+    {
+      ...e,
+      initialPage: e.initialPage,
+      restoreScroll: a.current?.query === e.query ? a.current.position : void 0,
+      rememberScroll: (m) => {
+        a.current = { query: e.query, position: m };
+      }
+    }
+  ) : /* @__PURE__ */ n("div", { className: "make-app-approval-canvas", role: "group", "aria-label": "审批记录表格" });
+}, ge = ({ components: { Button: e }, initialPage: a, query: m, provider: F, themeKey: H, onOpen: $, onReload: B, logger: R, restoreScroll: f, rememberScroll: z }) => {
+  const T = E(null), i = E(null), h = E(null), [b, d] = x(!1), [c, k] = x(0), [S, w] = x({ ...a, failed: !1, loading: !1 }), M = E(a.rows), v = E(f), p = E({ provider: F, onOpen: $, onReload: B, logger: R, rememberScroll: z });
+  p.current = { provider: F, onOpen: $, onReload: B, logger: R, rememberScroll: z };
+  const C = E(() => {
+  });
+  return j(() => {
+    const u = T.current;
+    if (!u) return;
+    let D = !1, L, O, r, t = a.total;
+    I(p.current.logger, { operation: "table", phase: "start" });
+    const g = () => {
+      D || (d(!0), I(p.current.logger, { operation: "table", phase: "error" }));
+    };
+    return import("@qfei-design/canvas-table").then((s) => {
+      if (D) return;
+      const l = () => {
+        const A = i.current, W = A?.getScrollState();
+        A && W && s.globalEventBus.emitWithNamespace("scroll:change", A.tableId, W);
+      }, o = () => {
+        if (!D)
+          try {
+            const { width: A, height: W } = u.getBoundingClientRect();
+            if (A <= 0 || W <= 0) return;
+            const V = getComputedStyle(u), Z = {
+              rowHeight: te,
+              headerHeight: 40,
+              fontSize: 14,
+              fontFamily: V.fontFamily || "Arial, sans-serif",
+              ...V.color ? { textColor: V.color } : {},
+              ...V.getPropertyValue("--make-approval-bg").trim() ? { rowBgColor: V.getPropertyValue("--make-approval-bg").trim() } : {},
+              ...V.getPropertyValue("--make-approval-header").trim() ? { headerBgColor: V.getPropertyValue("--make-approval-header").trim() } : {},
+              ...V.getPropertyValue("--make-approval-border").trim() ? { borderColor: V.getPropertyValue("--make-approval-border").trim() } : {}
+            }, ne = Math.max(Math.ceil(300 / m.pageSize), Math.ceil(W * 3 / te / m.pageSize) + 2) * m.pageSize, q = { enabled: !0, totalRowCount: t, pageSize: m.pageSize, maxCachedRows: ne };
+            if (i.current) {
+              i.current.updateProps({ canvasWidth: A, canvasHeight: W, style: Z, virtualOptions: q }), i.current.updateCanvasSize(A, W, !0), l();
+              return;
+            }
+            i.current = new s.CanvasTableComponent(u, {
+              columns: fe,
+              canvasWidth: A,
+              canvasHeight: W,
+              style: Z,
+              rowKey: "id",
+              showSN: { enabled: !0, width: 64, formatter: (y, P) => P + 1 },
+              virtualOptions: q,
+              selectable: { enabled: !1 },
+              rowSortable: { enabled: !1 },
+              editApplyMode: "controlled",
+              customEdit: (y) => {
+                y.cancel();
+              },
+              emptyStateOptions: { text: "暂无审批记录" },
+              bodyRowHeadSuffixOptions: {
+                enabled: !0,
+                width: 20,
+                render: ({ group: y, x: P, height: Y, rowData: G }) => {
+                  const se = G?.id, _ = new s.RectShape({ name: "approval-open", x: P, y: Y / 2 - 10, cursor: "pointer", tooltip: "查看审批详情", attrs: { width: 20, height: 20, fill: "transparent", stroke: "transparent" } });
+                  _.addChild(new s.ImgShape({ name: "approval-open-icon", x: 3, y: 3, attrs: {
+                    width: 14,
+                    height: 14,
+                    img: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${V.color || "#64748b"}" stroke-width="1.8"><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/></svg>`)
+                  } })), _.on("mousedown", (J) => J.stopPropagation?.()), _.on("click", (J) => {
+                    J.stopPropagation?.();
+                    const ee = M.current.find((le) => le.id === se);
+                    ee && p.current.onOpen(ee);
+                  }), y.addChild(_);
+                }
+              }
+            });
+            const K = i.current, X = ue({
+              table: K,
+              query: m,
+              initialPage: a,
+              // 公开滚动同步事件会重新检测缺页，不移动视口，也不复用失败身份。
+              retryViewport: l,
+              onReload: () => p.current.onReload(),
+              loadPage: (y, P) => p.current.provider.loadPage(y, P),
+              logger: (y) => I(p.current.logger, y),
+              onChange: (y) => {
+                D || (t = y.total, M.current = y.rows, w((P) => P.total === y.total && P.failed === y.failed && P.loading === y.loading && P.rows.length === y.rows.length && P.rows.every((Y, G) => Y === y.rows[G]) ? P : y));
+              }
+            });
+            h.current = X, O = s.globalEventBus.onWithNamespace("data:load", K.tableId, (y, P) => X.load(y, P)), r = s.globalEventBus.onWithNamespace("scroll:change", K.tableId, () => X.viewportChanged()), v.current && K.scrollTo(v.current.scrollX, v.current.scrollY), d(!1), I(p.current.logger, { operation: "table", phase: "success" });
+          } catch {
+            g();
+          }
+      };
+      C.current = o, L = new ResizeObserver(o), L.observe(u), o();
+    }).catch(g), () => {
+      D = !0, L?.disconnect(), C.current = () => {
+      }, i.current && (v.current = i.current.getScrollState(), v.current && p.current.rememberScroll(v.current)), O?.(), r?.(), h.current?.dispose(), h.current = null, i.current?.destroy(), i.current = null, I(p.current.logger, { operation: "table", phase: "destroy" });
+    };
+  }, [a, m, c]), j(() => {
+    C.current();
+  }, [H]), /* @__PURE__ */ N("div", { className: "make-app-approval-table-frame", "aria-busy": S.loading, children: [
+    /* @__PURE__ */ n("div", { ref: T, className: "make-app-approval-canvas", role: "group", "aria-label": "审批记录表格" }),
+    b && /* @__PURE__ */ N("div", { className: "make-app-approval-overlay", role: "alert", children: [
+      "表格加载失败 ",
+      /* @__PURE__ */ n(e, { htmlType: "button", variant: "default", onClick: () => {
+        d(!1), k((u) => u + 1);
+      }, children: "重新加载表格" })
+    ] }),
+    !b && S.failed && /* @__PURE__ */ N("div", { className: "make-app-approval-table-feedback", role: "alert", children: [
+      "部分审批记录加载失败 ",
+      /* @__PURE__ */ n(e, { htmlType: "button", variant: "default", onClick: () => h.current?.retry(), children: "重试加载" })
+    ] }),
+    !b && !S.failed && S.loading && /* @__PURE__ */ N("div", { className: "make-app-approval-table-loading", role: "status", "aria-label": "正在加载审批记录", "aria-live": "polite", children: [
+      /* @__PURE__ */ n("span", { className: "make-app-approval-loading-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ n("span", { children: "加载中" })
+    ] }),
+    /* @__PURE__ */ N("ul", { className: "make-app-approval-accessible-rows", "aria-label": "审批记录文字视图", children: [
+      S.total === 0 && /* @__PURE__ */ n("li", { children: "暂无审批记录" }),
+      S.rows.map((u) => /* @__PURE__ */ N("li", { children: [
+        /* @__PURE__ */ N("span", { children: [
+          u.applicationNo,
+          "，",
+          u.applicationType,
+          "，",
+          u.applicantName,
+          "，",
+          u.applicationTime,
+          "，",
+          re(u.processStatus),
+          "。"
+        ] }),
+        /* @__PURE__ */ N(e, { htmlType: "button", variant: "text", onClick: () => $(u), children: [
+          "打开 ",
+          u.applicationNo || u.applicationType,
+          " 的审批详情"
+        ] })
+      ] }, u.id))
+    ] })
+  ] });
+}, me = [], ve = (e, a, m, F) => {
+  const [H, $] = x(0), [B, R] = x(), f = E({ provider: e, logger: F });
+  f.current = { provider: e, logger: F };
+  const z = ie(() => ({}), [a, m, H]);
+  j(() => {
+    const i = new AbortController(), { provider: h, logger: b } = f.current, d = { operation: "list", tab: a.tab, page: a.page, pageSize: a.pageSize };
+    I(b, { ...d, phase: "start" });
+    let c = !1;
+    return (async () => {
+      try {
+        const k = await h.loadPage(a, { signal: i.signal });
+        if (i.signal.aborted) return;
+        const S = Q(k, a.pageSize);
+        c = !0, R({ ...S, token: z, status: "success" }), I(b, { ...d, phase: "success", rowCount: S.rows.length });
+      } catch {
+        if (i.signal.aborted) return;
+        c = !0, R({ token: z, status: "error", rows: me, total: 0 }), I(b, { ...d, phase: "error" });
+      }
+    })(), () => {
+      i.abort(), c || I(b, { ...d, phase: "cancel" });
+    };
+  }, [a, z]);
+  const T = B?.token === z ? B : void 0;
+  return {
+    initialPage: T?.status === "success" ? T : void 0,
+    total: T?.total ?? 0,
+    status: T?.status ?? "loading",
+    reload: () => $((i) => i + 1)
+  };
+}, U = { keyword: "", processStatus: "", startDate: "", endDate: "" }, be = [{ value: "pending", label: "待我处理" }, { value: "approved", label: "已审批" }], ae = (e) => {
+  if (e === "") return !0;
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(e)) return !1;
+  const a = /* @__PURE__ */ new Date(`${e}T00:00:00Z`);
+  return Number.isFinite(a.getTime()) && a.toISOString().slice(0, 10) === e;
+}, we = ({ components: e, provider: a, onOpenApproval: m, statusOptions: F = [], pageSize: H = 20, refreshKey: $, themeKey: B, logger: R, className: f }) => {
+  const { Input: z, Select: T, DatePicker: i, Button: h, Tabs: b } = e, d = ce(), [c, k] = x(U), [S, w] = x(""), [M, v] = x(""), [p, C] = x({ ...U, tab: "pending", page: 1, pageSize: H }), { initialPage: u, status: D, reload: L } = ve(a, p, $, R), O = E(!1), r = E(!0);
+  j(() => (r.current = !0, () => {
+    r.current = !1;
+  }), []);
+  const t = D === "loading", g = async (l) => {
+    if (!O.current) {
+      O.current = !0, v(""), I(R, { operation: "open", phase: "start" });
+      try {
+        await m(l), I(R, { operation: "open", phase: "success" });
+      } catch {
+        r.current && v("审批详情打开失败，请重试"), I(R, { operation: "open", phase: "error" });
+      } finally {
+        O.current = !1;
+      }
+    }
+  }, s = (l) => {
+    l !== p.tab && (w(""), v(""), C((o) => ({ ...o, tab: l, page: 1 })));
+  };
+  return /* @__PURE__ */ n("section", { className: ["make-app-approval", f].filter(Boolean).join(" "), "aria-label": "我的审批", children: /* @__PURE__ */ N(b, { items: be, value: p.tab, onChange: s, ariaLabel: "审批分类", children: [
+    /* @__PURE__ */ N("form", { className: "make-app-approval-filters", onSubmit: (l) => {
+      if (l.preventDefault(), !ae(c.startDate) || !ae(c.endDate)) {
+        w("请选择有效日期");
+        return;
+      }
+      if (c.startDate && c.endDate && c.startDate > c.endDate) {
+        w("开始日期不能晚于结束日期");
+        return;
+      }
+      w(""), v(""), C((o) => ({ ...o, ...c, keyword: c.keyword.trim(), page: 1 }));
+    }, children: [
+      /* @__PURE__ */ N("div", { className: "make-app-approval-filter-field", children: [
+        /* @__PURE__ */ n("label", { htmlFor: `${d}-keyword`, children: "申请单号或申请人" }),
+        /* @__PURE__ */ n(z, { id: `${d}-keyword`, ariaLabel: "申请单号或申请人", placeholder: "搜索申请单号、申请人", value: c.keyword, onChange: (l) => k((o) => ({ ...o, keyword: l })) })
+      ] }),
+      /* @__PURE__ */ N("div", { className: "make-app-approval-filter-field", children: [
+        /* @__PURE__ */ n("label", { htmlFor: `${d}-status`, children: "流程状态" }),
+        /* @__PURE__ */ n(T, { id: `${d}-status`, ariaLabel: "流程状态", value: c.processStatus, options: [{ value: "", label: "全部流程状态" }, ...F], onChange: (l) => k((o) => ({ ...o, processStatus: l })) })
+      ] }),
+      /* @__PURE__ */ N("fieldset", { className: "make-app-approval-date-field", children: [
+        /* @__PURE__ */ n("legend", { children: "申请时间" }),
+        /* @__PURE__ */ N("div", { className: "make-app-approval-date-range", children: [
+          /* @__PURE__ */ n("div", { className: "make-app-approval-date-control", children: /* @__PURE__ */ n(i, { id: `${d}-start`, ariaLabel: "申请开始日期", placeholder: "开始日期", value: c.startDate, onChange: (l) => k((o) => ({ ...o, startDate: l })) }) }),
+          /* @__PURE__ */ n("span", { children: "至" }),
+          /* @__PURE__ */ n("div", { className: "make-app-approval-date-control", children: /* @__PURE__ */ n(i, { id: `${d}-end`, ariaLabel: "申请结束日期", placeholder: "结束日期", value: c.endDate, onChange: (l) => k((o) => ({ ...o, endDate: l })) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ N("div", { className: "make-app-approval-filter-actions", children: [
+        /* @__PURE__ */ n(h, { htmlType: "submit", variant: "primary", children: "查询" }),
+        /* @__PURE__ */ n(h, { htmlType: "button", variant: "default", onClick: () => {
+          k(U), w(""), v(""), C((l) => ({ ...l, ...U, page: 1 }));
+        }, children: "重置" }),
+        /* @__PURE__ */ n(h, { htmlType: "button", variant: "default", disabled: t, loading: t, onClick: L, children: "刷新" })
+      ] })
+    ] }),
+    S && /* @__PURE__ */ n("p", { role: "alert", className: "make-app-approval-error", children: S }),
+    M && /* @__PURE__ */ n("p", { role: "alert", className: "make-app-approval-error", children: M }),
+    /* @__PURE__ */ N("div", { className: "make-app-approval-results", "aria-busy": t, children: [
+      /* @__PURE__ */ n(he, { components: e, initialPage: u, query: p, provider: a, onOpen: (l) => {
+        g(l);
+      }, onReload: L, themeKey: B, logger: R }),
+      t && /* @__PURE__ */ n("div", { className: "make-app-approval-overlay", role: "status", children: "正在加载审批记录…" }),
+      D === "error" && /* @__PURE__ */ N("div", { className: "make-app-approval-overlay", role: "alert", children: [
+        /* @__PURE__ */ n("span", { children: "审批列表加载失败，请重试" }),
+        /* @__PURE__ */ n(h, { htmlType: "button", variant: "default", onClick: L, children: "重试" })
+      ] })
+    ] })
+  ] }) });
+}, Ne = (e) => {
+  const a = e.pageSize ?? 20;
+  if (!e.scopeKey.trim()) throw new Error("MyApprovalsPage requires scopeKey");
+  for (const m of ["Input", "Select", "DatePicker", "Button", "Tabs"])
+    if (!e.components?.[m]) throw new Error(`MyApprovalsPage requires components.${m}`);
+  if (!Number.isSafeInteger(a) || a < 1 || a > 200) throw new Error("pageSize must be an integer from 1 to 200");
+  return /* @__PURE__ */ n(we, { ...e, pageSize: a }, JSON.stringify([e.scopeKey, a]));
+};
+export {
+  Ne as MyApprovalsPage
+};

package/dist/react/index.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from "react";
+export type ApprovalStatusProps = {
+    value: unknown;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare const ApprovalStatus: ({ value, className, style }: ApprovalStatusProps) => import("react").JSX.Element;

package/dist/react.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("./index.cjs"),n=({value:e,className:a,style:s})=>{const t=r.getApprovalStatusDisplay(e);return o.jsx("span",{className:["make-app-approval-status",a].filter(Boolean).join(" "),"data-tone":t.tone,style:s,children:t.label})};exports.ApprovalStatus=n;

package/dist/react.mjs

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { getApprovalStatusDisplay as r } from "./index.mjs";
+const n = ({ value: a, className: o, style: p }) => {
+  const t = r(a);
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: ["make-app-approval-status", o].filter(Boolean).join(" "),
+      "data-tone": t.tone,
+      style: p,
+      children: t.label
+    }
+  );
+};
+export {
+  n as ApprovalStatus
+};

package/dist/styles.css

@@ -0,0 +1,94 @@
+.make-app-approval-status {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 20px;
+  white-space: nowrap;
+  color: var(--make-approval-text, hsl(var(--muted-foreground, 160 8% 42%)));
+  background: var(--make-approval-surface, hsl(var(--muted, 150 22% 94%)));
+}
+
+.make-app-approval-status[data-tone="processing"],
+.make-app-approval-status[data-tone="success"] {
+  color: var(--make-approval-primary, hsl(var(--primary, 176 77% 26%)));
+}
+
+.make-app-approval-status[data-tone="danger"],
+.make-app-approval-status[data-tone="unknown"] {
+  color: var(--make-approval-error, var(--make-mobile-error, #dc2626));
+}
+
+.make-app-approval {
+  --make-approval-bg: hsl(var(--background, 0 0% 100%));
+  --make-approval-header: hsl(var(--muted, 210 20% 97%));
+  --make-approval-border: hsl(var(--border, 214 25% 89%));
+  --make-approval-foreground: hsl(var(--foreground, 222 30% 16%));
+  --make-approval-primary: hsl(var(--primary, 176 77% 26%));
+  --make-approval-primary-foreground: hsl(var(--primary-foreground, 0 0% 100%));
+  --make-approval-muted: hsl(var(--muted-foreground, 215 16% 47%));
+  --make-approval-radius: var(--radius, 6px);
+  color: var(--make-approval-foreground);
+  background: var(--make-approval-bg);
+  border: 1px solid var(--make-approval-border);
+  border-radius: var(--make-approval-radius);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+.make-app-approval-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; padding: 20px; }
+.make-app-approval-filter-field { display: flex; flex-direction: column; gap: 6px; width: 200px; min-width: 0; }
+.make-app-approval-filter-field > label { color: var(--make-approval-muted); font-size: 12px; }
+.make-app-approval-date-field { border: 0; padding: 0; margin: 0; min-width: 0; }
+.make-app-approval-date-field > legend { padding: 0; margin-bottom: 6px; color: var(--make-approval-muted); font-size: 12px; }
+.make-app-approval-date-range, .make-app-approval-filter-actions { display: flex; align-items: center; gap: 8px; }
+.make-app-approval-date-control { min-width: 0; width: 145px; }
+.make-app-approval-results, .make-app-approval-table-frame { position: relative; }
+.make-app-approval-canvas { width: 100%; height: var(--make-approval-table-height, 440px); min-height: 200px; overflow: hidden; color: var(--make-approval-foreground); }
+.make-app-approval-overlay { position: absolute; inset: 40px 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--make-approval-bg); color: var(--make-approval-muted); }
+.make-app-approval-table-feedback { position: absolute; top: 48px; right: 12px; left: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; color: var(--make-approval-muted); background: var(--make-approval-bg); border: 1px solid var(--make-approval-border); border-radius: var(--make-approval-radius); }
+.make-app-approval-table-loading { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--make-approval-muted); background: var(--make-approval-bg); border: 1px solid var(--make-approval-border); border-radius: var(--make-approval-radius); font-size: 12px; line-height: 20px; white-space: nowrap; pointer-events: none; }
+.make-app-approval-loading-spinner { width: 14px; height: 14px; flex: none; box-sizing: border-box; border: 2px solid var(--make-approval-border); border-top-color: var(--make-approval-primary); border-radius: 50%; animation: make-app-approval-spin 900ms linear infinite; }
+@keyframes make-app-approval-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .make-app-approval-loading-spinner { animation: none; }
+}
+.make-app-approval-error { margin: 0; padding: 0 20px 12px; color: var(--make-approval-error, var(--make-mobile-error, #dc2626)); }
+.make-app-approval-accessible-rows { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.make-app-approval-accessible-rows:focus-within { position: relative; width: auto; height: auto; margin: 0; padding: 12px 20px; clip-path: none; white-space: normal; background: var(--make-approval-bg); list-style: none; }
+.make-app-approval-accessible-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+@media (max-width: 680px) {
+  .make-app-approval-filters { padding: 12px; }
+}
+
+.make-app-approval-detail { color: var(--make-approval-foreground, inherit); font-family: inherit; min-width: 0; display: flex; flex-direction: column; min-height: 100%; }
+.make-app-approval-detail-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 28px; border-bottom: 1px solid var(--make-approval-border, #e2e8f0); }
+.make-app-approval-detail-title, .make-app-approval-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
+.make-app-approval-detail-title h2 { font-size: 18px; font-weight: 600; margin: 0; }
+.make-app-approval-detail-content { flex: 1; min-width: 0; color: var(--make-approval-foreground, inherit); }
+.make-app-approval-detail-section { padding: 28px; }
+.make-app-approval-detail-section h3 { font-size: 14px; font-weight: 600; margin: 0 0 16px; }
+.make-app-approval-detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
+.make-app-approval-detail-field { min-width: 0; display: grid; grid-template-columns: minmax(80px, 24%) minmax(0, 1fr); align-items: center; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--make-approval-border, #e2e8f0); }
+.make-app-approval-detail-field > label { color: var(--make-approval-muted, inherit); font-size: 12px; overflow-wrap: anywhere; }
+.make-app-approval-required { color: var(--make-approval-error, var(--make-mobile-error, #dc2626)); }
+.make-app-approval-detail-value { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
+.make-app-approval-detail-field[data-invalid="true"] > label, .make-app-approval-detail-error { color: var(--make-approval-error, var(--make-mobile-error, #dc2626)); }
+.make-app-approval-detail-error { margin-block: 8px; }
+.make-app-approval-detail-history { border-top: 8px solid var(--make-approval-header, #f6f7f9); }
+.make-app-approval-detail-message { margin-inline: 28px; }
+.make-app-approval-detail-footer { padding: 20px 28px; border-top: 1px solid var(--make-approval-border, #e2e8f0); }
+.make-app-approval-detail-opinion { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--make-approval-border, #e2e8f0); }
+.make-app-approval-detail-opinion > label { font-size: 14px; font-weight: 600; }
+.make-app-approval-action-confirm { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
+.make-app-approval-action-confirm h3 { font-size: 14px; margin: 0; }
+.make-app-approval-action-confirm > .make-app-approval-detail-actions { justify-content: flex-end; }
+.make-app-approval-detail-target { display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
+@media (max-width: 680px) {
+  .make-app-approval-detail-fields { grid-template-columns: minmax(0, 1fr); }
+  .make-app-approval-detail-section, .make-app-approval-detail-header, .make-app-approval-detail-footer { padding: 16px; }
+}

package/dist/styles.css.d.ts

@@ -0,0 +1 @@
+export {};