daisyui_on_phlex 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d5693c6e93acbd240a25cb1303a3e2590f04012e9db6d0ea47515085815e817
-  data.tar.gz: c9f4c4d40add9179f4e8ddf77743defb1cf681c9d90ee7cf13cad4e423aaba00
+  metadata.gz: d94b605dc1bf46e2309c0f5301835ffdf8a05da8e5a0b0080c9648075b372b4b
+  data.tar.gz: b2ae9465060c594cc717001c3bf1a125ecc5e481163bab54e7cc81d75a32bf72
 SHA512:
-  metadata.gz: 5248f6ea0227341c4ed0334e4ca9686d5281f65269036768cae501e6b313ec3e7ff6db3ab1b904d3ba0304ebfced2ed78296191dab6e2d4470e00a53e2a88d9c
-  data.tar.gz: 4fb936abd1fa86dd33ab2da047ceaac976a9ddabbbd18a8df0e100a5e66c87ebd02ee349d789b1a5ce87a10cb73f408f52bc1c3fb92bc68e2e614dc22f214efe
+  metadata.gz: 867e2b256c3b582b7ea260e9b38e76838e03eb12fe2e7a86f9e0714a84907b8a5759cc779e40103719a65ffb3352e3e7b7d1b476a8c0319c753e839cf86b5e62
+  data.tar.gz: 3c5e646525da907b3a2a832c36ee8321102e9aa2138e24ca369d9d48914614a41c6663210fb033364dd724896e7dc939b7415fbf34ce69b2622cbc043dc77bd2

data/README.md

