cclkit4svelte 1.2.1 → 1.2.3

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.
Files changed (8) hide show
  1. package/dist/Button.svelte +8 -4
  2. package/dist/Card.svelte +20 -25
  3. package/dist/Carousel.svelte +7 -7
  4. package/dist/Carousel.svelte.d.ts +7 -3
  5. package/dist/Footer.svelte +4 -6
  6. package/dist/Table.svelte +32 -36
  7. package/dist/Thumbnail.svelte +3 -3
  8. package/package.json +1 -1
package/dist/Button.svelte CHANGED
@@ -1,12 +1,16 @@
1
1
  <script>import "./const/variables.css";
2
2
  export let bgColor;
3
3
  export let label;
4
+ function getButtonColor(bgColor2) {
5
+ return `var(${bgColor2})`;
6
+ }
7
+ let buttonColor = getButtonColor(bgColor);
4
8
  </script>
5
9
 
6
10
  <!--汎用ボタン-->
7
- <button class="buttonWrapper" style="--bgColor: var({bgColor})"
8
- ><span class="btLabel">{label}</span></button
9
- >
11
+ <button class="buttonWrapper" style="--bgColor: {buttonColor}">
12
+ <span class="btLabel">{label}</span>
13
+ </button>
10
14
 
11
15
  <style>
12
16
  .buttonWrapper {
@@ -28,4 +32,4 @@ export let label;
28
32
  font-size: 18px;
29
33
  line-height: normal;
30
34
  }
31
- </style>
35
+ </style>
package/dist/Card.svelte CHANGED
@@ -1,34 +1,29 @@
1
1
  <script>import { CCLPastelColor, CCLVividColor } from "./const/config";
2
2
  import "./const/variables.css";
3
3
  export let borderColor;
4
- let bodyColor;
5
- switch (borderColor) {
6
- case CCLVividColor.STRAWBERRY_PINK:
7
- bodyColor = CCLPastelColor.PEACH_PINK;
8
- break;
9
- case CCLVividColor.PINEAPPLE_YELLOW:
10
- bodyColor = CCLPastelColor.LEMON_YELLOW;
11
- break;
12
- case CCLVividColor.SODA_BLUE:
13
- bodyColor = CCLPastelColor.SUGAR_BLUE;
14
- break;
15
- case CCLVividColor.MELON_GREEN:
16
- bodyColor = CCLPastelColor.MATCHA_GREEN;
17
- break;
18
- case CCLVividColor.GRAPE_PURPLE:
19
- bodyColor = CCLPastelColor.AKEBI_PURPLE;
20
- break;
21
- case CCLVividColor.WRAP_GREY:
22
- bodyColor = CCLPastelColor.CLOUD_GREY;
23
- break;
24
- default:
25
- bodyColor = CCLPastelColor.PEACH_PINK;
26
- break;
27
- }
28
4
  export let src;
29
5
  export let altText;
30
6
  export let title;
31
7
  export let cardText;
8
+ function getBodyColor(borderColor2) {
9
+ switch (borderColor2) {
10
+ case CCLVividColor.STRAWBERRY_PINK:
11
+ return CCLPastelColor.PEACH_PINK;
12
+ case CCLVividColor.PINEAPPLE_YELLOW:
13
+ return CCLPastelColor.LEMON_YELLOW;
14
+ case CCLVividColor.SODA_BLUE:
15
+ return CCLPastelColor.SUGAR_BLUE;
16
+ case CCLVividColor.MELON_GREEN:
17
+ return CCLPastelColor.MATCHA_GREEN;
18
+ case CCLVividColor.GRAPE_PURPLE:
19
+ return CCLPastelColor.AKEBI_PURPLE;
20
+ case CCLVividColor.WRAP_GREY:
21
+ return CCLPastelColor.CLOUD_GREY;
22
+ default:
23
+ return CCLPastelColor.PEACH_PINK;
24
+ }
25
+ }
26
+ let bodyColor = getBodyColor(borderColor);
32
27
  </script>
33
28
 
34
29
  <div class="CardWrapper" style="--border-color: var({borderColor})">
