coveragebook_components 0.8.8 → 0.9.0

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

@@ -6,7 +6,7 @@
       @apply transition-all overflow-hidden;
       border-radius: 44px;
 
-      & > .button-element .button-content {
+      .button-content {
         @apply font-semibold;
       }
     }
@@ -23,7 +23,7 @@
         @apply bg-primary-700;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-positive-300;
       }
 
@@ -44,7 +44,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-positive-300;
       }
 
@@ -66,7 +66,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-positive-300;
       }
 
@@ -95,7 +95,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-positive-300;
       }
 
@@ -115,7 +115,7 @@
         @apply bg-negative-800;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-negative-300;
       }
 
@@ -135,7 +135,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-negative-300;
       }
 
@@ -155,7 +155,7 @@
         @apply bg-warning-800;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-warning-300;
       }
 
@@ -175,7 +175,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-warning-300;
       }
 
@@ -195,7 +195,7 @@
         @apply bg-info-800;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-info-300;
       }
 
@@ -215,7 +215,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] > .button-element .button-icon {
+      &[data-state="loading"] .button-icon {
         @apply text-info-300;
       }
 
@@ -241,21 +241,17 @@
     }
 
     &[data-theme="neutral-light"] {
-      @apply border border-transparent;
+      @apply border border-transparent bg-background-light-1 text-content-dark-1 hover:bg-background-light-2 active:bg-background-light-3;
 
-      .button-element {
-        @apply bg-background-light-1 text-content-dark-1 hover:bg-background-light-2 active:bg-background-light-3;
-      }
-
-      &[data-state="loading"] .button-element {
+      &[data-state="loading"] {
         @apply bg-background-light-1;
       }
 
-      &[data-state="active"] .button-element {
+      &[data-state="active"] {
         @apply bg-background-light-3;
       }
 
-      &[data-disabled="true"] .button-element {
+      &[data-disabled="true"] {
         @apply bg-background-light-1;
 
         .button-inner {
@@ -415,23 +411,19 @@
     }
 
     &[data-theme] {
-      .button-element {
-        @apply py-2 px-3;
-      }
+      @apply py-2 px-3;
     }
 
-    &.icon-only > .button-element .button-icon,
-    &[data-collapsed="true"] > .button-element .button-icon {
+    &.icon-only .button-icon,
+    &[data-collapsed="true"] .button-icon {
       @apply -ml-1 -mr-1;
     }
 
     &[data-theme|="text"] {
-      .button-element {
-        @apply px-2;
-      }
+      @apply px-2;
 
-      &.icon-only > .button-element .button-icon,
-      &[data-collapsed="true"] > .button-element .button-icon {
+      &.icon-only .button-icon,
+      &[data-collapsed="true"] .button-icon {
         @apply px-2;
       }
     }
@@ -448,23 +440,19 @@
     }
 
     &[data-theme] {
-      .button-element {
-        @apply py-2.5 px-4;
-      }
+      @apply py-2.5 px-4;
 
-      &.icon-only > .button-element .button-icon,
-      &[data-collapsed="true"] > .button-element .button-icon {
+      &.icon-only .button-icon,
+      &[data-collapsed="true"] .button-icon {
         @apply -ml-1.5 -mr-1.5;
       }
     }
 
     &[data-theme|="text"] {
-      .button-element {
-        @apply px-2;
-      }
+      @apply px-2;
 
-      &.icon-only > .button-element .button-icon,
-      &[data-collapsed="true"] > .button-element .button-icon {
+      &.icon-only .button-icon,
+      &[data-collapsed="true"] .button-icon {
         @apply px-2;
       }
     }
@@ -481,23 +469,19 @@
     }
 
     &[data-theme] {
-      .button-element {
-        @apply py-3 px-5;
-      }
+      @apply py-3 px-5;
 
-      &.icon-only > .button-element .button-icon,
-      &[data-collapsed="true"] > .button-element .button-icon {
+      &.icon-only .button-icon,
+      &[data-collapsed="true"] .button-icon {
         @apply -ml-2 -mr-2;
       }
     }
 
     &[data-theme|="text"] {
-      .button-element {
-        @apply px-3;
-      }
+      @apply px-3;
 
-      &.icon-only > .button-element .button-icon,
-      &[data-collapsed="true"] > .button-element .button-icon {
+      &.icon-only .button-icon,
+      &[data-collapsed="true"] .button-icon {
         @apply px-2;
       }
     }
@@ -514,23 +498,19 @@
     }
 
     &[data-theme] {
-      .button-element {
-        @apply py-4 px-6;
-      }
+      @apply py-4 px-6;
 
-      &.icon-only > .button-element .button-icon,
+      &.icon-only .button-icon,
       &[data-collapsed="true"] .button-inner {
         @apply ml-[-8px] mr-[-8px];
       }
     }
 
     &[data-theme|="text"] {
-      .button-element {
-        @apply px-3;
-      }
+      @apply px-3;
 
-      &.icon-only > .button-element .button-icon,
-      &[data-collapsed="true"] > .button-element .button-icon {
+      &.icon-only .button-icon,
+      &[data-collapsed="true"] .button-icon {
         @apply px-3;
       }
     }

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

@@ -48,15 +48,14 @@ module Coco
         }
 
         before_initialize do |kwargs|
-          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[: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[:button_element][:data] = kwargs[:button_element].fetch(:data, {}).merge(turbo_data)
+            kwargs[:data] = kwargs.fetch(:data, {}).merge(turbo_data)
             kwargs.delete(:frame)
           end
           kwargs

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

@@ -2,6 +2,11 @@
   [data-coco][data-component="app-button-group"] {
     width: fit-content;
     border-radius: 44px;
+    @apply opacity-0;
+
+    &.button-group-ready {
+      @apply opacity-100;
+    }
 
     .button-group-buttons {
       @apply flex items-center gap-x-2;
@@ -23,11 +28,11 @@
         @apply gap-x-0;
       }
 
-      .coco-button:not(:first-child) {
+      .coco-button-wrapper:not(:first-child) .coco-button {
         @apply rounded-l-none border-l-0;
       }
 
-      .coco-button:not(:last-child) {
+      .coco-button-wrapper:not(:last-child) .coco-button {
         @apply rounded-r-none;
       }
 

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

@@ -1,7 +1,8 @@
 <%= render component_tag(x: {
   data: "appButtonGroup",
   "dimensions.parent": "onResize",
-  options: "options"
+  options: "options",
+  ":class": "{'button-group-ready': ready}"
 }) do %>
   <div class="button-group-buttons" x-ref="buttons">
     <% items.each do |item| %>

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

@@ -1,15 +1,17 @@
 import { CocoComponent } from "@js/coco.js";
-import { getData } from "@helpers/alpine";
+import { getComponent } from "@helpers/alpine";
 import { createSingleton } from "@libs/tippy";
 
 export default CocoComponent("appButtonGroup", () => {
   return {
     options: ["collapsible"],
 
+    ready: false,
     containerWidth: 0,
     contentWidth: 0,
     collapsed: false,
-    tooltip: null,
+    singletonTooltip: null,
+    tooltipInstances: [],
 
     get collapsible() {
       return this.$options.collapsible !== false;
@@ -19,7 +21,7 @@ export default CocoComponent("appButtonGroup", () => {
       const buttonElements = this.$el.querySelectorAll(
         "[data-component='app-button']"
       );
-      return Array.from(buttonElements).map((el) => getData(el));
+      return Array.from(buttonElements).map((el) => getComponent(el));
     },
 
     get parent() {
@@ -29,31 +31,43 @@ export default CocoComponent("appButtonGroup", () => {
     init() {
       this.$nextTick(() => {
         if (!this.collapsible) return;
+        this.ready = true;
 
-        this.createTooltipsSingleton();
         this.onResize();
+        this.createSingletonTooltip();
       });
 
       this.$watch("collapsed", (value) => {
         this.buttons.forEach((button) => {
           button.isCollapsed = value;
         });
+        this.$nextTick(() => this.createSingletonTooltip());
       });
     },
 
-    createTooltipsSingleton() {
-      const tippys = this.buttons
-        .map((button) => {
-          return button.showTooltip() && button.$root.__x_tippy;
-        })
+    createSingletonTooltip() {
+      this.destroySingletonTooltip();
+
+      this.tooltipInstances = this.buttons
+        .map((button) => button.shouldShowTooltip() && button.tippyInstance)
         .filter((t) => t);
 
-      this.tooltip = createSingleton(tippys, {
+      this.singletonTooltip = createSingleton(this.tooltipInstances, {
         theme: "coco-tooltip",
-        onShow: () => this.collapsed,
+        delay: 100,
+        moveTransition: "transform 0.1s ease-out",
       });
     },
 
+    destroySingletonTooltip() {
+      if (this.singletonTooltip && this.singletonTooltip.destroy) {
+        this.singletonTooltip.destroy();
+        this.singletonTooltip = null;
+        this.tooltipInstances.forEach((tooltip) => tooltip.destroy());
+        this.tooltipInstances = [];
+      }
+    },
+
     onResize() {
       if (!this.collapsible) return;
 
@@ -73,9 +87,9 @@ export default CocoComponent("appButtonGroup", () => {
     },
 
     destroy() {
-      if (this.tooltip) {
-        this.tooltip.destroy();
-        this.tooltip = null;
+      if (this.singletonTooltip) {
+        this.singletonTooltip.destroy();
+        this.singletonTooltip = null;
       }
     },
   };

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

@@ -1,14 +1,10 @@
 @layer components {
   [data-coco][data-component="app-button-to"] {
-    @apply flex;
-    width: max-content;
+    @apply contents;
 
-    form {
-      @apply w-full;
-    }
-
-    &[data-fit="full"] {
-      @apply w-full;
+    form,
+    input {
+      @apply contents;
     }
   }
 }

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

@@ -1,7 +1,6 @@
 @layer components {
   [data-coco][data-component="app-color-picker-button"] {
-    @apply inline-flex;
-    width: max-content;
+    @apply contents;
 
     .picker-icon {
       @apply w-full h-full block;

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

@@ -1,7 +1,6 @@
 @layer components {
   [data-coco][data-component="app-image-picker-button"] {
-    @apply inline-flex;
-    width: max-content;
+    @apply contents;
 
     [data-component="app-image-picker"] {
       @apply rounded-md;

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

@@ -1,7 +1,6 @@
 @layer components {
   [data-coco][data-component="app-layout-picker-button"] {
-    @apply inline-flex;
-    width: max-content;
+    @apply contents;
 
     .layout-picker {
       @apply grid grid-cols-2;

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

@@ -8,9 +8,11 @@
         @apply w-full;
       }
 
-      > [data-component="app-button"],
-      > [data-component="app-button-to"],
-      > [data-component="app-menu-button"] {
+      > .coco-button-wrapper > .coco-button,
+      > [data-component="app-button-to"] .coco-button,
+      > [data-component="app-menu-button"]
+        > .coco-button-wrapper
+        > .coco-button {
         @apply hover:bg-gray-blend-50 active:bg-gray-blend-100;
 
         .button-inner {
@@ -32,7 +34,7 @@
       @apply py-1.5;
 
       .menu-item {
-        [data-component="app-button"] > .button-element {
+        [data-component="app-button"] {
           @apply px-4 py-2 text-label-sm;
 
           .button-inner {
@@ -50,7 +52,7 @@
       @apply py-2;
 
       .menu-item {
-        [data-component="app-button"] > .button-element {
+        [data-component="app-button"] {
           @apply px-5 py-2.5 text-label-md;
 
           .button-inner {

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

@@ -1,7 +1,6 @@
 @layer components {
   [data-coco][data-component="app-menu-button"] {
-    @apply inline-flex;
-    width: max-content;
+    @apply contents;
 
     &[data-fit="full"] {
       @apply w-full;

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

@@ -25,14 +25,14 @@
       @apply text-label-md text-content-light-1 font-semibold flex-grow mr-2 my-2;
     }
 
-    .coco-button .button-element {
+    .coco-button {
       @apply hover:bg-background-dark-3;
     }
 
     .snackbar-action {
       @apply flex-none ml-auto;
 
-      .coco-button .button-element {
+      .coco-button {
         @apply px-2 text-content-info-inverse;
       }
     }
@@ -40,7 +40,7 @@
     .snackbar-dismiss {
       @apply flex-none ml-auto;
 
-      .coco-button .button-element {
+      .coco-button {
         @apply text-content-light-2 hover:text-content-light-1;
       }
     }

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

@@ -1,12 +1,12 @@
 @layer components {
+  .coco-button-wrapper {
+    @apply !contents;
+  }
+
   [data-coco].coco-button {
-    @apply flex transition-colors w-auto bg-transparent text-current border border-transparent select-none flex-none;
+    @apply flex transition-colors w-auto bg-transparent text-current border border-transparent select-none flex-none no-underline outline-none focus-visible:outline-0;
     width: min-content;
 
-    .button-element {
-      @apply inline-flex w-full no-underline outline-none focus-visible:outline-0;
-    }
-
     .button-inner {
       @apply inline-flex items-center text-center mx-auto gap-2;
       width: fit-content;
@@ -34,13 +34,13 @@
 
     /* disabled */
 
-    &[data-disabled="true"] .button-element {
+    &[data-disabled="true"] {
       @apply cursor-not-allowed pointer-events-none;
     }
 
     /* loading */
 
-    &[data-state="loading"] > .button-element .button-icon {
+    &[data-state="loading"] .button-icon {
       @apply animate-spin;
     }
 
@@ -52,7 +52,7 @@
 
     /* Icons */
 
-    &[data-icon-position="end"] > .button-element {
+    &[data-icon-position="end"] {
       .button-content {
         @apply order-1;
       }
@@ -66,7 +66,7 @@
       }
     }
 
-    &.with-icon[data-collapsed="true"] > .button-element {
+    &.with-icon[data-collapsed="true"] {
       .button-content {
         display: none;
       }

data/app/components/coco/base/button/button.html.erb

@@ -1,21 +1,19 @@
-<%= render component_tag(:div,
-  x: {
-    data: x_data("button", alpine_data),
-    "@click": on_click,
-    dropdown: dropdown_opts,
-    bind: "root"
-  },
-  class: component_classes,
-) do %>
-  <%= coco_tag(button_tag_name,
-    **button_attrs,
-    class: "button-element",
-    x: {
-      "dropdown:trigger": (true if dropdown?),
-      "@click": ("checkConfirmation" if confirm?),
-      ":disabled": "disabled"
-    }
-  ) do %>
+<%= coco_tag(:div, class: "coco-button-wrapper", x: alpine_wrapper_attrs || {}) do %>
+  <%= render component_tag(button_tag,
+      class: {
+        "coco-button": true,
+        "icon-only": icon_only?,
+        "with-icon": (icon? && !icon_only?)
+      },
+      x: {
+        data: x_data("button", alpine_data),
+        bind: "root",
+        ":disabled": "disabled",
+        "dropdown:trigger": (true if dropdown?),
+        "dropdown:anchor": (true if dropdown?),
+        "@click": ("#{"checkConfirmation($event);" if confirm?} #{on_click}" if confirm? || on_click.present?)
+      }
+    ) do %>
     <span class="button-inner">
       <% states.each do |name, props| %>
         <% if props[:icon].present? %>

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

@@ -11,12 +11,14 @@ export default CocoComponent("button", (data = {}) => {
     lastState: null,
     stateTooltips: data.tooltips || {},
     tooltipText: null,
-    dropdown: null,
 
     ...(data.props || {}),
 
     init() {
       this.lastState = this.state;
+      this.checkConfirmation = this.checkConfirmation.bind(this);
+      this.approveAndRun = this.approveAndRun.bind(this);
+      this.shouldShowTooltip = this.shouldShowTooltip.bind(this);
 
       this.$nextTick(() => {
         if (this.$options.confirm) {
@@ -53,7 +55,7 @@ export default CocoComponent("button", (data = {}) => {
       }
     },
 
-    showTooltip() {
+    shouldShowTooltip() {
       return !!this.tooltipText;
     },
 
@@ -65,18 +67,8 @@ export default CocoComponent("button", (data = {}) => {
       this.$options.disabled = value;
     },
 
-    /* dropdown */
-
-    hideDropdown() {
-      if (this.dropdown) {
-        this.dropdown.hide();
-      }
-    },
-
-    showDropdown() {
-      if (this.dropdown) {
-        this.dropdown.show();
-      }
+    get tippyInstance() {
+      return this.$root.__x_tippy;
     },
 
     /* confirmation */
@@ -189,10 +181,6 @@ export default CocoComponent("button", (data = {}) => {
       "x-options": "options",
       "x-tooltip": "tooltipText",
       "x-effect": "setTooltipText",
-      "@confirmation:confirm": "approveAndRun",
-      "@confirmation:cancel": "cancelConfirmation",
-      "@dropdown:show": "setState('active')",
-      "@dropdown:hide": "resetState()",
     },
   };
 });