ui_components 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e31ad6fe648a34de7a80d53704daf454b21fffd519709908acd89bc79ad36110
-  data.tar.gz: d9a518ee3ee2920ada5690a5408920762e826ac19df74937be18b261c3369a1b
+  metadata.gz: 120dc503191b4b508b4ef7ce75702960054a54e35da8d23e885ee76c5374f28f
+  data.tar.gz: af4df82c998db4bf226f4225292514daa11863522d8bc7dbbd14fe1acd5aac41
 SHA512:
-  metadata.gz: f84a0496d5eb96e925965eee822a7a5b6ab62c411f58d9e47903a898874c1b8caacaa7319cf47e4c0f4b8f626b8552c5f1b82705f1318a4333cae79238f8120c
-  data.tar.gz: 52682d5b85b9b114d06f62572dbe0cc9a657cb1a2f6473082e8b71ec50852141c6c4a4c02deb4a09e98c4090fb3920ea6cf6a33f465ce423f4735a13bdb83613
+  metadata.gz: 368bde69e7761b242bcd58f27976e5d43ccba197739c7f44c559bb66f2df0cfade5a542ae8768a5e8431f054ab6b53675978957d5f7ed094ecd4d80215658e32
+  data.tar.gz: 64e902a2adab8a39438705b81c94db0c9e63031f4894eb6ff9a4b1c765353296bbe40f76585b45abf13c6ed483084f0989d230935a4119fe5eaaa9f60d661b6b

data/app/assets/javascripts/ui_components/controllers/countdown_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["value"]
+
+  connect() {
+    this.timers = []
+    this.targetsData = []
+
+    this.valueTargets.forEach(target => {
+      const type = target.dataset.countdownType || "second"
+      const initialStr = target.style.getPropertyValue('--value').trim()
+      const initial = parseInt(initialStr) || 0
+      const dataObj = { target, type, original: initial, current: initial }
+
+      this.targetsData.push(dataObj)
+
+      let timer = this.startCountdown(dataObj)
+
+      this.timers.push(timer)
+    })
+  }
+
+  startCountdown(dataObj) {
+    let intervalDuration
+
+    switch (dataObj.type.toLowerCase()) {
+      case "minute":
+        intervalDuration = 60 * 1000
+        break
+      case "hour":
+        intervalDuration = 3600 * 1000
+        break
+      case "day":
+        intervalDuration = 86400 * 1000
+        break
+      default:
+        intervalDuration = 1000
+    }
+
+    return setInterval(() => {
+      if (dataObj.current > 0) {
+        dataObj.current--
+      } else {
+        dataObj.current = dataObj.original
+      }
+      dataObj.target.textContent = dataObj.current
+      dataObj.target.style.setProperty('--value', dataObj.current)
+    }, intervalDuration)
+  }
+
+  disconnect() {
+    this.timers.forEach(timer => clearInterval(timer))
+  }
+}

data/app/components/documentation/body/example_preview_component.rb

@@ -7,7 +7,7 @@ class Documentation::Body::ExamplePreviewComponent < ViewComponent::Base
   def initialize(
       source:
     )
-    @source = source.gsub("$", "%")
+    @source = source.gsub("<$", "<%").gsub("$>", "%>")
   end
 
   def call; end

data/app/components/documentation/body_component.html.erb

@@ -15,7 +15,7 @@
           </svg>
         <% end %>
 
-        <div data-clipboard-target="code" class="m-3">
+        <div data-clipboard-target="code" class="m-3 max-h-98">
           <% preview_examples.each do |example| %>
             <%= example.code_preview %>
           <% end %>

data/app/components/documentation/body_component.rb

@@ -22,19 +22,19 @@ module Documentation
     private
 
     def set_preview_options
-      @preview_options.merge!(class: preview_class_string)
+      @preview_options.merge!(class: preview_css_class_string)
       @preview_options.compact_blank!
     end
 
