cclkit4svelte 1.2.7 → 2.0.1

package/dist/Input.svelte

@@ -0,0 +1,107 @@
+<script>import "./const/variables.css";
+import { CCLVividColor } from "./const/config";
+export let type = "text";
+export let label = "";
+export let value = "";
+export let placeholder = "";
+export let borderColor = CCLVividColor.STRAWBERRY_PINK;
+export let disabled = false;
+export let id = "ccl-input";
+export let validationMessage = "";
+export let isValid = true;
+</script>
+
+<div class="input-wrapper">
+	{#if label}
+		<label for={id} class="input-label">{label}</label>
+	{/if}
+	{#if type === 'text'}
+		<input
+			{id}
+			type="text"
+			bind:value
+			{placeholder}
+			{disabled}
+			class="input-field"
+			class:invalid={!isValid}
+			style="--border-color: var({borderColor})"
+		/>
+	{:else if type === 'password'}
+		<input
+			{id}
+			type="password"
+			bind:value
+			{placeholder}
+			{disabled}
+			class="input-field"
+			class:invalid={!isValid}
+			style="--border-color: var({borderColor})"
+		/>
+	{:else if type === 'email'}
+		<input
+			{id}
+			type="email"
+			bind:value
+			{placeholder}
+			{disabled}
+			class="input-field"
+			class:invalid={!isValid}
+			style="--border-color: var({borderColor})"
+		/>
+	{:else if type === 'number'}
+		<input
+			{id}
+			type="number"
+			bind:value
+			{placeholder}
+			{disabled}
+			class="input-field"
+			class:invalid={!isValid}
+			style="--border-color: var({borderColor})"
+		/>
+	{/if}
+	{#if !isValid && validationMessage}
+		<span class="validation-message">{validationMessage}</span>
+	{/if}
+</div>
+
+<style>
+	.input-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.input-label {
+		font-size: 14px;
+		color: var(--wrap-grey);
+	}
+
+	.input-field {
+		padding: 10px 15px;
+		border-radius: 8px;
+		border: 2px solid var(--border-color);
+		font-size: 16px;
+		outline: none;
+		transition: border-color 0.2s;
+	}
+
+	.input-field:focus {
+		border-color: var(--ccl-focus-color, var(--soda-blue)); /* フォーカス時の色を定義 */
+	}
+
+	.input-field:disabled {
+		background-color: var(--cloud-grey);
+		cursor: not-allowed;
+		border-color: var(--cloud-grey);
+	}
+
+	.input-field.invalid {
+		border-color: var(--ccl-error-color, var(--strawberry-pink));
+	}
+
+	.validation-message {
+		font-size: 12px;
+		color: var(--ccl-error-color, var(--strawberry-pink));
+	}
+</style>

package/dist/Input.svelte.d.ts

@@ -0,0 +1,61 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * 入力フィールドのタイプ
+             * @default 'text'
+             * @type {'text' | 'password' | 'email' | 'number'}
+             */ type?: "text" | "password" | "email" | "number";
+        /**
+             * ラベルのテキスト
+             * @default ''
+             * @type string
+             */ label?: string;
+        /**
+             * 入力値
+             * @default ''
+             * @type string
+             */ value?: string;
+        /**
+             * プレースホルダーのテキスト
+             * @default ''
+             * @type string
+             */ placeholder?: string;
+        /**
+             * 枠線の色
+             * @default --strawberry-pink
+             * @type string
+             */ borderColor?: string;
+        /**
+             * 非活性状態にするか
+             * @default false
+             * @type boolean
+             */ disabled?: boolean;
+        /**
+             * コンポーネントのID
+             * @default 'ccl-input'
+             * @type string
+             */ id?: string;
+        /**
+             * バリデーションメッセージ
+             * @default ''
+             * @type string
+             */ validationMessage?: string;
+        /**
+             * バリデーションの状態
+             * @default true
+             * @type boolean
+             */ isValid?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/dist/ProgressBar.svelte

@@ -0,0 +1,52 @@
+<script>import { CCLVividColor, ProgressBarHeight } from "./const/config";
+export let value = 0;
+export let maxValue = 100;
+export let barColor = CCLVividColor.SODA_BLUE;
+export let backgroundColor = "#e0e0e0";
+export let height = ProgressBarHeight.DEFAULT;
+export let containerWidth = "100%";
+export let isSticky = false;
+export let isRounded = true;
+$: progress = value / maxValue * 100;
+$: finalBarColor = barColor.startsWith("--") ? `var(${barColor})` : barColor;
+$: finalBackgroundColor = backgroundColor.startsWith("--") ? `var(${backgroundColor})` : backgroundColor;
+</script>
+
+<div
+  class="progress-bar-container"
+  class:sticky={isSticky}
+  class:rounded={isRounded}
+  style="background-color: {finalBackgroundColor}; width: {containerWidth}; height: {height};"
+  role="progressbar"
+  aria-valuenow={value}
+  aria-valuemin="0"
+  aria-valuemax={maxValue}
+>
+  <div class="progress-bar" style="width: {progress}%; background-color: {finalBarColor};"></div>
+</div>
+
+<style>
+  .progress-bar-container {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .progress-bar-container.sticky {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+  }
+
+  .progress-bar-container.rounded {
+    border-radius: 10px;
+  }
+
+  .progress-bar {
+    height: 100%;
+  }
+
+  .progress-bar-container.rounded .progress-bar {
+    border-radius: 10px;
+  }
+</style>

package/dist/ProgressBar.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import { ProgressBarHeight } from './const/config';
+declare const __propDef: {
+    props: {
+        value?: number;
+        maxValue?: number;
+        barColor?: string;
+        backgroundColor?: string;
+        height?: ProgressBarHeight;
+        containerWidth?: string;
+        isSticky?: boolean;
+        isRounded?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ProgressBarProps = typeof __propDef.props;
+export type ProgressBarEvents = typeof __propDef.events;
+export type ProgressBarSlots = typeof __propDef.slots;
+export default class ProgressBar extends SvelteComponentTyped<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
+}
+export {};

package/dist/RadioButton.svelte

@@ -0,0 +1,70 @@
+<script>import "./const/variables.css";
+import { CCLVividColor } from "./const/config";
+export let value;
+export let group;
+export let label = "";
+export let color = CCLVividColor.SODA_BLUE;
+export let disabled = false;
+let circleColor = "white";
+</script>
+
+<label class="radioWrapper" class:disabled={disabled}>
+	<input type="radio" bind:group {value} {disabled} aria-label={label} />
+	<span class="customRadio" style="--bg-color: var({color});">
+		{#if group === value}
+			<span class="innerCircle" style="--circle-color: {circleColor};" />
+		{/if}
+	</span>
+	{#if label}
+		<span class="label">{label}</span>
+	{/if}
+</label>
+
+<style>
+	.radioWrapper {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		margin-bottom: 8px;
+		position: relative;
+	}
+	.radioWrapper.disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+	.radioWrapper input[type='radio'] {
+		border: 0;
+		clip: rect(0 0 0 0);
+		clip-path: inset(50%);
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: absolute;
+		white-space: nowrap;
+		width: 1px;
+	}
+	.customRadio {
+		width: 20px;
+		height: 20px;
+		border: 2px solid var(--bg-color);
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: background-color 0.2s;
+	}
+	.radioWrapper input[type='radio']:checked + .customRadio {
+		background-color: var(--bg-color);
+	}
+	.innerCircle {
+		width: 10px;
+		height: 10px;
+		background-color: var(--circle-color);
+		border-radius: 50%;
+	}
+	.label {
+		margin-left: 8px;
+		font-size: 16px;
+	}
+</style>

package/dist/RadioButton.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * ラジオボタンの選択値
+             * @type {any}
+             */ value: any;
+        /**
+             * どのラジオボタンが選択されているかを保持する変数
+             * @type {any}
+             */ group: any;
+        /**
+             * ラジオボタンのラベル
+             * @default ''
+             * @type string
+             */ label?: string;
+        /**
+             * ラジオボタンの色
+             * @default CCLVividColor.SODA_BLUE
+             * @type string
+             */ color?: string;
+        /**
+             * 非活性状態
+             * @default false
+             * @type boolean
+             */ disabled?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+export default class RadioButton extends SvelteComponentTyped<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+}
+export {};

package/dist/Select.svelte

@@ -0,0 +1,65 @@
+<script>import "./const/variables.css";
+import { CCLVividColor } from "./const/config";
+export let label = "";
+export let options = [];
+export let value = "";
+export let borderColor = CCLVividColor.STRAWBERRY_PINK;
+export let disabled = false;
+export let id = "ccl-select";
+</script>
+
+<div class="select-wrapper">
+	{#if label}
+		<label for={id} class="select-label">{label}</label>
+	{/if}
+	<select
+		{id}
+		bind:value
+		{disabled}
+		class="select-field"
+		style="--border-color: var({borderColor})"
+	>
+		{#each options as option}
+			<option value={option.value}>{option.label}</option>
+		{/each}
+	</select>
+</div>
+
+<style>
+	.select-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.select-label {
+		font-size: 14px;
+		color: var(--wrap-grey);
+	}
+
+	.select-field {
+		padding: 10px 15px;
+		border-radius: 8px;
+		border: 2px solid var(--border-color);
+		font-size: 16px;
+		outline: none;
+		transition: border-color 0.2s;
+		background-color: white; /* 背景色を白に設定 */
+		appearance: none; /* デフォルトの矢印を非表示 */
+		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4L146.2%20208.6%205.4%2069.4h281.6z%22%2F%3E%3C%2Fsvg%3E'); /* カスタム矢印 */
+		background-repeat: no-repeat;
+		background-position: right 10px center;
+		background-size: 12px;
+		cursor: pointer;
+	}
+
+	.select-field:focus {
+		border-color: var(--ccl-focus-color, var(--soda-blue)); /* フォーカス時の色を定義 */
+	}
+
+	.select-field:disabled {
+		background-color: var(--cloud-grey);
+		cursor: not-allowed;
+		border-color: var(--cloud-grey);
+	}
+</style>

package/dist/Select.svelte.d.ts

@@ -0,0 +1,48 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * ラベルのテキスト
+             * @default ''
+             * @type string
+             */ label?: string;
+        /**
+             * 選択肢のリスト
+             * @type SelectOption[]
+             */ options?: {
+            value: string;
+            label: string;
+        }[];
+        /**
+             * 選択された値
+             * @default ''
+             * @type string
+             */ value?: string;
+        /**
+             * 枠線の色
+             * @default --strawberry-pink
+             * @type string
+             */ borderColor?: string;
+        /**
+             * 非活性状態にするか
+             * @default false
+             * @type boolean
+             */ disabled?: boolean;
+        /**
+             * コンポーネントのID
+             * @default 'ccl-select'
+             * @type string
+             */ id?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/dist/Spinner.svelte

@@ -0,0 +1,31 @@
+<script>import { CCLVividColor } from "./const/config";
+export let size = "40px";
+export let color = CCLVividColor.STRAWBERRY_PINK;
+export let borderWidth = "4px";
+</script>
+
+<div
+  class="spinner"
+  style="width: {size}; height: {size}; border-width: {borderWidth}; --spinner-color: var({color});"
+  role="status"
+></div>
+
+<style>
+  .spinner {
+    display: inline-block;
+    border-radius: 50%;
+    border-style: solid;
+    border-color: #f3f3f3;
+    border-top-color: var(--spinner-color);
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/Spinner.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string;
+        color?: string;
+        borderWidth?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
+export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+}
+export {};

package/dist/Table.svelte

@@ -22,8 +22,7 @@ function getBodyColor(tableColor2) {
       return CCLPastelColor.PEACH_PINK;
   }
 }
-$:
-  bodyColor = getBodyColor(tableColor);
+$: bodyColor = getBodyColor(tableColor);
 </script>
 
 <!--汎用テーブル-->

package/dist/Textarea.svelte

@@ -0,0 +1,60 @@
+<script>import "./const/variables.css";
+import { CCLVividColor } from "./const/config";
+export let label = "";
+export let value = "";
+export let placeholder = "";
+export let borderColor = CCLVividColor.STRAWBERRY_PINK;
+export let disabled = false;
+export let id = "ccl-textarea";
+export let rows = 5;
+export let cols = 20;
+</script>
+
+<div class="textarea-wrapper">
+	{#if label}
+		<label for={id} class="textarea-label">{label}</label>
+	{/if}
+	<textarea
+		{id}
+		bind:value
+		{placeholder}
+		{disabled}
+		{rows}
+		{cols}
+		class="textarea-field"
+		style="--border-color: var({borderColor})"
+	/>
+</div>
+
+<style>
+	.textarea-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.textarea-label {
+		font-size: 14px;
+		color: var(--wrap-grey);
+	}
+
+	.textarea-field {
+		padding: 10px 15px;
+		border-radius: 8px;
+		border: 2px solid var(--border-color);
+		font-size: 16px;
+		outline: none;
+		transition: border-color 0.2s;
+		resize: vertical; /* 垂直方向のみリサイズ可能 */
+	}
+
+	.textarea-field:focus {
+		border-color: var(--ccl-focus-color, var(--soda-blue)); /* フォーカス時の色を定義 */
+	}
+
+	.textarea-field:disabled {
+		background-color: var(--cloud-grey);
+		cursor: not-allowed;
+		border-color: var(--cloud-grey);
+	}
+</style>

package/dist/Textarea.svelte.d.ts

@@ -0,0 +1,56 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * ラベルのテキスト
+             * @default ''
+             * @type string
+             */ label?: string;
+        /**
+             * 入力値
+             * @default ''
+             * @type string
+             */ value?: string;
+        /**
+             * プレースホルダーのテキスト
+             * @default ''
+             * @type string
+             */ placeholder?: string;
+        /**
+             * 枠線の色
+             * @default --strawberry-pink
+             * @type string
+             */ borderColor?: string;
+        /**
+             * 非活性状態にするか
+             * @default false
+             * @type boolean
+             */ disabled?: boolean;
+        /**
+             * コンポーネントのID
+             * @default 'ccl-textarea'
+             * @type string
+             */ id?: string;
+        /**
+             * 行数
+             * @default 5
+             * @type number
+             */ rows?: number;
+        /**
+             * 列数
+             * @default 20
+             * @type number
+             */ cols?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextareaProps = typeof __propDef.props;
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
+}
+export {};