shadcn_phlexcomponents 0.1.16 → 0.1.18

data/app/typescript/controllers/date_picker_controller.ts

@@ -19,6 +19,12 @@ import utc from 'dayjs/plugin/utc'
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
 
+const SMALL_SCREEN_BREAKPOINT = 768
+
+const isSmallScreen = () => {
+  return window.innerWidth < SMALL_SCREEN_BREAKPOINT
+}
+
 const DAYJS_FORMAT = 'YYYY-MM-DD'
 
 const DatePickerController = class extends Controller<HTMLElement> {
@@ -55,7 +61,6 @@ const DatePickerController = class extends Controller<HTMLElement> {
   declare format: string
   declare mask: boolean
   declare calendar: Calendar
-  declare isMobile: boolean
   declare DOMKeydownListener: (event: KeyboardEvent) => void
   declare cleanup: () => void
   declare onClickDateListener: (self: Calendar) => void
@@ -81,9 +86,23 @@ const DatePickerController = class extends Controller<HTMLElement> {
   }
 
   contentContainerTargetConnected() {
-    // Datepicker is shown as a dialog on small screens
-    const styles = window.getComputedStyle(this.contentContainerTarget)
-    this.isMobile = styles.translate === '-50%'
+    if (isSmallScreen()) {
+      const windowHeight = window.innerHeight
+      const datePickerHeight = this.identifier === 'date-picker' ? 300 : 600
+
+      let topOffset = 0
+
+      if (windowHeight > datePickerHeight) {
+        topOffset = (windowHeight - datePickerHeight) / 2
+      }
+
+      Object.assign(this.contentContainerTarget.style, {
+        top: `${topOffset}px`,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        pointerEvents: 'auto',
+      })
+    }
   }
 
   toggle() {
@@ -154,12 +173,11 @@ const DatePickerController = class extends Controller<HTMLElement> {
       if (!this.contentTarget.dataset.width) {
         const contentWidth = this.contentTarget.offsetWidth
         this.contentTarget.dataset.width = `${contentWidth}`
-
         this.contentTarget.style.maxWidth = `${contentWidth}px`
         this.contentTarget.style.minWidth = `${contentWidth}px`
       }
 
-      if (this.isMobile) {
+      if (isSmallScreen()) {
         lockScroll(this.contentTarget.id)
         this.overlayTarget.style.display = ''
         this.overlayTarget.dataset.state = 'open'
@@ -206,7 +224,7 @@ const DatePickerController = class extends Controller<HTMLElement> {
         contentContainer: this.contentContainerTarget,
       })
 
-      if (this.isMobile) {
+      if (isSmallScreen()) {
         unlockScroll(this.contentTarget.id)
         this.overlayTarget.style.display = 'none'
         this.overlayTarget.dataset.state = 'closed'

data/app/typescript/controllers/tooltip_controller.ts

@@ -67,7 +67,7 @@ const TooltipController = class extends Controller<HTMLElement> {
         arrowElement: this.arrowTarget,
         side: this.contentTarget.dataset.side,
         align: this.contentTarget.dataset.align,
-        sideOffset: 8,
+        sideOffset: 4,
       })
     } else {
       hideContent({

data/app/typescript/utils/command.ts

@@ -320,7 +320,6 @@ const renderRemoteResults = (
   controller: Command | Combobox,
   data: { html: string; group?: string }[],
 ) => {
-  console.log('data', data)
   data.forEach((item) => {
     const tempDiv = document.createElement('div')
     tempDiv.innerHTML = item.html
@@ -391,7 +390,6 @@ const renderRemoteResults = (
 
   controller.highlightItemByIndex(0)
 
-  console.log('controller.filteredItems', controller.filteredItems)
   if (controller.filteredItems.length > 0) {
     hideEmpty(controller)
   } else {

data/app/typescript/utils/floating_ui.ts

@@ -8,8 +8,11 @@ import {
   Placement,
   Middleware,
   arrow,
+  limitShift,
 } from '@floating-ui/dom'
 
+// https://github.com/radix-ui/primitives/blob/13e76f08f7afdea623aebfd3c55a7e41ae8d8078/packages/react/popper/src/popper.tsx
+
 const OPPOSITE_SIDE = {
   top: 'bottom',
   right: 'left',
@@ -62,8 +65,14 @@ const initFloatingUi = ({
   }
 
   const middleware = [
+    offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
+    shift({
+      mainAxis: true,
+      crossAxis: false,
+      limiter: limitShift(),
+    }),
+    flip({ crossAxis: 'alignment', fallbackAxisSideDirection: 'end' }),
     transformOrigin({ arrowHeight, arrowWidth }),
-    offset({ mainAxis: sideOffset, alignmentAxis: alignOffset }),
     size({
       apply: ({ elements, rects, availableWidth, availableHeight }) => {
         const { width: anchorWidth, height: anchorHeight } = rects.reference
@@ -86,27 +95,9 @@ const initFloatingUi = ({
         )
       },
     }),
+    arrowElement && arrow({ element: arrowElement, padding: 0 }),
   ]
 
-  const flipMiddleware = flip({
-    // Ensure we flip to the perpendicular axis if it doesn't fit
-    // on narrow viewports.
-    crossAxis: 'alignment',
-    fallbackAxisSideDirection: 'end', // or 'start'
-  })
-  const shiftMiddleware = shift()
-
-  // Prioritize flip over shift for edge-aligned placements only.
-  if (placement.includes('-')) {
-    middleware.push(flipMiddleware, shiftMiddleware)
-  } else {
-    middleware.push(shiftMiddleware, flipMiddleware)
-  }
-
-  if (arrowElement) {
-    middleware.push(arrow({ element: arrowElement, padding: 0 }))
-  }
-
   return autoUpdate(referenceElement, floatingElement, () => {
     computePosition(referenceElement, floatingElement, {
       placement: placement as Placement,

data/app/typescript/utils/index.ts

@@ -9,13 +9,6 @@ import type { HoverCard } from '../controllers/hover_card_controller'
 import type { Tooltip } from '../controllers/tooltip_controller'
 import type { DatePicker } from '../controllers/date_picker_controller'
 import type { DateRangePicker } from '../controllers/date_range_picker_controller'
-import { Application } from '@hotwired/stimulus'
-
-declare global {
-  interface Window {
-    Stimulus: Application
-  }
-}
 
 const ANIMATION_OUT_DELAY = 100
 const ON_OPEN_FOCUS_DELAY = 100

data/lib/shadcn_phlexcomponents/components/accordion.rb

@@ -120,7 +120,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          accordion_target: "content"
+          accordion_target: "content",
         },
       ) do
         div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/alert_dialog.rb

@@ -50,9 +50,9 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "alert-dialog",
-          alert_dialog_is_open_value: @open.to_s
-        }
-      }  
+          alert_dialog_is_open_value: @open.to_s,
+        },
+      }
     end
 
     def view_template(&)
@@ -79,10 +79,10 @@ module ShadcnPhlexcomponents
           expanded: "false",
           controls: "#{@aria_id}-content",
         },
-        data: { 
+        data: {
           as_child: @as_child.to_s,
           alert_dialog_target: "trigger",
-          action: "click->alert-dialog#open"
+          action: "click->alert-dialog#open",
         },
       }
     end
@@ -130,7 +130,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          alert_dialog_target: "content"
+          alert_dialog_target: "content",
         },
       }
     end

data/lib/shadcn_phlexcomponents/components/base.rb

@@ -151,8 +151,8 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          "#{component}-target" => "overlay"
-        }
+          "#{component}-target" => "overlay",
+        },
       )
     end
   end

data/lib/shadcn_phlexcomponents/components/combobox.rb

@@ -48,8 +48,8 @@ module ShadcnPhlexcomponents
         search_error_text: @search_error_text,
         search_empty_text: @search_empty_text,
         search_placeholder_text: @search_placeholder_text,
-        aria_id: @aria_id, 
-        **attributes, 
+        aria_id: @aria_id,
+        **attributes,
         &
       )
     end
@@ -66,10 +66,6 @@ module ShadcnPhlexcomponents
       ComboboxGroup(aria_id: @aria_id, **attributes, &)
     end
 
-    def empty(**attributes, &)
-      ComboboxEmpty(**attributes, &)
-    end
-
     def items(collection, value_method:, text_method:, disabled_items: nil, &)
       vanish(&)
 
@@ -86,11 +82,11 @@ module ShadcnPhlexcomponents
       )
 
       ComboboxContent(
-        aria_id: @aria_id, 
-        include_blank: @include_blank, 
-        search_error_text: @search_error_text, 
+        aria_id: @aria_id,
+        include_blank: @include_blank,
+        search_error_text: @search_error_text,
         search_empty_text: @search_empty_text,
-        search_placeholder_text: @search_placeholder_text
+        search_placeholder_text: @search_placeholder_text,
       ) do
         collection.each do |item|
           value = item.public_send(value_method)
@@ -193,10 +189,10 @@ module ShadcnPhlexcomponents
     )
 
     def initialize(
-      include_blank: false, 
-      side: :bottom, 
-      align: :center, 
-      aria_id: nil, 
+      include_blank: false,
+      side: :bottom,
+      align: :center,
+      aria_id: nil,
       search_error_text: nil,
       search_empty_text: nil,
       search_placeholder_text: nil,
@@ -222,14 +218,14 @@ module ShadcnPhlexcomponents
           template do
             ComboboxGroup do
               ComboboxLabel { "" }
-            end 
+            end
           end
 
           label(
             class: "sr-only",
             id: "#{@aria_id}-search-label",
             for: "#{@aria_id}-search",
-          ) { @search_placeholder }
+          ) { @search_placeholder_text }
 
           div(class: "flex h-9 items-center gap-2 border-b px-3") do
             icon("search", class: "size-4 shrink-0 opacity-50")
@@ -238,7 +234,7 @@ module ShadcnPhlexcomponents
               class: "placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm
               outline-hidden disabled:cursor-not-allowed disabled:opacity-50 h-9",
               id: "#{@aria_id}-search",
-              placeholder: @search_placeholder,
+              placeholder: @search_placeholder_text,
               type: :text,
               autocomplete: "off",
               autocorrect: "off",
@@ -257,7 +253,7 @@ module ShadcnPhlexcomponents
             )
           end
 
-          div(class: "p-1 max-h-80 overflow-y-auto", data: { combobox_target: "listContainer"})  do
+          div(class: "p-1 max-h-80 overflow-y-auto", data: { combobox_target: "listContainer" }) do
             ComboboxText(target: "empty") { @search_empty_text }
             ComboboxText(target: "error") { @search_error_text }
             ComboboxText(target: "loading") do
@@ -396,7 +392,7 @@ module ShadcnPhlexcomponents
 
   class ComboboxText < Base
     class_variants(base: "py-6 text-center text-sm hidden")
-    
+
     def initialize(target:, **attributes)
       @target = target
       super(**attributes)

data/lib/shadcn_phlexcomponents/components/command.rb

@@ -11,9 +11,9 @@ module ShadcnPhlexcomponents
     ]
 
     def initialize(
-      open: false, 
-      modifier_key: nil, 
-      shortcut_key: nil, 
+      open: false,
+      modifier_key: nil,
+      shortcut_key: nil,
       search_path: nil,
       search_error_text: "Something went wrong, please try again.",
       search_empty_text: "No results found",
@@ -44,8 +44,8 @@ module ShadcnPhlexcomponents
         search_error_text: @search_error_text,
         search_empty_text: @search_empty_text,
         search_placeholder_text: @search_placeholder_text,
-        aria_id: @aria_id, 
-        **attributes, 
+        aria_id: @aria_id,
+        **attributes,
         &
       )
     end
@@ -69,8 +69,8 @@ module ShadcnPhlexcomponents
           command_is_open_value: @open.to_s,
           modifier_key: @modifier_key,
           shortcut_key: @shortcut_key,
-          search_path: @search_path
-        }
+          search_path: @search_path,
+        },
       }
     end
 
