@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.8

package/lib/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.cjs

@@ -0,0 +1,153 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var ramda = require('ramda');
+require('./ibiz-checkbox-list.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const IBizCheckboxList = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizCheckboxList",
+  props: vue3Util.getCheckboxListProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("checkbox-list");
+    const c = props.controller;
+    const codeList = c.codeList;
+    const items = vue.ref([]);
+    vue.watch(() => props.data, (newVal) => {
+      c.loadCodeList(newVal).then((_codeList) => {
+        items.value = _codeList;
+      });
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const currentMode = vue.computed(() => {
+      if (codeList && codeList.orMode) {
+        return codeList.orMode.toLowerCase();
+      }
+      return "str";
+    });
+    let valueSeparator = ",";
+    if (codeList && codeList.valueSeparator) {
+      valueSeparator = codeList.valueSeparator;
+    }
+    const selectArray = vue.computed({
+      get() {
+        if (!ramda.isNil(props.value)) {
+          if (Object.is(currentMode.value, "num") && items) {
+            const selectsArray = [];
+            const num = typeof props.value === "string" ? parseInt(props.value, 10) : props.value;
+            items.value.forEach((item) => {
+              if ((num & item.value) === item.value) {
+                selectsArray.push(item.value);
+              }
+            });
+            return selectsArray;
+          }
+          if (Object.is(currentMode.value, "str")) {
+            const strVal = props.value;
+            if (strVal !== "") {
+              if (codeList) {
+                const selects = strVal.split(valueSeparator);
+                if (codeList.codeItemValueNumber) {
+                  for (let i = 0, len = selects.length; i < len; i++) {
+                    selects[i] = Number(selects[i]);
+                  }
+                }
+                return selects;
+              }
+              return strVal.split(",");
+            }
+          }
+        }
+        return [];
+      },
+      set(val) {
+        let value = null;
+        if (Object.is(currentMode.value, "num")) {
+          let temp = 0;
+          val.forEach((item) => {
+            const numVal = typeof item === "string" ? parseInt(item, 10) : item;
+            temp |= numVal;
+          });
+          value = temp;
+        } else if (Object.is(currentMode.value, "str")) {
+          const _datas = [];
+          if (items.value.length > 0) {
+            items.value.forEach((_item) => {
+              const index = val.findIndex((_key) => Object.is(_item.value, _key));
+              if (index === -1) {
+                return;
+              }
+              _datas.push(_item.value);
+            });
+            value = _datas.join(valueSeparator);
+          }
+        }
+        emit("change", value);
+      }
+    });
+    const onSelectArrayChange = (value) => {
+      selectArray.value = value;
+    };
+    const valueText = vue.computed(() => {
+      const valueArr = Array.isArray(selectArray.value) ? selectArray.value : [selectArray.value];
+      return items.value.filter((item) => {
+        let isInclude = false;
+        valueArr.forEach((val) => {
+          if (val == item.value) {
+            isInclude = true;
+          }
+        });
+        return isInclude;
+      }).map((item) => item.text).join(",");
+    });
+    vue.watch(valueText, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        emit("infoTextChange", newVal);
+      }
+    }, {
+      immediate: true
+    });
+    const {
+      componentRef: editorRef
+    } = vue3Util.useFocusAndBlur(() => emit("focus"), () => emit("blur"));
+    return {
+      ns,
+      items,
+      selectArray,
+      valueText,
+      editorRef,
+      onSelectArrayChange
+    };
+  },
+  render() {
+    let _slot;
+    return vue.createVNode("div", {
+      "ref": "editorRef",
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
+    }, [this.readonly ? this.valueText : vue.createVNode(vue.resolveComponent("el-checkbox-group"), {
+      "model-value": this.selectArray,
+      "onChange": this.onSelectArrayChange
+    }, _isSlot(_slot = this.items.map((item, index) => vue.createVNode(vue.resolveComponent("el-checkbox"), {
+      "key": index,
+      "label": item.value,
+      "disabled": this.disabled || item.disableSelect === true
+    }, {
+      default: () => [vue.createVNode("span", {
+        "class": this.ns.e("text")
+      }, [item.text])]
+    }))) ? _slot : {
+      default: () => [_slot]
+    })]);
+  }
+});
+
+exports.IBizCheckboxList = IBizCheckboxList;

package/lib/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.css

@@ -0,0 +1 @@
+.ibiz-checkbox-list__text{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color)}.ibiz-checkbox-list--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}

package/lib/editor/check-box-list/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var ibizCheckboxList = require('./ibiz-checkbox-list/ibiz-checkbox-list.cjs');
+var checkboxListEditor_controller = require('./checkbox-list-editor.controller.cjs');
+var checkboxListEditor_provider = require('./checkbox-list-editor.provider.cjs');
+
+"use strict";
+
+exports.IBizCheckboxList = ibizCheckboxList.IBizCheckboxList;
+exports.CheckBoxListEditorController = checkboxListEditor_controller.CheckBoxListEditorController;
+exports.CheckBoxListEditorProvider = checkboxListEditor_provider.CheckBoxListEditorProvider;

