@ibiz-template/mob-vue3-components 0.7.41-alpha.13 → 0.7.41-alpha.16

package/dist/tree-4CqtwsXL.js

@@ -0,0 +1,2 @@
+System.register(["vue","@ibiz-template/vue3-util","@ibiz-template/runtime","lodash-es","qx-util","@ibiz-template-package/vs-tree-ex"],function(M){"use strict";var N,v,l,D,a,u,k,x,S,E,L,I,z,T,d,A;return{setters:[function(s){N=s.defineComponent,v=s.computed,l=s.ref,D=s.onUnmounted,a=s.createVNode,u=s.resolveComponent,k=s.isVNode,x=s.h,S=s.createApp},function(s){E=s.useControlController,L=s.useNamespace,I=s.IBizIcon},function(s){z=s.TreeController},function(s){T=s.debounce},function(s){d=s.createUUID},function(s){A=s.VsTreeComponent}],execute:function(){function s(i){return typeof i=="function"||Object.prototype.toString.call(i)==="[object Object]"&&!k(i)}const B=N({name:"IBizTreeControl",components:{"vs-tree":A},props:{modelData:{type:Object,required:!0},context:{type:Object,required:!0},params:{type:Object,default:()=>({})},provider:{type:Object},mdctrlActiveMode:{type:Number,default:2},singleSelect:{type:Boolean,default:!0},navigational:{type:Boolean,default:void 0}},setup(){var i,f;const o=E((...e)=>new z(...e)),_=L(`control-${o.model.controlType.toLowerCase()}`),V=v(()=>o.state.selectedData.map(e=>e._id));let C=[];const p=l(),y=l(d()),Q=l(""),K=d(),j=l(!0),G=e=>{const t=x(I,e),n=S(t),r=document.createElement("span");return n.mount(r),C.push(n),r},q=e=>e.map(t=>{const n=t?._icon?G({icon:t?._icon}):"";return{_id:t._id,_uuid:t._uuid,_leaf:t._leaf,_text:t._text,icon:n,_disableSelect:t._disableSelect}}),w=v(()=>{if(!o.state.isLoaded)return[];const e=o.model.rootVisible?o.state.rootNodes:o.state.rootNodes.reduce((t,n)=>n._children?t.concat(n._children):t,[]);return q(e)});function F(e,t){const n=t.state.items.find(r=>r._id===e);return n||t.state.items.find(r=>r._uuid===e)}const J=async(e,t)=>{if(!o.state.isLoaded)return;let n;const r=F(e.data._uuid,o);if(r&&r._children&&!o.state.query?(ibiz.log.debug("\u8282\u70B9\u5C55\u5F00\u52A0\u8F7D-\u672C\u5730",r),n=r._children):(ibiz.log.debug("\u8282\u70B9\u5C55\u5F00\u52A0\u8F7D-\u8FDC\u7A0B",r),n=await o.loadNodes(r)),n&&o.state.rootNodes.includes(n[0])){t(w.value),o.state.mobExpandedKey="",y.value=d();return}t(q(n))},O=(e,t)=>{if(o.state.singleSelect)return;const{originData:n}=t,{selectedData:r}=o.state,c=F(n._uuid,o),h=r.filter(b=>b._id!==c._id);h.length===r.length?o.setSelection(r.concat([c])):o.setSelection(h)},U=(e,t)=>{e.stopPropagation();const{originData:n}=t;n._leaf&&(O(e,t),o.onTreeNodeClick(n,e))},R=e=>{o.state.mobExpandedKey=e._uuid||""},W=T(async()=>{var e,t,n,r,c,h,b,P,H;if(p.value){const g=(c=(r=(n=(t=(e=p.value)==null?void 0:e.tree)==null?void 0:t.tree)==null?void 0:n.store)==null?void 0:r.breadcrumb)==null?void 0:c.list,m=g?g[g.length-1]:null;m&&(m.childNodes=[],(H=(P=(b=(h=p.value)==null?void 0:h.tree)==null?void 0:b.tree)==null?void 0:P.store)==null||H.nodesChange([]),m.loaded=!1,m.setExpand(!0))}},500),X=async e=>{o.state.query=e,await o.load()};o.evt.on("onAfterRefreshParent",()=>{W()}),o.evt.on("onLoadSuccess",()=>{o.state.mobExpandedKey="",y.value=d()});const Y=e=>({id:e._id,name:e._text,children:e._children,isLeaf:e._leaf}),Z=e=>{const{originData:t,loadingEl:n}=e;V.value.includes(t._id)&&n&&(n.parentNode.parentNode.classList.add("selected"),e.store.selectedCurrent=e)},ee=(e,t)=>{o.state.singleSelect&&Z(t);const{originData:n}=t;if(!n._leaf)return e("div",{text:ibiz.i18n.t("control.tree.subordinate"),className:"tree-button",click:(r,c)=>{c.store.breadcrumb.list.push(c),c.setExpand(!0),R(n)}})},te=(e,t)=>{const{checked:n}=t;t.setChecked(!n),U(e,t)},$={maxHeight:"100%",checkInherit:!1,nocheckParent:!0,rootName:(f=(i=o.model.detreeNodes)==null?void 0:i.find(e=>e.rootNode))==null?void 0:f.name,renderContent:ee,customNodeClick:te};return j.value&&Object.assign($,{breadcrumb:{el:`#breadcrumb${K}`,link:(e,t)=>{const n=document.createElement("span"),r=document.createElement("span");return r.innerText=t.name,t.icon instanceof HTMLElement&&n.appendChild(t.icon.cloneNode(!0)),n.appendChild(r),n.className=`${_.be("header","crumb")} ${_.is("root",t._vsroot)}`,n.onclick=()=>R.bind(this)(t),n}}}),D(()=>{C.forEach(e=>{e.unmount()}),C=[]}),{c:o,ns:_,treeRefreshKey:y,treeData:w,options:$,breadcrumb:j,checkedKeys:V,uuid:K,treeRef:p,onNodeCheck:O,onNodeClick:U,loadData:J,treeDataFormat:Y,currentVal:Q,onInput:X}},render(){const i={searchbar:()=>this.c.enableQuickSearch?a(u("van-search"),{modelValue:this.c.state.query,class:this.ns.b("quick-search"),clearable:!0,placeholder:this.c.state.placeHolder,"onUpdate:model-value":this.onInput},null):null},f=this.c.controlPanel?"tree":"default";return i[f]=()=>{const o=[this.breadcrumb&&a("div",{class:this.ns.be("header","container")},[a(u("van-sticky"),null,{default:()=>[a("div",{id:`breadcrumb${this.uuid}`,class:[this.ns.b("header"),this.ns.is("no-root",!this.c.model.rootVisible)]},null)]})]),this.c.state.isCreated&&this.c.state.isLoaded&&a(u("vs-tree"),{"show-line":!0,ref:"treeRef",key:this.treeRefreshKey,class:[this.ns.b("content")],lazy:!0,strictLeaf:!0,options:this.options,"show-checkbox":!this.c.state.singleSelect,showIcon:!0,data:this.treeData,highlightCurrent:!0,checkedKeys:this.checkedKeys,format:this.treeDataFormat,load:this.loadData,onCheck:this.onNodeCheck},null)];return a("div",{class:this.ns.b("container")},[o])},a(u("iBizControlBase"),{controller:this.c},s(i)?i:{default:()=>[i]})}});M({TreeControl:B,default:B})}}});
+//# sourceMappingURL=tree-4CqtwsXL.js.map

