cclkit4svelte 2.0.0 → 2.0.2
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/CommonHeader.svelte +4 -1
- package/dist/CommonHeader.svelte.d.ts +4 -0
- package/dist/Header.svelte +81 -73
- package/dist/ProgressBar.svelte +52 -0
- package/dist/ProgressBar.svelte.d.ts +24 -0
- package/dist/Spinner.svelte +31 -0
- package/dist/Spinner.svelte.d.ts +18 -0
- package/dist/Tooltip.svelte +130 -0
- package/dist/Tooltip.svelte.d.ts +21 -0
- package/dist/const/config.d.ts +11 -6
- package/dist/const/config.js +19 -1
- package/dist/index.d.ts +7 -0
- package/dist/index.js +7 -0
- package/package.json +1 -1
package/dist/CommonHeader.svelte
CHANGED
|
@@ -3,13 +3,16 @@ export let bgColor;
|
|
|
3
3
|
export let height;
|
|
4
4
|
export let logo;
|
|
5
5
|
export let logoHeight;
|
|
6
|
+
export let href;
|
|
6
7
|
</script>
|
|
7
8
|
|
|
8
9
|
<!--汎用ヘッダー-->
|
|
9
10
|
<header>
|
|
10
11
|
<div class="wrapper" style="--bgColor: var({bgColor}); --height: var({height})">
|
|
11
12
|
{#if logo}
|
|
12
|
-
<
|
|
13
|
+
<a {href}>
|
|
14
|
+
<img style="height: {logoHeight}" src={logo} alt="SVG Image" />
|
|
15
|
+
</a>
|
|
13
16
|
{:else}
|
|
14
17
|
<p>SVGファイルが指定されていません</p>
|
|
15
18
|
{/if}
|
package/dist/Header.svelte
CHANGED
|
@@ -6,79 +6,86 @@ export let height;
|
|
|
6
6
|
<!--汎用ヘッダー-->
|
|
7
7
|
<header>
|
|
8
8
|
<div class="wrapper" style="--bgColor: var({bgColor}); --height: var({height})">
|
|
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
|
-
|
|
9
|
+
<a
|
|
10
|
+
href="https://candychupslab.netlify.app/"
|
|
11
|
+
target="_blank"
|
|
12
|
+
rel="noopener noreferrer"
|
|
13
|
+
style="display: inline-block; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;"
|
|
14
|
+
>
|
|
15
|
+
<svg viewBox="0 0 665 63" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<title>CANDY CHUPS Lab.</title>
|
|
17
|
+
<path
|
|
18
|
+
class="a"
|
|
19
|
+
d="M24.2202 50.7446C9.11964 50.7446 0 41.6664 0 29.3071C0 15.3125 9.97847 3.95941 24.7948 3.95941C36.0461 3.95941 42.8179 10.2047 42.8179 18.1454C42.8613 19.9031 42.5115 21.6511 41.7886 23.2888C41.0657 24.9264 39.984 26.4213 38.6058 27.6875C37.2275 28.9536 35.58 29.966 33.7579 30.6663C31.9359 31.3666 29.9753 31.741 27.9892 31.768C22.0021 31.768 20.1485 28.3008 20.1485 23.9477C20.1485 18.4024 22.8547 11.7797 25.7772 6.92348H25.6351C22.1442 11.7141 18.9375 18.8399 18.9375 24.7079C18.9375 29.4985 21.2174 33.0915 28.4834 33.0915C35.7495 33.0915 44.2266 29.5586 48.5022 25.7797C49.7379 25.9657 50.2816 26.9118 50.2816 28.2352C50.294 35.9899 42.0332 50.7446 24.2202 50.7446Z"
|
|
20
|
+
fill="white"
|
|
21
|
+
/>
|
|
22
|
+
<path
|
|
23
|
+
class="a"
|
|
24
|
+
d="M107.786 28.6781C109.022 28.8641 109.566 29.8102 109.566 31.1391C109.566 37.882 105.364 50.7445 95.2435 50.7445C88.9784 50.7445 85.4875 46.0797 83.9922 41.2234C83.5659 43.7445 81.7123 46.6484 78.864 46.6484C76.5099 46.6484 75.373 44.1875 75.373 41.0977C75.3944 39.1945 75.7295 37.3042 76.3678 35.4867H76.2257C75.1947 37.9039 74.5017 40.4237 74.162 42.9898C69.6702 48.6664 64.2762 52.7625 55.8548 52.7625C47.4333 52.7625 43.8868 47.5945 43.8868 42.7383C43.8868 38.325 46.661 34.1633 51.1528 34.1633C51.4371 37.4445 55.4779 38.8937 58.629 38.8937C66.6612 38.8937 76.7941 30.1438 81.9965 21.175C83.0276 17.2569 84.6572 13.4815 86.8406 9.95314C74.3721 9.95314 70.7391 13.9891 70.7391 17.4563C70.7301 18.0854 70.8612 18.7099 71.125 19.2942C71.3887 19.8785 71.7799 20.411 72.2762 20.8615C72.7725 21.3119 73.3641 21.6714 74.0174 21.9194C74.6707 22.1675 75.3728 22.2992 76.0836 22.307C76.0836 26.7203 70.3128 30.3188 64.5419 30.3188C55.3543 30.3188 50.3682 24.2648 50.3682 17.8336C50.3682 6.98906 60.6988 2.76172 72.1663 2.76172C78.3836 2.77632 84.5347 3.89197 90.2574 6.04297C91.5066 4.93447 92.9963 4.06119 94.6368 3.47567C96.2773 2.89015 98.0348 2.60451 99.8033 2.63595C105.933 2.63595 108.28 5.22267 108.28 8.31251C108.28 11.2766 106.149 14.5524 103.084 16.4445C103.467 13.3794 104.206 10.3574 105.29 7.42656H105.148C102.367 12.7859 100.872 19.4086 100.872 26.0914C100.852 29.7203 101.306 33.3392 102.225 36.8758C104.581 34.436 106.461 31.6654 107.786 28.6781V28.6781ZM79.9329 33.4086C80.4612 33.4068 80.987 33.3424 81.4961 33.2172C81.222 32.14 81.0791 31.04 81.0697 29.9359C81.1366 28.3295 81.3265 26.729 81.6382 25.1453H81.4899C80.9609 27.9412 79.8751 30.6316 78.2832 33.0914C78.7838 33.3432 79.3593 33.4539 79.9329 33.4086V33.4086Z"
|
|
25
|
+
fill="white"
|
|
26
|
+
/>
|
|
27
|
+
<path
|
|
28
|
+
class="a"
|
|
29
|
+
d="M123.103 26.9117C119.68 23.1273 114.342 18.0852 109.924 15.061C112.84 9.95314 118.043 3.89923 124.808 3.89923C134.787 3.89923 144.184 17.4563 147.817 23.8875L147.959 23.8219C147.084 21.5879 146.014 19.4176 144.759 17.3305C144.512 16.2082 144.392 15.0669 144.401 13.9234C144.401 8.1211 147.817 3.95938 153.02 3.95938C157.722 3.95938 160.218 6.61173 160.218 9.82735C160.238 10.3138 160.19 10.8005 160.076 11.2766C150.74 11.5281 149.887 22.1813 149.887 27.9836C151.229 30.8419 151.922 33.9062 151.926 37.0016C151.926 45.0078 147.508 49.8641 139.458 50.7445C135.683 42.1094 131.129 35.7383 125.284 29.2469L125.216 29.307C126.847 31.6562 128.345 34.0765 129.702 36.5586C128.991 44.0617 121.867 50.7445 114.743 50.7445C107.761 50.7445 104.857 45.7625 104.857 40.9719C104.857 37.5047 106.427 34.0977 108.991 32.8398C110.344 34.732 113.124 36.3672 115.546 36.3672C119.612 36.3672 123.103 33.8461 123.103 26.9117Z"
|
|
30
|
+
fill="white"
|
|
31
|
+
/>
|
|
32
|
+
<path
|
|
33
|
+
class="a"
|
|
34
|
+
d="M156.251 33.8461C156.403 27.9311 157.474 22.0628 159.433 16.4062C161.716 17.1404 164.128 17.5107 166.557 17.5C167.694 17.5 168.479 17.4343 168.479 17.4343V17.3086C159.575 16.3525 154.231 12.1406 154.231 5.45231C154.252 3.61178 154.588 1.78468 155.226 0.0327759C161.923 4.06871 171.611 5.70934 178.593 5.70934C180.02 5.70934 181.299 5.58356 182.226 5.51793C179.804 9.89293 177.901 15.4164 176.597 21.1531H176.74C180.873 12.6437 186.286 4.00309 194.763 4.00309C202.671 4.00309 206.02 10.9429 206.02 19.4523C206.02 29.2961 199.607 50.4109 186.075 50.4109C178.809 50.4109 171.401 43.5367 168.479 37.357H168.195C170.116 41.5187 172.038 44.4226 175.102 47.4468C174.257 48.5 173.135 49.3548 171.832 49.9371C170.529 50.5194 169.085 50.8115 167.626 50.7882C161.997 50.7445 156.251 46.5828 156.251 33.8461ZM188.096 11.1508C182.893 21.0492 179.26 31.325 176.27 41.5406C181.75 33.8461 186.026 21.175 188.238 11.1508H188.096Z"
|
|
35
|
+
fill="white"
|
|
36
|
+
/>
|
|
37
|
+
<path
|
|
38
|
+
class="a"
|
|
39
|
+
d="M219.341 50.6844C210.154 50.05 206.236 43.2414 206.236 33.7312C206.236 28.1203 207.089 23.0125 209.511 16.3953C211.575 17.2156 214.571 17.4891 216.851 17.4891C217.469 17.4891 218.087 17.4234 218.556 17.4234V17.2977C209.585 16.3516 204.309 12.1297 204.309 5.44141C204.347 3.59463 204.684 1.76225 205.309 0C212.007 4.03594 221.695 5.67657 228.671 5.67657C230.098 5.67657 232.304 5.48516 232.304 5.48516C229.103 11.3477 226.039 20.3656 226.039 28.5633C225.994 31.4984 226.42 34.4243 227.305 37.2531C226.459 40.3474 224.717 43.1933 222.251 45.5109L222.393 45.7023C228.659 40.9719 230.512 34.4148 230.512 28.3609C230.512 24.1992 229.944 20.7977 228.949 16.1328C232.007 8.75547 238.563 3.95937 243.975 3.95937C248.751 3.95937 252.669 7.61797 252.669 16.4445C252.669 28.7383 245.044 38.8938 235.572 47.2774C225.112 56.5469 212.433 62.3438 204.951 62.3438C200.249 62.3438 198.186 60.0742 198.186 57.2961C198.186 53.643 201.819 49.0383 207.657 47.4523C211.065 49.6133 215.149 50.7812 219.341 50.7938V50.6844Z"
|
|
40
|
+
fill="white"
|
|
41
|
+
/>
|
|
42
|
+
<path
|
|
43
|
+
class="a"
|
|
44
|
+
d="M291.507 50.7446C276.401 50.7446 267.287 41.6664 267.287 29.3071C267.287 15.3125 277.26 3.95941 292.076 3.95941C303.333 3.95941 310.099 10.2047 310.099 18.1454C310.142 19.9031 309.793 21.6511 309.07 23.2888C308.347 24.9264 307.265 26.4213 305.887 27.6875C304.509 28.9536 302.861 29.966 301.039 30.6663C299.217 31.3666 297.256 31.741 295.27 31.768C289.283 31.768 287.43 28.3008 287.43 23.9477C287.43 18.4024 290.142 11.7797 293.058 6.92348H292.916C289.425 11.7141 286.219 18.8399 286.219 24.7079C286.219 29.4985 288.498 33.0915 295.765 33.0915C303.031 33.0915 311.508 29.5586 315.783 25.7797C317.019 25.9657 317.563 26.9118 317.563 28.2352C317.575 35.9899 309.314 50.7446 291.507 50.7446Z"
|
|
45
|
+
fill="white"
|
|
46
|
+
/>
|
|
47
|
+
<path
|
|
48
|
+
class="a"
|
|
49
|
+
d="M374.208 6.56248C369.513 13.814 366.516 25.982 366.516 35.2515V36.8922C368.872 34.4508 370.752 31.6783 372.077 28.689C373.312 28.875 373.856 29.8211 373.856 31.15C373.856 37.8929 369.723 50.7555 359.534 50.7555C353.356 50.7555 348.777 45.4617 347.795 39.1562L342.45 38.4617C339.033 46.4679 333.046 52.3961 323.296 52.3961C316.315 52.3961 311.186 48.1086 311.186 40.857C311.186 32.1562 317.668 26.5453 327.782 25.725C327.82 22.9021 327.655 20.08 327.288 17.2758C328.199 17.4543 329.129 17.5387 330.062 17.5273C332.168 17.6176 334.273 17.3178 336.241 16.6469L336.173 16.5211C335.246 16.5812 334.319 16.6469 333.467 16.6469C323.778 16.6469 318.86 11.3476 318.86 3.78437C318.848 3.27853 318.873 2.7725 318.934 2.26951C323.128 3.53376 327.535 4.15158 331.965 4.09607C337.81 4.09607 342.512 3.14999 347.356 1.95233C347.744 4.29174 347.934 6.6535 347.924 9.01795C347.794 13.9853 347.247 18.9373 346.287 23.8328H347.072C348.067 16.8984 353.127 3.9703 364.31 3.9703C367.82 3.99217 371.251 4.8907 374.208 6.56248ZM324.779 38.5273C320.454 38.4672 317.155 41.4312 317.155 42.4375C317.156 42.6382 317.246 42.8305 317.406 42.9735C317.565 43.1165 317.781 43.1988 318.008 43.2031C319.787 43.2031 323.63 40.5289 324.773 38.5109L324.779 38.5273Z"
|
|
50
|
+
fill="white"
|
|
51
|
+
/>
|
|
52
|
+
<path
|
|
53
|
+
class="a"
|
|
54
|
+
d="M393.943 5.66558C395.37 5.66558 397.576 5.47419 397.576 5.47419C393.516 12.7258 391.311 21.6781 391.311 30.6961C391.319 33.2471 391.509 35.7951 391.879 38.325L392.732 37.0617C392.59 35.5523 392.522 34.0375 392.522 32.5882C392.522 17.2757 399.571 3.95933 410.613 3.95933C414.119 3.96809 417.55 4.86574 420.498 6.54606C416.173 14.175 412.806 24.3906 412.806 36.8757C415.16 34.4329 417.039 31.6607 418.367 28.6726C419.603 28.8586 420.146 29.8047 420.146 31.0679C420.146 37.8765 416.013 50.7554 405.973 50.7554C401.03 50.7554 397.99 47.6054 396.352 45.2867C397.887 42.9046 399.084 40.3644 399.917 37.7234L399.701 37.5976C396.569 43.8375 391.508 50.7718 384.459 50.7718C374.412 50.7718 371.564 42.8312 371.564 34.2507C371.678 28.1978 372.762 22.1898 374.783 16.4062C377.066 17.1404 379.478 17.5107 381.907 17.5C383.044 17.5 383.828 17.4343 383.828 17.4343V17.3086C374.925 16.3625 369.58 12.1406 369.58 5.45231C369.602 3.61178 369.937 1.78468 370.575 0.0327759C377.273 4.02496 386.961 5.66558 393.943 5.66558Z"
|
|
55
|
+
fill="white"
|
|
56
|
+
/>
|
|
57
|
+
<path
|
|
58
|
+
class="a"
|
|
59
|
+
d="M438.398 21.1093C443.736 10.2047 448.902 3.95933 455.698 3.95933C462.328 3.95933 465.528 9.76168 465.528 16.1328C465.528 26.2172 457.552 39.5828 444.941 39.5828C437.249 39.5828 428.203 35.8039 423.427 32.2711L423.359 32.3367C427.299 35.5695 431.958 38.0376 437.039 39.5828C437.383 41.6229 437.857 43.6442 438.46 45.6367C436.464 48.1578 432.763 50.7445 429.272 50.7445C423.644 50.7445 417.873 46.5828 417.873 33.8461C418.035 27.9298 419.116 22.0615 421.086 16.4062C423.369 17.1404 425.781 17.5107 428.21 17.5C429.346 17.5 430.131 17.4343 430.131 17.4343V17.3086C421.228 16.3625 415.883 12.1406 415.883 5.45231C415.904 3.61129 416.241 1.78382 416.884 0.0327759C423.582 4.06871 433.27 5.70934 440.245 5.70934C441.673 5.70934 442.958 5.58356 443.879 5.51793C441.09 10.4322 439.213 15.7113 438.318 21.1531L438.398 21.1093ZM445.874 18.2765C442.342 23.3694 439.224 28.6784 436.544 34.1632C438.182 33.8461 440.394 31.0734 441.815 28.7382C443.735 25.4321 445.148 21.9138 446.016 18.2765C445.948 18.3367 445.948 18.1453 445.874 18.2765Z"
|
|
60
|
+
fill="white"
|
|
61
|
+
/>
|
|
62
|
+
<path
|
|
63
|
+
class="a"
|
|
64
|
+
d="M485.343 50.7445C471.75 50.7445 463.755 45.6367 463.755 38.2594C463.755 33.157 468.173 28.4156 474.444 28.4156C479.857 35.2242 487.975 41.464 494.747 45.4398L494.815 45.314C483.916 36.7992 471.237 27.218 471.237 16.6851C471.237 8.11015 481.284 3.94843 491.114 3.94843C500.518 3.94843 509.65 7.7328 509.65 14.9187C509.65 18.3914 506.233 21.793 502.174 23.7508C495.742 17.5 489.761 14.2187 482.353 10.3305L482.279 10.3906C494.673 18.1453 505.856 26.0312 505.856 37.0617C505.856 46.2711 498.59 50.7445 485.343 50.7445Z"
|
|
65
|
+
fill="white"
|
|
66
|
+
/>
|
|
67
|
+
<path
|
|
68
|
+
class="a"
|
|
69
|
+
d="M559.925 36.5586C566.722 36.5586 573.321 34.1633 577.306 28.8641C578.733 29.0555 579.091 29.8758 579.091 32.4625C579.091 40.2774 573.889 51.7563 557.293 51.7563C547.179 51.7563 536.848 45.1938 529.489 38.325L529.421 38.3852C533.623 43.3672 540.605 48.0321 546.518 50.6844C543.869 52.1087 540.853 52.9106 537.756 53.0141C529.774 53.0141 522.081 47.9719 522.081 42.4868C522.081 36.1813 527.284 32.9657 535.334 32.9657C538.949 32.9553 542.531 33.5759 545.875 34.7922V34.6665C543.237 33.2172 539.035 32.4789 535.334 32.1454C530.348 31.7024 526.066 29.0555 526.066 23.5047C526.066 19.9774 527.92 16.8875 531.553 15.5641C535.112 17.8938 540.524 19.1571 544.942 19.1571C545.369 19.1571 545.795 19.0915 546.178 19.0915V18.9657C542.261 18.7797 538.343 17.768 536.49 16.6961C537.843 8.06098 545.894 3.1391 555.44 3.1391C563.132 3.1391 570.268 7.24067 570.268 16.0672C570.268 23.1274 564.998 30.6305 555.44 32.0797V33.0258C555.436 34.0805 555.364 35.134 555.223 36.1813C556.775 36.4313 558.348 36.5576 559.925 36.5586V36.5586ZM558.69 7.17504C556.626 9.36254 555.341 13.043 554.914 16.3188H555.057C557.269 13.7321 558.622 9.75629 558.832 7.17504H558.69Z"
|
|
70
|
+
fill="white"
|
|
71
|
+
/>
|
|
72
|
+
<path
|
|
73
|
+
class="a"
|
|
74
|
+
d="M588.563 42.3609C590.985 37.2531 592.623 30.8766 593.976 25.0195H593.834C589.916 38.2594 585.004 50.7227 578.165 50.7227C573.463 50.7227 570.899 44.8 570.899 37.9859C570.899 28.2789 576.101 17.1172 585.789 17.1172C589.706 17.1172 594.334 19.0094 599.679 23.6141L599.821 23.4828C598.251 21.7219 596.114 19.7039 594.118 18.632C595.902 17.6166 597.984 17.0896 600.105 17.1172C603.051 17.1405 605.887 18.1125 608.082 19.8516C605.518 24.0734 604.164 30.2422 604.164 38.0078C606.729 35.2734 608.44 31.7023 610.009 28.6781C611.146 28.8641 611.789 29.6844 611.789 31.2649C611.789 35.3609 607.087 50.7445 596.83 50.7445C591.412 50.7445 589.373 46.5227 588.563 42.3609ZM585.857 36.8922C588.063 33.1078 590.059 27.4969 591.628 22.9578C589.917 23.5867 587.779 28.5687 585.715 36.8922H585.857Z"
|
|
75
|
+
fill="white"
|
|
76
|
+
/>
|
|
77
|
+
<path
|
|
78
|
+
class="a"
|
|
79
|
+
d="M607.229 32.0797C607.229 20.5461 612.574 7.74377 623.825 7.74377C626.856 7.78471 629.805 8.6181 632.302 10.1391L625.963 25.0196C623.899 28.9953 620.834 38.3852 620.05 42.9297H620.266C623.757 30.6961 628.743 17.1391 635.935 17.1391C640.921 17.1391 644.202 23.7016 644.202 30.5047C644.202 40.1516 637.646 50.7391 628.385 50.7391C623.256 50.7391 618.27 47.4578 614.705 44.2477L614.563 44.3735C616.651 46.6993 619.184 48.6835 622.045 50.236C621.284 50.5437 620.46 50.7148 619.623 50.7391C610.998 50.7446 607.229 41.7266 607.229 32.0797ZM628.236 31.0735C626.031 34.8578 624.035 40.4688 622.466 45.0078C624.177 44.3789 626.315 39.3969 628.378 31.0735H628.236Z"
|
|
80
|
+
fill="white"
|
|
81
|
+
/>
|
|
82
|
+
<path
|
|
83
|
+
class="a"
|
|
84
|
+
d="M657.022 38.8281C661.156 38.8281 664.857 40.2774 664.857 43.4328C664.857 46.7742 660.532 52.0078 656.17 52.0078C651.808 52.0078 649.831 46.8344 649.831 43.8703C649.831 40.9063 651.777 38.8281 657.022 38.8281Z"
|
|
85
|
+
fill="white"
|
|
86
|
+
/>
|
|
87
|
+
</svg>
|
|
88
|
+
</a>
|
|
82
89
|
</div>
|
|
83
90
|
</header>
|
|
84
91
|
|
|
@@ -99,3 +106,4 @@ export let height;
|
|
|
99
106
|
fill: #fff;
|
|
100
107
|
}
|
|
101
108
|
</style>
|
|
109
|
+
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<script>import { CCLVividColor, ProgressBarHeight } from "./const/config";
|
|
2
|
+
export let value = 0;
|
|
3
|
+
export let maxValue = 100;
|
|
4
|
+
export let barColor = CCLVividColor.SODA_BLUE;
|
|
5
|
+
export let backgroundColor = "#e0e0e0";
|
|
6
|
+
export let height = ProgressBarHeight.DEFAULT;
|
|
7
|
+
export let containerWidth = "100%";
|
|
8
|
+
export let isSticky = false;
|
|
9
|
+
export let isRounded = true;
|
|
10
|
+
$: progress = value / maxValue * 100;
|
|
11
|
+
$: finalBarColor = barColor.startsWith("--") ? `var(${barColor})` : barColor;
|
|
12
|
+
$: finalBackgroundColor = backgroundColor.startsWith("--") ? `var(${backgroundColor})` : backgroundColor;
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<div
|
|
16
|
+
class="progress-bar-container"
|
|
17
|
+
class:sticky={isSticky}
|
|
18
|
+
class:rounded={isRounded}
|
|
19
|
+
style="background-color: {finalBackgroundColor}; width: {containerWidth}; height: {height};"
|
|
20
|
+
role="progressbar"
|
|
21
|
+
aria-valuenow={value}
|
|
22
|
+
aria-valuemin="0"
|
|
23
|
+
aria-valuemax={maxValue}
|
|
24
|
+
>
|
|
25
|
+
<div class="progress-bar" style="width: {progress}%; background-color: {finalBarColor};"></div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<style>
|
|
29
|
+
.progress-bar-container {
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
position: relative;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.progress-bar-container.sticky {
|
|
35
|
+
position: fixed;
|
|
36
|
+
top: 0;
|
|
37
|
+
left: 0;
|
|
38
|
+
z-index: 9999;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.progress-bar-container.rounded {
|
|
42
|
+
border-radius: 10px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.progress-bar {
|
|
46
|
+
height: 100%;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.progress-bar-container.rounded .progress-bar {
|
|
50
|
+
border-radius: 10px;
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import { ProgressBarHeight } from './const/config';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
value?: number;
|
|
6
|
+
maxValue?: number;
|
|
7
|
+
barColor?: string;
|
|
8
|
+
backgroundColor?: string;
|
|
9
|
+
height?: ProgressBarHeight;
|
|
10
|
+
containerWidth?: string;
|
|
11
|
+
isSticky?: boolean;
|
|
12
|
+
isRounded?: boolean;
|
|
13
|
+
};
|
|
14
|
+
events: {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
};
|
|
17
|
+
slots: {};
|
|
18
|
+
};
|
|
19
|
+
export type ProgressBarProps = typeof __propDef.props;
|
|
20
|
+
export type ProgressBarEvents = typeof __propDef.events;
|
|
21
|
+
export type ProgressBarSlots = typeof __propDef.slots;
|
|
22
|
+
export default class ProgressBar extends SvelteComponentTyped<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
|
|
23
|
+
}
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<script>import { CCLVividColor } from "./const/config";
|
|
2
|
+
export let size = "40px";
|
|
3
|
+
export let color = CCLVividColor.STRAWBERRY_PINK;
|
|
4
|
+
export let borderWidth = "4px";
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<div
|
|
8
|
+
class="spinner"
|
|
9
|
+
style="width: {size}; height: {size}; border-width: {borderWidth}; --spinner-color: var({color});"
|
|
10
|
+
role="status"
|
|
11
|
+
></div>
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
.spinner {
|
|
15
|
+
display: inline-block;
|
|
16
|
+
border-radius: 50%;
|
|
17
|
+
border-style: solid;
|
|
18
|
+
border-color: #f3f3f3;
|
|
19
|
+
border-top-color: var(--spinner-color);
|
|
20
|
+
animation: spin 1s linear infinite;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes spin {
|
|
24
|
+
0% {
|
|
25
|
+
transform: rotate(0deg);
|
|
26
|
+
}
|
|
27
|
+
100% {
|
|
28
|
+
transform: rotate(360deg);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
size?: string;
|
|
5
|
+
color?: string;
|
|
6
|
+
borderWidth?: string;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
[evt: string]: CustomEvent<any>;
|
|
10
|
+
};
|
|
11
|
+
slots: {};
|
|
12
|
+
};
|
|
13
|
+
export type SpinnerProps = typeof __propDef.props;
|
|
14
|
+
export type SpinnerEvents = typeof __propDef.events;
|
|
15
|
+
export type SpinnerSlots = typeof __propDef.slots;
|
|
16
|
+
export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<script>import { CCLVividColor } from "./const/config";
|
|
2
|
+
export let text;
|
|
3
|
+
export let position = "top";
|
|
4
|
+
export let disabled = false;
|
|
5
|
+
export let backgroundColor = CCLVividColor.WRAP_GREY;
|
|
6
|
+
const tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<div class="tooltip-trigger" data-testid="tooltip-trigger" tabindex="0" aria-describedby={!disabled ? tooltipId : undefined}>
|
|
10
|
+
<slot />
|
|
11
|
+
<span
|
|
12
|
+
{...{id: tooltipId}}
|
|
13
|
+
style:--tooltip-background-color={backgroundColor.startsWith('--') ? `var(${backgroundColor})` : backgroundColor}
|
|
14
|
+
class="tooltip-content"
|
|
15
|
+
data-testid="tooltip-content"
|
|
16
|
+
class:disabled
|
|
17
|
+
class:top={position === 'top'}
|
|
18
|
+
class:bottom={position === 'bottom'}
|
|
19
|
+
class:left={position === 'left'}
|
|
20
|
+
class:right={position === 'right'}
|
|
21
|
+
role="tooltip"
|
|
22
|
+
>
|
|
23
|
+
{text}
|
|
24
|
+
</span>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<style>
|
|
28
|
+
.tooltip-trigger {
|
|
29
|
+
position: relative;
|
|
30
|
+
display: inline-block;
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.tooltip-content {
|
|
35
|
+
position: absolute;
|
|
36
|
+
z-index: 10;
|
|
37
|
+
background-color: var(--tooltip-background-color);
|
|
38
|
+
color: white;
|
|
39
|
+
padding: 0.5em 1em;
|
|
40
|
+
border-radius: 4px;
|
|
41
|
+
font-size: 0.875rem;
|
|
42
|
+
line-height: 1.4;
|
|
43
|
+
white-space: nowrap;
|
|
44
|
+
/* デフォルトは非表示 */
|
|
45
|
+
visibility: hidden;
|
|
46
|
+
opacity: 0;
|
|
47
|
+
transition: opacity 0.2s, visibility 0.2s;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* disabledの場合は完全に非表示 */
|
|
51
|
+
.tooltip-content.disabled {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* ホバーまたはフォーカスで表示 */
|
|
56
|
+
.tooltip-trigger:hover .tooltip-content,
|
|
57
|
+
.tooltip-trigger:focus .tooltip-content {
|
|
58
|
+
visibility: visible;
|
|
59
|
+
opacity: 1;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* 吹き出しの矢印 */
|
|
63
|
+
.tooltip-content::after {
|
|
64
|
+
content: '';
|
|
65
|
+
position: absolute;
|
|
66
|
+
border-style: solid;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* --- ポジションごとのスタイル --- */
|
|
70
|
+
|
|
71
|
+
/* 上に表示 */
|
|
72
|
+
.tooltip-content.top {
|
|
73
|
+
bottom: 100%;
|
|
74
|
+
left: 50%;
|
|
75
|
+
transform: translateX(-50%);
|
|
76
|
+
margin-bottom: 8px;
|
|
77
|
+
}
|
|
78
|
+
.tooltip-content.top::after {
|
|
79
|
+
top: 100%;
|
|
80
|
+
left: 50%;
|
|
81
|
+
transform: translateX(-50%);
|
|
82
|
+
border-width: 5px;
|
|
83
|
+
border-color: var(--tooltip-background-color) transparent transparent transparent;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* 下に表示 */
|
|
87
|
+
.tooltip-content.bottom {
|
|
88
|
+
top: 100%;
|
|
89
|
+
left: 50%;
|
|
90
|
+
transform: translateX(-50%);
|
|
91
|
+
margin-top: 8px;
|
|
92
|
+
}
|
|
93
|
+
.tooltip-content.bottom::after {
|
|
94
|
+
bottom: 100%;
|
|
95
|
+
left: 50%;
|
|
96
|
+
transform: translateX(-50%);
|
|
97
|
+
border-width: 5px;
|
|
98
|
+
border-color: transparent transparent var(--tooltip-background-color) transparent;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* 左に表示 */
|
|
102
|
+
.tooltip-content.left {
|
|
103
|
+
right: 100%;
|
|
104
|
+
top: 50%;
|
|
105
|
+
transform: translateY(-50%);
|
|
106
|
+
margin-right: 8px;
|
|
107
|
+
}
|
|
108
|
+
.tooltip-content.left::after {
|
|
109
|
+
left: 100%;
|
|
110
|
+
top: 50%;
|
|
111
|
+
transform: translateY(-50%);
|
|
112
|
+
border-width: 5px;
|
|
113
|
+
border-color: transparent transparent transparent var(--tooltip-background-color);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* 右に表示 */
|
|
117
|
+
.tooltip-content.right {
|
|
118
|
+
left: 100%;
|
|
119
|
+
top: 50%;
|
|
120
|
+
transform: translateY(-50%);
|
|
121
|
+
margin-left: 8px;
|
|
122
|
+
}
|
|
123
|
+
.tooltip-content.right::after {
|
|
124
|
+
right: 100%;
|
|
125
|
+
top: 50%;
|
|
126
|
+
transform: translateY(-50%);
|
|
127
|
+
border-width: 5px;
|
|
128
|
+
border-color: transparent var(--tooltip-background-color) transparent transparent;
|
|
129
|
+
}
|
|
130
|
+
</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
text: string;
|
|
5
|
+
position?: "top" | "bottom" | "left" | "right";
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
backgroundColor?: string;
|
|
8
|
+
};
|
|
9
|
+
events: {
|
|
10
|
+
[evt: string]: CustomEvent<any>;
|
|
11
|
+
};
|
|
12
|
+
slots: {
|
|
13
|
+
default: {};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export type TooltipProps = typeof __propDef.props;
|
|
17
|
+
export type TooltipEvents = typeof __propDef.events;
|
|
18
|
+
export type TooltipSlots = typeof __propDef.slots;
|
|
19
|
+
export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
|
|
20
|
+
}
|
|
21
|
+
export {};
|
package/dist/const/config.d.ts
CHANGED
|
@@ -7,13 +7,18 @@ declare const CCLVividColor: {
|
|
|
7
7
|
WRAP_GREY: string;
|
|
8
8
|
};
|
|
9
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;
|
|
10
|
+
readonly PEACH_PINK: string;
|
|
11
|
+
readonly LEMON_YELLOW: string;
|
|
12
|
+
readonly SUGAR_BLUE: string;
|
|
13
|
+
readonly MATCHA_GREEN: string;
|
|
14
|
+
readonly AKEBI_PURPLE: string;
|
|
15
|
+
readonly CLOUD_GREY: string;
|
|
16
16
|
};
|
|
17
|
+
export declare enum ProgressBarHeight {
|
|
18
|
+
NARROW = "5px",
|
|
19
|
+
DEFAULT = "10px",
|
|
20
|
+
WIDE = "20px"
|
|
21
|
+
}
|
|
17
22
|
declare const HeaderHeight: {
|
|
18
23
|
WIDE: string;
|
|
19
24
|
NORMAL: string;
|
package/dist/const/config.js
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
var CCLVividColor = {
|
|
2
13
|
STRAWBERRY_PINK: '--strawberry-pink',
|
|
3
14
|
PINEAPPLE_YELLOW: '--pineapple-yellow',
|
|
@@ -6,7 +17,7 @@ var CCLVividColor = {
|
|
|
6
17
|
GRAPE_PURPLE: '--grape-purple',
|
|
7
18
|
WRAP_GREY: '--wrap-grey'
|
|
8
19
|
};
|
|
9
|
-
var
|
|
20
|
+
var CCLPastelColorBase = {
|
|
10
21
|
PEACH_PINK: '--peach-pink',
|
|
11
22
|
LEMON_YELLOW: '--lemon-yellow',
|
|
12
23
|
SUGAR_BLUE: '--sugar-blue',
|
|
@@ -14,6 +25,13 @@ var CCLPastelColor = {
|
|
|
14
25
|
AKEBI_PURPLE: '--akebi-purple',
|
|
15
26
|
CLOUD_GREY: '--cloud-grey'
|
|
16
27
|
};
|
|
28
|
+
var CCLPastelColor = __assign({}, CCLPastelColorBase);
|
|
29
|
+
export var ProgressBarHeight;
|
|
30
|
+
(function (ProgressBarHeight) {
|
|
31
|
+
ProgressBarHeight["NARROW"] = "5px";
|
|
32
|
+
ProgressBarHeight["DEFAULT"] = "10px";
|
|
33
|
+
ProgressBarHeight["WIDE"] = "20px";
|
|
34
|
+
})(ProgressBarHeight || (ProgressBarHeight = {}));
|
|
17
35
|
var HeaderHeight = {
|
|
18
36
|
WIDE: '--hd-wide',
|
|
19
37
|
NORMAL: '--hd-normal',
|
package/dist/index.d.ts
CHANGED
|
@@ -13,3 +13,10 @@ export { default as Toggle } from './Toggle.svelte';
|
|
|
13
13
|
export { default as FormGroup } from './FormGroup.svelte';
|
|
14
14
|
export { default as DatePicker } from './DatePicker.svelte';
|
|
15
15
|
export { CCLVividColor, CCLPastelColor, HeaderHeight } from './const/config';
|
|
16
|
+
export { default as Spinner } from './Spinner.svelte';
|
|
17
|
+
export { default as ProgressBar } from './ProgressBar.svelte';
|
|
18
|
+
export { default as Textarea } from './Textarea.svelte';
|
|
19
|
+
export { default as Alert } from './Alert.svelte';
|
|
20
|
+
export { default as Select } from './Select.svelte';
|
|
21
|
+
export { default as ToolTip } from './Tooltip.svelte';
|
|
22
|
+
export { default as Input } from './Input.svelte';
|
package/dist/index.js
CHANGED
|
@@ -14,3 +14,10 @@ export { default as Toggle } from './Toggle.svelte';
|
|
|
14
14
|
export { default as FormGroup } from './FormGroup.svelte';
|
|
15
15
|
export { default as DatePicker } from './DatePicker.svelte';
|
|
16
16
|
export { CCLVividColor, CCLPastelColor, HeaderHeight } from './const/config';
|
|
17
|
+
export { default as Spinner } from './Spinner.svelte';
|
|
18
|
+
export { default as ProgressBar } from './ProgressBar.svelte';
|
|
19
|
+
export { default as Textarea } from './Textarea.svelte';
|
|
20
|
+
export { default as Alert } from './Alert.svelte';
|
|
21
|
+
export { default as Select } from './Select.svelte';
|
|
22
|
+
export { default as ToolTip } from './Tooltip.svelte';
|
|
23
|
+
export { default as Input } from './Input.svelte';
|