@ibiz-template/vue3-components 0.7.41-alpha.95 → 0.7.41-alpha.97

package/es/common/control-navigation/provider/navigation-base.provider.mjs

@@ -106,7 +106,9 @@ class NavgationBaseProvider {
    */
   setNavData(data) {
     this.controller.setNavData(data);
-    this.controller.setSelection([data]);
+    setTimeout(() => {
+      this.controller.setSelection([data]);
+    }, 0);
   }
   /**
    * 通过栈数据导航

package/es/common/high-light-code/high-light-code-util.mjs

@@ -0,0 +1,183 @@
+"use strict";
+const KEYWORDS = /* @__PURE__ */ new Set([
+  "async",
+  "function",
+  "Function",
+  "return",
+  "const",
+  "let",
+  "var",
+  "await",
+  "new",
+  "this",
+  "null",
+  "undefined",
+  "true",
+  "false"
+]);
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function normalizeFunctionBody(src) {
+  const open = src.lastIndexOf("{");
+  if (open === -1)
+    return src;
+  let depth = 0;
+  let close = -1;
+  let i = open;
+  while (i < src.length) {
+    const ch = src[i];
+    if (ch === '"' || ch === "'" || ch === "`") {
+      const q = ch;
+      i++;
+      while (i < src.length && src[i] !== q) {
+        if (src[i] === "\\")
+          i++;
+        i++;
+      }
+      i++;
+      continue;
+    }
+    if (ch === "/" && src[i + 1] === "/") {
+      while (i < src.length && src[i] !== "\n")
+        i++;
+      continue;
+    }
+    if (ch === "/" && src[i + 1] === "*") {
+      i += 2;
+      while (i < src.length - 1 && !(src[i] === "*" && src[i + 1] === "/"))
+        i++;
+      i += 2;
+      continue;
+    }
+    if (ch === "{")
+      depth++;
+    else if (ch === "}") {
+      depth--;
+      if (depth === 0) {
+        close = i;
+        break;
+      }
+    }
+    i++;
+  }
+  if (close === -1)
+    return src;
+  const inner = src.slice(open + 1, close);
+  if (/\n/.test(inner))
+    return src;
+  const trimmed = inner.trim();
+  const indented = trimmed ? "\n  ".concat(trimmed, "\n") : "\n";
+  return src.slice(0, open + 1) + indented + src.slice(close);
+}
+const highlight = (src) => {
+  src = normalizeFunctionBody(src);
+  let result = "";
+  let i = 0;
+  console.log(src);
+  while (i < src.length) {
+    if (src[i] === "/" && src[i + 1] === "/") {
+      let j = i;
+      while (j < src.length && src[j] !== "\n")
+        j++;
+      result += '<span class="comment">'.concat(escapeHtml(src.slice(i, j)), "</span>");
+      i = j;
+      continue;
+    }
+    if (src[i] === "/" && src[i + 1] === "*") {
+      let j = i + 2;
+      while (j < src.length - 1 && !(src[j] === "*" && src[j + 1] === "/"))
+        j++;
+      j += 2;
+      result += '<span class="comment">'.concat(escapeHtml(src.slice(i, j)), "</span>");
+      i = j;
+      continue;
+    }
+    if (src[i] === '"' || src[i] === "'" || src[i] === "`") {
+      const quote = src[i];
+      let j = i + 1;
+      while (j < src.length && src[j] !== quote) {
+        if (src[j] === "\\")
+          j++;
+        j++;
+      }
+      j++;
+      result += '<span class="string">'.concat(escapeHtml(src.slice(i, j)), "</span>");
+      i = j;
+      continue;
+    }
+    if (/[0-9]/.test(src[i])) {
+      let j = i;
+      while (j < src.length && /[0-9._]/.test(src[j]))
+        j++;
+      result += '<span class="number">'.concat(escapeHtml(src.slice(i, j)), "</span>");
+      i = j;
+      continue;
+    }
+    if (/[a-zA-Z_$]/.test(src[i])) {
+      let j = i;
+      while (j < src.length && /[a-zA-Z0-9_$]/.test(src[j]))
+        j++;
+      const word = src.slice(i, j);
+      let k = j;
+      while (k < src.length && src[k] === " ")
+        k++;
+      const isCall = src[k] === "(";
+      let m = j;
+      while (m < src.length && src[m] === " ")
+        m++;
+      const isTyped = src[m] === ":";
+      if (KEYWORDS.has(word)) {
+        result += '<span class="keyword">'.concat(escapeHtml(word), "</span>");
+      } else if (isTyped) {
+        result += '<span class="param">'.concat(escapeHtml(word), "</span>");
+      } else if (isCall) {
+        result += '<span class="fn-call">'.concat(escapeHtml(word), "</span>");
+      } else {
+        result += '<span class="ident">'.concat(escapeHtml(word), "</span>");
+      }
+      i = j;
+      continue;
+    }
+    if (src[i] === ":") {
+      result += '<span class="punct">:</span>';
+      i++;
+      let ws = "";
+      while (i < src.length && src[i] === " ") {
+        ws += src[i];
+        i++;
+      }
+      if (ws)
+        result += ws;
+      if (i < src.length && /[a-zA-Z_$]/.test(src[i])) {
+        let j = i;
+        while (j < src.length && /[a-zA-Z0-9_$<>[\]|&]/.test(src[j]))
+          j++;
+        result += '<span class="type">'.concat(escapeHtml(src.slice(i, j)), "</span>");
+        i = j;
+      }
+      continue;
+    }
+    if ("(){}[]".includes(src[i])) {
+      const cls = "([{".includes(src[i]) ? "bracket-open" : "bracket-close";
+      result += '<span class="bracket '.concat(cls, '">').concat(escapeHtml(src[i]), "</span>");
+      i++;
+      continue;
+    }
+    if (",;.".includes(src[i])) {
+      result += '<span class="punct">'.concat(escapeHtml(src[i]), "</span>");
+      i++;
+      continue;
+    }
+    if ("=><+-*/%!&|^~".includes(src[i])) {
+      result += '<span class="operator">'.concat(escapeHtml(src[i]), "</span>");
+      i++;
+      continue;
+    }
+    result += escapeHtml(src[i]);
+    i++;
+  }
+  return result;
+};
+
+export { highlight };

package/es/common/high-light-code/high-light-code.css

@@ -0,0 +1 @@
+.ibiz-high-light-code{color:var(--ibiz-color-text-3);white-space:break-spaces}.ibiz-high-light-code .keyword{color:#7f77dd}.ibiz-high-light-code .type{color:#378add}.ibiz-high-light-code .param{color:#1d9e75}.ibiz-high-light-code .ident{color:#1d9e75}.ibiz-high-light-code .fn-call{color:#d2a8ff}.ibiz-high-light-code .string{color:#639922}.ibiz-high-light-code .number{color:#79c0ff}.ibiz-high-light-code .comment{font-style:italic;color:#8b949e}.ibiz-high-light-code .operator{color:#ff7b72}.ibiz-high-light-code .punct{color:#8b949e}.ibiz-high-light-code .bracket-open{color:#e3b341}.ibiz-high-light-code .bracket-close{color:#e3b341}

package/es/common/high-light-code/high-light-code.mjs

@@ -0,0 +1,31 @@
+import { defineComponent, createVNode, computed } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { highlight } from './high-light-code-util.mjs';
+import './high-light-code.css';
+
+"use strict";
+const IBizHighLightCode = /* @__PURE__ */ defineComponent({
+  name: "IBizHighLightCode",
+  props: {
+    code: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("high-light-code");
+    const highlighted = computed(() => highlight(props.code));
+    return {
+      ns,
+      highlighted
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b(),
+      "innerHTML": this.highlighted
+    }, null);
+  }
+});
+
+export { IBizHighLightCode };

package/es/common/index.mjs

@@ -34,6 +34,7 @@ import { IBizNavSplit } from './nav-split/nav-split.mjs';
 import { IBizCropping } from './cropping/cropping.mjs';
 import { IBizEditorEmptyText } from './editor-empty-text/editor-empty-text.mjs';
 import { IBizKanbanSetting } from './kanben-setting/kanben-setting.mjs';
+import { IBizHighLightCode } from './high-light-code/high-light-code.mjs';
 
 "use strict";
 const IBizCommonComponents = {
@@ -92,6 +93,7 @@ const IBizCommonComponents = {
     v.component(IBizGanttSetting.name, IBizGanttSetting);
     v.component(IBizNavSplit.name, IBizNavSplit);
     v.component(IBizSignaturePad.name, IBizSignaturePad);
+    v.component(IBizHighLightCode.name, IBizHighLightCode);
   }
 };
 

package/es/control/dashboard/portlet/menu-portlet/app-menu-portlet/app-menu-portlet.css

@@ -1 +1 @@
-.ibiz-control-appmenu-portlet{--ibiz-control-appmenu-portlet-margin:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-border-color:var(--ibiz-color-primary);--ibiz-control-appmenu-portlet-bg-color:var(--ibiz-color-bg-0);--ibiz-control-appmenu-portlet-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-content-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);padding:var(--ibiz-control-appmenu-portlet-content-padding)}.ibiz-control-appmenu-portlet__content{display:flex;flex-wrap:wrap;width:100%}.ibiz-control-appmenu-portlet-item{position:relative;display:flex;flex-direction:column;flex-shrink:0;align-items:flex-start;justify-content:center;width:calc(25% - var(--ibiz-control-appmenu-portlet-margin) * 2);padding:var(--ibiz-control-appmenu-portlet-padding);margin:var(--ibiz-control-appmenu-portlet-margin);cursor:pointer;background-color:var(--ibiz-control-appmenu-portlet-bg-color)}.ibiz-control-appmenu-portlet-item::before{position:absolute;left:0;width:4px;height:100%;content:"";background-color:var(--ibiz-control-appmenu-portlet-border-color)}.ibiz-control-appmenu-portlet-group{width:100%}.ibiz-control-appmenu-portlet-group .el-collapse-item__content{display:flex;flex-wrap:wrap}
+.ibiz-control-appmenu-portlet{--ibiz-control-appmenu-portlet-margin:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-border-color:var(--ibiz-color-primary);--ibiz-control-appmenu-portlet-bg-color:var(--ibiz-color-bg-0);--ibiz-control-appmenu-portlet-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-content-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-portlet-counter-gap:var(--ibiz-spacing-tight);padding:var(--ibiz-control-appmenu-portlet-content-padding)}.ibiz-control-appmenu-portlet__content{display:flex;flex-wrap:wrap;width:100%}.ibiz-control-appmenu-portlet-item{position:relative;display:flex;flex-direction:column;flex-shrink:0;align-items:flex-start;justify-content:center;width:calc(25% - var(--ibiz-control-appmenu-portlet-margin) * 2);padding:var(--ibiz-control-appmenu-portlet-padding);margin:var(--ibiz-control-appmenu-portlet-margin);cursor:pointer;background-color:var(--ibiz-control-appmenu-portlet-bg-color)}.ibiz-control-appmenu-portlet-item::before{position:absolute;left:0;width:4px;height:100%;content:"";background-color:var(--ibiz-control-appmenu-portlet-border-color)}.ibiz-control-appmenu-portlet-item .ibiz-control-appmenu-portlet__counter{position:absolute;top:var(--ibiz-control-appmenu-portlet-counter-gap);right:var(--ibiz-control-appmenu-portlet-counter-gap)}.ibiz-control-appmenu-portlet-group{width:100%}.ibiz-control-appmenu-portlet-group .el-collapse-item__header .ibiz-control-appmenu-portlet__counter{margin-left:var(--ibiz-control-appmenu-portlet-counter-gap)}.ibiz-control-appmenu-portlet-group .el-collapse-item__content{display:flex;flex-wrap:wrap}

