@14ch/svelte-ui 0.0.1

package/dist/components/CheckboxGroup.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Option, OptionValue } from '../types/options';
+	import Checkbox from './Checkbox.svelte';
+	import { onMount } from 'svelte';
+	import { getStyleFromNumber } from '../utils/style';
+
+	let {
+		// 基本プロパティ
+		options,
+		value = $bindable(),
+
+		// スタイル/レイアウト
+		direction = 'vertical',
+		gap = '0',
+		wrap = false,
+		minOptionWidth,
+
+		// 入力イベント
+		onchange = () => {} // No params for type inference
+	}: {
+		// 基本プロパティ
+		options: Option[];
+		value: OptionValue[];
+
+		// スタイル/レイアウト
+		direction?: 'vertical' | 'horizontal';
+		gap?: string | number;
+		wrap?: boolean;
+		minOptionWidth?: string | number;
+
+		// 入力イベント
+		onchange?: (value: OptionValue[]) => void;
+	} = $props();
+	let localValues: Record<string, boolean> = $state({});
+
+	onMount(() => {
+		options.forEach((option) => {
+			localValues[option.value] = false;
+		});
+	});
+
+	const handleChange = () => {
+		value = options.filter((option) => localValues[option.value]).map((option) => option.value);
+		onchange(value);
+	};
+
+	const gapStyle = getStyleFromNumber(gap);
+
+	const minOptionWidthStyle = getStyleFromNumber(minOptionWidth);
+</script>
+
+<ul
+	class="checkbox-group"
+	style="--flex-direction: {direction === 'vertical' ? 'column' : 'row'};
+    --gap: {gapStyle};
+    --wrap: {wrap ? 'wrap' : 'none'};
+    --min-option-width: {minOptionWidthStyle}
+    "
+>
+	{#each options as option (option.value)}
+		{#if localValues[option.value] !== undefined}
+			<li class="checkbox-group__option">
+				<Checkbox bind:value={localValues[option.value]} onchange={handleChange}>
+					{option.label}
+				</Checkbox>
+			</li>
+		{/if}
+	{/each}
+</ul>
+
+<style>
+	.checkbox-group {
+		display: flex;
+		flex-direction: var(--flex-direction);
+		gap: var(--gap);
+		flex-wrap: var(--wrap);
+	}
+
+	.checkbox-group__option {
+		min-width: var(--min-option-width);
+	}
+</style>

package/dist/components/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Option, OptionValue } from '../types/options';
+type $$ComponentProps = {
+    options: Option[];
+    value: OptionValue[];
+    direction?: 'vertical' | 'horizontal';
+    gap?: string | number;
+    wrap?: boolean;
+    minOptionWidth?: string | number;
+    onchange?: (value: OptionValue[]) => void;
+};
+declare const CheckboxGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;

package/dist/components/ColorPicker.svelte

@@ -0,0 +1,496 @@
+<!-- ColorPicker.svelte -->
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import Input from './Input.svelte';
+	import { t } from '../i18n';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { IconVariant } from '../types/icon';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// 基本プロパティ
+		value = $bindable(''),
+
+		// HTML属性系
+		id = `colorpicker-${Math.random().toString(36).substring(2, 15)}`,
+		inputAttributes,
+
+		// スタイル/レイアウト
+		customStyle = '',
+		focusStyle = 'outline',
+		fullWidth = false,
+		rounded = false,
+
+		// 状態/動作
+		disabled = false,
+		readonly = false,
+		clearable = false,
+		clearButtonAriaLabel = t('input.clear'),
+		iconVariant = 'outlined',
+
+		// 入力イベント
+		onchange = () => {}, // No params for type inference
+		oninput = () => {}, // No params for type inference
+
+		// フォーカスイベント
+		onfocus = () => {}, // No params for type inference
+		onblur = () => {}, // No params for type inference
+
+		// キーボードイベント
+		onkeydown = () => {}, // No params for type inference
+		onkeyup = () => {}, // No params for type inference
+
+		// マウスイベント
+		onclick = () => {}, // No params for type inference
+		onmousedown = () => {}, // No params for type inference
+		onmouseup = () => {}, // No params for type inference
+		onmouseenter = () => {}, // No params for type inference
+		onmouseleave = () => {}, // No params for type inference
+		onmouseover = () => {}, // No params for type inference
+		onmouseout = () => {}, // No params for type inference
+		oncontextmenu = () => {}, // No params for type inference
+		onauxclick = () => {}, // No params for type inference
+
+		// タッチイベント
+		ontouchstart = () => {}, // No params for type inference
+		ontouchend = () => {}, // No params for type inference
+		ontouchmove = () => {}, // No params for type inference
+		ontouchcancel = () => {}, // No params for type inference
+
+		// ポインターイベント
+		onpointerdown = () => {}, // No params for type inference
+		onpointerup = () => {}, // No params for type inference
+		onpointerenter = () => {}, // No params for type inference
+		onpointerleave = () => {}, // No params for type inference
+		onpointermove = () => {}, // No params for type inference
+		onpointercancel = () => {}, // No params for type inference
+
+		// その他
+		...restProps
+	}: {
+		// 基本プロパティ
+		value?: string;
+
+		// HTML属性系
+		id?: string;
+		inputAttributes?: HTMLInputAttributes | undefined;
+
+		// スタイル/レイアウト
+		customStyle?: string;
+		focusStyle?: 'background' | 'outline' | 'none';
+		fullWidth?: boolean;
+		rounded?: boolean;
+
+		// 状態/動作
+		disabled?: boolean;
+		readonly?: boolean;
+		clearable?: boolean;
+		clearButtonAriaLabel?: string;
+		iconVariant?: IconVariant;
+
+		// 入力イベント
+		onchange?: (value: any) => void;
+		oninput?: (value: any) => void;
+
+		// フォーカスイベント
+		onfocus?: Function; // No params for type inference
+		onblur?: Function; // No params for type inference
+
+		// キーボードイベント
+		onkeydown?: Function; // No params for type inference
+		onkeyup?: Function; // No params for type inference
+
+		// マウスイベント
+		onclick?: Function; // No params for type inference
+		onmousedown?: Function; // No params for type inference
+		onmouseup?: Function; // No params for type inference
+		onmouseenter?: Function; // No params for type inference
+		onmouseleave?: Function; // No params for type inference
+		onmouseover?: Function; // No params for type inference
+		onmouseout?: Function; // No params for type inference
+		oncontextmenu?: Function; // No params for type inference
+		onauxclick?: Function; // No params for type inference
+
+		// タッチイベント
+		ontouchstart?: Function; // No params for type inference
+		ontouchend?: Function; // No params for type inference
+		ontouchmove?: Function; // No params for type inference
+		ontouchcancel?: Function; // No params for type inference
+
+		// ポインターイベント
+		onpointerdown?: Function; // No params for type inference
+		onpointerup?: Function; // No params for type inference
+		onpointerenter?: Function; // No params for type inference
+		onpointerleave?: Function; // No params for type inference
+		onpointermove?: Function; // No params for type inference
+		onpointercancel?: Function; // No params for type inference
+
+		// その他
+		[key: string]: any;
+	} = $props();
+
+	let localValue: string | undefined = $state(value);
+	let prevValue: string = $state('');
+	let isFocused: boolean = $state(false);
+
+	// =========================================================================
+
+	// $effect
+	// =========================================================================
+
+	$effect(() => {
+		value;
+		untrack(() => {
+			/* value を localValue に反映 */
+			localValue = value;
+
+			/* value が更新されたらonchangeを実行 */
+			handleChange();
+		});
+	});
+
+	$effect(() => {
+		localValue;
+		untrack(() => {
+			/* localValue がクリアされた時に value もクリア */
+			if (localValue === '' || localValue === undefined) {
+				value = '';
+				prevValue = '';
+			}
+		});
+	});
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+
+	const handleSubmit = (event: SubmitEvent) => {
+		event?.preventDefault?.();
+		handleChange();
+	};
+
+	const handleChange = (event?: Event): void => {
+		// 空文字列の場合はそのまま処理
+		if (localValue && !localValue.startsWith('#')) {
+			localValue = '#' + localValue;
+		}
+
+		if (value !== prevValue || localValue !== prevValue) {
+			value = localValue;
+			prevValue = value;
+			onchange(value);
+		}
+	};
+
+	const handleInput = (event?: Event): void => {
+		if (disabled) return;
+		oninput?.(localValue);
+	};
+
+	const handleFocus = (event: FocusEvent): void => {
+		if (disabled) return;
+		isFocused = true;
+		onfocus(event);
+	};
+
+	const handleBlur = (event: FocusEvent): void => {
+		if (disabled) return;
+		isFocused = false;
+		onblur(event);
+	};
+
+	const handleClick = (event: MouseEvent) => {
+		if (disabled) return;
+		onclick?.(event);
+	};
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (disabled) return;
+		onkeydown(event);
+	};
+
+	const handleKeyup = (event: KeyboardEvent) => {
+		if (disabled) return;
+		onkeyup(event);
+	};
+
+	// マウスイベント
+	const handleMouseDown = (event: MouseEvent) => {
+		if (disabled) return;
+		onmousedown?.(event);
+	};
+
+	const handleMouseUp = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseup?.(event);
+	};
+
+	const handleMouseEnter = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseenter?.(event);
+	};
+
+	const handleMouseLeave = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseleave?.(event);
+	};
+
+	const handleMouseOver = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseover?.(event);
+	};
+
+	const handleMouseOut = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseout?.(event);
+	};
+
+	const handleContextMenu = (event: MouseEvent) => {
+		if (disabled) return;
+		oncontextmenu?.(event);
+	};
+
+	const handleAuxClick = (event: MouseEvent) => {
+		if (disabled) return;
+		onauxclick?.(event);
+	};
+
+	// タッチイベント
+	const handleTouchStart = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchstart?.(event);
+	};
+
+	const handleTouchEnd = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchend?.(event);
+	};
+
+	const handleTouchMove = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchmove?.(event);
+	};
+
+	const handleTouchCancel = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchcancel?.(event);
+	};
+
+	// ポインターイベント
+	const handlePointerDown = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerdown?.(event);
+	};
+
+	const handlePointerUp = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerup?.(event);
+	};
+
+	const handlePointerEnter = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerenter?.(event);
+	};
+
+	const handlePointerLeave = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerleave?.(event);
+	};
+
+	const handlePointerMove = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointermove?.(event);
+	};
+
+	const handlePointerCancel = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointercancel?.(event);
+	};
+</script>
+
+<div
+	class="color-picker
+	focus-style-{focusStyle}"
+	class:color-picker--full-width={fullWidth}
+	class:color-picker--rounded={rounded}
+	class:color-picker--clearable={clearable}
+	class:color-picker--disabled={disabled}
+	class:color-picker--readonly={readonly}
+	class:color-picker--focused={isFocused}
+	data-testid="color-picker"
+	style={customStyle}
+>
+	<Input
+		id={id ? `${id}-input` : undefined}
+		bind:value={localValue}
+		type="text"
+		placeholder=""
+		{disabled}
+		{readonly}
+		{clearable}
+		{clearButtonAriaLabel}
+		{focusStyle}
+		{fullWidth}
+		{rounded}
+		customStyle={`padding-left: var(--svelte-ui-colorpicker-text-padding-left); ${customStyle}`}
+		{inputAttributes}
+		onchange={handleChange}
+		oninput={handleInput}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		onclick={handleClick}
+		onkeydown={handleKeydown}
+		onkeyup={handleKeyup}
+		onmousedown={handleMouseDown}
+		onmouseup={handleMouseUp}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		onmouseover={handleMouseOver}
+		onmouseout={handleMouseOut}
+		oncontextmenu={handleContextMenu}
+		onauxclick={handleAuxClick}
+		ontouchstart={handleTouchStart}
+		ontouchend={handleTouchEnd}
+		ontouchmove={handleTouchMove}
+		ontouchcancel={handleTouchCancel}
+		onpointerdown={handlePointerDown}
+		onpointerup={handlePointerUp}
+		onpointerenter={handlePointerEnter}
+		onpointerleave={handlePointerLeave}
+		onpointermove={handlePointerMove}
+		onpointercancel={handlePointerCancel}
+		onsubmit={handleSubmit}
+		{...restProps}
+	/>
+
+	<div class="color-picker__trigger">
+		<input
+			type="color"
+			bind:value
+			onchange={handleChange}
+			onfocus={handleFocus}
+			onblur={handleBlur}
+			onclick={handleClick}
+			onkeydown={handleKeydown}
+			{disabled}
+			class="color-picker__color-input"
+			{...inputAttributes}
+			{...restProps}
+		/>
+		<div class="color-picker__color-display" style="background-color: {value};"></div>
+	</div>
+</div>
+
+<style>
+	/* =============================================
+ * 基本構造・レイアウト
+ * ============================================= */
+	.color-picker {
+		display: inline-flex;
+		justify-content: stretch;
+		align-items: center;
+		position: relative;
+		width: auto;
+		max-width: 100%;
+	}
+
+	/* =============================================
+ * 基本コンポーネント
+ * ============================================= */
+
+	.color-picker__trigger {
+		position: absolute;
+		left: var(--svelte-ui-colorpicker-trigger-offset);
+		display: inline-block;
+		width: var(--svelte-ui-colorpicker-trigger-size);
+		height: var(--svelte-ui-colorpicker-trigger-size);
+		padding: 0;
+
+		&::before {
+			content: '';
+			display: block;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			border: var(--svelte-ui-colorpicker-trigger-border-style)
+				var(--svelte-ui-colorpicker-trigger-border-width)
+				var(--svelte-ui-colorpicker-trigger-border-color);
+			border-radius: var(--svelte-ui-colorpicker-trigger-border-radius);
+		}
+	}
+
+	.color-picker__color-input {
+		opacity: 0;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		z-index: 2;
+		pointer-events: auto;
+		cursor: pointer;
+	}
+
+	.color-picker__color-display {
+		display: block;
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+		position: relative;
+		border-radius: var(--svelte-ui-colorpicker-trigger-border-radius);
+		z-index: 1;
+	}
+
+	/* =============================================
+ * レイアウトバリエーション
+ * ============================================= */
+	.color-picker--full-width {
+		width: 100%;
+	}
+
+	/* =============================================
+ * 状態管理（disabled, focused等）
+ * ============================================= */
+	.color-picker--disabled {
+		opacity: var(--svelte-ui-input-disabled-opacity);
+		pointer-events: none;
+
+		.color-picker__color-input {
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+	}
+
+	/* =============================================
+ * 状態管理（readonly等）
+ * ============================================= */
+	.color-picker--readonly {
+		.color-picker__color-input,
+		.color-picker__trigger {
+			pointer-events: none;
+		}
+	}
+
+	/* =============================================
+ * デザインバリアント：default
+ * ============================================= */
+	.color-picker {
+		.color-picker__trigger::before {
+			border-color: var(--svelte-ui-colorpicker-trigger-border-color);
+		}
+	}
+
+	/* =============================================
+ * デザインバリアント：rounded
+ * ============================================= */
+	.color-picker--rounded {
+		.color-picker__color-display {
+			border-radius: var(--svelte-ui-border-radius-rounded);
+		}
+
+		.color-picker__trigger::before {
+			border-radius: var(--svelte-ui-border-radius-rounded);
+		}
+	}
+</style>

package/dist/components/ColorPicker.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { IconVariant } from '../types/icon';
+type $$ComponentProps = {
+    value?: string;
+    id?: string;
+    inputAttributes?: HTMLInputAttributes | undefined;
+    customStyle?: string;
+    focusStyle?: 'background' | 'outline' | 'none';
+    fullWidth?: boolean;
+    rounded?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    clearButtonAriaLabel?: string;
+    iconVariant?: IconVariant;
+    onchange?: (value: any) => void;
+    oninput?: (value: any) => void;
+    onfocus?: Function;
+    onblur?: Function;
+    onkeydown?: Function;
+    onkeyup?: Function;
+    onclick?: Function;
+    onmousedown?: Function;
+    onmouseup?: Function;
+    onmouseenter?: Function;
+    onmouseleave?: Function;
+    onmouseover?: Function;
+    onmouseout?: Function;
+    oncontextmenu?: Function;
+    onauxclick?: Function;
+    ontouchstart?: Function;
+    ontouchend?: Function;
+    ontouchmove?: Function;
+    ontouchcancel?: Function;
+    onpointerdown?: Function;
+    onpointerup?: Function;
+    onpointerenter?: Function;
+    onpointerleave?: Function;
+    onpointermove?: Function;
+    onpointercancel?: Function;
+    [key: string]: any;
+};
+declare const ColorPicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;