ariadne_view_components 0.0.50 → 0.0.51

data/app/assets/javascripts/components/ariadne/options_controller/options_controller.d.ts

@@ -31,8 +31,8 @@ export default class OptionsController extends SyncedBooleanAttributesController
     readonly isMultiValue: boolean;
     readonly toggleableValue: boolean;
     optionTargetLookup: Map<Element, TOptionKey>;
-    connect(): void;
     select(event: Event, updateTo?: TOutletChangeData<TActiveOptions>): void;
+    optionsTargetConnected(element: Element): void;
     getValueForElement(element: Element): boolean | null;
     getState(): TActiveOptions;
     outletUpdate: (event: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;

data/app/assets/javascripts/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts

@@ -41,4 +41,5 @@ export default class SyncedBooleanAttributesController<T> extends OutletManagerC
     updateAttributesForElement(element: Element, value: boolean): void;
     syncElementAttributes(): void;
     validateAttrChange(dispatchEvent: TStimulusDispatchEvent<TSyncAttrDetail>): void;
+    doesElementHaveOnAttrs(element: Element): boolean;
 }

data/app/components/ariadne/action_card_component.html.erb

@@ -1,6 +1,8 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
-  <%= icon %>
-  <%= title %>
+  <%= render Ariadne::LinkComponent.new(tag: @link_tag, href: @href, actionable: @actionable, classes: @link_classes, attributes: @link_attributes) do %>
+    <%= icon %>
+    <%= title %>
+  <% end %>
   <% if actions? %>
     <div class="<%= @actions_wrapper_classes %>">
       <% actions.each do |action| %>

data/app/components/ariadne/action_card_component.rb

@@ -1,27 +1,61 @@
 # frozen_string_literal: true
 
 module Ariadne
-  # Add a general description of component here
-  # Add additional usage considerations or best practices that may aid the user to use the component correctly.
-  # @accessibility Add any accessibility considerations
+  # Card of anchor tags (most likely) that are used to navigate around a similar idea
   class ActionCardComponent < Ariadne::Component
     DEFAULT_TAG = :div
+    DEFAULT_TITLE_TAG = :h3
+    DEFAULT_ICON_TAG = :svg
+    DEFAULT_ACTION_TAG = :a
     TAG_OPTIONS = [DEFAULT_TAG].freeze
 
     DEFAULT_CLASSES = {
-      wrapper: "ariadne-w-fit ariadne-flex ariadne-flex-col ariadne-items-center",
-      actions_wrapper: "ariadne-flex",
+      wrapper: "ariadne-overflow-hidden ariadne-w-96 ariadne-rounded-lg ariadne-mr-4 [&:last]:ariadne-mr-0",
+      actions_wrapper: "ariadne-flex ariadne-w-full",
+      icon: "",
+      link: "ariadne-flex ariadne-flex-col ariadne-items-center",
+      title: "ariadne-text-center ariadne-mb-4 ariadne-text-xl ariadne-font-bold",
+      action: "ariadne-w-full ariadne-flex ariadne-items-center ariadne-justify-center ariadne-py-6 ariadne-text-sm",
     }
 
     DEFAULT_ATTRIBUTES = {
       wrapper: {},
+      link: {},
+      icon: {},
+      title: {},
+      action: {},
     }
 
-    renders_one :icon, Ariadne::HeroiconComponent
+    renders_one :icon, lambda { |tag: DEFAULT_ICON_TAG, icon: :inbox, size: :lg, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "", attributes: {}, text_classes: "", text_attributes: {}|
+      Ariadne::HeroiconComponent.new(
+        tag: tag,
+        size: size,
+        variant: variant,
+        classes: merge_class_names(DEFAULT_CLASSES[:icon], classes),
+        attributes: DEFAULT_ATTRIBUTES[:icon].merge(attributes),
+        text_classes: text_classes,
+        text_attributes: text_attributes,
+        icon: icon,
+      )
+    }
 
-    renders_one :title, Ariadne::HeadingComponent
+    renders_one :title, lambda { |tag: DEFAULT_TITLE_TAG, classes: "", attributes: {}|
+      Ariadne::HeadingComponent.new(
+        tag: tag,
+        classes: merge_class_names(DEFAULT_CLASSES[:title], classes),
+        attributes: DEFAULT_ATTRIBUTES[:title].merge(attributes),
+      )
+    }
 
