@ibiz-template/vue3-components 0.7.26-alpha.2 → 0.7.26

package/es/locale/en/index.d.ts

@@ -1129,6 +1129,17 @@ declare const _default: {
         actionToolbar: {
             more: string;
         };
+        emojiSelect: {
+            frequently: string;
+            peoples: string;
+            nature: string;
+            foods: string;
+            activity: string;
+            objects: string;
+            places: string;
+            symbols: string;
+            flags: string;
+        };
     };
     editor: {
         common: {
@@ -1176,6 +1187,9 @@ declare const _default: {
             uploadJsonFormatErr: string;
             exportJsonFormatErr: string;
         };
+        emojiPicker: {
+            addEmoji: string;
+        };
     };
     panelComponent: {
         authUserinfo: {

package/es/locale/en/index.mjs

@@ -463,6 +463,17 @@ var index = {
     },
     actionToolbar: {
       more: "More"
+    },
+    emojiSelect: {
+      frequently: "Frequently",
+      peoples: "Peoples",
+      nature: "Nature",
+      foods: "Foods",
+      activity: "Activity",
+      objects: "Objects",
+      places: "Places",
+      symbols: "Symbols",
+      flags: "Flags"
     }
   },
   // 编辑器
@@ -511,6 +522,9 @@ var index = {
       fileSizeErr: "The file size cannot exceed",
       uploadJsonFormatErr: "The configuration of uploadparams did not follow the standard JSON format",
       exportJsonFormatErr: "The configuration of exportparams did not follow the standard JSON format"
+    },
+    emojiPicker: {
+      addEmoji: "Add emoji"
     }
   },
   panelComponent: {

package/es/locale/zh-CN/index.d.ts

@@ -1123,6 +1123,17 @@ declare const _default: {
         actionToolbar: {
             more: string;
         };
+        emojiSelect: {
+            frequently: string;
+            peoples: string;
+            nature: string;
+            foods: string;
+            activity: string;
+            objects: string;
+            places: string;
+            symbols: string;
+            flags: string;
+        };
     };
     editor: {
         common: {
@@ -1170,6 +1181,9 @@ declare const _default: {
             uploadJsonFormatErr: string;
             exportJsonFormatErr: string;
         };
+        emojiPicker: {
+            addEmoji: string;
+        };
     };
     panelComponent: {
         authUserinfo: {

package/es/locale/zh-CN/index.mjs

@@ -459,6 +459,17 @@ var index = {
     },
     actionToolbar: {
       more: "\u66F4\u591A"
+    },
+    emojiSelect: {
+      frequently: "\u5E38\u7528",
+      peoples: "\u60C5\u7EEA",
+      nature: "\u81EA\u7136",
+      foods: "\u98DF\u7269\u4E0E\u996E\u6599",
+      activity: "\u6D3B\u52A8",
+      objects: "\u5BF9\u8C61",
+      places: "\u65C5\u884C\u4E0E\u5730\u65B9",
+      symbols: "\u7B26\u53F7",
+      flags: "\u65D7\u5E1C"
     }
   },
   // 编辑器
@@ -507,6 +518,9 @@ var index = {
       fileSizeErr: "\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7",
       uploadJsonFormatErr: "\u914D\u7F6Euploadparams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F",
       exportJsonFormatErr: "\u914D\u7F6Eexportparams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F"
+    },
+    emojiPicker: {
+      addEmoji: "\u6DFB\u52A0\u8868\u60C5"
     }
   },
   panelComponent: {

package/es/panel-component/nav-tabs/nav-tabs.controller.d.ts

@@ -80,4 +80,11 @@ export declare class NavTabsController extends PanelItemController<IPanelRawItem
      * @date 2023-05-09 02:50:01
      */
     removeAll(): void;
+    /**
+     * 刷新项（解决主信息更新之后界面ui未刷新）
+     *
+     * @author tony001
+     * @date 2024-06-28 08:06:11
+     */
+    refreshItemUI(): void;
 }

package/es/panel-component/nav-tabs/nav-tabs.controller.mjs

@@ -58,6 +58,7 @@ class NavTabsController extends PanelItemController {
     const findItem = this.findTabItem(key);
     if (findItem) {
       Object.assign(findItem, reject(isNil, info));
+      this.refreshItemUI();
     } else {
       this.state.tabItems.push({ key, ...info });
       this.state.activeTab = this.state.currentKey;
@@ -116,6 +117,24 @@ class NavTabsController extends PanelItemController {
       (_a = this.navPos) == null ? void 0 : _a.closeViewByKeys(removeKeys);
     }
   }
+  /**
+   * 刷新项（解决主信息更新之后界面ui未刷新）
+   *
+   * @author tony001
+   * @date 2024-06-28 08:06:11
+   */
+  refreshItemUI() {
+    const tempItem = {
+      key: "exampleItem",
+      caption: ""
+    };
+    this.state.tabItems.push(tempItem);
+    this.state.activeTab = tempItem.key;
+    setTimeout(() => {
+      this.state.tabItems.pop();
+      this.state.activeTab = this.state.tabItems[this.state.tabItems.length - 1].key;
+    }, 100);
+  }
 }
 
 export { NavTabsController };

package/lib/common/emoji-select/components/categories/categories.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./categories.css');
+
+"use strict";
+const Categories = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizCategories",
+  props: {
+    categories: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    current: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["select"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("emoji-categories");
+    const onSelect = (category) => {
+      emit("select", category);
+    };
+    return {
+      ns,
+      onSelect
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [this.categories.map((category) => {
+      return vue.createVNode("div", {
+        "class": [this.ns.e("category"), this.ns.is("active", category.name === this.current)],
+        "onClick": () => this.onSelect(category)
+      }, [vue.createVNode("span", {
+        "class": this.ns.em("category", "svg"),
+        "title": category.label,
+        "innerHTML": category.icon
+      }, null)]);
+    })]);
+  }
+});
+
+exports.Categories = Categories;

package/lib/common/emoji-select/components/categories/categories.css

@@ -0,0 +1 @@
+.ibiz-emoji-categories{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-base-loose);overflow-x:auto;background-color:var(--ibiz-color-bg-0)}.ibiz-emoji-categories__category{display:flex;align-items:center;min-width:var(--ibiz-font-size-header-6);height:100%;font-size:var(--ibiz-font-size-header-6);cursor:pointer}.ibiz-emoji-categories__category--svg{line-height:var(--ibiz-font-size-header-6)}.ibiz-emoji-categories__category--svg svg{fill:var(--ibiz-color-text-3)}.ibiz-emoji-categories__category.is-active,.ibiz-emoji-categories__category:hover{position:relative}.ibiz-emoji-categories__category.is-active::after,.ibiz-emoji-categories__category:hover::after{position:absolute;bottom:0;display:block;width:100%;content:"";border-top:.125rem solid var(--ibiz-color-primary)}.ibiz-emoji-categories__category:hover{color:var(--ibiz-color-primary)}.ibiz-emoji-categories__category:hover svg{fill:var(--ibiz-color-primary)}

package/lib/common/emoji-select/components/categories/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var categories = require('./categories.cjs');
+
+"use strict";
+
+exports.Categories = categories.Categories;

package/lib/common/emoji-select/components/category-label/category-label.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./category-label.css');
+
+"use strict";
+const CategoryLabel = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizCategoryLabel",
+  props: {
+    name: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["select"],
+  setup() {
+    const ns = vue3Util.useNamespace("emoji-category-label");
+    return {
+      ns
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [this.name]);
+  }
+});
+
+exports.CategoryLabel = CategoryLabel;