-    def preview_class_string
+    def preview_css_class_string
       TailwindMerge::Merger.new.merge([
         *CSS_CLASSES_DEFAULT,
-        @preview_options[:css_class]
+        @preview_options.delete(:css_class)
       ])
     end
 
     def set_code_options
-      @code_options.merge!(class: @code_options[:css_class])
+      @code_options.merge!(class: @code_options.delete(:css_class))
       @code_options.compact_blank!
     end
   end

data/app/components/ui_components/daisy_ui/action/button_component.rb

@@ -4,8 +4,8 @@ module UiComponents
   module DaisyUi
     module Action
       class ButtonComponent < BaseComponent
-        SHAPES = %w[square circle]
-        WIDE_SIZES = %w[wide block]
+        SHAPES = %w[square circle].freeze
+        WIDE_SIZES = %w[wide block].freeze
 
         CSS_CLASSES_DEFAULT = %w[btn].freeze
         CSS_CLASSES_VARIANTS = (
@@ -42,14 +42,14 @@ module UiComponents
 
         private
 
-        def class_string
+        def css_class_string
           TailwindMerge::Merger.new.merge([
             *css_classes_default,
-            size_class,
-            color_class,
-            kind_class,
-            shape_class,
-            wide_size_class,
+            size_css_class,
+            color_css_class,
+            kind_css_class,
+            shape_css_class,
+            wide_size_css_class,
             @css_class
           ])
         end
@@ -58,23 +58,23 @@ module UiComponents
           CSS_CLASSES_DEFAULT unless @no_btn
         end
 
-        def size_class
+        def size_css_class
           "btn-#{@size}" if SIZES.include?(@size)
         end
 
-        def color_class
+        def color_css_class
           "btn-#{@color}" if COLORS.include?(@color)
         end
 
-        def kind_class
+        def kind_css_class
           "btn-#{@kind}" if KINDS.include?(@kind)
         end
 
-        def shape_class
+        def shape_css_class
           "btn-#{@shape}" if SHAPES.include?(@shape)
         end
 
-        def wide_size_class
+        def wide_size_css_class
           "btn-#{@wide_size}" if WIDE_SIZES.include?(@wide_size)
         end
       end

data/app/components/ui_components/daisy_ui/action/dropdown/anchor_component.rb

@@ -14,19 +14,9 @@ module UiComponents
 
           private
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style)
+          def other_options
             @options.merge!(role: "button")
             @options.merge!(tabindex: "0")
-            @options.compact_blank!
-          end
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/dropdown/card/item_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Dropdown
+        module Card
+          class ItemComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[card-body].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/dropdown/card_component.rb

@@ -5,10 +5,10 @@ module UiComponents
     module Action
       module Dropdown
         class CardComponent < BaseComponent
-          CSS_CLASSES_DEFAULT =  %w[dropdown-content card card-sm bg-base-100 z-1 w-64 shadow-md]
+          CSS_CLASSES_DEFAULT =  %w[dropdown-content card card-sm bg-base-100 z-1 w-64 shadow-md].freeze
           CSS_CLASSES = (
             CSS_CLASSES_DEFAULT +
-            CardItemComponent::CSS_CLASSES
+            Card::ItemComponent::CSS_CLASSES
           ).freeze
 
           erb_template <<-ERB
@@ -17,22 +17,12 @@ module UiComponents
             <% end %>
           ERB
 
-          renders_one :item, CardItemComponent
+          renders_one :item, Card::ItemComponent
 
           private
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style)
+          def other_options
             @options.merge!(tabindex: "0")
-            @options.compact_blank!
-          end
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/dropdown/menu/item_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Dropdown
+        module Menu
+          class ItemComponent < BaseComponent
+            erb_template <<-ERB
+              <%= tag.li(**set_options) do %>
+                <% if @with_tag_a %>
+                  <a><%= content %></a>
+                <% else %>
+                  <%= content %>
+                <% end %>
+              <% end %>
+            ERB
+
+            def initialize(
+                with_tag_a: true,
+                **args
+              )
+              @with_tag_a = with_tag_a
+
+              super(**args)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/dropdown/menu_component.rb

