alchemy-widget 0.1.6 → 0.2.0

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 (32) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/assets/stylesheets/{alchemy-widgets.scss → alchemy_widgets.scss} +158 -48
  3. package/bootstrap.js +4 -2
  4. package/element/00-widget_base_element.js +96 -4
  5. package/element/05-widget_element.js +4 -13
  6. package/element/10-container_elements.js +15 -15
  7. package/element/11-alchemy_widgets_list_element.js +2 -2
  8. package/element/20-add_area_element.js +22 -22
  9. package/element/table_of_contents_element.js +104 -8
  10. package/element/widget_actionbar_element.js +92 -0
  11. package/element/widget_context_element.js +39 -23
  12. package/element/widget_toolbar_element.js +295 -50
  13. package/helper/widget_action.js +10 -10
  14. package/helper/widgets/00-widget.js +54 -18
  15. package/helper/widgets/01-container.js +7 -7
  16. package/helper/widgets/05-list.js +1 -1
  17. package/helper/widgets/alchemy_field_widget.js +112 -0
  18. package/helper/widgets/alchemy_form_widget.js +183 -0
  19. package/helper/widgets/alchemy_table_widget.js +71 -0
  20. package/helper/widgets/alchemy_tabs_widget.js +195 -0
  21. package/helper/widgets/header.js +3 -3
  22. package/helper/widgets/markdown.js +17 -10
  23. package/helper/widgets/sourcecode.js +4 -4
  24. package/helper/widgets/table_of_contents.js +2 -2
  25. package/helper/widgets_helper.js +26 -0
  26. package/package.json +3 -2
  27. package/view/elements/table_of_contents.hwk +23 -9
  28. package/view/form/inputs/edit/widget.hwk +2 -2
  29. package/view/form/inputs/edit/widgets.hwk +2 -2
  30. package/view/widget/elements/al_widget_toolbar.hwk +49 -0
  31. package/view/widget/widget_config.hwk +7 -4
  32. package/assets/stylesheets/alchemy-widget-symbols.scss +0 -191
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "alchemy-widget",
3
3
  "description": "The widget plugin for the AlchemyMVC",
4
- "version": "0.1.6",
4
+ "version": "0.2.0",
5
5
  "author": "Jelle De Loecker <jelle@elevenways.be>",
6
6
  "keywords": [
7
7
  "alchemy",
@@ -10,7 +10,8 @@
10
10
  "widget"
11
11
  ],
12
12
  "peerDependencies": {
13
- "alchemymvc" : ">=1.1.0"
13
+ "alchemymvc" : ">=1.2.0",
14
+ "alchemy-form": "~0.2.0"
14
15
  },
15
16
  "repository": "11ways/alchemy-widget",
16
17
  "license": "MIT",
package/view/elements/table_of_contents.hwk CHANGED
@@ -1,9 +1,23 @@
1
- <ol>
2
- {% each self.entries as entry %}
3
- <li>
4
- <a href="#{% entry.id %}">
5
- {{ entry.title }}
6
- </a>
7
- </li>
8
- {% /each %}
9
- </ol>
1
+ {% macro printEntries %}
2
+ <ol>
3
+ {% each entries as entry %}
4
+ {% run printEntry entry=entry %}
5
+
6
+ {% if entry.children %}
7
+ <li>
8
+ {% run printEntries entries=entry.children %}
9
+ </li>
10
+ {% /if %}
11
+ {% /each %}
12
+ </ol>
13
+ {% /macro %}
14
+
15
+ {% macro printEntry %}
16
+ <li>
17
+ <a href="#{% entry.id %}">
18
+ {{ entry.title }}
19
+ </a>
20
+ </li>
21
+ {% /macro %}
22
+
23
+ {% run printEntries entries=self.entries}
package/view/form/inputs/edit/widget.hwk CHANGED
@@ -1,6 +1,6 @@
1
- <alchemy-widget
1
+ <al-widget
2
2
  type={% alchemy_field.config.options.type %}
3
3
  #value={% value %}
4
4
  class="alchemy-field-value"
5
5
  editing
6
- ></alchemy-widget>
6
+ ></al-widget>
package/view/form/inputs/edit/widgets.hwk CHANGED
@@ -1,5 +1,5 @@
1
- <alchemy-widgets
1
+ <al-widgets
2
2
  #value={% value %}
