coveragebook_components 0.7.1 → 0.7.3

data/app/components/coco/app/elements/link/link.rb

@@ -8,6 +8,7 @@ module Coco
         THEMES = %W[positive primary warning negative info neutral-dark neutral-light] << nil
 
         accepts_option :theme, from: THEMES
+        accepts_option :underline, from: [true, false]
       end
     end
   end

data/app/components/coco/app/elements/menu/menu.css

@@ -8,7 +8,7 @@
       }
 
       > [data-component="app-button"],
-      > [data-component="app-form-button"],
+      > [data-component="app-button-to"],
       > [data-component="app-menu-button"] {
         @apply hover:bg-gray-blend-50 active:bg-gray-blend-100;
 

data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.html.erb

@@ -8,7 +8,8 @@
         "@keydown.enter.prevent": (true unless multiline?),
         "@input": "onResize",
         ref: "textarea",
-        "model.fill.debounce": "value"
+        "model.fill.debounce": "value",
+        "dimensions": "onResize"
       }),
       **@textarea_args
     ) %>

data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.js

@@ -1,10 +1,7 @@
 import { CocoComponent } from "@js/coco";
-import { withSizeObserver } from "@js/base/mixins";
 
 export default CocoComponent("appSeamlessTextarea", () => {
   return {
-    use: [withSizeObserver()],
-
     height: null,
     observer: null,
     value: null,
@@ -27,11 +24,8 @@ export default CocoComponent("appSeamlessTextarea", () => {
       const textarea = this.$refs.textarea;
 
       if (textarea) {
-        const styles = window.getComputedStyle(textarea);
-        const fontSize = styles.getPropertyValue("font-size");
-
         textarea.style.height = "4px";
-        let newHeight = textarea.scrollHeight;
+        const newHeight = textarea.scrollHeight;
         textarea.style.height = `${newHeight}px`;
 
         if (this.height !== newHeight) {

data/app/components/coco/app/elements/snackbar/snackbar.js

@@ -2,8 +2,6 @@ import { CocoComponent } from "@js/coco";
 
 export default CocoComponent("appSnackbar", () => {
   return {
-    use: false,
-
     notificationType: "snackbar",
     options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
 

data/app/components/coco/app/elements/toast/toast.css

@@ -11,7 +11,7 @@
 
     &[data-position="fixed"] {
       @apply fixed top-8 right-8;
-      z-index: 1000;
+      z-index: 10001;
     }
 
     /* Transitions */

data/app/components/coco/app/elements/toast/toast.js

@@ -2,8 +2,6 @@ import { CocoComponent } from "@js/coco";
 
 export default CocoComponent("appToast", () => {
   return {
-    use: false,
-
     notificationType: "toast",
     options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
 

data/app/components/coco/base/button/button.js

@@ -3,8 +3,6 @@ import { camelCase } from "lodash";
 
 export default CocoComponent("button", (data = {}) => {
   return {
-    use: false,
-
     options: ["state", "confirm", "size", "disabled", "collapsible"],
 
     isCollapsed: false,

data/app/components/coco/base/button/button.rb

@@ -74,11 +74,10 @@ module Coco
       end
     end
 
-    attr_reader :on_click, :resize, :props, :button_attrs
+    attr_reader :on_click, :resize, :button_attrs
 
-    def initialize(click: nil, resize: nil, props: nil, states: nil, loading: false, active: false, button_element: {}, **kwargs)
+    def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, button_element: {}, **kwargs)
       @on_click = click
-      @props = props.to_h
       @resize = resize.to_h
       @states = states.to_h
       @loading = loading
@@ -183,12 +182,7 @@ module Coco
     end
 
     def alpine_data
-      if props.present? || state_tooltips.present?
-        {
-          tooltips: (state_tooltips if state_tooltips.present?),
-          props: (props if props.present?)
-        }.compact
-      end
+      {tooltips: state_tooltips} if state_tooltips.present?
     end
 
     private

data/app/components/coco/base/dropdown/dropdown.js

@@ -1,7 +1,5 @@
 import { CocoComponent } from "@js/coco";
 
 export default CocoComponent("dropdown", () => {
-  return {
-    use: false,
-  };
+  return {};
 });

data/app/components/coco/base/link/link.css

@@ -2,23 +2,23 @@
   [data-coco].coco-link {
     @apply inline-flex items-center;
 
-    &[data-icon-position="start"] {
-      .link-text {
-        @apply order-2;
-      }
-
-      [data-component="icon"] {
+    &.with-icon {
+      > [data-component="icon"] {
         @apply order-1 mr-[0.4em];
       }
-    }
 
-    &[data-icon-position="end"] {
       .link-text {
-        @apply order-1 mr-[0.4em];
+        @apply order-2;
       }
 
-      [data-component="icon"] {
-        @apply order-2;
+      &[data-icon-position="end"] {
+        .link-text {
+          @apply order-1 mr-[0.4em];
+        }
+
+        [data-component="icon"] {
+          @apply order-2 mr-0;
+        }
       }
     }
   }

data/app/components/coco/base/link/link.rb

@@ -4,12 +4,8 @@ module Coco
     include Concerns::ActsAsLink
     include Concerns::WithIcon
 
-    after_initialize do
-      get_option(:icon, :position).default = "start"
-    end
-
     def call
-      render component_tag(class: "coco-link") do
+      render component_tag(class: ["coco-link", ("with-icon" if icon?)]) do
         safe_join([
           icon,
           icon? ? tag.span(link_text, class: "link-text") : link_text

data/app/components/coco/base/modal_dialog/modal_dialog.css

@@ -9,7 +9,7 @@
     }
 
     .modal-dialog-title {
-      @apply text-lg pr-6 w-full font-semibold truncate;
+      @apply text-lg pr-6 w-full font-bold truncate;
     }
 
     .modal-dialog-close {

data/app/components/coco/concerns/acts_as_button_group.rb

@@ -9,7 +9,7 @@ module Coco
           divider: ->(**kwargs) { tag.div(class: "divider") },
           button: ->(**kwargs) {
             if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
-              App::Elements::FormButton.new(**button_kwargs(kwargs, :form_button))
+              App::Elements::ButtonTo.new(**button_kwargs(kwargs, :button_to))
             else
               App::Elements::Button.new(**button_kwargs(kwargs, :button))
             end

data/app/helpers/coco/app_helper.rb

@@ -2,6 +2,19 @@ module Coco
   module AppHelper
     def coco_link(*args, **kwargs, &block)
       href, content = args[0..2].reverse!
+
+      if kwargs.key?(:modal)
+        modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
+        kwargs[:data] = kwargs.fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
+        kwargs.delete(:modal)
+      end
+
+      if kwargs.key?(:frame)
+        turbo_data = {turbo: true, turbo_frame: kwargs[:frame]}
+        kwargs[:data] = kwargs.fetch(:data, {}).merge(turbo_data)
+        kwargs.delete(:frame)
+      end
+
       link = Coco::App::Elements::Link.new(href: href, **kwargs)
       link = link.with_content(content) unless block
 
@@ -10,81 +23,91 @@ module Coco
 
     def coco_button(href = nil, **kwargs, &block)
       button = if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
-        "FormButton"
+        "ButtonTo"
       else
         "Button"
       end
 
+      kwargs[:button_element] ||= {}
+
+      if kwargs.key?(:modal)
+        modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
+        kwargs[:button_element][:data] = kwargs[:button_element].fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
+        kwargs.delete(:modal)
+      end
+
+      if kwargs.key?(:frame)
+        turbo_data = {turbo: true, turbo_frame: kwargs[:frame]}
+        kwargs[:button_element][:data] = kwargs[:button_element].fetch(:data, {}).merge(turbo_data)
+        kwargs.delete(:frame)
+      end
+
       component = "Coco::App::Elements::#{button}".constantize.new(href: href, **kwargs)
       render component, &block
     end
 
-    def coco_form_button(**kwargs, &block)
-      render Coco::App::Elements::FormButton.new(**kwargs), &block
-    end
-
-    def coco_menu_button(**kwargs, &block)
-      render Coco::App::Elements::MenuButton.new(**kwargs), &block
+    def coco_menu_button(**, &block)
+      render Coco::App::Elements::MenuButton.new(**), &block
     end
 
-    def coco_confirm_button(href = nil, **kwargs, &block)
-      render Coco::App::Elements::ConfirmButton.new(href: href, **kwargs), &block
+    def coco_confirm_button(href = nil, **, &block)
+      render Coco::App::Elements::ConfirmButton.new(href: href, **), &block
     end
 
-    def coco_color_picker_button(**kwargs, &block)
-      render Coco::App::Elements::ColorPickerButton.new(**kwargs), &block
+    def coco_color_picker_button(**, &block)
+      render Coco::App::Elements::ColorPickerButton.new(**), &block
     end
 
-    def coco_image_picker_button(**kwargs, &block)
-      render Coco::App::Elements::ImagePickerButton.new(**kwargs), &block
+    def coco_image_picker_button(**, &block)
+      render Coco::App::Elements::ImagePickerButton.new(**), &block
     end
 
-    def coco_layout_picker_button(**kwargs, &block)
-      render Coco::App::Elements::LayoutPickerButton.new(**kwargs), &block
+    def coco_layout_picker_button(**, &block)
+      render Coco::App::Elements::LayoutPickerButton.new(**), &block
     end
 
-    def coco_dropdown_button(**kwargs, &block)
-      render Coco::App::Elements::DropdownButton.new(**kwargs), &block
+    def coco_dropdown_button(**, &block)
+      render Coco::App::Elements::DropdownButton.new(**), &block
     end
 
-    def coco_button_group(**kwargs, &block)
-      render Coco::App::Elements::ButtonGroup.new(**kwargs), &block
+    def coco_button_group(**, &block)
+      render Coco::App::Elements::ButtonGroup.new(**), &block
     end
 
-    def coco_toolbar(**kwargs, &block)
-      render Coco::App::Elements::Toolbar.new(**kwargs), &block
+    def coco_toolbar(**, &block)
+      render Coco::App::Elements::Toolbar.new(**), &block
     end
 
-    def coco_seamless_textarea(**kwargs, &block)
-      render Coco::App::Elements::SeamlessTextarea.new(**kwargs), &block
+    def coco_seamless_textarea(**, &block)
+      render Coco::App::Elements::SeamlessTextarea.new(**), &block
     end
 
-    def coco_snackbar(**kwargs, &block)
-      render Coco::App::Elements::Snackbar.new(**kwargs), &block
+    def coco_snackbar(**, &block)
+      render Coco::App::Elements::Snackbar.new(**), &block
     end
 
-    def coco_notice(**kwargs, &block)
-      render Coco::App::Elements::Notice.new(**kwargs), &block
+    def coco_notice(**, &block)
+      render Coco::App::Elements::Notice.new(**), &block
     end
 
-    def coco_toast(**kwargs, &block)
-      render Coco::App::Elements::Toast.new(**kwargs), &block
+    def coco_toast(**, &block)
+      render Coco::App::Elements::Toast.new(**), &block
     end
 
-    def coco_system_banner(**kwargs, &block)
-      render Coco::App::Elements::SystemBanner.new(**kwargs), &block
+    def coco_system_banner(**, &block)
+      render Coco::App::Elements::SystemBanner.new(**), &block
     end
 
-    def coco_form_with(**kwargs, &block)
-      form_with(**kwargs, builder: Coco::AppFormBuilder, &block)
+    def coco_form_with(**, &block)
+      form_with(**, builder: Coco::AppFormBuilder, &block)
     end
 
-    def coco_form_for(*args, **kwargs, &block)
-      form_for(*args, **kwargs, builder: Coco::AppFormBuilder, &block)
+    def coco_form_for(*, **, &block)
+      form_for(*, **, builder: Coco::AppFormBuilder, &block)
     end
 
-    def coco_fields(**kwargs, &block)
-      fields(**kwargs, builder: Coco::AppFormBuilder, &block)
+    def coco_fields(**, &block)
+      fields(**, builder: Coco::AppFormBuilder, &block)
     end
   end
 end

data/app/helpers/coco/base_helper.rb

@@ -39,10 +39,10 @@ module Coco
       end
     end
 
-    def coco_modal_link(*, data: {}, modal: nil, **kwargs, &)
+    def coco_link_to_modal(*, data: {}, modal: nil, **kwargs, &)
       kwargs[:data] = coco_modal_data_attributes(modal || "default").merge(data)
 
-      link_to(*, **kwargs, &)
+      coco_link_to(*, **kwargs, &)
     end
 
     def coco_modal_frame_id(name = "default")

data/app/helpers/coco/url_helper.rb

@@ -5,27 +5,21 @@ module Coco
     def coco_link_to(name = nil, options = nil, html_options = nil, &block)
       html_options, options, name = options, name, block if block
       options ||= {}
-
       html_options = Coco::ActionViewHelper.convert_options_to_data_attributes(options, html_options)
-      html_options[:classes] = html_options[:class]
-      html_options.delete(:class)
 
       href = Coco::ActionViewHelper.url_target(name, options)
 
-      link = Coco::Link::Component.new(href: href, **html_options)
-      link = link.with_content(name) unless block
-
-      render(link, &block)
+      coco_link(name, href, **html_options.symbolize_keys!, &block)
     end
 
-    def coco_button_to(content = nil, options = nil, html_options = nil, &block)
-      html_options, options = options, content if block
+    def coco_button_to(name = nil, options = nil, html_options = nil, &block)
+      html_options, options = options, name if block
       options ||= {}
       html_options ||= {}
+      html_options.symbolize_keys!
 
-      button = Coco::App::Elements::FormButton.new(action: options, **html_options)
-      button = button.with_content(content) unless block
-
+      button = Coco::App::Elements::ButtonTo.new(action: options, type: :submit, **html_options)
+      button = button.with_content(name) unless block
       render(button, &block)
     end
   end

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.7.1"
+  VERSION = "0.7.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.7.3
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-22 00:00:00.000000000 Z
+date: 2023-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1323,17 +1323,7 @@ files:
 - app/assets/img/test/slides/slide-foreground-portrait.jpg
 - app/assets/js/app.js
 - app/assets/js/app/components.js
-- app/assets/js/app/mixins/dropdown.js
-- app/assets/js/app/mixins/index.js
 - app/assets/js/base/components.js
-- app/assets/js/base/mixins/attr-observer.js
-- app/assets/js/base/mixins/attrs.js
-- app/assets/js/base/mixins/dropdown.js
-- app/assets/js/base/mixins/index.js
-- app/assets/js/base/mixins/options.js
-- app/assets/js/base/mixins/size-observer.js
-- app/assets/js/base/mixins/tooltip.js
-- app/assets/js/base/mixins/undo.js
 - app/assets/js/book.js
 - app/assets/js/book/components.js
 - app/assets/js/coco.js
@@ -1345,13 +1335,14 @@ files:
 - app/assets/js/helpers/path.js
 - app/assets/js/helpers/screenshot.js
 - app/assets/js/helpers/turbo_events.js
+- app/assets/js/libs/alpine/directives/destroy.js
+- app/assets/js/libs/alpine/directives/dimensions.js
+- app/assets/js/libs/alpine/directives/dropdown.js
+- app/assets/js/libs/alpine/directives/notification.js
+- app/assets/js/libs/alpine/directives/options.js
+- app/assets/js/libs/alpine/directives/tooltip.js
+- app/assets/js/libs/alpine/directives/undo.js
 - app/assets/js/libs/alpine/index.js
-- app/assets/js/libs/alpine/plugins/destroy.js
-- app/assets/js/libs/alpine/plugins/dimensions.js
-- app/assets/js/libs/alpine/plugins/dropdown.js
-- app/assets/js/libs/alpine/plugins/notification.js
-- app/assets/js/libs/alpine/plugins/options.js
-- app/assets/js/libs/alpine/plugins/tooltip.js
 - app/assets/js/libs/alpine/utils/tippy_modifiers.js
 - app/assets/js/libs/tippy/index.js
 - app/assets/js/libs/tippy/plugins/hide_on_esc.js
@@ -1381,6 +1372,9 @@ files:
 - app/components/coco/app/elements/button_group/button_group.html.erb
 - app/components/coco/app/elements/button_group/button_group.js
 - app/components/coco/app/elements/button_group/button_group.rb
+- app/components/coco/app/elements/button_to/button_to.css
+- app/components/coco/app/elements/button_to/button_to.html.erb
+- app/components/coco/app/elements/button_to/button_to.rb
 - app/components/coco/app/elements/color_picker/color_picker.css
 - app/components/coco/app/elements/color_picker/color_picker.html.erb
 - app/components/coco/app/elements/color_picker/color_picker.js
@@ -1393,9 +1387,6 @@ files:
 - app/components/coco/app/elements/confirm_panel/confirm_panel.html.erb
 - app/components/coco/app/elements/confirm_panel/confirm_panel.js
 - app/components/coco/app/elements/confirm_panel/confirm_panel.rb
-- app/components/coco/app/elements/form_button/form_button.css
-- app/components/coco/app/elements/form_button/form_button.html.erb
-- app/components/coco/app/elements/form_button/form_button.rb
 - app/components/coco/app/elements/image_picker/image_picker.css
 - app/components/coco/app/elements/image_picker/image_picker.html.erb
 - app/components/coco/app/elements/image_picker/image_picker.js

data/app/assets/js/app/mixins/dropdown.js

@@ -1,18 +0,0 @@
-import withDropdown from "@js/base/mixins/dropdown";
-
-export default function withAppDropdown(props = {}) {
-  const initDropdown = withDropdown({
-    theme: "coco-app-dropdown",
-    placement: "bottom-start",
-    offset: [0, 0],
-    ...props,
-  });
-
-  function withAppDropdownMixin(component) {
-    return initDropdown(component);
-  }
-
-  withAppDropdownMixin.props = initDropdown.props;
-
-  return withAppDropdownMixin;
-}

data/app/assets/js/app/mixins/index.js

@@ -1,3 +0,0 @@
-import withAppDropdown from "./dropdown";
-
-export { withAppDropdown };

data/app/assets/js/base/mixins/attr-observer.js

@@ -1,54 +0,0 @@
-const ignoredAttributes = ["class", "style"];
-
-export default function withAttrObserver(props = {}) {
-  return function (component) {
-    const oldDestroy = component.destroy;
-    const toIgnore = props.ignore || ignoredAttributes;
-
-    const attrObserver = Alpine.reactive({
-      observer: null,
-      handler(attrName, newValue, oldValue, target) {
-        if (component.onAttrChange) {
-          component.onAttrChange(attrName, newValue, oldValue, target);
-        }
-      },
-    });
-
-    attrObserver.observer = new MutationObserver((mutationsList) => {
-      for (const mutation of mutationsList) {
-        if (
-          mutation.type !== "attributes" ||
-          toIgnore.includes(mutation.attributeName)
-        ) {
-          return;
-        }
-
-        const { target } = mutation;
-
-        attrObserver.handler(
-          mutation.attributeName,
-          target.getAttribute(mutation.attributeName),
-          mutation.oldValue,
-          target
-        );
-      }
-    });
-
-    Object.assign(component, {
-      destroy() {
-        attrObserver.observer.disconnect();
-        attrObserver.observer = null;
-
-        if (oldDestroy) {
-          oldDestroy.call(this);
-        }
-      },
-    });
-
-    attrObserver.observer.observe(component.$root, { attributes: true });
-
-    return component;
-  };
-}
-
-export { ignoredAttributes };

data/app/assets/js/base/mixins/attrs.js

@@ -1,58 +0,0 @@
-export default function withAttrs(props = {}) {
-  return function (component) {
-    return Object.assign(
-      component,
-      Alpine.reactive({
-        getAttr(name) {
-          return this.$root.getAttribute(name);
-        },
-
-        setAttr(name, value) {
-          this.$root.setAttribute(name, value);
-          return this;
-        },
-
-        hasAttr(name) {
-          return this.$root.hasAttribute(name);
-        },
-
-        removeAttr(name) {
-          component.$root.removeAttribute(name);
-          return this;
-        },
-
-        assertAttr(name, testValue) {
-          return this.$root.getAttribute(name) === String(testValue);
-        },
-
-        refuteAttr(name, testValue) {
-          return !this.assertAttr(name, testValue);
-        },
-
-        getData(name) {
-          return this.getAttr(`data-${name}`);
-        },
-
-        setData(name, value) {
-          return this.setAttr(`data-${name}`, value);
-        },
-
-        hasData(name) {
-          return this.hasAttr(`data-${name}`);
-        },
-
-        removeData(name) {
-          return this.removeAttr(`data-${name}`);
-        },
-
-        assertData(name, testValue) {
-          return this.assertAttr(`data-${name}`, testValue);
-        },
-
-        refuteData(name, testValue) {
-          return !this.assertData(name, testValue);
-        },
-      })
-    );
-  };
-}