diff --git a/.github/media/buttons.png b/.github/media/buttons.png index 71538ee..287b833 100644 Binary files a/.github/media/buttons.png and b/.github/media/buttons.png differ diff --git a/.github/media/screenshot.png b/.github/media/screenshot.png index 5eb62e6..d035b23 100644 Binary files a/.github/media/screenshot.png and b/.github/media/screenshot.png differ diff --git a/demo/components.html b/demo/components.html index 0eeda9d..61706bd 100644 --- a/demo/components.html +++ b/demo/components.html @@ -86,506 +86,481 @@ -
-

Rapidez Blade Components preview

+
+
+

Rapidez Blade Components preview

+
+
+
+

Button components

+
+
+

Primary & Secondary button

+
+ These buttons use theme colors; primary and secondary. + If you change the color in your project, the buttons will update as well. +
+
+
+ + +
+
+ + +
+
-

Input components

+
+
+

Default & Outline button

+
+ The default button is the default button. Nothing special, it is not recommended to use this button, + but if you would like to use the button, it is possible. The outline button doesn't have a background and only + contains a border. +
+
+
+ + +
+
+ + +
+
-
-

Base components

-

Components with a label

-

Components with a required label

+
+
+

Conversion & Rounded button

+
+ The conversion button is used for anything conversion related like adding to cart or inside a checkout. + The rounded button is a variant that you can use for slider navigation. +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
-
- Input +

Input components

+
+
+

Text Fields

+
+ Text fields can be used with or without label. + When you add a required attribute, the label will be marked with an asterisk. +
+
+
-
- -
- Input -
- -
- Input -
- -
- Checkbox - -
- -
- Checkbox - -
- -
- Checkbox - -
- -
- Radio - -
- -
- Radio - -
- -
- Radio - -
- -
- Select - -
- -
- Select -
- -
- Select +
+
+ - - -
- Textarea - -
- -
- Textarea -
- -
- Textarea -
+
-

Button components

-
-
- Slider: -
-
+
+
+

Selectors

+
+ These fields can be used with or without label. + When you add a required attribute, the label will be marked with an asterisk. +
+
+
+ + + + +
+
+
+ + + + +
+
+ + + + +
-

Prose component

-
-

Wayne Enterprises

-

Wayne Foundation

-

Bat Bunker

-

Batcave

-

- Wayne Enterprises, Inc., also known as WayneCorp and Wayne Industries, is a wealthy fictional company appearing in American comic books published by DC Comics, commonly in association with the superhero Batman. Wayne Enterprises is a large, growing multinational company. -

-
    -
  • Robert Pattinson
    • -
  • Ben Affleck
    • -
  • Christian Bale
    • -
-
    -
  1. Christian Bale
    2. -
  2. Ben Affleck
    3. -
  3. Robert Pattinson
    4. -
-
- I am vengeance, I am the night, I am Batman. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
MovieScoreYear
Batman Begins8.22005
The Dark Knight9.02008
The Dark Knight Rises8.42012
-
- -

Slideover Component

+

Slideover Component

Default

-
- - - -
-
-
-
- - Example Slideover - - -
-
-
-
-
-

This is an example of the slideover component.

-

You can put any content here!

+ +
+ + + +
+
+
+
+ + Example Slideover + + +
+
+
+
+
+

This is an example of the slideover component.

+

You can put any content here!

+
+
-
-
-
+
+

Right-positioned

-
- - - -
-
-
-
- - Right Slideover - - -
-
-
-
-
-

This slideover appears from the right side.

-

It demonstrates the position property.

+ +
+ + + +
+
+
+
+ + Right Slideover + + +
+
+
+
+
+

This slideover appears from the right side.

+

It demonstrates the position property.

+
+
-
-
-
+
+

Mobile only

-
- - - -
-
-
-
- - Mobile Slideover - - -
-
-
-
-
-

This is a mobile-specific slideover that transforms on desktop.

-

On mobile devices, it appears as a slideover.

-

On desktop screens (lg breakpoint and above), this content is directly embedded in the page instead of being in a slideover.

+ +
+ + + +
+
+
+
+ + Mobile Slideover + + +
+
+
+
+
+

This is a mobile-specific slideover that transforms on desktop. +

+

On mobile devices, it appears as a slideover.

+

On desktop screens (lg breakpoint and above), this content is + directly embedded in the page instead of being in a slideover.

+
+
-
-
-
+
+
-

Accordion component

- -
-
-

Default

-
- - -
-
- Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. -
-
-
-
- - -
-
- Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. -
-
-
+

Accordion component

+
+
+

Default & radio accordion

+
+ The default accordion uses a checkbox, so you can have multiple accordions open at the same time. + The radio variant makes use of a radio button, so you can open only one accordion at a time. +
-
-

Radio

