ariadne_view_components 0.0.47 → 0.0.48

data/app/components/ariadne/toggleable_controller/toggleable_controller.ts

@@ -0,0 +1,87 @@
+import {Controller} from '@hotwired/stimulus'
+import {useClickOutside} from 'stimulus-use'
+
+export interface ToggleableOutlet {
+  toggle: (event: Event, value?: boolean) => void
+}
+
+export default class ToggleableController extends Controller implements ToggleableOutlet {
+  static outlets = ['toggleable']
+  static values = {
+    state: {
+      type: Boolean,
+      default: false,
+    },
+    syncedAttrs: Array,
+    antiAttrs: Array,
+    closeOnOutsideClick: {
+      type: Boolean,
+      default: false,
+    },
+  }
+
+  // Some attributes are only false in HTML if they don't exist
+  // If included here, the property will be deleted on "false"
+  static removeOnFalseAttrs: {[k: string]: boolean} = {
+    checked: true,
+  }
+
+  declare stateValue: boolean
+  declare readonly toggleableOutlets: Array<ToggleableOutlet>
+  declare readonly hasToggleableOutlet: boolean
+  declare readonly syncedAttrsValue: string[]
+  declare readonly hasSyncedAttrsValue: boolean
+  declare readonly antiAttrsValue: string[]
+  declare readonly hasAntiAttrsValue: boolean
+  declare readonly closeOnOutsideClickValue: boolean
+
+  connect(): void {
+    this.#updateAllAttrs()
+    this.#updateOutlets(new Event('Init'))
+    useClickOutside(this, {dispatchEvent: this.closeOnOutsideClickValue})
+  }
+
+  toggle(event: Event, value?: boolean) {
+    this.stateValue = value ?? !this.stateValue
+
+    this.#updateAllAttrs()
+    this.#updateOutlets(event)
+  }
+
+  clickOutside(event: Event) {
+    if (this.closeOnOutsideClickValue) {
+      this.toggle(event, false)
+    }
+  }
+
+  #updateAllAttrs() {
+    if (this.hasSyncedAttrsValue) {
+      this.#setAttrs(this.syncedAttrsValue)
+    }
+
+    if (this.hasAntiAttrsValue) {
+      this.#setAttrs(this.antiAttrsValue, false)
+    }
+  }
+
+  #setAttrs(attrs: string[], matchState = true) {
+    const attrState = String(matchState ? this.stateValue : !this.stateValue)
+    for (let index in attrs) {
+      const attr = attrs[index]
+      if (attrState === 'false' && ToggleableController.removeOnFalseAttrs[attr]) {
+        this.element.removeAttribute(attr)
+      } else {
+        this.element.setAttribute(attr, attrState)
+      }
+    }
+  }
+
+  #updateOutlets(event: Event) {
+    if (this.hasToggleableOutlet) {
+      for (let index in this.toggleableOutlets) {
+        const outlet = this.toggleableOutlets[index]
+        outlet.toggle(event, this.stateValue)
+      }
+    }
+  }
+}

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.47"
+    VERSION = "0.0.48"
   end
 end

data/static/arguments.yml

