From aa0b1cb59cb6ce48c6d1cbc6b965fff813981116 Mon Sep 17 00:00:00 2001 From: Vadim Date: Sat, 14 Aug 2021 00:35:06 +0300 Subject: [PATCH 01/10] #48 : Add customized h1, h2 --- src/docs/Layouts/Main.svelte | 6 +++- src/docs/Layouts/custom/H.svelte | 43 +++++++++++++++++++++++++++ src/docs/Layouts/custom/H1.svelte | 8 +++++ src/docs/Layouts/custom/H2.svelte | 8 +++++ src/docs/Layouts/custom/dom/H1.svelte | 9 ++++++ src/docs/Layouts/custom/dom/H2.svelte | 9 ++++++ src/docs/utils/string.js | 19 ++++++++++++ 7 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 src/docs/Layouts/custom/H.svelte create mode 100644 src/docs/Layouts/custom/H1.svelte create mode 100644 src/docs/Layouts/custom/H2.svelte create mode 100644 src/docs/Layouts/custom/dom/H1.svelte create mode 100644 src/docs/Layouts/custom/dom/H2.svelte create mode 100644 src/docs/utils/string.js diff --git a/src/docs/Layouts/Main.svelte b/src/docs/Layouts/Main.svelte index 555f3d4..926628e 100644 --- a/src/docs/Layouts/Main.svelte +++ b/src/docs/Layouts/Main.svelte @@ -3,11 +3,15 @@ import Th from './custom/Th.svelte'; import Tr from './custom/Tr.svelte'; import Td from './custom/Td.svelte'; + import H1 from './custom/H1.svelte'; + import H2 from './custom/H2.svelte'; export { Table as table, Th as th, Tr as tr, - Td as td + Td as td, + H1 as h1, + H2 as h2, }; diff --git a/src/docs/Layouts/custom/H.svelte b/src/docs/Layouts/custom/H.svelte new file mode 100644 index 0000000..46d6274 --- /dev/null +++ b/src/docs/Layouts/custom/H.svelte @@ -0,0 +1,43 @@ + + + + + {title} + {#if !title} + + {/if} + + + + diff --git a/src/docs/Layouts/custom/H1.svelte b/src/docs/Layouts/custom/H1.svelte new file mode 100644 index 0000000..329c9fb --- /dev/null +++ b/src/docs/Layouts/custom/H1.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/src/docs/Layouts/custom/H2.svelte b/src/docs/Layouts/custom/H2.svelte new file mode 100644 index 0000000..ee3940e --- /dev/null +++ b/src/docs/Layouts/custom/H2.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/src/docs/Layouts/custom/dom/H1.svelte b/src/docs/Layouts/custom/dom/H1.svelte new file mode 100644 index 0000000..b444148 --- /dev/null +++ b/src/docs/Layouts/custom/dom/H1.svelte @@ -0,0 +1,9 @@ +

+ +

+ + diff --git a/src/docs/Layouts/custom/dom/H2.svelte b/src/docs/Layouts/custom/dom/H2.svelte new file mode 100644 index 0000000..6b10d49 --- /dev/null +++ b/src/docs/Layouts/custom/dom/H2.svelte @@ -0,0 +1,9 @@ +

+ +

