alchemy-form 0.3.0-alpha.2 → 0.3.0-alpha.4

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 (46) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/assets/stylesheets/form/elements/_button.scss +1 -1
  3. package/assets/stylesheets/form/elements/_enum_badge.scss +7 -0
  4. package/assets/stylesheets/form/elements/_feedback_input.scss +0 -0
  5. package/assets/stylesheets/form/elements/_field_array.scss +10 -3
  6. package/assets/stylesheets/form/elements/_query_builder.scss +0 -0
  7. package/assets/stylesheets/form/elements/_select.scss +176 -176
  8. package/assets/stylesheets/form/elements/_table.scss +169 -53
  9. package/assets/stylesheets/form/elements/_tabs.scss +25 -35
  10. package/assets/stylesheets/form/elements/_toggle.scss +0 -0
  11. package/assets/stylesheets/form/elements/index.scss +1 -1
  12. package/assets/stylesheets/form/general/_colors.scss +0 -0
  13. package/config/routes.js +10 -0
  14. package/controller/form_api_controller.js +28 -0
  15. package/element/00_form_base.js +82 -27
  16. package/element/al_button.js +12 -1
  17. package/element/al_enum_badge.js +157 -0
  18. package/element/al_field.js +134 -39
  19. package/element/al_field_array.js +22 -0
  20. package/element/al_field_schema.js +222 -55
  21. package/element/al_form.js +9 -6
  22. package/element/al_select.js +2 -2
  23. package/element/al_table.js +10 -1
  24. package/element/al_virtual_scroll.js +2 -1
  25. package/helper/field_recompute_handler.js +0 -2
  26. package/package.json +1 -1
  27. package/view/form/elements/al_enum_badge.hwk +9 -0
  28. package/view/form/elements/alchemy_field.hwk +2 -0
  29. package/view/form/elements/alchemy_field_array.hwk +17 -6
  30. package/view/form/elements/alchemy_field_array_entry.hwk +11 -5
  31. package/view/form/elements/alchemy_field_schema.hwk +2 -2
  32. package/view/form/elements/alchemy_select_item.hwk +1 -1
  33. package/view/form/inputs/edit/enum.hwk +1 -1
  34. package/view/form/inputs/edit/mixed.hwk +9 -0
  35. package/view/form/inputs/edit_sw/fallback.hwk +1 -0
  36. package/view/form/inputs/view/association_alias.hwk +16 -0
  37. package/view/form/inputs/view/schema.hwk +4 -0
  38. package/view/form/inputs/view/string.hwk +1 -1
  39. package/view/form/inputs/view_inline/belongs_to.hwk +16 -0
  40. package/view/form/inputs/view_inline/boolean.hwk +2 -2
  41. package/view/form/inputs/view_inline/datetime.hwk +1 -1
  42. package/view/form/inputs/view_inline/enum.hwk +11 -7
  43. package/view/form/inputs/view_inline/objectid.hwk +1 -1
  44. package/view/form/inputs/view_inline/string.hwk +1 -1
  45. package/view/form/wrappers/edit_sw/default.hwk +1 -0
  46. package/assets/stylesheets/form/elements/_badge.scss +0 -41
package/view/form/inputs/view_inline/enum.hwk CHANGED
@@ -1,14 +1,14 @@
1
1
  {% if (value_is_empty AND self.allow_empty_value_placeholder) %}
2
2
  <span class="alchemy-field-value">
3
- <span class="alchemy-badge alchemy-field-empty-value-placeholder">
3
+ <span class="badge alchemy-field-empty-value-placeholder">
4
4
  {{ self.createEmptyValuePlaceholderText() }}
5
5
  </span>
6
6
  </span>
7
7
  {% else %}
8
- {% set enum_config to self.config.getValueConfiguration(value) %}
9
- {% set display_value to OR enum_config.title OR enum_config.name OR value %}
8
+ {% set enum_config to field_context.config.getValueConfiguration(value) %}
9
+ {% set display_value to enum_config.short_title OR enum_config.title OR enum_config.name OR value %}
10
10
 
