coveragebook_components 0.7.1 → 0.7.2

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 (35) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.js +136 -309
  3. data/app/assets/build/coco/book.js +143 -185
  4. data/app/assets/js/coco.js +2 -30
  5. data/app/assets/js/{base/mixins → libs/alpine/directives}/undo.js +12 -13
  6. data/app/assets/js/libs/alpine/index.js +15 -13
  7. data/app/components/coco/app/blocks/slide_editor/slide_editor.html.erb +2 -1
  8. data/app/components/coco/app/blocks/slide_editor/slide_editor.js +0 -3
  9. data/app/components/coco/app/elements/color_picker/color_picker.js +0 -2
  10. data/app/components/coco/app/elements/image_picker/image_picker.js +0 -2
  11. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.html.erb +2 -1
  12. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.js +1 -7
  13. data/app/components/coco/app/elements/snackbar/snackbar.js +0 -2
  14. data/app/components/coco/app/elements/toast/toast.js +0 -2
  15. data/app/components/coco/base/button/button.js +0 -2
  16. data/app/components/coco/base/dropdown/dropdown.js +1 -3
  17. data/app/helpers/coco/base_helper.rb +2 -2
  18. data/app/helpers/coco/url_helper.rb +2 -2
  19. data/lib/coco.rb +1 -1
  20. metadata +9 -18
  21. data/app/assets/js/app/mixins/dropdown.js +0 -18
  22. data/app/assets/js/app/mixins/index.js +0 -3
  23. data/app/assets/js/base/mixins/attr-observer.js +0 -54
  24. data/app/assets/js/base/mixins/attrs.js +0 -58
  25. data/app/assets/js/base/mixins/dropdown.js +0 -69
  26. data/app/assets/js/base/mixins/index.js +0 -17
  27. data/app/assets/js/base/mixins/options.js +0 -76
  28. data/app/assets/js/base/mixins/size-observer.js +0 -34
  29. data/app/assets/js/base/mixins/tooltip.js +0 -81
  30. /data/app/assets/js/libs/alpine/{plugins → directives}/destroy.js +0 -0
  31. /data/app/assets/js/libs/alpine/{plugins → directives}/dimensions.js +0 -0
  32. /data/app/assets/js/libs/alpine/{plugins → directives}/dropdown.js +0 -0
  33. /data/app/assets/js/libs/alpine/{plugins → directives}/notification.js +0 -0
  34. /data/app/assets/js/libs/alpine/{plugins → directives}/options.js +0 -0
  35. /data/app/assets/js/libs/alpine/{plugins → directives}/tooltip.js +0 -0
@@ -2,8 +2,6 @@ import { CocoComponent } from "@js/coco";
2
2
 