3
3
  class="alchemy-field-value"
4
4
  editing
5
- ></alchemy-widgets>
5
+ ></al-widgets>
package/view/widget/elements/al_widget_toolbar.hwk ADDED
@@ -0,0 +1,49 @@
1
+ <al-button class="start-edit" state="ready">
2
+ <al-icon icon-style="duotone" icon-name="pencil"></al-icon>
3
+ {%t "start-editing" %}
4
+ </al-button>
5
+ <al-button class="stop-and-save" state="ready">
6
+
7
+ <al-state state-name="saving">
8
+ <al-icon icon-style="duotone" icon-name="spinner" icon-flags="spin"></al-icon>
9
+ {%t "saving" %}
10
+ </al-state>
11
+
12
+ <al-state state-name="saved">
13
+ <al-icon icon-style="duotone" icon-name="badge-check" icon-flags="beat"></al-icon>
14
+ {%t "saved" %}
15
+ </al-state>
16
+
17
+ <al-state state-name="ready">
18
+ <al-icon icon-style="duotone" icon-name="floppy-disk-circle-arrow-right"></al-icon>
19
+ {%t "save-and-stop-editing" %}
20
+ </al-state>
21
+ </al-button>
22
+ <al-button class="stop-edit" state="ready">
23
+ <al-icon icon-style="duotone" icon-name="pencil-slash"></al-icon>
24
+ {%t "stop-editing" %}
25
+ </al-button>
26
+ <al-button class="save-all" state="ready">
27
+
28
+ <al-state state-name="saving">
29
+ <al-icon icon-style="duotone" icon-name="spinner" icon-flags="spin"></al-icon>
30
+ {%t "saving" %}
31
+ </al-state>
32
+
33
+ <al-state state-name="saved">
34
+ <al-icon icon-style="duotone" icon-name="badge-check" icon-flags="beat"></al-icon>
35
+ {%t "saved" %}
36
+ </al-state>
37
+
38
+ <al-state state-name="ready">
39
+ <al-icon icon-style="duotone" icon-name="floppy-disk"></al-icon>
40
+ {%t "save-all" %}
41
+ </al-state>
42
+ </al-button>
43
+
44
+ {% if Router.routeConfig('Chimera.Editor#index') %}
45
+ <a href="/chimera/" data-he-link="false">
46
+ <al-icon icon-style="duotone" icon-name="display-code"></al-icon>
47
+ {%t "go-to-backend" %}
48
+ </a>
49
+ {% /if %}
package/view/widget/widget_config.hwk CHANGED
@@ -2,17 +2,20 @@
2
2
  <% addClass('widget-config-dialog') %>
3
3
 
4
4
  <div class="widget-config-wrapper js-he-ready-wcd">
5
- <alchemy-form
5
+
6
+ <h2 class="widget-config-title">Editing "{{ title }}" widget</h2>
7
+
8
+ <al-form
6
9
  #document={% widget_settings %}
7
10
  #schema={% schema %}
8
11
  class="main-form"
9
12
  >
10
13
  {% each fields as field %}
11
- <alchemy-field
14
+ <al-field
12
15
  field-name={% field.name %}
13
- ></alchemy-field>
16
+ ></al-field>
14
17
  {% /each %}
15
- </alchemy-form>
18
+ </al-form>
16
19
 
17
20
  <button class="btn btn-apply">
18
21
  Apply
