@ibiz-template/vue3-components 0.1.12-dev.0 → 0.1.13

package/lib/devtool/devtool-action.cjs

@@ -0,0 +1,220 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./devtool-action.css');
+var vueRouter = require('vue-router');
+
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const DevtoolAction = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizDevtoolAction",
+  setup() {
+    var _a;
+    const ns = vue3Util.useNamespace("devtool-action");
+    const evt = vue.inject("devtool-evt");
+    const items = vue.ref([]);
+    const activeItem = vue.ref(null);
+    const isShow = vue.ref(false);
+    const height = vue.ref("");
+    const activeCollapse = vue.ref(["context", "params"]);
+    const router = vueRouter.useRouter();
+    const instance = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
+    router.afterEach(() => {
+      if (instance) {
+        activeItem.value = null;
+        instance.$forceUpdate();
+      }
+    });
+    const getObjEntriesArray = (obj) => {
+      if (!obj) {
+        return [];
+      }
+      return Object.entries(obj).map(([key, value]) => {
+        return {
+          key,
+          value: Object.prototype.toString.call(value) === "[object Object]" ? JSON.stringify(value) : `${value}`
+        };
+      });
+    };
+    const contextArray = vue.computed(() => {
+      if (!activeItem.value) {
+        return [];
+      }
+      return getObjEntriesArray(activeItem.value.controller.context);
+    });
+    const paramsArray = vue.computed(() => {
+      if (!activeItem.value) {
+        return [];
+      }
+      return getObjEntriesArray(activeItem.value.controller.params);
+    });
+    const onDataChange = (data) => {
+      items.value = [...data.values()];
+    };
+    const keydownHandle = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.code === "F12") {
+        isShow.value = !isShow.value;
+      }
+    };
+    const onItemClick = (item) => {
+      var _a2;
+      if (item.key === ((_a2 = activeItem.value) == null ? void 0 : _a2.key)) {
+        activeItem.value = null;
+      } else {
+        activeItem.value = item;
+      }
+    };
+    const copy = async (value) => {
+      if (!value) {
+        return;
+      }
+      try {
+        await ibiz.util.text.copy(value);
+        ibiz.message.success("\u62F7\u8D1D\u6210\u529F!");
+      } catch (error) {
+        ibiz.message.error("\u62F7\u8D1D\u5931\u8D25!");
+      }
+    };
+    const minimize = () => {
+      height.value = "44px";
+    };
+    const expand = () => {
+      height.value = "100%";
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    const onMouseEnter = (item) => {
+      const el = vue.unref(item.dom);
+      if (el) {
+        el.style.outline = "3px solid #409EFF";
+      }
+    };
+    const onMouseLeave = (item) => {
+      const el = vue.unref(item.dom);
+      if (el) {
+        el.style.outline = "";
+      }
+    };
+    vue.onMounted(() => {
+      evt.on("change", onDataChange);
+      document.addEventListener("keydown", keydownHandle);
+    });
+    vue.onUnmounted(() => {
+      evt.off("change", onDataChange);
+      document.removeEventListener("keydown", keydownHandle);
+    });
+    return {
+      ns,
+      items,
+      activeItem,
+      height,
+      isShow,
+      activeCollapse,
+      contextArray,
+      paramsArray,
+      onItemClick,
+      copy,
+      minimize,
+      expand,
+      close,
+      onMouseEnter,
+      onMouseLeave
+    };
+  },
+  render() {
+    let _slot, _slot2;
+    if (!this.isShow) {
+      return;
+    }
+    return vue.createVNode("div", {
+      "class": this.ns.b(),
+      "style": {
+        height: this.height
+      }
+    }, [this.activeItem ? vue.createVNode("div", {
+      "class": this.ns.b("collapse")
+    }, [vue.createVNode(vue.resolveComponent("el-collapse"), {
+      "modelValue": this.activeCollapse,
+      "onUpdate:modelValue": ($event) => this.activeCollapse = $event
+    }, {
+      default: () => [vue.createVNode(vue.resolveComponent("el-collapse-item"), {
+        "title": "\u5E94\u7528\u4E0A\u4E0B\u6587",
+        "name": "context"
+      }, _isSlot(_slot = this.contextArray.map((item) => vue.createVNode("div", {
+        "class": this.ns.b("collapse-item")
+      }, [vue.createVNode("div", {
+        "class": this.ns.be("collapse-item", "key"),
+        "title": item.key,
+        "onClick": () => this.copy(item.key)
+      }, [item.key]), vue.createVNode("div", {
+        "class": this.ns.be("collapse-item", "value"),
+        "title": item.value,
+        "onClick": () => this.copy(item.value)
+      }, [`\uFF1A${item.value}`])]))) ? _slot : {
+        default: () => [_slot]
+      }), vue.createVNode(vue.resolveComponent("el-collapse-item"), {
+        "title": "\u89C6\u56FE\u53C2\u6570",
+        "name": "params"
+      }, _isSlot(_slot2 = this.paramsArray.map((item) => vue.createVNode("div", {
+        "class": this.ns.b("collapse-item")
+      }, [vue.createVNode("div", {
+        "class": this.ns.be("collapse-item", "key"),
+        "title": item.key,
+        "onClick": () => this.copy(item.key)
+      }, [item.key]), vue.createVNode("div", {
+        "class": this.ns.be("collapse-item", "value"),
+        "title": item.value,
+        "onClick": () => this.copy(item.value)
+      }, [`\uFF1A${item.value}`])]))) ? _slot2 : {
+        default: () => [_slot2]
+      })]
+    })]) : null, vue.createVNode("div", {
+      "class": this.ns.b("container")
+    }, [vue.createVNode("div", {
+      "class": this.ns.b("header")
+    }, [vue.createVNode("ion-icon", {
+      "name": "remove-outline",
+      "onClick": this.minimize
+    }, null), vue.createVNode("ion-icon", {
+      "name": "expand-outline",
+      "onClick": this.expand
+    }, null), vue.createVNode("ion-icon", {
+      "name": "close-outline",
+      "onClick": this.close
+    }, null)]), vue.createVNode("div", {
+      "class": this.ns.b("content")
+    }, [this.items.map((item) => {
+      var _a;
+      if (!item.controller.isActive) {
+        return null;
+      }
+      const {
+        caption,
+        name
+      } = item.controller.model;
+      const text = `${caption || ""}\uFF08${name || ""}\uFF09`;
+      const type = ((_a = this.activeItem) == null ? void 0 : _a.key) === item.key ? "success" : "";
+      return vue.createVNode("div", {
+        "key": item.key,
+        "class": this.ns.b("item")
+      }, [vue.createVNode(vue.resolveComponent("el-tag"), {
+        "type": type,
+        "class": this.ns.be("item", "text"),
+        "title": text,
+        "onClick": () => this.onItemClick(item),
+        "onMouseenter": () => this.onMouseEnter(item),
+        "onMouseleave": () => this.onMouseLeave(item)
+      }, _isSlot(text) ? text : {
+        default: () => [text]
+      }), vue.createVNode("div", {
+        "class": this.ns.be("item", "button"),
+        "onClick": () => this.copy(name)
+      }, [vue.createTextVNode("\u62F7\u8D1D")])]);
+    })])])]);
+  }
+});
+
+exports.DevtoolAction = DevtoolAction;