@@ -111,7 +111,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           command_target: "trigger",
-          action: "click->command#open"
+          action: "click->command#open",
         },
       }
     end
@@ -149,7 +149,7 @@ module ShadcnPhlexcomponents
       search_error_text: nil,
       search_empty_text: nil,
       search_placeholder_text: nil,
-      aria_id: nil, 
+      aria_id: nil,
       **attributes
     )
       @search_error_text = search_error_text
@@ -187,7 +187,7 @@ module ShadcnPhlexcomponents
         template do
           CommandGroup do
             CommandLabel { "" }
-          end 
+          end
         end
 
         div(class: "text-popover-foreground flex h-full w-full flex-col overflow-hidden bg-transparent") do
@@ -228,7 +228,7 @@ module ShadcnPhlexcomponents
             )
           end
 
-          div(class: "mt-3 p-1 max-h-80 min-h-80 overflow-y-auto", data: { command_target: "listContainer"})  do
+          div(class: "mt-3 p-1 max-h-80 min-h-80 overflow-y-auto", data: { command_target: "listContainer" }) do
             CommandText(target: "empty") { @search_empty_text }
             CommandText(target: "error") { @search_error_text }
             CommandText(target: "loading") do
@@ -291,7 +291,7 @@ module ShadcnPhlexcomponents
   class CommandLabel < Base
     class_variants(base: "text-muted-foreground text-xs px-3 pb-1 text-xs font-medium")
 