package/lib/common/emoji-select/components/category-label/category-label.css

@@ -0,0 +1 @@
+.ibiz-emoji-category-label{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-3);text-transform:uppercase}

package/lib/common/emoji-select/components/category-label/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var categoryLabel = require('./category-label.cjs');
+
+"use strict";
+
+exports.CategoryLabel = categoryLabel.CategoryLabel;

package/lib/common/emoji-select/components/emoji-item/emoji-item.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./emoji-item.css');
+
+"use strict";
+const EmojiItem = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizEmojiItem",
+  props: {
+    emoji: {
+      type: Object,
+      required: true,
+      default: () => {
+      }
+    },
+    size: {
+      type: Number,
+      required: true
+    },
+    withBorder: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ["click"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("emoji-item");
+    const styleSize = vue.computed(() => {
+      return {
+        fontSize: "".concat(props.size - 5, "px"),
+        lineHeight: "".concat(props.size, "px"),
+        height: "".concat(props.size, "px"),
+        width: "".concat(props.size, "px")
+      };
+    });
+    const onClick = () => {
+      emit("click", props.emoji);
+    };
+    return {
+      ns,
+      styleSize,
+      onClick
+    };
+  },
+  render() {
+    return vue.createVNode("span", {
+      "class": [this.ns.b(), this.ns.is("border", this.withBorder)],
+      "style": this.styleSize,
+      "onClick": this.onClick,
+      "innerHTML": this.emoji.data
+    }, null);
+  }
+});
+
+exports.EmojiItem = EmojiItem;

