@myissue/vue-website-page-builder 3.2.85 → 3.2.90

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 (58) hide show
  1. package/README.md +116 -16
  2. package/dist/vue-website-page-builder.css +1 -1
  3. package/dist/vue-website-page-builder.js +9217 -9022
  4. package/dist/vue-website-page-builder.umd.cjs +38 -38
  5. package/package.json +2 -2
  6. package/src/Components/Homepage/Footer.vue +9 -7
  7. package/src/Components/Homepage/Navbar.vue +6 -4
  8. package/src/Components/Layouts/FullWidthElement.vue +6 -6
  9. package/src/Components/Modals/BuilderComponents.vue +12 -6
  10. package/src/Components/Modals/DynamicModalBuilder.vue +39 -47
  11. package/src/Components/Modals/MediaLibraryModal.vue +2 -2
  12. package/src/Components/Modals/ModalBuilder.vue +23 -19
  13. package/src/Components/PageBuilder/DefaultComponents/DefaultBuilderComponents.vue +29 -17
  14. package/src/Components/PageBuilder/DefaultComponents/DefaultMediaLibraryComponent.vue +2 -2
  15. package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +22 -20
  16. package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +17 -17
  17. package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +28 -26
  18. package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +13 -11
  19. package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +5 -5
  20. package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue +4 -4
  21. package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +22 -19
  22. package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +11 -11
  23. package/src/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue +4 -4
  24. package/src/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue +74 -66
  25. package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +26 -21
  26. package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +26 -21
  27. package/src/Components/PageBuilder/EditorMenu/Editables/Margin.vue +101 -0
  28. package/src/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue +2 -3
  29. package/src/Components/PageBuilder/EditorMenu/Editables/{PaddingPlusMargin.vue → Padding.vue} +8 -41
  30. package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +22 -20
  31. package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue +63 -58
  32. package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue +7 -4
  33. package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +24 -19
  34. package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue +132 -98
  35. package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +216 -146
  36. package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +14 -14
  37. package/src/Components/TipTap/TipTap.vue +4 -4
  38. package/src/Components/TipTap/TipTapInput.vue +39 -33
  39. package/src/DemoComponents/DemoBuilderComponents.vue +1 -1
  40. package/src/DemoComponents/DemoUnsplash.vue +79 -56
  41. package/src/DemoComponents/HomeSection.vue +20 -16
  42. package/src/PageBuilder/PageBuilder.vue +62 -57
  43. package/src/PageBuilder/Preview.vue +4 -20
  44. package/src/composables/PageBuilderClass.ts +66 -120
  45. package/src/css/app.css +161 -448
  46. package/src/css/dev-global.css +137 -0
  47. package/src/main.ts +1 -0
  48. package/src/tailwind-safelist.html +1 -1
  49. package/src/utils/builder/tailwaind-colors.ts +488 -488
  50. package/src/utils/builder/tailwind-border-radius.ts +40 -40
  51. package/src/utils/builder/tailwind-border-style-width-color.ts +231 -231
  52. package/src/utils/builder/tailwind-font-sizes.ts +56 -57
  53. package/src/utils/builder/tailwind-font-styles.ts +44 -11
  54. package/src/utils/builder/tailwind-opacities.ts +30 -30
  55. package/src/utils/builder/tailwind-padding-margin.ts +136 -136
  56. package/dist/components.json +0 -36
  57. package/src/Components/Loaders/FullScreenSpinner.vue +0 -9
  58. package/src/Components/Loaders/SmallUniversalSpinner.vue +0 -26
@@ -6,70 +6,69 @@ interface TailwindFontSizes {
6
6
  }
7
7
 