3
3
  export default CocoComponent("appSnackbar", () => {
4
4
  return {
5
- use: false,
6
-
7
5
  notificationType: "snackbar",
8
6
  options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
9
7
 
@@ -2,8 +2,6 @@ import { CocoComponent } from "@js/coco";
2
2
 
3
3
  export default CocoComponent("appToast", () => {
4
4
  return {
5
- use: false,
6
-
7
5
  notificationType: "toast",
8
6
  options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
9
7
 
@@ -3,8 +3,6 @@ import { camelCase } from "lodash";
3
3
 
4
4
  export default CocoComponent("button", (data = {}) => {
5
5
  return {
6
- use: false,
7
-
8
6
  options: ["state", "confirm", "size", "disabled", "collapsible"],
9
7
 
10
8
  isCollapsed: false,
@@ -1,7 +1,5 @@
1
1
  import { CocoComponent } from "@js/coco";
2
2
 
3
3
  export default CocoComponent("dropdown", () => {
4
- return {
5
- use: false,
6
- };
4
+ return {};
7
5
  });
@@ -39,10 +39,10 @@ module Coco
39
39
  end
40
40
  end
41
41
 
42
- def coco_modal_link(*, data: {}, modal: nil, **kwargs, &)
42
+ def coco_link_to_modal(*, data: {}, modal: nil, **kwargs, &)
43
43
  kwargs[:data] = coco_modal_data_attributes(modal || "default").merge(data)
44
44
 
45
- link_to(*, **kwargs, &)
45
+ coco_link_to(*, **kwargs, &)
46
46
  end
47
47
 
48
48
  def coco_modal_frame_id(name = "default")
@@ -12,7 +12,7 @@ module Coco
12
12
 
13
13
  href = Coco::ActionViewHelper.url_target(name, options)
14
14
 
15
- link = Coco::Link::Component.new(href: href, **html_options)
15
+ link = Coco::App::Elements::Link.new(href: href, **html_options.symbolize_keys!)
16
16
  link = link.with_content(name) unless block
17
17
 
18
18
  render(link, &block)
@@ -23,7 +23,7 @@ module Coco
23
23
  options ||= {}
24
24
  html_options ||= {}
25
25
 
26
- button = Coco::App::Elements::FormButton.new(action: options, **html_options)
26
+ button = Coco::App::Elements::FormButton.new(action: options, **html_options.symbolize_keys!)
27
27
  button = button.with_content(content) unless block
28
28
 
29
29
  render(button, &block)
data/lib/coco.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Coco
2
- VERSION = "0.7.1"
2
+ VERSION = "0.7.2"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: coveragebook_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.7.1
4
+ version: 0.7.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Mark Perkins
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-09-22 00:00:00.000000000 Z
11
+ date: 2023-09-29 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -1323,17 +1323,7 @@ files:
1323
1323
  - app/assets/img/test/slides/slide-foreground-portrait.jpg
1324
1324
  - app/assets/js/app.js
1325
1325
  - app/assets/js/app/components.js
1326
- - app/assets/js/app/mixins/dropdown.js
1327
- - app/assets/js/app/mixins/index.js
1328
1326
  - app/assets/js/base/components.js
1329
- - app/assets/js/base/mixins/attr-observer.js
1330
- - app/assets/js/base/mixins/attrs.js
1331
- - app/assets/js/base/mixins/dropdown.js
1332
- - app/assets/js/base/mixins/index.js
1333
- - app/assets/js/base/mixins/options.js
1334
- - app/assets/js/base/mixins/size-observer.js
1335
- - app/assets/js/base/mixins/tooltip.js
1336
- - app/assets/js/base/mixins/undo.js
1337
1327
  - app/assets/js/book.js
1338
1328
  - app/assets/js/book/components.js
1339
1329
  - app/assets/js/coco.js
@@ -1345,13 +1335,14 @@ files:
1345
1335
  - app/assets/js/helpers/path.js
1346
1336
  - app/assets/js/helpers/screenshot.js
1347
1337
  - app/assets/js/helpers/turbo_events.js
1338
+ - app/assets/js/libs/alpine/directives/destroy.js
1339
+ - app/assets/js/libs/alpine/directives/dimensions.js
1340
+ - app/assets/js/libs/alpine/directives/dropdown.js
1341
+ - app/assets/js/libs/alpine/directives/notification.js
1342
+ - app/assets/js/libs/alpine/directives/options.js
1343
+ - app/assets/js/libs/alpine/directives/tooltip.js
1344
+ - app/assets/js/libs/alpine/directives/undo.js
1348
1345
  - app/assets/js/libs/alpine/index.js
1349
- - app/assets/js/libs/alpine/plugins/destroy.js
1350
- - app/assets/js/libs/alpine/plugins/dimensions.js
1351
- - app/assets/js/libs/alpine/plugins/dropdown.js
1352
- - app/assets/js/libs/alpine/plugins/notification.js
1353
- - app/assets/js/libs/alpine/plugins/options.js
1354
- - app/assets/js/libs/alpine/plugins/tooltip.js
1355
1346
  - app/assets/js/libs/alpine/utils/tippy_modifiers.js
1356
1347
  - app/assets/js/libs/tippy/index.js
1357
1348
  - app/assets/js/libs/tippy/plugins/hide_on_esc.js
@@ -1,18 +0,0 @@
1
- import withDropdown from "@js/base/mixins/dropdown";
2
-
3
- export default function withAppDropdown(props = {}) {
4
- const initDropdown = withDropdown({
5
- theme: "coco-app-dropdown",
6
- placement: "bottom-start",
7
- offset: [0, 0],
8
- ...props,
9
- });
10
-
11
- function withAppDropdownMixin(component) {
12
- return initDropdown(component);
13
- }
14
-
15
- withAppDropdownMixin.props = initDropdown.props;
16
-
17
- return withAppDropdownMixin;
18
- }
@@ -1,3 +0,0 @@
1
- import withAppDropdown from "./dropdown";
2
-
3
- export { withAppDropdown };
@@ -1,54 +0,0 @@
1
- const ignoredAttributes = ["class", "style"];
2
-
3
- export default function withAttrObserver(props = {}) {
4
- return function (component) {
5
- const oldDestroy = component.destroy;
6
- const toIgnore = props.ignore || ignoredAttributes;
7
-
8
- const attrObserver = Alpine.reactive({
9
- observer: null,
10
- handler(attrName, newValue, oldValue, target) {
11
- if (component.onAttrChange) {
12
- component.onAttrChange(attrName, newValue, oldValue, target);
13
- }
14
- },
15
- });
16
-
17
- attrObserver.observer = new MutationObserver((mutationsList) => {
18
- for (const mutation of mutationsList) {
19
- if (
20
- mutation.type !== "attributes" ||
21
- toIgnore.includes(mutation.attributeName)
22
- ) {
23
- return;
24
- }
25
-
26
- const { target } = mutation;
27
-
28
- attrObserver.handler(
29
- mutation.attributeName,
30
- target.getAttribute(mutation.attributeName),
31
- mutation.oldValue,
32
- target
33
- );
34
- }
35
- });
36
-
37
- Object.assign(component, {
38
- destroy() {
39
- attrObserver.observer.disconnect();
40
- attrObserver.observer = null;
41
-
42
- if (oldDestroy) {
43
- oldDestroy.call(this);
44
- }
45
- },
46
- });
47
-
48
- attrObserver.observer.observe(component.$root, { attributes: true });
49
-
50
- return component;
51
- };
52
- }
53
-
54
- export { ignoredAttributes };
@@ -1,58 +0,0 @@
1
- export default function withAttrs(props = {}) {
2
- return function (component) {
3
- return Object.assign(
4
- component,
5
- Alpine.reactive({
6
- getAttr(name) {
7
- return this.$root.getAttribute(name);
8
- },
9
-
10
- setAttr(name, value) {
11
- this.$root.setAttribute(name, value);
12
- return this;
13
- },
14
-
15
- hasAttr(name) {
16
- return this.$root.hasAttribute(name);
17
- },
18
-
19
- removeAttr(name) {
20
- component.$root.removeAttribute(name);
21
- return this;
22
- },
23
-
24
- assertAttr(name, testValue) {
25
- return this.$root.getAttribute(name) === String(testValue);
26
- },
27
-
28
- refuteAttr(name, testValue) {
29
- return !this.assertAttr(name, testValue);
30
- },
31
-
32
- getData(name) {
33
- return this.getAttr(`data-${name}`);
34
- },
35
-
36
- setData(name, value) {
37
- return this.setAttr(`data-${name}`, value);
38
- },
39
-
40
- hasData(name) {
41
- return this.hasAttr(`data-${name}`);
42
- },
43
-
44
- removeData(name) {
45
- return this.removeAttr(`data-${name}`);
46
- },
47
-
48
- assertData(name, testValue) {
49
- return this.assertAttr(`data-${name}`, testValue);
50
- },
51
-
52
- refuteData(name, testValue) {
53
- return !this.assertData(name, testValue);
54
- },
55
- })
56
- );
57
- };
58
- }
@@ -1,69 +0,0 @@
1
- import { tippy, hideOnEsc } from "@libs/tippy";
2
-
3
- export default function withDropdown(props = {}) {
4
- function withDropdownMixin(component) {
5
- const tippyEl = component.$refs.dropdownTrigger || component.$root;
6
-
7
- const dropdown = tippy(tippyEl, {
8
- trigger: "click",
9
- interactive: true,
10
- animation: false,
11
- content: component.$refs.dropdownPanel,
12
- plugins: [hideOnEsc],
13
-
14
- onMount() {
15
- if (component.onDropdownMount) {
16
- component.onDropdownMount();
17
- }
18
- },
19
-
20
- onCreate() {
21
- if (component.onDropdownCreate) {
22
- component.onDropdownCreate();
23
- }
24
- },
25
-
26
- onShow: () => {
27
- component.dropdown.open = true;
28
- if (component.onDropdownShow) {
29
- return component.onDropdownShow();
30
- }
31
-
32
- if (component.setState) {
33
- component.setState("active");
34
- }
35
- },
36
-
37
- onHide: () => {
38
- component.dropdown.open = false;
39
- if (component.onDropdownHide) {
40
- component.onDropdownHide();
41
- }
42
- if (component.resetState) {
43
- component.resetState();
44
- }
45
- },
46
-
47
- ...props,
48
- });
49
-
50
- return Object.assign(component, {
51
- dropdown: Alpine.reactive({
52
- instance: dropdown,
53
- open: false,
54
-
55
- hide() {
56
- this.instance.hide();
57
- },
58
-
59
- show() {
60
- this.instance.show();
61
- },
62
- }),
63
- });
64
- }
65
-
66
- withDropdownMixin.props = ["dropdown"];
67
-
68
- return withDropdownMixin;
69
- }
@@ -1,17 +0,0 @@
1
- import withAttrObserver from "./attr-observer";
2
- import withAttrs from "./attrs";
3
- import withDropdown from "./dropdown";
4
- import withOptions from "./options";
5
- import withSizeObserver from "./size-observer";
6
- import withTooltip from "./tooltip";
7
- import withUndo from "./undo";
8
-
9
- export {
10
- withAttrObserver,
11
- withAttrs,
12
- withDropdown,
13
- withOptions,
14
- withSizeObserver,
15
- withTooltip,
16
- withUndo,
17
- };
@@ -1,76 +0,0 @@
1
- import { kebabCase, camelCase } from "lodash";
2
-
3
- export default function withOptions(props = {}) {
4
- return function (component) {
5
- if (!component.options) {
6
- return component;
7
- }
8
-
9
- const el = component.$root;
10
- const oldDestroy = component.destroy;
11
- const optionsProps = component.options || {};
12
- const optionsAttrs = Object.keys(optionsProps).map(
13
- (name) => `data-${kebabCase(name)}`
14
- );
15
-
16
- Object.keys(optionsProps).forEach((name) => {
17
- const attrName = `data-${kebabCase(name)}`;
18
- if (el.hasAttribute(attrName)) {
19
- component.options[name] = el.getAttribute(attrName);
20
- }
21
- });
22
-
23
- let attrObserver = new MutationObserver((mutationsList) => {
24
- for (const mutation of mutationsList) {
25
- if (
26
- mutation.type !== "attributes" ||
27
- !optionsAttrs.includes(mutation.attributeName)
28
- ) {
29
- return;
30
- }
31
-
32
- const propName = camelCase(mutation.attributeName.replace("data-", ""));
33
- let value = mutation.target.getAttribute(mutation.attributeName);
34
-
35
- switch (value) {
36
- case "true":
37
- value = true;
38
- break;
39
- case "false":
40
- value = false;
41
- break;
42
- }
43
-
44
- component.options[propName] = value;
45
- }
46
- });
47
-
48
- Object.assign(
49
- component,
50
- Alpine.reactive({
51
- destroy() {
52
- attrObserver.disconnect();
53
- attrObserver = null;
54
-
55
- if (oldDestroy) {
56
- oldDestroy.call(this);
57
- }
58
- },
59
- })
60
- );
61
-
62
- attrObserver.observe(el, { attributes: true });
63
-
64
- component.$watch("options", (options, oldOptions) => {
65
- for (const [key, value] of Object.entries(options)) {
66
- el.setAttribute(`data-${kebabCase(key)}`, value);
67
-
68
- if (component.onOptionChange) {
69
- component.onOptionChange(key, value);
70
- }
71
- }
72
- });
73
-
74
- return component;
75
- };
76
- }
@@ -1,34 +0,0 @@
1
- export default function withSizeObserver(props = {}) {
2
- return function (component) {
3
- const resizeTarget = props.target || component.$root;
4
- const oldDestroy = component.destroy;
5
-
6
- const sizeObserver = Alpine.reactive({
7
- observer: null,
8
- handler(target) {
9
- if (component.onResize) {
10
- component.onResize(target.contentRect, target);
11
- }
12
- },
13
- });
14
-
15
- sizeObserver.observer = new ResizeObserver((entries) =>
16
- sizeObserver.handler(entries[0])
17
- );
18
-
19
- Object.assign(component, {
20
- destroy() {
21
- sizeObserver.observer.disconnect();
22
- sizeObserver.observer = null;
23
-
24
- if (oldDestroy) {
25
- oldDestroy.call(this);
26
- }
27
- },
28
- });
29
-
30
- sizeObserver.observer.observe(resizeTarget);
31
-
32
- return component;
33
- };
34
- }
@@ -1,81 +0,0 @@
1
- import tippy from "@libs/tippy";
2
-
3
- export default function withTooltip(props = {}) {
4
- function withTooltipMixin(component) {
5
- const el = component.$root;
6
- const oldDestroy = component.destroy;
7
-
8
- if (!component.hasData("tippy-content")) {
9
- component.setData("tippy-disabled", true);
10
- }
11
-
12
- const content = component.getData("tippy-content");
13
- const tooltip = tippy(el, {
14
- theme: "coco-tooltip",
15
-
16
- onShow() {
17
- if (component.onTooltipShow) {
18
- return component.onTooltipShow();
19
- } else {
20
- return component.refuteData("tippy-disabled", true);
21
- }
22
- },
23
-
24
- content() {
25
- return content;
26
- },
27
-
28
- ...props,
29
- });
30
-
31
- Object.assign(
32
- component,
33
- Alpine.reactive({
34
- tooltip: {
35
- content,
36
- instance: tooltip,
37
- originalContent: content,
38
- },
39
-
40
- getTooltip() {
41
- return this.tooltip;
42
- },
43
-
44
- setTooltip(content) {
45
- this.tooltip.content = content;
46
- },
47
-
48
- resetTooltip() {
49
- this.tooltip.content = this.tooltip.originalContent;
50
- },
51
-
52
- destroy() {
53
- if (this.tooltip && this.tooltip.instance) {
54
- this.tooltip.instance.destroy();
55
- this.tooltip = null;
56
- }
57
-
58
- if (oldDestroy) {
59
- oldDestroy.call(this);
60
- }
61
- },
62
- })
63
- );
64
-
65
- Alpine.effect(() => {
66
- if (component.tooltip && component.tooltip.instance) {
67
- const value = component.tooltip.content;
68
- if (value !== null) {
69
- component.tooltip.instance.setContent(value);
70
- component.setData("tippy-content", value);
71
- }
72
- }
73
- });
74
-
75
- return component;
76
- }
77
-
78
- withTooltipMixin.props = ["tooltip"];
79
-
80
- return withTooltipMixin;
81
- }