loco_motion-rails 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +95 -67
- data/app/components/daisy/actions/button_component.rb +5 -2
- data/app/components/daisy/actions/dropdown_component.rb +1 -1
- data/app/components/daisy/actions/modal_component.rb +56 -14
- data/app/components/daisy/actions/swap_component.rb +3 -1
- data/app/components/daisy/actions/theme_controller_component.rb +1 -1
- data/app/components/daisy/data_display/accordion_component.rb +2 -1
- data/app/components/daisy/data_display/avatar_component.rb +3 -1
- data/app/components/daisy/data_display/badge_component.rb +16 -2
- data/app/components/daisy/data_display/card_component.rb +2 -1
- data/app/components/daisy/data_display/carousel_component.rb +1 -1
- data/app/components/daisy/data_display/chat_component.rb +5 -8
- data/app/components/daisy/data_display/collapse_component.rb +3 -1
- data/app/components/daisy/data_display/countdown_component.rb +2 -1
- data/app/components/daisy/data_display/diff_component.rb +1 -1
- data/app/components/daisy/data_display/kbd_component.rb +14 -1
- data/app/components/daisy/data_display/stat_component.rb +3 -1
- data/app/components/daisy/data_display/table_component.rb +1 -1
- data/app/components/daisy/data_display/timeline_component.rb +1 -1
- data/app/components/daisy/data_display/timeline_event_component.rb +1 -1
- data/app/components/daisy/feedback/alert_component.rb +1 -1
- data/app/components/daisy/feedback/loading_component.rb +11 -0
- data/app/components/daisy/feedback/progress_component.rb +20 -0
- data/app/components/daisy/feedback/radial_progress_component.rb +29 -0
- data/app/components/daisy/feedback/skeleton_component.rb +9 -0
- data/app/components/daisy/feedback/toast_component.rb +9 -0
- data/app/components/daisy/feedback/tooltip_component.rb +41 -0
- data/app/components/daisy/layout/artboard_component.rb +11 -0
- data/app/components/daisy/layout/divider_component.rb +32 -0
- data/app/components/daisy/layout/drawer_component.html.haml +9 -0
- data/app/components/daisy/layout/drawer_component.rb +110 -0
- data/app/components/daisy/layout/footer_component.rb +29 -0
- data/app/components/daisy/layout/hero_component.html.haml +5 -0
- data/app/components/daisy/layout/hero_component.rb +21 -0
- data/app/components/daisy/layout/indicator_component.rb +36 -0
- data/app/components/daisy/layout/join_component.rb +1 -1
- data/app/components/daisy/layout/stack_component.rb +9 -0
- data/app/components/daisy/navigation/bottom_nav_component.rb +2 -2
- data/app/components/daisy/navigation/breadcrumbs_component.rb +1 -1
- data/app/components/daisy/navigation/link_component.rb +38 -10
- data/app/components/daisy/navigation/menu_component.rb +45 -5
- data/app/components/daisy/navigation/navbar_component.rb +1 -1
- data/app/components/daisy/navigation/steps_component.rb +2 -2
- data/app/components/daisy/navigation/tabs_component.rb +1 -1
- data/app/components/hero/icon_component.rb +10 -1
- data/lib/daisy.rb +13 -3
- data/lib/hero.rb +7 -0
- data/lib/loco_motion/basic_component.rb +1 -1
- data/lib/loco_motion/concerns/tippable_component.rb +26 -0
- data/lib/loco_motion/configuration.rb +35 -0
- data/lib/loco_motion/helpers.rb +89 -0
- data/lib/loco_motion.rb +6 -36
- metadata +35 -6
- data/app/components/daisy/data_display/badge_component.html.haml +0 -2
- data/app/components/daisy/data_display/kbd_component.html.haml +0 -2
- data/app/components/daisy/navigation/link_component.html.haml +0 -4
- data/lib/daisy/helpers.rb +0 -61
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a020015ecb6d9ee0a705d25830f1951b00c60be6ee4046939b878d3a720bfbda
|
4
|
+
data.tar.gz: c9bc31844a168d4427423912be65f354387aba43f2c6d6711998cee947e2311d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f88796625ae5f6f7c7690563d0a687ed2d8932924d305cb12da0985fdcfdb00f629e6a25618afe5498ec6932af0e8c45b1cc3008a9f68d28940563f9f41f1fb0
|
7
|
+
data.tar.gz: 5f09dacd5dab790708428cb3e853e40fa59a5d20da58b4d11f9e99cca76bf940b1d3d311e55e8396b140acb2271eddb3df202175164ba59306acc041427d65cd
|
data/README.md
CHANGED
@@ -4,7 +4,7 @@
|
|
4
4
|
Crazy fast Rails development with modern tools and components leveraging
|
5
5
|
ViewComponent, TailwindCSS, DaisyUI and more!
|
6
6
|
|
7
|
-
|
7
|
+
<img src="//loco-motion-docs.profoundry.us/images/loco-chats.png" width="500px" style="border: 1px solid #bbb; padding: 2px; border-radius: 10px;">
|
8
8
|
|
9
9
|
_**DISCLAIMER**_
|
10
10
|
|
@@ -13,10 +13,12 @@ In particular, new Daisy components are being added frequently and older
|
|
13
13
|
components are being updated with new features meaning the APIs are very likely
|
14
14
|
to change!
|
15
15
|
|
16
|
-
We
|
17
|
-
|
18
|
-
|
19
|
-
|
16
|
+
We expect to settle on and purchase a real domain name in the near future, but
|
17
|
+
for the time being, the latest documentation is available at the links below.
|
18
|
+
|
19
|
+
- [Docs / Demo (Latest Release)][1]
|
20
|
+
- [API Docs (Latest Release)][2]
|
21
|
+
- [Docs / Demo (Main Branch / Staging)][3]
|
20
22
|
|
21
23
|
Please reach out by opening an
|
22
24
|
[Issue](https://github.com/profoundry-us/loco_motion/issues) if you've found a
|
@@ -42,7 +44,6 @@ your solution is aligned with our goals.
|
|
42
44
|
- [LocoMotion Components](#locomotion-components)
|
43
45
|
- [Install](#install)
|
44
46
|
- [Using Components](#using-components)
|
45
|
-
- [Setting a Base Component Class](#setting-a-base-component-class)
|
46
47
|
- [Developing](#developing)
|
47
48
|
- [Tooling](#tooling)
|
48
49
|
- [TODO / Next Steps](#todo--next-steps)
|
@@ -460,16 +461,23 @@ recommned Rspec with [factory_bot](https://github.com/thoughtbot/factory_bot)
|
|
460
461
|
and [Shoulda Matchers](https://github.com/thoughtbot/shoulda-matchers).
|
461
462
|
|
462
463
|
Finally, although both libraries offer some functionality for testing your user
|
463
|
-
interface, we recommend utilizing [
|
464
|
-
it more closely mimics the real user experience in a browser and it allows
|
465
|
-
to see in real-time what is happening, including in-browser debugging!
|
464
|
+
interface, we recommend utilizing [Playwright](https://playwright.dev/) instead
|
465
|
+
as it more closely mimics the real user experience in a browser and it allows
|
466
|
+
you to see in real-time what is happening, including in-browser debugging!
|
467
|
+
|
468
|
+
Although the common setup is to write your specs in JavaScript or TypeScript,
|
469
|
+
you can actually write your End to End tests in Ruby / Rspec by utilizing the
|
470
|
+
[playwright-ruby-client](https://playwright-ruby-client.vercel.app/)!
|
471
|
+
|
472
|
+
We'll have some guides and examples for this coming soon!
|
466
473
|
|
467
474
|
> [!NOTE]
|
468
|
-
>
|
469
|
-
>
|
470
|
-
>
|
471
|
-
>
|
472
|
-
>
|
475
|
+
> We used to recommend [Cypress](https://www.cypress.io) for End-to-End tests,
|
476
|
+
> but it's reliance on JavaScript and sometimes flakey tests caused us to search
|
477
|
+
> out a new solution / recommendation.
|
478
|
+
>
|
479
|
+
> We plan to have a writeup soon (an ADR specifically) on exactly why we made
|
480
|
+
> the switch.
|
473
481
|
|
474
482
|
## Authentication
|
475
483
|
|
@@ -670,9 +678,9 @@ a full set of UI components to help you build robust and full-featured apps.
|
|
670
678
|
|
671
679
|
> [!CAUTION]
|
672
680
|
> The LocoMotion components are being actively developed and are NOT ready for
|
673
|
-
> production / public use
|
674
|
-
>
|
675
|
-
>
|
681
|
+
> production / public use! We have finished basic versions of the DaisyUI
|
682
|
+
> Actions, DataDisplay, Navigation, and Feedback components, but we expect these
|
683
|
+
> to change (possibly quite a bit) as we begin to use them in projects.
|
676
684
|
|
677
685
|
### Install
|
678
686
|
|
@@ -685,7 +693,7 @@ gem "loco_motion", github: "profoundry-us/loco_motion", branch: "main", require:
|
|
685
693
|
|
686
694
|
# or
|
687
695
|
|
688
|
-
gem "loco_motion-rails", "0.0.
|
696
|
+
gem "loco_motion-rails", "0.0.7", require: "loco_motion"
|
689
697
|
```
|
690
698
|
|
691
699
|
Next add the following lines to the `contents` section of your
|
@@ -707,8 +715,8 @@ Next add the following lines to the `contents` section of your
|
|
707
715
|
|
708
716
|
> [!WARNING]
|
709
717
|
> Note that this will not output anything if it fails to find the right
|
710
|
-
> directory, so your CSS may
|
711
|
-
>
|
718
|
+
> directory, so your CSS may not compile properly if this command fails or finds
|
719
|
+
> the wrong gem or an older gem.
|
712
720
|
|
713
721
|
Next, if you're using any of the components that require JavaScript (like the
|
714
722
|
Countdown component), you'll need to add the library as a dependency and include
|
@@ -762,57 +770,35 @@ the following code and refresh your page.
|
|
762
770
|
You should see a few buttons and the user info that we saved from OmniAuth
|
763
771
|
represented as a Ruby hash! Any other content you have will be rendered below.
|
764
772
|
|
765
|
-
### Setting a Base Component Class
|
766
|
-
|
767
|
-
Sometimes, you may want to override the way that LocoMotion handles things, or
|
768
|
-
provide some functionality yourself in a sub-class of our components. Since you
|
769
|
-
can't have a class inherit from two classes, we give you a way to override the
|
770
|
-
base class that all of our components inherit from.
|
771
|
-
|
772
|
-
This allows you to define a class that inherits from `LocoMotion::BaseComponent`
|
773
|
-
and then adds any special methods or overrides to our default components.
|
774
|
-
|
775
|
-
Create a file called `app/components/application_component.rb` with the following
|
776
|
-
contents:
|
777
|
-
|
778
|
-
```ruby
|
779
|
-
class ApplicationComponent < LocoMotion::BaseComponent
|
780
|
-
end
|
781
|
-
```
|
782
|
-
|
783
|
-
Then add the following to `config/initializers/loco_motion.rb`.
|
784
|
-
|
785
|
-
|
786
|
-
```ruby
|
787
|
-
LocoMotion.configure do |config|
|
788
|
-
|
789
|
-
# Override the base component class to inherit from our ApplicationComponent
|
790
|
-
# so that we can add our own overrides / methods.
|
791
|
-
Rails.application.config.after_initialize do
|
792
|
-
config.base_component_class = ApplicationComponent
|
793
|
-
end
|
794
|
-
|
795
|
-
end
|
796
|
-
```
|
797
|
-
|
798
|
-
> [!NOTE]
|
799
|
-
> It doesn't have to inherit from `ApplicationComponent`, you can use any class
|
800
|
-
> you want, so you could create a separate `CustomizedLocoMotionComponent` class
|
801
|
-
> so that you don't have any conflicts with your `ApplicationComponent`.
|
802
|
-
|
803
773
|
## Developing
|
804
774
|
|
805
775
|
To work on LocoMotion, first clone the repository and make sure you have Docker
|
806
776
|
installed and running on your machine.
|
807
777
|
|
778
|
+
Next, create a `.env.local` file with the following contents, making sure to
|
779
|
+
replace the Unsplash keys with real ones (you can create your own account or ask
|
780
|
+
Topher for his keys).
|
781
|
+
|
782
|
+
```.env
|
783
|
+
# .env.local
|
784
|
+
UNSPLASH_ACCESS_KEY="<< INSERT ACCESS KEY >>"
|
785
|
+
UNSPLASH_SECRET_KEY="<< INSERT SECRET KEY >>"
|
786
|
+
```
|
787
|
+
|
808
788
|
You should then be able to run `make rebuild` in the project directory and then
|
809
789
|
`make all-quick` to start the services.
|
810
790
|
|
811
791
|
> [!NOTE]
|
812
792
|
>
|
813
|
-
> We use `
|
814
|
-
>
|
815
|
-
>
|
793
|
+
> We use `yarn link` in the `docs/demo/bin/setup` script to enable quick editing
|
794
|
+
> of the Javascript files so you don't have to publish new packages during
|
795
|
+
> testing.
|
796
|
+
>
|
797
|
+
> For the Ruby gem, we point directly to it via the `:path` option in the
|
798
|
+
> `Gemfile`. This means that we have a custom Heroku buildpack when we publish
|
799
|
+
> the demo site to move the files into the appropriate places.
|
800
|
+
>
|
801
|
+
> See https://github.com/profoundry-us/loco_motion-buildpack for more info.
|
816
802
|
|
817
803
|
From here, you can access the demo site at http://localhost:3000 and the YARD
|
818
804
|
docs at http://localhost:8808/docs/yard
|
@@ -854,6 +840,37 @@ TailwindCSS Intellisense working properly.
|
|
854
840
|
],
|
855
841
|
```
|
856
842
|
|
843
|
+
And because whitespace is important when developing inline components, you
|
844
|
+
should also add the following which prevents VSCode from adding a newline to the
|
845
|
+
bottom of your HAML files. This helps ensure that inline components don't have
|
846
|
+
trailing whitespace when using something like the `succeed` helper.
|
847
|
+
|
848
|
+
```json
|
849
|
+
"[haml]": {
|
850
|
+
"editor.formatOnSave": false
|
851
|
+
}
|
852
|
+
```
|
853
|
+
|
854
|
+
Alternatively, if your component is simple enough, moving the template inside
|
855
|
+
the `_component.rb` file's `call` method can also alleviate this problem.
|
856
|
+
|
857
|
+
So instead of
|
858
|
+
|
859
|
+
```haml
|
860
|
+
- # This file has a newline at the bottom which can cause problems
|
861
|
+
= part(:component) do
|
862
|
+
= content
|
863
|
+
|
864
|
+
```
|
865
|
+
|
866
|
+
you could do something like this:
|
867
|
+
|
868
|
+
```ruby
|
869
|
+
def call
|
870
|
+
part(:component) { content }
|
871
|
+
end
|
872
|
+
```
|
873
|
+
|
857
874
|
## TODO / Next Steps
|
858
875
|
|
859
876
|
There is a LOT left to be done. We're not currently seeking assistance, but if
|
@@ -863,18 +880,29 @@ the GitHub Discussions feature and let us know!
|
|
863
880
|
- [x] Basic versions of DaisyUI Actions
|
864
881
|
- [x] Basic versions of DaisyUI Data Display
|
865
882
|
- [x] Basic versions of DaisyUI Navigation
|
866
|
-
- [
|
883
|
+
- [x] Basic versions of DaisyUI Feedback
|
867
884
|
- [ ] Basic versions of DaisyUI Data Input
|
868
885
|
- [ ] Basic versions of DaisyUI Layout
|
869
886
|
- [ ] Basic versions of DaisyUI Mockup
|
870
|
-
- [ ] Get YARD docs rendering with (better) Markdown
|
887
|
+
- [ ] ~~Get YARD docs rendering with (better) Markdown~~ _**Working for now**_
|
871
888
|
- [x] Extract relevant pieces into a yard-loco_motion plugin
|
872
|
-
- [
|
889
|
+
- [x] Publish Gem
|
873
890
|
- [x] Publish NPM package
|
874
|
-
- [
|
891
|
+
- [x] Update YARD plugin to add `@part`s
|
892
|
+
- [x] Update YARD plugin to add `@loco_example`s with language support
|
875
893
|
- [x] Extract doc callouts into a doc component (and / or the Daisy component)
|
876
|
-
- [ ] Choose
|
894
|
+
- [ ] Choose, recommend, and document a pagination gem
|
877
895
|
- [ ] Discuss caching techniques / setup
|
896
|
+
- [x] Create / publish a staging version of the demo site ([Demo Staging][2])
|
897
|
+
- [ ] Create / publish a staging version of the docs site
|
878
898
|
- [ ] Create / publish a production version of the demo site
|
879
899
|
- [ ] Create / publish a production version of the docs site
|
880
|
-
- [
|
900
|
+
- [x] Update demo site to allow for a different docs site using ENV var
|
901
|
+
- [x] Update README to suggest Playwright
|
902
|
+
- [ ] Build some have docs / guides / examples for using playwright-ruby-client
|
903
|
+
- [x] See if we can build a `Tippable` concern that relevant components can
|
904
|
+
include to automatically add the tooltip param and classes where possible
|
905
|
+
|
906
|
+
[1]: https://loco-motion.profoundry.us/
|
907
|
+
[2]: https://loco-motion-demo-staging.profoundry.us/
|
908
|
+
[3]: https://loco-motion-demo-staging.profoundry.us/api-docs
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# Here are the Button docs!
|
2
|
-
class Daisy::Actions::ButtonComponent < LocoMotion
|
2
|
+
class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
|
3
|
+
prepend LocoMotion::Concerns::TippableComponent
|
4
|
+
|
3
5
|
set_component_name :btn
|
4
6
|
|
5
7
|
def initialize(*args, **kws, &block)
|
@@ -20,7 +22,8 @@ class Daisy::Actions::ButtonComponent < LocoMotion.configuration.base_component_
|
|
20
22
|
@right_icon_css = config_option(:right_icon_css, @icon_css)
|
21
23
|
@right_icon_html = config_option(:right_icon_html, @icon_html)
|
22
24
|
|
23
|
-
|
25
|
+
default_title = @left_icon || @right_icon ? nil : "Submit"
|
26
|
+
@simple_title = config_option(:title, args[0] || default_title)
|
24
27
|
end
|
25
28
|
|
26
29
|
def before_render
|
@@ -1,12 +1,49 @@
|
|
1
|
-
#
|
2
|
-
#
|
3
|
-
|
1
|
+
#
|
2
|
+
# The Modal component renders a modal dialog that can be opened and closed. It
|
3
|
+
# includes a backdrop, a close icon, a title, and actions.
|
4
|
+
#
|
5
|
+
# @part dialog The main `<dialog>` container.
|
6
|
+
# @part box The container for the modal content.
|
7
|
+
# @part activator The container for the activator which opens the modal.
|
8
|
+
# @part close_icon_wrapper The container for the close icon.
|
9
|
+
# @part close_icon The default close icon.
|
10
|
+
# @part backdrop The backdrop that covers the rest of the screen.
|
11
|
+
# @part title Container for the default title for the modal.
|
12
|
+
# @part actions Container for all modal actions.
|
13
|
+
# @part start_actions Container for the left (start) aligned actions for the modal.
|
14
|
+
# @part end_actions The end actions for the modal.
|
15
|
+
#
|
16
|
+
# @slot activator The activator for the modal.
|
17
|
+
# @slot close_icon A custom close icon for the modal.
|
18
|
+
# @slot title A custom title for the modal.
|
19
|
+
# @slot start_actions Left (or start) aligned actions for the modal.
|
20
|
+
# @slot end_actions Right (or end) aligned actions for the modal.
|
21
|
+
#
|
22
|
+
# @loco_example Basic Usage
|
23
|
+
# = daisy_modal(title: "Simple Modal") do |modal|
|
24
|
+
# - modal.with_activator do
|
25
|
+
# - onclick = "document.getElementById('#{modal.dialog_id}').showModal()"
|
26
|
+
# = daisy_button(css: 'btn-primary', html: { onclick: onclick }) do
|
27
|
+
# Open Modal
|
28
|
+
#
|
29
|
+
# Here is some really long modal content that should go well past the
|
30
|
+
# spot where the close icon appears...
|
31
|
+
#
|
32
|
+
# - modal.with_end_actions(css: "flex flex-row items-center gap-2") do
|
33
|
+
# %form{ method: :dialog }
|
34
|
+
# = daisy_button do
|
35
|
+
# Cancel
|
36
|
+
# %form{ action: "", method: :get }
|
37
|
+
# %input{ type: "hidden", name: "submitted", value: "true" }
|
38
|
+
# = daisy_button(css: "btn-primary") do
|
39
|
+
# Submit
|
40
|
+
#
|
41
|
+
class Daisy::Actions::ModalComponent < LocoMotion::BaseComponent
|
4
42
|
set_component_name :modal
|
5
43
|
|
6
44
|
define_parts :dialog, :box, :actions,
|
7
45
|
:activator, :close_icon_wrapper, :close_icon,
|
8
|
-
:backdrop,
|
9
|
-
:title, :start_actions, :end_actions
|
46
|
+
:backdrop, :title, :start_actions, :end_actions
|
10
47
|
|
11
48
|
renders_one :activator
|
12
49
|
renders_one :close_icon
|
@@ -29,24 +66,29 @@ class Daisy::Actions::ModalComponent < LocoMotion.configuration.base_component_c
|
|
29
66
|
# Instantiate a new Modal component. All options are expected to be passed as
|
30
67
|
# keyword arguments.
|
31
68
|
#
|
32
|
-
# @
|
33
|
-
#
|
34
|
-
#
|
69
|
+
# @param args [Array] Currently unused and passed through to the
|
70
|
+
# BaseComponent.
|
71
|
+
# @param kws [Hash] The keyword arguments for the component.
|
35
72
|
#
|
36
|
-
#
|
37
|
-
#
|
38
|
-
#
|
39
|
-
#
|
40
|
-
#
|
73
|
+
# @option kws dialog_id [String] A specific ID you would like the dialog to
|
74
|
+
# use. Auto-generates a random ID using `SecureRandom.uuid` if not provided.
|
75
|
+
# @option kws closable [Boolean] Whether or not the modal should allow
|
76
|
+
# closing.
|
77
|
+
# @option kws title [String] A simple title that you would like the
|
78
|
+
# component to render above the main content of the modal (see
|
79
|
+
# {simple_title}).
|
41
80
|
#
|
42
81
|
def initialize(*args, **kws, &block)
|
43
82
|
super
|
44
83
|
|
45
|
-
@dialog_id
|
84
|
+
@dialog_id = config_option(:dialog_id, SecureRandom.uuid)
|
46
85
|
@closable = config_option(:closable, true)
|
47
86
|
@simple_title = config_option(:title)
|
48
87
|
end
|
49
88
|
|
89
|
+
#
|
90
|
+
# Sets up the component with various CSS classes and HTML attributes.
|
91
|
+
#
|
50
92
|
def before_render
|
51
93
|
setup_component
|
52
94
|
setup_backdrop
|
@@ -1,4 +1,6 @@
|
|
1
|
-
class Daisy::Actions::SwapComponent < LocoMotion
|
1
|
+
class Daisy::Actions::SwapComponent < LocoMotion::BaseComponent
|
2
|
+
prepend LocoMotion::Concerns::TippableComponent
|
3
|
+
|
2
4
|
class SwapOn < LocoMotion::BasicComponent
|
3
5
|
def before_render
|
4
6
|
add_css(:component, "swap-on")
|
@@ -1,5 +1,5 @@
|
|
1
1
|
# Renders a very basic radio-button theme controller.
|
2
|
-
class Daisy::Actions::ThemeControllerComponent < LocoMotion
|
2
|
+
class Daisy::Actions::ThemeControllerComponent < LocoMotion::BaseComponent
|
3
3
|
SOME_THEMES = ["light", "dark", "synthwave", "retro", "cyberpunk", "wireframe"].freeze
|
4
4
|
|
5
5
|
def before_render
|
@@ -1,5 +1,6 @@
|
|
1
1
|
# The Accordion component shows sections that can be expanded or collapsed.
|
2
|
-
class Daisy::DataDisplay::AccordionComponent < LocoMotion
|
2
|
+
class Daisy::DataDisplay::AccordionComponent < LocoMotion::BaseComponent
|
3
|
+
prepend LocoMotion::Concerns::TippableComponent
|
3
4
|
|
4
5
|
# Renders a single section of the accordion.
|
5
6
|
class AccordionSectionComponent < LocoMotion::BasicComponent
|
@@ -23,7 +23,9 @@
|
|
23
23
|
# = daisy_avatar icon: "user", icon_css: "text-yellow-400"
|
24
24
|
# ```
|
25
25
|
#
|
26
|
-
class Daisy::DataDisplay::AvatarComponent < LocoMotion
|
26
|
+
class Daisy::DataDisplay::AvatarComponent < LocoMotion::BaseComponent
|
27
|
+
prepend LocoMotion::Concerns::TippableComponent
|
28
|
+
|
27
29
|
set_component_name :avatar
|
28
30
|
|
29
31
|
define_parts :wrapper, :img, :icon, :placeholder
|
@@ -3,7 +3,9 @@
|
|
3
3
|
# background colors.
|
4
4
|
#
|
5
5
|
# @!parse class Daisy::DataDisplay::BadgeComponent < LocoMotion::BaseComponent; end
|
6
|
-
class Daisy::DataDisplay::BadgeComponent < LocoMotion
|
6
|
+
class Daisy::DataDisplay::BadgeComponent < LocoMotion::BaseComponent
|
7
|
+
prepend LocoMotion::Concerns::TippableComponent
|
8
|
+
|
7
9
|
set_component_name :badge
|
8
10
|
|
9
11
|
#
|
@@ -12,16 +14,28 @@ class Daisy::DataDisplay::BadgeComponent < LocoMotion.configuration.base_compone
|
|
12
14
|
def initialize(*args, **kws, &block)
|
13
15
|
super
|
14
16
|
|
15
|
-
|
17
|
+
@title = config_option(:title, args[0])
|
16
18
|
end
|
17
19
|
|
18
20
|
def before_render
|
19
21
|
setup_component
|
20
22
|
end
|
21
23
|
|
24
|
+
#
|
25
|
+
# Renders the badge component.
|
26
|
+
#
|
27
|
+
# Because this is an inline component which might be utlized alongside text,
|
28
|
+
# we utilize the `call` method instead of a template to ensure that no
|
29
|
+
# additional whitespace gets added to the output.
|
30
|
+
#
|
31
|
+
def call
|
32
|
+
part(:component) { @title || content }
|
33
|
+
end
|
34
|
+
|
22
35
|
private
|
23
36
|
|
24
37
|
def setup_component
|
38
|
+
set_tag_name(:component, :span)
|
25
39
|
add_css(:component, "badge")
|
26
40
|
end
|
27
41
|
end
|
@@ -1,4 +1,5 @@
|
|
1
|
-
class Daisy::DataDisplay::CardComponent < LocoMotion
|
1
|
+
class Daisy::DataDisplay::CardComponent < LocoMotion::BaseComponent
|
2
|
+
prepend LocoMotion::Concerns::TippableComponent
|
2
3
|
|
3
4
|
Figure = LocoMotion::BasicComponent.build do
|
4
5
|
define_part :image, tag_name: :img, css: "card-image"
|
@@ -1,4 +1,4 @@
|
|
1
|
-
class Daisy::DataDisplay::CarouselComponent < LocoMotion
|
1
|
+
class Daisy::DataDisplay::CarouselComponent < LocoMotion::BaseComponent
|
2
2
|
class ItemComponent < LocoMotion::BasicComponent
|
3
3
|
def before_render
|
4
4
|
add_css(:component, "carousel-item")
|
@@ -10,15 +10,12 @@
|
|
10
10
|
# @slot footer [LocoMotion::BasicComponent] Renders a single footer.
|
11
11
|
# @slot bubble [LocoMotion::BasicComponent] Renders one or more bubbles.
|
12
12
|
#
|
13
|
-
#
|
13
|
+
# @loco_example Basic Usage
|
14
|
+
# = daisy_chat(css: "border rounded-lg", html: { title: message.short_desc }) do |chat|
|
15
|
+
# - chat.with_bubble do
|
16
|
+
# I can't believe it's not the weekend yet!
|
14
17
|
#
|
15
|
-
|
16
|
-
# = daisy_chat(css: "border rounded-lg", html: { title: message.short_desc }) do |chat|
|
17
|
-
# - chat.with_bubble do
|
18
|
-
# I can't believe it's not the weekend yet!
|
19
|
-
# ```
|
20
|
-
#
|
21
|
-
class Daisy::DataDisplay::ChatComponent < LocoMotion.configuration.base_component_class
|
18
|
+
class Daisy::DataDisplay::ChatComponent < LocoMotion::BaseComponent
|
22
19
|
renders_one :avatar, Daisy::DataDisplay::AvatarComponent.build(css: "chat-image", icon_css: "size-6 text-base-100", wrapper_css: "w-10 rounded-full")
|
23
20
|
renders_one :header, LocoMotion::BasicComponent.build(css: "chat-header [:where(&)]:text-neutral-500")
|
24
21
|
renders_one :footer, LocoMotion::BasicComponent.build(css: "chat-footer [:where(&)]:text-neutral-500")
|
@@ -1,4 +1,6 @@
|
|
1
|
-
class Daisy::DataDisplay::CollapseComponent < LocoMotion
|
1
|
+
class Daisy::DataDisplay::CollapseComponent < LocoMotion::BaseComponent
|
2
|
+
prepend LocoMotion::Concerns::TippableComponent
|
3
|
+
|
2
4
|
define_parts :title, :wrapper
|
3
5
|
|
4
6
|
renders_one :title
|
@@ -1,4 +1,5 @@
|
|
1
|
-
class Daisy::DataDisplay::CountdownComponent < LocoMotion
|
1
|
+
class Daisy::DataDisplay::CountdownComponent < LocoMotion::BaseComponent
|
2
|
+
prepend LocoMotion::Concerns::TippableComponent
|
2
3
|
|
3
4
|
define_parts :days, :hours, :minutes, :seconds
|
4
5
|
define_modifiers :words, :letters
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# This is the Kbd (Keyboard) component.
|
2
|
-
class Daisy::DataDisplay::KbdComponent < LocoMotion
|
2
|
+
class Daisy::DataDisplay::KbdComponent < LocoMotion::BaseComponent
|
3
|
+
prepend LocoMotion::Concerns::TippableComponent
|
4
|
+
|
3
5
|
set_component_name :kbd
|
4
6
|
|
5
7
|
# Create a new kbd component.
|
@@ -13,6 +15,17 @@ class Daisy::DataDisplay::KbdComponent < LocoMotion.configuration.base_component
|
|
13
15
|
setup_component
|
14
16
|
end
|
15
17
|
|
18
|
+
#
|
19
|
+
# Renders the kbd (Keyboard) component.
|
20
|
+
#
|
21
|
+
# Because this is an inline component which might be utlized alongside text,
|
22
|
+
# we utilize the `call` method instead of a template to ensure that no
|
23
|
+
# additional whitespace gets added to the output.
|
24
|
+
#
|
25
|
+
def call
|
26
|
+
part(:component) { content }
|
27
|
+
end
|
28
|
+
|
16
29
|
private
|
17
30
|
|
18
31
|
def setup_component
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# This is the stats component.
|
2
|
-
class Daisy::DataDisplay::StatComponent < LocoMotion
|
2
|
+
class Daisy::DataDisplay::StatComponent < LocoMotion::BaseComponent
|
3
|
+
prepend LocoMotion::Concerns::TippableComponent
|
4
|
+
|
3
5
|
set_component_name :stat
|
4
6
|
|
5
7
|
define_parts :title, :value, :description, :figure
|
@@ -2,7 +2,7 @@
|
|
2
2
|
# The Table component is used to render HTML tables with rows, columns, and headers.
|
3
3
|
#
|
4
4
|
# @!parse class Daisy::DataDisplay::TableComponent < LocoMotion::BaseComponent; end
|
5
|
-
class Daisy::DataDisplay::TableComponent < LocoMotion
|
5
|
+
class Daisy::DataDisplay::TableComponent < LocoMotion::BaseComponent
|
6
6
|
|
7
7
|
class HeadColumnComponent < LocoMotion::BasicComponent
|
8
8
|
def before_render
|
@@ -1,4 +1,4 @@
|
|
1
|
-
class Daisy::DataDisplay::TimelineEventComponent < LocoMotion
|
1
|
+
class Daisy::DataDisplay::TimelineEventComponent < LocoMotion::BaseComponent
|
2
2
|
renders_one :start, LocoMotion::BasicComponent.build(css: "timeline-start")
|
3
3
|
renders_one :middle, LocoMotion::BasicComponent.build(css: "timeline-middle")
|
4
4
|
renders_one :end, LocoMotion::BasicComponent.build(css: "timeline-end")
|
@@ -1,7 +1,7 @@
|
|
1
1
|
#
|
2
2
|
# The AlertComponent displays an important message to users.
|
3
3
|
#
|
4
|
-
class Daisy::Feedback::AlertComponent < LocoMotion
|
4
|
+
class Daisy::Feedback::AlertComponent < LocoMotion::BaseComponent
|
5
5
|
define_parts :icon, :content_wrapper
|
6
6
|
|
7
7
|
def initialize(*args, **kws, &block)
|
@@ -0,0 +1,20 @@
|
|
1
|
+
class Daisy::Feedback::ProgressComponent < LocoMotion::BaseComponent
|
2
|
+
|
3
|
+
def initialize(*args, **kws, &block)
|
4
|
+
super
|
5
|
+
|
6
|
+
@value = config_option(:value, nil)
|
7
|
+
@max = config_option(:max, 100)
|
8
|
+
end
|
9
|
+
|
10
|
+
def before_render
|
11
|
+
set_tag_name(:component, :progress)
|
12
|
+
add_css(:component, "progress")
|
13
|
+
add_html(:component, { value: @value, max: @max }) if @value != nil
|
14
|
+
end
|
15
|
+
|
16
|
+
def call
|
17
|
+
part(:component)
|
18
|
+
end
|
19
|
+
|
20
|
+
end
|