@useinsider/guido 1.0.0-beta.6ecc044 → 1.0.0-beta.6f8286c

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 (51) hide show
  1. package/README.md +6 -1
  2. package/dist/components/Guido.vue.js +8 -8
  3. package/dist/components/Guido.vue2.js +22 -26
  4. package/dist/components/organisms/header/LeftSlot.vue.d.ts +1 -1
  5. package/dist/components/organisms/header/LeftSlot.vue.js +8 -8
  6. package/dist/components/organisms/header/LeftSlot.vue2.js +5 -3
  7. package/dist/components/organisms/header/MiddleSlot.vue.js +7 -7
  8. package/dist/components/organisms/header/MiddleSlot.vue2.js +6 -4
  9. package/dist/components/organisms/header/RightSlot.vue.d.ts +1 -1
  10. package/dist/components/organisms/header/RightSlot.vue.js +7 -10
  11. package/dist/components/organisms/header/RightSlot.vue2.js +14 -19
  12. package/dist/components/organisms/header/version-history/RestoreButton.vue.d.ts +2 -0
  13. package/dist/components/organisms/header/version-history/RestoreButton.vue.js +19 -0
  14. package/dist/components/organisms/header/version-history/RestoreButton.vue2.js +14 -0
  15. package/dist/components/organisms/header/version-history/VersionHistory.vue.d.ts +13 -1
  16. package/dist/components/organisms/header/version-history/VersionHistory.vue.js +7 -7
  17. package/dist/components/organisms/header/version-history/VersionHistory.vue2.js +13 -10
  18. package/dist/composables/useCustomInterfaceAppearance.js +45 -9
  19. package/dist/composables/useStripo.js +13 -8
  20. package/dist/enums/displayConditions.d.ts +2 -0
  21. package/dist/enums/displayConditions.js +80 -0
  22. package/dist/guido.css +1 -1
  23. package/dist/static/styles/base.css.js +11 -0
  24. package/dist/static/styles/components/alert-message.css.js +39 -0
  25. package/dist/static/styles/components/amp-block.css.js +18 -0
  26. package/dist/static/styles/components/base-input.css.js +47 -0
  27. package/dist/static/styles/components/button-group.css.js +54 -0
  28. package/dist/static/styles/components/button.css.js +106 -0
  29. package/dist/static/styles/components/combobox.css.js +49 -0
  30. package/dist/static/styles/components/counter.css.js +42 -0
  31. package/dist/static/styles/components/dropdown-menu.css.js +52 -0
  32. package/dist/static/styles/components/narrow-panel.css.js +38 -0
  33. package/dist/static/styles/components/switcher.css.js +11 -0
  34. package/dist/static/styles/components/tabs.css.js +97 -0
  35. package/dist/static/styles/components/tools.css.js +23 -0
  36. package/dist/static/styles/components/version-history.css.js +30 -0
  37. package/dist/static/styles/components/wide-panel.css.js +135 -0
  38. package/dist/static/styles/variables.css.js +23 -0
  39. package/dist/stores/editor.d.ts +0 -1
  40. package/dist/stores/editor.js +1 -2
  41. package/package.json +5 -5
  42. package/dist/components/organisms/base/ModalWrapper.vue.d.ts +0 -72
  43. package/dist/components/organisms/base/ModalWrapper.vue.js +0 -19
  44. package/dist/components/organisms/base/ModalWrapper.vue2.js +0 -43
  45. package/dist/components/organisms/save-template/SaveTemplateModal.vue.d.ts +0 -20
  46. package/dist/components/organisms/save-template/SaveTemplateModal.vue.js +0 -19
  47. package/dist/components/organisms/save-template/SaveTemplateModal.vue2.js +0 -66
  48. package/dist/composables/useTemplateValidation.d.ts +0 -13
  49. package/dist/composables/useTemplateValidation.js +0 -57
  50. package/dist/mock/api/template-library.d.ts +0 -2
  51. package/dist/static/editor.css.js +0 -232