package/lib/editor/code/code-editor.controller.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+class CodeEditorController extends runtime.EditorController {
+  /**
+   * 语言类型
+   * @author lxm
+   * @date 2023-07-21 04:52:16
+   * @readonly
+   */
+  get language() {
+    return this.editorParams.codeType || this.editorParams.language || "typescript";
+  }
+  /**
+   * 主题
+   * @author lxm
+   * @date 2023-07-21 04:53:37
+   * @readonly
+   */
+  get theme() {
+    return this.editorParams.theme || "vs-dark";
+  }
+}
+
+exports.CodeEditorController = CodeEditorController;

package/lib/editor/code/code-editor.provider.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var codeEditor_controller = require('./code-editor.controller.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class CodeEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizCode");
+    __publicField(this, "gridEditor", "IBizCode");
+  }
+  async createController(editorModel, parentController) {
+    const c = new codeEditor_controller.CodeEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+exports.CodeEditorProvider = CodeEditorProvider;

package/lib/editor/code/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var monacoEditor = require('./monaco-editor/monaco-editor.cjs');
+var codeEditor_controller = require('./code-editor.controller.cjs');
+var codeEditor_provider = require('./code-editor.provider.cjs');
+
+"use strict";
+
+exports.IBizCode = monacoEditor.IBizCode;
+exports.CodeEditorController = codeEditor_controller.CodeEditorController;
+exports.CodeEditorProvider = codeEditor_provider.CodeEditorProvider;

package/lib/editor/code/monaco-editor/monaco-editor.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+var vue = require('vue');
+require('./monaco-editor.css');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('../../../node_modules/.pnpm/@monaco-editor_loader@1.4.0_monaco-editor@0.44.0/node_modules/@monaco-editor/loader/lib/es/index.cjs');
+var index = require('../../../node_modules/.pnpm/@monaco-editor_loader@1.4.0_monaco-editor@0.44.0/node_modules/@monaco-editor/loader/lib/es/loader/index.cjs');
+
+"use strict";
+const IBizCode = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizCode",
+  props: vue3Util.getCodeProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("code");
+    const currentVal = vue.ref("");
+    let editor;
+    let monacoEditor;
+    const {
+      UIStore
+    } = vue3Util.useUIStore();
+    const getMonacoTheme = (name) => {
+      return name === "dark" ? `vs-${UIStore.theme}` : "vs";
+    };
+    vue.watch(() => UIStore.theme, (newVal) => {
+      monacoEditor.setTheme(getMonacoTheme(newVal));
+    });
+    vue.watch(() => props.value, (newVal) => {
+      if (newVal !== currentVal.value) {
+        currentVal.value = newVal || "";
+        editor == null ? void 0 : editor.setValue(currentVal.value);
+      }
+    }, {
+      immediate: true
+    });
+    const codeEditBox = vue.ref();
+    const editorInit = () => {
+      vue.nextTick(() => {
+        index.default.config({
+          paths: {
+            vs: `${ibiz.env.pluginBaseUrl}/monaco-editor@0.44.0/min/vs`
+          }
+        });
+        index.default.init().then((loaderMonaco) => {
+          if (!editor) {
+            monacoEditor = loaderMonaco.editor;
+            editor = monacoEditor.create(codeEditBox.value, {
+              language: props.language || props.controller.language,
+              // 语言支持自行查阅demo
+              theme: getMonacoTheme(UIStore.theme),
+              foldingStrategy: "indentation",
+              renderLineHighlight: "all",
+              // 行亮
+              selectOnLineNumbers: true,
+              // 显示行号
+              minimap: {
+                enabled: true
+              },
+              readOnly: false,
+              // 只读
+              fontSize: 16,
+              // 字体大小
+              scrollBeyondLastLine: false,
+              // 取消代码后面一大段空白
+              overviewRulerBorder: false
+              // 不要滚动条的边框
+            });
+          }
+          setTimeout(() => {
+            editor.layout();
+            editor.setValue(currentVal.value);
+          });
+          editor.onDidChangeModelContent(() => {
+            currentVal.value = editor.getValue();
+            emit("change", currentVal.value);
+          });
+          window.addEventListener("resize", () => {
+            editor.layout();
+          });
+        });
+      });
+    };
+    vue.onMounted(() => {
+      editorInit();
+    });
+    vue.onUnmounted(() => {
+      editor == null ? void 0 : editor.dispose();
+    });
+    return {
+      ns,
+      currentVal,
+      codeEditBox
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "ref": "codeEditBox",
+      "class": this.ns.b()
+    }, null);
+  }
+});
+
+exports.IBizCode = IBizCode;

