alchemy-widget 0.3.0-alpha.2 → 0.3.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.
- package/CHANGELOG.md +10 -0
- package/CLAUDE.md +160 -0
- package/assets/stylesheets/widget_picker.scss +283 -0
- package/element/20-add_area_element.js +19 -21
- package/element/30-base_toolbar_element.js +189 -2
- package/element/editor_toolbar_element.js +121 -1
- package/element/user_avatar_group_element.js +5 -0
- package/element/widget_picker_element.js +333 -0
- package/element/widget_toolbar_element.js +22 -137
- package/helper/document_watcher.js +41 -6
- package/helper/editor_toolbar_manager.js +112 -20
- package/helper/widgets/00-widget.js +239 -0
- package/helper/widgets/05-column.js +4 -0
- package/helper/widgets/05-list.js +4 -0
- package/helper/widgets/05-row.js +4 -0
- package/helper/widgets/alchemy_field_widget.js +5 -0
- package/helper/widgets/alchemy_form_widget.js +5 -0
- package/helper/widgets/alchemy_table_widget.js +4 -0
- package/helper/widgets/alchemy_tabs_widget.js +5 -0
- package/helper/widgets/hawkejs_template.js +4 -0
- package/helper/widgets/header.js +4 -0
- package/helper/widgets/html.js +4 -0
- package/helper/widgets/markdown.js +4 -0
- package/helper/widgets/sourcecode.js +4 -0
- package/helper/widgets/table_of_contents.js +4 -0
- package/helper/widgets/text.js +4 -0
- package/package.json +2 -2
- package/view/widget/elements/al_editor_toolbar.hwk +49 -1
- package/view/widget/elements/al_widget_toolbar.hwk +1 -1
- package/view/widget/elements/widget_picker.hwk +55 -0
package/helper/widgets/05-row.js
CHANGED
|
@@ -11,6 +11,11 @@
|
|
|
11
11
|
*/
|
|
12
12
|
const AlchemyField = Function.inherits('Alchemy.Widget', 'AlchemyField');
|
|
13
13
|
|
|
14
|
+
// Widget metadata
|
|
15
|
+
AlchemyField.setTitle('Form Field');
|
|
16
|
+
AlchemyField.setCategory('data');
|
|
17
|
+
AlchemyField.setIcon('i-cursor');
|
|
18
|
+
|
|
14
19
|
/**
|
|
15
20
|
* Prepare the schema
|
|
16
21
|
*
|
|
@@ -11,6 +11,11 @@
|
|
|
11
11
|
*/
|
|
12
12
|
const AlchemyForm = Function.inherits('Alchemy.Widget', 'AlchemyForm');
|
|
13
13
|
|
|
14
|
+
// Widget metadata
|
|
15
|
+
AlchemyForm.setTitle('Form');
|
|
16
|
+
AlchemyForm.setCategory('data');
|
|
17
|
+
AlchemyForm.setIcon('rectangle-list');
|
|
18
|
+
|
|
14
19
|
/**
|
|
15
20
|
* Prepare the schema
|
|
16
21
|
*
|
package/helper/widgets/header.js
CHANGED
package/helper/widgets/html.js
CHANGED
package/helper/widgets/text.js
CHANGED
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.3.0
|
|
4
|
+
"version": "0.3.0",
|
|
5
5
|
"author": "Jelle De Loecker <jelle@elevenways.be>",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"alchemy",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
],
|
|
12
12
|
"peerDependencies": {
|
|
13
13
|
"alchemymvc" : ">=1.4.0||>=1.4.0-alpha",
|
|
14
|
-
"alchemy-form": "
|
|
14
|
+
"alchemy-form": ">=0.3.0||>=0.3.0-alpha"
|
|
15
15
|
},
|
|
16
16
|
"repository": "11ways/alchemy-widget",
|
|
17
17
|
"license": "MIT",
|
|
@@ -1,3 +1,51 @@
|
|
|
1
1
|
<div data-he-slot="left"></div>
|
|
2
|
+
|
|
2
3
|
<div data-he-slot="center"></div>
|
|
3
|
-
|
|
4
|
+
|
|
5
|
+
<div data-he-slot="right">
|
|
6
|
+
<al-button class="start-edit" state="ready">
|
|
7
|
+
<al-icon icon-name="pencil"></al-icon>
|
|
8
|
+
{%t "start-editing" %}
|
|
9
|
+
</al-button>
|
|
10
|
+
|
|
11
|
+
<al-button class="stop-and-save" state="ready">
|
|
12
|
+
<al-state state-name="saving">
|
|
13
|
+
<al-icon icon-name="spinner" icon-flags="spin"></al-icon>
|
|
14
|
+
{%t "saving" %}
|
|
15
|
+
</al-state>
|
|
16
|
+
<al-state state-name="saving-before-stop">
|
|
17
|
+
<al-icon icon-name="spinner" icon-flags="spin"></al-icon>
|
|
18
|
+
{%t "saving" %}
|
|
19
|
+
</al-state>
|
|
20
|
+
<al-state state-name="saved">
|
|
21
|
+
<al-icon icon-name="badge-check" icon-flags="beat"></al-icon>
|
|
22
|
+
{%t "saved" %}
|
|
23
|
+
</al-state>
|
|
24
|
+
<al-state state-name="ready">
|
|
25
|
+
<al-icon icon-name="floppy-disk-circle-arrow-right"></al-icon>
|
|
26
|
+
{%t "save-and-stop-editing" %}
|
|
27
|
+
</al-state>
|
|
28
|
+
</al-button>
|
|
29
|
+
|
|
30
|
+
<al-button class="stop-edit" state="ready">
|
|
31
|
+
<al-icon icon-name="pencil-slash"></al-icon>
|
|
32
|
+
{%t "stop-editing" %}
|
|
33
|
+
</al-button>
|
|
34
|
+
|
|
35
|
+
<al-button class="save-all" state="ready">
|
|
36
|
+
<al-state state-name="saving">
|
|
37
|
+
<al-icon icon-name="spinner" icon-flags="spin"></al-icon>
|
|
38
|
+
{%t "saving" %}
|
|
39
|
+
</al-state>
|
|
40
|
+
<al-state state-name="saved">
|
|
41
|
+
<al-icon icon-name="badge-check" icon-flags="beat"></al-icon>
|
|
42
|
+
{%t "saved" %}
|
|
43
|
+
</al-state>
|
|
44
|
+
<al-state state-name="ready">
|
|
45
|
+
<al-icon icon-name="floppy-disk"></al-icon>
|
|
46
|
+
{%t "save-all" %}
|
|
47
|
+
</al-state>
|
|
48
|
+
</al-button>
|
|
49
|
+
|
|
50
|
+
<div data-area="buttons"></div>
|
|
51
|
+
</div>
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
</al-state>
|
|
42
42
|
</al-button>
|
|
43
43
|
|
|
44
|
-
{% if Router.routeConfig('Chimera.Editor#index') %}
|
|
44
|
+
{% if Router.routeConfig('Chimera.Editor#index') && (not toolbar_manager or toolbar_manager.scenario neq 'chimera') %}
|
|
45
45
|
<a href="/chimera/" data-he-link="false">
|
|
46
46
|
<al-icon icon-style="duotone" icon-name="display-code"></al-icon>
|
|
47
47
|
{%t "go-to-backend" %}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{# Widget picker dialog - using flat widgets list to avoid nested loop issues #}
|
|
2
|
+
<div class="widget-picker">
|
|
3
|
+
<div class="widget-picker-header">
|
|
4
|
+
<input
|
|
5
|
+
type="search"
|
|
6
|
+
class="widget-picker-search"
|
|
7
|
+
placeholder={% __d('widget-picker-search-placeholder') %}
|
|
8
|
+
autocomplete="off"
|
|
9
|
+
>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<div class="widget-picker-body">
|
|
13
|
+
<aside class="widget-picker-categories">
|
|
14
|
+
<button class="category-btn active" data-category="">
|
|
15
|
+
<al-icon icon-name="grid-2"></al-icon>
|
|
16
|
+
<span>{%t 'widget-picker-all-categories' %}</span>
|
|
17
|
+
</button>
|
|
18
|
+
{% each categories as category %}
|
|
19
|
+
<button
|
|
20
|
+
class="category-btn"
|
|
21
|
+
data-category={% category.name %}
|
|
22
|
+
>
|
|
23
|
+
<al-icon icon-name={% category.icon %}></al-icon>
|
|
24
|
+
<span>{%t category.name widget=true category=true %}</span>
|
|
25
|
+
</button>
|
|
26
|
+
{% /each %}
|
|
27
|
+
</aside>
|
|
28
|
+
|
|
29
|
+
<main class="widget-picker-list">
|
|
30
|
+
{% each widgets as widget %}
|
|
31
|
+
<button class="widget-item"
|
|
32
|
+
data-type={% widget.type_name %}
|
|
33
|
+
data-category={% widget.category %}
|
|
34
|
+
tabindex="0">
|
|
35
|
+
<div class="widget-item-icon">
|
|
36
|
+
<al-icon icon-name={% widget.icon %}></al-icon>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="widget-item-content">
|
|
39
|
+
<span class="widget-item-title">{{ widget.title }}</span>
|
|
40
|
+
{% if widget.description %}
|
|
41
|
+
<span class="widget-item-description">{{ widget.description }}</span>
|
|
42
|
+
{% else %}
|
|
43
|
+
<span class="widget-item-description">{%t widget.description_key widget=true %}</span>
|
|
44
|
+
{% /if %}
|
|
45
|
+
</div>
|
|
46
|
+
</button>
|
|
47
|
+
{% /each %}
|
|
48
|
+
|
|
49
|
+
<div class="widget-picker-empty" hidden>
|
|
50
|
+
<al-icon icon-name="search"></al-icon>
|
|
51
|
+
<p>{%t 'widget-picker-no-results' %}</p>
|
|
52
|
+
</div>
|
|
53
|
+
</main>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|