daisyui 1.3.1 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8372a79aabdd1c0a9d0c4aeb43c6b31d936e9dc3f1b88910ffc36096ee18abc
-  data.tar.gz: d81e3d626b9eedc22ea83460aa1516ef7741769d9979db6ac65f56b6d12ad051
+  metadata.gz: fe7d742ea5321a80e5f6689bd3df51ad59aae0a5ee9ee0617f8f237a654ebad4
+  data.tar.gz: 9ff82a86a33f3d01165f59b3b94e9e6867bd43c43ab190c0bfbc7f14fa49e546
 SHA512:
-  metadata.gz: c282bc8ca3c715f0a3f867c004ef0e2baf5cfb7205c1108d91d0a57bd6c10c7316ffc848907778eee3af1aa9da58cf720050149914addcafd9006a0089b17124
-  data.tar.gz: 17dd67c0f8d552f8fc9d9213b5476fd08e3772ea74fc989db65eb183f628ee0324446b0087d69a73393add3faea8cc9742fc32dcdd78b30300c186fa71777429
+  metadata.gz: fe53957f3b594373cfdbd7865a3e143f5526e679c9dcbb8d8da1eef10a95a0cccf0d55dcf5c33889ad268ed382b3dd21f56b8b74e28f2adc289697e8cf10fedc
+  data.tar.gz: 3bee4c79945a177706b8f30231b5f4f0a2aab66aa3dd4031842a9d3e603cc09621ebefce8a7cd79062f5e9a9f0bc1823a1701ba10953c687a3d5c03a0b36bd10

data/CHANGELOG.md

@@ -1,7 +1,46 @@
 ## [Unreleased]
 
+### Upgrading to 2.0
+
+Components now merge their classes: when two classes conflict, the later one
+wins. `Button(:sm, class: "btn-lg")` renders `btn btn-lg` (1.x rendered
+`btn btn-sm btn-lg`), and `Card(class: "p-2 p-4")` renders `card p-4`.
+
+- Conflicts are resolved for Tailwind utilities (a port of tailwind_merge 1.5.6)
+  and for daisyUI modifiers a component declares as alternatives in one group
+  (sizes, colors, styles, placements, mask shapes, loading styles, ...).
+  Responsive and state variants (`sm:`, `hover:`) are separate slots.
+- Register custom font sizes and other non-color utilities, or they may be
+  misread. An unregistered `text-display` reads as a color and is dropped by a
+  later `text-error`:
+
+  ```ruby
+  DaisyUI.configure do |config|
+    config.class_merge.utility("text-display", like: "text-lg")
+  end
+  ```
+
+- To keep the 1.x behaviour (plain join), disable merging:
+
+  ```ruby
+  DaisyUI.configure { |config| config.class_merge.enabled = false }
+  ```
+
+- The Tailwind utilities `table`, `collapse`, `filter` and `text-rotate` are treated as the
+  daisyUI component classes of the same name and never conflict with `hidden`,
+  `invisible` and friends.
+
 ### Added
 
+- `DaisyUI::ClassMerge.merge(*parts)`: a daisyUI-aware class merger with no
+  runtime dependencies. Configure it with `config.class_merge` (`enabled`,
+  `utility`, `theme`, `class_groups`, `conflicts`).
+- `register_modifiers` accepts groups of alternatives,
+  `register_modifiers(size: { sm: "btn-sm", lg: "btn-lg" }, wide: "btn-wide")`,
+  exposed as `.modifier_groups`. Every gem component declares its groups, and
+  app components subclassing `DaisyUI::Base` can do the same.
+  `config.modifiers.add` takes `group:` to join one.
+
 - Aura component (DaisyUI 5.6) with style variants (dual, rainbow, holo, gold, silver, glow) and sizes
 - Megamenu component (DaisyUI 5.6) with wide, full, vertical modifiers, sizes, and active_indicator sub-component
 - OTP component (DaisyUI 5.6) for one-time password inputs with configurable digit count, joined modifier, sizes, and color variants
@@ -28,6 +67,8 @@
 
 ### Changed
 