@@ -0,0 +1,39 @@
1
+ const n = `.alert-message-wrapper {
2
+ box-shadow: none;
3
+ border: 1px solid var(--guido-color-gray-300);
4
+ color: var(--guido-color-gray-600);
5
+ }
6
+
7
+ .alert-message-wrapper.info,
8
+ .alert-message-wrapper.loader {
9
+ background: var(--guido-color-background-onpage-message-info);
10
+ border-color: var(--guido-color-border-onpage-message-info);
11
+ color: inherit;
12
+ }
13
+
14
+ .alert-message-wrapper.info ue-icon-component.icon,
15
+ .alert-message-wrapper.loader ue-icon-component.icon {
16
+ color: var(--guido-color-border-onpage-message-info);
17
+ }
18
+
19
+ .alert-message-wrapper ue-button {
20
+ padding: 0;
21
+ }
22
+
23
+ .alert-message-wrapper .button {
24
+ border: none;
25
+ background: transparent;
26
+ color: var(--guido-color-primary-500);
27
+ padding: 0;
28
+ min-width: unset;
29
+ min-height: unset;
30
+ }
31
+
32
+ .alert-message-wrapper .button:hover:not(:disabled,.disabled) {
33
+ background-color: transparent;
34
+ text-decoration: underline;
35
+ }
36
+ `;
37
+ export {
38
+ n as default
39
+ };
@@ -0,0 +1,18 @@
1
+ const n = `.amp-input-list {
2
+ box-shadow: none;
3
+ border: 1px solid var(--guido-color-gray-300);
4
+ margin-bottom: 16px;
5
+ }
6
+
7
+ .amp-input-list:last-child {
8
+ margin-bottom: 0;
9
+ }
10
+
11
+ .amp-input-list.active,
12
+ .amp-input-list:hover {
13
+ background-color: var(--guido-color-neutral-100);
14
+ }
15
+ `;
16
+ export {
17
+ n as default
18
+ };
@@ -0,0 +1,47 @@
1
+ const n = `.base-input {
2
+ border: 1px solid var(--guido-color-gray-300);
3
+ border-radius: 4px;
4
+ background-color: var(--guido-color-gray-0);
5
+ align-items: center;
6
+ height: 40px;
7
+ max-height: 40px;
8
+ box-sizing: content-box;
9
+ outline: none;
10
+ resize: vertical;
11
+ padding: 8px;
12
+ font-size: 13px;
13
+ color: var(--guido-color-gray-800);
14
+ box-shadow: none !important;
15
+ box-sizing: border-box !important;
16
+ }
17
+
18
+ .base-input:hover:not(:disabled) {
19
+ background-color: var(--guido-color-gray-0);
20
+ border-color: var(--guido-color-primary-500);
21
+ }
22
+
23
+ .base-input:focus:not(:disabled),
24
+ .base-input.focused {
25
+ background-color: var(--guido-color-gray-0);
26
+ border-color: var(--guido-color-primary-500);
27
+ box-shadow: 0 0 0 3px var(--guido-color-primary-200) !important;
28
+ }
29
+
30
+ ue-contenteditable {
31
+ height: 40px;
32
+ overflow: unset;
33
+ }
34
+
35
+ ue-contenteditable .base-input {
36
+ line-height: 24px;
37
+ }
38
+
39
+ ue-icon-component.icon-button.icon-clear-input {
40
+ right: 2px;
41
+ top: 2px;
42
+ padding: 9px;
43
+ }
44
+ `;
45
+ export {
46
+ n as default
47
+ };
@@ -0,0 +1,54 @@
1
+ const o = `/* Radio Buttons and Check Buttons */
2
+
3
+ .button-group {
4
+ padding: 0;
5
+ column-gap: 0;
6
+ border-radius: 0;
7
+ background-color: transparent;
8
+ }
9
+
10
+ .button-group .button {
11
+ background-color: var(--guido-color-gray-0);
12
+ outline: none;
13
+ padding: 8px 12px;
14
+ border: 1px solid var(--guido-color-gray-300);
15
+ box-shadow: none;
16
+ height: 40px;
17
+ }
18
+
19
+ .button-group .button:hover:not(:disabled,.disabled) {
20
+ background-color: var(--guido-color-gray-1);
21
+ }
22
+
23
+ .button-group .button ue-icon-component.icon-button {
24
+ color: var(--guido-color-gray-800);
25
+ }
26
+
27
+ .button-group > div:first-of-type .button {
28
+ border-radius: 4px 0 0 4px;
29
+ }
30
+
31
+ .button-group > *:last-child .button {
32
+ border-radius: 0 4px 4px 0;
33
+ }
34
+
35
+ ue-check-buttons input:checked + .button,
36
+ ue-radio-buttons input:checked + .button {
37
+ background-color: var(--guido-color-primary-100);
38
+ color: var(--guido-color-primary-500);
39
+ border-color: var(--guido-color-primary-500);
40
+ }
41
+
42
+ ue-check-buttons input:checked + .button ue-icon-component.icon-button,
43
+ ue-radio-buttons input:checked + .button ue-icon-component.icon-button {
44
+ color: var(--guido-color-primary-500);
45
+ }
46
+
47
+ ue-check-buttons input:checked + label:hover:not(:disabled,.disabled),
48
+ ue-radio-buttons input:checked + label:hover:not(:disabled,.disabled) {
49
+ background-color: var(--guido-color-primary-100) !important;
50
+ }
51
+ `;
52
+ export {
53
+ o as default
54
+ };
@@ -0,0 +1,106 @@
1
+ const o = `.control-shadow-wrapper:has(.button) {
2
+ border-radius: 0;
3
+ box-shadow: none;
4
+ background-color: transparent;
5
+ padding: 0;
6
+ }
7
+
8
+ .button {
9
+ min-width: 40px;
10
+ min-height: 40px;
11
+ padding: 8px;
12
+ background-color: var(--guido-color-gray-0);
13
+ border: 1px solid var(--guido-color-gray-300);
14
+ border-radius: 4px;
15
+ box-shadow: none;
16
+ }
17
+
18
+ .button:not(:disabled,.disabled):active {
19
+ transform: none !important;
20
+ }
21
+
22
+ .button:hover:not(:disabled,.disabled) {
23
+ background-color: var(--guido-color-gray-1);
24
+ }
25
+
26
+ .button .icon-button {
27
+ color: var(--guido-color-gray-800);
28
+ }
29
+
30
+ .on > .button {
31
+ background-color: var(--guido-color-primary-100);
32
+ color: var(--guido-color-primary-500);
33
+ border-color: var(--guido-color-primary-500);
34
+ box-shadow: none;
35
+ }
36
+
37
+ .on > .button .icon-button {
38
+ color: var(--guido-color-primary-500);
39
+ }
40
+
41
+ .on > .button:hover:not(:disabled,.disabled) {
42
+ background-color: var(--guido-color-primary-100);
43
+ }
44
+
45
+ .e2e-remove-container-item .button .icon-button,
46
+ .e2e-delete-menu-btn .button .icon-button {
47
+ color: var(--guido-color-danger-500);
48
+ }
49
+
50
+ .e2e-text-insert-controls .control-shadow-wrapper:not(:last-of-type) {
51
+ margin-right: 16px;
52
+ }
53
+
54
+ .flat-white > .button {
55
+ border: 0;
56
+ }
57
+
58
+ .flat-white > .button:hover:not(:disabled,.disabled) {
59
+ background-color: transparent !important;
60
+ color: var(--guido-color-primary-500);
61
+ }
62
+
63
+ .flat-white > .button:hover:not(:disabled,.disabled) {
64
+ color: var(--guido-color-primary-500);
65
+ }
66
+
67
+ ue-check-button.checked:not(.flat-white) input:checked + label {
68
+ background-color: var(--guido-color-primary-100);
69
+ color: var(--guido-color-primary-500);
70
+ border: 1px solid var(--guido-color-primary-500);
71
+ box-shadow: none;
72
+ }
73
+
74
+ ue-check-button.checked:not(.flat-white) input:checked + label:hover:not(:disabled,.disabled) {
75
+ background-color: var(--guido-color-primary-100);
76
+ }
77
+
78
+ ue-check-button.checked:not(.flat-white) input:checked + label .icon-button {
79
+ color: var(--guido-color-primary-500);
80
+ }
81
+
82
+ ue-select.full-width .button {
83
+ border: none !important;
84
+ background-color: var(--guido-color-neutral-200) !important;
85
+ color: var(--guido-color-neutral-800) !important;
86
+ }
87
+
88
+ ue-select.full-width .button .icon-button {
89
+ color: var(--guido-color-gray-600) !important;
90
+ }
91
+
92
+ ue-select.full-width .button:hover:not(:disabled,.disabled) {
93
+ background-color: var(--guido-color-neutral-100) !important;
94
+ }
95
+
96
+ ue-color {
97
+ width: 80px;
98
+ }
99
+
100
+ ue-color .base-input {
101
+ width: 100%;
102
+ }
103
+ `;
104
+ export {
105
+ o as default
106
+ };
@@ -0,0 +1,49 @@
1
+ const o = `.control-shadow-wrapper:has(.button[role="combobox"]) {
2
+ border-radius: 0;
3
+ padding: 0;
4
+ background: transparent;
5
+ }
6
+
7
+ ue-select .button,
8
+ ue-mergetags .button,
9
+ ue-font-family-select .button {
10
+ background-color: var(--guido-color-gray-0);
11
+ border: 1px solid var(--guido-color-gray-300);
12
+ border-radius: 4px;
13
+ box-shadow: none;
14
+ min-height: 40px;
15
+ padding: 8px;
16
+ font-size: 13px;
17
+ color: var(--guido-color-gray-800);
18
+ text-align: left;
19
+ outline: none;
20
+ white-space: nowrap;
21
+ text-overflow: ellipsis;
22
+ overflow: hidden;
23
+ }
24
+
25
+ ue-select .button:hover:not(:disabled,.disabled),
26
+ ue-mergetags .button.button:hover:not(:disabled,.disabled),
27
+ ue-font-family-select .button.button:hover:not(:disabled,.disabled) {
28
+ background-color: var(--guido-color-gray-0);
29
+ border-color: var(--guido-color-primary-500);
30
+ }
31
+
32
+ ue-select .button.on,
33
+ ue-mergetags .button.on,
34
+ ue-font-family-select .button.on {
35
+ background-color: var(--guido-color-gray-0);
36
+ border-color: var(--guido-color-primary-500);
37
+ box-shadow: 0 0 0 3px var(--guido-color-primary-200) !important;
38
+ }
39
+
40
+ ue-select .button > .icon-button,
41
+ ue-mergetags .button > .icon-button,
42
+ ue-font-family-select .button > .icon-button {
43
+ margin-left: 0;
44
+ margin-right: 0;
45
+ }
46
+ `;
47
+ export {
48
+ o as default
49
+ };
@@ -0,0 +1,42 @@
1
+ const o = `ue-counter {
2
+ padding: 0 !important;
3
+ background-color: var(--guido-color-gray-0) !important;
4
+ border-radius: 0;
5
+ }
6
+
7
+ ue-counter .button {
8
+ width: 40px;
9
+ height: 40px;
10
+ box-shadow: none;
11
+ background-color: var(--guido-color-gray-0);
12
+ border: 1px solid var(--guido-color-gray-300);
13
+ }
14
+
15
+ ue-counter .button:hover:not(:disabled,.disabled) {
16
+ background-color: var(--guido-color-gray-1);
17
+ }
18
+
19
+ ue-counter .button .icon-button {
20
+ color: var(--guido-color-gray-600);
21
+ }
22
+
23
+ ue-counter .button.disabled .icon-button {
24
+ color: var(--guido-color-gray-700);
25
+ }
26
+
27
+ ue-counter ue-button:first-child .button {
28
+ border-radius: 4px 0 0 4px;
29
+ }
30
+
31
+ ue-counter ue-button:last-child .button {
32
+ border-radius: 0 4px 4px 0;
33
+ }
34
+
35
+ ue-counter .input {
36
+ border-top: 1px solid var(--guido-color-gray-300);
37
+ border-bottom: 1px solid var(--guido-color-gray-300);
38
+ }
39
+ `;
40
+ export {
41
+ o as default
42
+ };
@@ -0,0 +1,52 @@
1
+ const n = `ue-dropdown {
2
+ border-radius: 4px;
3
+ border: 1px solid var(--guido-color-gray-300);
4
+ box-shadow: 0 8px 10px -6px var(--ue-base-shadow-color, rgba(0, 0, 0, .1)),0 15px 35px -5px var(--ue-base-shadow-color, rgba(0, 0, 0, .1));
5
+ }
6
+
7
+ ue-dropdown .service-element.padding-t-3 {
8
+ padding-top: 8px;
9
+ }
10
+
11
+ .dropdown__search {
12
+ padding: 0 8px 16px;
13
+ }
14
+
15
+ .dropdown__tabs {
16
+ padding: 8px;
17
+ }
18
+
19
+ .dropdown__category {
20
+ padding: 16px 16px 0;
21
+ margin: 0;
22
+ text-transform: uppercase;
23
+ font-size: 13px;
24
+ letter-spacing: 1.2px;
25
+ font-weight: 600;
26
+ line-height: 20px;
27
+ color: var(--guido-color-gray-600);
28
+ }
29
+
30
+ .dropdown__item {
31
+ padding: 8px 16px;
32
+ margin: 0;
33
+ border-radius: 0;
34
+ background-color: var(--guido-color-gray-100);
35
+ color: var(--guido-color-gray-800);
36
+ }
37
+
38
+ .dropdown__menu ue-icon-component.icon-button {
39
+ color: var(--guido-color-primary-500);
40
+ }
41
+
42
+ .menu {
43
+ padding: 8px 0px;
44
+ }
45
+
46
+ .menu .menu-item {
47
+ padding: 8px;
48
+ }
49
+ `;
50
+ export {
51
+ n as default
52
+ };
@@ -0,0 +1,38 @@
1
+ const o = `ue-ui-headed-simple-panel,
2
+ ue-ui-simple-panel,
3
+ .modules-panel-small-content {
4
+ box-shadow: var(--guido-box-shadow);
5
+ border: 1px solid var(--guido-color-gray-300);
6
+ }
7
+
8
+ ue-stripe-thumb,
9
+ .ue-stripe-thumb {
10
+ box-shadow: none;
11
+ border: 1px solid var(--guido-color-gray-300);
12
+ }
13
+
14
+ ue-stripe-thumb:hover:not(.disabled),
15
+ .ue-stripe-thumb:hover:not(.disabled) {
16
+ box-shadow: none;
17
+ border: 1px solid var(--guido-color-primary-500);
18
+ }
19
+
20
+ .block-thumb {
21
+ box-shadow: none;
22
+ border: 1px solid var(--guido-color-gray-300);
23
+ }
24
+
25
+ .ue-dragged-node-component>.block-thumb,
26
+ .block-thumb:hover:not(.disabled) {
27
+ box-shadow: none;
28
+ border-color: var(--guido-color-primary-500);
29
+ }
30
+
31
+ .modules-layout-wrapper {
32
+ padding: 0 16px 16px;
33
+ grid-row-gap: 16px;
34
+ }
35
+ `;
36
+ export {
37
+ o as default
38
+ };
@@ -0,0 +1,11 @@
1
+ const e = `ue-switcher input {
2
+ border-radius: 26px;
3
+ }
4
+
5
+ ue-switcher input:before {
6
+ border-radius: 22px;
7
+ }
8
+ `;
9
+ export {
10
+ e as default
11
+ };
@@ -0,0 +1,97 @@
1
+ const n = `
2
+
3
+ ue-tabs-header .tabs-header {
4
+ padding: 0;
5
+ column-gap: 0;
6
+ background-color: transparent;
7
+ }
8
+
9
+ .control-panel-tabs .tabs-header {
10
+ margin: 16px 16px 0;
11
+ }
12
+
13
+ ue-tabs-header .tabs-header button {
14
+ background-color: var(--guido-color-gray-0);
15
+ outline: none;
16
+ padding: 8px 16px;
17
+ border: 1px solid var(--guido-color-gray-300);
18
+ height: 40px;
19
+ font-size: 15px;
20
+ }
21
+
22
+ ue-tabs-header .tabs-header button:hover:not(:disabled,.disabled,.checked) {
23
+ background-color: var(--guido-color-gray-1);
24
+ }
25
+
26
+ ue-tabs-header .tabs-header button ue-icon-component.icon-button {
27
+ color: var(--guido-color-gray-800);
28
+ }
29
+
30
+ ue-tabs-header .tabs-header button:before {
31
+ content: none;
32
+ }
33
+
34
+ ue-tabs-header .tabs-header button:not(:last-child),
35
+ ue-tabs-header .tabs-header button:not(:first-child) {
36
+ border-radius: 0;
37
+ }
38
+
39
+ ue-tabs-header .tabs-header button:first-child {
40
+ border-radius: 4px 0 0 4px;
41
+ }
42
+
43
+ ue-tabs-header .tabs-header button:last-child {
44
+ border-radius: 0 4px 4px 0;
45
+ }
46
+
47
+ ue-tabs-header .tabs-header button:first-child:last-child {
48
+ border-radius: 4px;
49
+ }
50
+
51
+ ue-tabs-header .tabs-header button.checked {
52
+ background-color: var(--guido-color-primary-100);
53
+ color: var(--guido-color-primary-500);
54
+ border-color: var(--guido-color-primary-500);
55
+ }
56
+
57
+ ue-tabs-header .tabs-header button.checked ue-icon-component.icon-button {
58
+ color: var(--guido-color-primary-500);
59
+ }
60
+
61
+ .ue-radio-tabs .button-group {
62
+ padding: 0;
63
+ column-gap: 0;
64
+ background-color: transparent;
65
+ }
66
+
67
+ .ue-radio-tabs .button-group .button {
68
+ background-color: var(--guido-color-gray-0);
69
+ outline: none;
70
+ padding: 8px 16px;
71
+ border: 1px solid var(--guido-color-gray-300);
72
+ height: 40px;
73
+ font-size: 15px;
74
+ }
75
+
76
+ .ue-radio-tabs .button-group input:checked + label {
77
+ box-shadow: none;
78
+ background-color: var(--guido-color-primary-100);
79
+ color: var(--guido-color-primary-500);
80
+ border-color: var(--guido-color-primary-500);
81
+ }
82
+
83
+ .ue-radio-tabs .button-group > div:first-of-type .button {
84
+ border-radius: 4px 0 0 4px !important;
85
+ }
86
+
87
+ .ue-radio-tabs .button-group > div:last-of-type .button {
88
+ border-radius: 0 4px 4px 0 !important;
89
+ }
90
+
91
+ .ue-radio-tabs .button-group > div:first-of-type:last-of-type .button {
92
+ border-radius: 4px !important;
93
+ }
94
+ `;
95
+ export {
96
+ n as default
97
+ };
@@ -0,0 +1,23 @@
1
+ const o = `ue-emoji .emoji-tabs .active-smile-tab {
2
+ border-color: var(--guido-color-primary-500);
3
+ }
4
+
5
+ ue-insert-table .hovered-template-cell {
6
+ background: var(--guido-color-primary-100);
7
+ }
8
+
9
+ ue-insert-table .template-row,
10
+ ue-insert-table .template-row:last-child,
11
+ ue-insert-table .template-cell {
12
+ border-color: var(--guido-color-primary-500);
13
+ }
14
+
15
+ .ue-popover.light {
16
+ border-radius: 4px;
17
+ border: 1px solid var(--guido-color-gray-300);
18
+ box-shadow: var(--guido-box-shadow);
19
+ }
20
+ `;
21
+ export {
22
+ o as default
23
+ };
@@ -0,0 +1,30 @@
1
+ const o = `.patch-session-container {
2
+ row-gap: 16px;
3
+ }
4
+
5
+ ue-vh-group {
6
+ box-shadow: none;
7
+ border: 1px solid var(--guido-color-gray-300);
8
+ border-radius: 4px;
9
+ }
10
+
11
+ ue-vh-group:has(ue-vh-patch.selected) {
12
+ border-color: var(--guido-color-primary-500);
13
+ }
14
+
15
+ ue-vh-patch.selected .patch-wrapper {
16
+ box-shadow: none;
17
+ }
18
+
19
+ ue-vh-patch:hover .patch-wrapper {
20
+ background: var(--guido-color-neutral-100);
21
+ }
22
+
23
+ ue-vh-patch.selected .patch-wrapper {
24
+ background-color: var(--guido-color-primary-100);
25
+ box-shadow: 0 0 0 1px var(--guido-color-primary-500);
26
+ }
27
+ `;
28
+ export {
29
+ o as default
30
+ };