-    renders_many :actions, Ariadne::ButtonComponent
+    renders_many :actions, lambda { |tag: DEFAULT_ACTION_TAG, href:, actionable: false, classes: "", attributes: {}|
+      Ariadne::LinkComponent.new(
+        tag: tag,
+        href: href,
+        actionable: actionable,
+        classes: merge_class_names(DEFAULT_CLASSES[:action], classes),
+        attributes: DEFAULT_ATTRIBUTES[:action].merge(attributes),
+      )
+    }
 
     # @example Default
     #
@@ -32,14 +66,23 @@ module Ariadne
     # @param attributes [Hash] <%= link_to_attributes_docs %>
     def initialize(
       tag: DEFAULT_TAG,
+      href:,
       classes: "",
       attributes: {},
-      actions_wrapper_classes: ""
+      actions_wrapper_classes: "",
+      actionable: false,
+      link_classes: "",
+      link_attributes: {}
     )
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @href = href
       @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
       @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge(attributes)
       @actions_wrapper_classes = merge_class_names(DEFAULT_CLASSES[:actions_wrapper], actions_wrapper_classes)
+
+      @link_classes = merge_class_names(DEFAULT_CLASSES[:link], link_classes)
+      @link_attributes = DEFAULT_ATTRIBUTES[:link].merge(link_attributes)
+      @actionable = actionable
     end
   end
 end

data/app/components/ariadne/combobox_component.rb

@@ -59,7 +59,7 @@ module Ariadne
           "data-options-toggleable-value": toggleable_options,
           "data-toggleable-close-on-outside-click-value": close_on_outside_click,
           "data-toggleable-state-value": initially_open,
-
+          "aria-multiselectable": !single_selection,
         })
         .merge(attributes)
 

data/app/components/ariadne/options_controller/options_controller.d.ts

@@ -31,8 +31,8 @@ export default class OptionsController extends SyncedBooleanAttributesController
     readonly isMultiValue: boolean;
     readonly toggleableValue: boolean;
     optionTargetLookup: Map<Element, TOptionKey>;
-    connect(): void;
     select(event: Event, updateTo?: TOutletChangeData<TActiveOptions>): void;
+    optionsTargetConnected(element: Element): void;
     getValueForElement(element: Element): boolean | null;
     getState(): TActiveOptions;
     outletUpdate: (event: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;

data/app/components/ariadne/options_controller/options_controller.js

@@ -3,7 +3,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _OptionsController_instances, _OptionsController_shouldChangeState, _OptionsController_activateIndex, _OptionsController_deactivateIndex, _OptionsController_getElementKey, _OptionsController_buildActiveTargets;
+var _OptionsController_instances, _OptionsController_shouldChangeState, _OptionsController_activateKey, _OptionsController_deactivateKey, _OptionsController_getElementKey;
 import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
 class OptionsController extends SyncedBooleanAttributesController {
     constructor() {
@@ -12,10 +12,6 @@ class OptionsController extends SyncedBooleanAttributesController {
         this.optionTargetLookup = new Map();
         this.outletUpdate = this.select;
     }
-    connect() {
-        __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_buildActiveTargets).call(this);
-        this.syncElementAttributes();
-    }
     select(event, updateTo = {}) {
         var _a;
         const activeOptions = updateTo.data;
@@ -30,11 +26,20 @@ class OptionsController extends SyncedBooleanAttributesController {
             if (shouldChangeState) {
                 const willBeActive = !isCurrentlyActive;
                 this.updateAttributesForElement(target, willBeActive);
-                willBeActive ? __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateIndex).call(this, optionKey) : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_deactivateIndex).call(this, optionKey);
+                willBeActive ? __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateKey).call(this, optionKey) : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_deactivateKey).call(this, optionKey);
             }
         }
         this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: this.activeOptionsValue }));
     }