+- Maintainers cut releases with `bin/release` (`list`, `--dry-run`, `patch`/`minor`/`major`/`X.Y.Z`), which checks the lockfiles for gems that do not accept the new version yet and then drives `rake release`.
+
 - Range component: added range-vertical modifier for vertical orientation (DaisyUI 5.6)
 - Tooltip component: added alignment modifiers (tooltip-start, tooltip-center, tooltip-end) and tooltip-content sub-component (DaisyUI 5.6)
 

data/LICENSE-tailwind_merge.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Garen J. Torikian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -119,6 +119,64 @@ module.exports = {
 };
 ```
 
+## Class merging
+
+Components merge their classes so the last conflicting class wins, for Tailwind
+utilities and daisyUI modifiers alike:
+
+```ruby
+Button(:sm, class: "btn-lg")          # => class="btn btn-lg"
+Badge(:primary, class: "badge-error") # => class="badge badge-error"
+Card(class: "p-2 p-4")                # => class="card p-4"
+```
+
+Tailwind conflicts follow [tailwind_merge](https://github.com/gjtorikian/tailwind_merge)
+(its engine is ported into the gem as `DaisyUI::ClassMerge`, with no runtime
+dependency). daisyUI modifiers conflict when the component declares them as
+alternatives in one group: `btn-sm btn-lg` keeps `btn-lg`, while
+`dropdown-top dropdown-end` keeps both (placement and alignment are separate
+groups). Ungrouped modifiers (`btn-wide`, `btn-active`) never conflict.
+Component base classes such as `table` and `collapse` are never dropped.
+
+Register custom utilities so the merger knows what they are. Unregistered,
+`text-display` reads as a color and a later `text-error` drops it. Custom
+colors (`bg-brand`, `text-brand`) need no registration.
+
+```ruby
+DaisyUI.configure do |config|
+  # text-display and text-hero are font sizes, like text-lg
+  config.class_merge.utility("text-display", "text-hero", like: "text-lg")
+
+  # Extend a Tailwind theme scale: p-gutter, m-gutter, gap-gutter, ...
+  config.class_merge.theme(spacing: %w[gutter])
+end
+```
+
+`class_groups` and `conflicts` take raw tailwind_merge groups for anything
+else.
+
+Your own components declare groups the same way the gem's do, by nesting
+modifiers under a group name:
+
+```ruby
+class Widget < DaisyUI::Base
+  register_modifiers(
+    size: { sm: "widget-sm", lg: "widget-lg" }, # widget-sm widget-lg -> widget-lg
+    round: "widget-round"                       # ungrouped, never conflicts
+  )
+end
+
+# Configured modifiers can join a component's group too
+DaisyUI.configure do |config|
+  config.modifiers.add(:huge, classes: "btn-huge", component: DaisyUI::Button, group: :size)
+end
+```
+
+Merge in your own components with `DaisyUI::ClassMerge.merge(*parts)` (strings,
+arrays, `nil` and `false`; returns a frozen String). Opt out globally with
+`config.class_merge.enabled = false`, or per component by overriding the
+private `merge_classes`.
+
 # Compatibility Notes
 
 ## @tailwindcss/forms plugin

data/lib/daisy_ui/accordion.rb

@@ -29,34 +29,38 @@ module DaisyUI
     attr_reader :name, :checked, :title_block, :title_options
 
     register_modifiers(
-      # "sm:collapse-arrow"
-      # "@sm:collapse-arrow"
-      # "md:collapse-arrow"
-      # "@md:collapse-arrow"
-      # "lg:collapse-arrow"
-      # "@lg:collapse-arrow"
-      arrow: "collapse-arrow",
-      # "sm:collapse-plus"
-      # "@sm:collapse-plus"
-      # "md:collapse-plus"
-      # "@md:collapse-plus"
-      # "lg:collapse-plus"
-      # "@lg:collapse-plus"
-      plus: "collapse-plus",
-      # "sm:collapse-open"
-      # "@sm:collapse-open"
-      # "md:collapse-open"
-      # "@md:collapse-open"
-      # "lg:collapse-open"
-      # "@lg:collapse-open"
-      open: "collapse-open",
-      # "sm:collapse-close"
-      # "@sm:collapse-close"
-      # "md:collapse-close"
-      # "@md:collapse-close"
-      # "lg:collapse-close"
-      # "@lg:collapse-close"
-      close: "collapse-close"
+      icon: {
+        # "sm:collapse-arrow"
+        # "@sm:collapse-arrow"
+        # "md:collapse-arrow"
+        # "@md:collapse-arrow"
+        # "lg:collapse-arrow"
+        # "@lg:collapse-arrow"
+        arrow: "collapse-arrow",
+        # "sm:collapse-plus"
+        # "@sm:collapse-plus"
+        # "md:collapse-plus"
+        # "@md:collapse-plus"
+        # "lg:collapse-plus"
+        # "@lg:collapse-plus"
+        plus: "collapse-plus"
+      },
+      state: {
+        # "sm:collapse-open"
+        # "@sm:collapse-open"
+        # "md:collapse-open"
+        # "@md:collapse-open"
+        # "lg:collapse-open"
+        # "@lg:collapse-open"
+        open: "collapse-open",
+        # "sm:collapse-close"
+        # "@sm:collapse-close"
+        # "md:collapse-close"
+        # "@md:collapse-close"
+        # "lg:collapse-close"
+        # "@lg:collapse-close"
+        close: "collapse-close"
+      }
     )
   end
 end

data/lib/daisy_ui/alert.rb

@@ -9,100 +9,103 @@ module DaisyUI
     end
 
     register_modifiers(
-      # Styles
-      # "sm:alert-outline"
-      # "@sm:alert-outline"
-      # "md:alert-outline"
-      # "@md:alert-outline"
-      # "lg:alert-outline"
-      # "@lg:alert-outline"
-      outline: "alert-outline",
-      # "sm:alert-dash"
-      # "@sm:alert-dash"
-      # "md:alert-dash"
-      # "@md:alert-dash"
-      # "lg:alert-dash"
-      # "@lg:alert-dash"
-      dash: "alert-dash",
-      # "sm:alert-soft"
-      # "@sm:alert-soft"
-      # "md:alert-soft"
-      # "@md:alert-soft"
-      # "lg:alert-soft"
-      # "@lg:alert-soft"
-      soft: "alert-soft",
-      # Directions
-      # "sm:alert-vertical"
-      # "@sm:alert-vertical"
-      # "md:alert-vertical"
-      # "@md:alert-vertical"
-      # "lg:alert-vertical"
-      # "@lg:alert-vertical"
-      vertical: "alert-vertical",
-      # "sm:alert-horizontal"
-      # "@sm:alert-horizontal"
-      # "md:alert-horizontal"
-      # "@md:alert-horizontal"
-      # "lg:alert-horizontal"
-      # "@lg:alert-horizontal"
-      horizontal: "alert-horizontal",
-      # Colors
-      # "sm:alert-info"
-      # "@sm:alert-info"
-      # "md:alert-info"
-      # "@md:alert-info"
-      # "lg:alert-info"
-      # "@lg:alert-info"
-      info: "alert-info",
-      # "sm:alert-success"
-      # "@sm:alert-success"
-      # "md:alert-success"
-      # "@md:alert-success"
-      # "lg:alert-success"
-      # "@lg:alert-success"
-      success: "alert-success",
-      # "sm:alert-warning"
-      # "@sm:alert-warning"
-      # "md:alert-warning"
-      # "@md:alert-warning"
-      # "lg:alert-warning"
-      # "@lg:alert-warning"
-      warning: "alert-warning",
-      # "sm:alert-error"
-      # "@sm:alert-error"
-      # "md:alert-error"
-      # "@md:alert-error"
-      # "lg:alert-error"
-      # "@lg:alert-error"
-      error: "alert-error",
-      # "sm:alert-neutral"
-      # "@sm:alert-neutral"
-      # "md:alert-neutral"
-      # "@md:alert-neutral"
-      # "lg:alert-neutral"
-      # "@lg:alert-neutral"
-      neutral: "alert-neutral",
-      # "sm:alert-primary"
-      # "@sm:alert-primary"
-      # "md:alert-primary"
-      # "@md:alert-primary"
-      # "lg:alert-primary"
-      # "@lg:alert-primary"
-      primary: "alert-primary",
-      # "sm:alert-secondary"
-      # "@sm:alert-secondary"
-      # "md:alert-secondary"
-      # "@md:alert-secondary"
-      # "lg:alert-secondary"
-      # "@lg:alert-secondary"
-      secondary: "alert-secondary",
-      # "sm:alert-accent"
-      # "@sm:alert-accent"
-      # "md:alert-accent"
-      # "@md:alert-accent"
-      # "lg:alert-accent"
-      # "@lg:alert-accent"
-      accent: "alert-accent"
+      style: {
+        # "sm:alert-outline"
+        # "@sm:alert-outline"
+        # "md:alert-outline"
+        # "@md:alert-outline"
+        # "lg:alert-outline"
+        # "@lg:alert-outline"
+        outline: "alert-outline",
+        # "sm:alert-dash"
+        # "@sm:alert-dash"
+        # "md:alert-dash"
+        # "@md:alert-dash"
+        # "lg:alert-dash"
+        # "@lg:alert-dash"
+        dash: "alert-dash",
+        # "sm:alert-soft"
+        # "@sm:alert-soft"
+        # "md:alert-soft"
+        # "@md:alert-soft"
+        # "lg:alert-soft"
+        # "@lg:alert-soft"
+        soft: "alert-soft"
+      },
+      direction: {
+        # "sm:alert-vertical"
+        # "@sm:alert-vertical"
+        # "md:alert-vertical"
+        # "@md:alert-vertical"
+        # "lg:alert-vertical"
+        # "@lg:alert-vertical"
+        vertical: "alert-vertical",
+        # "sm:alert-horizontal"
+        # "@sm:alert-horizontal"
+        # "md:alert-horizontal"
+        # "@md:alert-horizontal"
+        # "lg:alert-horizontal"
+        # "@lg:alert-horizontal"
+        horizontal: "alert-horizontal"
+      },
+      color: {
+        # "sm:alert-info"
+        # "@sm:alert-info"
+        # "md:alert-info"
+        # "@md:alert-info"
+        # "lg:alert-info"
+        # "@lg:alert-info"
+        info: "alert-info",
+        # "sm:alert-success"
+        # "@sm:alert-success"
+        # "md:alert-success"
+        # "@md:alert-success"
+        # "lg:alert-success"
+        # "@lg:alert-success"
+        success: "alert-success",
+        # "sm:alert-warning"
+        # "@sm:alert-warning"
+        # "md:alert-warning"
+        # "@md:alert-warning"
+        # "lg:alert-warning"
+        # "@lg:alert-warning"
+        warning: "alert-warning",
+        # "sm:alert-error"
+        # "@sm:alert-error"
+        # "md:alert-error"
+        # "@md:alert-error"
+        # "lg:alert-error"
+        # "@lg:alert-error"
+        error: "alert-error",
+        # "sm:alert-neutral"
+        # "@sm:alert-neutral"
+        # "md:alert-neutral"
+        # "@md:alert-neutral"
+        # "lg:alert-neutral"
+        # "@lg:alert-neutral"
+        neutral: "alert-neutral",
+        # "sm:alert-primary"
+        # "@sm:alert-primary"
+        # "md:alert-primary"
+        # "@md:alert-primary"
+        # "lg:alert-primary"
+        # "@lg:alert-primary"
+        primary: "alert-primary",
+        # "sm:alert-secondary"
+        # "@sm:alert-secondary"
+        # "md:alert-secondary"
+        # "@md:alert-secondary"
+        # "lg:alert-secondary"
+        # "@lg:alert-secondary"
+        secondary: "alert-secondary",
+        # "sm:alert-accent"
+        # "@sm:alert-accent"
+        # "md:alert-accent"
+        # "@md:alert-accent"
+        # "lg:alert-accent"
+        # "@lg:alert-accent"
+        accent: "alert-accent"
+      }
     )
   end
 end

data/lib/daisy_ui/aura.rb

@@ -9,7 +9,6 @@ module DaisyUI
     end
 
     register_modifiers(
-      # Styles
       # "sm:aura-dual"
       # "@sm:aura-dual"
       # "md:aura-dual"
@@ -52,42 +51,43 @@ module DaisyUI
       # "lg:aura-glow"
       # "@lg:aura-glow"
       glow: "aura-glow",
-      # Sizes
-      # "sm:aura-xs"
-      # "@sm:aura-xs"
-      # "md:aura-xs"
-      # "@md:aura-xs"
-      # "lg:aura-xs"
-      # "@lg:aura-xs"
-      xs: "aura-xs",
-      # "sm:aura-sm"
-      # "@sm:aura-sm"
-      # "md:aura-sm"
-      # "@md:aura-sm"
-      # "lg:aura-sm"
-      # "@lg:aura-sm"
-      sm: "aura-sm",
-      # "sm:aura-md"
-      # "@sm:aura-md"
-      # "md:aura-md"
-      # "@md:aura-md"
-      # "lg:aura-md"
-      # "@lg:aura-md"
-      md: "aura-md",
-      # "sm:aura-lg"
-      # "@sm:aura-lg"
-      # "md:aura-lg"
-      # "@md:aura-lg"
-      # "lg:aura-lg"
-      # "@lg:aura-lg"
-      lg: "aura-lg",
-      # "sm:aura-xl"
-      # "@sm:aura-xl"
-      # "md:aura-xl"
-      # "@md:aura-xl"
-      # "lg:aura-xl"
-      # "@lg:aura-xl"
-      xl: "aura-xl"
+      size: {
+        # "sm:aura-xs"
+        # "@sm:aura-xs"
+        # "md:aura-xs"
+        # "@md:aura-xs"
+        # "lg:aura-xs"
+        # "@lg:aura-xs"
+        xs: "aura-xs",
+        # "sm:aura-sm"
+        # "@sm:aura-sm"
+        # "md:aura-sm"
+        # "@md:aura-sm"
+        # "lg:aura-sm"
+        # "@lg:aura-sm"
+        sm: "aura-sm",
+        # "sm:aura-md"
+        # "@sm:aura-md"
+        # "md:aura-md"
+        # "@md:aura-md"
+        # "lg:aura-md"
+        # "@lg:aura-md"
+        md: "aura-md",
+        # "sm:aura-lg"
+        # "@sm:aura-lg"
+        # "md:aura-lg"
+        # "@md:aura-lg"
+        # "lg:aura-lg"
+        # "@lg:aura-lg"
+        lg: "aura-lg",
+        # "sm:aura-xl"
+        # "@sm:aura-xl"
+        # "md:aura-xl"
+        # "@md:aura-xl"
+        # "lg:aura-xl"
+        # "@lg:aura-xl"
+        xl: "aura-xl"
+      }
     )
   end
 end

data/lib/daisy_ui/avatar.rb

@@ -9,20 +9,22 @@ module DaisyUI
     end
 
     register_modifiers(
-      # "sm:avatar-online"
-      # "@sm:avatar-online"
-      # "md:avatar-online"
-      # "@md:avatar-online"
-      # "lg:avatar-online"
-      # "@lg:avatar-online"
-      online: "avatar-online",
-      # "sm:avatar-offline"
-      # "@sm:avatar-offline"
-      # "md:avatar-offline"
-      # "@md:avatar-offline"
-      # "lg:avatar-offline"
-      # "@lg:avatar-offline"
-      offline: "avatar-offline",
+      presence: {
+        # "sm:avatar-online"
+        # "@sm:avatar-online"
+        # "md:avatar-online"
+        # "@md:avatar-online"
+        # "lg:avatar-online"
+        # "@lg:avatar-online"
+        online: "avatar-online",
+        # "sm:avatar-offline"
+        # "@sm:avatar-offline"
+        # "md:avatar-offline"
+        # "@md:avatar-offline"
+        # "lg:avatar-offline"
+        # "@lg:avatar-offline"
+        offline: "avatar-offline"
+      },
       # "sm:avatar-placeholder"
       # "@sm:avatar-placeholder"
       # "md:avatar-placeholder"