package/lib/devtool/devtool-action.css

@@ -0,0 +1 @@
+.ibiz-devtool-action{position:absolute;right:0;bottom:0;z-index:9999;display:flex;height:100%;font-size:13px;color:#fff;background:rgba(96,98,102,.8);transition:all .5s}.ibiz-devtool-action-collapse{flex:0 0 auto;width:320px;padding:0 12px;margin-top:44px;margin-bottom:12px;overflow:auto;border-right:1px solid #999}.ibiz-devtool-action-collapse-item{display:flex;align-items:center;padding-bottom:4px}.ibiz-devtool-action-collapse-item__key{flex:0 0 auto;width:40%;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ibiz-devtool-action-collapse-item__key:hover{color:#dbe6ff}.ibiz-devtool-action-collapse-item__value{flex:0 0 auto;width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ibiz-devtool-action-collapse-item__value:hover{color:#dbe6ff}.ibiz-devtool-action-container{display:flex;flex:0 0 auto;flex-direction:column;width:400px;padding:12px}.ibiz-devtool-action-header{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;height:20px;margin-bottom:12px}.ibiz-devtool-action-header ion-icon{margin-right:12px;font-size:20px;cursor:pointer}.ibiz-devtool-action-header ion-icon:last-child{margin-right:0}.ibiz-devtool-action-content{display:flex;flex:0 0 auto;flex-direction:column;height:calc(100% - 32px);overflow:auto}.ibiz-devtool-action-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.ibiz-devtool-action-item__text{display:flex;flex:1 1 0;justify-content:flex-start;height:auto;padding:4px 6px;margin-right:16px;overflow:hidden;line-height:normal;cursor:pointer}.ibiz-devtool-action-item__text>.el-tag__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-devtool-action-item__button{flex:0 0 auto;cursor:pointer}.ibiz-devtool-action-item__button:hover{color:#409eff}

package/lib/devtool/index.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+var vue = require('vue');
+var qxUtil = require('qx-util');
+var ElementPlus = require('element-plus');
+var zhCn = require('../node_modules/.pnpm/element-plus@2.3.9_vue@3.3.4/node_modules/element-plus/dist/locale/zh-cn.cjs');
+var devtoolAction = require('./devtool-action.cjs');
+
+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 Devtool {
+  constructor() {
+    /**
+     * 视图map
+     *
+     * @author zhanghengfeng
+     * @date 2023-08-28 18:08:16
+     */
+    __publicField(this, "viewMap", /* @__PURE__ */ new Map());
+    /**
+     * 事件中心
+     *
+     * @author zhanghengfeng
+     * @date 2023-08-28 18:08:43
+     */
+    __publicField(this, "evt", new qxUtil.QXEvent());
+  }
+  /**
+   * 初始化devtool工具
+   *
+   * @author zhanghengfeng
+   * @date 2023-08-28 18:08:24
+   * @param {Router} router
+   */
+  init(router) {
+    const devtool2 = document.createElement("div");
+    devtool2.classList.add("devtool");
+    document.body.append(devtool2);
+    const app = vue.createApp(devtoolAction.DevtoolAction);
+    app.use(router);
+    app.use(ElementPlus, {
+      locale: zhCn.default
+    });
+    app.provide("devtool-evt", this.evt);
+    app.mount(devtool2);
+  }
+  /**
+   * 注册视图
+   *
+   * @author zhanghengfeng
+   * @date 2023-08-28 18:08:25
+   * @param {string} key
+   * @param {ViewController} controller
+   * @param {(Ref<HTMLElement | null>)} dom
+   */
+  registerView(key, controller, dom) {
+    this.viewMap.set(key, {
+      key,
+      controller,
+      dom
+    });
+    this.evt.emit("change", this.viewMap);
+  }
+  /**
+   * 注销视图
+   *
+   * @author zhanghengfeng
+   * @date 2023-08-28 18:08:39
+   * @param {string} key
+   */
+  unRegisterView(key) {
+    this.viewMap.delete(key);
+    this.evt.emit("change", this.viewMap);
+  }
+}
+const devtool = new Devtool();
+
+exports.Devtool = Devtool;
+exports.devtool = devtool;

package/lib/devtool/interface/devtool-event.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/devtool/interface/devtool-view.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

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

@@ -24,7 +24,7 @@ const IBizCheckbox = /* @__PURE__ */ vue.defineComponent({
     }
     const currentVal = vue.computed({
       get() {
-        if (props.value === selectValue) {
+        if (props.value == selectValue) {
           return true;
         }
         return false;

package/lib/editor/html/wang-editor/wang-editor.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var editorForVue = require('@wangeditor/editor-for-vue');
 var qxUtil = require('qx-util');
+var ramda = require('ramda');
 var vue3Util = require('@ibiz-template/vue3-util');
 var core = require('@ibiz-template/core');
 require('./wang-editor.css');
@@ -119,10 +120,14 @@ const IBizHtml = /* @__PURE__ */ vue.defineComponent({
     });
     const handleCreated = (editor) => {
       editorRef.value = editor;
+      editor.setHtml(valueHtml.value);
     };
     const handleChange = (editor) => {
       const html = editor.getHtml();
       const emitValue = html === "<p><br></p>" ? "" : html;
+      if (emitValue === props.value || emitValue === "" && ramda.isNil(props.value)) {
+        return;
+      }
       emit("change", emitValue);
     };
     const handleDestroyed = (_editor) => {

package/lib/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.css

@@ -1 +1 @@
-.ibiz-markdown .cherry-preview--full{border-left:none}.ibiz-markdown .theme__dark,.ibiz-markdown .theme__light{color:var(--ibiz-form-item-text-color)}.ibiz-markdown .cherry-markdown h1 a::before,.ibiz-markdown .cherry-markdown h2 a::before,.ibiz-markdown .cherry-markdown h3 a::before,.ibiz-markdown .cherry-markdown h4 a::before,.ibiz-markdown .cherry-markdown h5 a::before,.ibiz-markdown .cherry-markdown h6 a::before{display:none}
+.ibiz-markdown{min-height:600px}.ibiz-markdown .cherry-preview--full{border-left:none}.ibiz-markdown .theme__dark,.ibiz-markdown .theme__light{color:var(--ibiz-form-item-text-color)}.ibiz-markdown .cherry-markdown h1 a::before,.ibiz-markdown .cherry-markdown h2 a::before,.ibiz-markdown .cherry-markdown h3 a::before,.ibiz-markdown .cherry-markdown h4 a::before,.ibiz-markdown .cherry-markdown h5 a::before,.ibiz-markdown .cherry-markdown h6 a::before{display:none}

package/lib/editor/text-box/input/input.cjs

@@ -42,7 +42,7 @@ const IBizInput = /* @__PURE__ */ vue.defineComponent({
         if (!newVal) {
           currentVal.value = "";
         } else {
-          currentVal.value = newVal;
+          currentVal.value = newVal.toString();
         }
       }
     }, {