@myissue/vue-website-page-builder 3.3.11 → 3.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +134 -135
  2. package/dist/vue-website-page-builder.css +1 -1
  3. package/dist/vue-website-page-builder.js +4297 -4217
  4. package/dist/vue-website-page-builder.umd.cjs +37 -37
  5. package/package.json +1 -1
  6. package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +4 -4
  7. package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue +2 -2
  8. package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +2 -2
  9. package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +4 -4
  10. package/src/DemoComponents/HomeSection.vue +3 -2
  11. package/src/PageBuilder/PageBuilder.vue +3 -3
  12. package/src/composables/PageBuilderService.ts +322 -201
  13. package/src/helpers/isEmptyObject.ts +1 -1
  14. package/src/tailwind-safelist.html +1 -1
  15. package/src/types/index.ts +13 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@myissue/vue-website-page-builder",
3
- "version": "v3.3.11",
3
+ "version": "v3.3.12",
4
4
  "description": "Vue 3 page builder component with drag & drop functionality.",
5
5
  "type": "module",
6
6
  "main": "./dist/vue-website-page-builder.umd.cjs",
package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue CHANGED
@@ -19,7 +19,7 @@ const secondModalButtonFunctionDynamicModalBuilder = ref(null)
19
19
  const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
20
20
 
21
21
  // remove component