+ + diff --git a/src/docs/utils/string.js b/src/docs/utils/string.js new file mode 100644 index 0000000..17aab07 --- /dev/null +++ b/src/docs/utils/string.js @@ -0,0 +1,19 @@ +export const parseProps = (propsStr) => { + const props = propsStr?.split(';').filter(Boolean) || [] + return props.reduce((acc, cur) => { + const prop = cur.split(':') + return { + ...acc, + [prop[0]]: prop[1] + } + }, {}) +} + +export const parseTitleStr = (titleStr) => { + const parts = titleStr.split('!') + + return { + title: parts[0], + props: parseProps(parts[1]) + } +} From f76fe0b5c61695d12a6289176de83af3fd77866d Mon Sep 17 00:00:00 2001 From: Vadim Date: Sat, 14 Aug 2021 00:42:17 +0300 Subject: [PATCH 02/10] #48 : Apply anchor settings --- src/docs/Carousel.svx | 47 ++++++++++++++++++++++--------------------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx index de863c8..1de47f5 100644 --- a/src/docs/Carousel.svx +++ b/src/docs/Carousel.svx @@ -9,9 +9,9 @@ import colors from './data/colors.json' -# Features +# Features!anchorId:features; -## Single item +## Single item!anchorId:features-single-item; {#each colors as { color, text } (color)} @@ -28,7 +28,7 @@ -## Multiple items +## Multiple items!anchorId:features-multiple-items; {#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
@@ -53,7 +53,7 @@ -## Autoplay +## Autoplay!anchorId:features-autoplay; -## Autoplay with duration progress +## Autoplay with duration progress!anchorId:features-autoplay-duration-progress; -## Autoplay with pause on focus +## Autoplay with pause on focus!anchorId:features-autoplay-pause-on-focus; **For desktop** - hover over the carousel to toggle the autoplay. **For touchable devices** - tap the carousel to toggle the autoplay. @@ -132,7 +132,7 @@ -## Lazy loading of images +## Lazy loading of images!anchorId:features-lazy-loading; @@ -161,7 +161,7 @@ -## Arrows customization +## Arrows customization!anchorId:features-arrows-customization; -## Dots customization +## Dots customization!anchorId:features-dots-customization; -## Use case +## Use case!anchorId:features-use-cases; -# Installation +# Installation!anchorId:installation; + ```bash yarn add svelte-carousel ``` @@ -262,7 +263,7 @@ Import component -# Props +# Props!anchorId:props; | Prop | Type | Default | Description | |---------------------------|------------|-----------------|-----------------------------------------------| @@ -281,9 +282,9 @@ Import component -# Events +# Events!anchorId:events; -## `pageChange` +## `pageChange`!anchorId:events-page-change; Is dispatched on page change | Payload field | Type | Description | @@ -302,9 +303,9 @@ Is dispatched on page change -# Slots +# Slots!anchorId:slots; -## `prev` and `next` +## `prev` and `next`!anchorId:slots-prev-next; They are used for customizing prev and next buttons. Slot props: @@ -329,7 +330,7 @@ Slot props: ``` -## `dots` +## `dots`!anchorId:slots-dots; This slot is used for customizing dots appearance. @@ -354,7 +355,7 @@ Slot props: ``` -## Default slot +## Default slot!anchorId:slots-default; This slot takes content for the carousel. @@ -377,9 +378,9 @@ Slot props: -# Methods +# Methods!anchorId:methods; -## `goTo` +## `goTo`!anchorId:methods-go-to; Navigates to a page by index. `(pageIndex, options) => Promise`. Arguments: @@ -406,7 +407,7 @@ Arguments: ``` -## `goToPrev` +## `goToPrev`!anchorId:methods-go-to-prev; Navigates to the previous page. `(options) => Promise`. Arguments: @@ -432,7 +433,7 @@ Arguments: ``` -## `goToNext` +## `goToNext`!anchorId:methods-go-to-next; Navigates to the next page. `(options) => Promise`. Arguments: @@ -521,4 +522,4 @@ Arguments: justify-content: center; padding: 0 20px; } - \ No newline at end of file + From 85cac81f88cd6fb3acd77d3b0f91bd75edb59007 Mon Sep 17 00:00:00 2001 From: Vadim Date: Sat, 14 Aug 2021 15:41:38 +0300 Subject: [PATCH 03/10] #48 : Update custom h elements --- src/docs/Layouts/Main.svelte | 3 +-- src/docs/Layouts/custom/{ => H}/H.svelte | 25 ++++++++++++++--------- src/docs/Layouts/custom/H/H1/H1.svelte | 14 +++++++++++++ src/docs/Layouts/custom/H/H1/H1Dom.svelte | 3 +++ src/docs/Layouts/custom/H/H2/H2.svelte | 14 +++++++++++++ src/docs/Layouts/custom/H/H2/H2Dom.svelte | 3 +++ src/docs/Layouts/custom/H/index.js | 7 +++++++ src/docs/Layouts/custom/H1.svelte | 8 -------- src/docs/Layouts/custom/H2.svelte | 8 -------- src/docs/Layouts/custom/dom/H1.svelte | 9 -------- src/docs/Layouts/custom/dom/H2.svelte | 9 -------- 11 files changed, 57 insertions(+), 46 deletions(-) rename src/docs/Layouts/custom/{ => H}/H.svelte (57%) create mode 100644 src/docs/Layouts/custom/H/H1/H1.svelte create mode 100644 src/docs/Layouts/custom/H/H1/H1Dom.svelte create mode 100644 src/docs/Layouts/custom/H/H2/H2.svelte create mode 100644 src/docs/Layouts/custom/H/H2/H2Dom.svelte create mode 100644 src/docs/Layouts/custom/H/index.js delete mode 100644 src/docs/Layouts/custom/H1.svelte delete mode 100644 src/docs/Layouts/custom/H2.svelte delete mode 100644 src/docs/Layouts/custom/dom/H1.svelte delete mode 100644 src/docs/Layouts/custom/dom/H2.svelte diff --git a/src/docs/Layouts/Main.svelte b/src/docs/Layouts/Main.svelte index 926628e..7565021 100644 --- a/src/docs/Layouts/Main.svelte +++ b/src/docs/Layouts/Main.svelte @@ -3,8 +3,7 @@ import Th from './custom/Th.svelte'; import Tr from './custom/Tr.svelte'; import Td from './custom/Td.svelte'; - import H1 from './custom/H1.svelte'; - import H2 from './custom/H2.svelte'; + import { H1, H2 } from './custom/H'; export { Table as table, Th as th, diff --git a/src/docs/Layouts/custom/H.svelte b/src/docs/Layouts/custom/H/H.svelte similarity index 57% rename from src/docs/Layouts/custom/H.svelte rename to src/docs/Layouts/custom/H/H.svelte index 46d6274..fed2c10 100644 --- a/src/docs/Layouts/custom/H.svelte +++ b/src/docs/Layouts/custom/H/H.svelte @@ -1,6 +1,6 @@ - - - {title} - {#if !title} - - {/if} - - + diff --git a/src/docs/Layouts/custom/H/H1/H1Dom.svelte b/src/docs/Layouts/custom/H/H1/H1Dom.svelte new file mode 100644 index 0000000..20888ba --- /dev/null +++ b/src/docs/Layouts/custom/H/H1/H1Dom.svelte @@ -0,0 +1,3 @@ +

