@14ch/svelte-ui 0.0.1

package/dist/components/Slider.svelte

@@ -0,0 +1,473 @@
+<!-- Slider.svelte -->
+
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getStyleFromNumber } from '../utils/style';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// 基本プロパティ
+		value = $bindable(0),
+		name,
+		id = `slider-${Math.random().toString(36).substring(2, 15)}`,
+
+		// HTML属性系
+		min = 0,
+		max = 100,
+		step = 1,
+		inputAttributes,
+
+		// スタイル/レイアウト
+		width = null,
+		fullWidth = false,
+		thumbColor = null,
+		thumbWidth = null,
+		thumbHeight = null,
+		customStyle = '',
+
+		// 状態/動作
+		disabled = false,
+
+		// フォーカスイベント
+		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
+
+		// 入力イベント
+		onchange = () => {}, // No params for type inference
+		oninput = () => {}, // No params for type inference
+
+		// その他
+		...restProps
+	}: {
+		// 基本プロパティ
+		value?: number;
+		name?: string;
+		id?: string;
+
+		// HTML属性系
+		min?: number;
+		max?: number;
+		step?: number;
+		inputAttributes?: HTMLInputAttributes | undefined;
+
+		// スタイル/レイアウト
+		width?: string | number | null;
+		fullWidth?: boolean;
+		thumbColor?: string | null;
+		thumbWidth?: string | number | null;
+		thumbHeight?: string | number | null;
+		customStyle?: string;
+
+		// 状態/動作
+		disabled?: boolean;
+
+		// フォーカスイベント
+		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
+
+		// 入力イベント
+		onchange?: Function; // No params for type inference
+		oninput?: Function; // No params for type inference
+
+		// その他
+		[key: string]: any;
+	} = $props();
+
+	let ref: HTMLInputElement | undefined = $state();
+	let isFocused: boolean = $state(false);
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+
+	// フォーカスイベント
+	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 handleKeydown = (event: KeyboardEvent): void => {
+		if (disabled) return;
+		onkeydown(event);
+	};
+
+	const handleKeyup = (event: KeyboardEvent): void => {
+		if (disabled) return;
+		onkeyup(event);
+	};
+
+	// マウスイベント
+	const handleClick = (event: MouseEvent) => {
+		if (disabled) return;
+		onclick?.(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);
+	};
+
+	// 入力イベント
+	const handleChange = (event?: Event): void => {
+		if (disabled) return;
+		onchange?.(value);
+	};
+
+	const handleInput = (event?: Event): void => {
+		if (disabled) return;
+		oninput?.(value);
+	};
+
+	// パーセンテージ計算
+	const percentage = $derived(((value - min) / (max - min)) * 100);
+
+	// スタイル計算
+	const thumbColorStyle = $derived(
+		thumbColor ? `--svelte-ui-slider-thumb-background: ${thumbColor};` : ''
+	);
+
+	const thumbWidthStyle = $derived(
+		thumbWidth ? `--svelte-ui-slider-thumb-width: ${getStyleFromNumber(thumbWidth)};` : ''
+	);
+
+	const thumbHeightStyle = $derived(
+		thumbHeight ? `--svelte-ui-slider-thumb-height: ${getStyleFromNumber(thumbHeight)};` : ''
+	);
+
+	const sliderWidthStyle = $derived(width ? `width: ${getStyleFromNumber(width)};` : '');
+
+	const sliderHeightStyle = $derived(
+		thumbHeight
+			? `height: ${getStyleFromNumber(thumbHeight)};`
+			: 'height: var(--svelte-ui-slider-thumb-height);'
+	);
+</script>
+
+<div
+	class="slider"
+	class:slider--full-width={fullWidth}
+	class:slider--disabled={disabled}
+	class:slider--focused={isFocused}
+	data-testid="slider"
+	style="{sliderWidthStyle} {sliderHeightStyle} {thumbColorStyle} {thumbWidthStyle} {thumbHeightStyle} {customStyle}"
+>
+	<input
+		{id}
+		{name}
+		bind:this={ref}
+		bind:value
+		type="range"
+		{min}
+		{max}
+		{step}
+		{disabled}
+		class="slider__input"
+		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}
+		{...inputAttributes}
+		{...restProps}
+	/>
+</div>
+
+<style>
+	/* =============================================
+	 * 基本構造・レイアウト
+	 * ============================================= */
+	.slider {
+		display: flex;
+		align-items: center;
+		position: relative;
+		width: auto;
+		max-width: 100%;
+		box-sizing: border-box;
+		line-height: 0;
+	}
+
+	.slider--full-width {
+		width: 100%;
+	}
+
+	/* =============================================
+	 * 基本コンポーネント
+	 * ============================================= */
+	.slider__input {
+		width: 100%;
+		height: var(--svelte-ui-slider-track-height);
+		margin: 0;
+		background: var(--svelte-ui-slider-track-background);
+		border-radius: var(--svelte-ui-slider-track-border-radius);
+		outline: none;
+		-webkit-appearance: none;
+		appearance: none;
+		cursor: pointer;
+	}
+
+	/* Track styles */
+	.slider__input::-webkit-slider-track {
+		width: 100%;
+		height: var(--svelte-ui-slider-track-height);
+		background: var(--svelte-ui-slider-track-background);
+		border-radius: var(--svelte-ui-slider-track-border-radius);
+		border: none;
+	}
+
+	.slider__input::-moz-range-track {
+		width: 100%;
+		height: var(--svelte-ui-slider-track-height);
+		background: var(--svelte-ui-slider-track-background);
+		border-radius: var(--svelte-ui-slider-track-border-radius);
+		border: none;
+	}
+
+	/* Thumb styles */
+	.slider__input::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: var(--svelte-ui-slider-thumb-width);
+		height: var(--svelte-ui-slider-thumb-height);
+		background: var(--svelte-ui-slider-thumb-background);
+		border-radius: var(--svelte-ui-slider-thumb-border-radius);
+		border: var(--svelte-ui-slider-thumb-border);
+		cursor: pointer;
+		box-shadow: var(--svelte-ui-slider-thumb-shadow);
+	}
+
+	.slider__input::-moz-range-thumb {
+		width: var(--svelte-ui-slider-thumb-width);
+		height: var(--svelte-ui-slider-thumb-height);
+		background: var(--svelte-ui-slider-thumb-background);
+		border-radius: var(--svelte-ui-slider-thumb-border-radius);
+		border: var(--svelte-ui-slider-thumb-border);
+		cursor: pointer;
+		box-shadow: var(--svelte-ui-slider-thumb-shadow);
+	}
+
+	/* Focus styles - focus-visibleでキーボードナビゲーション時のみ */
+	.slider__input:focus-visible::-webkit-slider-thumb {
+		outline: var(--svelte-ui-focus-outline-outer);
+		outline-offset: var(--svelte-ui-focus-outline-offset-outer);
+	}
+
+	.slider__input:focus-visible::-moz-range-thumb {
+		outline: var(--svelte-ui-focus-outline-outer);
+		outline-offset: var(--svelte-ui-focus-outline-offset-outer);
+	}
+
+	/* =============================================
+	 * 状態管理（disabled等）
+	 * ============================================= */
+	.slider--disabled {
+		opacity: var(--svelte-ui-input-disabled-opacity);
+		pointer-events: none;
+	}
+
+	.slider--disabled .slider__input {
+		cursor: not-allowed;
+	}
+
+	.slider--disabled .slider__input::-webkit-slider-thumb {
+		cursor: not-allowed;
+	}
+
+	.slider--disabled .slider__input::-moz-range-thumb {
+		cursor: not-allowed;
+	}
+
+	/* =============================================
+	 * レスポンシブ対応
+	 * ============================================= */
+	@media (max-width: 768px) {
+		.slider__input::-webkit-slider-thumb {
+			width: var(--svelte-ui-slider-thumb-width-mobile);
+			height: var(--svelte-ui-slider-thumb-height-mobile);
+		}
+
+		.slider__input::-moz-range-thumb {
+			width: var(--svelte-ui-slider-thumb-width-mobile);
+			height: var(--svelte-ui-slider-thumb-height-mobile);
+		}
+
+		:global(.slider__custom-thumb) {
+			width: var(--svelte-ui-slider-custom-thumb-size-mobile);
+			height: var(--svelte-ui-slider-custom-thumb-size-mobile);
+		}
+	}
+</style>

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