@@ -164,16 +164,86 @@ render DaisyuiOnPhlex::Components::Input.new(
 
 ## Available Components
 
-Currently implemented components:
+All 61+ DaisyUI components are now implemented as Phlex components:
 
+### Actions
 - **Button** - Interactive buttons with multiple variants and sizes
-- **Alert** - Notification messages with different types
-- **Card** - Content containers with optional borders and layouts
+- **Dropdown** - Dropdown menus and popovers
+- **Modal** - Overlay dialogs and modals  
+- **Swap** - Toggle between two states with animations
+- **Theme Controller** - Theme switching controls
+
+### Data Display
+- **Accordion** - Collapsible content sections
+- **Avatar** - User profile images with various styles
 - **Badge** - Small status indicators and labels
-- **Modal** - Overlay dialogs and modals
-- **Input** - Form input fields with styling variants
-
-More components are being added regularly. Check the [DaisyUI documentation](https://daisyui.com/components/) for the full list of available components.
+- **Card** - Content containers with optional borders and layouts
+- **Carousel** - Image and content sliders
+- **Chat** - Chat bubble components for messaging interfaces
+- **Collapse** - Collapsible content areas
+- **Countdown** - Animated countdown displays
+- **Kbd** - Keyboard shortcut styling
+- **Stat** - Statistics display blocks
+- **Table** - Data tables with sorting and styling
+- **Timeline** - Chronological event displays
+
+### Data Input
+- **Checkbox** - Checkbox form controls
+- **File Input** - File upload inputs with drag & drop
+- **Input** - Text input fields with styling variants
+- **Radio** - Radio button form controls
+- **Range** - Range slider inputs
+- **Rating** - Star rating components
+- **Select** - Dropdown select inputs
+- **Textarea** - Multi-line text inputs
+- **Toggle** - Toggle switch controls
+
+### Layout
+- **Divider** - Visual content separators
+- **Drawer** - Slide-out navigation panels
+- **Footer** - Page footer sections
+- **Hero** - Hero sections with backgrounds
+- **Indicator** - Corner indicators and badges
+- **Join** - Grouped elements with shared borders
+- **Mask** - Image cropping with various shapes
+- **Stack** - Layered element positioning
+
+### Navigation
+- **Breadcrumbs** - Navigation breadcrumb trails
+- **Dock** - Bottom navigation bars
+- **Link** - Styled hyperlinks
+- **Menu** - Navigation menus and lists
+- **Navbar** - Top navigation bars
+- **Pagination** - Page navigation controls
+- **Steps** - Step-by-step progress indicators
+- **Tab** - Tabbed content interfaces
+
+### Feedback
+- **Alert** - Notification messages with different types
+- **Loading** - Loading spinners and animations
+- **Progress** - Progress bars
+- **Radial Progress** - Circular progress indicators
+- **Skeleton** - Loading state placeholders
+- **Toast** - Temporary notification popups
+- **Tooltip** - Hover information displays
+
+### Mockups
+- **Mockup Browser** - Browser window mockups
+- **Mockup Code** - Code editor mockups
+- **Mockup Phone** - Mobile device mockups
+- **Mockup Window** - Desktop window mockups
+
+### Utilities
+- **Calendar** - Calendar styling support
+- **Diff** - Side-by-side content comparison
+- **Filter** - Filter controls for data
+- **Fieldset** - Form field grouping
+- **Label** - Form field labels
+- **List** - Styled lists and menus
+- **Status** - Status indicators
+- **Validator** - Form validation styling
+
+All components follow DaisyUI's design system and support the full range of variants, sizes, and styling options. Check the [DaisyUI documentation](https://daisyui.com/components/) for detailed usage examples and styling options.
 
 ## Component Options
 

data/lib/daisyui_on_phlex/components/accordion.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Accordion < DaisyuiOnPhlex::Base
+      def initialize(collapse: false, **attributes)
+        @collapse = collapse
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(
+          class: merge_classes("join", "join-vertical", "w-full", @attributes[:class]),
+          **@attributes.except(:class),
+          &block
+        )
+      end
+
+      def item(open: false, **attributes)
+        div(class: merge_classes("collapse", ("collapse-open" if open)), **attributes) do
+          yield AccordionItem.new
+        end
+      end
+
+      private
+
+      class AccordionItem
+        include Phlex::HTML
+
+        def title(**attributes, &block)
+          div(class: "collapse-title text-xl font-medium", **attributes, &block)
+        end
+
+        def content(**attributes, &block)
+          div(class: "collapse-content", **attributes, &block)
+        end
+
+        def checkbox(name:, **attributes)
+          input(
+            type: "checkbox",
+            name: name,
+            class: "collapse-checkbox",
+            **attributes
+          )
+        end
+
+        def radio(name:, value:, **attributes)
+          input(
+            type: "radio",
+            name: name,
+            value: value,
+            class: "collapse-radio",
+            **attributes
+          )
+        end
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/avatar.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Avatar < DaisyuiOnPhlex::Base
+      def initialize(size: :md, shape: :circle, online: nil, placeholder: false, **attributes)
+        @size = size
+        @shape = shape
+        @online = online
+        @placeholder = placeholder
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(class: avatar_classes, **@attributes) do
+          if @online
+            div(class: status_classes)
+          end
+          
+          if @placeholder
+            div(class: placeholder_classes, &block)
+          else
+            div(class: image_classes, &block)
+          end
+        end
+      end
+
+      # Helper method that adds styling for initials
+      def initials(text, **attributes)
+        span(class: merge_classes("text-3xl", attributes[:class]), **attributes.except(:class)) { text }
+      end
+
+      private
+
+      def avatar_classes
+        classes = ["avatar"]
+        classes << "placeholder" if @placeholder
+        classes << "online" if @online == true
+        classes << "offline" if @online == false
+        merge_classes(*classes)
+      end
+
+      def image_classes
+        classes = ["w-24", "rounded-full"]
+        
+        case @size
+        when :xs then classes = ["w-6", "rounded-full"]
+        when :sm then classes = ["w-8", "rounded-full"]
+        when :md then classes = ["w-12", "rounded-full"]
+        when :lg then classes = ["w-16", "rounded-full"]
+        when :xl then classes = ["w-20", "rounded-full"]
+        when :"2xl" then classes = ["w-24", "rounded-full"]
+        end
+
+        case @shape
+        when :square then classes[-1] = "rounded"
+        when :circle then # default rounded-full
+        end
+
+        merge_classes(*classes)
+      end
+
+      def placeholder_classes
+        classes = ["bg-neutral", "text-neutral-content", "rounded-full", "w-24"]
+        
+        case @size
+        when :xs then classes[-1] = "w-6"
+        when :sm then classes[-1] = "w-8"
+        when :md then classes[-1] = "w-12"
+        when :lg then classes[-1] = "w-16"
+        when :xl then classes[-1] = "w-20"
+        when :"2xl" then classes[-1] = "w-24"
+        end
+
+        case @shape
+        when :square then classes[2] = "rounded"
+        when :circle then # default rounded-full
+        end
+
+        merge_classes(*classes)
+      end
+
+      def status_classes
+        classes = ["absolute", "top-0", "right-0", "w-3", "h-3", "border-2", "border-white", "rounded-full"]
+        classes << (@online ? "bg-green-400" : "bg-gray-400")
+        merge_classes(*classes)
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/breadcrumbs.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Breadcrumbs < DaisyuiOnPhlex::Base
+      def initialize(**attributes)
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(class: "text-sm breadcrumbs", **@attributes) do
+          ul(&block)
+        end
+      end
+
+      def item(href: nil, active: false, **attributes, &block)
+        li(**attributes) do
+          if href && !active
+            a(href: href, &block)
+          else
+            span(class: ("font-bold" if active), &block)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/calendar.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Calendar < DaisyuiOnPhlex::Base
+      def initialize(compact: false, **attributes)
+        @compact = compact
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(
+          class: merge_classes("calendar", ("calendar-compact" if @compact), @attributes[:class]),
+          **@attributes.except(:class),
+          &block
+        )
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/carousel.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Carousel < DaisyuiOnPhlex::Base
+      def initialize(center: false, end: false, vertical: false, **attributes)
+        @center = center
+        @end = end
+        @vertical = vertical
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(class: carousel_classes, **@attributes, &block)
+      end
+
+      def item(id: nil, **attributes, &block)
+        div(
+          class: "carousel-item",
+          id: id,
+          **attributes,
+          &block
+        )
+      end
+
+      private
+
+      def carousel_classes
+        classes = ["carousel"]
+        classes << "carousel-center" if @center
+        classes << "carousel-end" if @end
+        classes << "carousel-vertical" if @vertical
+        merge_classes(*classes)
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/chat.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Chat < DaisyuiOnPhlex::Base
+      def initialize(position: :start, **attributes)
+        @position = position
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(class: chat_classes, **@attributes, &block)
+      end
+
+      def image(src:, alt: "", **attributes)
+        div(class: "chat-image avatar") do
+          div(class: "w-10 rounded-full") do
+            img(src: src, alt: alt, **attributes)
+          end
+        end
+      end
+
+      def header(time: nil, **attributes, &block)
+        div(class: merge_classes("chat-header", attributes[:class]), **attributes.except(:class)) do
+          yield if block_given?
+          if time
+            time_tag(time, class: "text-xs opacity-50") { time }
+          end
+        end
+      end
+
+      def bubble(**attributes, &block)
+        div(class: merge_classes("chat-bubble", attributes[:class]), **attributes.except(:class), &block)
+      end
+
+      def footer(**attributes, &block)
+        div(class: merge_classes("chat-footer", "opacity-50", attributes[:class]), **attributes.except(:class), &block)
+      end
+
+      private
+
+      def chat_classes
+        classes = ["chat"]
+        
+        case @position
+        when :start then classes << "chat-start"
+        when :end then classes << "chat-end"
+        end
+
+        merge_classes(*classes)
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/checkbox.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Checkbox < DaisyuiOnPhlex::Base
+      def initialize(
+        variant: nil,
+        size: :md,
+        checked: false,
+        disabled: false,
+        name: nil,
+        value: nil,
+        **attributes
+      )
+        @variant = variant
+        @size = size
+        @checked = checked
+        @disabled = disabled
+        @name = name
+        @value = value
+        @attributes = attributes
+      end
+
+      def view_template
+        input(
+          type: "checkbox",
+          class: checkbox_classes,
+          checked: @checked,
+          disabled: @disabled,
+          name: @name,
+          value: @value,
+          **@attributes
+        )
+      end
+
+      private
+
+      def checkbox_classes
+        classes = ["checkbox"]
+
+        # Variant classes
+        case @variant
+        when :primary then classes << "checkbox-primary"
+        when :secondary then classes << "checkbox-secondary"
+        when :accent then classes << "checkbox-accent"
+        when :success then classes << "checkbox-success"
+        when :warning then classes << "checkbox-warning"
+        when :info then classes << "checkbox-info"
+        when :error then classes << "checkbox-error"
+        end
+
+        # Size classes
+        case @size
+        when :xs then classes << "checkbox-xs"
+        when :sm then classes << "checkbox-sm"
+        when :md then classes << "checkbox-md"
+        when :lg then classes << "checkbox-lg"
+        end
+
+        merge_classes(*classes)
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/collapse.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Collapse < DaisyuiOnPhlex::Base
+      def initialize(open: false, arrow: false, plus: false, **attributes)
+        @open = open
+        @arrow = arrow
+        @plus = plus
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        details(
+          class: merge_classes(
+            "collapse",
+            ("collapse-arrow" if @arrow),
+            ("collapse-plus" if @plus),
+            ("collapse-open" if @open),
+            @attributes[:class]
+          ),
+          open: @open,
+          **@attributes.except(:class),
+          &block
+        )
+      end
+
+      def title(**attributes, &block)
+        summary(class: merge_classes("collapse-title", attributes[:class]), **attributes.except(:class), &block)
+      end
+
+      def content(**attributes, &block)
+        div(class: merge_classes("collapse-content", attributes[:class]), **attributes.except(:class), &block)
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/countdown.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Countdown < DaisyuiOnPhlex::Base
+      def initialize(value:, **attributes)
+        @value = value
+        @attributes = attributes
+      end
+
+      def view_template
+        span(
+          class: "countdown font-mono text-2xl",
+          style: "--value: #{@value};",
+          **@attributes
+        )
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/diff.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Diff < DaisyuiOnPhlex::Base
+      def initialize(**attributes)
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(class: "diff aspect-[16/9]", **@attributes, &block)
+      end
+
+      def item_1(**attributes, &block)
+        div(class: "diff-item-1", **attributes, &block)
+      end
+
+      def item_2(**attributes, &block)
+        div(class: "diff-item-2", **attributes, &block)
+      end
+
+      def resizer
+        div(class: "diff-resizer")
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/divider.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Divider < DaisyuiOnPhlex::Base
+      def initialize(vertical: false, **attributes)
+        @vertical = vertical
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(
+          class: merge_classes("divider", ("divider-horizontal" if @vertical), @attributes[:class]),
+          **@attributes.except(:class),
+          &block
+        )
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/dock.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Dock < DaisyuiOnPhlex::Base
+      def initialize(**attributes)
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(class: "btm-nav", **@attributes, &block)
+      end
+
+      def item(active: false, disabled: false, **attributes, &block)
+        button(
+          class: dock_item_classes(active: active, disabled: disabled),
+          disabled: disabled,
+          **attributes,
+          &block
+        )
+      end
+
+      private
+
+      def dock_item_classes(active:, disabled:)
+        classes = []
+        classes << "active" if active
+        classes << "disabled" if disabled
+        merge_classes(*classes)
+      end
+    end
+  end
+end

data/lib/daisyui_on_phlex/components/drawer.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module DaisyuiOnPhlex
+  module Components
+    class Drawer < DaisyuiOnPhlex::Base
+      def initialize(end: false, **attributes)
+        @end = end
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(class: "drawer", **@attributes, &block)
+      end
+
+      def toggle(id:, **attributes)
+        input(
+          id: id,
+          type: "checkbox",
+          class: "drawer-toggle",
+          **attributes
+        )
+      end
+
+      def content(**attributes, &block)
+        div(class: "drawer-content", **attributes, &block)
+      end
+
+      def side(**attributes, &block)
+        div(class: drawer_side_classes, **attributes, &block)
+      end
+
+      def overlay(for_id:, **attributes)
+        label(
+          for: for_id,
+          class: "drawer-overlay",
+          **attributes
+        )
+      end
+
+      private
+
+      def drawer_side_classes
+        classes = ["drawer-side"]
+        classes << "drawer-end" if @end
+        merge_classes(*classes)
+      end
+    end
+  end
+end