-    def initialize( **attributes)
+    def initialize(**attributes)
       super(**attributes)
     end
 
@@ -327,7 +327,7 @@ module ShadcnPhlexcomponents
 
   class CommandText < Base
     class_variants(base: "py-6 text-center text-sm hidden")
-    
+
     def initialize(target:, **attributes)
       @target = target
       super(**attributes)

data/lib/shadcn_phlexcomponents/components/date_picker.rb

@@ -20,8 +20,12 @@ module ShadcnPhlexcomponents
       @id = id
 
       if value
-       value = if value.is_a?(String)
-          DateTime.parse(value) rescue nil
+        value = if value.is_a?(String)
+          begin
+            Time.parse(value)
+          rescue
+            nil
+          end
         else
           value
         end
@@ -72,14 +76,16 @@ module ShadcnPhlexcomponents
             placeholder: @placeholder,
           )
         else
-          div(class: <<~HEREDOC,
-            focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
-            data-[focus=true]:border-ring data-[focus=true]:ring-ring/50 data-[focus=true]:ring-[3px]
-            data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 flex shadow-xs transition-[color,box-shadow]
-            rounded-md border bg-transparent dark:bg-input/30 border-input outline-none h-9 flex items-center
-            aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
-          HEREDOC
-          data: { date_picker_target: "inputContainer", disabled: @disabled }) do
+          div(
+            class: <<~HEREDOC,
+              focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+              data-[focus=true]:border-ring data-[focus=true]:ring-ring/50 data-[focus=true]:ring-[3px]
+              data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 flex shadow-xs transition-[color,box-shadow]
+              rounded-md border bg-transparent dark:bg-input/30 border-input outline-none h-9 flex items-center
+              aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
+            HEREDOC
+            data: { date_picker_target: "inputContainer", disabled: @disabled },
+          ) do
             input(
               id: @id,
               placeholder: @placeholder || @format,
@@ -196,7 +202,7 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(
         style: { display: "none" },
-        class: "fixed z-50 top-1/4 left-1/2 -translate-x-1/2 pointer-events-auto md:top-auto md:left-auto md:translate-none md:pointer-events-[unset]",
+        class: "fixed top-0 left-0 w-max z-50",
         data: { "#{stimulus_controller_name}-target" => "contentContainer" },
       ) do
         div(**@attributes) do
@@ -205,4 +211,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/shadcn_phlexcomponents/components/date_range_picker.rb

@@ -27,11 +27,15 @@ module ShadcnPhlexcomponents
       if value
         value = value.map do |v|
           if v.is_a?(String)
-            DateTime.parse(v) rescue nil
+            begin
+              Time.parse(v)
+            rescue
+              nil
+            end
           else
             v
           end
-        end 
+        end
       end
 
       @name = name ? name[0] : nil
@@ -64,7 +68,7 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(**@attributes) do
-        overlay('date-range-picker')
+        overlay("date-range-picker")
 
         input(
           type: :hidden,

data/lib/shadcn_phlexcomponents/components/dialog.rb

@@ -42,15 +42,15 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "dialog",
-          dialog_is_open_value: @open.to_s
-        }
+          dialog_is_open_value: @open.to_s,
+        },
       }
     end
 
     def view_template(&)
       div(**@attributes) do
         overlay("dialog")