package/lib/common/emoji-select/components/emoji-item/emoji-item.css

@@ -0,0 +1 @@
+.ibiz-emoji-item{box-sizing:content-box;display:flex;align-items:center;justify-self:center;padding:var(--ibiz-spacing-tight);overflow:hidden;cursor:pointer}.ibiz-emoji-item.is-border:hover{background:var(--ibiz-color-bg-0);border-radius:var(--ibiz-border-radius-small)}

package/lib/common/emoji-select/components/emoji-item/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var emojiItem = require('./emoji-item.cjs');
+
+"use strict";
+
+exports.EmojiItem = emojiItem.EmojiItem;

package/lib/common/emoji-select/components/emoji-list/emoji-list.cjs

@@ -0,0 +1,167 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('../category-label/index.cjs');
+require('../emoji-item/index.cjs');
+require('./emoji-list.css');
+var emojiItem = require('../emoji-item/emoji-item.cjs');
+var categoryLabel = require('../category-label/category-label.cjs');
+
+"use strict";
+const searchByAlias = (term, emoji) => {
+  const isRelevant = (alias) => alias.toLowerCase().includes(term);
+  return emoji.aliases.some((alias) => isRelevant(alias));
+};
+const EmojiList = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizEmojiList",
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    emojisByRow: {
+      type: Number,
+      required: true
+    },
+    emojiWithBorder: {
+      type: Boolean
+    },
+    emojiSize: {
+      type: Number
+    },
+    filter: {
+      type: String,
+      default: ""
+    },
+    continuousList: {
+      type: Boolean
+    },
+    category: {
+      type: String,
+      default: ""
+    },
+    categories: {
+      type: Object,
+      required: true,
+      default: () => {
+      }
+    },
+    hasSearch: {
+      type: Boolean
+    }
+  },
+  emits: ["select", "data"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("emoji-list");
+    const emojisRef = vue.ref({});
+    const categoryRefs = vue.ref({});
+    const dataFiltered = vue.computed(() => {
+      let data = props.data[props.category];
+      const searchValue = props.filter.trim().toLowerCase();
+      if (searchValue) {
+        data = data.filter((emoji) => searchByAlias(searchValue, emoji));
+      }
+      return data;
+    });
+    const categories = vue.computed(() => {
+      return Object.keys(props.data);
+    });
+    const setCategoryRef = (categoryName, el) => {
+      if (el) {
+        categoryRefs.value[categoryName] = el;
+      }
+    };
+    const calcScrollTop = () => {
+      return props.hasSearch ? 88 : 44;
+    };
+    const gridDynamic = vue.computed(() => {
+      const percent = 100 / props.emojisByRow;
+      return {
+        gridTemplateColumns: "repeat(".concat(props.emojisByRow, ", ").concat(percent, "%)")
+      };
+    });
+    const dataFilteredByCategory = vue.computed(() => {
+      const _data = {};
+      Object.assign(_data, props.data);
+      const searchValue = props.filter.trim().toLowerCase();
+      if (searchValue) {
+        categories.value.forEach((category) => {
+          _data[category] = props.data[category].filter((item) => searchByAlias(searchValue, item));
+        });
+      }
+      return _data;
+    });
+    const onSelect = (emoji) => {
+      emit("select", emoji);
+    };
+    vue.watch(() => props.data, () => {
+      emojisRef.value.$el.scrollTop = 0;
+    });
+    vue.watch(() => props.category, (newValue) => {
+      if (props.continuousList) {
+        const categoryEl = categoryRefs.value[newValue].$el;
+        emojisRef.value.scrollTop = categoryEl.offsetTop - calcScrollTop();
+      }
+    });
+    const renderGridEmojis = (params) => {
+      const {
+        emojis,
+        style,
+        size,
+        withBorder
+      } = params;
+      return emojis && emojis.length > 0 ? vue.createVNode("div", {
+        "class": [ns.m("grid-emojis")],
+        "style": style
+      }, [emojis.map((emoji) => {
+        return vue.createVNode(emojiItem.EmojiItem, {
+          "emoji": emoji,
+          "size": size,
+          "withBorder": withBorder,
+          "onClick": () => onSelect(emoji)
+        }, null);
+      })]) : "";
+    };
+    return {
+      ns,
+      emojisRef,
+      gridDynamic,
+      dataFiltered,
+      dataFilteredByCategory,
+      onSelect,
+      setCategoryRef,
+      renderGridEmojis
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [vue.createVNode("div", {
+      "ref": "emojisRef",
+      "class": [this.ns.e("container")]
+    }, [this.continuousList ? Object.keys(this.dataFilteredByCategory).map((categoryName) => {
+      const category = this.dataFilteredByCategory[categoryName];
+      const categoriesItem = this.categories[categoryName];
+      const labelName = categoriesItem ? categoriesItem.text : categoryName;
+      return vue.createVNode("div", null, [category.length ? vue.createVNode(categoryLabel.CategoryLabel, {
+        "name": labelName,
+        "ref": (el) => this.setCategoryRef(categoryName, el)
+      }, null) : "", this.renderGridEmojis({
+        emojis: category,
+        style: this.gridDynamic,
+        size: this.emojiSize,
+        withBorder: this.emojiWithBorder
+      })]);
+    }) : this.renderGridEmojis({
+      emojis: this.dataFiltered || [],
+      style: this.gridDynamic,
+      size: this.emojiSize,
+      withBorder: this.emojiWithBorder
+    })])]);
+  }
+});
+
+exports.EmojiList = EmojiList;