+    optionsTargetConnected(element) {
+        const key = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, element);
+        if (this.doesElementHaveOnAttrs(element)) {
+            __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateKey).call(this, key);
+        }
+        else {
+            __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_deactivateKey).call(this, key);
+        }
+    }
     getValueForElement(element) {
         var _a;
         if (!this.optionTargetLookup.has(element)) {
@@ -64,9 +69,9 @@ _OptionsController_instances = new WeakSet(), _OptionsController_shouldChangeSta
     // Was selected and it's active but toggling behavior means it should deactivate
     // Was selected and it's not on, so it just needs to be turned on
     return true;
-}, _OptionsController_activateIndex = function _OptionsController_activateIndex(key) {
+}, _OptionsController_activateKey = function _OptionsController_activateKey(key) {
     this.activeOptionsValue = Object.assign(Object.assign({}, this.activeOptionsValue), { [key]: true });
-}, _OptionsController_deactivateIndex = function _OptionsController_deactivateIndex(key) {
+}, _OptionsController_deactivateKey = function _OptionsController_deactivateKey(key) {
     const copy = Object.assign({}, this.activeOptionsValue);
     delete copy[key];
     this.activeOptionsValue = copy;
@@ -76,21 +81,6 @@ _OptionsController_instances = new WeakSet(), _OptionsController_shouldChangeSta
         return elementValue;
     }
     return element.innerText.trim();
-}, _OptionsController_buildActiveTargets = function _OptionsController_buildActiveTargets() {
-    this.optionTargetLookup = new Map();
-    for (let index in this.optionTargets) {
-        const target = this.optionTargets[index];
-        const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, target);
-        this.optionTargetLookup.set(target, optionKey);
-        const onSyncAttr = !!this.syncedAttrsValue.find(attr => target.getAttribute(attr) === 'true');
-        if (onSyncAttr) {
-            __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateIndex).call(this, optionKey);
-        }
-        else {
-            const hasOffAttr = !!this.antiAttrsValue.find(attr => target.getAttribute(attr) === 'false');
-            hasOffAttr && __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateIndex).call(this, optionKey);
-        }
-    }
 };
 OptionsController.outlets = SyncedBooleanAttributesController.outlets;
 OptionsController.targets = ['option'];

data/app/components/ariadne/options_controller/options_controller.ts

@@ -31,11 +31,6 @@ export default class OptionsController
 
   optionTargetLookup: Map<Element, TOptionKey> = new Map()
 
-  connect(): void {
-    this.#buildActiveTargets()
-    this.syncElementAttributes()
-  }
-
   select(event: Event, updateTo: TOutletChangeData<TActiveOptions> = {}) {
     const activeOptions = updateTo.data
     for (let index in this.optionTargets) {
@@ -51,13 +46,22 @@ export default class OptionsController
       if (shouldChangeState) {
         const willBeActive = !isCurrentlyActive
         this.updateAttributesForElement(target, willBeActive)
-        willBeActive ? this.#activateIndex(optionKey) : this.#deactivateIndex(optionKey)
+        willBeActive ? this.#activateKey(optionKey) : this.#deactivateKey(optionKey)
       }
     }
 
     this.sendToOutlets(event, {...updateTo, data: this.activeOptionsValue})
   }
 
+  optionsTargetConnected(element: Element) {
+    const key = this.#getElementKey(element)
+    if (this.doesElementHaveOnAttrs(element)) {
+      this.#activateKey(key)
+    } else {
+      this.#deactivateKey(key)
+    }
+  }
+
   #shouldChangeState(isCurrentlyActive: boolean, wasSelected: boolean) {
     if (!wasSelected && !isCurrentlyActive) {
       // Not currently on and wasn't selected, no reason to change
@@ -80,11 +84,11 @@ export default class OptionsController
     return true
   }
 
-  #activateIndex(key: TOptionKey) {
+  #activateKey(key: TOptionKey) {
     this.activeOptionsValue = {...this.activeOptionsValue, [key]: true}
   }
 
-  #deactivateIndex(key: TOptionKey) {
+  #deactivateKey(key: TOptionKey) {
     const copy = {...this.activeOptionsValue}
     delete copy[key]
     this.activeOptionsValue = copy
@@ -99,22 +103,6 @@ export default class OptionsController
     return (element as HTMLElement).innerText.trim()
   }
 
