cclkit4svelte 0.1.7 → 0.2.1

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 (6) hide show
  1. package/README.md +1 -1
  2. package/dist/Table.svelte +50 -27
  3. package/dist/Table.svelte.d.ts +0 -6
  4. package/dist/const/config.d.ts +19 -18
  5. package/dist/const/config.js +4 -3
  6. package/package.json +12 -11
package/README.md CHANGED
@@ -9,7 +9,7 @@ CANDY CHUPS Labのサイトで使うコンポーネントのキットです。
9
9
 
10
10
  ## Figma
11
11
 
12
- [Figma](https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196)
12
+ [Figma](https://www.figma.com/file/RWLq3IaUeF0soEH666sXQC/Common-Component?type=design&node-id=0%3A1&mode=design&t=ESVNyUtQevAFIe3o-1)
13
13
 
14
14
  ## 利用用途
15
15
 
package/dist/Table.svelte CHANGED
@@ -1,48 +1,71 @@
1
- <script>export let tableColor;
2
- export let subTableColor;
1
+ <script>import { CCLPastelColor, CCLVividColor } from "./const/config";
2
+ export let tableColor;
3
+ let bodyColor;
4
+ switch (tableColor) {
5
+ case CCLVividColor.STRAWBERRY_PINK:
6
+ bodyColor = CCLPastelColor.PEACH_PINK;
7
+ break;
8
+ case CCLVividColor.PINEAPPLE_YELLOW:
9
+ bodyColor = CCLPastelColor.LEMON_YELLOW;
10
+ break;
11
+ case CCLVividColor.SODA_BLUE:
12
+ bodyColor = CCLPastelColor.SUGAR_BLUE;
13
+ break;
14
+ case CCLVividColor.MELON_GREEN:
15
+ bodyColor = CCLPastelColor.MATCHA_GREEN;
16
+ break;
17
+ case CCLVividColor.GRAPE_PURPLE:
18
+ bodyColor = CCLPastelColor.AKEBI_PURPLE;
19
+ break;
20
+ case CCLVividColor.WRAP_GREY:
21
+ bodyColor = CCLPastelColor.CLOUD_GREY;
22
+ break;
23
+ default:
24
+ bodyColor = CCLPastelColor.PEACH_PINK;
25
+ break;
26
+ }
3
27
  export let dataHeader;
4
28
  export let tableData;
5
29
  </script>
6
30
 
7
31
  <!--汎用テーブル-->
8
- <table class="tableWrapper">
32
+ <table class="table-wrapper">
9
33
  <!--テーブルヘッダー-->
10
- <tr class="tableHeader" style="--bgColor: var({tableColor})">
11
- {#each dataHeader as title, index}
12
- <th>{title}</th>
13
- {/each}
14
- </tr>
15
- {#each tableData as row}
16
- <tr style="--subBgColor: var({subTableColor})">
17
- {#each row as data}
18
- <td>{data}</td>
34
+ <thead class="table-header" style="--bgColor: var({tableColor})">
35
+ <tr>
36
+ {#each dataHeader as title, index}
37
+ <th>{title}</th>
19
38
  {/each}
20
39
  </tr>
21
- {/each}
40
+ </thead>
41
+ <tbody>
42
+ {#each tableData as row}
43
+ <tr class="table-body-style" style="--table-body-color: var({bodyColor})">
44
+ {#each row as data}
45
+ <td>{data}</td>
46
+ {/each}
47
+ </tr>
48
+ {/each}
49
+ </tbody>
22
50
  </table>
23
51
 
24
52
  <style>
25
- tr {
26
- color: var(--wrap-grey);
27
- }
28
-
29
- tr:nth-child(even) {
30
- background-color: var(--subBgColor);
31
- }
32
-
33
53
  th {
34
54
  padding: 5px 60px;
35
55
  }
36
56
 
37
- td {
38
- text-align: center;
39
- }
40
-
41
- .tableWrapper {
57
+ .table-wrapper {
42
58
  border-collapse: collapse;
43
59
  }
44
- .tableHeader {
60
+ .table-header {
45
61
  background-color: var(--bgColor);
46
62
  color: #ffffff;
47
63
  }
64
+ .table-body-style {
65
+ text-align: center;
66
+ color: var(--wrap-grey);
67
+ }
68
+ .table-body-style:nth-child(odd) {
69
+ background-color: var(--table-body-color);
70
+ }
48
71
  </style>
package/dist/Table.svelte.d.ts CHANGED
@@ -7,12 +7,6 @@ declare const __propDef: {
7
7
  * @default --strawberry-pink
8
8
  * @type string
9
9
  */ tableColor: string;
10
- /**
11
- * テーブルサブカラー
12
- * CCLPasterColorの中から指定する(本当は自動調整されるようにしたい)
13
- * @default --peach-pink
14
- * @type string
15
- */ subTableColor: string;
16
10
  /**
17
11
  * テーブルのヘッダー
18
12
  * 一次元配列で自由長、
package/dist/const/config.d.ts CHANGED
@@ -1,21 +1,22 @@
1
- export declare const CCLVividColor: {
2
- readonly STRAWBERRY_PINK: "--strawberry-pink";
3
- readonly PINEAPPLE_YELLOW: "--pineapple-yellow";
4
- readonly SODA_BLUE: "--soda-blue";
5
- readonly MELON_GREEN: "--melon-green";
6
- readonly GRAPE_PURPLE: "--grape-purple";
7
- readonly WRAP_GREY: "--wrap-grey";
1
+ declare const CCLVividColor: {
2
+ STRAWBERRY_PINK: string;
3
+ PINEAPPLE_YELLOW: string;
4
+ SODA_BLUE: string;
5
+ MELON_GREEN: string;
6
+ GRAPE_PURPLE: string;
7
+ WRAP_GREY: string;
8
8
  };
9
- export declare const CCLPastelColor: {
10
- readonly PEACH_PINK: "--peach-pink";
11
- readonly LEMON_YELLOW: "--lemon-yellow";
12
- readonly SUGAR_BLUE: "--sugar-blue";
13
- readonly MATCHA_GREEN: "--matcha-green";
14
- readonly AKEBI_PURPLE: "--akebi-purple";
15
- readonly CLOUD_GREY: "--cloud-grey";
9
+ declare const CCLPastelColor: {
10
+ PEACH_PINK: string;
11
+ LEMON_YELLOW: string;
12
+ SUGAR_BLUE: string;
13
+ MATCHA_GREEN: string;
14
+ AKEBI_PURPLE: string;
15
+ CLOUD_GREY: string;
16
16
  };
17
- export declare const HeaderHeight: {
18
- readonly WIDE: "--hd-wide";
19
- readonly NOMAL: "--hd-nomal";
20
- readonly NALLOW: "--hd-nallow";
17
+ declare const HeaderHeight: {
18
+ WIDE: string;
19
+ NOMAL: string;
20
+ NALLOW: string;
21
21
  };
22
+ export { CCLVividColor, CCLPastelColor, HeaderHeight };
package/dist/const/config.js CHANGED
@@ -1,4 +1,4 @@
1
- export const CCLVividColor = {
1
+ const CCLVividColor = {
2
2
  STRAWBERRY_PINK: '--strawberry-pink',
3
3
  PINEAPPLE_YELLOW: '--pineapple-yellow',
4
4
  SODA_BLUE: '--soda-blue',
@@ -6,7 +6,7 @@ export const CCLVividColor = {
6
6
  GRAPE_PURPLE: '--grape-purple',
7
7
  WRAP_GREY: '--wrap-grey'
8
8
  };
9
- export const CCLPastelColor = {
9
+ const CCLPastelColor = {
10
10
  PEACH_PINK: '--peach-pink',
11
11
  LEMON_YELLOW: '--lemon-yellow',
12
12
  SUGAR_BLUE: '--sugar-blue',
@@ -14,8 +14,9 @@ export const CCLPastelColor = {
14
14
  AKEBI_PURPLE: '--akebi-purple',
15
15
  CLOUD_GREY: '--cloud-grey'
16
16
  };
17
- export const HeaderHeight = {
17
+ const HeaderHeight = {
18
18
  WIDE: '--hd-wide',
19
19
  NOMAL: '--hd-nomal',
20
20
  NALLOW: '--hd-nallow'
21
21
  };
22
+ export { CCLVividColor, CCLPastelColor, HeaderHeight };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cclkit4svelte",
3
- "version": "0.1.7",
3
+ "version": "0.2.1",
4
4
  "author": "reiji1020 <sk@reiji1020.info>",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -36,15 +36,16 @@
36
36
  "devDependencies": {
37
37
  "@semantic-release/changelog": "^6.0.3",
38
38
  "@semantic-release/git": "^10.0.1",
39
- "@storybook/addon-actions": "^8.0.0",
40
- "@storybook/addon-essentials": "^8.0.0",
41
- "@storybook/addon-interactions": "^8.0.0",
42
- "@storybook/addon-links": "^8.0.0",
43
- "@storybook/addon-viewport": "^8.0.0",
44
- "@storybook/blocks": "^8.0.0",
45
- "@storybook/svelte": "^8.0.0",
46
- "@storybook/sveltekit": "^8.0.0",
47
- "@storybook/test": "^8.0.0",
39
+ "@storybook/addon-actions": "^8.0.5",
40
+ "@storybook/addon-essentials": "^8.0.5",
41
+ "@storybook/addon-interactions": "^8.0.5",
42
+ "@storybook/addon-links": "^8.0.5",
43
+ "@storybook/addon-mdx-gfm": "8.0.5",
44
+ "@storybook/addon-viewport": "^8.0.5",
45
+ "@storybook/blocks": "^8.0.5",
46
+ "@storybook/svelte": "^8.0.5",
47
+ "@storybook/sveltekit": "^8.0.5",
48
+ "@storybook/test": "^8.0.5",
48
49
  "@sveltejs/adapter-auto": "^2.1.1",
49
50
  "@sveltejs/kit": "^1.30.4",
50
51
  "@sveltejs/package": "^2.3.0",
@@ -59,7 +60,7 @@
59
60
  "react": "^18.2.0",
60
61
  "react-dom": "^18.2.0",
61
62
  "semantic-release": "^23.0.4",
62
- "storybook": "^8.0.0",
63
+ "storybook": "^8.0.5",
63
64
  "svelte": "^4.2.12",
64
65
  "svelte-check": "^3.6.7",
65
66
  "svelte2tsx": "^0.6.27",