8
8
  const tailwindFontSizes: TailwindFontSizes = {
9
- // text-xs sm:text-2xl md:text-4xl lg:text-8xl
10
9
  fontBase: [
11
- 'base:none',
12
- 'text-xs',
13
- 'text-sm',
14
- 'text-base',
15
- 'text-lg',
16
- 'text-xl',
17
- 'text-2xl',
18
- 'text-3xl',
19
- 'text-4xl',
20
- 'text-5xl',
21
- 'text-6xl',
22
- 'text-7xl',
23
- 'text-8xl',
24
- 'text-9xl',
10
+ 'none',
11
+ 'pbx-text-xs',
12
+ 'pbx-text-sm',
13
+ 'pbx-text-base',
14
+ 'pbx-text-lg',
15
+ 'pbx-text-xl',
16
+ 'pbx-text-2xl',
17
+ 'pbx-text-3xl',
18
+ 'pbx-text-4xl',
19
+ 'pbx-text-5xl',
20
+ 'pbx-text-6xl',
21
+ 'pbx-text-7xl',
22
+ 'pbx-text-8xl',
23
+ 'pbx-text-9xl',
25
24
  ],
26
25
  fontDesktop: [
27
- 'lg:none',
28
- 'lg:text-xs',
29
- 'lg:text-sm',
30
- 'lg:text-base',
31
- 'lg:text-lg',
32
- 'lg:text-xl',
33
- 'lg:text-2xl',
34
- 'lg:text-3xl',
35
- 'lg:text-4xl',
36
- 'lg:text-5xl',
37
- 'lg:text-6xl',
38
- 'lg:text-7xl',
39
- 'lg:text-8xl',
40
- 'lg:text-9xl',
26
+ 'none',
27
+ 'lg:pbx-text-xs',
28
+ 'lg:pbx-text-sm',
29
+ 'lg:pbx-text-base',
30
+ 'lg:pbx-text-lg',
31
+ 'lg:pbx-text-xl',
32
+ 'lg:pbx-text-2xl',
33
+ 'lg:pbx-text-3xl',
34
+ 'lg:pbx-text-4xl',
35
+ 'lg:pbx-text-5xl',
36
+ 'lg:pbx-text-6xl',
37
+ 'lg:pbx-text-7xl',
38
+ 'lg:pbx-text-8xl',
39
+ 'lg:pbx-text-9xl',
41
40
  ],
42
41
  fontTablet: [
43
- 'md:none',
44
- 'md:text-xs',
45
- 'md:text-sm',
46
- 'md:text-base',
47
- 'md:text-lg',
48
- 'md:text-xl',
49
- 'md:text-2xl',
50
- 'md:text-3xl',
51
- 'md:text-4xl',
52
- 'md:text-5xl',
53
- 'md:text-6xl',
54
- 'md:text-7xl',
55
- 'md:text-8xl',
56
- 'md:text-9xl',
42
+ 'none',
43
+ 'md:pbx-text-xs',
44
+ 'md:pbx-text-sm',
45
+ 'md:pbx-text-base',
46
+ 'md:pbx-text-lg',
47
+ 'md:pbx-text-xl',
48
+ 'md:pbx-text-2xl',
49
+ 'md:pbx-text-3xl',
50
+ 'md:pbx-text-4xl',
51
+ 'md:pbx-text-5xl',
52
+ 'md:pbx-text-6xl',
53
+ 'md:pbx-text-7xl',
54
+ 'md:pbx-text-8xl',
55
+ 'md:pbx-text-9xl',
57
56
  ],
58
57
  fontMobile: [
59
- 'sm:none',
60
- 'sm:text-xs',
61
- 'sm:text-sm',
62
- 'sm:text-base',
63
- 'sm:text-lg',
64
- 'sm:text-xl',
65
- 'sm:text-2xl',
66
- 'sm:text-3xl',
67
- 'sm:text-4xl',
68
- 'sm:text-5xl',
69
- 'sm:text-6xl',
70
- 'sm:text-7xl',
71
- 'sm:text-8xl',
72
- 'sm:text-9xl',
58
+ 'none',
59
+ 'sm:pbx-text-xs',
60
+ 'sm:pbx-text-sm',
61
+ 'sm:pbx-text-base',
62
+ 'sm:pbx-text-lg',
63
+ 'sm:pbx-text-xl',
64
+ 'sm:pbx-text-2xl',
65
+ 'sm:pbx-text-3xl',
66
+ 'sm:pbx-text-4xl',
67
+ 'sm:pbx-text-5xl',
68
+ 'sm:pbx-text-6xl',
69
+ 'sm:pbx-text-7xl',
70
+ 'sm:pbx-text-8xl',
71
+ 'sm:pbx-text-9xl',
73
72
  ],
74
73
  }
75
74
 
