phlex_ui 0.0.5 → 0.1.6

data/lib/phlex_ui/popover.rb

@@ -1,25 +1,25 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Popover < Base
-        def initialize(options: {}, **attrs)
-            @options = options
-            super(**attrs)
-        end
+  class Popover < Base
+    def initialize(options: {}, **attrs)
+      @options = options
+      super(**attrs)
+    end
 
-        def template(&)
-            div(**attrs, &)
-        end
+    def template(&block)
+      div(**attrs, &block)
+    end
 
-        private
+    private
 
-        def default_attrs
-            {
-                data: {
-                    controller: "popover",
-                    popover_options_value: @options.to_json
-                }
-            }
-        end
+    def default_attrs
+      {
+        data: {
+          controller: "popover",
+          popover_options_value: @options.to_json
+        }
+      }
     end
-end
+  end
+end

data/lib/phlex_ui/select/builder.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Select::Builder < Base
+    def initialize(object, method, collection: [], placeholder: "", value: nil, input_attrs: {}, trigger_attrs: {}, value_attrs: {}, content_attrs: {}, group_attrs: {}, item_attrs: {}, **attrs)
+      @object = set_object(object)
+      @method = method
+      @collection = collection
+      @placeholder = placeholder
+      @value = value || @object.send(@method)
+      @input_attrs = input_attrs
+      @trigger_attrs = trigger_attrs
+      @value_attrs = value_attrs
+      @content_attrs = content_attrs
+      @group_attrs = group_attrs
+      @item_attrs = item_attrs
+      super(**attrs)
+    end
+
+    def template
+      render PhlexUI::Select.new(**attrs) do
+        render PhlexUI::Select::Input.new(value: @object.send(@method), id: select_id, name: input_name, type: "hidden", **@input_attrs)
+        render PhlexUI::Select::Trigger.new(**@trigger_attrs) do
+          if @value
+            render PhlexUI::Select::Value.new(id: select_id, **@value_attrs) { @collection.find { |choice| choice[1] == @value }[0] }
+          else
+            render PhlexUI::Select::Value.new(placeholder: @placeholder, id: select_id, **@value_attrs)
+          end
+        end
+        render PhlexUI::Select::Content.new(outlet_id: select_id, **@content_attrs) do
+          render PhlexUI::Select::Group.new(**@group_attrs) do
+            @collection.each do |choice|
+              render PhlexUI::Select::Item.new(value: choice[1], selected: @object&.send(@method) == choice[1], **@item_attrs) { choice[0] }
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def select_id
+      "#{object_name}_#{@method}"
+    end
+
+    def input_name
+      "#{object_name}[#{@method}]"
+    end
+
+    def object_name
+      @object.class.name.underscore
+    end
+
+    def set_object(object)
+      # if string convert to new instance of object
+      if object.is_a?(String)
+        object.classify.constantize.new
+      else
+        object
+      end
+    end
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/phlex_ui/select/content.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Select::Content < Base
+    def initialize(outlet_id: nil, **attrs)
+      @outlet_id = outlet_id
+      super(**attrs)
+    end
+
+    def template(&block)
+      template_tag(data: {popover_target: "content"}) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          state: :open,
+          controller: "select",
+          select_input_outlet: "#" + @outlet_id,
+          select_text_outlet: "#" + @outlet_id
+        },
+        class: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+      }
+    end
+  end
+end

data/lib/phlex_ui/select/group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Select::Group < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/phlex_ui/select/input.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Select::Input < Base
+    def template
+      render PhlexUI::Input.new(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden",
+        data: {
+          controller: "input"
+        }
+      }
+    end
+  end
+end

data/lib/phlex_ui/select/item.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Select::Item < Base
+    def initialize(value: nil, **attrs)
+      @value = value
+      super(**attrs)
+    end
+
+    def template(&block)
+      div(**attrs) do
+        block&.call
+        selected_icon
+      end
+    end
+
+    private
+
+    def selected_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        class: "w-4 h-4 absolute right-2 top-1/2 transform -translate-y-1/2 hidden group-data-[selected=true]/selectitem:block"
+      ) do |s|
+        s.path(
+          fill_rule: "evenodd",
+          d:
+            "M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        role: "menuitem",
+        class: "group/selectitem relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        data_action: "click->popover#close click->select#selectItem",
+        data_popover_target: "menuItem",
+        data_select_target: "item",
+        data_value: @value,
+        data_orientation: "vertical",
+        tabindex: "-1"
+      }
+    end
+  end
+end

data/lib/phlex_ui/select/label.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Select::Label < Base
+    def template(&block)
+      h3(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "px-2 py-1.5 text-sm font-semibold"
+      }
+    end
+  end
+end

data/lib/phlex_ui/select/trigger.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Select::Trigger < Base
+    def template(&block)
+      button(**attrs) do
+        block&.call
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        width: "15",
+        height: "15",
+        viewbox: "0 0 15 15",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-4 w-4 opacity-50 shrink-0 ml-2 -mr-1",
+        aria_hidden: "true"
+      ) do |s|
+        s.path(
+          d:
+            "M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z",
+          fill: "currentColor",
+          fill_rule: "evenodd",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        data: {
+          popover_target: "trigger"
+        },
+        type: "button",
+        class:
+          "w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [& amp;>span]:line-clamp-1"
+      }
+    end
+  end
+end

data/lib/phlex_ui/select/value.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Select::Value < Base
+    def initialize(placeholder: nil, **attrs)
+      @placeholder = placeholder
+      super(**attrs)
+    end
+
+    def template(&block)
+      span(**attrs) do
+        block ? block.call : @placeholder
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "text"
+        },
+        class: "pointer-events-none"
+      }
+    end
+  end
+end

data/lib/phlex_ui/select.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Select < Base
+    def initialize(options: {}, **attrs)
+      @options = options
+      @options[:trigger] ||= "click"
+      @options[:duration] ||= [500, 0]
+      @options[:placement] ||= "bottom-start"
+      super(**attrs)
+    end
+
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "popover",
+          popover_match_width_value: "true",
+          popover_options_value: @options.to_json
+        },
+        class: "w-full"
+      }
+    end
+  end
+end

data/lib/phlex_ui/sheet/content.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Sheet::Content < Base
+        SIDE_CLASS = {
+            top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+            right: "inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+            bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            left: "inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+        }
+
+        def initialize(side: :right, **attrs)
+            @side = side
+            @side_classes = SIDE_CLASS[side]
+            super(**attrs)
+        end
+
+        def template(&block)
+            template_tag(data: { sheet_target: "content" }) do
+                div(data: { controller: 'dismissable' }) do
+                    backdrop
+                    div(**attrs) do
+                        block.call if block_given?
+                        close_button
+                    end
+                end
+            end
+        end
+
+        private
+
+        def default_attrs
+            {
+                data_state: "open", # For animate in
+                class: tokens(
+                    "fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+                    @side_classes
+                ),
+            }
+        end
+
+        def close_button
+            button(
+                type: "button",
+                class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+                data_action: "click->dismissable#dismiss"
+            ) do
+                svg(
+                    width: "15",
+                    height: "15",
+                    viewbox: "0 0 15 15",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    class: "h-4 w-4"
+                ) do |s|
+                    s.path(
+                    d:
+                        "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+                    fill: "currentColor",
+                    fill_rule: "evenodd",
+                    clip_rule: "evenodd"
+                    )
+                end
+                span(class: "sr-only") { "Close" }
+            end
+        end
+
+        def backdrop
+            div(
+                data_state: "open",
+                data_action: "click->dismissable#dismiss",
+                class:
+                    "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            )
+        end
+    end
+end

data/lib/phlex_ui/sheet/description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Sheet::Description < Base
+        def template(&block)
+            p(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "text-sm text-muted-foreground",
+            }
+        end
+    end
+end

data/lib/phlex_ui/sheet/footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Sheet::Footer < Base
+        def template(&block)
+            div(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0",
+            }
+        end
+    end
+end

data/lib/phlex_ui/sheet/header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Sheet::Header < Base
+        def template(&block)
+            div(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "flex flex-col space-y-1.5 text-center sm:text-left",
+            }
+        end
+    end
+end

data/lib/phlex_ui/sheet/middle.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Sheet::Middle < Base
+        def template(&block)
+            div(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "py-4",
+            }
+        end
+    end
+end

data/lib/phlex_ui/sheet/title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Sheet::Title < Base
+        def template(&block)
+            h3(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: "text-lg font-semibold leading-none tracking-tight",
+            }
+        end
+    end
+end

data/lib/phlex_ui/sheet/trigger.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Sheet::Trigger < Base
+        def template(&block)
+            div(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { action: "click->sheet#open" }
+            }
+        end
+    end
+end

data/lib/phlex_ui/sheet.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Sheet < Base
+        def template(&block)
+            div(**attrs, &block)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { controller: "sheet"}
+            }
+        end
+    end
+end

data/lib/phlex_ui/shortcut_key.rb

@@ -1,17 +1,17 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class ShortcutKey < Base
-        def template(&)
-            kbd(**attrs, &)
-        end
+  class ShortcutKey < Base
+    def template(&block)
+      kbd(**attrs, &block)
+    end
 
-        private
+    private
 
-        def default_attrs
-            {
-                class: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted-background px-1.5 font-mono text-[10px] font-medium text-muted-text opacity-100"
-            }
-        end
+    def default_attrs
+      {
+        class: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      }
     end
-end
+  end
+end

data/lib/phlex_ui/table/body.rb

@@ -1,17 +1,17 @@
 # frozen_string_literal: true
 
 module PhlexUI
-    class Table::Body < Base
-        def template(&)
-            tbody(**attrs, &)
-        end
+  class Table::Body < Base
+    def template(&block)
+      tbody(**attrs, &block)
+    end
 
-        private
+    private
 
-        def default_attrs
-            {
-                class: "[&_tr:last-child]:border-0"
-            }
-        end
+    def default_attrs
+      {
+        class: "[&_tr:last-child]:border-0"
+      }
     end
-end
+  end
+end