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

package/es/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/es/common/emoji-select/components/categories/categories.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import './categories.scss';
+export declare const Categories: import("vue").DefineComponent<{
+    categories: {
+        type: PropType<IData[]>;
+        required: true;
+        default: () => never[];
+    };
+    current: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    onSelect: (category: IData) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select"[], "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    categories: {
+        type: PropType<IData[]>;
+        required: true;
+        default: () => never[];
+    };
+    current: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    categories: IData[];
+}, {}>;

package/es/common/emoji-select/components/categories/categories.mjs

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

package/es/common/emoji-select/components/categories/index.d.ts

@@ -0,0 +1 @@
+export * from './categories';

package/es/common/emoji-select/components/categories/index.mjs

@@ -0,0 +1,3 @@
+export { Categories } from './categories.mjs';
+
+"use strict";

package/es/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/es/common/emoji-select/components/category-label/category-label.d.ts

@@ -0,0 +1,18 @@
+import './category-label.scss';
+export declare const CategoryLabel: import("vue").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select"[], "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    name: string;
+}, {}>;

package/es/common/emoji-select/components/category-label/category-label.mjs

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

package/es/common/emoji-select/components/category-label/index.d.ts

@@ -0,0 +1 @@
+export * from './category-label';

package/es/common/emoji-select/components/category-label/index.mjs

@@ -0,0 +1,3 @@
+export { CategoryLabel } from './category-label.mjs';
+
+"use strict";

package/es/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/es/common/emoji-select/components/emoji-item/emoji-item.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+import './emoji-item.scss';
+export declare const EmojiItem: import("vue").DefineComponent<{
+    emoji: {
+        type: PropType<IData>;
+        required: true;
+        default: () => void;
+    };
+    size: {
+        type: NumberConstructor;
+        required: true;
+    };
+    withBorder: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    styleSize: import("vue").ComputedRef<{
+        fontSize: string;
+        lineHeight: string;
+        height: string;
+        width: string;
+    }>;
+    onClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    emoji: {
+        type: PropType<IData>;
+        required: true;
+        default: () => void;
+    };
+    size: {
+        type: NumberConstructor;
+        required: true;
+    };
+    withBorder: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    emoji: IData;
+}, {}>;

package/es/common/emoji-select/components/emoji-item/emoji-item.mjs

@@ -0,0 +1,56 @@
+import { computed, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './emoji-item.css';
+
+"use strict";
+const EmojiItem = /* @__PURE__ */ 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 = useNamespace("emoji-item");
+    const styleSize = 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 createVNode("span", {
+      "class": [this.ns.b(), this.ns.is("border", this.withBorder)],
+      "style": this.styleSize,
+      "onClick": this.onClick,
+      "innerHTML": this.emoji.data
+    }, null);
+  }
+});
+
+export { EmojiItem };

package/es/common/emoji-select/components/emoji-item/index.d.ts

@@ -0,0 +1 @@
+export * from './emoji-item';

package/es/common/emoji-select/components/emoji-item/index.mjs

@@ -0,0 +1,3 @@
+export { EmojiItem } from './emoji-item.mjs';
+
+"use strict";

package/es/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/es/common/emoji-select/components/emoji-list/emoji-list.d.ts

@@ -0,0 +1,92 @@
+import { PropType } from 'vue';
+import './emoji-list.scss';
+export declare const EmojiList: import("vue").DefineComponent<{
+    data: {
+        type: PropType<IData>;
+        required: true;
+    };
+    emojisByRow: {
+        type: NumberConstructor;
+        required: true;
+    };
+    emojiWithBorder: {
+        type: BooleanConstructor;
+    };
+    emojiSize: {
+        type: NumberConstructor;
+    };
+    filter: {
+        type: StringConstructor;
+        default: string;
+    };
+    continuousList: {
+        type: BooleanConstructor;
+    };
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    categories: {
+        type: PropType<IData>;
+        required: true;
+        default: () => void;
+    };
+    hasSearch: {
+        type: BooleanConstructor;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    emojisRef: import("vue").Ref<IData>;
+    gridDynamic: import("vue").ComputedRef<{
+        gridTemplateColumns: string;
+    }>;
+    dataFiltered: import("vue").ComputedRef<any>;
+    dataFilteredByCategory: import("vue").ComputedRef<IData>;
+    onSelect: (emoji: IData) => void;
+    setCategoryRef: (categoryName: string, el: Element) => void;
+    renderGridEmojis: (params: IData) => JSX.Element | "";
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("data" | "select")[], "data" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<IData>;
+        required: true;
+    };
+    emojisByRow: {
+        type: NumberConstructor;
+        required: true;
+    };
+    emojiWithBorder: {
+        type: BooleanConstructor;
+    };
+    emojiSize: {
+        type: NumberConstructor;
+    };
+    filter: {
+        type: StringConstructor;
+        default: string;
+    };
+    continuousList: {
+        type: BooleanConstructor;
+    };
+    category: {
+        type: StringConstructor;
+        default: string;
+    };
+    categories: {
+        type: PropType<IData>;
+        required: true;
+        default: () => void;
+    };
+    hasSearch: {
+        type: BooleanConstructor;
+    };
+}>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
+    onData?: ((...args: any[]) => any) | undefined;
+}, {
+    filter: string;
+    categories: IData;
+    category: string;
+    emojiWithBorder: boolean;
+    continuousList: boolean;
+    hasSearch: boolean;
+}, {}>;

