Feature/i18n

.eslintrc.js

@@ -12,6 +12,6 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'semi': ["error", "always"],
+    'semi': [1, "always"],
   },
 };

Readme.md

@@ -10,14 +10,20 @@ This simple package using Emojis Natives
 
 ---
 ## Contents
-- [Installation](#installation)
-- [Usage](#usage)
-- [Props](#props)
-- [Events](#events)
-- [Updates v2](#updates-version-2)
-- [Migrate v2](#migrate-to-version-2)
-- [Using SVG](#using-SVG)
-- [Structure emoji](#structure-emoji)
+ - [V-Emoji-Picker](#v-emoji-picker)
+ - [Contents](#contents)
+ - [Installation](#installation)
+ - [Usage](#usage)
+ - [Props](#props)
+ - [Events](#events)
+ - [Using custom Emojis](#using-custom-emojis)
+ - [Using custom Categories](#using-custom-categories)
+ - [Using SVG](#using-svg)
+ - [Updates version 2](#updates-version-2)
+ - [Migrate to version 2](#migrate-to-version-2)
+ - [Structure Emoji](#structure-emoji)
+ - [Size](#size)
+ - [License](#license)
 ----
 
 # Installation
@@ -69,15 +75,20 @@ new Vue({
 ## Props
 ```ts
 {
-  @Prop({ default: () => [] as IEmoji[] }) customEmojis!: IEmoji[];
-  @Prop({ default: () => [] as ICategory[] }) customCategories!: ICategory[];
+
+  @Prop({ default: () => [] }) customEmojis!: IEmoji[];
+  @Prop({ default: () => [] }) customCategories!: ICategory[];
+  @Prop({ default: 15 }) limitFrequently!: number;
   @Prop({ default: 5 }) emojisByRow!: number;
   @Prop({ default: false }) continuousList!: boolean;
+  @Prop({ default: 32 }) emojiSize!: number;
+  @Prop({ default: true }) emojiWithBorder!: boolean;
   @Prop({ default: true }) showSearch!: boolean;
   @Prop({ default: true }) showCategories!: boolean;
-  @Prop({ default: "Pesquisar..." }) labelSearch!: string;
-  @Prop({ default: "Peoples" }) initalCategory!: string;
-  @Prop({ default: () => [] as string[] }) exceptCategories!: string[];
+  @Prop({ default: "Peoples" }) initialCategory!: string;
+  @Prop({ default: () => [] as ICategory[] }) exceptCategories!: ICategory[];
+  @Prop({ default: () => [] as Emoji[] }) exceptEmojis!: IEmoji[];
+  @Prop({}) i18n!: Object;
 }
 ```
 
@@ -117,6 +128,34 @@ set in Prop `customCategories`
 # Using SVG
 Doc coming soon...
 
+# i18n
+Set in Prop `i18n` a object with structure of you custom translation:
+
+```html
+  <VEmojiPicker :i18n="i18n" />
+```
+
+```js
+const i18n = {
+  search: 'Pesquisar...',
+  categories: {
+    Activity: "Atividades",
+    Flags: "Bandeiras",
+    Foods: "Comida",
+    Frequently: "Frequentes",
+    Objects: "Objetos",
+    Nature: "Natureza",
+    Peoples: "Pessoas",
+    Symbols: "Símbolos",
+    Places: "Locais"
+  }
+}
+```
+
+or import from `locale/lang/${youLang}`
+
+Obs: Default language is en-UK
+
 # Updates version 2
 - Prop `customEmojis`
 - Prop `customCategories`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-emoji-picker",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "author": {
     "name": "João Eudes Lima",
     "email": "joaoeudes7@gmail.com",
@@ -9,11 +9,12 @@
   "scripts": {
     "serve": "vue-cli-service serve --open",
     "build": "rm -rf lib && rollup -c",
+    "build:app": "vue-cli-service build --modern",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
     "prepublishOnly": "yarn build"
   },
-  "main": "./lib/v-emoji-picker.cjs.js",
+  "main": "./lib/v-emoji-picker.unpkg.js",
   "module": "./lib/v-emoji-picker.esm.js",
   "unpkg": "./lib/v-emoji-picker.unpkg.js",
   "browser": {
@@ -27,7 +28,7 @@
   ],
   "dependencies": {
     "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^8.4.1"
+    "vue-property-decorator": "^8.4.2"
   },
   "peerDependencies": {
     "vue": "^2.6.11"
@@ -36,30 +37,30 @@
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@types/chai": "^4.2.11",
     "@types/mocha": "^7.0.2",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-eslint": "^4.3.1",
     "@vue/cli-plugin-typescript": "^4.3.1",
     "@vue/cli-plugin-unit-mocha": "^4.3.1",
     "@vue/cli-service": "^4.3.1",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "^1.0.0-beta.33",
+    "@vue/test-utils": "^1.0.2",
     "babel-eslint": "^10.1.0",
     "chai": "^4.2.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.0.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
-    "rollup": "^2.6.1",
+    "rollup": "^2.10.2",
     "rollup-plugin-css-porter": "^1.0.2",
-    "rollup-plugin-filesize": "^7.0.0",
+    "rollup-plugin-filesize": "^9.0.0",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.27.0",
-    "rollup-plugin-vue": "^5.1.4",
-    "sass": "^1.26.3",
+    "rollup-plugin-typescript2": "^0.27.1",
+    "rollup-plugin-vue": "^5.1.7",
+    "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "terser": "^4.6.11",
-    "typescript": "^3.8.3",
+    "terser": "^4.6.13",
+    "typescript": "^3.9.2",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"
   },

src/AppTestUi.vue

@@ -1,14 +1,15 @@
 <template>
   <div>
     <div>
-      <VEmojiPicker :customEmojis="emojis" />
+      <VEmojiPicker :customEmojis="emojis" :continuousList="true" v-if="visible" />
     </div>
     <button @click="changeEmojis">Change</button>
+    <button @click="changeVisibleEmojis">Toogle View</button>
   </div>
 </template>
 
 <script lang='ts'>
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 
 import { VEmojiPicker, emojisDefault } from "./index";
 
@@ -18,9 +19,15 @@ Vue.use(VEmojiPicker);
 export default class AppTestUi extends Vue {
   private emojis = emojisDefault;
 
+  private visible = true;
+
   changeEmojis() {
     this.emojis = emojisDefault.slice(0, 8);
   }
+
+  changeVisibleEmojis() {
+    this.visible = !this.visible;
+  }
 }
 </script>
 

src/VEmojiPicker.vue

@@ -6,7 +6,7 @@
       :current="currentCategory"
       @select="changeCategory"
     />
-    <InputSearch v-if="showSearch" @update="onSearch" :placeholder="labelSearch" />
+    <InputSearch v-if="showSearch" @update="onSearch" />
     <EmojiList
       :data="mapEmojis"
       :category="currentCategory"
@@ -22,10 +22,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
+import { Component, Emit, Prop, Vue, Watch } from "vue-property-decorator";
 
-import { IEmoji, Emoji } from "./models/Emoji";
-import { ICategory, Category } from "./models/Category";
+import { Emoji, IEmoji } from "./models/Emoji";
+import { ICategory } from "./models/Category";
 import { MapEmojis } from "./models/MapEmojis";
 
 import { emojisDefault } from "./utils/emojis";
@@ -35,6 +35,8 @@ import Categories from "./components/Categories.vue";
 import EmojiList from "./components/EmojiList.vue";
 import InputSearch from "./components/InputSearch.vue";
 
+import locale from "./locale";
+
 @Component({
   components: {
     Categories,
@@ -52,18 +54,34 @@ export default class VEmojiPicker extends Vue {
   @Prop({ default: true }) emojiWithBorder!: boolean;
   @Prop({ default: true }) showSearch!: boolean;
   @Prop({ default: true }) showCategories!: boolean;
-  @Prop({ default: "Search" }) labelSearch!: string;
   @Prop({ default: "Peoples" }) initialCategory!: string;
   @Prop({ default: () => [] as ICategory[] }) exceptCategories!: ICategory[];
   @Prop({ default: () => [] as Emoji[] }) exceptEmojis!: IEmoji[];
+  @Prop({}) i18n!: Object;
 
   mapEmojis: MapEmojis = {};
+
   currentCategory = this.initialCategory;
   filterEmoji = "";
 
   created() {
+    const categoriesNames = this.customCategories.map(c => c.name);
+    if (!categoriesNames.includes(this.initialCategory)) {
+      this.initialCategory = categoriesNames[0];
+    }
+
+    // Create map
     this.mapperEmojisCategory(this.customEmojis);
     this.restoreFrequentlyEmojis();
+
+    // Configure i18n
+    if (this.i18n) {
+      locale.i18n(this.i18n);
+    }
+  }
+
+  beforeDestroy() {
+    this.mapEmojis = {};
   }
 
   async onSearch(term: string) {
@@ -75,7 +93,7 @@ export default class VEmojiPicker extends Vue {
     this.currentCategory = category.name;
 
     if (hasEmojis) {
-      this.onChangeCategory(category);
+      await this.onChangeCategory(category);
     }
   }
 
@@ -85,7 +103,7 @@ export default class VEmojiPicker extends Vue {
 
     this.mapEmojis["Frequently"] = emojis.slice(0, this.limitFrequently);
 
-    this.saveFrequentlyEmojis(emojis);
+    await this.saveFrequentlyEmojis(emojis);
   }
 
   async mapperEmojisCategory(emojis: IEmoji[]) {
@@ -108,32 +126,28 @@ export default class VEmojiPicker extends Vue {
     const jsonMapIndexEmojis = localStorage.getItem("frequentlyEmojis");
 
     const mapIndexEmojis = JSON.parse(jsonMapIndexEmojis!!) || [];
-    const emojis = mapIndexEmojis.map(index => this.customEmojis[index]);
-
-    this.mapEmojis["Frequently"] = emojis;
+    this.mapEmojis["Frequently"] = mapIndexEmojis.map(
+      index => this.customEmojis[index]
+    );
   }
 
   async saveFrequentlyEmojis(emojis: IEmoji[]) {
     const mapIndexEmojis = emojis.map(emoji => {
-      const indexEmoji = this.customEmojis.indexOf(emoji);
-
-      return indexEmoji;
+      return this.customEmojis.indexOf(emoji);
     });
 
     localStorage.setItem("frequentlyEmojis", JSON.stringify(mapIndexEmojis));
   }
 
   get categoriesFiltered() {
-    const { exceptCategories, customCategories } = this;
-
-    return customCategories.filter(
-      category => !exceptCategories.includes(category)
+    return this.customCategories.filter(
+      category => !this.exceptCategories.includes(category)
     );
   }
 
   @Emit("select")
   async onSelectEmoji(emoji: IEmoji) {
-    this.updateFrequently(emoji);
+    await this.updateFrequently(emoji);
 
     return emoji;
   }
@@ -145,8 +159,6 @@ export default class VEmojiPicker extends Vue {
 
   @Watch("customEmojis")
   onChangeCustomEmojis(newEmojis: IEmoji[]) {
-    console.log(newEmojis == null);
-
     if (newEmojis && newEmojis.length) {
       this.mapEmojis = {};
       this.mapperEmojisCategory(newEmojis);

src/components/Categories.vue

@@ -6,7 +6,7 @@
       :key="index"
       @click="onSelect(category)"
     >
-      <CategoryItem :name="category.name" :icon="category.icon" />
+      <CategoryItem :label="category.label" :icon="category.icon" />
     </div>
   </div>
 </template>
@@ -42,12 +42,12 @@ export default class Categories extends Vue {
   border-bottom: 1px solid #e4e4e4;
   background: #f0f0f0;
   color: white;
+  overflow-x: auto;
 }
 
 .category {
   flex: 1;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding: 5px;
   text-align: center;
   cursor: pointer;
 

src/components/CategoryItem.vue

@@ -1,13 +1,13 @@
 <template>
-  <span class="svg" :style="styleSVG" :title="name" v-html="icon" />
+  <span class="svg" :style="styleSVG" :title="label" v-html="icon" />
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component({})
 export default class CategoryItem extends Vue {
-  @Prop({ required: true }) name!: string;
+  @Prop({ required: true }) label!: string;
   @Prop({ required: true }) icon!: string;
   @Prop({}) styles!: object;