22
- const deleteSelectedComponent = function () {
22
+ const handleDelete = function () {
23
23
  showModalDeleteComponent.value = true
24
24
  typeModal.value = 'delete'
25
25
  gridColumnModal.value = 2
@@ -35,8 +35,8 @@ const deleteSelectedComponent = function () {
35
35
  }
36
36
  //
37
37
  // handle click
38
- thirdModalButtonFunctionDynamicModalBuilder.value = function () {
39
- pageBuilderService.deleteSelectedComponent()
38
+ thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
39
+ await pageBuilderService.deleteComponentFromDOM()
40
40
 
41
41
  showModalDeleteComponent.value = false
42
42
  }
@@ -64,7 +64,7 @@ const deleteSelectedComponent = function () {
64
64
  <div class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-myPrimaryGap">
65
65
  <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
66
66
  <div
67
- @click="deleteSelectedComponent()"
67
+ @click="handleDelete()"
68
68
  class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryErrorColor hover:pbx-text-white pbx-text-myPrimaryErrorColor"
69
69
  >
70
70
  <span class="material-symbols-outlined"> delete_forever </span>
package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue CHANGED
@@ -20,7 +20,7 @@ const getRestoredElement = computed(() => {
20
20
  <div class="pbx-my-2">
21
21
  <button
22
22
  v-if="getRestoredElement !== null"
23
- @click="pageBuilderService.handleRestoreElement"
23
+ @click="pageBuilderService.restoreDeletedElementToDOM"
24
24
  type="button"
25
25
  class="pbx-myPrimaryButton pbx-gap-2 pbx-items-center pbx-w-full"
26
26
  >
@@ -29,7 +29,7 @@ const getRestoredElement = computed(() => {
29
29
  </button>
30
30
  <button
31
31
  v-if="getRestoredElement === null"
32
- @click="pageBuilderService.handleDeleteElement"
32
+ @click="pageBuilderService.deleteElementFromDOM"
33
33
  type="button"
34
34
  class="pbx-myPrimaryDeleteButton pbx-gap-2 pbx-items-center pbx-w-full"
35
35
  >
package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue CHANGED
@@ -29,7 +29,7 @@ const getRestoredElement = computed(() => {
29
29
  <label class="pbx-myPrimaryInputLabel"> Restore the last deleted HTML element.</label>
30
30
  <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
31
31
  <button
32
- @click="pageBuilderService.handleRestoreElement"
32
+ @click="pageBuilderService.restoreDeletedElementToDOM"
33
33
  type="button"
34
34
  class="pbx-myPrimaryButton pbx-w-full pbx-mt-4"
35
35
  >
@@ -48,7 +48,7 @@ const getRestoredElement = computed(() => {
48
48
 
49
49
  <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
50
50
  <button
51
- @click="pageBuilderService.handleDeleteElement"
51
+ @click="pageBuilderService.deleteElementFromDOM"
52
52
  type="button"
53
53
  class="pbx-myPrimaryDeleteButton pbx-w-full pbx-mt-4"
54
54
  >
package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue CHANGED
@@ -35,7 +35,7 @@ const firstModalButtonFunctionDynamicModalBuilder = ref(null)
35
35
  const secondModalButtonFunctionDynamicModalBuilder = ref(null)
36
36
  const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
37
37
 
38
- const deleteAllComponents = function () {
38
+ const deleteAllComponentsFromDOM = function () {
39
39
  showModalDeleteAllComponents.value = true
40
40
  typeModal.value = 'delete'
41
41
  gridColumnModal.value = 2
@@ -53,9 +53,9 @@ const deleteAllComponents = function () {
53
53
  // handle click
54
54
  thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
55
55
  isDeletingLayout.value = true
56
- pageBuilderService.deleteAllComponents()
56
+ pageBuilderService.deleteAllComponentsFromDOM()
57
57
  await pageBuilderService.clearHtmlSelection()
58
- await pageBuilderService.removeItemComponentsLocalStorage()
58
+ await pageBuilderService.removeCurrentComponentsFromLocalStorage()
59
59
 
60
60
  await delay(500)
61
61
  showModalDeleteAllComponents.value = false
@@ -188,7 +188,7 @@ const openHTMLSettings = function () {
188
188
 
189
189
  <!-- Delete Layout Start -->
190
190
  <button
191
- @click="deleteAllComponents"
191
+ @click="deleteAllComponentsFromDOM"
192
192
  class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-border-none pbx-m-0 pbx-bg-myPrimaryErrorColor pbx-text-white"
193
193
  type="button"
194
194
  >
package/src/DemoComponents/HomeSection.vue CHANGED
@@ -82,8 +82,9 @@ const configPageBuilder = {
82
82
  } as const
83
83
 
84
84
  onMounted(async () => {
85
- await pageBuilderService.startBuilder(configPageBuilder)
86
- await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
85
+ const error = await pageBuilderService.startBuilder(configPageBuilder)
86
+ console.log('show returned page builder error:', error)
87
+ // await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
87
88
  // await pageBuilderService.mountComponentsToDOM(JSON.stringify(oldhtmlfromdb))
88
89
  // await pageBuilderService.mountComponentsToDOM(rawHTML)
89
90
  })
package/src/PageBuilder/PageBuilder.vue CHANGED
@@ -260,7 +260,8 @@ const ensureBuilderInitialized = function () {
260
260
  }
261
261
 
262
262
  onMounted(async () => {
263
- await pageBuilderService.tryMountPendingData()
263
+ await pageBuilderService.ensureBuilderInitializedForCreate()
264
+ await pageBuilderService.ensureBuilderInitializedForUpdate()
264
265
 
265
266
  // Check if Builder started
266
267
  await delay(10000)
@@ -274,7 +275,6 @@ onMounted(async () => {
274
275
 
275
276
  <template>
276
277
  <div
277
- id="builder-container"
278
278
  class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-scroll"
279
279
  >
280
280
  <div id="pagebuilder-top-area" class="lg:pbx-px-4 pbx-pt-2 pbx-pb-4 pbx-mx-4 pbx-mb-4 pbx-mt-2">
@@ -620,7 +620,7 @@ onMounted(async () => {
620
620
  <button
621
621
  @click="
622
622
  () => {
623
- pageBuilderStateStore.setComponentArrayAddMethod('push')
623
+ pageBuilderStateStore.setComponentArrayAddMethod('unshift')
624
624
  handleAddComponent()
625
625
  }
626
626
  "