@@ -0,0 +1,46 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    value?: number;
+    name?: string;
+    id?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    inputAttributes?: HTMLInputAttributes | undefined;
+    width?: string | number | null;
+    fullWidth?: boolean;
+    thumbColor?: string | null;
+    thumbWidth?: string | number | null;
+    thumbHeight?: string | number | null;
+    customStyle?: string;
+    disabled?: boolean;
+    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;
+    onchange?: Function;
+    oninput?: Function;
+    [key: string]: any;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/Snackbar.svelte

@@ -0,0 +1,124 @@
+<!-- Snackbar.svelte -->
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { snackbarManager, type SnackbarItem as SnackbarData } from '../utils/snackbar.svelte';
+	import SnackbarItem from './SnackbarItem.svelte';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+
+	let {
+		// スタイル/レイアウト
+		position = 'bottom',
+		maxVisible = 5,
+		variant = 'filled',
+
+		// 状態/動作
+		duration = 3000
+	}: {
+		// スタイル/レイアウト
+		position?: 'top' | 'bottom';
+		maxVisible?: number;
+		variant?: 'filled' | 'outlined';
+
+		// 状態/動作
+		duration?: number;
+	} = $props();
+
+	// =========================================================================
+	// Lifecycle
+	// =========================================================================
+
+	onMount(() => {
+		snackbarManager.setDefaults({
+			position,
+			maxVisible,
+			defaultDuration: duration,
+			defaultVariant: variant
+		});
+	});
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+
+	let topItems: SnackbarData[] = $derived(
+		snackbarManager.items.filter((item) => item.position === 'top')
+	);
+	let bottomItems: SnackbarData[] = $derived(
+		snackbarManager.items.filter((item) => item.position === 'bottom')
+	);
+</script>
+
+{#snippet snackbarItemSnippet(item: SnackbarData, index: number)}
+	<div class="snackbar__item" style="z-index: {1000 + index};">
+		<SnackbarItem
+			children={item.children}
+			message={item.message}
+			type={item.type}
+			actionLabel={item.actionLabel}
+			id={item.id}
+			variant={item.variant}
+			position={item.position}
+			iconVariant="outlined"
+			color={item.color}
+			textColor={item.textColor}
+			duration={item.duration}
+			closable={item.closable}
+			onAction={item.onAction}
+		/>
+	</div>
+{/snippet}
+
+<!-- Snackbar Top Items -->
+{#if topItems.length > 0}
+	<div class="snackbar snackbar--top" data-testid="snackbar">
+		{#each topItems as item, index (item.id)}
+			{@render snackbarItemSnippet(item, index)}
+		{/each}
+	</div>
+{/if}
+
+<!-- Snackbar Bottom Items -->
+{#if bottomItems.length > 0}
+	<div class="snackbar snackbar--bottom" data-testid="snackbar">
+		{#each bottomItems as item, index (item.id)}
+			{@render snackbarItemSnippet(item, index)}
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.snackbar {
+		position: fixed;
+		left: 50%;
+		transform: translateX(-50%);
+		width: max-content;
+		max-width: 90vw;
+		pointer-events: none;
+		z-index: var(--svelte-ui-snackbar-z-index, 1000);
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+
+	.snackbar--top {
+		top: calc(var(--svelte-ui-snackbar-offset) - var(--svelte-ui-snackbar-item-space));
+	}
+
+	.snackbar--bottom {
+		bottom: calc(var(--svelte-ui-snackbar-offset) - var(--svelte-ui-snackbar-item-space));
+		flex-direction: column-reverse;
+	}
+
+	.snackbar__item {
+		pointer-events: auto;
+		position: relative;
+	}
+
+	.snackbar__item :global(.snackbar-item__content) {
+		margin-bottom: 0;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    position?: 'top' | 'bottom';
+    maxVisible?: number;
+    variant?: 'filled' | 'outlined';
+    duration?: number;
+};
+declare const Snackbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Snackbar = ReturnType<typeof Snackbar>;
+export default Snackbar;