-        
+
         yield
       end
     end
@@ -71,10 +71,10 @@ module ShadcnPhlexcomponents
           expanded: "false",
           controls: "#{@aria_id}-content",
         },
-        data: { 
+        data: {
           as_child: @as_child.to_s,
           dialog_target: "trigger",
-          action: "click->dialog#open"
+          action: "click->dialog#open",
         },
       }
     end
@@ -122,7 +122,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          dialog_target: "content"
+          dialog_target: "content",
         },
       }
     end

data/lib/shadcn_phlexcomponents/components/sheet.rb

@@ -42,15 +42,15 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "dialog",
-          dialog_is_open_value: @open.to_s
-        }
-      }  
+          dialog_is_open_value: @open.to_s,
+        },
+      }
     end
 
     def view_template(&)
       div(**@attributes) do
         overlay("dialog")
-        
+
         yield
       end
     end
@@ -71,10 +71,10 @@ module ShadcnPhlexcomponents
           expanded: false,
           controls: "#{@aria_id}-content",
         },
-        data: { 
+        data: {
           as_child: @as_child.to_s,
           dialog_target: "trigger",
-          action: "click->dialog#open"
+          action: "click->dialog#open",
         },
       }
     end
@@ -150,7 +150,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          dialog_target: "content"
+          dialog_target: "content",
         },
       }
     end

data/lib/shadcn_phlexcomponents/components/toggle.rb

@@ -42,7 +42,7 @@ module ShadcnPhlexcomponents
         data: {
           controller: "toggle",
           toggle_is_on_value: @on.to_s,
-          action: "click->toggle#toggle"
+          action: "click->toggle#toggle",
         },
       }
     end

data/lib/shadcn_phlexcomponents/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-  VERSION = "0.1.16"
+  VERSION = "0.1.18"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: shadcn_phlexcomponents
 version: !ruby/object:Gem::Version
-  version: 0.1.16
+  version: 0.1.18
 platform: ruby
 authors:
 - Sean Yeoh
@@ -109,6 +109,7 @@ files:
 - app/javascript/utils/index.js
 - app/stylesheets/date_picker.css
 - app/stylesheets/nouislider.css
+- app/stylesheets/shadcn_phlexcomponents.css
 - app/stylesheets/tw-animate.css
 - app/typescript/controllers/accordion_controller.ts
 - app/typescript/controllers/alert_dialog_controller.ts