package/lib/common/emoji-select/components/emoji-list/emoji-list.css

@@ -0,0 +1 @@
+.ibiz-emoji-list{display:block;width:100%;max-width:100%;padding:0 var(--ibiz-spacing-tight);padding-bottom:var(--ibiz-spacing-tight)}.ibiz-emoji-list ::-webkit-scrollbar{width:.25rem;margin-right:-4px;overflow:hidden;border-radius:.25rem}.ibiz-emoji-list__container{height:100%;max-height:24vh;padding:0 var(--ibiz-spacing-extra-tight);overflow-y:scroll}.ibiz-emoji-list--grid-emojis{display:grid;justify-items:center}

package/lib/common/emoji-select/components/emoji-list/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var emojiList = require('./emoji-list.cjs');
+
+"use strict";
+
+exports.EmojiList = emojiList.EmojiList;

package/lib/common/emoji-select/components/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+require('./categories/index.cjs');
+require('./category-label/index.cjs');
+require('./emoji-item/index.cjs');
+require('./emoji-list/index.cjs');
+require('./input-search/index.cjs');
+var categories = require('./categories/categories.cjs');
+var categoryLabel = require('./category-label/category-label.cjs');
+var emojiItem = require('./emoji-item/emoji-item.cjs');
+var emojiList = require('./emoji-list/emoji-list.cjs');
+var inputSearch = require('./input-search/input-search.cjs');
+
+"use strict";
+
+exports.Categories = categories.Categories;
+exports.CategoryLabel = categoryLabel.CategoryLabel;
+exports.EmojiItem = emojiItem.EmojiItem;
+exports.EmojiList = emojiList.EmojiList;
+exports.InputSearch = inputSearch.InputSearch;