package/es/common/emoji-select/components/emoji-list/emoji-list.mjs

@@ -0,0 +1,165 @@
+import { ref, computed, watch, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import '../category-label/index.mjs';
+import '../emoji-item/index.mjs';
+import './emoji-list.css';
+import { EmojiItem } from '../emoji-item/emoji-item.mjs';
+import { CategoryLabel } from '../category-label/category-label.mjs';
+
+"use strict";
+const searchByAlias = (term, emoji) => {
+  const isRelevant = (alias) => alias.toLowerCase().includes(term);
+  return emoji.aliases.some((alias) => isRelevant(alias));
+};
+const EmojiList = /* @__PURE__ */ 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 = useNamespace("emoji-list");
+    const emojisRef = ref({});
+    const categoryRefs = ref({});
+    const dataFiltered = 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 = 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 = computed(() => {
+      const percent = 100 / props.emojisByRow;
+      return {
+        gridTemplateColumns: "repeat(".concat(props.emojisByRow, ", ").concat(percent, "%)")
+      };
+    });
+    const dataFilteredByCategory = 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);
+    };
+    watch(() => props.data, () => {
+      emojisRef.value.$el.scrollTop = 0;
+    });
+    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 ? createVNode("div", {
+        "class": [ns.m("grid-emojis")],
+        "style": style
+      }, [emojis.map((emoji) => {
+        return createVNode(EmojiItem, {
+          "emoji": emoji,
+          "size": size,
+          "withBorder": withBorder,
+          "onClick": () => onSelect(emoji)
+        }, null);
+      })]) : "";
+    };
+    return {
+      ns,
+      emojisRef,
+      gridDynamic,
+      dataFiltered,
+      dataFilteredByCategory,
+      onSelect,
+      setCategoryRef,
+      renderGridEmojis
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": [this.ns.b()]
+    }, [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 createVNode("div", null, [category.length ? createVNode(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
+    })])]);
+  }
+});
+
+export { EmojiList };

package/es/common/emoji-select/components/emoji-list/index.d.ts

@@ -0,0 +1 @@
+export * from './emoji-list';

package/es/common/emoji-select/components/emoji-list/index.mjs

@@ -0,0 +1,3 @@
+export { EmojiList } from './emoji-list.mjs';
+
+"use strict";

package/es/common/emoji-select/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './categories';
+export * from './category-label';
+export * from './emoji-item';
+export * from './emoji-list';
+export * from './input-search';

package/es/common/emoji-select/components/index.mjs

@@ -0,0 +1,12 @@
+import './categories/index.mjs';
+import './category-label/index.mjs';
+import './emoji-item/index.mjs';
+import './emoji-list/index.mjs';
+import './input-search/index.mjs';
+export { Categories } from './categories/categories.mjs';
+export { CategoryLabel } from './category-label/category-label.mjs';
+export { EmojiItem } from './emoji-item/emoji-item.mjs';
+export { EmojiList } from './emoji-list/emoji-list.mjs';
+export { InputSearch } from './input-search/input-search.mjs';
+
+"use strict";

package/es/common/emoji-select/components/input-search/index.d.ts

@@ -0,0 +1 @@
+export * from './input-search';

package/es/common/emoji-select/components/input-search/index.mjs

@@ -0,0 +1,3 @@
+export { InputSearch } from './input-search.mjs';
+
+"use strict";

package/es/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}

package/es/common/emoji-select/components/input-search/input-search.d.ts

@@ -0,0 +1,9 @@
+import './input-search.scss';
+export declare const InputSearch: import("vue").DefineComponent<{}, {
+    ns: import("@ibiz-template/core").Namespace;
+    inputSearch: import("vue").Ref<string>;
+    onSearch: () => void;
+    handleKeyUp: (e: KeyboardEvent) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update"[], "update", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onUpdate?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;

package/es/common/emoji-select/components/input-search/input-search.mjs

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

package/es/common/emoji-select/emoji-select.css

@@ -0,0 +1 @@
+.ibiz-emoji-select{display:inline-flex;flex-direction:column;align-items:center;width:22.375rem;padding-bottom:var(--ibiz-spacing-tight);overflow:hidden;font-size:var(--ibiz-font-size-regular);-webkit-user-select:none;-moz-user-select:none;user-select:none}@media screen and (width <= 22.375rem){.ibiz-emoji-select{width:100%}}