Skip to content

Commit 3e40d0c

Browse files
Michael.KryvoruchkoMichael.Kryvoruchko
Michael.Kryvoruchko
authored and
Michael.Kryvoruchko
committed
feat: upgrade example and docs
1 parent f16dac2 commit 3e40d0c

18 files changed

+313
-138
lines changed

Diff for: ‎components/demo/DemoWithControls.vue

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<script setup lang="ts">
2+
import { GSCarousel } from 'gitart-scroll-carousel'
3+
import 'gitart-scroll-carousel/dist/index.css'
4+
import 'gitart-scroll-carousel/dist/GSArrow.css'
5+
import 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'
6+
import 'gitart-scroll-carousel/dist/GSLayoutDefault.css'
7+
8+
import ImageSlide from '@/components/shared/ImageSlide.vue'
9+
10+
const items = useItems(15)
11+
const {
12+
currentLayoutKey,
13+
layout,
14+
layouts,
15+
} = useLayouts()
16+
17+
const propsValues = reactive({
18+
itemGap: 12,
19+
previewSize: 30,
20+
itemsToShow: 2,
21+
sticky: false,
22+
})
23+
24+
const props = computed(() => ({
25+
items,
26+
itemGap: propsValues.itemGap,
27+
layout: layout.component,
28+
previewSize: propsValues.previewSize,
29+
itemsToShow: propsValues.itemsToShow,
30+
sticky: propsValues.sticky,
31+
key: layout.value, // re-render on layout change
32+
}))
33+
</script>
34+
35+
<template>
36+
<div>
37+
<ControlSwitch
38+
v-model="currentLayoutKey"
39+
:items="layouts"
40+
/>
41+
42+
<div class="my-5 flex flex-wrap gap-5">
43+
<ControlRange
44+
v-model.number="propsValues.previewSize"
45+
:label="'preview-size | %{1}'"
46+
min="0"
47+
max="220"
48+
/>
49+
50+
<ControlRange
51+
v-model.number="propsValues.itemsToShow"
52+
:label="'items-to-show | %{1}'"
53+
min="1"
54+
max="5"
55+
/>
56+
57+
<ControlRange
58+
v-model.number="propsValues.itemGap"
59+
:label="'item-gap | %{1}'"
60+
min="0"
61+
max="50"
62+
/>
63+
64+
<ControlCheckbox
65+
v-model="propsValues.sticky"
66+
:label="'sticky'"
67+
/>
68+
</div>
69+
70+
<GSCarousel v-bind="props">
71+
<template #item="{ data }">
72+
<ImageSlide :index="data" />
73+
</template>
74+
</GSCarousel>
75+
</div>
76+
</template>

Diff for: ‎components/example/ExampleLayoutDefault.vue