@@ -574,6 +574,21 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: SubheaderComponent
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/subheader_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:p`"
+    description: The rendered tag name.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: TabComponent
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/tab_component.rb
   parameters:
@@ -702,6 +717,41 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: ToggleComponent
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/toggle_component.rb
+  parameters:
+  - name: classes
+    type: String
+    default: "`nil`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: color
+    type: String
+    default: "`:indigo`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: checked
+    type: Boolean
+    default: "`false`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: disabled
+    type: Boolean
+    default: "`false`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: size
+    type: String
+    default: "`:md`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: label
+    type: String
+    default: N/A
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: status_label_position
+    type: String
+    default: "`:start`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: TooltipComponent
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/tooltip_component.rb
   parameters:

data/static/audited_at.json

@@ -1,14 +1,21 @@
 {
+  "Ariadne::ActionCardComponent": "",
   "Ariadne::AvatarComponent": "",
   "Ariadne::AvatarStackComponent": "",
   "Ariadne::BaseButton": "",
   "Ariadne::BaseComponent": "",
   "Ariadne::BlankslateComponent": "",
   "Ariadne::BodyComponent": "",
+  "Ariadne::BottomTabComponent": "",
+  "Ariadne::BottomTabNavComponent": "",
+  "Ariadne::BreadcrumbsComponent": "",
   "Ariadne::ButtonComponent": "",
+  "Ariadne::CheckboxComponent": "",
   "Ariadne::ClipboardCopyComponent": "",
+  "Ariadne::CloseButtonComponent": "",
   "Ariadne::CommentComponent": "",
   "Ariadne::ContainerComponent": "",
+  "Ariadne::Content": "",
   "Ariadne::CounterComponent": "",
   "Ariadne::DetailsComponent": "",
   "Ariadne::Dropdown::MenuComponent": "",
@@ -31,8 +38,14 @@
   "Ariadne::PanelBarComponent": "",
   "Ariadne::PanelBarComponent::PanelItem": "",
   "Ariadne::PillComponent": "",
+  "Ariadne::PopoverComponent": "",
+  "Ariadne::ProgressBarComponent": "",
+  "Ariadne::RelativeTimeComponent": "",
   "Ariadne::RichTextAreaComponent": "",
+  "Ariadne::ShowMoreButtonComponent": "",
   "Ariadne::SlideoverComponent": "",
+  "Ariadne::SpinnerComponent": "",
+  "Ariadne::SubheaderComponent": "",
   "Ariadne::TabComponent": "",
   "Ariadne::TabContainerComponent": "",
   "Ariadne::TabNavComponent": "",
@@ -48,5 +61,6 @@
   "Ariadne::Text": "",
   "Ariadne::TimeAgoComponent": "",
   "Ariadne::TimelineComponent": "",
+  "Ariadne::ToggleComponent": "",
   "Ariadne::TooltipComponent": ""
 }

data/static/classes.yml

@@ -1,174 +1,210 @@
 ---
-- ".ariadne-inline-block"
-- ".ariadne-rounded-full"
-- ".ariadne-ring-2"
-- ".ariadne-ring-white"
-- ".ariadne-cursor-pointer"
-- ".hover:ariadne-text-button-text-color"
-- ".focus:ariadne-outline-none"
-- ".focus:ariadne-ring-2"
-- ".focus:ariadne-ring-offset-2"
-- ".focus:ariadne-ring-purple-500"
-- ".ariadne-flex"
-- ".ariadne--space-x-2"
-- ".ariadne-overflow-hidden"
-- ".ariadne-items-center"
-- ".ariadne-border"
-- ".ariadne-shadow-sm"
-- ".ariadne-px-2.5"
-- ".ariadne-py-1.5"
-- ".ariadne-text-xs"
-- ".ariadne-font-medium"
-- ".ariadne-rounded"
-- ".ariadne-px-3"
-- ".ariadne-py-2"
-- ".ariadne-text-sm"
-- ".ariadne-leading-4"
-- ".ariadne-rounded-m"
-- ".ariadne-px-4"
-- ".ariadne-rounded-md"
-- ".ariadne-text-base"
-- ".ariadne-px-6"
-- ".ariadne-py-3"
-- ".ariadne-max-w-7xl"
-- ".ariadne-mx-auto"
-- ".ariadne-py-12"
-- ".sm:ariadne-px-6"
-- ".lg:ariadne-py-16"
-- ".lg:ariadne-px-8"
-- ".ariadne-text-center"
-- ".ariadne-text-3xl"
-- ".ariadne-font-extrabold"
-- ".ariadne-tracking-tight"
-- ".ariadne-text-gray-900"
-- ".sm:ariadne-text-4xl"
-- ".ariadne-mt-8"
-- ".ariadne-justify-center"
-- ".ariadne-scroll-smooth"
-- ".ariadne-antialiased"
-- ".ariadne-text-slate-800"
-- ".ariadne-bg-slate-50"
-- ".hover:ariadne-bg-slate-100"
-- ".ariadne-border-slate-300"
-- ".focus:ariadne-ring-offset-slate-50"
-- ".focus:ariadne-ring-slate-600"
-- ".focus:ariadne-ring-offset-blue-50"
-- ".ariadne-text-green-800"
-- ".ariadne-bg-green-50"
-- ".hover:ariadne-bg-green-100"
-- ".ariadne-border-green-300"
-- ".focus:ariadne-ring-offset-green-50"
-- ".focus:ariadne-ring-green-600"
-- ".ariadne-text-yellow-800"
-- ".ariadne-bg-yellow-50"
-- ".hover:ariadne-bg-yellow-100"
-- ".ariadne-border-yellow-300"
-- ".focus:ariadne-ring-offset-yellow-50"
-- ".focus:ariadne-ring-yellow-600"
-- ".ariadne-text-red-800"
-- ".ariadne-bg-red-50"
-- ".hover:ariadne-bg-red-100"
-- ".ariadne-border-red-300"
-- ".focus:ariadne-ring-offset-red-50"
-- ".focus:ariadne-ring-red-600"
-- ".ariadne-text-yellow-600"
-- ".ariadne-inline-flex"
-- ".ariadne-p-1"
-- ".ariadne-border-transparent"
-- ".ariadne-invisible"
-- ".ariadne-absolute"
-- ".ariadne-bg-slate-900"
-- ".ariadne-text-white"
-- ".ariadne-font-semibold"
-- ".ariadne-max-w-xs"
-- ".ariadne-py-1"
-- ".ariadne-px-2"
-- ".ariadne-z-max"
-- ".ariadne-tooltip-arrow"
-- ".ariadne-block"
-- ".ariadne-underline"
-- ".ariadne-decoration-double"
-- ".ariadne-text-green-600"
-- ".ariadne-border-gray-300"
-- ".ariadne-shadow"
-- ".ariadne-py-5"
-- ".ariadne-px-5"
-- ".ariadne-text-gray-500"
-- ".hover:ariadne-text-gray-700"
-- ".hover:ariadne-border-gray-300"
-- ".ariadne-whitespace-nowrap"
-- ".ariadne-py-4"
-- ".ariadne-px-1"
-- ".ariadne-border-b-2"
-- ".ariadne-border-slate-500"
-- ".ariadne-text-slate-600"
-- ".ariadne-space-y-8"
-- ".sm:ariadne-space-y-5"
-- ".tiptap-editor"
-- ".ariadne-justify-end"
-- ".ariadne__details-reset"
-- ".ariadne-mt-2"
-- ".ariadne-w-56"
-- ".ariadne-divide-y"
-- ".ariadne-divide-gray-100"
-- ".ariadne-shadow-lg"
-- ".ariadne-ring-1"
-- ".ariadne-ring-black"
-- ".ariadne-ring-opacity-5"
-- ".ariadne-text-gray-700"
-- ".ariadne-ml-2"
-- ".ariadne--mr-1"
-- ".ariadne-text-red-500"
-- ".ariadne-mt-0"
-- ".ariadne-text-slate-700"
-- ".ariadne-p-4"
-- ".ariadne-bg-blue-50"
-- ".ariadne-flex-shrink-0"
-- ".ariadne-ml-3"
-- ".ariadne-text-yellow-700"
-- ".ariadne-text-red-700"
-- ".ariadne-text-green-700"
-- ".ariadne-pl-3"
-- ".ariadne--mx-1.5"
-- ".ariadne--my-1.5"
-- ".ariadne-p-1.5"
-- ".ariadne-text-slate-500"
-- ".hover:ariadne-bg-blue-100"
-- ".focus:ariadne-ring-blue-600"
-- ".ariadne-sr-only"
-- ".ariadne-mt-4"
-- ".ariadne-pt-5"
-- ".ariadne--mx-2"
-- ".ariadne-mt-6"
-- ".sm:ariadne-mt-0"
-- ".ariadne-grid"
-- ".ariadne-gap-6"
-- ".sm:ariadne-grid-cols-2"
-- ".lg:ariadne-grid-cols-3"
-- ".ariadne-font-bold"
-- ".ariadne-leading-7"
-- ".sm:ariadne-text-3xl"
-- ".ariadne-text-2xl"
-- ".ariadne-items-baseline"
-- ".ariadne-stroke-state-open"
-- ".ariadne-stroke-state-closed"
-- ".ariadne-fill-state-closed"
-- ".ariadne-pl-2"
-- ".ariadne-divide-gray-300"
-- ".ariadne-relative"
-- ".hover:ariadne-bg-button-hover-color"
-- ".md:ariadne-flex"
-- ".md:ariadne-divide-y-0"
-- ".ariadne-text-black"
-- ".ariadne-flex-col"
-- ".ariadne-hidden"
-- ".ariadne-list-none"
-- ".ariadne-border-slate-600"
-- ".hover:ariadne-text-slate-700"
-- ".hover:ariadne-border-slate-700"
-- ".ariadne-divide-gray-200"
-- ".ariadne-pb-4"
-- ".ariadne-text-lg"
-- ".ariadne-pt-6"
-- ".ariadne-flow-root"
-- ".ariadne--mb-8"
+- '.ariadne-inline-block'
+- '.ariadne-rounded-full'
+- '.ariadne-ring-2'
+- '.ariadne-ring-white'
+- '.ariadne-cursor-pointer'
+- '.hover:ariadne-text-button-text-color'
+- '.focus:ariadne-outline-none'
+- '.focus:ariadne-ring-2'
+- '.focus:ariadne-ring-offset-2'
+- '.focus:ariadne-ring-purple-500'
+- '.ariadne-flex'
+- '.ariadne--space-x-2'
+- '.ariadne-overflow-hidden'
+- '.ariadne-items-center'
+- '.ariadne-border'
+- '.ariadne-shadow-sm'
+- '.ariadne-px-2.5'
+- '.ariadne-py-1.5'
+- '.ariadne-text-xs'
+- '.ariadne-font-medium'
+- '.ariadne-rounded'
+- '.ariadne-px-3'
+- '.ariadne-py-2'
+- '.ariadne-text-sm'
+- '.ariadne-leading-4'
+- '.ariadne-rounded-m'
+- '.ariadne-px-4'
+- '.ariadne-rounded-md'
+- '.ariadne-text-base'
+- '.ariadne-px-6'
+- '.ariadne-py-3'
+- '.ariadne-max-w-7xl'
+- '.ariadne-mx-auto'
+- '.ariadne-py-12'
+- '.sm:ariadne-px-6'
+- '.lg:ariadne-py-16'
+- '.lg:ariadne-px-8'
+- '.ariadne-text-center'
+- '.ariadne-text-3xl'
+- '.ariadne-font-extrabold'
+- '.ariadne-tracking-tight'
+- '.ariadne-text-gray-900'
+- '.sm:ariadne-text-4xl'
+- '.ariadne-mt-8'
+- '.ariadne-justify-center'
+- '.ariadne-scroll-smooth'
+- '.ariadne-antialiased'
+- '.ariadne-text-slate-800'
+- '.ariadne-bg-slate-50'
+- '.hover:ariadne-bg-slate-100'
+- '.ariadne-border-slate-300'
+- '.focus:ariadne-ring-offset-slate-50'
+- '.focus:ariadne-ring-slate-600'
+- '.focus:ariadne-ring-offset-blue-50'
+- '.ariadne-text-green-800'
+- '.ariadne-bg-green-50'
+- '.hover:ariadne-bg-green-100'
+- '.ariadne-border-green-300'
+- '.focus:ariadne-ring-offset-green-50'
+- '.focus:ariadne-ring-green-600'
+- '.ariadne-text-yellow-800'
+- '.ariadne-bg-yellow-50'
+- '.hover:ariadne-bg-yellow-100'
+- '.ariadne-border-yellow-300'
+- '.focus:ariadne-ring-offset-yellow-50'
+- '.focus:ariadne-ring-yellow-600'
+- '.ariadne-text-red-800'
+- '.ariadne-bg-red-50'
+- '.hover:ariadne-bg-red-100'
+- '.ariadne-border-red-300'
+- '.focus:ariadne-ring-offset-red-50'
+- '.focus:ariadne-ring-red-600'
+- '.ariadne-text-yellow-600'
+- '.ariadne-inline-flex'
+- '.ariadne-p-1'
+- '.ariadne-border-transparent'
+- '.ariadne-invisible'
+- '.ariadne-absolute'
+- '.ariadne-bg-slate-900'
+- '.ariadne-text-white'
+- '.ariadne-font-semibold'
+- '.ariadne-max-w-xs'
+- '.ariadne-py-1'
+- '.ariadne-px-2'
+- '.ariadne-z-max'
+- '.ariadne-tooltip-arrow'
+- '.ariadne-block'
+- '.ariadne-underline'
+- '.ariadne-decoration-double'
+- '.ariadne-text-green-600'
+- '.ariadne-border-gray-300'
+- '.ariadne-shadow'
+- '.ariadne-py-5'
+- '.ariadne-px-5'
+- '.ariadne-text-gray-500'
+- '.hover:ariadne-text-gray-700'
+- '.hover:ariadne-border-gray-300'
+- '.ariadne-whitespace-nowrap'
+- '.ariadne-py-4'
+- '.ariadne-px-1'
+- '.ariadne-border-b-2'
+- '.ariadne-border-slate-500'
+- '.ariadne-text-slate-600'
+- '.ariadne-space-y-8'
+- '.sm:ariadne-space-y-5'
+- '.tiptap-editor'
+- '.ariadne-justify-end'
+- '.ariadne__details-reset'
+- '.ariadne-mt-2'
+- '.ariadne-w-56'
+- '.ariadne-divide-y'
+- '.ariadne-divide-gray-100'
+- '.ariadne-shadow-lg'
+- '.ariadne-ring-1'
+- '.ariadne-ring-black'
+- '.ariadne-ring-opacity-5'
+- '.ariadne-text-gray-700'
+- '.ariadne-ml-2'
+- '.ariadne--mr-1'
+- '.ariadne-text-red-500'
+- '.ariadne-mt-0'
+- '.ariadne-text-slate-700'
+- '.ariadne-p-4'
+- '.ariadne-bg-blue-50'
+- '.ariadne-flex-shrink-0'
+- '.ariadne-ml-3'
+- '.ariadne-text-yellow-700'
+- '.ariadne-text-red-700'
+- '.ariadne-text-green-700'
+- '.ariadne-pl-3'
+- '.ariadne--mx-1.5'
+- '.ariadne--my-1.5'
+- '.ariadne-p-1.5'
+- '.ariadne-text-slate-500'
+- '.hover:ariadne-bg-blue-100'
+- '.focus:ariadne-ring-blue-600'
+- '.ariadne-sr-only'
+- '.ariadne-mt-4'
+- '.ariadne-pt-5'
+- '.ariadne--mx-2'
+- '.ariadne-mt-6'
+- '.sm:ariadne-mt-0'
+- '.ariadne-grid'
+- '.ariadne-gap-6'
+- '.sm:ariadne-grid-cols-2'
+- '.lg:ariadne-grid-cols-3'
+- '.ariadne-font-bold'
+- '.ariadne-leading-7'
+- '.sm:ariadne-text-3xl'
+- '.ariadne-text-2xl'
+- '.ariadne-items-baseline'
+- '.ariadne-stroke-state-open'
+- '.ariadne-stroke-state-closed'
+- '.ariadne-fill-state-closed'
+- '.ariadne-pl-2'
+- '.ariadne-divide-gray-300'
+- '.ariadne-relative'
+- '.hover:ariadne-bg-button-hover-color'
+- '.md:ariadne-flex'
+- '.md:ariadne-divide-y-0'
+- '.ariadne-text-black'
+- '.ariadne-flex-col'
+- '.ariadne-hidden'
+- '.ariadne-list-none'
+- '.ariadne-border-slate-600'
+- '.hover:ariadne-text-slate-700'
+- '.hover:ariadne-border-slate-700'
+- '.ariadne-divide-gray-200'
+- '.ariadne-pb-4'
+- '.ariadne-text-lg'
+- '.ariadne-pt-6'
+- '.ariadne-flow-root'
+- '.ariadne--mb-8'
+- '.ariadne-group/wrapper'
+- '.data-[disabled=true]:ariadne-opacity-50'
+- '.data-[disabled=true]:ariadne-cursor-auto'
+- '.ariadne-w-fit'
+- '.ariadne-flex-row'
+- '.group-data-[label-position=start]/wrapper:ariadne-mr-1.5'
+- '.group-data-[label-position=end]/wrapper:ariadne-ml-1'
+- '.ariadne-group/toggle'
+- '.group-data-[disabled=false]/wrapper:ariadne-cursor-pointer'
+- '.ariadne-focus:outline-none'
+- '.ariadne-focus:ring-2'
+- '.ariadne-focus:ring-indigo-600'
+- '.ariadne-focus:ring-offset-2'
+- '.disabled:ariadne-cursor-auto'
+- '.ariadne-h-5'
+- '.ariadne-w-10'
+- '.ariadne-translate-x-3'
+- '.ariadne-pointer-events-none'
+- '.ariadne-h-full'
+- '.ariadne-w-full'
+- '.ariadne-bg-white'
+- '.ariadne-bg-gray-200'
+- '.ariadne-transition-colors'
+- '.ariadne-duration-200'
+- '.ariadne-ease-in-out'
+- '.ariadne-h-4'
+- '.ariadne-w-9'
+- '.group-aria-checked/toggle:ariadne-bg-indigo-600'
+- '.ariadne-left-0'
+- '.ariadne-transform'
+- '.ariadne-border-gray-200'
+- '.ariadne-ring-0'
+- '.ariadne-transition-transform'
+- '.ariadne-translate-x-0'
+- '.ariadne-w-5'
+- '.group-aria-checked/toggle:ariadne-translate-x-5'