package/assets/stylesheets/alchemy-widget-symbols.scss DELETED
@@ -1,191 +0,0 @@
1
- .gg-math-plus,
2
- .gg-math-plus::after {
3
- display: block;
4
- box-sizing: border-box;
5
- background: currentColor;
6
- border-radius: 10px
7
- }
8
-
9
- .gg-math-plus {
10
- margin-top: -2px;
11
- position: relative;
12
- transform: scale(var(--ggs,1));
13
- width: 16px;
14
- height: 2px
15
- }
16
-
17
- .gg-math-plus::after {
18
- content: "";
19
- position: absolute;
20
- width: 2px;
21
- height: 16px;
22
- top: -7px;
23
- left: 7px
24
- }
25
-
26
- .gg-menu-grid-o {
27
- box-sizing: border-box;
28
- position: relative;
29
- display: block;
30
- transform: scale(var(--ggs,1));
31
- width: 16px;
32
- height: 16px;
33
- }
34
-
35
- .gg-menu-grid-o::before {
36
- content: "";
37
- display: block;
38
- box-sizing: border-box;
39
- position: absolute;
40
- width: 4px;
41
- height: 4px;
42
- background: currentColor;
43
- box-shadow:
44
- 0 6px 0,
45
- 6px 6px 0,
46
- 12px 6px 0,
47
- 6px 12px 0,
48
- 12px 12px 0,
49
- 6px 0 0,
50
- 12px 0 0,
51
- 0 12px 0
52
- ;
53
- border-radius: 22px;
54
- }
55
-
56
- .gg-remove {
57
- box-sizing: border-box;
58
- position: relative;
59
- display: block;
60
- transform: scale(var(--ggs,1));
61
- width: 22px;
62
- height: 22px;
63
- border: 2px solid;
64
- border-radius: 22px
65
- }
66
-
67
- .gg-remove::before {
68
- content: "";
69
- display: block;
70
- box-sizing: border-box;
71
- position: absolute;
72
- width: 10px;
73
- height: 2px;
74
- background: currentColor;
75
- border-radius: 5px;
76
- top: 8px;
77
- left: 4px
78
- }
79
-
80
- .gg-trash {
81
- box-sizing: border-box;
82
- position: relative;
83
- display: block;
84
- transform: scale(var(--ggs,1));
85
- width: 10px;
86
- height: 12px;
87
- border: 2px solid transparent;
88
- box-shadow:
89
- 0 0 0 2px,
90
- inset -2px 0 0,
91
- inset 2px 0 0;
92
- border-bottom-left-radius: 1px;
93
- border-bottom-right-radius: 1px;
94
- margin-top: 4px
95
- }
96
-
97
- .gg-trash::after,
98
- .gg-trash::before {
99
- content: "";
100
- display: block;
101
- box-sizing: border-box;
102
- position: absolute
103
- }
104
-
105
- .gg-trash::after {
106
- background: currentColor;
107
- border-radius: 3px;
108
- width: 16px;
109
- height: 2px;
110
- top: -4px;
111
- left: -5px
112
- }
113
-
114
- .gg-trash::before {
115
- width: 10px;
116
- height: 4px;
117
- border: 2px solid;
118
- border-bottom: transparent;
119
- border-top-left-radius: 2px;
120
- border-top-right-radius: 2px;
121
- top: -7px;
122
- left: -2px
123
- }
124
-
125
- .gg-arrow-left {
126
- box-sizing: border-box;
127
- position: relative;
128
- display: block;
129
- transform: scale(var(--ggs,1));
130
- width: 22px;
131
- height: 22px
132
- }
133
-
134
- .gg-arrow-left::after,
135
- .gg-arrow-left::before {
136
- content: "";
137
- display: block;
138
- box-sizing: border-box;
139
- position: absolute;
140
- left: 3px
141
- }
142
-
143
- .gg-arrow-left::after {
144
- width: 8px;
145
- height: 8px;
146
- border-bottom: 2px solid;
147
- border-left: 2px solid;
148
- transform: rotate(45deg);
149
- bottom: 7px
150
- }
151
-
152
- .gg-arrow-left::before {
153
- width: 16px;
154
- height: 2px;
155
- bottom: 10px;
156
- background: currentColor
157
- }
158
-
159
- .gg-arrow-right {
160
- box-sizing: border-box;
161
- position: relative;
162
- display: block;
163
- transform: scale(var(--ggs,1));
164
- width: 22px;
165
- height: 22px
166
- }
167
-
168
- .gg-arrow-right::after,
169
- .gg-arrow-right::before {
170
- content: "";
171
- display: block;
172
- box-sizing: border-box;
173
- position: absolute;
174
- right: 3px
175
- }
176
-
177
- .gg-arrow-right::after {
178
- width: 8px;
179
- height: 8px;
180
- border-top: 2px solid;
181
- border-right: 2px solid;
182
- transform: rotate(45deg);
183
- bottom: 7px
184
- }
185
-
186
- .gg-arrow-right::before {
187
- width: 16px;
188
- height: 2px;
189
- bottom: 10px;
190
- background: currentColor
191
- }