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

package/es/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.mjs

@@ -0,0 +1,151 @@
+import { isVNode, ref, watch, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { getCheckboxListProps, getEditorEmits, useNamespace, useFocusAndBlur } from '@ibiz-template/vue3-util';
+import { isNil } from 'ramda';
+import './ibiz-checkbox-list.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const IBizCheckboxList = /* @__PURE__ */ defineComponent({
+  name: "IBizCheckboxList",
+  props: getCheckboxListProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("checkbox-list");
+    const c = props.controller;
+    const codeList = c.codeList;
+    const items = ref([]);
+    watch(() => props.data, (newVal) => {
+      c.loadCodeList(newVal).then((_codeList) => {
+        items.value = _codeList;
+      });
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const currentMode = computed(() => {
+      if (codeList && codeList.orMode) {
+        return codeList.orMode.toLowerCase();
+      }
+      return "str";
+    });
+    let valueSeparator = ",";
+    if (codeList && codeList.valueSeparator) {
+      valueSeparator = codeList.valueSeparator;
+    }
+    const selectArray = computed({
+      get() {
+        if (!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 = 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(",");
+    });
+    watch(valueText, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        emit("infoTextChange", newVal);
+      }
+    }, {
+      immediate: true
+    });
+    const {
+      componentRef: editorRef
+    } = useFocusAndBlur(() => emit("focus"), () => emit("blur"));
+    return {
+      ns,
+      items,
+      selectArray,
+      valueText,
+      editorRef,
+      onSelectArrayChange
+    };
+  },
+  render() {
+    let _slot;
+    return createVNode("div", {
+      "ref": "editorRef",
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
+    }, [this.readonly ? this.valueText : createVNode(resolveComponent("el-checkbox-group"), {
+      "model-value": this.selectArray,
+      "onChange": this.onSelectArrayChange
+    }, _isSlot(_slot = this.items.map((item, index) => createVNode(resolveComponent("el-checkbox"), {
+      "key": index,
+      "label": item.value,
+      "disabled": this.disabled || item.disableSelect === true
+    }, {
+      default: () => [createVNode("span", {
+        "class": this.ns.e("text")
+      }, [item.text])]
+    }))) ? _slot : {
+      default: () => [_slot]
+    })]);
+  }
+});
+
+export { IBizCheckboxList };

package/es/editor/check-box-list/index.mjs

@@ -0,0 +1,5 @@
+export { IBizCheckboxList } from './ibiz-checkbox-list/ibiz-checkbox-list.mjs';
+export { CheckBoxListEditorController } from './checkbox-list-editor.controller.mjs';
+export { CheckBoxListEditorProvider } from './checkbox-list-editor.provider.mjs';
+
+"use strict";

package/es/editor/code/code-editor.controller.mjs

@@ -0,0 +1,25 @@
+import { EditorController } from '@ibiz-template/runtime';
+
+"use strict";
+class CodeEditorController extends 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";
+  }
+}
+
+export { CodeEditorController };

package/es/editor/code/code-editor.provider.mjs

@@ -0,0 +1,22 @@
+import { CodeEditorController } from './code-editor.controller.mjs';
+
+"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 CodeEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+export { CodeEditorProvider };

package/es/editor/code/index.mjs

@@ -0,0 +1,5 @@
+export { IBizCode } from './monaco-editor/monaco-editor.mjs';
+export { CodeEditorController } from './code-editor.controller.mjs';
+export { CodeEditorProvider } from './code-editor.provider.mjs';
+
+"use strict";

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

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

package/es/editor/code/monaco-editor/monaco-editor.mjs

@@ -0,0 +1,103 @@
+import { ref, watch, nextTick, onMounted, onUnmounted, createVNode, defineComponent } from 'vue';
+import './monaco-editor.css';
+import { getCodeProps, getEditorEmits, useNamespace, useUIStore } from '@ibiz-template/vue3-util';
+import '../../../node_modules/.pnpm/@monaco-editor_loader@1.4.0_monaco-editor@0.44.0/node_modules/@monaco-editor/loader/lib/es/index.mjs';
+import loader from '../../../node_modules/.pnpm/@monaco-editor_loader@1.4.0_monaco-editor@0.44.0/node_modules/@monaco-editor/loader/lib/es/loader/index.mjs';
+
+"use strict";
+const IBizCode = /* @__PURE__ */ defineComponent({
+  name: "IBizCode",
+  props: getCodeProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("code");
+    const currentVal = ref("");
+    let editor;
+    let monacoEditor;
+    const {
+      UIStore
+    } = useUIStore();
+    const getMonacoTheme = (name) => {
+      return name === "dark" ? `vs-${UIStore.theme}` : "vs";
+    };
+    watch(() => UIStore.theme, (newVal) => {
+      monacoEditor.setTheme(getMonacoTheme(newVal));
+    });
+    watch(() => props.value, (newVal) => {
+      if (newVal !== currentVal.value) {
+        currentVal.value = newVal || "";
+        editor == null ? void 0 : editor.setValue(currentVal.value);
+      }
+    }, {
+      immediate: true
+    });
+    const codeEditBox = ref();
+    const editorInit = () => {
+      nextTick(() => {
+        loader.config({
+          paths: {
+            vs: `${ibiz.env.pluginBaseUrl}/monaco-editor@0.44.0/min/vs`
+          }
+        });
+        loader.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();
+          });
+        });
+      });
+    };
+    onMounted(() => {
+      editorInit();
+    });
+    onUnmounted(() => {
+      editor == null ? void 0 : editor.dispose();
+    });
+    return {
+      ns,
+      currentVal,
+      codeEditBox
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "codeEditBox",
+      "class": this.ns.b()
+    }, null);
+  }
+});
+
+export { IBizCode };

package/es/editor/color-picker/color-picker-editor.controller.mjs

@@ -0,0 +1,7 @@
+import { EditorController } from '@ibiz-template/runtime';
+
+"use strict";
+class ColorPickerEditorController extends EditorController {
+}
+
+export { ColorPickerEditorController };

package/es/editor/color-picker/color-picker-editor.provider.mjs

@@ -0,0 +1,22 @@
+import { ColorPickerEditorController } from './color-picker-editor.controller.mjs';
+
+"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 ColorPickerEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+export { ColorPickerEditorProvider };

package/es/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/es/editor/color-picker/ibiz-color-picker/ibiz-color-picker.mjs

@@ -0,0 +1,93 @@
+import { ref, watch, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { getColorPickerProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
+import './ibiz-color-picker.css';
+
+"use strict";
+const IBizColorPicker = /* @__PURE__ */ defineComponent({
+  name: "IBizColorPicker",
+  props: getColorPickerProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("color-picker");
+    const c = props.controller;
+    const currentVal = ref("");
+    const colorPicker = ref(null);
+    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 = 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 = createVNode("span", {
+        "class": this.ns.b("content"),
+        "style": this.contentStyle,
+        "onClick": this.showPicker
+      }, [createVNode(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), createVNode("span", {
+        "class": this.ns.b("text")
+      }, [this.currentVal])]);
+    }
+    return createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""],
+      "style": {
+        color: this.currentVal || ""
+      }
+    }, [content]);
+  }
+});
+
+export { IBizColorPicker };

package/es/editor/color-picker/index.mjs

@@ -0,0 +1,5 @@
+export { IBizColorPicker } from './ibiz-color-picker/ibiz-color-picker.mjs';
+export { ColorPickerEditorController } from './color-picker-editor.controller.mjs';
+export { ColorPickerEditorProvider } from './color-picker-editor.provider.mjs';
+
+"use strict";

package/es/editor/data-picker/ibiz-mpicker/ibiz-mpicker.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ibiz-mpicker{display:flex}.ibiz-mpicker input::-moz-placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-mpicker input::placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-mpicker .el-input.is-disabled .el-input__inner{color:var(--ibiz-form-item-disabled-color);background-color:var(--ibiz-form-item-disabled-bg-color);border-color:var(--ibiz-form-item-disabled-border-color)}.ibiz-mpicker .el-select{width:100%}.ibiz-mpicker ion-icon{font-size:var(--ibiz-form-item-font-size);cursor:pointer}.ibiz-mpicker__buns-position{position:relative;right:11px;display:inline-block}.ibiz-mpicker__btns{position:absolute;right:0;height:100%;color:var(--ibiz-form-item-placeholder-color);display:flex;align-items:center;justify-content:center}.ibiz-mpicker--disabled ion-icon{pointer-events:none}.ibiz-mpicker--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}