+5-9
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,11 @@ const layoutProps = reactive({
1919

2020
<template>
2121
<div>
22-
<div>
23-
<label class="inline-flex items-center py-2 cursor-pointer">
24-
<input
25-
v-model="layoutProps.disableArrows"
26-
type="checkbox"
27-
class="form-checkbox"
28-
>
29-
<span class="ml-2 font-medium text-sm">Disable arrows</span>
30-
</label>
22+
<div class="mb-5 flex flex-wrap gap-5">
23+
<ControlCheckbox
24+
v-model="layoutProps.disableArrows"
25+
:label="'disable-arrows'"
26+
/>
3127
</div>
3228

3329
<GSCarousel

Diff for: ‎components/example/ExampleLayoutNumeric.vue

+12-10
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,23 @@ import ImageSlide from '@/components/shared/ImageSlide.vue'
99
const items = useItems(15)
1010
1111
const layoutProps = reactive({
12-
disableControls: false,
12+
disableArrows: false,
13+
disableCounter: false,
1314
})
1415
</script>
1516

1617
<template>
1718
<div>
18-
<div>
19-
<label class="inline-flex items-center py-2 cursor-pointer">
20-
<input
21-
v-model="layoutProps.disableControls"
22-
type="checkbox"
23-
class="form-checkbox"
24-
>
25-
<span class="ml-2 font-medium text-sm">Disable controls</span>
26-
</label>
19+
<div class="mb-5 flex flex-wrap gap-5">
20+
<ControlCheckbox
21+
v-model="layoutProps.disableArrows"
22+
:label="'disable-arrows'"
23+
/>
24+
25+
<ControlCheckbox
26+
v-model="layoutProps.disableCounter"
27+
:label="'disable-counter'"
28+
/>
2729
</div>
2830

2931
<GSCarousel

Diff for: ‎components/example/ExampleLayoutSwitch.vue

+18-88
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { GSCarousel, GSLayoutDefault, GSLayoutNumeric } from 'gitart-scroll-carousel'
2+
import { GSCarousel } from 'gitart-scroll-carousel'
33
import 'gitart-scroll-carousel/dist/index.css'
44
import 'gitart-scroll-carousel/dist/GSArrow.css'
55
import 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'
@@ -8,102 +8,32 @@ import 'gitart-scroll-carousel/dist/GSLayoutDefault.css'
88
import ImageSlide from '@/components/shared/ImageSlide.vue'
99
1010
const items = useItems(15)
11-
12-
const layout = ref('default')
13-
14-
const layouts = [
15-
{
16-
key: 'default',
17-
component: GSLayoutDefault,
18-
},
19-
{
20-
key: 'numeric',
21-
component: GSLayoutNumeric,
22-
},
23-
]
24-
25-
const layoutComponent = computed(() => layouts.find(({ key }) => key === layout.value)?.component)
26-
27-
const onLayoutChange = (newLayout: string) => {
28-
layout.value = newLayout
29-
}
30-
31-
const props = reactive({
11+
const {
12+
currentLayoutKey,
13+
layout,
14+
layouts,
15+
} = useLayouts()
16+
17+
const props = computed(() => ({
18+
items,
3219
itemGap: 12,
20+
layout: layout.component,
3321
previewSize: 30,
3422
itemsToShow: 2,
35-
})
36-
23+
key: layout.value, // re-render on layout change
24+
}))
3725
</script>
3826

3927
<template>
4028
<div>
41-
<div>
42-
<button
43-
v-for="(l, index) in layouts"
44-
:key="l.key"
45-
class="btn btn--group"
46-
:class="{
47-
'btn--active': layout === l.key,
48-
'btn--group-first': index === 0,
49-
'btn--group-last': index === layouts.length - 1,
50-
}"
51-
@click="onLayoutChange(l.key)"
52-
>
53-
{{ l.key }}
54-
</button>
55-
</div>
56-
57-
<div class="pt-2 flex flex-wrap gap-5">
58-
<label class="inline-flex flex-col">
59-
<span class="text-sm font-medium mb-2">
60-
Item gap {{ props.itemGap }}
61-
</span>
62-
63-
<input
64-
v-model.number="props.itemGap"
65-
type="range"
66-
min="0"
67-
max="50"
68-
class="form-range"
69-
>
70-
</label>
71-
72-
<label class="inline-flex flex-col">
73-
<span class="text-sm font-medium mb-2">
74-
Preview size {{ props.previewSize }}
75-
</span>
76-
77-
<input
78-
v-model.number="props.previewSize"
79-
type="range"
80-
min="0"
81-
max="220"
82-
class="form-range"
83-
>
84-
</label>
85-
86-
<label class="inline-flex flex-col">
87-
<span class="text-sm font-medium mb-2">
88-
Items to show {{ props.itemsToShow }}
89-
</span>
90-
91-
<input
92-
v-model.number="props.itemsToShow"
93-
type="range"
94-
min="1"
95-
max="5"
96-
class="form-range"
97-
>
98-
</label>
29+
<div class="mb-5">
30+
<ControlSwitch
31+
v-model="currentLayoutKey"
32+
:items="layouts"
33+
/>
9934
</div>
10035

101-
<GSCarousel
102-
:key="layout"
103-
:items="items"
104-
:layout="layoutComponent"
105-
v-bind="props"
106-
>
36+
<GSCarousel v-bind="props">
10737
<template #item="{ data }">
10838
<ImageSlide :index="data" />
10939
</template>

Diff for: ‎components/ui/ControlCheckbox.vue

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script setup lang="ts">
2+
import { useVModel } from '@vueuse/core'
3+
4+
const props = defineProps({
5+
// put %{1} to put there modelValue
6+
label: {
7+
type: String,
8+
default: '',
9+
},
10+
modelValue: {
11+
type: Boolean,
12+
default: false,
13+
},
14+
})
15+
16+
const proxiedModelValue = useVModel(props, 'modelValue')
17+
18+
const inputLabel = computed(() => {
19+
const { label, modelValue } = props
20+
return label.replace('%{1}', modelValue.toString())
21+
})
22+
23+
</script>
24+
25+
<template>
26+
<label class="inline-flex flex-col">
27+
<span class="text-sm font-medium mb-2">
28+
{{ inputLabel }}
29+
</span>
30+
31+
<div class="flex align-center">
32+
<input
33+
v-model="proxiedModelValue"
34+
type="checkbox"
35+
class="form-checkbox"
36+
>
37+
38+
<span class="ml-2 leading-3 ">
39+
{{ proxiedModelValue }}
40+
</span>
41+
</div>
42+
</label>
43+
</template>
44+
45+
<style lang="scss" scoped></style>

Diff for: ‎components/ui/ControlRange.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script setup lang="ts">
2+
import { useVModel } from '@vueuse/core'
3+
4+
const props = defineProps({
5+
min: {
6+
type: [Number, String],
7+
default: 0,
8+
},
9+
max: {
10+
type: [Number, String],
11+
default: 100,
12+
},
13+
14+
// put %{1} to put there modelValue
15+
label: {
16+
type: String,
17+
default: '',
18+
},
19+
modelValue: {
20+
type: Number,
21+
default: 0,
22+
},
23+
})
24+
25+
const proxiedModelValue = useVModel(props, 'modelValue')
26+
27+
const inputLabel = computed(() => {
28+
const { label, modelValue } = props
29+
return label.replace('%{1}', modelValue.toString())
30+
})
31+
32+
</script>
33+
34+
<template>
35+
<label class="inline-flex flex-col">
36+
<span class="text-sm font-medium mb-2">
37+
{{ inputLabel }}
38+
</span>
39+
40+
<input
41+
v-model.number="proxiedModelValue"
42+
type="range"
43+
:min="min"
44+
:max="max"
45+
class="form-range"
46+
>
47+
</label>
48+
</template>
49+
50+
<style lang="scss" scoped></style>

Diff for: ‎components/ui/ControlSwitch.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script setup lang="ts">
2+
import { useVModel } from '@vueuse/core'
3+
4+
const props = defineProps<{
5+
items: Array<{
6+
label: string
7+
value: string | number
8+
}>
9+
modelValue: string | number
10+
}>()
11+
12+
const proxiedModelValue = useVModel(props, 'modelValue')
13+
</script>
14+
15+
<template>
16+
<div>
17+
<button
18+
v-for="(item, index) in items"
19+
:key="item.value"
20+
class="btn btn--group"
21+
:class="{
22+
'btn--active': modelValue === item.value,
23+
'btn--group-first': index === 0,
24+
'btn--group-last': index === items.length - 1,
25+
}"
26+
@click="proxiedModelValue = item.value"
27+
>
28+
{{ item.label }}
29+
</button>
30+
</div>
31+
</template>
32+
33+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)