cclkit4svelte 1.0.10 → 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 +62 -0
- package/dist/Carousel.svelte.d.ts +21 -0
- package/dist/Table.svelte +7 -7
- package/dist/Thumbnail.svelte +1 -1
- package/package.json +11 -11
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<script>import "./const/variables.css";
|
|
2
|
+
import * as string_decoder from "node:string_decoder";
|
|
3
|
+
export let src;
|
|
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
|
+
};
|
|
11
|
+
</script>
|
|
12
|
+
|
|
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>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<style>
|
|
26
|
+
.carousel {
|
|
27
|
+
position: relative;
|
|
28
|
+
width: 800px;
|
|
29
|
+
height: 400px;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
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);
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import './const/variables.css';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
/**
|
|
6
|
+
* 画像データ
|
|
7
|
+
* 画像URLとaltに設定するテキストをセットで入力すること
|
|
8
|
+
* @type Array<ImgSrc>
|
|
9
|
+
*/ src: Array<Imgsrc>;
|
|
10
|
+
};
|
|
11
|
+
events: {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
};
|
|
14
|
+
slots: {};
|
|
15
|
+
};
|
|
16
|
+
export type CarouselProps = typeof __propDef.props;
|
|
17
|
+
export type CarouselEvents = typeof __propDef.events;
|
|
18
|
+
export type CarouselSlots = typeof __propDef.slots;
|
|
19
|
+
export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
|
|
20
|
+
}
|
|
21
|
+
export {};
|
package/dist/Table.svelte
CHANGED
|
@@ -41,13 +41,13 @@ export let tableData;
|
|
|
41
41
|
</tr>
|
|
42
42
|
</thead>
|
|
43
43
|
<tbody>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
44
|
+
{#each tableData as row}
|
|
45
|
+
<tr class="table-body-style" style="--table-body-color: var({bodyColor})">
|
|
46
|
+
{#each row as data}
|
|
47
|
+
<td>{data}</td>
|
|
48
|
+
{/each}
|
|
49
|
+
</tr>
|
|
50
|
+
{/each}
|
|
51
51
|
</tbody>
|
|
52
52
|
</table>
|
|
53
53
|
</div>
|
package/dist/Thumbnail.svelte
CHANGED
|
@@ -6,7 +6,7 @@ export let altText;
|
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
8
|
<div class="ThumbnailWrapper" style="--imageSize: {imageSize}">
|
|
9
|
-
<img
|
|
9
|
+
<img {src} alt={altText} class="Thumbnail" style="--borderColor: var({borderColor})" />
|
|
10
10
|
</div>
|
|
11
11
|
|
|
12
12
|
<style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cclkit4svelte",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"author": "reiji1020 <sk@reiji1020.info>",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -43,15 +43,15 @@
|
|
|
43
43
|
"@semantic-release/changelog": "^6.0.3",
|
|
44
44
|
"@semantic-release/git": "^10.0.1",
|
|
45
45
|
"@storybook/addon-coverage": "^1.0.4",
|
|
46
|
-
"@storybook/addon-essentials": "^8.
|
|
47
|
-
"@storybook/addon-interactions": "^8.
|
|
48
|
-
"@storybook/addon-links": "^8.
|
|
49
|
-
"@storybook/addon-mdx-gfm": "^8.
|
|
50
|
-
"@storybook/addon-viewport": "^8.
|
|
51
|
-
"@storybook/blocks": "^8.
|
|
52
|
-
"@storybook/svelte": "^8.
|
|
53
|
-
"@storybook/sveltekit": "^8.
|
|
54
|
-
"@storybook/test": "^8.
|
|
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
55
|
"@storybook/test-runner": "^0.17.0",
|
|
56
56
|
"@sveltejs/adapter-auto": "^2.1.1",
|
|
57
57
|
"@sveltejs/kit": "^1.30.4",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"react": "^18.3.1",
|
|
70
70
|
"react-dom": "^18.3.1",
|
|
71
71
|
"semantic-release": "^23.1.1",
|
|
72
|
-
"storybook": "^8.
|
|
72
|
+
"storybook": "^8.5.8",
|
|
73
73
|
"svelte": "^4.2.19",
|
|
74
74
|
"svelte-check": "^3.8.6",
|
|
75
75
|
"svelte2tsx": "^0.6.27",
|