- - -
-
- Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. -
-
-
+ + +
+
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti + dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, + quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
- - -
-
- Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. -
-
-
+ + +
+
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti + dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, + quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
-
-

Mobile only

- - -
-
- Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. -
-
-
+ + +
+
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti + dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, + quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
- - -
-
- Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. -
-
-
+ + +
+
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti + dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, + quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
- -
-

With rotating chevron

-
- - -
-
-
- This accordion demonstrates the rotating chevron using group-has-[:checked]:rotate-180 class. +
+
+
+

Accordion with rotating chevron & background

+
+ These accordions are more advanced. They contain an arrow that rotates when the accordion is open. + It is also possible to have an accordion with content inside that has a background colour. +
+
+
+ + +
+
+
+ This accordion demonstrates the rotating chevron using + group-has-[:checked]:rotate-180 class. When you click the header, the chevron will rotate 180 degrees.
-
-
-
+
+
-
-

Navigation example with background

-
- - -
-
-
+
+
+
+
+
+

Mobile only accordion

+
+ This is only an accordion on mobile devices. On desktop, it's always open. +
+
+
+ + +
+
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti + dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, + quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+
+ + +
+
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti + dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, + quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
-

Read more component

-

Resize the window to see button show and hide.

- -
+

Read more component

+
+
+

Read more / Read less

+
+ This component is useful for long texts. It will automatically add a button if the text is too long. + Resize the window to see button show and hide. +
+

Long text

-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. -
- -
- +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt + placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus + officiis labore facilis modi provident cupiditate? Voluptates. Lorem ipsum dolor sit amet + consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium + laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis + modi provident cupiditate? Voluptates. +
+ +
-

Short text

-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. -
- -
- +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt + placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus + officiis labore facilis modi provident cupiditate? Voluptates. +
+ +
+ +

Prose component

+
+

Wayne Enterprises

+

Wayne Foundation

+

Bat Bunker

+

Batcave

+

+ Wayne Enterprises, Inc., also known as WayneCorp and Wayne + Industries, is a wealthy fictional company appearing in American comic books published + by DC Comics, commonly in association with the superhero Batman. Wayne Enterprises is a large, growing + multinational company. +

+
    +
  • Robert Pattinson
    • +
  • Ben Affleck
    • +
  • Christian Bale
    • +
+
    +
  1. Christian Bale
    2. +
  2. Ben Affleck
    3. +
  3. Robert Pattinson
    4. +
+
+ I am vengeance, I am the night, I am Batman. +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
MovieScoreYear
Batman Begins8.22005
The Dark Knight9.02008
The Dark Knight Rises8.42012
+
+ // TODO: Maybe add some debouncing while resizing? + window.addEventListener('resize', checkReadMore) + window.addEventListener('load', checkReadMore) + document.addEventListener('turbo:load', checkReadMore) + diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php index 9228ee1..4b5000c 100644 --- a/resources/views/components-preview.blade.php +++ b/resources/views/components-preview.blade.php @@ -82,191 +82,174 @@ function color(variable, fallback) { -
-

Rapidez Blade Components preview

+
+
+

Rapidez Blade Components preview

+
+
+
+

Button components

+
+
+

Primary & Secondary button

+
+ These buttons use theme colors; primary and secondary. + If you change the color in your project, the buttons will update as well. +
+
+
+ Primary + Primary disabled +
+
+ Secondary + Secondary disabled +
+
-

Input components

+
+
+

Default & Outline button

+
+ The default button is the default button. Nothing special, it is not recommended to use this button, + but if you would like to use the button, it is possible. The outline button doesn't have a background and only + contains a border. +
+
+
+ Button + Button disabled +
+
+ Outline + Outline disabled +
+
-
-

Base components

-

Components with a label

-

Components with a required label

+
+
+

Conversion & Rounded button

+
+ The conversion button is used for anything conversion related, like adding to cart or inside a checkout. + The rounded button is a variant that you can use for slider navigation. +
+
+
+ Conversion + Conversion disabled +
+
+
+ < + > +
+
+ < + > +
+
+
-
- Input +

Input components

+
+
+

Text Fields

+
+ Text fields can be used with or without label. + When you add a required attribute, the label will be marked with an asterisk. +
+
+
-
- -
- Input -
- -
- Input -
- -
- Checkbox - -
- -
- Checkbox - - Something - -
- -
- Checkbox - - Something - -
- -
- Radio - -
- -
- Radio - - Something - -
- -
- Radio - - Something - -
- -
- Select + +
+
+ + + + +
+
+
+
+

Selectors

+
+ These fields can be used with or without label. + When you add a required attribute, the label will be marked with an asterisk. +
+
+
- - -
- Select -
- -
- Select -
- -
- Textarea - -
- -
- Textarea -
- -
- Textarea - -
-
- -

Button components