@@ -91,4 +86,4 @@ export let cardText;
91
86
  text-overflow: ellipsis;
92
87
  overflow: hidden;
93
88
  }
94
- </style>
89
+ </style>
package/dist/Carousel.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>import "./const/variables.css";
2
- import * as string_decoder from "node:string_decoder";
3
2
  export let src;
3
+ export let csWidth;
4
4
  let currentIndex = 0;
5
5
  const nextSlide = () => {
6
6
  currentIndex = (currentIndex + 1) % src.length;
@@ -10,8 +10,8 @@ const prevSlide = () => {
10
10
  };
11
11
  </script>
12
12
 
13
- <div class="carousel">
14
- <div class="slides" style="transform: translateX({-currentIndex * 100}%)">
13
+ <div class="carouselWrapper" style="--carousel-width: {csWidth}; --translate-x: {-currentIndex * 100}%)">
14
+ <div class="slides">
15
15
  {#each src as item, index}
16
16
  <img class="slide" src={item.src} alt={item.alt} />
17
17
  {/each}
@@ -23,15 +23,15 @@ const prevSlide = () => {
23
23
  </div>
24
24
 
25
25
  <style>
26
- .carousel {
26
+ .carouselWrapper {
27
27
  position: relative;
28
- width: 800px;
29
- height: 400px;
30
28
  overflow: hidden;
29
+ width: var(--carousel-width);
31
30
  }
32
31
  .slides {
33
32
  display: flex;
34
33
  transition: transform 0.5s ease-in-out;
34
+ transform: translateX(var(--translate-x));
35
35
  }
36
36
  .slide {
37
37
  min-width: 100%;
@@ -59,4 +59,4 @@ const prevSlide = () => {
59
59
  justify-content: center;
60
60
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
61
61
  }
62
- </style>
62
+ </style>
package/dist/Carousel.svelte.d.ts CHANGED
@@ -3,10 +3,14 @@ import './const/variables.css';
3
3
  declare const __propDef: {
4
4
  props: {
5
5
  /**
6
- * 画像データ
7
- * 画像URLとaltに設定するテキストをセットで入力すること
8
- * @type Array<ImgSrc>
6
+ * Image data
7
+ * Provide an array of objects containing image URL and alt text
8
+ * @type Array<Imgsrc>
9
9
  */ src: Array<Imgsrc>;
10
+ /**
11
+ * Width of the carousel component
12
+ * @type string
13
+ */ csWidth: string;
10
14
  };
11
15
  events: {
12
16
  [evt: string]: CustomEvent<any>;
package/dist/Footer.svelte CHANGED
@@ -5,14 +5,12 @@ const year = getYear();
5
5
  </script>
6
6
 
7
7
  <!--汎用フッター-->
8
- <footer>
9
- <div class="wrapper" style="--bgColor: var({bgColor});">
10
- <span class="copy">Copyright © 2015-{year} CANDY CHUPS Lab. All Rights Reserved.</span>
11
- </div>
8
+ <footer class="footerWrapper" style="--bgColor: var({bgColor});">
9
+ <span class="copy">Copyright © 2015-{year} CANDY CHUPS Lab. All Rights Reserved.</span>
12
10
  </footer>
13
11
 
14
12
  <style>
15
- .wrapper {
13
+ .footerWrapper {
16
14
  display: flex;
17
15
  height: 30px;
18
16
  justify-content: center;
@@ -24,4 +22,4 @@ const year = getYear();
24
22
  color: #fff;
25
23
  font-size: 9px;
26
24
  }
27
- </style>
25
+ </style>
package/dist/Table.svelte CHANGED
@@ -2,31 +2,27 @@
2
2
  import "./const/variables.css";
3
3
  export let tableColor;
4
4
  let bodyColor;
5
- switch (tableColor) {
6
- case CCLVividColor.STRAWBERRY_PINK:
7
- bodyColor = CCLPastelColor.PEACH_PINK;
8
- break;
9
- case CCLVividColor.PINEAPPLE_YELLOW:
10
- bodyColor = CCLPastelColor.LEMON_YELLOW;
11
- break;
12
- case CCLVividColor.SODA_BLUE:
13
- bodyColor = CCLPastelColor.SUGAR_BLUE;
14
- break;
15
- case CCLVividColor.MELON_GREEN:
16
- bodyColor = CCLPastelColor.MATCHA_GREEN;
17
- break;
18
- case CCLVividColor.GRAPE_PURPLE:
19
- bodyColor = CCLPastelColor.AKEBI_PURPLE;
20
- break;
21
- case CCLVividColor.WRAP_GREY:
22
- bodyColor = CCLPastelColor.CLOUD_GREY;
23
- break;
24
- default:
25
- bodyColor = CCLPastelColor.PEACH_PINK;
26
- break;
27
- }
28
5
  export let dataHeader;
29
6
  export let tableData;
7
+ function getBodyColor(tableColor2) {
8
+ switch (tableColor2) {
9
+ case CCLVividColor.STRAWBERRY_PINK:
10
+ return CCLPastelColor.PEACH_PINK;
11
+ case CCLVividColor.PINEAPPLE_YELLOW:
12
+ return CCLPastelColor.LEMON_YELLOW;
13
+ case CCLVividColor.SODA_BLUE:
14
+ return CCLPastelColor.SUGAR_BLUE;
15
+ case CCLVividColor.MELON_GREEN:
16
+ return CCLPastelColor.MATCHA_GREEN;
17
+ case CCLVividColor.GRAPE_PURPLE:
18
+ return CCLPastelColor.AKEBI_PURPLE;
19
+ case CCLVividColor.WRAP_GREY:
20
+ return CCLPastelColor.CLOUD_GREY;
21
+ default:
22
+ return CCLPastelColor.PEACH_PINK;
23
+ }
24
+ }
25
+ bodyColor = getBodyColor(tableColor);
30
26
  </script>
31
27
 
32
28
  <!--汎用テーブル-->
@@ -34,20 +30,20 @@ export let tableData;
34
30
  <table>
35
31
  <!--テーブルヘッダー-->
36
32
  <thead class="table-header" style="--bgColor: var({tableColor})">
37
- <tr>
38
- {#each dataHeader as title, index}
39
- <th>{title}</th>
40
- {/each}
41
- </tr>
33
+ <tr>
34
+ {#each dataHeader as title, index}
35
+ <th>{title}</th>
36
+ {/each}
37
+ </tr>
42
38
  </thead>
43
39
  <tbody>
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}
40
+ {#each tableData as row}
41
+ <tr class="table-body-style" style="--table-body-color: var({bodyColor})">
42
+ {#each row as data}
43
+ <td>{data}</td>
44
+ {/each}
45
+ </tr>
46
+ {/each}
51
47
  </tbody>
52
48
  </table>
53
49
  </div>
@@ -88,4 +84,4 @@ export let tableData;
88
84
  .table-body-style:nth-child(odd) {
89
85
  background-color: var(--table-body-color);
90
86
  }
91
- </style>
87
+ </style>
package/dist/Thumbnail.svelte CHANGED
@@ -5,8 +5,8 @@ export let src;
5
5
  export let altText;
6
6
  </script>
7
7
 
8
- <div class="ThumbnailWrapper" style="--imageSize: {imageSize}">
9
- <img {src} alt={altText} class="Thumbnail" style="--borderColor: var({borderColor})" />
8
+ <div class="ThumbnailWrapper" style="--imageSize: {imageSize}; --borderColor: var({borderColor})">
9
+ <img {src} alt={altText} class="Thumbnail" />
10
10
  </div>
11
11
 
12
12
  <style>
@@ -21,4 +21,4 @@ export let altText;
21
21
  border-radius: 320px;
22
22
  border: 5px solid var(--borderColor);
23
23
  }
24
- </style>
24
+ </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cclkit4svelte",
3
- "version": "1.2.1",
3
+ "version": "1.2.3",
4
4
  "author": "reiji1020 <sk@reiji1020.info>",
5
5
  "license": "MIT",
6
6
  "type": "module",