+ +

diff --git a/src/docs/Layouts/custom/H/H2/H2.svelte b/src/docs/Layouts/custom/H/H2/H2.svelte new file mode 100644 index 0000000..e774fe0 --- /dev/null +++ b/src/docs/Layouts/custom/H/H2/H2.svelte @@ -0,0 +1,14 @@ + + + + + + + diff --git a/src/docs/Layouts/custom/H/H2/H2Dom.svelte b/src/docs/Layouts/custom/H/H2/H2Dom.svelte new file mode 100644 index 0000000..8a99575 --- /dev/null +++ b/src/docs/Layouts/custom/H/H2/H2Dom.svelte @@ -0,0 +1,3 @@ +

+ +

diff --git a/src/docs/Layouts/custom/H/index.js b/src/docs/Layouts/custom/H/index.js new file mode 100644 index 0000000..3562458 --- /dev/null +++ b/src/docs/Layouts/custom/H/index.js @@ -0,0 +1,7 @@ +import H1 from './H1/H1.svelte' +import H2 from './H2/H2.svelte' + +export { + H1, + H2 +} diff --git a/src/docs/Layouts/custom/H1.svelte b/src/docs/Layouts/custom/H1.svelte deleted file mode 100644 index 329c9fb..0000000 --- a/src/docs/Layouts/custom/H1.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - - - - diff --git a/src/docs/Layouts/custom/H2.svelte b/src/docs/Layouts/custom/H2.svelte deleted file mode 100644 index ee3940e..0000000 --- a/src/docs/Layouts/custom/H2.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - - - - diff --git a/src/docs/Layouts/custom/dom/H1.svelte b/src/docs/Layouts/custom/dom/H1.svelte deleted file mode 100644 index b444148..0000000 --- a/src/docs/Layouts/custom/dom/H1.svelte +++ /dev/null @@ -1,9 +0,0 @@ -

- -

- - diff --git a/src/docs/Layouts/custom/dom/H2.svelte b/src/docs/Layouts/custom/dom/H2.svelte deleted file mode 100644 index 6b10d49..0000000 --- a/src/docs/Layouts/custom/dom/H2.svelte +++ /dev/null @@ -1,9 +0,0 @@ -