-
- Button - Primary - Secondary - Outline - Conversion -
- Slider: -
- < - > +
+
+
+ + + Checkbox + + + Checkbox + + + Checkbox + +
+
+ + + Radio + + + Radio + + + Radio +
-

Prose component

- -

Wayne Enterprises

-

Wayne Foundation

-

Bat Bunker

-

Batcave

-

- Wayne Enterprises, Inc., also known as WayneCorp and Wayne Industries, is a wealthy fictional company appearing in American comic books published by DC Comics, commonly in association with the superhero Batman. Wayne Enterprises is a large, growing multinational company. -

-
    -
  • Robert Pattinson
    • -
  • Ben Affleck
    • -
  • Christian Bale
    • -
-
    -
  1. Christian Bale
    2. -
  2. Ben Affleck
    3. -
  3. Robert Pattinson
    4. -
-
- I am vengeance, I am the night, I am Batman. -
- - - - - - - - - - - - - - - - - - - - - - - - - -
MovieScoreYear
Batman Begins8.22005
The Dark Knight9.02008
The Dark Knight Rises8.42012
- - -

Slideover Component

+

Slideover Component

Default

@@ -314,11 +297,16 @@ function color(variable, fallback) {
-

Accordion component

- -
+

Accordion component

+
+
+

Default & radio accordion

+
+ The default accordion uses a checkbox, so you can have multiple accordions open at the same time. + The radio variant makes use of a radio button, so you can open only one accordion at a time. +
+
-

Default

Question 1 @@ -336,9 +324,7 @@ function color(variable, fallback) {
-
-

Radio

Question 1 @@ -356,89 +342,147 @@ function color(variable, fallback) {
- -
-

Mobile only

- - - Question 1 - - - Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. - - - - - Question 2 - - - Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. - - +
+
+
+

Accordion with rotating chevron & background

+
+ These accordions are more advanced. They contain an arrow that rotates when the accordion is open. + It is also possible to have an accordion with content inside that has a background colour. +
- -
-

With rotating chevron

- - - Click me to toggle + + + Click me to toggle + + + + + +
+ This accordion demonstrates the rotating chevron using group-has-[:checked]:rotate-180 class. + When you click the header, the chevron will rotate 180 degrees. +
+ + + + +
+ Shop Categories - - -
- This accordion demonstrates the rotating chevron using group-has-[:checked]:rotate-180 class. - When you click the header, the chevron will rotate 180 degrees. -
- - -
-
-

Navigation example with background

- - -
- Shop Categories - - - -
- - - - - +
+ + + + + +
+
+
+

Mobile only accordion

+
+ This is only an accordion on mobile devices. On desktop, it's always open. +
+ + + Question 1 + + + Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. + + + + + Question 2 + + + Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. + +
-

Read more component

-

Resize the window to see button show and hide.

- -
+

Read more component

+
+
+

Read more / Read less

+
+ This component is useful for long texts. It will automatically add a button if the text is too long. + Resize the window to see button show and hide. +
+

Long text

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates.
-

Short text

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates.
+ +

Prose component

+ +

Wayne Enterprises

+

Wayne Foundation

+

Bat Bunker

+

Batcave

+

+ Wayne Enterprises, Inc., also known as WayneCorp and Wayne Industries, is a wealthy fictional company appearing in American comic books published by DC Comics, commonly in association with the superhero Batman. Wayne Enterprises is a large, growing multinational company. +

+
    +
  • Robert Pattinson
    • +
  • Ben Affleck
    • +
  • Christian Bale
    • +
+
    +
  1. Christian Bale
    2. +
  2. Ben Affleck
    3. +
  3. Robert Pattinson
    4. +
+
+ I am vengeance, I am the night, I am Batman. +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
MovieScoreYear
Batman Begins8.22005
The Dark Knight9.02008
The Dark Knight Rises8.42012
+
@stack('foot') diff --git a/resources/views/components/input/checkbox/base.blade.php b/resources/views/components/input/checkbox/base.blade.php index 4b0b861..9c97c56 100644 --- a/resources/views/components/input/checkbox/base.blade.php +++ b/resources/views/components/input/checkbox/base.blade.php @@ -6,4 +6,4 @@ ``` --}} -twMerge('cursor-pointer border border-default rounded-md size-5 text focus:outline-none focus:ring-0 focus:ring-offset-0') }} /> +twMerge('cursor-pointer border border-default rounded-md size-5 text focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted') }} /> diff --git a/resources/views/components/input/radio/base.blade.php b/resources/views/components/input/radio/base.blade.php index 4c5da89..4ebad9e 100644 --- a/resources/views/components/input/radio/base.blade.php +++ b/resources/views/components/input/radio/base.blade.php @@ -6,4 +6,4 @@ ``` --}} -twMerge('cursor-pointer border border-default size-5 text focus:outline-none focus:ring-0 focus:ring-offset-0') }} /> +twMerge('cursor-pointer border border-default size-5 text focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted') }} />