@ibiz-template/vue3-components 0.7.41-alpha.96 → 0.7.41-alpha.98

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/common/pagination/pagination.mjs

@@ -116,7 +116,11 @@ const IBizPagination = /* @__PURE__ */ defineComponent({
         default: () => [createVNode("ion-icon", {
           "name": "refresh-outline"
         }, null)]
-      })]), isNil(this.totalPages) || this.calcTotalPages === this.totalPages ? createVNode("span", null, [ibiz.i18n.t("component.pagination.display"), createTextVNode("\xA0"), this.start, createTextVNode("\xA0-\xA0"), this.end, createTextVNode("\xA0"), ibiz.i18n.t("component.pagination.piece"), createTextVNode("\uFF0C")]) : null, createVNode("span", null, [ibiz.i18n.t("component.pagination.total"), createTextVNode("\xA0"), this.total, createTextVNode("\xA0"), ibiz.i18n.t("component.pagination.pieceData")])]
+      })]), isNil(this.totalPages) || this.calcTotalPages === this.totalPages ? createVNode("span", {
+        "class": this.ns.b("desc")
+      }, [ibiz.i18n.t("component.pagination.display"), createTextVNode("\xA0"), this.start, createTextVNode("\xA0-\xA0"), this.end, createTextVNode("\xA0"), ibiz.i18n.t("component.pagination.piece"), createTextVNode("\uFF0C")]) : null, createVNode("span", {
+        "class": this.ns.b("desc")
+      }, [ibiz.i18n.t("component.pagination.total"), createTextVNode("\xA0"), this.total, createTextVNode("\xA0"), ibiz.i18n.t("component.pagination.pieceData")])]
     })]);
   }
 });

package/es/common/rawitem/rawitem.mjs