package/lib/editor/code/monaco-editor/monaco-editor.css

@@ -0,0 +1 @@
+.ibiz-code{display:inline-block;width:100%;height:100%;min-height:200px}

package/lib/editor/color-picker/color-picker-editor.controller.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+class ColorPickerEditorController extends runtime.EditorController {
+}
+
+exports.ColorPickerEditorController = ColorPickerEditorController;

package/lib/editor/color-picker/color-picker-editor.provider.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var colorPickerEditor_controller = require('./color-picker-editor.controller.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ColorPickerEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizColorPicker");
+    __publicField(this, "gridEditor", "IBizColorPicker");
+  }
+  async createController(editorModel, parentController) {
+    const c = new colorPickerEditor_controller.ColorPickerEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+exports.ColorPickerEditorProvider = ColorPickerEditorProvider;

package/lib/editor/color-picker/ibiz-color-picker/ibiz-color-picker.cjs

@@ -0,0 +1,95 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-color-picker.css');
+
+"use strict";
+const IBizColorPicker = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizColorPicker",
+  props: vue3Util.getColorPickerProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("color-picker");
+    const c = props.controller;
+    const currentVal = vue.ref("");
+    const colorPicker = vue.ref(null);
+    vue.watch(() => props.value, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        if (!newVal) {
+          currentVal.value = "";
+        } else {
+          currentVal.value = newVal;
+        }
+      }
+    }, {
+      immediate: true
+    });
+    const handleChange = (e) => {
+      emit("change", e);
+    };
+    const showPicker = (_e) => {
+      setTimeout(() => {
+        if (colorPicker.value) {
+          colorPicker.value.show();
+        }
+      }, 200);
+    };
+    const contentStyle = vue.computed(() => {
+      if (c.style) {
+        return c.style;
+      }
+      return null;
+    });
+    const onFocus = (e) => {
+      emit("focus", e);
+    };
+    const onBlur = (e) => {
+      emit("blur", e);
+    };
+    return {
+      ns,
+      c,
+      currentVal,
+      contentStyle,
+      colorPicker,
+      handleChange,
+      showPicker,
+      onFocus,
+      onBlur
+    };
+  },
+  render() {
+    let content = null;
+    if (this.readonly) {
+      content = `${this.currentVal}`;
+    } else {
+      content = vue.createVNode("span", {
+        "class": this.ns.b("content"),
+        "style": this.contentStyle,
+        "onClick": this.showPicker
+      }, [vue.createVNode(vue.resolveComponent("el-color-picker"), {
+        "ref": "colorPicker",
+        "modelValue": this.currentVal,
+        "onUpdate:modelValue": ($event) => this.currentVal = $event,
+        "disabled": this.disabled,
+        "onChange": this.handleChange,
+        "onBlur": this.onBlur,
+        "onFocus": this.onFocus,
+        "size": "small"
+      }, null), vue.createVNode("span", {
+        "class": this.ns.b("text")
+      }, [this.currentVal])]);
+    }
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""],
+      "style": {
+        color: this.currentVal || ""
+      }
+    }, [content]);
+  }
+});
+
+exports.IBizColorPicker = IBizColorPicker;

package/lib/editor/color-picker/ibiz-color-picker/ibiz-color-picker.css

@@ -0,0 +1 @@
+.ibiz-color-picker{color:var(--ibiz-form-item-text-color)}.ibiz-color-picker .el-color-picker__trigger{border:none}.ibiz-color-picker .ibiz-color-picker-content{display:inline-block;padding:3px var(--ibiz-spacing-tight);font-size:var(--ibiz-form-item-font-size);border:1px solid var(--ibiz-editor-default-border-color);border-radius:var(--ibiz-border-radius-small)}.ibiz-color-picker .ibiz-color-picker-content:hover{border:1px solid var(--ibiz-editor-hover-border-color)}.ibiz-color-picker .ibiz-color-picker-text{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-color-picker--readonly{color:var(--ibiz-form-item-readonly-color);word-break:break-word;white-space:pre-wrap}

package/lib/editor/color-picker/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var ibizColorPicker = require('./ibiz-color-picker/ibiz-color-picker.cjs');
+var colorPickerEditor_controller = require('./color-picker-editor.controller.cjs');
+var colorPickerEditor_provider = require('./color-picker-editor.provider.cjs');
+
+"use strict";
+
+exports.IBizColorPicker = ibizColorPicker.IBizColorPicker;
+exports.ColorPickerEditorController = colorPickerEditor_controller.ColorPickerEditorController;
+exports.ColorPickerEditorProvider = colorPickerEditor_provider.ColorPickerEditorProvider;