11
- <span class="alchemy-badge alchemy-field-value alchemy-field-enum">
11
+ <span class="badge alchemy-field-value alchemy-field-enum">
12
12
  <% $0.classList.add('enum-' + value) %>
13
13
 
14
14
  {% if enum_config.number %}
@@ -16,15 +16,19 @@
16
16
  {% /if %}
17
17
 
18
18
  {% if enum_config.color %}
19
- <% $0.style.setProperty('--badge-bg', enum_config.color) %>
19
+ <% $0.style.setProperty('--color-p-badge-bg', enum_config.color) %>
20
20
  {% /if %}
21
21
 
22
22
  {% if enum_config.text_color %}
23
- <% $0.style.setProperty('--badge-color', enum_config.text_color) %>
23
+ <% $0.style.setProperty('--color-p-badge-bg-text', enum_config.text_color) %>
24
24
  {% /if %}
25
25
 
26
26
  {% if enum_config.icon %}
27
- <al-icon class="value-icon" icon-name={% enum_config.icon %}></al-icon>
27
+ <al-icon
28
+ class="value-icon"
29
+ icon-name={% enum_config.icon %}
30
+ icon-style={% enum_config.icon_tyle %}
31
+ ></al-icon>
28
32
  {% /if %}
29
33
 
30
34
  <span class="alchemy-enum-display-value">{{ display_value }}</span>
package/view/form/inputs/view_inline/objectid.hwk CHANGED
@@ -1,6 +1,6 @@
1
1
  {% if (value_is_empty AND self.allow_empty_value_placeholder) %}
2
2
  <span class="alchemy-field-value">
3
- <span class="alchemy-badge alchemy-field-empty-value-placeholder">
3
+ <span class="badge alchemy-field-empty-value-placeholder">
4
4
  {{ self.createEmptyValuePlaceholderText() }}
5
5
  </span>
6
6
  </span>
package/view/form/inputs/view_inline/string.hwk CHANGED
@@ -1,7 +1,7 @@
1
1
  <div>
2
2
  {% if (value_is_empty AND self.allow_empty_value_placeholder) %}
3
3
  <span class="alchemy-field-value">
4
- <span class="alchemy-badge alchemy-field-empty-value-placeholder">
4
+ <span class="badge alchemy-field-empty-value-placeholder">
5
5
  {{ self.createEmptyValuePlaceholderText() }}
6
6
  </span>
7
7
  </span>
package/view/form/wrappers/edit_sw/default.hwk ADDED
@@ -0,0 +1 @@
1
+ <div class="wrapped-inline" data-he-name="field"></div>
package/assets/stylesheets/form/elements/_badge.scss DELETED
@@ -1,41 +0,0 @@
1
- @use "styleboost";
2
-
3
- :root {
4
- --badge-font-size: 0.9rem;
5
- --badge-font-weight: 400;
6
- --badge-line-height: 1;
7
- --badge-border-radius: 5px;
8
- --badge-padding: 4px 8px;
9
- --badge-white-space: nowrap;
10
- --badge-user-select: none;
11
- --badge-gap: 5px;
12
- }
13
-
14
- .alchemy-badge {
15
- display: inline-flex;
16
- text-align: center;
17
-
18
- gap: var(--badge-gap);
19
- user-select: var(--badge-user-select);
20
- padding: var(--badge-padding);
21
- font-size: var(--badge-font-size);
22
- font-weight: var(--badge-font-weight);
23
- line-height: var(--badge-line-height);
24
- border-radius: var(--badge-border-radius);
25
- color: var(--badge-color, var(--color-theme-fill-text));
26
- background-color: var(--badge-bg, var(--color-theme-fill));
27
- white-space: var(--badge-white-space);
28
- }
29
-
30
- $counter: 0;
31
-
32
- // Iterate over all the available colors and create a badge color set for each
33
- // We do this without the badge class to lower specificity
34
- @each $color, $value in styleboost.$colors {
35
- $counter: $counter + 1;
36
-
37
- [data-badge-color-set="#{$counter}"] {
38
- --badge-color: var(--color-shade-#{$counter});
39
- --badge-bg: var(--color-tint-#{$counter});
40
- }
41
- }