simple langs for pagebuilder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "magico-pagebuilder",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -18,6 +18,7 @@
     "magico-section": "https://serwer.magico.pl/gitrepos/public/magico-section.git",
     "tinymce": "^6.0.3",
     "vue": "^3.3.4",
+    "vue-i18n": "9",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

src/components/MagicoPagebuilder.vue

@@ -21,7 +21,7 @@
               data-bs-toggle="dropdown"
               aria-expanded="false"
             >
-              Szablony
+              {{ t('pagebuilder.template') }}
             </button>
             <ul class="dropdown-menu">
               <li>
@@ -32,7 +32,7 @@
                   "
                   class="dropdown-item"
                   href="#"
-                  >Wczytaj szablon</a
+                  >{{ t('pagebuilder.import_template') }}</a
                 >
               </li>
               <li>
@@ -43,7 +43,7 @@
                   "
                   class="dropdown-item"
                   href="#"
-                  >Zapisz jako szablon</a
+                  >{{ t('pagebuilder.save_template') }}</a
                 >
               </li>
               <li v-if="descriptionAllegro">
@@ -52,14 +52,14 @@
                 >
               </li>
               <li>
-                <a @click.prevent="copyClipboard" class="dropdown-item" href="#"
+                <a @click.prevent="copyClipboard" class="dropdown-item" href="#">{{
-                  >Kopiuj do schowka</a
+                  t('pagebuilder.copy_template')
-                >
+                }}</a>
               </li>
               <li v-if="pasteAvailable">
-                <a @click.prevent="pasteClipboard" class="dropdown-item" href="#"
+                <a @click.prevent="pasteClipboard" class="dropdown-item" href="#">{{
-                  >Wklej ze schowka</a
+                  t('pagebuilder.paste_template')
-                >
+                }}</a>
               </li>
             </ul>
           </div>
@@ -107,7 +107,7 @@
             class="btn btn-success mr-1"
             :disabled="!pageType.name"
           >
-            Zapisz do schowka
+            {{ t('pagebuilder.copy_template') }}
           </button>
         </div>
       </b-modal>
@@ -138,7 +138,7 @@
       <b-modal
         class_other="modal-xl"
         v-model="modalAddSection"
-        title=" Dodaj sekcję"
+        :title="t('pagebuilder.add_section')"
         v-on:onClose="modalAddSection = false"
         hide-footer
       >
@@ -155,7 +155,7 @@
             optionx = false
           "
         >
-          Dodaj sekcję
+          {{ t('pagebuilder.add_section') }}
         </button>
       </div>
     </div>
@@ -170,6 +170,7 @@ import PagebuilderSection from './PagebuilderSection.vue'
 import DropdownSectionGrid from './DropdownSectionGrid.vue'
 import PagebuilderTemplateSave from './PagebuilderTemplateSave.vue'
 import PagebuilderTemplateLoad from './PagebuilderTemplateLoad.vue'