@@ -16,22 +16,12 @@ module UiComponents
             <% end %>
           ERB
 
-          renders_many :items, ListItemComponent
+          renders_many :items, Menu::ItemComponent
 
           private
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style)
+          def other_options
             @options.merge!(tabindex: "0")
-            @options.compact_blank!
-          end
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/dropdown_component.rb

@@ -4,11 +4,11 @@ module UiComponents
   module DaisyUi
     module Action
       class DropdownComponent < BaseComponent
-        CSS_CLASSES_DEFAULT = %w[dropdown]
+        CSS_CLASSES_DEFAULT = %w[dropdown].freeze
         CSS_CLASSES_VARIANTS = (
           %w[dropdown-hover dropdown-open] +
-          ALIGNS.map { |color| "dropdown-#{color}" } +
-          AXES.map { |size| "dropdown-#{size}" }
+          ALIGNS.map { |key| "dropdown-#{key}" } +
+          AXES.map { |key| "dropdown-#{key}" }
         ).freeze
 
         CSS_CLASSES = (
@@ -47,30 +47,30 @@ module UiComponents
 
         private
 
-        def class_string
+        def css_class_string
           TailwindMerge::Merger.new.merge([
             *CSS_CLASSES_DEFAULT,
-            align_class,
-            axis_class,
-            hover_class,
-            opened_class,
+            align_css_class,
+            axis_css_class,
+            hover_css_class,
+            opened_css_class,
             @css_class
           ])
         end
 
-        def align_class
+        def align_css_class
           "dropdown-#{@align}" if ALIGNS.include?(@align)
         end
 
-        def axis_class
+        def axis_css_class
           "dropdown-#{@axis}" if AXES.include?(@axis)
         end
 
-        def hover_class
+        def hover_css_class
           "dropdown-hover" if @hover
         end
 
-        def opened_class
+        def opened_css_class
           "dropdown-open" if @opened
         end
       end

data/app/components/ui_components/daisy_ui/action/modal/anchor_component.rb

@@ -23,18 +23,8 @@ module UiComponents
 
           private
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style) if @css_style.present?
+          def other_options
             @options.merge!(onclick: "#{@opener}.showModal()")
-            @options.compact_blank!
-          end
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/action/item_component.rb

@@ -14,15 +14,6 @@ module UiComponents
                 erb_template <<-ERB
                   <%= tag.button(**set_options) { content } %>
                 ERB
-
-                private
-
-                def class_string
-                  TailwindMerge::Merger.new.merge([
-                    *CSS_CLASSES_DEFAULT,
-                    @css_class
-                  ])
-                end
               end
             end
           end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/action_component.rb

@@ -24,15 +24,6 @@ module UiComponents
               ERB
 
               renders_many :items, Action::ItemComponent
-
-              private
-
-              def class_string
-                TailwindMerge::Merger.new.merge([
-                  *CSS_CLASSES_DEFAULT,
-                  @css_class
-                ])
-              end
             end
           end
         end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/body_component.rb

@@ -13,15 +13,6 @@ module UiComponents
               erb_template <<-ERB
                 <%= tag.div(**set_options) { content } %>
               ERB
-
-              private
-
-              def class_string
-                TailwindMerge::Merger.new.merge([
-                  *CSS_CLASSES_DEFAULT,
-                  @css_class
-                ])
-              end
             end
           end
         end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/close_component.rb

@@ -15,15 +15,6 @@ module UiComponents
                   <%= tag.button(**set_options) { content } %>
                 </form>
               ERB
-
-              private
-
-              def class_string
-                TailwindMerge::Merger.new.merge([
-                  *CSS_CLASSES_DEFAULT,
-                  @css_class
-                ])
-              end
             end
           end
         end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/title_component.rb

@@ -13,15 +13,6 @@ module UiComponents
               erb_template <<-ERB
                 <%= tag.h3(**set_options) { content } %>
               ERB
