From 522bc5ebf4fe6d4ec4e9ac8236c63fe10e250d8f Mon Sep 17 00:00:00 2001 From: Pouya Saadeghi Date: Thu, 24 Nov 2022 01:54:12 +0300 Subject: [PATCH] feat: Add new component `chat` --- README.md | 2 +- src/components/styled/chat-bubble.css | 115 ------ src/components/styled/chat.css | 51 +++ src/components/unstyled/chat-bubble.css | 19 - src/components/unstyled/chat.css | 62 +++ src/docs/src/lib/data.js | 13 +- .../routes/components/chat-bubble.svelte.md | 270 ------------ src/docs/src/routes/components/chat.svelte.md | 389 ++++++++++++++++++ 8 files changed, 513 insertions(+), 408 deletions(-) delete mode 100644 src/components/styled/chat-bubble.css create mode 100644 src/components/styled/chat.css delete mode 100644 src/components/unstyled/chat-bubble.css create mode 100644 src/components/unstyled/chat.css delete mode 100644 src/docs/src/routes/components/chat-bubble.svelte.md create mode 100644 src/docs/src/routes/components/chat.svelte.md diff --git a/README.md b/README.md index f6ee1692fa..26c61a4179 100644 --- a/README.md +++ b/README.md @@ -242,7 +242,7 @@ Tweet about daisyUI: [![][tweet]][tweet-url] [jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui [build-url]: https://github.com/saadeghi/daisyui/actions [tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui -[number-of-components]: https://badgen.net/badge/total%20components/47/green +[number-of-components]: https://badgen.net/badge/total%20components/49/green [docs-url-install]: https://daisyui.com/docs/install [docs-url]: https://daisyui.com/ [logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg diff --git a/src/components/styled/chat-bubble.css b/src/components/styled/chat-bubble.css deleted file mode 100644 index b77dbd63d2..0000000000 --- a/src/components/styled/chat-bubble.css +++ /dev/null @@ -1,115 +0,0 @@ -.bubble { - /* default */ - & { - --bubble-bg: hsl(var(--n)); - @apply text-neutral-content; - } - - /* brand colors */ - &-primary { - --bubble-bg: hsl(var(--p)); - @apply text-primary-content; - } - &-secondary { - --bubble-bg: hsl(var(--s)); - @apply text-secondary-content; - } - &-accent { - --bubble-bg: hsl(var(--a)); - @apply text-accent-content; - } - - /* state colors */ - &-info { - --bubble-bg: hsl(var(--in)); - @apply text-info-content; - } - &-success { - --bubble-bg: hsl(var(--su)); - @apply text-success-content; - } - &-warning { - --bubble-bg: hsl(var(--wa)); - @apply text-warning-content; - } - &-error { - --bubble-bg: hsl(var(--er)); - @apply text-error-content; - } - - &-left { - [dir="ltr"] & { - @apply mr-auto rounded-r-xl; - margin-left: var(--bubble-radius, 0.75rem); - - &:before { - --circle-pos: top left; - left: calc(var(--bubble-radius, 0.75rem) * -1); - background-image: var(--tab-corner-bg); - } - } - [dir="rtl"] & { - @apply ml-auto rounded-l-xl; - margin-right: var(--bubble-radius, 0.75rem); - - &:after { - --circle-pos: top right; - right: calc(var(--bubble-radius, 0.75rem) * -1); - background-image: var(--tab-corner-bg); - } - } - } - - &-right { - [dir="ltr"] & { - @apply ml-auto rounded-l-xl; - margin-right: var(--bubble-radius, 0.75rem); - - &:after { - right: calc(var(--bubble-radius, 0.75rem) * -1); - --circle-pos: top right; - background-image: var(--tab-corner-bg); - } - } - [dir="rtl"] & { - @apply mr-auto rounded-r-xl; - margin-left: var(--bubble-radius, 0.75rem); - - &:before { - left: calc(var(--bubble-radius, 0.75rem) * -1); - --circle-pos: top left; - background-image: var(--tab-corner-bg); - } - } - } - - &-topbar { - @apply flex items-center; - @apply mb-1; - - &-author { - @apply font-medium; - } - &-time { - @apply text-xs italic; - @apply mx-2; - } - &-action { - [dir="ltr"] & { - @apply ml-auto; - } - [dir="rtl"] & { - @apply mr-auto; - } - } - } - - &-action { - [dir="ltr"] & { - @apply ml-auto; - } - [dir="rtl"] & { - @apply mr-auto; - } - } -} diff --git a/src/components/styled/chat.css b/src/components/styled/chat.css new file mode 100644 index 0000000000..4e7ef7a2ed --- /dev/null +++ b/src/components/styled/chat.css @@ -0,0 +1,51 @@ +.chat { + &-bubble { + @apply rounded-box; + min-height: 2.75rem; + min-width: 2.75rem; + + /* default */ + & { + @apply bg-neutral text-neutral-content; + } + + /* brand colors */ + &-primary { + @apply bg-primary text-primary-content; + } + &-secondary { + @apply bg-secondary text-secondary-content; + } + &-accent { + @apply bg-accent text-accent-content; + } + + /* state colors */ + &-info { + @apply bg-info text-info-content; + } + &-success { + @apply bg-success text-success-content; + } + &-warning { + @apply bg-warning text-warning-content; + } + &-error { + @apply bg-error text-error-content; + } + } + + &-start .chat-bubble { + @apply rounded-bl-none; + &:before { + left: -0.75rem; + } + } + + &-end .chat-bubble { + @apply rounded-br-none; + &:before { + left: 100%; + } + } +} diff --git a/src/components/unstyled/chat-bubble.css b/src/components/unstyled/chat-bubble.css deleted file mode 100644 index f65f794a11..0000000000 --- a/src/components/unstyled/chat-bubble.css +++ /dev/null @@ -1,19 +0,0 @@ -.bubble { - --bubble-radius: 0.75rem; - - @apply inline-block; - @apply px-4 py-2 my-2 rounded-t-xl relative; - @apply font-light; - background-color: var(--bubble-bg); - max-width: 60%; - - &:before, - &:after { - content: ""; - position: absolute; - width: var(--bubble-radius, 0.75rem); - height: var(--bubble-radius, 0.75rem); - bottom: 0; - --tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent 68%, transparent 68%, transparent calc(68% + 1px), var(--bubble-bg) 68%); - } -} diff --git a/src/components/unstyled/chat.css b/src/components/unstyled/chat.css new file mode 100644 index 0000000000..856128a5bb --- /dev/null +++ b/src/components/unstyled/chat.css @@ -0,0 +1,62 @@ +.chat { + @apply grid grid-cols-2 gap-x-3 py-1; + &-image { + @apply self-end row-span-2; + } + &-header { + @apply text-sm row-start-1; + } + &-footer { + @apply text-sm row-start-3; + } + &-bubble { + @apply block w-fit px-4 py-2 relative; + max-width: 90%; + &:before { + @apply w-3 h-3 absolute bottom-0; + background-color: inherit; + content: ""; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + } + } + &-start { + @apply place-items-start; + grid-template-columns: auto 1fr; + .chat-header { + @apply col-start-2; + } + .chat-footer { + @apply col-start-2; + } + .chat-image { + @apply col-start-1; + } + .chat-bubble { + @apply col-start-2; + &:before { + mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e"); + } + } + } + &-end { + @apply place-items-end; + grid-template-columns: 1fr auto; + .chat-header { + @apply col-start-1; + } + .chat-footer { + @apply col-start-1; + } + .chat-image { + @apply col-start-2; + } + .chat-bubble { + @apply col-start-1; + &:before { + mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e"); + } + } + } +} diff --git a/src/docs/src/lib/data.js b/src/docs/src/lib/data.js index e08a522e41..80270beeea 100644 --- a/src/docs/src/lib/data.js +++ b/src/docs/src/lib/data.js @@ -1,8 +1,8 @@ export let siteStats = { - components: "48", + components: "49", themes: "29", - githubStars: "+12,000", - npmInstalls: "+1,000,000", + githubStars: "+15,000", + npmInstalls: "+2,000,000", } export let siteData = { @@ -391,6 +391,13 @@ export let pages = [ icon: "", badge: "", }, + { + name: "Chat bubble", + tags: "chat bubble dialog message messenger", + href: "/components/chat", + icon: "", + badge: "New", + }, { name: "Collapse", tags: "collapse accordion", diff --git a/src/docs/src/routes/components/chat-bubble.svelte.md b/src/docs/src/routes/components/chat-bubble.svelte.md deleted file mode 100644 index 0adefef7cc..0000000000 --- a/src/docs/src/routes/components/chat-bubble.svelte.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Chat bubble -desc: It's a awesome chat bubble! -published: true ---- - - - - - -
-
- - Using dir="ltr" or dir="rtl" is required. -
-
- - -
-
Thank you 😊
See you soon 👋
-
Thank you 😊
See you soon 👋
-
-
{
-`

-  
Thank you 😊
 See you soon 👋

-  
Thank you 😊
 See you soon 👋

-
`
-}
- - - -
-
Thank you 😊
See you soon 👋
-
Thank you 😊
see you soon 👋
-
Thank you 😊
See you soon 👋
-
-
{
-`

-  
Thank you 😊
 See you soon 👋

-  
Thank you 😊
 See you soon 👋

-  
Thank you 😊
 See you soon 👋

-
`
-}
- - - -
-
Thank you 😊
See you soon 👋
-
Thank you 😊
See you soon 👋
-
Thank you 😊
See you soon 👋
-
Thank you 😊
See you soon 👋
-
-
{
-`

-  
Thank you 😊
 See you soon 👋

-  
Thank you 😊
 See you soon 👋

-  
Thank you 😊
 See you soon 👋

-  
Thank you 😊
 See you soon 👋

-
`
-}
- - - -
-
-
-
Iman
-
- Thank you 😊
See you soon 👋 -
-
-
-
Amin
-
- Thank you 😊
See you soon 👋 -
-
-
{
-`

-  

-    

-      
Iman

-    

-    Thank you 😊
 See you soon 👋
-  

-  

-    

-      
Amin

-    

-    Thank you 😊
 See you soon 👋
-  

-
`
-}
- - - -
-
-
-
Iman
-
1 min
-
- Thank you 😊
See you soon 👋 -
-
-
-
Amin
-
30 sec
-
- Thank you 😊
See you soon 👋 -
-
-
{
-`

-  

-    

-      
Iman

-      
1 min

-    

-    Thank you 😊
 See you soon 👋
-  

-  

-    

-      
Amin

-      
30 sec

-    

-    Thank you 😊
 See you soon 👋
-  

-
`
-}
- - - -
-
-
-
Iman
-
1 min
-
-
- - -
-
-
- Thank you 😊
See you soon 👋 -
-
-
-
Amin
-
30 sec
-
-
- - -
-
-
- Thank you 😊
See you soon 👋 -
-
-
{
-`

-  

-    

-      
Iman

-      
1 min

-      

-        

-          
-          
-        

-      

-    

-    Thank you 😊
 See you soon 👋
-  

-  

-    

-      
Amin

-      
30 sec

-      

-        

-          
-          
-        

-      

-    

-    Thank you 😊
 See you soon 👋
-  

-
`
-}
- - - -
-
Thank you 😊
See you soon 👋
-
Thank you 😊
See you soon 👋
-
-
{
-`

-  
Thank you 😊
 See you soon 👋

-  
Thank you 😊
 See you soon 👋

-
`
-}
- diff --git a/src/docs/src/routes/components/chat.svelte.md b/src/docs/src/routes/components/chat.svelte.md new file mode 100644 index 0000000000..fe258ff8a2 --- /dev/null +++ b/src/docs/src/routes/components/chat.svelte.md @@ -0,0 +1,389 @@ +--- +title: Chat bubble +desc: Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc. +published: true +--- + + + + + + +
+
+
It's over Anakin,
I have the high ground.
+
+
+
You underestimate my power!
+
+
+
{
+`

+  
It's over Anakin, 
I have the high ground.

+

+

+  
You underestimate my power!

+
`
+}
+
{
+`

+  
It's over Anakin, 
I have the high ground.

+

+

+  
You underestimate my power!

+
`
+}
+ + + +
+
+
+
+ +
+
+
It was said that you would, destroy the Sith, not join them.
+
+
+
+
+ +
+
+
It was you who would bring balance to the Force
+
+
+
+
+ +
+
+
Not leave it in Darkness
+
+
+
{
+`

+  

+    

+      
+    

+  

+  
It was said that you would, destroy the Sith, not join them.

+

+

+  

+    

+      
+    

+  

+  
It was you who would bring balance to the Force

+

+

+  

+    

+      
+    

+  

+  
Not leave it in Darkness

+
`
+}
+
{
+`

+  

+    

+      
+    

+  

+  
It was said that you would, destroy the Sith, not join them.

+

+

+  

+    

+      
+    

+  

+  
It was you who would bring balance to the Force

+

+

+  

+    

+      
+    

+  

+  
Not leave it in Darkness

+
`
+}
+ + + +
+
+
+
+ +
+
+
+ Obi-Wan Kenobi + +
+
You were the Chosen One!
+
+ Delivered +
+
+
+
+
+ +
+
+
+ Anakin + +
+
I hate you!
+
+ Seen at 12:46 +
+
+
+
{
+`

+  

+    

+      
+    

+  

+  

+    Obi-Wan Kenobi
+    
+  

+  
You were the Chosen One!

+  

+    Delivered
+  

+

+

+  

+    

+      
+    

+  

+  

+    Anakin
+    
+  

+  
I hate you!

+  

+    Seen at 12:46
+  

+
`
+}
+
{
+`

+  

+    

+      
+    

+  

+  

+    Obi-Wan Kenobi
+    
+  

+  
You were the Chosen One!

+  

+    Delivered
+  

+

+

+  

+    

+      
+    

+  

+  

+    Anakin
+    
+  

+  
I hate you!

+  

+    Seen at 12:46
+  

+
`
+}
+ + + +
+
+
+ Obi-Wan Kenobi + +
+
You were my brother, Anakin.
+
+ Seen +
+
+
+
+ Obi-Wan Kenobi + +
+
I loved you.
+
+ Delivered +
+
+
+
{
+`

+  

+    Obi-Wan Kenobi
+    
+  

+  
You were the Chosen One!

+  

+    Seen
+  

+

+

+  

+    Obi-Wan Kenobi
+    
+  

+  
I loved you.

+  

+    Delivered
+  

+
`
+}
+
{
+`

+  

+    

+      
+    

+  

+  

+    Obi-Wan Kenobi
+    
+  

+  
You were the Chosen One!

+  

+    Seen
+  

+

+

+  

+    

+      
+    

+  

+  

+    Obi-Wan Kenobi
+    
+  

+  
I loved you.

+  

+    Delivered
+  

+
`
+}
+ + + +
+
+
What kind of nonsense is this
+
+
+
Put me on the Council and not make me a Master!??
+
+
+
That's never been done in the history of the Jedi. It's insulting!
+
+
+
Calm down, Anakin.
+
+
+
You have been given a great honor.
+
+
+
To be on the Council at your age.
+
+
+
It's never happened before.
+
+
+
{
+`

+  
What kind of nonsense is this

+

+

+  
Put me on the Council and not make me a Master!??

+

+

+  
That's never been done in the history of the Jedi. It's insulting!

+

+

+  
Calm down, Anakin.

+

+

+  
You have been given a great honor.

+

+

+  
To be on the Council at your age.

+

+

+  
It's never happened before.

+
`
+}
+
{
+`

+  
What kind of nonsense is this

+

+

+  
Put me on the Council and not make me a Master!??

+

+

+  
That's never been done in the history of the Jedi. It's insulting!

+

+

+  
Calm down, Anakin.

+

+

+  
You have been given a great honor.

+

+

+  
To be on the Council at your age.

+

+

+  
It's never happened before.

+
`
+}
+