cclkit4svelte 1.2.7 → 2.0.0

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/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/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 {};

package/dist/Toggle.svelte

@@ -0,0 +1,76 @@
+<script>import "./const/variables.css";
+import { CCLVividColor } from "./const/config";
+export let checked = false;
+export let color = CCLVividColor.SODA_BLUE;
+export let disabled = false;
+export let onChange = () => {
+};
+function handleChange(event) {
+  if (disabled) {
+    return;
+  }
+  const target = event.target;
+  checked = target.checked;
+  onChange();
+}
+</script>
+
+<label class="switchWrapper" class:disabled={disabled}>
+	<input type="checkbox" {checked} on:change={handleChange} {disabled} />
+	<span class="slider" style="--bg-color: var({color});" />
+</label>
+
+<style>
+	.switchWrapper {
+		position: relative;
+		display: inline-block;
+		width: 50px;
+		height: 28px;
+		cursor: pointer;
+	}
+	.switchWrapper.disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.switchWrapper input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.slider {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #ccc;
+		transition: 0.4s;
+		border-radius: 28px;
+	}
+
+	.slider:before {
+		position: absolute;
+		content: '';
+		height: 20px;
+		width: 20px;
+		left: 4px;
+		bottom: 4px;
+		background-color: white;
+		transition: 0.4s;
+		border-radius: 50%;
+	}
+
+	input:checked + .slider {
+		background-color: var(--bg-color);
+	}
+
+	input:focus + .slider {
+		box-shadow: 0 0 1px var(--bg-color);
+	}
+
+	input:checked + .slider:before {
+		transform: translateX(22px);
+	}
+</style>

package/dist/Toggle.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * トグルスイッチの状態
+             * @default false
+             * @type boolean
+             */ checked?: boolean;
+        /**
+             * トグルスイッチの色
+             * @default CCLVividColor.SODA_BLUE
+             * @type string
+             */ color?: string;
+        /**
+             * 非活性状態
+             * @default false
+             * @type boolean
+             */ disabled?: boolean;
+        /**
+             * 状態が変更されたときのイベントハンドラ
+             * @type {() => void}
+             */ onChange?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
+}
+export {};

package/dist/const/config.js

@@ -1,4 +1,4 @@
-const CCLVividColor = {
+var CCLVividColor = {
     STRAWBERRY_PINK: '--strawberry-pink',
     PINEAPPLE_YELLOW: '--pineapple-yellow',
     SODA_BLUE: '--soda-blue',
@@ -6,7 +6,7 @@ const CCLVividColor = {
     GRAPE_PURPLE: '--grape-purple',
     WRAP_GREY: '--wrap-grey'
 };
-const CCLPastelColor = {
+var CCLPastelColor = {
     PEACH_PINK: '--peach-pink',
     LEMON_YELLOW: '--lemon-yellow',
     SUGAR_BLUE: '--sugar-blue',
@@ -14,7 +14,7 @@ const CCLPastelColor = {
     AKEBI_PURPLE: '--akebi-purple',
     CLOUD_GREY: '--cloud-grey'
 };
-const HeaderHeight = {
+var HeaderHeight = {
     WIDE: '--hd-wide',
     NORMAL: '--hd-normal',
     NALLOW: '--hd-nallow'

package/dist/index.d.ts

@@ -7,4 +7,9 @@ export { default as Card } from './Card.svelte';
 export { default as Table } from './Table.svelte';
 export { default as Carousel } from './Carousel.svelte';
 export { default as CommonHeader } from './CommonHeader.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as RadioButton } from './RadioButton.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
 export { CCLVividColor, CCLPastelColor, HeaderHeight } from './const/config';

package/dist/index.js

@@ -8,4 +8,9 @@ export { default as Card } from './Card.svelte';
 export { default as Table } from './Table.svelte';
 export { default as Carousel } from './Carousel.svelte';
 export { default as CommonHeader } from './CommonHeader.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as RadioButton } from './RadioButton.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
 export { CCLVividColor, CCLPastelColor, HeaderHeight } from './const/config';

package/dist/scripts/date.js

@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon';
-const getYear = () => {
+var getYear = function () {
     return DateTime.now().year;
 };
 export { getYear };