-
-              private
-
-              def class_string
-                TailwindMerge::Merger.new.merge([
-                  *CSS_CLASSES_DEFAULT,
-                  @css_class
-                ])
-              end
             end
           end
         end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box_component.rb

@@ -37,15 +37,6 @@ module UiComponents
 
               super(**args)
             end
-
-            private
-
-            def class_string
-              TailwindMerge::Merger.new.merge([
-                *CSS_CLASSES_DEFAULT,
-                @css_class
-              ])
-            end
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/modal/dialog_component.rb

@@ -36,20 +36,10 @@ module UiComponents
             super(**args)
           end
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style) if @css_style.present?
-            @options.merge!(id: @opener)
-            @options.compact_blank!
-          end
-
           private
 
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
+          def other_options
+            @options.merge!(id: @opener)
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/swap/off_component.rb

@@ -11,15 +11,6 @@ module UiComponents
           erb_template <<-ERB
             <%= tag.div(**set_options) { content } %>
           ERB
-
-          private
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
-          end
         end
       end
     end

data/app/components/ui_components/daisy_ui/action/swap/on_component.rb

@@ -11,15 +11,6 @@ module UiComponents
           erb_template <<-ERB
             <%= tag.div(**set_options) { content } %>
           ERB
-
-          private
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
-          end
         end
       end
     end

data/app/components/ui_components/daisy_ui/action/swap_component.rb

@@ -4,7 +4,7 @@ module UiComponents
   module DaisyUi
     module Action
       class SwapComponent < BaseComponent
-        EFFECTS = %w[rotate flip]
+        EFFECTS = %w[rotate flip].freeze
 
         CSS_CLASSES_DEFAULT = %w[swap].freeze
         CSS_CLASSES_VARIANTS = (
@@ -37,20 +37,20 @@ module UiComponents
 
         private
 
-        def class_string
+        def css_class_string
           TailwindMerge::Merger.new.merge([
             *CSS_CLASSES_DEFAULT,
-            effect_class,
-            active_class,
+            effect_css_class,
+            active_css_class,
             @css_class
           ])
         end
 
-        def effect_class
+        def effect_css_class
           "swap-#{@effect}" if EFFECTS.include?(@effect)
         end
 
-        def active_class
+        def active_css_class
           "swap-active" if @active
         end
       end

data/app/components/ui_components/daisy_ui/base_component.rb

@@ -15,6 +15,8 @@ module UiComponents
       CSS_CLASSES_VARIANTS = %w[].freeze
       CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
 
+      attr_accessor :slot_order
+
       def initialize(
           css_class: nil,
           css_style: nil,
@@ -23,18 +25,37 @@ module UiComponents
         @css_class = css_class.to_s
         @css_style = css_style.to_s
         @options = options
+
+        @slot_order = []
+      end
+
+      def self.tracks_slot_order(slots)
+        slots.each do |slot|
+          singularized = slot.to_s.singularize
+          alias_method "original_with_#{singularized}", "with_#{singularized}"
+
+          define_method "with_#{singularized}" do |*args, **kwargs, &block|
+            @slot_order << slot unless @slot_order.include?(slot)
+
+            send("original_with_#{singularized}", *args, **kwargs, &block)
+          end
+        end
       end
 
       private
 
       def set_options
-        @options.merge!(class: class_string)
+        @options.merge!(class: css_class_string)
         @options.merge!(style: @css_style) if @css_style.present?
+        other_options if respond_to?(:other_options, true)
         @options.compact_blank!
       end
 
-      def class_string
-        @css_class
+      def css_class_string
+        TailwindMerge::Merger.new.merge([
+          *self.class::CSS_CLASSES_DEFAULT,
+          @css_class
+        ])
       end
     end
   end

data/app/components/ui_components/daisy_ui/data_display/accordion/item/anchor_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Accordion
+        module Item
+          class AnchorComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[collapse-title].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/accordion/item/body_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Accordion
+        module Item
+          class BodyComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[collapse-content].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end