cclkit4svelte 1.0.11 → 1.2.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/dist/CommonHeader.svelte +31 -0
- package/dist/CommonHeader.svelte.d.ts +37 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- 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>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<script>import "./const/variables.css";
|
|
2
|
+
export let bgColor;
|
|
3
|
+
export let height;
|
|
4
|
+
export let logo;
|
|
5
|
+
export let logoHeight;
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<!--汎用ヘッダー-->
|
|
9
|
+
<header>
|
|
10
|
+
<div class="wrapper" style="--bgColor: var({bgColor}); --height: var({height})">
|
|
11
|
+
{#if logo}
|
|
12
|
+
<img style="height: {logoHeight}" src={logo} alt="SVG Image" />
|
|
13
|
+
{:else}
|
|
14
|
+
<p>SVGファイルが指定されていません</p>
|
|
15
|
+
{/if}
|
|
16
|
+
</div>
|
|
17
|
+
</header>
|
|
18
|
+
|
|
19
|
+
<style>
|
|
20
|
+
.wrapper {
|
|
21
|
+
background: var(--bgColor);
|
|
22
|
+
height: var(--height);
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.a {
|
|
29
|
+
fill: #fff;
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import './const/variables.css';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
/**
|
|
6
|
+
* ヘッダー背景色
|
|
7
|
+
* CCLVividColorの中から指定する
|
|
8
|
+
* @default --strawberry-pink
|
|
9
|
+
* @type string
|
|
10
|
+
*/ bgColor: string;
|
|
11
|
+
/**
|
|
12
|
+
* ヘッダー高さ
|
|
13
|
+
* HeaderHeightの中から指定する
|
|
14
|
+
* @default --hd-nomal
|
|
15
|
+
* @type string
|
|
16
|
+
*/ height: string;
|
|
17
|
+
/**
|
|
18
|
+
* ヘッダーに表示するロゴ
|
|
19
|
+
* 基本的にsvg要素を読み込む
|
|
20
|
+
* @type string
|
|
21
|
+
*/ logo: string;
|
|
22
|
+
/**
|
|
23
|
+
* ロゴの高さ
|
|
24
|
+
* @type string
|
|
25
|
+
*/ logoHeight: string;
|
|
26
|
+
};
|
|
27
|
+
events: {
|
|
28
|
+
[evt: string]: CustomEvent<any>;
|
|
29
|
+
};
|
|
30
|
+
slots: {};
|
|
31
|
+
};
|
|
32
|
+
export type CommonHeaderProps = typeof __propDef.props;
|
|
33
|
+
export type CommonHeaderEvents = typeof __propDef.events;
|
|
34
|
+
export type CommonHeaderSlots = typeof __propDef.slots;
|
|
35
|
+
export default class CommonHeader extends SvelteComponentTyped<CommonHeaderProps, CommonHeaderEvents, CommonHeaderSlots> {
|
|
36
|
+
}
|
|
37
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -5,4 +5,5 @@ export { default as Footer } from './Footer.svelte';
|
|
|
5
5
|
export { default as Thumbnail } from './Thumbnail.svelte';
|
|
6
6
|
export { default as Card } from './Card.svelte';
|
|
7
7
|
export { default as Table } from './Table.svelte';
|
|
8
|
+
export { default as Carousel } from './Carousel.svelte';
|
|
8
9
|
export { CCLVividColor, CCLPastelColor, HeaderHeight } from './const/config';
|
package/dist/index.js
CHANGED
|
@@ -6,4 +6,5 @@ export { default as Footer } from './Footer.svelte';
|
|
|
6
6
|
export { default as Thumbnail } from './Thumbnail.svelte';
|
|
7
7
|
export { default as Card } from './Card.svelte';
|
|
8
8
|
export { default as Table } from './Table.svelte';
|
|
9
|
+
export { default as Carousel } from './Carousel.svelte';
|
|
9
10
|
export { CCLVividColor, CCLPastelColor, HeaderHeight } from './const/config';
|
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.2.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
|
}
|