@@ -269,6 +269,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
       }
       if (this.rawItemType === "DIVIDER") {
         return createVNode(resolveComponent("el-divider"), {
+          "class": this.ns.e("divider"),
           "content-position": this.dividerParams.contentPosition
         }, {
           default: () => [createVNode("span", {
@@ -278,6 +279,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
       }
       if (this.rawItemType === "INFO" || this.rawItemType === "WARNING" || this.rawItemType === "ERROR") {
         return createVNode(resolveComponent("el-alert"), {
+          "class": this.ns.e("alert"),
           "title": this.alertParams.title,
           "type": this.alertParams.type,
           "show-icon": this.alertParams.showIcon,

package/es/control/calendar/calendar-util.mjs

@@ -36,7 +36,7 @@ function useCalendarLegend(ns) {
     () => getVarValue("".concat(ns.cssVarName("color-black")))
   );
   const getBkColor = (_index) => {
-    return bgColors[_index] || bgColors[0];
+    return bgColors[_index % bgColors.length] || bgColors[0];
   };
   const getActBdrColors = (_index) => {
     return actBdrColors[_index] || getVarValue("".concat(ns.cssVarName("color-primary")));

package/es/control/calendar/calendar.mjs

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 import { debounce } from 'lodash-es';
 import { showTitle } from '@ibiz-template/core';
 import { IBizCustomCalendar } from './components/custom-calendar/index.mjs';
+import { IBizCalendarFlatten } from './components/calendar-flatten/index.mjs';
 import { isTimeBetween, useCalendarLegend, getWeekRange } from './calendar-util.mjs';
 import '../../util/index.mjs';
 import './calendar.css';
@@ -90,15 +91,13 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       const result = !Object.values(c.loadMoreItems).some((item) => item.curPage < item.totalPage);
       return result;
     });
-    const monthLegendClick = (_item) => {
-      Object.assign(_item, {
-        isShow: !_item.isShow
-      });
+    const legendType = ["DAY", "WEEK", "MONTH", "USER2"];
+    const legends = ref([]);
+    const onLegendClick = (item) => {
+      item.isShow = !item.isShow;
     };
-    const legendItems = ref([]);
-    const legendType = ["DAY", "WEEK", "MONTH"];
     const calcLegend = () => {
-      legendItems.value = c.state.legends.map((_item, index) => {
+      legends.value = c.state.legends.map((_item, index) => {
         const tempItem = {
           ..._item,
           isShow: true
@@ -190,13 +189,20 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       return false;
     };
     watch(() => c.state.selectedDate, (newVal, oldVal) => {
-      if (timeRangeComparison(newVal, oldVal)) {
+      if (timeRangeComparison(newVal, oldVal))
+        return;
+      c.load();
+    });
+    watch(() => c.state.timeRange, () => {
+      if (!c.state.isLoaded)
         return;
-      }
       c.load();
     });
+    const onTimeRangeChange = (date) => {
+      c.state.timeRange = date;
+    };
     const calcItemStyle = (data) => {
-      const _legend = legendItems.value.find((_item) => _item.id === data.itemType);
+      const _legend = legends.value.find((_item) => _item.id === data.itemType);
       return {
         color: data.color,
         backgroundColor: data.bkColor,
@@ -207,7 +213,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     const calcCalendarItems = (date) => {
       const weekRange = getWeekRange(date);
       const calendarItems = c.state.items.filter((item) => {
-        const _legend = legendItems.value.find((legend) => legend.id === item.itemType);
+        const _legend = legends.value.find((legend) => legend.id === item.itemType);
         if (_legend && !_legend.isShow)
           return false;
         if (!showDateRange.value) {
@@ -231,7 +237,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         });
       }
       return calendarItems.map((_item) => {
-        const targetLegend = legendItems.value.find((legendItem) => Object.is(legendItem.id, _item.itemType));
+        const targetLegend = legends.value.find((legendItem) => Object.is(legendItem.id, _item.itemType));
         if (!targetLegend)
           return _item;
         if (!_item.bkColor)
@@ -377,9 +383,9 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     return {
       c,
       ns,
+      legends,
       curPopover,
       calendarRef,
-      legendItems,
       popoverValue,
       showDateList,
       showDateRange,
@@ -387,8 +393,9 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       disabledLodeMore,
       selectDate,
       calcItemStyle,
+      onLegendClick,
       handleScrollLoad,
-      monthLegendClick,
+      onTimeRangeChange,
       calcCalendarItems,
       onNodeContextmenu
     };
@@ -503,25 +510,19 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
             "class": this.ns.b("content-title")
           }, [date]), createVNode("div", {
             "class": this.ns.b("legend")
-          }, [this.legendItems && this.legendItems.length > 1 && this.legendItems.map((_legend) => {
-            var _a;
-            let label = _legend.name;
-            const _model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((_calendarItem) => _calendarItem.id === _legend.id);
-            if (_model == null ? void 0 : _model.nameLanguageRes) {
-              label = ibiz.i18n.t(_model.nameLanguageRes.lanResTag, _model.name);
-            }
+          }, [this.legends && this.legends.length > 1 && this.legends.map((legend) => {
             return createVNode("div", {
               "class": [this.ns.be("legend", "item")],
-              "onClick": () => this.monthLegendClick(_legend)
+              "onClick": () => this.onLegendClick(legend)
             }, [createVNode("div", {
               "class": this.ns.bem("legend", "item", "tip"),
               "style": {
-                background: _legend.isShow ? _legend == null ? void 0 : _legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")"),
-                color: _legend == null ? void 0 : _legend.color
+                background: legend.isShow ? legend == null ? void 0 : legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")"),
+                color: legend == null ? void 0 : legend.color
               }
             }, null), createVNode("div", {
               "class": this.ns.bem("legend", "item", "text")
-            }, [label])]);
+            }, [legend.name])]);
           })]), createVNode("div", {
             "class": this.ns.b("content-header")
           }, [createVNode(resolveComponent("el-date-picker"), {
@@ -598,22 +599,23 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         default: () => [noDataSlots]
       });
     };
-    const renderWeekDay = () => {
-      const slots = {};
+    const renderSlots = () => {
       const {
-        sysCalendarItems
+        sysCalendarItems = []
       } = this.c.model;
-      slots.event = ({
-        data
-      }) => {
-        const targetCalendarItem = sysCalendarItems == null ? void 0 : sysCalendarItems.find((item) => {
-          return item.id === data.itemType;
-        });
-        if (targetCalendarItem && targetCalendarItem.layoutPanel) {
-          return renderPanelItem(data, targetCalendarItem.layoutPanel);
+      return {
+        event: ({
+          data
+        }) => {
+          const model = sysCalendarItems.find((item) => data.itemType === item.itemType);
+          if (model == null ? void 0 : model.layoutPanel)
+            return renderPanelItem(data, model.layoutPanel);
+          return renderDefaultItem(data);
         }
-        return renderDefaultItem(data);
       };
+    };
+    const renderWeekDay = () => {
+      let _slot6;
       return createVNode("div", {
         "class": this.ns.b("content")
       }, [createVNode(IBizCustomCalendar, {
@@ -624,7 +626,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         "ref": "calendarRef",
         "viewType": this.c.model.calendarStyle,
         "events": this.c.state.items,
-        "legends": this.legendItems,
+        "legends": this.legends,
         "multiple": !this.c.state.singleSelect,
         "selectedData": this.c.state.selectedData,
         "onEventClick": (value) => {
@@ -652,8 +654,8 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
           if (item && evt)
             this.onNodeContextmenu(item, evt);
         }
-      }, _isSlot(slots) ? slots : {
-        default: () => [slots]
+      }, _isSlot(_slot6 = renderSlots()) ? _slot6 : {
+        default: () => [_slot6]
       })]);
     };
     const renderTimeLine = () => {
@@ -681,6 +683,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       })]);
     };
     const renderCalendar = () => {
+      let _slot7;
       switch (this.c.model.calendarStyle) {
         case "TIMELINE":
           return renderTimeLine();
@@ -688,6 +691,17 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         case "DAY":
         case "USER":
           return renderWeekDay();
+        case "USER2":
+          return createVNode(IBizCalendarFlatten, {
+            "legends": this.legends,
+            "items": this.c.state.items,
+            "timeRange": this.c.state.timeRange,
+            "title": this.c.state.calendarTitle,
+            "onLegendClick": this.onLegendClick,
+            "onTimeRangeChange": this.onTimeRangeChange
+          }, _isSlot(_slot7 = renderSlots()) ? _slot7 : {
+            default: () => [_slot7]
+          });
         case "MONTH":
         default:
           return renderElCalender();

package/es/control/calendar/components/calendar-flatten/calendar-flatten.css

@@ -0,0 +1 @@
+.ibiz-calendar-flatten{display:flex;flex-direction:column;gap:var(--ibiz-spacing-tight);width:100%;height:100%}.ibiz-calendar-flatten__header{display:flex;flex-shrink:0;align-items:center;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-flatten__header--left{flex-shrink:0;min-width:300px}.ibiz-calendar-flatten__header--centre{display:flex;flex-grow:1;gap:var(--ibiz-spacing-tight);align-items:center;justify-content:center}.ibiz-calendar-flatten__header--right{flex-shrink:0}.ibiz-calendar-flatten__body{display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--ibiz-spacing-tight);overflow:auto}.ibiz-calendar-flatten__month-calendar{width:366px;border:1px solid var(--ibiz-color-border)}.ibiz-calendar-flatten__month-calendar .el-calendar__header{display:flex;justify-content:center}.ibiz-calendar-flatten__month-calendar .el-calendar__body{padding:var(--ibiz-spacing-tight)}.ibiz-calendar-flatten__month-calendar .el-calendar-table .el-calendar-day{width:50px;height:50px;padding:0}.ibiz-calendar-flatten__month-calendar .el-calendar-table td.is-selected{background-color:transparent}.ibiz-calendar-flatten__date{display:flex;flex-direction:column;gap:var(--ibiz-spacing-extra-tight);align-items:center;justify-content:center;width:100%;height:100%;padding:4px}.ibiz-calendar-flatten__date--day{flex-shrink:0}.ibiz-calendar-flatten__date--mark{display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--ibiz-spacing-extra-tight);justify-content:center;overflow:hidden}.ibiz-calendar-flatten__dot{width:4px;height:4px;border-radius:50%}.ibiz-calendar-flatten__legend{display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center;cursor:pointer}.ibiz-calendar-flatten__legend--dot{width:16px;height:16px;border-radius:50%}.ibiz-calendar-flatten__popover{max-height:300px;overflow:auto}.ibiz-calendar-flatten__event .ibiz-control-calendar-item{width:126px;height:auto}.ibiz-calendar-flatten__event .ibiz-control-calendar-item.is-active{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}