package/es/control/dashboard/portlet/menu-portlet/app-menu-portlet/app-menu-portlet.mjs

@@ -48,6 +48,9 @@ const AppMenuPortletControl = /* @__PURE__ */ defineComponent({
       if (!state.visible) {
         return null;
       }
+      const {
+        counterId
+      } = item;
       return createVNode("div", {
         "class": [ns.b("item"), ns.is("disabled", !item.appFuncId)],
         "title": showTitle(item.tooltip || item.caption),
@@ -59,7 +62,10 @@ const AppMenuPortletControl = /* @__PURE__ */ defineComponent({
       }, [createVNode(resolveComponent("iBizIcon"), {
         "class": ns.be("item", "icon"),
         "icon": item.sysImage
-      }, null), createVNode("span", {
+      }, null), counterId ? createVNode(resolveComponent("iBizBadge"), {
+        "class": ns.e("counter"),
+        "value": c.state.counterData[counterId]
+      }, null) : null, createVNode("span", {
         "class": ns.be("item", "label")
       }, [item.caption])]);
     };
@@ -71,16 +77,27 @@ const AppMenuPortletControl = /* @__PURE__ */ defineComponent({
       if (!item.appMenuItems) {
         return renderItem(item);
       }
+      const {
+        counterId
+      } = item;
       return createVNode(resolveComponent("el-collapse-item"), {
         "class": ns.b("group"),
         "name": item.id,
         "title": showTitle(item.caption)
       }, {
+        title: () => {
+          return [createVNode("span", {
+            "class": ns.be("group", "label")
+          }, [item.caption]), counterId ? createVNode(resolveComponent("iBizBadge"), {
+            "class": ns.e("counter"),
+            "value": c.state.counterData[counterId]
+          }, null) : null];
+        },
         default: () => {
           var _a2;
-          return [(_a2 = item.appMenuItems) == null ? void 0 : _a2.map((child) => {
+          return (_a2 = item.appMenuItems) == null ? void 0 : _a2.map((child) => {
             return renderItem(child);
-          })];
+          });
         }
       });
     };

package/es/control/dashboard/portlet/rawitem-portlet/rawitem-portlet.mjs

@@ -1,6 +1,5 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, h } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, h, ref, onMounted } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import { RawItemPortletController } from '@ibiz-template/runtime';
 
 "use strict";
 function _isSlot(s) {
@@ -14,17 +13,42 @@ const RawItemPortlet = /* @__PURE__ */ defineComponent({
       required: true
     },
     controller: {
-      type: RawItemPortletController,
+      type: Object,
       required: true
     }
   },
   setup(props) {
     var _a;
-    const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
-    const rawItem = props.modelData;
+    const c = props.controller;
+    const ns = useNamespace("portlet-".concat((_a = c.model.portletType) == null ? void 0 : _a.toLowerCase()));
+    const content = ref();
+    const onInit = async () => {
+      const rawItemModel = c.model.rawItem;
+      if (!rawItemModel)
+        return;
+      let rawItemContent;
+      if (rawItemModel.contentType === "RAW") {
+        rawItemContent = rawItemModel.caption;
+      } else if (rawItemModel.contentType === "HTML") {
+        rawItemContent = rawItemModel.content;
+      }
+      const data = c.dashboard.view.srfactiveviewdata || {};
+      if (rawItemContent && rawItemModel.templateMode)
+        rawItemContent = await ibiz.util.hbs.render(rawItemContent.replaceAll("//n", "\n"), {
+          data: {
+            ...data
+          },
+          context: props.controller.context,
+          params: props.controller.params
+        });
+      content.value = rawItemContent;
+    };
+    onMounted(() => {
+      onInit();
+    });
     return {
       ns,
-      rawItem
+      content
     };
   },
   render() {
@@ -34,7 +58,8 @@ const RawItemPortlet = /* @__PURE__ */ defineComponent({
       "controller": this.controller,
       "class": classArr
     }, _isSlot(_slot = h(resolveComponent("iBizRawItem"), {
-      rawItem: this.rawItem
+      rawItem: this.modelData,
+      content: this.content
     })) ? _slot : {
       default: () => [_slot]
     });

package/es/control/data-view/data-view.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, computed, ref, watch, withDirectives, resolveDirective, h } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, computed, ref, watch, withDirectives, resolveDirective, Fragment, h } from 'vue';
 import { useControlController, useNamespace, useControlPopoverzIndex, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { DataViewControlController, ControlVO, getControl } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
@@ -524,6 +524,102 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
       }
       return icon;
     };
+    const ITEM_HEIGHT = 24;
+    const calcSkeletonRows = () => {
+      const {
+        cardHeight
+      } = c.model;
+      if (cardHeight) {
+        return Math.max(1, Math.floor((cardHeight - 32 + 4) / ITEM_HEIGHT));
+      }
+      return 2;
+    };
+    const renderSkeletonItem = () => {
+      const rows = calcSkeletonRows();
+      return createVNode(resolveComponent("el-card"), {
+        "class": [ns.b("item"), ns.e("skeleton-item")],
+        "body-style": {
+          width: c.model.cardWidth ? "".concat(c.model.cardWidth, "px") : "auto",
+          height: c.model.cardHeight ? "".concat(c.model.cardHeight, "px") : "auto",
+          overflow: "hidden"
+        }
+      }, {
+        default: () => [createVNode(resolveComponent("el-skeleton"), {
+          "animated": true,
+          "style": "min-width: 30px;"
+        }, {
+          template: () => createVNode(Fragment, null, [Array.from({
+            length: rows
+          }, () => createVNode(resolveComponent("el-skeleton-item"), {
+            "variant": "rect"
+          }, null))])
+        })]
+      });
+    };
+    const renderSkeletonCardLayout = (count) => {
+      const {
+        cardColXS,
+        cardColSM,
+        cardColMD,
+        cardColLG
+      } = c.model;
+      if (cardColXS || cardColSM || cardColMD || cardColLG) {
+        return createVNode("div", {
+          "class": ["el-row", ns.e("layout-row")]
+        }, [Array.from({
+          length: count
+        }, () => createVNode(resolveComponent("el-col"), {
+          "xs": cardColXS,
+          "sm": cardColSM,
+          "md": cardColMD,
+          "lg": cardColLG,
+          "class": ns.e("layout-col")
+        }, {
+          default: () => [createVNode("div", {
+            "class": ns.b("scroll-item")
+          }, [renderSkeletonItem()])]
+        }))]);
+      }
+      return createVNode("div", {
+        "class": ns.e("layout-flex")
+      }, [Array.from({
+        length: count
+      }, () => createVNode("div", {
+        "class": ns.b("scroll-item")
+      }, [renderSkeletonItem()]))]);
+    };
+    const renderGroupSkeleton = () => {
+      return createVNode("div", {
+        "class": ns.b("skeleton")
+      }, [Array.from({
+        length: 3
+      }, () => createVNode("div", {
+        "class": ns.b("skeleton-group")
+      }, [createVNode("div", {
+        "class": ns.be("skeleton-group", "header")
+      }, [createVNode(resolveComponent("el-skeleton"), {
+        "animated": true,
+        "rows": 1
+      }, {
+        template: () => createVNode(resolveComponent("el-skeleton-item"), {
+          "variant": "rect",
+          "style": "width: 15%"
+        }, null)
+      })]), createVNode("div", {
+        "class": [ns.be("skeleton", "content"), ns.be("skeleton-group", "content")]
+      }, [renderSkeletonCardLayout(3)])]))]);
+    };
+    const renderSkeleton = () => {
+      if (c.state.enableGroup) {
+        return renderGroupSkeleton();
+      }
+      const count = c.state.size || 6;
+      return createVNode("div", {
+        "class": ns.b("skeleton")
+      }, [createVNode("div", {
+        "class": ns.be("skeleton", "content")
+      }, [renderSkeletonCardLayout(Math.min(count, 20))])]);
+    };
     const renderNavIcon = () => {
       const {
         enableNavView,
@@ -556,7 +652,7 @@ const DataViewControl = /* @__PURE__ */ defineComponent({
         }, null);
     };
     const renderContent = () => {
-      return [c.state.items.length > 0 ? renderHasData() : renderNoData(), renderBatchToolBar(), renderNavIcon(), renderCollapseExpandIcon()];
+      return [!c.state.isLoaded ? renderSkeleton() : c.state.items.length > 0 ? renderHasData() : renderNoData(), renderBatchToolBar(), renderNavIcon(), renderCollapseExpandIcon()];
     };
     const renderPagingBar = () => {
       if (c.state.enablePagingBar && c.model.pagingMode === 1)

package/es/control/form/form-detail/form-rawitem/form-rawitem.mjs

@@ -168,7 +168,9 @@ const FormRawItem = /* @__PURE__ */ defineComponent({
           rawItemContent = await ibiz.util.hbs.render(rawItemContent.replaceAll("//n", "\n"), Object.assign(obj, {
             data: {
               ...newVal
-            }
+            },
+            context: c.context,
+            params: c.params
           }));
         }
         content.value = rawItemContent;

package/es/control/list/list.css

@@ -1 +1 @@
-.ibiz-control-list-item{flex-grow:1;min-height:var(--ibiz-control-list-item-height);padding:var(--ibiz-control-list-padding);font-weight:var(--ibiz-control-list-font-weight);color:var(--ibiz-control-list-text-color);cursor:pointer;background-color:var(--ibiz-control-list-item-bg-color)}.ibiz-control-list-item__right{padding:0 var(--ibiz-spacing-extra-tight)}.ibiz-control-list-item__right--actions{display:flex;-moz-column-gap:var(--ibiz-spacing-extra-tight);column-gap:var(--ibiz-spacing-extra-tight);justify-content:center}.ibiz-control-list-item__right--actions .ibiz-action-toolbar__item{margin:0}.ibiz-control-list-item__right--actions .ibiz-action-toolbar__item--label.is-has-caption{margin:0}.ibiz-control-list-item:has(.ibiz-control-list-item__right){display:flex;justify-content:space-between}.ibiz-control-list-item:has(.ibiz-control-list-item__right) .ibiz-control-list-item__caption{flex:1}.ibiz-control-list-item__new{display:flex;align-items:center;justify-content:center;margin-top:var(--ibiz-spacing-tight);color:var(--ibiz-color-text-3);border:2px dashed var(--ibiz-color-border)}.ibiz-control-list{--ibiz-control-list-text-color:var(--ibiz-color-text-0);--ibiz-control-list-load-more-color:var(--ibiz-color-text-2);--ibiz-control-list-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-list-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-list-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-list-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-tight);--ibiz-control-list-item-bg-color:unset;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%}.ibiz-control-list__drag-icon{cursor:move;visibility:hidden}.ibiz-control-list__nav-icon{position:absolute;top:18px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-list__load-more{text-align:center}.ibiz-control-list__load-more i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-control-list-load-more-color);cursor:pointer}.ibiz-control-list__load-more i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-list__collapse-expand-icon{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-list__collapse-expand-icon i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-list__collapse-expand-icon i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-list__load-more-button{padding:var(--ibiz-control-list-padding);text-align:center}.ibiz-control-list__quicktoolbar{display:flex;justify-content:center;width:100%}.ibiz-control-list__batchtoolbar{display:none;margin:var(--ibiz-spacing-tight) 0}.ibiz-control-list__batchtoolbar.is-show{display:block}.ibiz-control-list .ibiz-control-list-content{flex-grow:1}.ibiz-control-list-content.is-show-underLine .ibiz-control-list-scroll-item{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-control-list-content .ibiz-row-detail:last-of-type .ibiz-control-list-scroll-item{border-bottom:none}.ibiz-control-list-scroll{height:100%;overflow:auto}.ibiz-control-list-scroll.is-reverse-scroll .ibiz-control-list__layout-flex{display:flex;flex-direction:column-reverse}.ibiz-control-list-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%}.ibiz-control-list-scroll-item{display:flex;align-items:center}.ibiz-control-list-scroll-item__checkbox{flex-shrink:0;margin-left:var(--ibiz-spacing-tight)}.ibiz-control-list-scroll-item__icon{flex-shrink:0;margin-left:var(--ibiz-spacing-tight);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-list-scroll-item:hover{background-color:var(--ibiz-control-list-hover-bg-color)}.ibiz-control-list-scroll-item:hover .ibiz-control-list__drag-icon{visibility:visible}.ibiz-control-list-scroll-item.is-active{background-color:var(--ibiz-control-list-active-bg-color)}.ibiz-control-list-group-style2{--ibiz-control-list-group-style2-color:var(--ibiz-color-disabled-text)}.ibiz-control-list-group-style2__header{display:flex;align-items:center;justify-content:center;width:100%}.ibiz-control-list-group-style2__header--title{padding:0 var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-regular);color:var(--ibiz-control-list-group-style2-color)}.ibiz-control-list-group-style2__header::after,.ibiz-control-list-group-style2__header::before{display:block;flex:1;height:1px;margin-top:1px;content:"";border-top:1px var(--ibiz-color-border) solid;transform:translateY(-50%)}
+.ibiz-control-list-item{flex-grow:1;min-height:var(--ibiz-control-list-item-height);padding:var(--ibiz-control-list-padding);font-weight:var(--ibiz-control-list-font-weight);color:var(--ibiz-control-list-text-color);cursor:pointer;background-color:var(--ibiz-control-list-item-bg-color)}.ibiz-control-list-item__right{padding:0 var(--ibiz-spacing-extra-tight)}.ibiz-control-list-item__right--actions{display:flex;-moz-column-gap:var(--ibiz-spacing-extra-tight);column-gap:var(--ibiz-spacing-extra-tight);justify-content:center}.ibiz-control-list-item__right--actions .ibiz-action-toolbar__item{margin:0}.ibiz-control-list-item__right--actions .ibiz-action-toolbar__item--label.is-has-caption{margin:0}.ibiz-control-list-item:has(.ibiz-control-list-item__right){display:flex;justify-content:space-between}.ibiz-control-list-item:has(.ibiz-control-list-item__right) .ibiz-control-list-item__caption{flex:1}.ibiz-control-list-item__new{display:flex;align-items:center;justify-content:center;margin-top:var(--ibiz-spacing-tight);color:var(--ibiz-color-text-3);border:2px dashed var(--ibiz-color-border)}.ibiz-control-list{--ibiz-control-list-text-color:var(--ibiz-color-text-0);--ibiz-control-list-load-more-color:var(--ibiz-color-text-2);--ibiz-control-list-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-list-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-list-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-list-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-tight);--ibiz-control-list-item-bg-color:unset;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%}.ibiz-control-list__drag-icon{cursor:move;visibility:hidden}.ibiz-control-list__nav-icon{position:absolute;top:18px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-list__load-more{text-align:center}.ibiz-control-list__load-more i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-control-list-load-more-color);cursor:pointer}.ibiz-control-list__load-more i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-list__collapse-expand-icon{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-list__collapse-expand-icon i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-list__collapse-expand-icon i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-list__load-more-button{padding:var(--ibiz-control-list-padding);text-align:center}.ibiz-control-list__quicktoolbar{display:flex;justify-content:center;width:100%}.ibiz-control-list__batchtoolbar{display:none;margin:var(--ibiz-spacing-tight) 0}.ibiz-control-list__batchtoolbar.is-show{display:block}.ibiz-control-list .ibiz-control-list-content{flex-grow:1}.ibiz-control-list-content.is-show-underLine .ibiz-control-list-scroll-item{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-control-list-content .ibiz-row-detail:last-of-type .ibiz-control-list-scroll-item{border-bottom:none}.ibiz-control-list-scroll{height:100%;overflow:auto}.ibiz-control-list-scroll.is-reverse-scroll .ibiz-control-list__layout-flex{display:flex;flex-direction:column-reverse}.ibiz-control-list-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%}.ibiz-control-list-scroll-item{display:flex;align-items:center}.ibiz-control-list-scroll-item__checkbox{flex-shrink:0;margin-left:var(--ibiz-spacing-tight)}.ibiz-control-list-scroll-item__icon{flex-shrink:0;margin-left:var(--ibiz-spacing-tight);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-list-scroll-item:hover{background-color:var(--ibiz-control-list-hover-bg-color)}.ibiz-control-list-scroll-item:hover .ibiz-control-list__drag-icon{visibility:visible}.ibiz-control-list-scroll-item.is-active{background-color:var(--ibiz-control-list-active-bg-color)}.ibiz-control-list-group-style2{--ibiz-control-list-group-style2-color:var(--ibiz-color-disabled-text)}.ibiz-control-list-group-style2__header{display:flex;align-items:center;justify-content:center;width:100%}.ibiz-control-list-group-style2__header--title{padding:0 var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-regular);color:var(--ibiz-control-list-group-style2-color)}.ibiz-control-list-group-style2__header::after,.ibiz-control-list-group-style2__header::before{display:block;flex:1;height:1px;margin-top:1px;content:"";border-top:1px var(--ibiz-color-border) solid;transform:translateY(-50%)}.ibiz-control-list-skeleton-item{display:flex;padding-bottom:var(--ibiz-spacing-tight)}.ibiz-control-list-skeleton-item__avatar{flex:none;width:calc(var(--ibiz-spacing-base) * 2 + var(--ibiz-spacing-base-loose) * 3 + var(--ibiz-spacing-base-tight) * 2);padding:0 var(--ibiz-spacing-base);--el-skeleton-circle-size:calc(var(--ibiz-spacing-base-loose) * 3 + var(--ibiz-spacing-base-tight) * 2)}.ibiz-control-list-skeleton-item__avatar .el-skeleton__circle{height:var(--el-skeleton-circle-size)}.ibiz-control-list-skeleton-group__header{margin-bottom:var(--ibiz-spacing-base)}.ibiz-control-list-skeleton-group-style2__header{display:flex;justify-content:center}

package/es/control/list/list.mjs

@@ -525,6 +525,83 @@ const ListControl = /* @__PURE__ */ defineComponent({
       }
       return null;
     };
+    const renderSkeletonItem = () => {
+      return createVNode("div", {
+        "class": ns.b("skeleton-item")
+      }, [createVNode(resolveComponent("el-skeleton"), {
+        "animated": true,
+        "class": ns.be("skeleton-item", "avatar")
+      }, {
+        template: () => createVNode(resolveComponent("el-skeleton-item"), {
+          "variant": "circle"
+        }, null)
+      }), createVNode(resolveComponent("el-skeleton"), {
+        "animated": true,
+        "rows": 2
+      }, null)]);
+    };
+    const renderGroupSkeleton = () => {
+      return createVNode("div", {
+        "class": ns.b("skeleton")
+      }, [Array.from({
+        length: 3
+      }, () => createVNode("div", {
+        "class": ns.b("skeleton-group")
+      }, [createVNode("div", {
+        "class": ns.be("skeleton-group", "header")
+      }, [createVNode(resolveComponent("el-skeleton"), {
+        "animated": true,
+        "rows": 1
+      }, {
+        template: () => createVNode(resolveComponent("el-skeleton-item"), {
+          "variant": "rect",
+          "style": "width: 15%"
+        }, null)
+      })]), createVNode("div", {
+        "class": [ns.be("skeleton", "content"), ns.be("skeleton-group", "content")]
+      }, [Array.from({
+        length: 3
+      }, () => renderSkeletonItem())])]))]);
+    };
+    const renderGroupStyle2Skeleton = () => {
+      return createVNode("div", {
+        "class": ns.b("skeleton")
+      }, [Array.from({
+        length: 3
+      }, () => createVNode("div", {
+        "class": [ns.b("skeleton-group"), ns.b("skeleton-group-style2")]
+      }, [createVNode("div", {
+        "class": [ns.be("skeleton-group", "header"), ns.be("skeleton-group-style2", "header")]
+      }, [createVNode(resolveComponent("el-skeleton"), {
+        "animated": true,
+        "rows": 1,
+        "style": "width: 15%"
+      }, {
+        template: () => createVNode(resolveComponent("el-skeleton-item"), {
+          "variant": "rect"
+        }, null)
+      })]), createVNode("div", {
+        "class": [ns.be("skeleton", "content"), ns.be("skeleton-group", "content"), ns.be("skeleton-group-style2", "content")]
+      }, [Array.from({
+        length: 3
+      }, () => renderSkeletonItem())])]))]);
+    };
+    const renderSkeleton = () => {
+      if (c.state.enableGroup && !c.state.isSimple) {
+        if (c.model.groupStyle === "STYLE2") {
+          return renderGroupStyle2Skeleton();
+        }
+        return renderGroupSkeleton();
+      }
+      const count = c.state.size || 6;
+      return createVNode("div", {
+        "class": ns.b("skeleton")
+      }, [createVNode("div", {
+        "class": ns.be("skeleton", "content")
+      }, [Array.from({
+        length: Math.min(count, 20)
+      }, () => renderSkeletonItem())])]);
+    };
     return {
       c,
       ns,
@@ -536,13 +613,14 @@ const ListControl = /* @__PURE__ */ defineComponent({
       onPageSizeChange,
       renderListContent,
       renderBatchToolBar,
-      renderCollapseExpandIcon
+      renderCollapseExpandIcon,
+      renderSkeleton
     };
   },
   render() {
     let content = null;
     if (this.c.state.isCreated) {
-      content = [this.c.state.items.length > 0 ? this.renderListContent() : this.renderNoData(), this.renderBatchToolBar(), this.c.state.enablePagingBar && this.c.model.pagingMode === 1 ? createVNode(resolveComponent("iBizPagination"), {
+      content = [!this.c.state.isLoaded ? this.renderSkeleton() : this.c.state.items.length > 0 ? this.renderListContent() : this.renderNoData(), this.renderBatchToolBar(), this.c.state.enablePagingBar && this.c.model.pagingMode === 1 ? createVNode(resolveComponent("iBizPagination"), {
         "mode": this.c.paginationMode,
         "class": this.ns.e("pagination"),
         "total": this.c.state.total,

package/es/control/search-bar/filter-mode-select/filter-mode-select.mjs

@@ -52,8 +52,8 @@ const FilterModeSelect = /* @__PURE__ */ defineComponent({
       valueOP: ValueOP.LIKE,
       label: ibiz.i18n.t("control.searchBar.conditions.like")
     }, {
-      valueOP: ValueOP.LIFT_LIKE,
-      label: ibiz.i18n.t("control.searchBar.conditions.lift_like")
+      valueOP: ValueOP.LEFT_LIKE,
+      label: ibiz.i18n.t("control.searchBar.conditions.left_like")
     }, {
       valueOP: ValueOP.RIGHT_LIKE,
       label: ibiz.i18n.t("control.searchBar.conditions.right_like")

package/es/control/search-bar/filter-tree/filter-tree.mjs

@@ -90,8 +90,8 @@ const FilterTreeControl = /* @__PURE__ */ defineComponent({
       valueOP: ValueOP.LIKE,
       label: ibiz.i18n.t("control.searchBar.conditions.like")
     }, {
-      valueOP: ValueOP.LIFT_LIKE,
-      label: ibiz.i18n.t("control.searchBar.conditions.lift_like")
+      valueOP: ValueOP.LEFT_LIKE,
+      label: ibiz.i18n.t("control.searchBar.conditions.left_like")
     }, {
       valueOP: ValueOP.RIGHT_LIKE,
       label: ibiz.i18n.t("control.searchBar.conditions.right_like")