+import { useI18n } from 'vue-i18n'
 
 export default {
   name: 'MagicoPagebuilder',
@@ -197,10 +198,14 @@ export default {
       modalSave: false,
       modalLoad: false,
       descriptionAllegro: false,
-      ownUpdate:false,
+      ownUpdate: false
     }
   },
   props: ['name', 'modelValue', 'showcopy', 'lang'],
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
   mounted: function () {
     if (localStorage.getItem('description_clipboard')) {
       this.descriptionAllegro = true
@@ -235,8 +240,8 @@ export default {
     },
     modelValue: function () {
       if (this.ownUpdate) {
-        this.ownUpdate=false;
+        this.ownUpdate = false
-        return;
+        return
       }
       try {
         this.comps = JSON.parse(this.modelValue)
@@ -254,7 +259,7 @@ export default {
   },
   methods: {
     onChange: function () {
-      this.ownUpdate=true;
+      this.ownUpdate = true
       this.$emit('update:modelValue', JSON.stringify(this.comps))
       this.$emit('change')
     },
@@ -267,8 +272,8 @@ export default {
       this.onChange()
     },
     pasteClipboard: function () {
-      const item  =localStorage.getItem('pagebuilder_clipboard');
+      const item = localStorage.getItem('pagebuilder_clipboard')
-      if(!item) return;
+      if (!item) return
       try {
         this.comps = JSON.parse(item)
       } catch (e) {
@@ -276,7 +281,7 @@ export default {
       }
     },
     copyClipboard: function () {
-      localStorage.setItem('pagebuilder_clipboard', JSON.stringify(this.comps));
+      localStorage.setItem('pagebuilder_clipboard', JSON.stringify(this.comps))
     },
     addSection: function (it) {
       this.modalAddSection = false

src/components/PagebuilderSection.vue

@@ -40,10 +40,14 @@
         class="box-settings-icon box-delete text-danger"
         ><i class="material-icons-outlined">delete</i></a
       >
-      <b-modal v-model="show_settings" title="Ustawienia sekcji" @onClose="ustawieniaSave()">
+      <b-modal
+        v-model="show_settings"
+        :title="t('pagebuilder.section_settings')"
+        @onClose="ustawieniaSave()"
+      >
         <div>
           <div class="form-group mb-2">
-              <label class="w-100 col-form-label"> Typ sekcji </label>
+            <label class="w-100 col-form-label"> {{ t('pagebuilder.section_type') }} </label>
             <div class="row">
               <div class="col-6">
                 <button
@@ -51,7 +55,7 @@
                   @click="setType('container')"
                   :class="type == 'container' ? 'btn-primary' : 'btn-outline-primary'"
                 >
-                    Kontener
+                  {{ t('pagebuilder.container') }}
                 </button>
               </div>
               <div class="col-6">
@@ -60,7 +64,7 @@
                   @click="setType('full')"
                   :class="type == 'full' ? 'btn-primary' : 'btn-outline-primary'"
                 >
-                    Cała szerokość
+                  {{ t('pagebuilder.full_width') }}
                 </button>
               </div>
             </div>
@@ -96,13 +100,16 @@
           </div>
         </div>
         <div>
-          <button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">Zapisz</button>
+          <button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">
+            {{ t('pagebuilder.save') }}
+          </button>
         </div>
       </b-modal>
     </div>
   </div>
 </template>
 <script>
+import { useI18n } from 'vue-i18n'
 import grid from './grid.js'
 import MagicoModal from './MagicoModal.vue'
 import PagebuilderContent from './PagebuilderContent.vue'
@@ -116,6 +123,10 @@ export default {
   data: function () {
     return { items: grid, value2: '', show_settings: false, type: '' }
   },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
   methods: {
     changeSelect: function () {
       this.onChange()

src/components/plugin/SectionText.vue

@@ -1,28 +1,29 @@
 <template>
   <div class="row m-0 p-0 align-items-center">
     <div class="col-sm-12 col-md-6 p-0 mb-0">
-            <span class="material-icons-outlined me-1 box-move" style="cursor:move;">open_with</span><span
+      <span class="material-icons-outlined me-1 box-move" style="cursor: move">open_with</span
-                class="font-weight-bold text-primary">{{ langs.label }}</span>
+      ><span class="font-weight-bold text-primary">{{ t('pagebuilder.widget_text') }}</span>
     </div>
 
     <div class="col-sm-12 col-md-6 p-0 text-end">
-            <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
+      <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"
-                    class="material-icons-outlined">create</i></a>
+        ><i class="material-icons-outlined">create</i></a
-            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
+      >
-                    class="material-icons-outlined">delete</i></a>
+      <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
+        ><i class="material-icons-outlined">delete</i></a
+      >
     </div>
     <div class="ms-2">
-            <strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
+      <strong class="font-weight-bold">{{ t('pagebuilder.type') }}:</strong> {{ h_type }},
-            <strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
+      <strong class="font-weight-bold">{{ t('pagebuilder.content') }}:</strong> {{ text ? text : ' ' }}
     </div>
-        <b-modal v-model="modalBox" :title="langs.label" @close="onCloseModal">
+    <b-modal v-model="modalBox" :title="t('pagebuilder.widget_text')" @close="onCloseModal">
-
       <div class="form-group">
-                <label class="w-100 col-form-label">{{ langs.content }}</label>
+        <label class="w-100 col-form-label">{{ t('pagebuilder.content') }}</label>
         <input class="form-control" type="text" v-model="text" />
       </div>
       <div class="form-grou mb-2">
-                <label class="w-100 col-form-label">{{ langs.type }}</label>
+        <label class="w-100 col-form-label">{{ t('pagebuilder.type') }}</label>
         <select class="form-select" v-model="h_type">
           <option value="">{{ langs.typeplaintext }}</option>
           <option value="h1">{{ langs.typeheader }} 1</option>
@@ -31,94 +32,118 @@
           <option value="h4">{{ langs.typeheader }} 4</option>
           <option value="h5">{{ langs.typeheader }} 5</option>
           <option value="h6">{{ langs.typeheader }} 6</option>
-
         </select>
       </div>
       <div class="form-group">
-                <label class="w-100 col-form-label">Wyrównanie</label>
+        <label class="w-100 col-form-label">{{ t('pagebuilder.align') }}</label>
         <div class="">
-                    <button vx-tooltip title="Wyrównanie do lewej" @click="align = 'left'" class="btn btn-icon-sm "
+          <button
-                        :class="align == 'left' ? 'btn-primary' : 'btn-outline-primary'">
+            vx-tooltip
+            title="Wyrównanie do lewej"
+            @click="align = 'left'"
+            class="btn btn-icon-sm"
+            :class="align == 'left' ? 'btn-primary' : 'btn-outline-primary'"
+          >
             <span class="material-icons-outlined">format_align_left</span>
           </button>
-                    <button vx-tooltip title="Wyrównanie do środka" @click="align = 'center'" class="btn btn-icon-sm "
+          <button
-                        :class="align == 'center' ? 'btn-primary' : 'btn-outline-primary'">
+            vx-tooltip
+            title="Wyrównanie do środka"
+            @click="align = 'center'"
+            class="btn btn-icon-sm"
+            :class="align == 'center' ? 'btn-primary' : 'btn-outline-primary'"
+          >
             <span class="material-icons-outlined">format_align_center</span>
           </button>
-                    <button vx-tooltip title="Wyrównanie do prawej" @click="align = 'right'" class="btn btn-icon-sm "
+          <button
-                        :class="align == 'right' ? 'btn-primary' : 'btn-outline-primary'">
+            vx-tooltip
+            title="Wyrównanie do prawej"
+            @click="align = 'right'"
+            class="btn btn-icon-sm"
+            :class="align == 'right' ? 'btn-primary' : 'btn-outline-primary'"
+          >
             <span class="material-icons-outlined">format_align_right</span>
           </button>
-                    <button vx-tooltip title="Justowanie" @click="align = 'justify'" class="btn btn-icon-sm "
+          <button
-                        :class="align == 'justify' ? 'btn-primary' : 'btn-outline-primary'">
+            vx-tooltip
+            title="Justowanie"
+            @click="align = 'justify'"
+            class="btn btn-icon-sm"
+            :class="align == 'justify' ? 'btn-primary' : 'btn-outline-primary'"
+          >
             <span class="material-icons-outlined">format_align_justify</span>
           </button>
         </div>
       </div>
 
-            <div class="text-center"><button class="btn btn-outline-secondary me-1" @click.prevent="onCloseModal">{{
+      <div class="text-center">
-                    langs.saveclose
+        <button class="btn btn-outline-secondary me-1" @click.prevent="onCloseModal">
-            }}</button></div>
+          {{ langs.saveclose }}
+        </button>
+      </div>
     </b-modal>
   </div>
 </template>
 <script>
+import { useI18n } from 'vue-i18n'
 import MagicoModal from './../MagicoModal.vue'
 
 export default {
   components: {
-        'b-modal': MagicoModal,
+    'b-modal': MagicoModal
   },
   props: {
     modelValue: Object
   },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
   emits: ['update:modelValue'],
   data: function () {
     return {
       langs: {
-                label: "Tekst",
+        label: 'Tekst',
-                close: "Zaknij",
+        close: 'Zaknij',
-                content: "Treść",
+        content: 'Treść',
-                type: "Typ",
+        type: 'Typ',
-                typeplaintext: "Tekst",
+        typeplaintext: 'Tekst',
-                typeheader: "Nagłowek",
+        typeheader: 'Nagłowek',
-                saveclose: "Zapisz"
+        saveclose: 'Zapisz'
       },
       modalBox: false,
       text: '',
       name: '',
       h_type: '',
-            align: 'left',
+      align: 'left'
     }
   },
   mounted: function () {
-        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
+    this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
-        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
+    this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
-        this.h_type = (this.modelValue && this.modelValue.h_type) ? this.modelValue.h_type : this.h_type;
+    this.h_type = this.modelValue && this.modelValue.h_type ? this.modelValue.h_type : this.h_type
-        this.align = (this.modelValue && this.modelValue.align) ? this.modelValue.align : this.align;
+    this.align = this.modelValue && this.modelValue.align ? this.modelValue.align : this.align
-        if (this.modelValue.open) this.modalBox = true;
+    if (this.modelValue.open) this.modalBox = true
-        console.log('mounted text');
+    console.log('mounted text')
-        this.$emit('update:modelValue', this.modelValue);
+    this.$emit('update:modelValue', this.modelValue)
-
   },
 
   methods: {
     removeItem: function () {
-            this.$emit('itemRemoved', this.modelValue);
+      this.$emit('itemRemoved', this.modelValue)
     },
     onCloseModal: function () {
-            this.modalBox = false;
+      this.modalBox = false
       this.$emit('update:modelValue', {
         name: this.name,
         text: this.text,
         h_type: this.h_type,
-                align: this.align,
+        align: this.align
       })
     }
   },
   destroy() {
-        this.modalBox = false;
+    this.modalBox = false
   }
-
 }
 </script>

src/components/plugin/SectionTextarea.vue

@@ -2,7 +2,7 @@
   <div class="row m-0 p-0 align-items-center">
     <div class="col-sm-12 col-md-6 p-0">
       <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
-      ><span class="font-weight-bold text-primary">{{ langs.label }}</span>
+      ><span class="font-weight-bold text-primary">{{ t('pagebuilder.widget_textarea') }}</span>
     </div>
 
     <div class="col-sm-12 col-md-6 p-0 text-end">
@@ -13,7 +13,7 @@
         no-enforce-focus
         class_other="modal-xl"
         v-model="modalBox"
-        :title="langs.label"
+        :title="t('pagebuilder.widget_textarea')"
         v-on:hide="onCloseModal"
       >
         <div style="min-height: 400px">
@@ -24,14 +24,14 @@
                 rows="12"
                 class="form-control"
                 v-model="text"
-                :init="vtinymce"
+                :init="{ ...vtinymce, language: locale }"
               />
             </div>
           </div>
         </div>
         <div class="d-flex">
           <button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
-            {{ langs.saveclose }}
+            {{ t('pagebuilder.save') }}
           </button>
         </div>
       </b-modal>
@@ -48,6 +48,7 @@ import tinymceConfig from '../tinymce/config.js'
 
 import Editor from '@tinymce/tinymce-vue'
 import { nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
 export default {
   emits: ['update:modelValue'],
   components: {
@@ -58,6 +59,10 @@ export default {
   props: {
     modelValue: Object
   },
+  setup() {
+    const { t, locale } = useI18n()
+    return { t, locale }
+  },
   mounted: function () {
     let vm = this
     this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name

src/locale/en.js

@@ -0,0 +1,19 @@
+export default {
+  widget_textarea: 'Text area',
+  close: 'Close',
+  save: 'Save',
+  align: 'Alignment',
+  type: 'Type',
+  content: 'Content',
+  widget_text: 'Content',
+  add_section: 'Add section',
+  template: 'Templates',
+  import_template: 'Load template',
+  save_template: 'Save template',
+  copy_template: 'Save to clipboard',
+  paste_template: 'Paste from clipboard',
+  section_type: 'Section type',
+  container: 'Container',
+  full_width: '100% width',
+  section_settings: 'Section settings'
+}

src/locale/i18n.js

@@ -0,0 +1,16 @@
+import { createI18n } from 'vue-i18n'
+
+import pl from './pl'
+import en from './en'
+const messages = {
+  pl: { pagebuilder: pl },
+  en: { pagebuilder: en }
+}
+const i18n = createI18n({
+  locale: 'en', // Domyślny język
+  fallbackLocale: 'pl', // Język używany, gdy brakuje tłumaczenia w wybranym języku
+  messages,
+  legacy: false
+})
+
+export default i18n

src/locale/pl.js

@@ -0,0 +1,19 @@
+export default {
+  widget_textarea: 'Pole tekstowe',
+  close: 'Zamknij',
+  save: 'Zapisz',
+  align: 'Wyrównanie',
+  type: 'Typ',
+  content: 'Treść',
+  widget_text: 'Treść',
+  add_section: 'Dodaj sekcję',
+  template: 'Szablony',
+  import_template: 'Wczytaj szablon',
+  save_template: 'Zapisz szablon',
+  copy_template: 'Zapisz do schowka',
+  paste_template: 'Wklej ze schowka',
+  section_type: 'Typ sekcji',
+  container: 'Kontener',
+  full_width: '100% szerokości',
+  section_settings: 'Ustawienia sekcji'
+}

src/main.js

@@ -5,8 +5,6 @@ import App from './App.vue'
 import axios from 'axios'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import MagicoPagebuilder from './components/MagicoPagebuilderPlugin.js'
+import i18n from './locale/i18n'
 
-const app = createApp(App).use(MagicoPagebuilder).mount('#app')
+const app = createApp(App).use(i18n).use(MagicoPagebuilder).mount('#app')
-
-
-

yarn.lock

@@ -173,6 +173,27 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
   integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
+"@intlify/core-base@9.14.2":
+  version "9.14.2"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.14.2.tgz#2c074506ea72425e937f911c95c0d845b43f7fdf"
+  integrity sha512-DZyQ4Hk22sC81MP4qiCDuU+LdaYW91A6lCjq8AWPvY3+mGMzhGDfOCzvyR6YBQxtlPjFqMoFk9ylnNYRAQwXtQ==
+  dependencies:
+    "@intlify/message-compiler" "9.14.2"
+    "@intlify/shared" "9.14.2"
+
+"@intlify/message-compiler@9.14.2":
+  version "9.14.2"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.14.2.tgz#7217842ea1875d80bbf0f708e9b3ef5ad7c57a03"
+  integrity sha512-YsKKuV4Qv4wrLNsvgWbTf0E40uRv+Qiw1BeLQ0LAxifQuhiMe+hfTIzOMdWj/ZpnTDj4RSZtkXjJM7JDiiB5LQ==
+  dependencies:
+    "@intlify/shared" "9.14.2"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@9.14.2":
+  version "9.14.2"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.14.2.tgz#f7dceea32db44c9253e3f965745a42a5cb3a1883"
+  integrity sha512-uRAHAxYPeF+G5DBIboKpPgC/Waecd4Jz8ihtkpJQD5ycb5PwXp0k/+hBGl5dAjwF7w+l74kz/PKA8r8OK//RUw==
+
 "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
@@ -273,6 +294,11 @@
     "@vue/compiler-dom" "3.4.9"
     "@vue/shared" "3.4.9"
 
+"@vue/devtools-api@^6.5.0":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/eslint-config-prettier@^8.0.0":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-prettier/-/eslint-config-prettier-8.0.0.tgz#de5cb77ed483b43683d17a788808a0fa4e7bd07e"
@@ -384,6 +410,11 @@ bootstrap-icons@^1.10.5:
   resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz#03f9cb754ec005c52f9ee616e2e84a82cab3084b"
   integrity sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==
 
+bootstrap@5.2:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
+  integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
+
 bootstrap@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.2.tgz#97226583f27aae93b2b28ab23f4c114757ff16ae"
@@ -1196,6 +1227,15 @@ vue-eslint-parser@^9.4.0:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-i18n@9:
+  version "9.14.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.14.2.tgz#e7f657664fcb3ccf99ecea684fc56e0f8e5335ce"
+  integrity sha512-JK9Pm80OqssGJU2Y6F7DcM8RFHqVG4WkuCqOZTVsXkEzZME7ABejAUqUdA931zEBedc4thBgSUWxeQh4uocJAQ==
+  dependencies:
+    "@intlify/core-base" "9.14.2"
+    "@intlify/shared" "9.14.2"
+    "@vue/devtools-api" "^6.5.0"
+
 vue@^3.3.4:
   version "3.4.9"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.9.tgz#54f3c7838fda2d8bd053d54ed214ec833aacd434"