cclkit4svelte 1.0.11 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Carousel.svelte +52 -14
- package/dist/Carousel.svelte.d.ts +4 -16
- package/package.json +82 -82
package/dist/Carousel.svelte
CHANGED
|
@@ -1,24 +1,62 @@
|
|
|
1
1
|
<script>import "./const/variables.css";
|
|
2
|
-
|
|
3
|
-
export let borderColor;
|
|
2
|
+
import * as string_decoder from "node:string_decoder";
|
|
4
3
|
export let src;
|
|
5
|
-
|
|
4
|
+
let currentIndex = 0;
|
|
5
|
+
const nextSlide = () => {
|
|
6
|
+
currentIndex = (currentIndex + 1) % src.length;
|
|
7
|
+
};
|
|
8
|
+
const prevSlide = () => {
|
|
9
|
+
currentIndex = (currentIndex - 1 + src.length) % src.length;
|
|
10
|
+
};
|
|
6
11
|
</script>
|
|
7
12
|
|
|
8
|
-
<div class="
|
|
9
|
-
<
|
|
13
|
+
<div class="carousel">
|
|
14
|
+
<div class="slides" style="transform: translateX({-currentIndex * 100}%)">
|
|
15
|
+
{#each src as item, index}
|
|
16
|
+
<img class="slide" src={item.src} alt={item.alt} />
|
|
17
|
+
{/each}
|
|
18
|
+
</div>
|
|
19
|
+
<div class="buttons">
|
|
20
|
+
<button on:click={prevSlide}>❮</button>
|
|
21
|
+
<button on:click={nextSlide}>❯</button>
|
|
22
|
+
</div>
|
|
10
23
|
</div>
|
|
11
24
|
|
|
12
25
|
<style>
|
|
13
|
-
.
|
|
14
|
-
|
|
15
|
-
width:
|
|
26
|
+
.carousel {
|
|
27
|
+
position: relative;
|
|
28
|
+
width: 800px;
|
|
29
|
+
height: 400px;
|
|
30
|
+
overflow: hidden;
|
|
16
31
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
32
|
+
.slides {
|
|
33
|
+
display: flex;
|
|
34
|
+
transition: transform 0.5s ease-in-out;
|
|
35
|
+
}
|
|
36
|
+
.slide {
|
|
37
|
+
min-width: 100%;
|
|
38
|
+
}
|
|
39
|
+
.buttons {
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 50%;
|
|
42
|
+
width: 95%;
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: space-between;
|
|
45
|
+
transform: translateY(-50%);
|
|
46
|
+
padding: 0 20px;
|
|
47
|
+
}
|
|
48
|
+
button {
|
|
49
|
+
background: white;
|
|
50
|
+
color: black;
|
|
51
|
+
border: none;
|
|
52
|
+
padding: 10px;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
border-radius: 50%;
|
|
55
|
+
width: 40px;
|
|
56
|
+
height: 40px;
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
23
61
|
}
|
|
24
62
|
</style>
|
|
@@ -3,22 +3,10 @@ import './const/variables.css';
|
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* 枠線の色
|
|
11
|
-
* @default --strawberry-pink
|
|
12
|
-
* @type string
|
|
13
|
-
*/ borderColor: string;
|
|
14
|
-
/**
|
|
15
|
-
* 画像ソース
|
|
16
|
-
* @type string
|
|
17
|
-
*/ src: string;
|
|
18
|
-
/**
|
|
19
|
-
* alt属性に指定する値
|
|
20
|
-
* @type string
|
|
21
|
-
*/ altText: string;
|
|
6
|
+
* 画像データ
|
|
7
|
+
* 画像URLとaltに設定するテキストをセットで入力すること
|
|
8
|
+
* @type Array<ImgSrc>
|
|
9
|
+
*/ src: Array<Imgsrc>;
|
|
22
10
|
};
|
|
23
11
|
events: {
|
|
24
12
|
[evt: string]: CustomEvent<any>;
|
package/package.json
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
2
|
+
"name": "cclkit4svelte",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"author": "reiji1020 <sk@reiji1020.info>",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./dist/index.js",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist"
|
|
10
|
+
],
|
|
11
|
+
"repository": "https://github.com/reiji1020/ccl-component-kit4svelte.git",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/reiji1020/ccl-component-kit4svelte/issues"
|
|
14
|
+
},
|
|
15
|
+
"homepage": "https://github.com/reiji1020/ccl-component-kit4svelte#readme",
|
|
16
|
+
"description": "Component kit for CANDY CHUPS Lab.",
|
|
17
|
+
"scripts": {
|
|
18
|
+
"preinstall": "npx only-allow pnpm",
|
|
19
|
+
"dev": "vite dev",
|
|
20
|
+
"build": "vite build",
|
|
21
|
+
"preview": "vite preview",
|
|
22
|
+
"package": "svelte-package",
|
|
23
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
24
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
25
|
+
"lint": "prettier --check . && eslint .",
|
|
26
|
+
"format": "prettier --write .",
|
|
27
|
+
"storybook": "storybook dev -p 6006",
|
|
28
|
+
"build-storybook": "storybook build -o ./public/storybook",
|
|
29
|
+
"chromatic": "chromatic",
|
|
30
|
+
"test-sb": "test-storybook --coverage"
|
|
31
|
+
},
|
|
32
|
+
"exports": {
|
|
33
|
+
".": {
|
|
34
|
+
"types": "./dist/index.d.ts",
|
|
35
|
+
"svelte": "./dist/index.js"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"luxon": "^3.5.0"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@chromatic-com/storybook": "^1.9.0",
|
|
43
|
+
"@semantic-release/changelog": "^6.0.3",
|
|
44
|
+
"@semantic-release/git": "^10.0.1",
|
|
45
|
+
"@storybook/addon-coverage": "^1.0.4",
|
|
46
|
+
"@storybook/addon-essentials": "^8.5.8",
|
|
47
|
+
"@storybook/addon-interactions": "^8.5.8",
|
|
48
|
+
"@storybook/addon-links": "^8.5.8",
|
|
49
|
+
"@storybook/addon-mdx-gfm": "^8.5.8",
|
|
50
|
+
"@storybook/addon-viewport": "^8.5.8",
|
|
51
|
+
"@storybook/blocks": "^8.5.8",
|
|
52
|
+
"@storybook/svelte": "^8.5.8",
|
|
53
|
+
"@storybook/sveltekit": "^8.5.8",
|
|
54
|
+
"@storybook/test": "^8.5.8",
|
|
55
|
+
"@storybook/test-runner": "^0.17.0",
|
|
56
|
+
"@sveltejs/adapter-auto": "^2.1.1",
|
|
57
|
+
"@sveltejs/kit": "^1.30.4",
|
|
58
|
+
"@sveltejs/package": "^2.3.5",
|
|
59
|
+
"@types/luxon": "^3.4.2",
|
|
60
|
+
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
|
61
|
+
"@typescript-eslint/parser": "^6.21.0",
|
|
62
|
+
"chromatic": "^11.10.4",
|
|
63
|
+
"eslint": "^8.57.1",
|
|
64
|
+
"eslint-config-prettier": "^9.1.0",
|
|
65
|
+
"eslint-plugin-storybook": "^0.8.0",
|
|
66
|
+
"eslint-plugin-svelte": "^2.44.0",
|
|
67
|
+
"prettier": "^3.3.3",
|
|
68
|
+
"prettier-plugin-svelte": "^3.2.7",
|
|
69
|
+
"react": "^18.3.1",
|
|
70
|
+
"react-dom": "^18.3.1",
|
|
71
|
+
"semantic-release": "^23.1.1",
|
|
72
|
+
"storybook": "^8.5.8",
|
|
73
|
+
"svelte": "^4.2.19",
|
|
74
|
+
"svelte-check": "^3.8.6",
|
|
75
|
+
"svelte2tsx": "^0.6.27",
|
|
76
|
+
"tslib": "^2.7.0",
|
|
77
|
+
"typescript": "^5.6.2",
|
|
78
|
+
"vite": "^4.5.5"
|
|
79
|
+
},
|
|
80
|
+
"volta": {
|
|
81
|
+
"node": "20.11.1",
|
|
82
|
+
"npm": "10.5.0"
|
|
83
|
+
}
|
|
84
84
|
}
|