- -

- - From 7341dffbe6d1e793bf69a15c14308a2b63ced94e Mon Sep 17 00:00:00 2001 From: Vadim Date: Sat, 14 Aug 2021 15:57:13 +0300 Subject: [PATCH 04/10] #48 : Update styles --- src/docs/Carousel.svx | 12 ++++++------ src/docs/Layouts/custom/H/H1/H1.svelte | 3 +++ src/docs/Layouts/custom/H/H2/H2.svelte | 3 +++ src/docs/components/Divider.svelte | 4 ++-- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx index 1de47f5..6354f3e 100644 --- a/src/docs/Carousel.svx +++ b/src/docs/Carousel.svx @@ -284,7 +284,7 @@ Import component # Events!anchorId:events; -## `pageChange`!anchorId:events-page-change; +## pageChange!anchorId:events-page-change; Is dispatched on page change | Payload field | Type | Description | @@ -305,7 +305,7 @@ Is dispatched on page change # Slots!anchorId:slots; -## `prev` and `next`!anchorId:slots-prev-next; +## prev and next!anchorId:slots-prev-next; They are used for customizing prev and next buttons. Slot props: @@ -330,7 +330,7 @@ Slot props:
``` -## `dots`!anchorId:slots-dots; +## dots!anchorId:slots-dots; This slot is used for customizing dots appearance. @@ -380,7 +380,7 @@ Slot props: # Methods!anchorId:methods; -## `goTo`!anchorId:methods-go-to; +## goTo!anchorId:methods-go-to; Navigates to a page by index. `(pageIndex, options) => Promise`. Arguments: @@ -407,7 +407,7 @@ Arguments: ``` -## `goToPrev`!anchorId:methods-go-to-prev; +## goToPrev!anchorId:methods-go-to-prev; Navigates to the previous page. `(options) => Promise`. Arguments: @@ -433,7 +433,7 @@ Arguments: ``` -## `goToNext`!anchorId:methods-go-to-next; +## goToNext!anchorId:methods-go-to-next; Navigates to the next page. `(options) => Promise`. Arguments: diff --git a/src/docs/Layouts/custom/H/H1/H1.svelte b/src/docs/Layouts/custom/H/H1/H1.svelte index aa4c679..d097524 100644 --- a/src/docs/Layouts/custom/H/H1/H1.svelte +++ b/src/docs/Layouts/custom/H/H1/H1.svelte @@ -8,6 +8,9 @@ \ No newline at end of file From 7966df7ab8a5999dc2fa1357c3d82e4bd22b36ee Mon Sep 17 00:00:00 2001 From: Vadim Date: Sat, 14 Aug 2021 19:08:11 +0300 Subject: [PATCH 05/10] #48 : Update style names --- src/docs/Carousel.svx | 2 +- src/docs/Layouts/custom/H/H.svelte | 12 ++++++------ src/docs/Layouts/custom/H/H1/H1.svelte | 4 ++-- src/docs/Layouts/custom/H/H2/H2.svelte | 4 ++-- src/docs/README.md | 1 + 5 files changed, 12 insertions(+), 11 deletions(-) create mode 100644 src/docs/README.md diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx index 6354f3e..e8344b0 100644 --- a/src/docs/Carousel.svx +++ b/src/docs/Carousel.svx @@ -239,7 +239,7 @@ -## Use case!anchorId:features-use-cases; +## Use cases!anchorId:features-use-cases; diff --git a/src/docs/Layouts/custom/H/H.svelte b/src/docs/Layouts/custom/H/H.svelte index fed2c10..7452b5b 100644 --- a/src/docs/Layouts/custom/H/H.svelte +++ b/src/docs/Layouts/custom/H/H.svelte @@ -15,8 +15,8 @@ diff --git a/src/docs/Layouts/custom/H/H2/H2.svelte b/src/docs/Layouts/custom/H/H2/H2.svelte index 7e3a5ab..240c70b 100644 --- a/src/docs/Layouts/custom/H/H2/H2.svelte +++ b/src/docs/Layouts/custom/H/H2/H2.svelte @@ -8,10 +8,10 @@ diff --git a/src/docs/README.md b/src/docs/README.md new file mode 100644 index 0000000..c7df837 --- /dev/null +++ b/src/docs/README.md @@ -0,0 +1 @@ +Source code for demo site \ No newline at end of file From 9751a4847b53d25564c99d0c289b52b3abc453e3 Mon Sep 17 00:00:00 2001 From: Vadim Date: Sat, 14 Aug 2021 19:10:17 +0300 Subject: [PATCH 06/10] #48 : Update readme --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 534d24d..80bb881 100644 --- a/README.md +++ b/README.md @@ -15,8 +15,8 @@ The awesome carousel component for Svelte 3 ## Demo -https://vadimkorr.github.io/svelte-carousel \ -[REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5) +* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel) +* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5) ## Installation ```bash @@ -47,7 +47,6 @@ yarn add svelte-carousel -D npm install svelte-carousel -D ``` - 2. Import and use it: ```jsx From 112154a8f3e6e5b4d92c501f5bf74e8677d5b728 Mon Sep 17 00:00:00 2001 From: Vadim Date: Sat, 14 Aug 2021 19:12:03 +0300 Subject: [PATCH 07/10] #48 : Fix favicon --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 6f99a46..cc5eff4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,7 +6,7 @@ svelte-carousel - + From 31a145153e0a3230a5fa480f3d59f0bec1245300 Mon Sep 17 00:00:00 2001 From: Vadim Date: Sat, 14 Aug 2021 19:24:00 +0300 Subject: [PATCH 08/10] #48 : Fix typos --- README.md | 16 ++++++---------- src/docs/Carousel.svx | 17 ++++++----------- 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 80bb881..23267f7 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,6 @@ The awesome carousel component for Svelte 3 ## Demo - * [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel) * [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5) @@ -35,7 +34,6 @@ Import component ``` ## SvelteKit support - There are several things to keep in mind when `svelte-carousel` is used with SvelteKit. This is because `svelte-carousel` is a client-side library and depends on `document` and `window`. [See more in SvelteKit FAQ](https://kit.svelte.dev/faq). 1. Install `svelte-carousel` as a dev dependency. [Why as a dev dependency?](https://github.com/sveltejs/sapper-template#using-external-components) @@ -81,23 +79,23 @@ npm install svelte-carousel -D ## Props | Prop | Type | Default | Description | |---------------------------|------------|-----------------|-----------------------------------------------| -| `arrows` | `boolean` | `true` | Enable Next/Prev arrows | +| `arrows` | `boolean` | `true` | Enables next/prev arrows | | `infinite` | `boolean` | `true` | Infinite looping | | `initialPageIndex` | `number` | `0` | Page to start on | | `duration` | `number` | `500` | Transition duration (ms) | -| `autoplay` | `boolean` | `false` | Enables auto play of pages | +| `autoplay` | `boolean` | `false` | Enables autoplay of pages | | `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) | | `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) | | `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover over the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) | -| `autoplayProgressVisible` | `boolean` | `false` | Show autoplay duration progress indicator | +| `autoplayProgressVisible` | `boolean` | `false` | Shows autoplay duration progress indicator | | `dots` | `boolean` | `true` | Current page indicator dots | | `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function | -| `swiping` | `boolean` | `true` | Enable swiping | +| `swiping` | `boolean` | `true` | Enables swiping | ## Events ### `pageChange` -Is dispatched on page change +It is dispatched on page change | Payload field | Type | Description | |--------------------|-------------|---------------------------------------| @@ -141,8 +139,7 @@ Slot props: ``` ### `dots` - -This slot is used for customizing dots appearance. +This slot is used for customizing how dots look like. Slot props: @@ -166,7 +163,6 @@ Slot props: ``` ### Default slot - This slot takes content for the carousel. Slot props: diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx index e8344b0..dd7bd10 100644 --- a/src/docs/Carousel.svx +++ b/src/docs/Carousel.svx @@ -102,7 +102,6 @@ ## Autoplay with pause on focus!anchorId:features-autoplay-pause-on-focus; - **For desktop** - hover over the carousel to toggle the autoplay. **For touchable devices** - tap the carousel to toggle the autoplay. @@ -245,7 +244,6 @@ # Installation!anchorId:installation; - ```bash yarn add svelte-carousel ``` @@ -253,7 +251,7 @@ yarn add svelte-carousel npm install svelte-carousel ``` -Import component +Import component: ```jsx