package/dist/tree-4CqtwsXL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-4CqtwsXL.js","sources":["../src/control/tree/tree.tsx"],"sourcesContent":["import {\n  useControlController,\n  useNamespace,\n  IBizIcon,\n} from '@ibiz-template/vue3-util';\nimport {\n  computed,\n  defineComponent,\n  PropType,\n  ref,\n  VNode,\n  h as vueH,\n  createApp,\n  App,\n  onUnmounted,\n} from 'vue';\nimport { IDETree } from '@ibiz/model-core';\nimport {\n  IControlProvider,\n  ITreeController,\n  ITreeNodeData,\n  TreeController,\n} from '@ibiz-template/runtime';\nimport { debounce } from 'lodash-es';\nimport { createUUID } from 'qx-util';\nimport { VsTreeComponent } from '@ibiz-template-package/vs-tree-ex';\nimport './tree.scss';\n\nexport const TreeControl = defineComponent({\n  name: 'IBizTreeControl',\n  components: {\n    'vs-tree': VsTreeComponent,\n  },\n  props: {\n    /**\n     * @description 树控件模型数据\n     */\n    modelData: { type: Object as PropType<IDETree>, required: true },\n    /**\n     * @description 应用上下文对象\n     */\n    context: { type: Object as PropType<IContext>, required: true },\n    /**\n     * @description 视图参数对象\n     * @default {}\n     */\n    params: { type: Object as PropType<IParams>, default: () => ({}) },\n    /**\n     * @description 部件适配器\n     */\n    provider: { type: Object as PropType<IControlProvider> },\n    /**\n     * @description 部件激活模式，值为0：无激活，值为1：单击激活，值为2：双击激活\n     * @default 2\n     */\n    mdctrlActiveMode: { type: Number, default: 2 },\n    /**\n     * @description 是否单选\n     * @default true\n     */\n    singleSelect: { type: Boolean, default: true },\n    /**\n     * @description 是否是导航内的（即树导航里的树）\n     */\n    navigational: { type: Boolean, default: undefined },\n  },\n  setup() {\n    const c = useControlController<TreeController>(\n      (...args) => new TreeController(...args),\n    );\n    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);\n    // 默认选中项\n    const checkedKeys = computed(() => {\n      return c.state.selectedData.map(item => item._id);\n    });\n\n    // 节点创建的app实例,用于组件销毁时销毁所有实例\n    let vueApps: App[] = [];\n    // 引用的树组件实例\n    const treeRef = ref();\n    // 用于树强制刷新\n    const treeRefreshKey = ref(createUUID());\n\n    // 快捷搜索值\n    const currentVal = ref('');\n\n    const uuid = createUUID();\n\n    // 启用面包屑功能\n    const breadcrumb = ref(true);\n\n    // 创建图标节点\n    const createIconNode = (customProps: IData) => {\n      const iop = vueH(IBizIcon, customProps);\n      const vueApp = createApp(iop);\n      const dom = document.createElement('span');\n      vueApp.mount(dom);\n      vueApps.push(vueApp);\n      return dom;\n    };\n\n    /**\n     * 创建新的节点对象，隔离组件数据和controller数据\n     * @param {ITreeNodeData[]} nodes\n     * @return {*}  {IData[]}\n     */\n    const toElNodes = (nodes: ITreeNodeData[]): IData[] => {\n      return nodes.map(node => {\n        const iconDom = node?._icon\n          ? createIconNode({ icon: node?._icon })\n          : '';\n        return {\n          _id: node._id,\n          _uuid: node._uuid,\n          _leaf: node._leaf,\n          _text: node._text,\n          icon: iconDom,\n          _disableSelect: node._disableSelect,\n        };\n      });\n    };\n\n    /** 树展示数据 */\n    const treeData = computed(() => {\n      if (!c.state.isLoaded) {\n        return [];\n      }\n      const nodes = c.model.rootVisible\n        ? c.state.rootNodes\n        : c.state.rootNodes.reduce<ITreeNodeData[]>((result, nodeData) => {\n            if (nodeData._children) {\n              return result.concat(nodeData._children as ITreeNodeData[]);\n            }\n            return result;\n          }, []);\n      return toElNodes(nodes as ITreeNodeData[]);\n    });\n\n    /**\n     * 根据id查找树节点数据对象\n     * @export\n     * @param {string} key (数据的_uuid 或者 _id)\n     * @param {ITreeController} c\n     * @return {*}  {(ITreeNodeData | undefined)}\n     */\n    function findNodeData(\n      key: string,\n      controller: ITreeController,\n    ): ITreeNodeData | undefined {\n      const find = controller.state.items.find(item => item._id === key);\n      if (find) {\n        return find;\n      }\n      return controller.state.items.find(item => item._uuid === key);\n    }\n\n    /**\n     * 触发节点加载数据\n     * @author zk\n     * @date 2023-05-29 09:16:07\n     * @param {IData} item\n     * @param {(nodes: IData[]) => void} callback\n     */\n    const loadData = async (\n      item: IData,\n      callback: (nodes: IData[]) => void,\n    ) => {\n      // 没加载前拦截\n      if (!c.state.isLoaded) {\n        return;\n      }\n\n      // 加载时拦截点击事件\n      let nodes: ITreeNodeData[];\n      const nodeData = findNodeData(item.data._uuid, c)!;\n      // 有搜索值为搜索框搜索,必须请求后台数据过滤\n      if (nodeData && nodeData._children && !c.state.query) {\n        ibiz.log.debug('节点展开加载-本地', nodeData);\n        nodes = nodeData._children;\n      } else {\n        ibiz.log.debug('节点展开加载-远程', nodeData);\n        nodes = await c.loadNodes(nodeData);\n      }\n      // 根节点搜索时,返回树展示数据,并强制刷新\n      if (nodes && c.state.rootNodes.includes(nodes[0])) {\n        callback(treeData.value);\n        c.state.mobExpandedKey = '';\n        treeRefreshKey.value = createUUID();\n        return;\n      }\n      callback(toElNodes(nodes));\n    };\n\n    /**\n     * 多选时选中节点变更\n     *\n     * @param {ITreeNodeData} nodeData\n     */\n    const onNodeCheck = (event: MouseEvent, opts: IData) => {\n      if (c.state.singleSelect) {\n        return;\n      }\n      const { originData } = opts;\n      // 选中相关处理\n      const { selectedData } = c.state;\n      const nodeData = findNodeData(originData._uuid, c)!;\n      // 选中里没有则添加，有则删除\n      const filterArr = selectedData.filter(\n        (item: IData) => item._id !== nodeData._id,\n      );\n      if (filterArr.length === selectedData.length) {\n        c.setSelection(selectedData.concat([nodeData]));\n      } else {\n        c.setSelection(filterArr);\n      }\n    };\n\n    const onNodeClick = (event: MouseEvent, opts: IData) => {\n      event.stopPropagation();\n      const { originData } = opts;\n      if (!originData._leaf) {\n        return;\n      }\n      onNodeCheck(event, opts);\n      c.onTreeNodeClick(originData, event);\n    };\n\n    // 处理展开节点切换\n    const handleExpandedLastKey = (data: IData) => {\n      c.state.mobExpandedKey = data._uuid || '';\n    };\n\n    // 搜索\n    const debounceSearch = debounce(async () => {\n      if (treeRef.value) {\n        // 获取最后展开的节点\n        const breadcrumbList =\n          treeRef.value?.tree?.tree?.store?.breadcrumb?.list;\n        const breadcrumbListLast = breadcrumbList\n          ? breadcrumbList[breadcrumbList.length - 1]\n          : null;\n        if (breadcrumbListLast) {\n          breadcrumbListLast.childNodes = [];\n          treeRef.value?.tree?.tree?.store?.nodesChange([]);\n          breadcrumbListLast.loaded = false;\n          breadcrumbListLast.setExpand(true);\n        }\n      }\n    }, 500);\n\n    const onInput = async (value: string): Promise<void> => {\n      c.state.query = value;\n      await c.load();\n    };\n\n    c.evt.on('onAfterRefreshParent', () => {\n      debounceSearch();\n    });\n\n    c.evt.on('onLoadSuccess', () => {\n      c.state.mobExpandedKey = '';\n      treeRefreshKey.value = createUUID();\n    });\n\n    /**\n     * 树数据格式化\n     *\n     * @author zk\n     * @date 2023-07-03 11:07:59\n     * @param {ITreeNodeData} data\n     * @return {*}\n     */\n    const treeDataFormat = (data: ITreeNodeData) => {\n      return {\n        id: data._id,\n        name: data._text,\n        children: data._children,\n        isLeaf: data._leaf,\n      };\n    };\n\n    /**\n     * 处理单选默认选中样式\n     *\n     * @author ljx\n     * @date 2024-12-12 15:07:59\n     * @param {IData} opts\n     * @return {*}\n     */\n    const handleSingleSelect = (opts: IData) => {\n      const { originData, loadingEl } = opts;\n      if (checkedKeys.value.includes(originData._id) && loadingEl) {\n        loadingEl.parentNode.parentNode.classList.add('selected');\n        opts.store.selectedCurrent = opts;\n      }\n    };\n\n    const renderContent = (\n      h: (tag: string, opt: IData) => VNode,\n      opts: IData,\n    ) => {\n      if (c.state.singleSelect) handleSingleSelect(opts);\n      const { originData } = opts;\n      if (!originData._leaf) {\n        return h('div', {\n          text: ibiz.i18n.t('control.tree.subordinate'),\n          className: 'tree-button',\n          click: (e: Event, _opts: IData) => {\n            _opts.store.breadcrumb.list.push(_opts);\n            _opts.setExpand(true);\n            handleExpandedLastKey(originData);\n          },\n        });\n      }\n    };\n\n    const customNodeClick = (event: MouseEvent, opts: IData) => {\n      const { checked } = opts;\n      opts.setChecked(!checked);\n      onNodeClick(event, opts);\n    };\n\n    // vs树配置项\n    const options = {\n      maxHeight: '100%',\n      // 继承父状态\n      checkInherit: false,\n      // 不能选择父节点\n      nocheckParent: true,\n      rootName: c.model.detreeNodes?.find(item => item.rootNode)?.name,\n      renderContent,\n      customNodeClick,\n    };\n\n    if (breadcrumb.value) {\n      Object.assign(options, {\n        breadcrumb: {\n          el: `#breadcrumb${uuid}`,\n          link: (node: IData, data: IData) => {\n            const content = document.createElement('span');\n            const textDom = document.createElement('span');\n            textDom.innerText = data.name;\n            if (data.icon instanceof HTMLElement) {\n              content.appendChild(data.icon.cloneNode(true));\n            }\n            content.appendChild(textDom);\n            content.className = `${ns.be('header', 'crumb')} ${ns.is(\n              'root',\n              data._vsroot,\n            )}`;\n            content.onclick = () => handleExpandedLastKey.bind(this)(data);\n            return content;\n          },\n        },\n      });\n    }\n\n    onUnmounted(() => {\n      // 卸载绘制的图标节点\n      vueApps.forEach((vueApp: App) => {\n        vueApp.unmount();\n      });\n      vueApps = [];\n    });\n\n    return {\n      c,\n      ns,\n      treeRefreshKey,\n      treeData,\n      options,\n      breadcrumb,\n      checkedKeys,\n      uuid,\n      treeRef,\n      onNodeCheck,\n      onNodeClick,\n      loadData,\n      treeDataFormat,\n      currentVal,\n      onInput,\n    };\n  },\n  render() {\n    const slots: IData = {\n      searchbar: () => {\n        if (!this.c.enableQuickSearch) {\n          return null;\n        }\n        return (\n          <van-search\n            modelValue={this.c.state.query}\n            class={this.ns.b('quick-search')}\n            clearable={true}\n            placeholder={this.c.state.placeHolder}\n            onUpdate:model-value={this.onInput}\n          ></van-search>\n        );\n      },\n    };\n    const key = this.c.controlPanel ? 'tree' : 'default';\n    slots[key] = () => {\n      const content = [\n        this.breadcrumb && (\n          <div class={this.ns.be('header', 'container')}>\n            <van-sticky>\n              <div\n                id={`breadcrumb${this.uuid}`}\n                class={[\n                  this.ns.b('header'),\n                  this.ns.is('no-root', !this.c.model.rootVisible),\n                ]}\n              ></div>\n            </van-sticky>\n          </div>\n        ),\n        this.c.state.isCreated && this.c.state.isLoaded && (\n          <vs-tree\n            show-line\n            ref='treeRef'\n            key={this.treeRefreshKey}\n            class={[this.ns.b('content')]}\n            lazy={true}\n            strictLeaf={true}\n            options={this.options}\n            show-checkbox={!this.c.state.singleSelect}\n            showIcon={true}\n            data={this.treeData}\n            highlightCurrent={true}\n            checkedKeys={this.checkedKeys}\n            format={this.treeDataFormat}\n            load={this.loadData}\n            onCheck={this.onNodeCheck}\n          ></vs-tree>\n        ),\n      ];\n      return <div class={this.ns.b('container')}>{content}</div>;\n    };\n    return <iBizControlBase controller={this.c}>{slots}</iBizControlBase>;\n  },\n});\n\nexport default TreeControl;\n"],"names":["_isSlot","s","_isVNode","TreeControl","defineComponent","components","VsTreeComponent","props","type","required","Object","default","setup","c","_a","_b","useControlController","args","TreeController","checkedKeys","useNamespace","computed","item","vueApps","ref","treeRefreshKey","createUUID","treeRef","uuid","iop","vueH","IBizIcon","customProps","vueApp","createApp","dom","toElNodes","nodes","createIconNode","node","mount","push","iconDom","map","result","nodeData","icon","findNodeData","key","controller","find","loadData","callback","treeData","state","onNodeCheck","event","opts","originData","selectedData","filterArr","onNodeClick","debug","loadNodes","handleExpandedLastKey","data","rootNodes","mobExpandedKey","value","_e","_i","breadcrumbList","_d","_c","_b2","_a2","breadcrumbListLast","_h","_g","_f","debounceSearch","treeDataFormat","setSelection","stopPropagation","_leaf","loadingEl","renderContent","h","handleSingleSelect","e","_opts","tree","customNodeClick","onInput","checked","on","evt","breadcrumb","options","content","textDom","ns","onUnmounted","className","click","setExpand","_createVNode","_resolveComponent","slots","maxHeight","checkInherit","nocheckParent","rootName","assign","link","document","innerText","appendChild","onclick","forEach","unmount","exports"],"mappings":"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"}

package/es/common/action-group/action-group.css

@@ -0,0 +1 @@
+.ibiz-action-group__separator{width:100%;height:.0625rem;display:inline-block;vertical-align:middle;background-color:var(--ibiz-color-border)}.ibiz-action-group__button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-action-group .van-popover__content{display:flex;flex-direction:column}.ibiz-action-group .van-popover__content .van-button{padding:0;font-size:var(--van-popover-action-font-size);line-height:var(--van-line-height-md);width:var(--van-popover-action-width);height:var(--van-popover-action-height);border-color:var(--ibiz-color-white)}.ibiz-action-group .van-popover__content .van-button:before{border-color:var(--ibiz-color-white)}.ibiz-action-group .van-popover__content .van-button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}

package/es/common/action-group/action-group.d.ts

@@ -0,0 +1,55 @@
+import { PropType } from 'vue';
+import { IButtonContainerState } from '@ibiz-template/runtime';
+import { IAppDEUIActionGroupDetail } from '@ibiz/model-core';
+import './action-group.scss';
+export declare const IBizActionGroup: import("vue").DefineComponent<{
+    actionDetail: {
+        type: PropType<IAppDEUIActionGroupDetail>;
+        required: true;
+    };
+    actionsState: {
+        type: PropType<IButtonContainerState>;
+        required: true;
+    };
+    popoverClassName: {
+        type: StringConstructor;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    visible: import("vue").ComputedRef<boolean>;
+    caption: import("vue").ComputedRef<string | undefined>;
+    buttonRef: import("vue").Ref<any>;
+    placement: import("vue").ComputedRef<"bottom" | "right" | "top-end" | "top-start" | "bottom-end" | "bottom-start" | "left-end" | "right-end" | "left-start" | "right-start">;
+    showPopover: import("vue").Ref<boolean>;
+    childPopover: import("vue").Ref<boolean>;
+    renderActions: () => ((import("vue/jsx-runtime").JSX.Element | undefined)[] | null)[];
+    onPopoverVisibleChange: (visible: boolean) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    actionClick: (detail: IAppDEUIActionGroupDetail, event: MouseEvent) => true;
+    popoverVisibleChange: (visible: boolean) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    actionDetail: {
+        type: PropType<IAppDEUIActionGroupDetail>;
+        required: true;
+    };
+    actionsState: {
+        type: PropType<IButtonContainerState>;
+        required: true;
+    };
+    popoverClassName: {
+        type: StringConstructor;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+}>> & {
+    onActionClick?: ((detail: IAppDEUIActionGroupDetail, event: MouseEvent) => any) | undefined;
+    onPopoverVisibleChange?: ((visible: boolean) => any) | undefined;
+}, {
+    direction: "vertical" | "horizontal";
+}, {}>;

package/es/common/action-group/action-group.mjs

@@ -0,0 +1,174 @@
+import { ref, computed, createVNode, resolveComponent, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import '../../util/index.mjs';
+import './action-group.css';
+import { convertBtnType } from '../../util/button-util/button-util.mjs';
+
+"use strict";
+const IBizActionGroup = /* @__PURE__ */ defineComponent({
+  name: "IBizActionGroup",
+  props: {
+    actionDetail: {
+      type: Object,
+      required: true
+    },
+    actionsState: {
+      type: Object,
+      required: true
+    },
+    popoverClassName: {
+      type: String
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    }
+  },
+  emits: {
+    actionClick: (detail, event) => true,
+    popoverVisibleChange: (visible) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("action-group");
+    const showPopover = ref(false);
+    const buttonRef = ref();
+    const childPopover = ref(false);
+    const details = computed(() => {
+      if (props.actionDetail.detailType === "DEUIACTIONGROUP" && props.actionDetail.refUIActionGroup)
+        return props.actionDetail.refUIActionGroup.uiactionGroupDetails || [];
+      return [];
+    });
+    const visible = computed(() => {
+      const visible2 = details.value.some((item) => {
+        var _a, _b;
+        return (_b = (_a = props.actionsState) == null ? void 0 : _a[item.id]) == null ? void 0 : _b.visible;
+      });
+      return visible2;
+    });
+    const caption = computed(() => {
+      var _a, _b;
+      return ((_a = props.actionDetail.refUIActionGroup) == null ? void 0 : _a.name) || ((_b = props.actionDetail.refUIActionGroup) == null ? void 0 : _b.id);
+    });
+    const placement = computed(() => {
+      if (!buttonRef.value)
+        return props.direction === "horizontal" ? "right" : "bottom";
+      const {
+        innerWidth,
+        innerHeight
+      } = window;
+      const {
+        offsetLeft: x,
+        offsetTop: y,
+        offsetWidth: width
+      } = buttonRef.value.$el;
+      const centerX = innerWidth - width - 128;
+      const centerY = details.value.length ? innerHeight - details.value.length * 44 : innerHeight / 2;
+      if (y > centerY) {
+        if (props.direction === "horizontal")
+          return x > centerX ? "left-end" : "right-end";
+        return x > centerX ? "top-end" : "top-start";
+      }
+      if (props.direction === "horizontal")
+        return x > centerX ? "left-start" : "right-start";
+      return x > centerX ? "bottom-end" : "bottom-start";
+    });
+    const handleClick = async (detail, event, closePopover = false) => {
+      if (closePopover)
+        showPopover.value = false;
+      emit("actionClick", detail, event);
+    };
+    const onPopoverVisibleChange = (visible2) => {
+      emit("popoverVisibleChange", visible2);
+    };
+    const renderSeparator = (visible2) => {
+      if (visible2)
+        return createVNode("div", {
+          "class": ns.e("separator")
+        }, null);
+    };
+    const renderActions = () => {
+      var _a;
+      return (_a = details.value) == null ? void 0 : _a.map((detail) => {
+        var _a2, _b, _c;
+        if (detail.detailType === "DEUIACTIONGROUP")
+          return [renderSeparator(detail.addSeparator), createVNode(resolveComponent("iBizActionGroup"), {
+            "actionDetail": detail,
+            "onActionClick": handleClick,
+            "actionsState": props.actionsState,
+            "popoverClassName": props.popoverClassName,
+            "onPopoverVisibleChange": (visible2) => childPopover.value = visible2
+          }, null)];
+        if ((_b = (_a2 = props.actionsState) == null ? void 0 : _a2[detail.id]) == null ? void 0 : _b.visible)
+          return [renderSeparator(detail.addSeparator), createVNode(resolveComponent("van-button"), {
+            "size": "small",
+            "type": convertBtnType(detail.buttonStyle),
+            "text": detail.showCaption ? detail.caption : "",
+            "onClick": (e) => handleClick(detail, e, true),
+            "disabled": props.actionsState[detail.id].disabled,
+            "class": [ns.e("item"), (_c = detail.sysCss) == null ? void 0 : _c.codeName]
+          }, {
+            icon: () => {
+              return detail.showIcon && detail.sysImage && createVNode(resolveComponent("iBizIcon"), {
+                "icon": detail.sysImage
+              }, null);
+            }
+          })];
+        return null;
+      });
+    };
+    return {
+      ns,
+      visible,
+      caption,
+      buttonRef,
+      placement,
+      showPopover,
+      childPopover,
+      renderActions,
+      onPopoverVisibleChange
+    };
+  },
+  render() {
+    if (this.visible)
+      return createVNode(resolveComponent("van-popover"), {
+        "placement": this.placement,
+        "show": this.showPopover,
+        "onUpdate:show": ($event) => this.showPopover = $event,
+        "close-on-click-outside": !this.childPopover,
+        "class": [this.ns.b(), this.popoverClassName],
+        "onOpen": () => this.onPopoverVisibleChange(true),
+        "onClose": () => this.onPopoverVisibleChange(false)
+      }, {
+        reference: () => {
+          return createVNode(resolveComponent("van-button"), {
+            "size": "small",
+            "ref": "buttonRef",
+            "class": this.ns.e("button"),
+            "type": convertBtnType(this.actionDetail.buttonStyle)
+          }, {
+            icon: () => {
+              return this.actionDetail.showIcon && this.actionDetail.sysImage && createVNode(resolveComponent("iBizIcon"), {
+                "icon": this.actionDetail.sysImage
+              }, null);
+            },
+            default: () => {
+              return [createVNode("div", {
+                "class": this.ns.em("button", "text")
+              }, [this.actionDetail.showCaption ? this.caption : ""]), createVNode("ion-icon", {
+                "class": this.ns.em("button", "icon"),
+                "name": this.direction === "horizontal" ? "chevron-forward-outline" : "chevron-down-outline"
+              }, null)];
+            }
+          });
+        },
+        default: () => {
+          return this.renderActions();
+        }
+      });
+    return void 0;
+  }
+});
+
+export { IBizActionGroup };

package/es/common/action-toolbar/action-toolbar.d.ts

@@ -32,6 +32,7 @@ export declare const IBizActionToolbar: import("vue").DefineComponent<{
 }, {
     ns: import("@ibiz-template/core").Namespace;
     handleClick: (detail: IAppDEUIActionGroupDetail, event: MouseEvent) => Promise<void>;
+    renderSeparator: () => import("vue/jsx-runtime").JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     actionDetails: {
         type: {

package/es/common/action-toolbar/action-toolbar.mjs

@@ -30,27 +30,40 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
       event.stopPropagation();
       emit("action-click", detail, event);
     };
+    const renderSeparator = () => {
+      return createVNode("div", {
+        "class": ns.e("separator")
+      }, null);
+    };
     return {
       ns,
-      handleClick
+      handleClick,
+      renderSeparator
     };
   },
   render() {
     const details = this.actionDetails || [];
-    if (this.mode === "buttons") {
+    if (this.mode === "buttons")
       return createVNode("div", {
         "class": [this.ns.b(), this.ns.m("buttons")]
       }, [details.length > 0 && details.map((detail) => {
-        if (this.actionsState[detail.id].visible) {
-          return [detail.addSeparator && createVNode("div", {
-            "class": this.ns.e("separator")
-          }, null), createVNode(resolveComponent("van-button"), {
+        var _a, _b, _c;
+        if (detail.detailType === "DEUIACTIONGROUP")
+          return [detail.addSeparator && this.renderSeparator(), createVNode(resolveComponent("iBizActionGroup"), {
+            "direction": "vertical",
+            "actionDetail": detail,
+            "actionsState": this.actionsState,
+            "onActionClick": this.handleClick,
+            "popoverClassName": this.ns.b("action-group")
+          }, null)];
+        if ((_b = (_a = this.actionsState) == null ? void 0 : _a[detail.id]) == null ? void 0 : _b.visible) {
+          return [detail.addSeparator && this.renderSeparator(), createVNode(resolveComponent("van-button"), {
             "size": "small",
             "text": detail.showCaption ? detail.caption : "",
             "type": convertBtnType(detail.buttonStyle),
             "onClick": (e) => this.handleClick(detail, e),
             "disabled": this.actionsState[detail.id].disabled,
-            "class": [this.ns.e("item"), this.ns.is("disabled", false)]
+            "class": [this.ns.e("item"), this.ns.is("disabled", false), (_c = detail.sysCss) == null ? void 0 : _c.codeName]
           }, {
             icon: () => {
               return detail.showIcon && detail.sysImage && createVNode(resolveComponent("iBizIcon"), {
@@ -61,7 +74,6 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
         }
         return null;
       })]);
-    }
     return createVNode("div", null, [ibiz.i18n.t("component.actionToolbar.noSupportDropDown")]);
   }
 });

package/es/common/button-list/button-list.css

@@ -1 +1 @@
-.ibiz-button-list{width:100%;height:100%}.ibiz-button-list .van-button{border:none}.ibiz-button-list .van-button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list .van-button .van-button__text .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-width-icon-medium)}.ibiz-button-list__content{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__popover{--ibiz-color-bg-0:var(--van-popover-light-text-color)}.ibiz-button-list__popover .van-popover__action--disabled,.ibiz-button-list__popover .van-popover__action--disabled:active{color:var(--ibiz-color-disabled-text)!important;background-color:var(--ibiz-color-disabled-bg)}.ibiz-button-list__popover--item{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__popover--item .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-width-icon-medium)}.ibiz-button-list__popover--caption{display:flex;line-height:100%;align-items:center;gap:var(--ibiz-spacing-extra-tight)}
+.ibiz-button-list{width:100%;height:100%}.ibiz-button-list .van-button{border:none}.ibiz-button-list .van-button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list .van-button .van-button__text .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-width-icon-medium)}.ibiz-button-list__content{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__button--caption{display:flex;line-height:100%;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__popover{--ibiz-color-bg-0:var(--van-popover-light-text-color)}.ibiz-button-list__popover .van-popover__action--disabled,.ibiz-button-list__popover .van-popover__action--disabled:active{color:var(--ibiz-color-disabled-text)!important;background-color:var(--ibiz-color-disabled-bg)}.ibiz-button-list__popover .van-popover__content{display:flex;flex-direction:column}.ibiz-button-list__popover .van-popover__content .van-button{padding:0;font-size:var(--van-popover-action-font-size);line-height:var(--van-line-height-md);width:var(--van-popover-action-width);height:var(--van-popover-action-height);border-color:var(--ibiz-color-white)}.ibiz-button-list__popover .van-popover__content .van-button:before{border-color:var(--ibiz-color-white)}.ibiz-button-list__popover .van-popover__content .van-button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}

package/es/common/button-list/button-list.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, Ref } from 'vue';
 import { JSX } from 'vue/jsx-runtime';
 import { IPanelButtonList, IDEFormButtonList } from '@ibiz/model-core';
 import { IButtonContainerState } from '@ibiz-template/runtime';
@@ -21,8 +21,9 @@ export declare const IBizButtonList: import("vue").DefineComponent<{
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
+    buttonRef: Ref<any>;
     renderDropdown: () => JSX.Element;
-    renderActions: () => JSX.Element;
+    renderActions: (direction: 'horizontal' | 'vertical') => ((JSX.Element | undefined)[] | null)[];
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (_id: string, _e?: MouseEvent) => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/es/common/button-list/button-list.mjs

@@ -1,4 +1,4 @@
-import { ref, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { ref, computed, createVNode, resolveComponent, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import '../../util/index.mjs';
 import './button-list.css';
@@ -29,6 +29,36 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
   }) {
     const ns = useNamespace("button-list");
     const showPopover = ref(false);
+    const buttonRef = ref();
+    const childPopover = ref(false);
+    const details = computed(() => {
+      const {
+        buttonListType,
+        uiactionGroup
+      } = props.model;
+      if (buttonListType === "UIACTIONGROUP")
+        return (uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) || [];
+      return props.model.panelButtons || props.model.deformButtons || [];
+    });
+    const placement = computed(() => {
+      if (!buttonRef.value)
+        return "bottom";
+      const {
+        innerWidth,
+        innerHeight
+      } = window;
+      const {
+        offsetLeft: x,
+        offsetTop: y,
+        offsetWidth: width
+      } = buttonRef.value.$el;
+      const centerX = innerWidth - width - 128;
+      const centerY = details.value.length ? innerHeight - details.value.length * 44 : innerHeight / 2;
+      if (y > centerY) {
+        return x > centerX ? "top-end" : "top-start";
+      }
+      return x > centerX ? "bottom-end" : "bottom-start";
+    });
     const buttonListStyle = computed(() => {
       const {
         itemStyle,
@@ -37,102 +67,90 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
       return itemStyle || detailStyle || "DEFAULT";
     });
     const handleClick = (item, e) => {
+      e == null ? void 0 : e.stopPropagation();
       emit("click", item.id, e);
     };
     const onChangePopover = (e) => {
       e.stopPropagation();
       showPopover.value = !showPopover.value;
     };
-    const details = computed(() => {
-      const {
-        buttonListType,
-        uiactionGroup
-      } = props.model;
-      if (buttonListType === "UIACTIONGROUP")
-        return (uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) || [];
-      return props.model.panelButtons || props.model.deformButtons || [];
-    });
-    const actions = computed(() => {
-      return details.value.filter((detail) => {
-        var _a;
-        return ((_a = props.buttonsState[detail.id]) == null ? void 0 : _a.visible) !== false;
-      }).map((detail) => {
-        var _a, _b;
-        return {
-          ...detail,
-          disabled: (_a = props.buttonsState[detail.id]) == null ? void 0 : _a.disabled,
-          className: (_b = detail.sysCss) == null ? void 0 : _b.cssName
-        };
-      });
-    });
-    const renderActions = () => {
-      return createVNode("div", {
-        "class": ns.e("content")
-      }, [details.value.map((item) => {
+    const renderSeparator = (visible) => {
+      if (visible)
+        return createVNode("div", {
+          "class": ns.e("separator")
+        }, null);
+    };
+    const renderActions = (direction) => {
+      const showSeparator = direction === "vertical";
+      return details.value.map((item) => {
         var _a, _b, _c, _d;
-        if (((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible) === false)
-          return;
-        return createVNode(resolveComponent("van-button"), {
-          "class": [ns.e("item"), ns.em("item", `${(_b = item.id) == null ? void 0 : _b.toLowerCase()}`), (_c = item.sysCss) == null ? void 0 : _c.cssName],
-          "size": "small",
-          "type": convertBtnType(item.buttonStyle),
-          "disabled": ((_d = props.buttonsState[item.id]) == null ? void 0 : _d.disabled) || props.disabled,
-          "onClick": (event) => handleClick(item, event)
-        }, {
-          default: () => [item.showIcon !== false && createVNode(resolveComponent("iBizIcon"), {
-            "icon": item.sysImage,
-            "class": ns.em("item", "icon")
-          }, null), item.showCaption && createVNode("span", {
-            "class": ns.em("item", "caption")
-          }, [item.caption])]
-        });
-      })]);
+        if (item.detailType === "DEUIACTIONGROUP")
+          return [renderSeparator(item.addSeparator && showSeparator), createVNode(resolveComponent("iBizActionGroup"), {
+            "actionDetail": item,
+            "onActionClick": handleClick,
+            "actionsState": props.buttonsState,
+            "popoverClassName": ns.b("action-group"),
+            "onPopoverVisibleChange": (visible) => childPopover.value = visible,
+            "direction": direction === "horizontal" ? "vertical" : "horizontal"
+          }, null)];
+        if ((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible)
+          return [renderSeparator(item.addSeparator && showSeparator), createVNode(resolveComponent("van-button"), {
+            "size": "small",
+            "class": [ns.e("item"), ns.em("item", `${(_b = item.id) == null ? void 0 : _b.toLowerCase()}`), (_c = item.sysCss) == null ? void 0 : _c.cssName],
+            "type": convertBtnType(item.buttonStyle),
+            "disabled": ((_d = props.buttonsState[item.id]) == null ? void 0 : _d.disabled) || props.disabled,
+            "onClick": (event) => handleClick(item, event)
+          }, {
+            default: () => [item.showIcon !== false && createVNode(resolveComponent("iBizIcon"), {
+              "icon": item.sysImage,
+              "class": ns.em("item", "icon")
+            }, null), item.showCaption && createVNode("span", {
+              "class": ns.em("item", "caption")
+            }, [item.caption])]
+          })];
+        return null;
+      });
     };
     const renderDropdown = () => {
       return createVNode(resolveComponent("van-popover"), {
         "class": ns.e("popover"),
-        "placement": "bottom-end",
-        "actions": actions.value,
+        "placement": placement.value,
         "show": showPopover.value,
         "onUpdate:show": ($event) => showPopover.value = $event,
-        "onSelect": (data) => handleClick(data)
+        "close-on-click-outside": !childPopover.value
       }, {
-        action: ({
-          action
-        }) => {
-          return createVNode("span", {
-            "class": ns.em("popover", "item")
-          }, [action.showIcon !== false && action.sysImage && createVNode(resolveComponent("iBizIcon"), {
-            "icon": action.sysImage
-          }, null), action.showCaption && action.caption]);
-        },
         reference: () => {
           const {
             caption,
-            sysImage,
-            showCaption
+            sysImage
           } = props.model;
           return createVNode(resolveComponent("van-button"), {
             "size": "small",
+            "ref": "buttonRef",
+            "class": ns.e("button"),
             "disabled": props.disabled,
             "onClick": onChangePopover,
             "type": convertBtnType(buttonListStyle.value)
           }, {
             default: () => [sysImage && createVNode(resolveComponent("iBizIcon"), {
-              "class": ns.em("popover", "icon"),
+              "class": ns.em("button", "icon"),
               "icon": sysImage
-            }, null), showCaption && createVNode("span", {
-              "class": ns.em("popover", "caption")
+            }, null), caption && createVNode("span", {
+              "class": ns.em("button", "caption")
             }, [caption, createVNode("ion-icon", {
               "name": "chevron-down-outline",
-              "class": ns.em("popover", "more")
+              "class": ns.em("button", "more")
             }, null)])]
           });
+        },
+        default: () => {
+          return renderActions("vertical");
         }
       });
     };
     return {
       ns,
+      buttonRef,
       renderDropdown,
       renderActions
     };
@@ -142,7 +160,9 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
     return createVNode("div", {
       "class": [this.ns.b(), this.ns.m(this.model.id), this.ns.m((_a = this.model.actionGroupExtractMode) == null ? void 0 : _a.toLowerCase())],
       "style": this.model.cssStyle
-    }, [this.model.actionGroupExtractMode === "ITEM" || this.model.buttonListType === "BUTTONS" ? this.renderActions() : this.renderDropdown()]);
+    }, [this.model.actionGroupExtractMode === "ITEM" || this.model.buttonListType === "BUTTONS" ? createVNode("div", {
+      "class": this.ns.e("content")
+    }, [this.renderActions("horizontal")]) : this.renderDropdown()]);
   }
 });
 

package/es/common/index.mjs

@@ -16,10 +16,12 @@ import { IBizMdCtrlSetting } from './md-ctrl-setting/md-ctrl-setting.mjs';
 import { IBizPreviewImage } from './preview-image/preview-image.mjs';
 import { IBizDateRangeCalendar } from './date-range-picker/date-range-picker.mjs';
 import { IBizCropping } from './cropping/cropping.mjs';
+import { IBizActionGroup } from './action-group/action-group.mjs';
 
 "use strict";
 const IBizCommonComponents = {
   install: (v) => {
+    v.component(IBizActionGroup.name, IBizActionGroup);
     v.component(IBizDateRangeCalendar.name, IBizDateRangeCalendar);
     v.component(IBizViewShell.name, IBizViewShell);
     v.component(IBizRow.name, IBizRow);

package/es/common/rawitem/rawitem.mjs

@@ -85,7 +85,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
           }
         }
       }
-      if (["TEXT", "HEADING1", "HEADING2", "HEADING3", "HEADING4", "HEADING5", "HEADING6", "PARAGRAPH", "HTML"].includes(rawItemType.value)) {
+      if (["TEXT", "HEADING1", "HEADING2", "HEADING3", "HEADING4", "HEADING5", "HEADING6", "PARAGRAPH", "HTML", "RAW"].includes(rawItemType.value)) {
         rawItemText.value = rawItemContent.value;
         if (typeof rawItemText.value === "string") {
           rawItemText.value = rawItemText.value.replaceAll("&lt;", "<");
@@ -161,7 +161,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
           "icon": this.rawItemContent
         }, null);
       }
-      if (this.rawItemType === "TEXT") {
+      if (this.rawItemType === "TEXT" || this.rawItemType === "RAW") {
         return createVNode("span", {
           "class": this.ns.e("text")
         }, [this.rawItemText]);