From dbe35e8cc29857386e0fbd2c88c6114c529779a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 11 Oct 2021 12:54:18 +0200 Subject: [PATCH] refactor: update example views --- src/assets/icons/index.js | 2 + src/views/Dashboard.vue | 184 +++++------------- src/views/base/Accordion.vue | 291 +++++++++++++---------------- src/views/notifications/Modals.vue | 64 +++---- src/views/widgets/Widgets.vue | 8 +- 5 files changed, 218 insertions(+), 331 deletions(-) diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js index edbda0e3..14333ec3 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -6,6 +6,7 @@ import { cibTumblr, cibXing, cibGithub, + cibGoogle, cibStackoverflow, cibYoutube, cibDribbble, @@ -147,6 +148,7 @@ export const iconsSet = Object.assign( cibTumblr, cibXing, cibGithub, + cibGoogle, cibStackoverflow, cibYoutube, cibDribbble, diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue index 35b20f54..a798e2fd 100644 --- a/src/views/Dashboard.vue +++ b/src/views/Dashboard.vue @@ -128,67 +128,13 @@
-
+
- Monday + {{item.title}}
- - -
-
-
-
- Tuesday -
-
- - -
-
-
-
- Wednesday -
-
- - -
-
-
-
- Thursday -
-
- - -
-
-
-
- Friday -
-
- - -
-
-
-
- Saturday -
-
- - -
-
-
-
- Sunday -
-
- - + +
@@ -222,91 +168,30 @@
-
+
- - Male - 43% + + {{item.title}} + {{item.value}}%
- +
-
+ +
+ +
- - Female - 37% -
-
- -
-
-
-
- + Organic Search - - 191,235 - (56%) + + {{item.value}} + ({{item.percent}}%)
- -
-
-
-
- - Facebook - - 51,223 - (15%) - -
-
- -
-
-
-
- - Twitter - - 37,564 - (11%) - -
-
- -
-
-
-
- - LinkedIn - - 27,319 -  (8%) - -
-
- +
@@ -330,7 +215,7 @@ - + - - - - Accordion Item #1 - - - - - This is the first item's accordion body. It - is hidden by default, until the collapse plugin adds the - appropriate classes that we use to style each element. These - classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any - of this with custom CSS or overriding our default variables. - It's also worth noting that just about any HTML can go - within the .accordion-body, though the - transition does limit overflow. - - + + Accordion Item #1 + + This is the first item's accordion body. It + is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These + classes control the overall appearance, as well as the showing + and hiding via CSS transitions. You can modify any of this + with custom CSS or overriding our default variables. It's also + worth noting that just about any HTML can go within the + .accordion-body, though the transition does limit + overflow. + - - - - Accordion Item #2 - - - - - This is the second item's accordion body. - It is hidden by default, until the collapse plugin adds the - appropriate classes that we use to style each element. These - classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any - of this with custom CSS or overriding our default variables. - It's also worth noting that just about any HTML can go - within the .accordion-body, though the - transition does limit overflow. - - + + Accordion Item #2 + + This is the second item's accordion body. It + is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These + classes control the overall appearance, as well as the showing + and hiding via CSS transitions. You can modify any of this + with custom CSS or overriding our default variables. It's also + worth noting that just about any HTML can go within the + .accordion-body, though the transition does limit + overflow. + - - - - Accordion Item #3 - - - - - This is the third item's accordion body. It - is hidden by default, until the collapse plugin adds the - appropriate classes that we use to style each element. These - classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any - of this with custom CSS or overriding our default variables. - It's also worth noting that just about any HTML can go - within the .accordion-body, though the - transition does limit overflow. - - + + Accordion Item #3 + + This is the third item's accordion body. It + is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These + classes control the overall appearance, as well as the showing + and hiding via CSS transitions. You can modify any of this + with custom CSS or overriding our default variables. It's also + worth noting that just about any HTML can go within the + .accordion-body, though the transition does limit + overflow. + @@ -113,91 +74,103 @@ - - - Accordion Item #1 - - - - - This is the first item's accordion body. It - is hidden by default, until the collapse plugin adds the - appropriate classes that we use to style each element. These - classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any - of this with custom CSS or overriding our default variables. - It's also worth noting that just about any HTML can go - within the .accordion-body, though the - transition does limit overflow. - - + Accordion Item #1 + + This is the first item's accordion body. It + is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These + classes control the overall appearance, as well as the showing + and hiding via CSS transitions. You can modify any of this + with custom CSS or overriding our default variables. It's also + worth noting that just about any HTML can go within the + .accordion-body, though the transition does limit + overflow. + - - - Accordion Item #2 - - - - - This is the second item's accordion body. - It is hidden by default, until the collapse plugin adds the - appropriate classes that we use to style each element. These - classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any - of this with custom CSS or overriding our default variables. - It's also worth noting that just about any HTML can go - within the .accordion-body, though the - transition does limit overflow. - - + Accordion Item #2 + + This is the second item's accordion body. It + is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These + classes control the overall appearance, as well as the showing + and hiding via CSS transitions. You can modify any of this + with custom CSS or overriding our default variables. It's also + worth noting that just about any HTML can go within the + .accordion-body, though the transition does limit + overflow. + - - - Accordion Item #3 - - - - - This is the third item's accordion body. It - is hidden by default, until the collapse plugin adds the - appropriate classes that we use to style each element. These - classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any - of this with custom CSS or overriding our default variables. - It's also worth noting that just about any HTML can go - within the .accordion-body, though the - transition does limit overflow. - - + Accordion Item #3 + + This is the third item's accordion body. It + is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These + classes control the overall appearance, as well as the showing + and hiding via CSS transitions. You can modify any of this + with custom CSS or overriding our default variables. It's also + worth noting that just about any HTML can go within the + .accordion-body, though the transition does limit + overflow. + + + + + + + + + Vue Accordion Always open + + +

+ Add alwaysOpen property to make accordion items stay + open when another item is opened. +

+ + + + Accordion Item #1 + + This is the first item's accordion body. It + is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These + classes control the overall appearance, as well as the showing + and hiding via CSS transitions. You can modify any of this + with custom CSS or overriding our default variables. It's also + worth noting that just about any HTML can go within the + .accordion-body, though the transition does limit + overflow. + + + + Accordion Item #2 + + This is the second item's accordion body. It + is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These + classes control the overall appearance, as well as the showing + and hiding via CSS transitions. You can modify any of this + with custom CSS or overriding our default variables. It's also + worth noting that just about any HTML can go within the + .accordion-body, though the transition does limit + overflow. + + + + Accordion Item #3 + + This is the third item's accordion body. It + is hidden by default, until the collapse plugin adds the + appropriate classes that we use to style each element. These + classes control the overall appearance, as well as the showing + and hiding via CSS transitions. You can modify any of this + with custom CSS or overriding our default variables. It's also + worth noting that just about any HTML can go within the + .accordion-body, though the transition does limit + overflow. + diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue index 589159be..881e6c7b 100644 --- a/src/views/notifications/Modals.vue +++ b/src/views/notifications/Modals.vue @@ -59,7 +59,7 @@ > { visibleLiveDemo = false } @@ -67,7 +67,7 @@ > { visibleLiveDemo = false } @@ -121,7 +121,7 @@ { visibleStaticBackdropDemo = false } @@ -129,7 +129,7 @@ > { visibleStaticBackdropDemo = false } @@ -182,7 +182,7 @@ > { visibleScrollingLongContentDemo = false } @@ -190,7 +190,7 @@ > { visibleScrollingLongContentDemo = false } @@ -316,7 +316,7 @@ { visibleScrollableDemo = false } @@ -324,7 +324,7 @@ > { visibleScrollableDemo = false } @@ -458,7 +458,7 @@ { visibleVerticallyCenteredDemo = false } @@ -466,7 +466,7 @@ > { visibleVerticallyCenteredDemo = false } @@ -509,7 +509,7 @@ alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" - @dismiss=" + @close=" () => { visibleVerticallyCenteredScrollableDemo = false } @@ -517,7 +517,7 @@ > { visibleVerticallyCenteredScrollableDemo = false } @@ -572,7 +572,7 @@ > { tooltipsAndPopoversDemo = false } @@ -580,7 +580,7 @@ > { tooltipsAndPopoversDemo = false } @@ -715,7 +715,7 @@ { xlDemo = false } @@ -723,7 +723,7 @@ > { xlDemo = false } @@ -736,7 +736,7 @@ { lgDemo = false } @@ -744,7 +744,7 @@ > { lgDemo = false } @@ -757,7 +757,7 @@ { smDemo = false } @@ -765,7 +765,7 @@ > { smDemo = false } @@ -893,7 +893,7 @@ { fullscreenDemo = false } @@ -901,7 +901,7 @@ > { xlDemo = false } @@ -914,7 +914,7 @@ { fullscreenSmDemo = false } @@ -922,7 +922,7 @@ > { fullscreenSmDemo = false } @@ -935,7 +935,7 @@ { fullscreenMdDemo = false } @@ -943,7 +943,7 @@ > { fullscreenMdDemo = false } @@ -956,7 +956,7 @@ { fullscreenLgDemo = false } @@ -964,7 +964,7 @@ > { fullscreenLgDemo = false } @@ -977,7 +977,7 @@ { fullscreenXlDemo = false } @@ -985,7 +985,7 @@ > { fullscreenXlDemo = false } @@ -998,7 +998,7 @@ { fullscreenXxlDemo = false } @@ -1006,7 +1006,7 @@ > { fullscreenXxlDemo = false } diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue index 78475579..6bcf26f5 100644 --- a/src/views/widgets/Widgets.vue +++ b/src/views/widgets/Widgets.vue @@ -289,7 +289,7 @@