@@ -7,18 +7,51 @@ interface TailwindFontStyles {
7
7
  const tailwindFontStyles: TailwindFontStyles = {
8
8
  fontWeight: [
9
9
  'none',
10
- 'font-thin',
11
- 'font-extralight',
12
- 'font-light',
13
- 'font-normal',
14
- 'font-medium',
15
- 'font-medium',
16
- 'font-bold',
17
- 'font-extrabold',
18
- 'font-black',
10
+ 'pbx-font-thin',
11
+ 'pbx-font-extralight',
12
+ 'pbx-font-light',
13
+ 'pbx-font-normal',
14
+ 'pbx-font-medium',
15
+ 'pbx-font-medium',
16
+ 'pbx-font-bold',
17
+ 'pbx-font-extrabold',
18
+ 'pbx-font-black',
19
19
  ],
20
- fontFamily: ['none', 'font-sans', 'font-serif', 'font-mono'],
21
- fontStyle: ['none', 'italic', 'non-italic'],
20
+ fontFamily: [
21
+ 'none',
22
+ 'pbx-font-sans',
23
+ 'pbx-font-serif',
24
+ 'pbx-font-mono',
25
+ 'pbx-font-arial',
26
+ 'pbx-font-helvetica',
27
+ 'pbx-font-georgia',
28
+ 'pbx-font-times',
29
+ 'pbx-font-times-new-roman',
30
+ 'pbx-font-courier',
31
+ 'pbx-font-courier-new',
32
+ 'pbx-font-verdana',
33
+ 'pbx-font-tahoma',
34
+ 'pbx-font-trebuchet',
35
+ 'pbx-font-garamond',
36
+ 'pbx-font-palantino',
37
+ 'pbx-font-bookman',
38
+ 'pbx-font-comic-sans',
39
+ 'pbx-font-impact',
40
+ 'pbx-font-lucida',
41
+ 'pbx-font-lucida-console',
42
+ 'pbx-font-lucida-sans',
43
+ 'pbx-font-candara',
44
+ 'pbx-font-optima',
45
+ 'pbx-font-avenir',
46
+ 'pbx-font-futura',
47
+ 'pbx-font-calibri',
48
+ 'pbx-font-cambria',
49
+ 'pbx-font-didot',
50
+ 'pbx-font-franklin-gothic',
51
+ 'pbx-font-rockwell',
52
+ 'pbx-font-baskerville',
53
+ ],
54
+ fontStyle: ['none', 'pbx-italic', 'pbx-non-italic'],
22
55
  }
23
56
 
24
57
  export default tailwindFontStyles
@@ -6,39 +6,39 @@ interface TailwindOpacities {
6
6
  const tailwindOpacities: TailwindOpacities = {
7
7
  opacities: [
8
8
  'none',
9
- 'opacity-0',
10
- 'opacity-5',
11
- 'opacity-10',
12
- 'opacity-20',
13
- 'opacity-25',
14
- 'opacity-30',
15
- 'opacity-40',
16
- 'opacity-50',
17
- 'opacity-60',
18
- 'opacity-70',
19
- 'opacity-75',
20
- 'opacity-80',
21
- 'opacity-90',
22
- 'opacity-95',
23
- 'opacity-100',
9
+ 'pbx-opacity-0',
10
+ 'pbx-opacity-5',
11
+ 'pbx-opacity-10',
12
+ 'pbx-opacity-20',
13
+ 'pbx-opacity-25',
14
+ 'pbx-opacity-30',
15
+ 'pbx-opacity-40',
16
+ 'pbx-opacity-50',
17
+ 'pbx-opacity-60',
18
+ 'pbx-opacity-70',
19
+ 'pbx-opacity-75',
20
+ 'pbx-opacity-80',
21
+ 'pbx-opacity-90',
22
+ 'pbx-opacity-95',
23
+ 'pbx-opacity-100',
24
24
  ],
25
25
  backgroundOpacities: [
26
26
  'none',
27
- 'bg-opacity-0',
28
- 'bg-opacity-5',
29
- 'bg-opacity-10',
30
- 'bg-opacity-20',
31
- 'bg-opacity-25',
32
- 'bg-opacity-30',
33
- 'bg-opacity-40',
34
- 'bg-opacity-50',
35
- 'bg-opacity-60',
36
- 'bg-opacity-70',
37
- 'bg-opacity-75',
38
- 'bg-opacity-80',
39
- 'bg-opacity-90',
40
- 'bg-opacity-95',
41
- 'bg-opacity-100',
27
+ 'pbx-bg-opacity-0',
28
+ 'pbx-bg-opacity-5',
29
+ 'pbx-bg-opacity-10',
30
+ 'pbx-bg-opacity-20',
31
+ 'pbx-bg-opacity-25',
32
+ 'pbx-bg-opacity-30',
33
+ 'pbx-bg-opacity-40',
34
+ 'pbx-bg-opacity-50',
35
+ 'pbx-bg-opacity-60',
36
+ 'pbx-bg-opacity-70',
37
+ 'pbx-bg-opacity-75',
38
+ 'pbx-bg-opacity-80',
39
+ 'pbx-bg-opacity-90',
40
+ 'pbx-bg-opacity-95',
41
+ 'pbx-bg-opacity-100',
42
42
  ],
43
43
  }
44
44
 
@@ -8,151 +8,151 @@ interface TailwindPaddingMargin {
8
8
  const tailwindPaddingAndMargin: TailwindPaddingMargin = {
9
9
  verticalPadding: [
10
10
  'none',
11
- 'py-0',
12
- 'py-0.5',
13
- 'py-1',
14
- 'py-1.5',
15
- 'py-2',
16
- 'py-2.5',
17
- 'py-3',
18
- 'py-3.5',
19
- 'py-4',
20
- 'py-5',
21
- 'py-6',
22
- 'py-7',
23
- 'py-8',
24
- 'py-9',
25
- 'py-10',
26
- 'py-11',
27
- 'py-12',
28
- 'py-14',
29
- 'py-16',
30
- 'py-20',
31
- 'py-24',
32
- 'py-28',
33
- 'py-32',
34
- 'py-36',
35
- 'py-40',
36
- 'py-44',
37
- 'py-48',
38
- 'py-52',
39
- 'py-56',
40
- 'py-60',
41
- 'py-64',
42
- 'py-72',
43
- 'py-80',
44
- 'py-96',
11
+ 'pbx-py-0',
12
+ 'pbx-py-0.5',
13
+ 'pbx-py-1',
14
+ 'pbx-py-1.5',
15
+ 'pbx-py-2',
16
+ 'pbx-py-2.5',
17
+ 'pbx-py-3',
18
+ 'pbx-py-3.5',
19
+ 'pbx-py-4',
20
+ 'pbx-py-5',
21
+ 'pbx-py-6',
22
+ 'pbx-py-7',
23
+ 'pbx-py-8',
24
+ 'pbx-py-9',
25
+ 'pbx-py-10',
26
+ 'pbx-py-11',
27
+ 'pbx-py-12',
28
+ 'pbx-py-14',
29
+ 'pbx-py-16',
30
+ 'pbx-py-20',
31
+ 'pbx-py-24',
32
+ 'pbx-py-28',
33
+ 'pbx-py-32',
34
+ 'pbx-py-36',
35
+ 'pbx-py-40',
36
+ 'pbx-py-44',
37
+ 'pbx-py-48',
38
+ 'pbx-py-52',
39
+ 'pbx-py-56',
40
+ 'pbx-py-60',
41
+ 'pbx-py-64',
42
+ 'pbx-py-72',
43
+ 'pbx-py-80',
44
+ 'pbx-py-96',
45
45
  ],
46
46
  horizontalPadding: [
47
47
  'none',
48
- 'px-0',
49
- 'px-0.5',
50
- 'px-1',
51
- 'px-1.5',
52
- 'px-2',
53
- 'px-2.5',
54
- 'px-3',
55
- 'px-3.5',
56
- 'px-4',
57
- 'px-5',
58
- 'px-6',
59
- 'px-7',
60
- 'px-8',
61
- 'px-9',
62
- 'px-10',
63
- 'px-11',
64
- 'px-12',
65
- 'px-14',
66
- 'px-16',
67
- 'px-20',
68
- 'px-24',
69
- 'px-28',
70
- 'px-32',
71
- 'px-36',
72
- 'px-40',
73
- 'px-44',
74
- 'px-48',
75
- 'px-52',
76
- 'px-56',
77
- 'px-60',
78
- 'px-64',
79
- 'px-72',
80
- 'px-80',
81
- 'px-96',
48
+ 'pbx-px-0',
49
+ 'pbx-px-0.5',
50
+ 'pbx-px-1',
51
+ 'pbx-px-1.5',
52
+ 'pbx-px-2',
53
+ 'pbx-px-2.5',
54
+ 'pbx-px-3',
55
+ 'pbx-px-3.5',
56
+ 'pbx-px-4',
57
+ 'pbx-px-5',
58
+ 'pbx-px-6',
59
+ 'pbx-px-7',
60
+ 'pbx-px-8',
61
+ 'pbx-px-9',
62
+ 'pbx-px-10',
63
+ 'pbx-px-11',
64
+ 'pbx-px-12',
65
+ 'pbx-px-14',
66
+ 'pbx-px-16',
67
+ 'pbx-px-20',
68
+ 'pbx-px-24',
69
+ 'pbx-px-28',
70
+ 'pbx-px-32',
71
+ 'pbx-px-36',
72
+ 'pbx-px-40',
73
+ 'pbx-px-44',
74
+ 'pbx-px-48',
75
+ 'pbx-px-52',
76
+ 'pbx-px-56',
77
+ 'pbx-px-60',
78
+ 'pbx-px-64',
79
+ 'pbx-px-72',
80
+ 'pbx-px-80',
81
+ 'pbx-px-96',
82
82
  ],
83
83
  verticalMargin: [
84
84
  'none',
85
- 'my-0',
86
- 'my-0.5',
87
- 'my-1',
88
- 'my-1.5',
89
- 'my-2',
90
- 'my-2.5',
91
- 'my-3',
92
- 'my-3.5',
93
- 'my-4',
94
- 'my-5',
95
- 'my-6',
96
- 'my-7',
97
- 'my-8',
98
- 'my-9',
99
- 'my-10',
100
- 'my-11',
101
- 'my-12',
102
- 'my-14',
103
- 'my-16',
104
- 'my-20',
105
- 'my-24',
106
- 'my-28',
107
- 'my-32',
108
- 'my-36',
109
- 'my-40',
110
- 'my-44',
111
- 'my-48',
112
- 'my-52',
113
- 'my-56',
114
- 'my-60',
115
- 'my-64',
116
- 'my-72',
117
- 'my-80',
118
- 'my-96',
85
+ 'pbx-my-0',
86
+ 'pbx-my-0.5',
87
+ 'pbx-my-1',
88
+ 'pbx-my-1.5',
89
+ 'pbx-my-2',
90
+ 'pbx-my-2.5',
91
+ 'pbx-my-3',
92
+ 'pbx-my-3.5',
93
+ 'pbx-my-4',
94
+ 'pbx-my-5',
95
+ 'pbx-my-6',
96
+ 'pbx-my-7',
97
+ 'pbx-my-8',
98
+ 'pbx-my-9',
99
+ 'pbx-my-10',
100
+ 'pbx-my-11',
101
+ 'pbx-my-12',
102
+ 'pbx-my-14',
103
+ 'pbx-my-16',
104
+ 'pbx-my-20',
105
+ 'pbx-my-24',
106
+ 'pbx-my-28',
107
+ 'pbx-my-32',
108
+ 'pbx-my-36',
109
+ 'pbx-my-40',
110
+ 'pbx-my-44',
111
+ 'pbx-my-48',
112
+ 'pbx-my-52',
113
+ 'pbx-my-56',
114
+ 'pbx-my-60',
115
+ 'pbx-my-64',
116
+ 'pbx-my-72',
117
+ 'pbx-my-80',
118
+ 'pbx-my-96',
119
119
  ],
120
120
  horizontalMargin: [
121
121
  'none',
122
- 'mx-0',
123
- 'mx-0.5',
124
- 'mx-1',
125
- 'mx-1.5',
126
- 'mx-2',
127
- 'mx-2.5',
128
- 'mx-3',
129
- 'mx-3.5',
130
- 'mx-4',
131
- 'mx-5',
132
- 'mx-6',
133
- 'mx-7',
134
- 'mx-8',
135
- 'mx-9',
136
- 'mx-10',
137
- 'mx-11',
138
- 'mx-12',
139
- 'mx-14',
140
- 'mx-16',
141
- 'mx-20',
142
- 'mx-24',
143
- 'mx-28',
144
- 'mx-32',
145
- 'mx-36',
146
- 'mx-40',
147
- 'mx-44',
148
- 'mx-48',
149
- 'mx-52',
150
- 'mx-56',
151
- 'mx-60',
152
- 'mx-64',
153
- 'mx-72',
154
- 'mx-80',
155
- 'mx-96',
122
+ 'pbx-mx-0',
123
+ 'pbx-mx-0.5',
124
+ 'pbx-mx-1',
125
+ 'pbx-mx-1.5',
126
+ 'pbx-mx-2',
127
+ 'pbx-mx-2.5',
128
+ 'pbx-mx-3',
129
+ 'pbx-mx-3.5',
130
+ 'pbx-mx-4',
131
+ 'pbx-mx-5',
132
+ 'pbx-mx-6',
133
+ 'pbx-mx-7',
134
+ 'pbx-mx-8',
135
+ 'pbx-mx-9',
136
+ 'pbx-mx-10',
137
+ 'pbx-mx-11',
138
+ 'pbx-mx-12',
139
+ 'pbx-mx-14',
140
+ 'pbx-mx-16',
141
+ 'pbx-mx-20',
142
+ 'pbx-mx-24',
143
+ 'pbx-mx-28',
144
+ 'pbx-mx-32',
145
+ 'pbx-mx-36',
146
+ 'pbx-mx-40',
147
+ 'pbx-mx-44',
148
+ 'pbx-mx-48',
149
+ 'pbx-mx-52',
150
+ 'pbx-mx-56',
151
+ 'pbx-mx-60',
152
+ 'pbx-mx-64',
153
+ 'pbx-mx-72',
154
+ 'pbx-mx-80',
155
+ 'pbx-mx-96',
156
156
  ],
157
157
  }
158
158
 
@@ -1,36 +0,0 @@
1
- {
2
- "components": {
3
- "data": [
4
- {
5
- "title": "Single Image",
6
- "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"></div></div></div></div>\n</section>",
7
- "cover_image": "/page-builder/image.png"
8
- },
9
- {
10
- "title": "2 vertical images",
11
- "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> </div> </div> </div>\n</section>",
12
- "cover_image": "/page-builder/two-vertical-images.png"
13
- },
14
- {
15
- "title": "2 images",
16
- "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"></div></div> </div></div>\n</section>",
17
- "cover_image": "/page-builder/3-images.png"
18
- },
19
- {
20
- "title": "3 images",
21
- "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"></div></div> </div></div>\n</section>",
22
- "cover_image": "/page-builder/2-images.png"
23
- },
24
- {
25
- "title": "6 Images Grid",
26
- "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\">\n<div class=\"mx-auto max-w-7xl\">\n<div class=\"grid grid-cols-2 md:grid-cols-3 myPrimaryGap\">\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n</div>\n</div>\n</div>\n</section>",
27
- "cover_image": "/page-builder/6-images.png"
28
- },
29
- {
30
- "title": "Two Images With Right Text Top",
31
- "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\">\n<div class=\"myPrimaryGap lg:flex lg:justify-center\"><div class=\"flex-1 py-2\">\n<div class=\"grid myPrimaryGap grid-cols-1 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> </div> </div>\n\n<div class=\"flex-1 py-2\"> <div class=\"break-words py-2\"><p><strong>Title</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div> \n</div></div></div>\n</section>",
32
- "cover_image": "/page-builder/2-images-text-top.png"
33
- }
34
- ]
35
- }
36
- }
@@ -1,9 +0,0 @@
1
- <template>
2
- <div class="bg-white flex justify-center items-center h-screen w-screen fixed inset-0 z-40">
3
- <div class="absolute top-1/3">
4
- <div
5
- class="inline-block h-10 w-10 animate-spin rounded-full border-4 border-solid border-current border-r-transparent"
6
- ></div>
7
- </div>
8
- </div>
9
- </template>
@@ -1,26 +0,0 @@
1
- <script setup>
2
- defineProps({
3
- width: {
4
- required: false,
5
- },
6
- height: {
7
- required: false,
8
- },
9
- border: {
10
- required: false,
11
- },
12
- });
13
- </script>
14
-
15
- <template>
16
- <div class="flex items-center justify-center min-h-80 max-h-80">
17
- <div
18
- class="inline-block animate-spin rounded-full border-solid border-current border-r-transparent"
19
- :class="[
20
- width ? width : 'w-4',
21
- height ? height : 'h-4',
22
- border ? border : 'border-2',
23
- ]"
24
- ></div>
25
- </div>
26
- </template>