package/lib/common/emoji-select/components/input-search/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var inputSearch = require('./input-search.cjs');
+
+"use strict";
+
+exports.InputSearch = inputSearch.InputSearch;

package/lib/common/emoji-select/components/input-search/input-search.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('../../icons/index.cjs');
+require('./input-search.css');
+var search = require('../../icons/search.cjs');
+
+"use strict";
+const InputSearch = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizInputSearch",
+  emits: ["update"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("emoji-input-search");
+    const inputSearch = vue.ref("");
+    const onSearch = () => {
+      emit("update", inputSearch.value);
+    };
+    const handleKeyUp = (e) => {
+      if (e && e.code === "Enter") {
+        onSearch();
+      }
+    };
+    return {
+      ns,
+      inputSearch,
+      onSearch,
+      handleKeyUp
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("container"),
+      "onKeyup": this.handleKeyUp
+    }, [vue.createVNode("div", {
+      "class": this.ns.em("container", "search"),
+      "onClick": this.onSearch
+    }, [search.SearchSvg()]), vue.withDirectives(vue.createVNode("input", {
+      "class": this.ns.em("container", "input"),
+      "type": "text",
+      "onUpdate:modelValue": ($event) => this.inputSearch = $event,
+      "placeholder": ibiz.i18n.t("app.search")
+    }, null), [[vue.vModelText, this.inputSearch]])])]);
+  }
+});
+
+exports.InputSearch = InputSearch;

package/lib/common/emoji-select/components/input-search/input-search.css

@@ -0,0 +1 @@
+.ibiz-emoji-input-search{display:block;width:100%;max-width:100%}.ibiz-emoji-input-search__container{position:relative;box-sizing:border-box;display:flex;justify-content:center;width:100%;padding:0 var(--ibiz-spacing-base-loose);margin:var(--ibiz-spacing-base) 0 var(--ibiz-spacing-tight) 0}.ibiz-emoji-input-search__container--input{box-sizing:border-box;width:100%;height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-tight);padding-right:calc(var(--ibiz-spacing-tight) * 2 + var(--ibiz-font-size-regular));border:none;border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 0 1px var(--ibiz-color-border) inset}.ibiz-emoji-input-search__container--input:focus{outline:0;box-shadow:0 0 0 1px var(--ibiz-color-primary) inset}.ibiz-emoji-input-search__container--search{position:absolute;top:50%;right:var(--ibiz-spacing-base-loose);padding:0 var(--ibiz-spacing-tight);cursor:pointer;transform:translate(0,-50%)}.ibiz-emoji-input-search__container--search::after{position:absolute;top:50%;right:calc(var(--ibiz-spacing-tight) * 2 + var(--ibiz-font-size-regular));display:block;width:1px;height:var(--ibiz-font-size-regular);content:"";border-left:1px solid var(--ibiz-color-border);transform:translate(0,-50%)}.ibiz-emoji-input-search__container--search svg{fill:var(--ibiz-color-text-3)}.ibiz-emoji-input-search__container:hover input{box-shadow:0 0 0 1px var(--ibiz-color-primary) inset}