-  #buildActiveTargets() {
-    this.optionTargetLookup = new Map()
-    for (let index in this.optionTargets) {
-      const target = this.optionTargets[index]
-      const optionKey = this.#getElementKey(target)
-      this.optionTargetLookup.set(target, optionKey)
-      const onSyncAttr = !!this.syncedAttrsValue.find(attr => target.getAttribute(attr) === 'true')
-      if (onSyncAttr) {
-        this.#activateIndex(optionKey)
-      } else {
-        const hasOffAttr = !!this.antiAttrsValue.find(attr => target.getAttribute(attr) === 'false')
-        hasOffAttr && this.#activateIndex(optionKey)
-      }
-    }
-  }
-
   getValueForElement(element: Element) {
     if (!this.optionTargetLookup.has(element)) {
       return null

data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts

@@ -41,4 +41,5 @@ export default class SyncedBooleanAttributesController<T> extends OutletManagerC
     updateAttributesForElement(element: Element, value: boolean): void;
     syncElementAttributes(): void;
     validateAttrChange(dispatchEvent: TStimulusDispatchEvent<TSyncAttrDetail>): void;
+    doesElementHaveOnAttrs(element: Element): boolean;
 }

data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.js

@@ -95,6 +95,26 @@ class SyncedBooleanAttributesController extends OutletManagerController {
             }
         }
     }
+    doesElementHaveOnAttrs(element) {
+        if (this.hasSyncedAttrsValue) {
+            for (let i = 0; i < this.syncedAttrsValue.length; i++) {
+                const attrName = this.syncedAttrsValue[i];
+                if (element.getAttribute(attrName) === 'true') {
+                    return true;
+                }
+            }
+        }
+        if (this.hasAntiAttrsValue) {
+            for (let i = 0; i < this.antiAttrsValue.length; i++) {
+                const attrName = this.antiAttrsValue[i];
+                const attrValue = element.getAttribute(attrName);
+                if (attrValue === 'false' || (SyncedBooleanAttributesController.removeOnFalseAttrs[attrName] && !attrValue)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
 }
 _SyncedBooleanAttributesController_instances = new WeakSet(), _SyncedBooleanAttributesController_isSyncedAttr = function _SyncedBooleanAttributesController_isSyncedAttr(attr) {
     var _a;

data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.ts

@@ -131,6 +131,29 @@ export default class SyncedBooleanAttributesController<T> extends OutletManagerC
     }
   }
 
+  doesElementHaveOnAttrs(element: Element) {
+    if (this.hasSyncedAttrsValue) {
+      for (let i = 0; i < this.syncedAttrsValue.length; i++) {
+        const attrName = this.syncedAttrsValue[i]
+        if (element.getAttribute(attrName) === 'true') {
+          return true
+        }
+      }
+    }
+
+    if (this.hasAntiAttrsValue) {
+      for (let i = 0; i < this.antiAttrsValue.length; i++) {
+        const attrName = this.antiAttrsValue[i]
+        const attrValue = element.getAttribute(attrName)
+        if (attrValue === 'false' || (SyncedBooleanAttributesController.removeOnFalseAttrs[attrName] && !attrValue)) {
+          return true
+        }
+      }
+    }
+
+    return false
+  }
+
   #isSyncedAttr(attr: string) {
     // Helper function to determine if the attr is synced
     if (this.syncedAttrsLookup === null) {

data/lib/ariadne/view_components/version.rb

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

data/static/constants.json

@@ -1,14 +1,29 @@
 {
   "Ariadne::ActionCardComponent": {
+    "DEFAULT_ACTION_TAG": "a",
     "DEFAULT_ATTRIBUTES": {
       "wrapper": {
+      },
+      "link": {
+      },
+      "icon": {
+      },
+      "title": {
+      },
+      "action": {
       }
     },
     "DEFAULT_CLASSES": {
-      "wrapper": "ariadne-w-fit ariadne-flex ariadne-flex-col ariadne-items-center",
-      "actions_wrapper": "ariadne-flex"
-    },
+      "wrapper": "ariadne-overflow-hidden ariadne-w-96 ariadne-rounded-lg ariadne-mr-4 [&:last]:ariadne-mr-0",
+      "actions_wrapper": "ariadne-flex ariadne-w-full",
+      "icon": "",
+      "link": "ariadne-flex ariadne-flex-col ariadne-items-center",
+      "title": "ariadne-text-center ariadne-mb-4 ariadne-text-xl ariadne-font-bold",
+      "action": "ariadne-w-full ariadne-flex ariadne-items-center ariadne-justify-center ariadne-py-6 ariadne-text-sm"
+    },
+    "DEFAULT_ICON_TAG": "svg",
     "DEFAULT_TAG": "div",
+    "DEFAULT_TITLE_TAG": "h3",
     "TAG_OPTIONS": [
       "div"
     ]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.50
+  version: 0.0.51
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-06-29 00:00:00.000000000 Z
+date: 2023-06-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge