@ibiz-template/mob-vue3-components 0.0.1-alpha.19

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

@@ -0,0 +1,96 @@
+'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("");
+    vue.watch(() => props.value, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        if (!newVal) {
+          currentVal.value = "";
+        } else {
+          currentVal.value = newVal;
+        }
+      }
+    }, {
+      immediate: true
+    });
+    const handleChange = (e) => {
+      if (!e) {
+        return;
+      }
+      const {
+        target
+      } = e;
+      if (!target) {
+        return;
+      }
+      const {
+        value
+      } = target;
+      emit("change", value);
+    };
+    const inputRef = vue.ref();
+    const onFocus = () => {
+      emit("focus");
+    };
+    const onBlur = () => {
+      emit("blur");
+    };
+    return {
+      ns,
+      c,
+      currentVal,
+      handleChange,
+      inputRef,
+      onFocus,
+      onBlur
+    };
+  },
+  render() {
+    let content = null;
+    if (this.readonly) {
+      content = `${this.currentVal}`;
+    } else {
+      content = [vue.createVNode(vue.resolveComponent("van-field"), {
+        "class": [this.ns.e("item")],
+        "modelValue": this.currentVal,
+        "onUpdate:modelValue": ($event) => this.currentVal = $event,
+        "disabled": this.disabled,
+        "placeholder": this.c.placeHolder,
+        "onFocus": this.onFocus,
+        "onBlur": this.onBlur,
+        "readonly": true
+      }, null), vue.createVNode(vue.resolveComponent("van-field"), {
+        "class": [this.ns.e("item"), this.ns.e("picker")],
+        "modelValue": this.currentVal,
+        "onUpdate:modelValue": ($event) => this.currentVal = $event,
+        "disabled": this.disabled,
+        "placeholder": this.c.placeHolder,
+        "onInput": this.handleChange,
+        "onFocus": this.onFocus,
+        "onBlur": this.onBlur,
+        "type": "color"
+      }, null)];
+    }
+    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{height:100%;display:flex;align-items:center;justify-content:space-between}.ibiz-color-picker__picker.van-field{width:var(--ibiz-spacing-loose);height:var(--ibiz-spacing-loose);margin-right:var(--ibiz-spacing-tight)}.ibiz-color-picker__item{display:inline-block;width:auto;color:inherit}.ibiz-color-picker__item .van-field__value{height:100%;color:inherit}.ibiz-color-picker__item .van-field__value .van-field__control{color:inherit}

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;

package/lib/editor/common/right-icon/right-icon.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./right-icon.css');
+
+"use strict";
+const IBizCommonRightIcon = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizCommonRightIcon",
+  setup() {
+    const ns = vue3Util.useNamespace("editor-right-icon");
+    return {
+      ns
+    };
+  },
+  render() {
+    return vue.createVNode("ion-icon", {
+      "class": this.ns.b(),
+      "name": "chevron-forward-outline"
+    }, null);
+  }
+});
+
+exports.IBizCommonRightIcon = IBizCommonRightIcon;

package/lib/editor/common/right-icon/right-icon.css

@@ -0,0 +1 @@
+.ibiz-editor-right-icon{font-size:var(--ibiz-font-size-header-4)}

package/lib/editor/data-picker/ibiz-mpicker/ibiz-mpicker.cjs

@@ -0,0 +1,206 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-mpicker.css');
+
+"use strict";
+const IBizMPicker = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMPicker",
+  props: vue3Util.getDataPickerProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("mpicker");
+    const c = props.controller;
+    const curValue = vue.ref([]);
+    const items = vue.ref([]);
+    const selectItems = vue.ref([]);
+    const open = vue.ref(false);
+    vue.watch(() => props.value, (newVal) => {
+      curValue.value = [];
+      selectItems.value = [];
+      if (newVal) {
+        selectItems.value = JSON.parse(newVal);
+        selectItems.value.forEach((item) => {
+          curValue.value.push(item.srfkey);
+          const index = items.value.findIndex((i) => Object.is(i.srfkey, item.srfkey));
+          if (index < 0) {
+            items.value.push({
+              srfkey: item.srfkey,
+              srfmajortext: item.srfmajortext
+            });
+          }
+        });
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const handleOpenViewClose = (result) => {
+      const valArr = [];
+      if (result && Array.isArray(result)) {
+        result.forEach((select) => {
+          const formattedItem = {
+            srfkey: select[c.keyName] || select.srfkey,
+            srfmajortext: select[c.textName] || select.srfmajortext
+          };
+          valArr.push(formattedItem);
+          const index = items.value.findIndex((item) => Object.is(item[c.keyName], select[c.keyName]));
+          if (index < 0) {
+            items.value.push(formattedItem);
+          }
+        });
+      }
+      const value = valArr.length > 0 ? JSON.stringify(valArr) : "";
+      emit("change", value);
+    };
+    const openPickUpView = async () => {
+      let selectedData;
+      if (selectItems.value.length) {
+        selectedData = JSON.stringify(selectItems.value);
+      }
+      const res = await c.openPickUpView(props.data, selectedData);
+      if (res) {
+        handleOpenViewClose(res);
+      }
+    };
+    const onSelect = (selects) => {
+      const valArr = [];
+      if (selects.length > 0) {
+        selects.forEach((select) => {
+          const findItem = items.value.find((item) => Object.is(item.srfkey, select));
+          if (findItem) {
+            valArr.push({
+              srfkey: findItem.srfkey,
+              srfmajortext: findItem.srfmajortext
+            });
+          }
+        });
+        const value = valArr.length > 0 ? JSON.stringify(valArr) : "";
+        emit("change", value);
+      } else {
+        emit("change", "");
+      }
+    };
+    const onSearch = async (query) => {
+      if (c.model.appDataEntityId) {
+        const trimQuery = query.trim();
+        const res = await c.getServiceData(trimQuery, props.data);
+        if (res) {
+          items.value = res.data.map((item) => ({
+            srfkey: item[c.keyName],
+            srfmajortext: item[c.textName]
+          }));
+        }
+      }
+    };
+    const onRemove = (tag) => {
+      const index = selectItems.value.findIndex((item) => Object.is(item[c.keyName], tag));
+      if (index >= 0) {
+        selectItems.value.splice(index, 1);
+        const val = [];
+        let value = null;
+        selectItems.value.forEach((select) => {
+          if (c.model.valueType === "OBJECTS") {
+            val.push(c.handleObjectParams(select));
+          } else if (c.objectIdField) {
+            val.push(select[c.keyName]);
+          } else {
+            val.push({
+              [c.keyName]: select[c.keyName],
+              [c.textName]: select[c.textName]
+            });
+          }
+        });
+        if (val.length > 0) {
+          if (c.model.valueType === "OBJECTS") {
+            value = val;
+          } else {
+            value = c.objectIdField ? val.join(c.model.valueSeparator) : JSON.stringify(val);
+          }
+        }
+        emit("change", value);
+      }
+    };
+    const onOpenChange = (flag) => {
+      open.value = flag;
+      if (open.value) {
+        items.value = [];
+        onSearch("");
+      }
+    };
+    const valueText = vue.computed(() => {
+      return selectItems.value.map((item) => {
+        return item.srfmajortext;
+      }).join(",");
+    });
+    const onFocus = () => {
+      emit("focus");
+    };
+    const onBlur = () => {
+      emit("blur");
+    };
+    return {
+      ns,
+      c,
+      curValue,
+      items,
+      valueText,
+      selectItems,
+      onSearch,
+      onRemove,
+      onOpenChange,
+      onSelect,
+      openPickUpView,
+      onFocus,
+      onBlur
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""],
+      "ref": "editorRef"
+    }, [this.readonly && this.valueText, !this.readonly && vue.createVNode(vue.resolveComponent("van-field"), {
+      "ref": "editorRef",
+      "modelValue": this.valueText,
+      "onUpdate:modelValue": ($event) => this.valueText = $event,
+      "clearable": true,
+      "placeholder": this.c.placeHolder,
+      "disabled": this.disabled
+    }, {
+      input: () => {
+        return this.selectItems.map((item) => {
+          return vue.createVNode(vue.resolveComponent("van-tag"), {
+            "closeable": true,
+            "type": "primary",
+            "onClose": () => {
+              this.onRemove(item[this.c.keyName]);
+            }
+          }, {
+            default: () => [item.srfmajortext]
+          });
+        });
+      },
+      button: () => {
+        if (this.$slots.append) {
+          return this.$slots.append({});
+        }
+        if (this.disabled || this.readonly) {
+          return null;
+        }
+        return [this.c.model.pickupAppViewId ? vue.createVNode(vue.resolveComponent("van-button"), {
+          "size": "small",
+          "onClick": this.openPickUpView
+        }, {
+          default: () => [vue.createVNode("ion-icon", {
+            "name": "search"
+          }, null)]
+        }) : null];
+      }
+    })]);
+  }
+});
+
+exports.IBizMPicker = IBizMPicker;

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

@@ -0,0 +1 @@
+@charset "UTF-8";.ibiz-mpicker{--van-tag-radius:50px}.ibiz-mpicker .van-field{font-size:var(--ibiz-form-item-font-size)}.ibiz-mpicker .van-field__button button{color:var(--van-field-right-icon-color);border:none}.ibiz-mpicker .van-field__control{gap:8px;height:100%}.ibiz-mpicker .van-field__control .van-tag{height:100%;padding:5px;--van-tag-font-size:var(--ibiz-form-item-font-size)}

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

@@ -0,0 +1,247 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var ramda = require('ramda');
+require('./ibiz-picker.css');
+var lodashEs = require('lodash-es');
+
+"use strict";
+const IBizPicker = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizPicker",
+  props: vue3Util.getDataPickerProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("picker");
+    const c = props.controller;
+    const curValue = vue.ref("");
+    const items = vue.ref([]);
+    const showPicker = vue.ref(false);
+    const isShowAll = vue.ref(true);
+    const pickerAutoCompleteRef = vue.ref();
+    const loading = vue.ref(false);
+    vue.watch(() => props.value, (newVal) => {
+      if (newVal || newVal === null) {
+        curValue.value = newVal;
+        if (newVal === null) {
+          curValue.value = "";
+        }
+        const value = props.data[c.valueItem];
+        const index = items.value.findIndex((item) => Object.is(item[c.keyName], value));
+        if (index !== -1) {
+          return;
+        }
+        items.value = [];
+        if (!ramda.isEmpty(newVal) && !ramda.isEmpty(value)) {
+          items.value.push({
+            [c.textName]: newVal,
+            [c.keyName]: value
+          });
+        }
+      }
+    }, {
+      immediate: true
+    });
+    const handleDataSelect = async (data) => {
+      const dataItems = await c.calcFillDataItems(data);
+      if (dataItems.length) {
+        dataItems.forEach((dataItem) => {
+          emit("change", dataItem.value, dataItem.id);
+        });
+      }
+      if (c.valueItem) {
+        emit("change", data[c.keyName], c.valueItem);
+      }
+      emit("change", data[c.textName]);
+    };
+    const openPickUpView = async (e) => {
+      e.stopPropagation();
+      const res = await c.openPickUpView(props.data);
+      if (res && res[0]) {
+        await handleDataSelect(res[0]);
+      }
+    };
+    const openLinkView = async (e) => {
+      e.stopPropagation();
+      const res = await c.openLinkView(props.data);
+      if (res && res[0]) {
+        await handleDataSelect(res[0]);
+      }
+    };
+    const onACSelect = async (item) => {
+      await handleDataSelect(item);
+      isShowAll.value = true;
+    };
+    const handleData = (data) => {
+      return data.map((item) => {
+        return {
+          text: item[c.textName],
+          value: item[c.keyName],
+          ...item
+        };
+      });
+    };
+    const onSearch = async (query, cb) => {
+      if (c.model.appDataEntityId) {
+        const trimQuery = query || "".trim();
+        loading.value = true;
+        let res;
+        try {
+          res = await c.getServiceData(trimQuery, props.data);
+          if (res) {
+            items.value = handleData(res.data);
+            if (cb && cb instanceof Function) {
+              cb(items.value);
+            }
+          }
+        } finally {
+          loading.value = false;
+        }
+      }
+    };
+    let isDebounce = false;
+    let awaitSearch;
+    let blurCacheValue;
+    const debounceChange = lodashEs.debounce((val) => {
+      if (blurCacheValue !== val) {
+        onSearch(val);
+      }
+      blurCacheValue = void 0;
+      isDebounce = false;
+      if (awaitSearch) {
+        awaitSearch();
+      }
+    }, 300, {
+      leading: true
+    });
+    const handleChange = (evt) => {
+      const val = evt.target.value;
+      isDebounce = true;
+      debounceChange(val);
+    };
+    const onClear = () => {
+      const dataItems = c.dataItems;
+      if (dataItems == null ? void 0 : dataItems.length) {
+        dataItems.forEach((dataItem) => {
+          emit("change", null, dataItem.id);
+        });
+      }
+      if (c.valueItem) {
+        emit("change", null, c.valueItem);
+      }
+      emit("change", null);
+    };
+    const closeCircle = (c.linkView ? 1 : 0) + (c.pickupView ? 1 : 0);
+    const editorRef = vue.ref();
+    if (props.autoFocus) {
+      vue.watch(editorRef, (newVal) => {
+        if (newVal) {
+          newVal.focus();
+        }
+      });
+    }
+    const onFocus = () => {
+      emit("focus");
+    };
+    const onBlur = () => {
+      emit("blur");
+    };
+    const onConfirm = ({
+      selectedOptions
+    }) => {
+      showPicker.value = false;
+      if (Array.isArray(selectedOptions)) {
+        handleDataSelect(selectedOptions[0]);
+      }
+    };
+    const openPicker = async () => {
+      showPicker.value = true;
+      onSearch();
+    };
+    return {
+      ns,
+      c,
+      curValue,
+      items,
+      pickerAutoCompleteRef,
+      loading,
+      openPickUpView,
+      openLinkView,
+      onACSelect,
+      onSearch,
+      editorRef,
+      onClear,
+      onFocus,
+      onBlur,
+      closeCircle,
+      isDebounce,
+      handleChange,
+      onConfirm,
+      showPicker,
+      openPicker
+    };
+  },
+  render() {
+    if (this.readonly) {
+      return vue.createVNode("div", {
+        "class": (this.ns.b(), this.ns.m("readonly"))
+      }, [this.value]);
+    }
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : ""]
+    }, [vue.createVNode(vue.resolveComponent("van-field"), {
+      "ref": "editorRef",
+      "modelValue": this.curValue,
+      "onUpdate:modelValue": ($event) => this.curValue = $event,
+      "clearable": true,
+      "placeholder": this.c.placeHolder,
+      "onClear": this.onClear,
+      "disabled": this.disabled,
+      "onClick": () => {
+        this.openPicker();
+      }
+    }, {
+      button: () => {
+        if (this.$slots.append) {
+          return this.$slots.append({});
+        }
+        if (this.disabled || this.readonly) {
+          return null;
+        }
+        return [this.c.model.pickupAppViewId ? vue.createVNode(vue.resolveComponent("van-button"), {
+          "size": "small",
+          "onClick": this.openPickUpView
+        }, {
+          default: () => [vue.createVNode("ion-icon", {
+            "name": "search"
+          }, null)]
+        }) : null, this.c.model.linkAppViewId ? vue.createVNode(vue.resolveComponent("van-button"), {
+          "size": "small",
+          "onClick": this.openLinkView
+        }, {
+          default: () => [vue.createVNode("ion-icon", {
+            "name": "arrow-redo-sharp"
+          }, null)]
+        }) : null];
+      }
+    }), vue.createVNode(vue.resolveComponent("van-popup"), {
+      "show": this.showPicker,
+      "onUpdate:show": ($event) => this.showPicker = $event,
+      "round": true,
+      "position": "bottom"
+    }, {
+      default: () => [vue.createVNode(vue.resolveComponent("van-picker"), {
+        "columns": this.items,
+        "loading": this.loading,
+        "onCancel": () => {
+          this.showPicker = false;
+        },
+        "onConfirm": this.onConfirm
+      }, null)]
+    })]);
+  }
+});
+
+exports.IBizPicker = IBizPicker;

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

@@ -0,0 +1 @@
+.ibiz-picker{height:100%}.ibiz-picker .van-field{font-size:var(--ibiz-form-item-font-size)}.ibiz-picker .van-field__button button{color:var(--van-field-right-icon-color);border:none}.ibiz-picker ion-icon{cursor:pointer}.ibiz-picker__buns-position{position:relative;display:inline-block}.ibiz-picker__btns{position:absolute;right:0;display:flex}.ibiz-picker__btns span{display:flex;flex-flow:column nowrap;justify-content:center}.ibiz-picker__autocomplete{display:flex}.ibiz-picker__autocomplete .el-autocomplete{width:100%}.ibiz-picker__transfer-item{padding:5px;cursor:pointer}.ibiz-picker__transfer-item:hover{background-color:var(--ibiz-form-item-hover-bg-color)}.ibiz-picker__link{width:32px;height:32px;padding:0 6px}.ibiz-picker--disabled ion-icon{pointer-events:none}.ibiz-picker--readonly{color:var(--ibiz-form-item-readonly-color)}