@14ch/svelte-ui 0.0.1

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

@@ -0,0 +1,64 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { IconVariant } from '../types/icon';
+type $$ComponentProps = {
+    name?: string;
+    value: string | undefined;
+    placeholder?: string;
+    id?: string | null;
+    tabindex?: number | null;
+    maxlength?: number | null;
+    autocomplete?: HTMLTextareaAttributes['autocomplete'];
+    wrap?: 'soft' | 'hard' | null;
+    spellcheck?: boolean | null;
+    autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
+    textareaAttributes?: HTMLTextareaAttributes | undefined;
+    rows?: number;
+    minHeight?: number | null;
+    maxHeight?: string | number | null;
+    inline?: boolean;
+    focusStyle?: 'background' | 'outline' | 'none';
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    width?: string | number | null;
+    rounded?: boolean;
+    customStyle?: string;
+    disabled?: boolean;
+    autoResize?: boolean;
+    resizable?: boolean;
+    clearable?: boolean;
+    clearButtonAriaLabel?: string;
+    readonly?: boolean;
+    required?: boolean;
+    iconVariant?: IconVariant;
+    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?: (value: any) => void;
+    oninput?: (value: any) => void;
+    [key: string]: any;
+};
+declare const Textarea: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/skeleton/Skeleton.svelte

@@ -0,0 +1,235 @@
+<!-- Skeleton.svelte -->
+
+<script lang="ts">
+	import SkeletonBox from './SkeletonBox.svelte';
+	import SkeletonText from './SkeletonText.svelte';
+	import SkeletonMedia from './SkeletonMedia.svelte';
+	import SkeletonAvatar from './SkeletonAvatar.svelte';
+	import SkeletonButton from './SkeletonButton.svelte';
+	import SkeletonHeading from './SkeletonHeading.svelte';
+	import { getStyleFromNumber } from '../../utils/style';
+	import type { SkeletonPatternConfig, SkeletonPresetConfig } from '../../types/skeleton';
+	import { isPresetPattern, isMediaPattern, isAvatarPattern } from '../../types/skeleton';
+
+	// =========================================================================
+	// Props
+	// =========================================================================
+
+	let {
+		// 基本プロパティ
+		patterns = [{ type: 'box' }] as SkeletonPatternConfig[],
+		repeat = 1,
+		repeatGap = '64px',
+		itemGap = '24px',
+		className = '',
+		customStyle = '',
+		animated = true
+	}: {
+		patterns?: SkeletonPatternConfig[];
+		repeat?: number;
+		repeatGap?: string | number;
+		itemGap?: string | number;
+		className?: string;
+		customStyle?: string;
+		animated?: boolean;
+	} = $props();
+
+	const DEFAULT_PATTERN_CONFIG = {
+		repeat: 1,
+		repeatDirection: 'vertical' as const,
+		repeatGap: '24px'
+	};
+
+	// プリセットパターンの定義
+	const PRESET_PATTERNS: Record<string, SkeletonPatternConfig[]> = {
+		'article-detail': [
+			{
+				type: 'box'
+			},
+			{ type: 'avatar', showName: true },
+			{
+				type: 'text',
+				lines: 5,
+				repeat: 1
+			}
+		],
+		'article-list': [
+			{
+				type: 'media',
+				layout: 'horizontal',
+				thumbnailConfig: { width: '160px', aspectRatio: '4/3' },
+				textConfig: { lines: 3 },
+				repeat: 3
+			}
+		],
+		'product-list': [
+			{
+				type: 'media',
+				layout: 'vertical',
+				thumbnailConfig: { width: '100%', aspectRatio: '1' },
+				textConfig: { lines: 2 },
+				repeat: 4,
+				repeatDirection: 'horizontal'
+			}
+		],
+		'video-list': [
+			{
+				type: 'media',
+				layout: 'vertical',
+				thumbnailConfig: { width: '100%', aspectRatio: '16/9' },
+				textConfig: { lines: 2 },
+				repeat: 3,
+				repeatDirection: 'horizontal'
+			}
+		],
+		'user-list': [
+			{
+				type: 'avatar',
+				showName: true
+			}
+		],
+		'button-group': [
+			{
+				type: 'button',
+				width: '120px',
+				repeat: 2,
+				repeatDirection: 'horizontal',
+				repeatGap: '16px'
+			}
+		]
+	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+
+	const containerClasses = $derived(['skeleton', className].filter(Boolean).join(' '));
+
+	// パターン設定をマージ
+	const mergedPatterns = $derived.by(() => {
+		return patterns
+			.map((pattern) => {
+				// 型ガードでプリセットパターンかどうかを判定
+				if (isPresetPattern(pattern)) {
+					const presetPatternsArray = PRESET_PATTERNS[pattern.type] || [];
+					// プリセットパターンを展開して、元のパターンの設定で上書き
+					const { type: _, ...patternWithoutType } = pattern;
+					const typedPatternWithoutType = patternWithoutType as Omit<SkeletonPresetConfig, 'type'>;
+					return presetPatternsArray.map((presetPattern) => {
+						// プリセットパターン内の各パターンに対して、ユーザー指定のプロパティを適用
+						const mergedPattern = {
+							...DEFAULT_PATTERN_CONFIG,
+							...presetPattern,
+							...typedPatternWithoutType
+						} as SkeletonPatternConfig;
+
+						// ネストしたオブジェクトのマージ処理（型ガードで型を絞り込む）
+						if (isMediaPattern(presetPattern) && 'thumbnailConfig' in typedPatternWithoutType) {
+							(mergedPattern as typeof presetPattern).thumbnailConfig = {
+								...presetPattern.thumbnailConfig,
+								...typedPatternWithoutType.thumbnailConfig
+							};
+						}
+
+						if (
+							(isMediaPattern(presetPattern) || isAvatarPattern(presetPattern)) &&
+							'textConfig' in typedPatternWithoutType
+						) {
+							(mergedPattern as typeof presetPattern).textConfig = {
+								...presetPattern.textConfig,
+								...typedPatternWithoutType.textConfig
+							};
+						}
+
+						if (isAvatarPattern(presetPattern) && 'avatarImageConfig' in typedPatternWithoutType) {
+							(mergedPattern as typeof presetPattern).avatarImageConfig = {
+								...presetPattern.avatarImageConfig,
+								...typedPatternWithoutType.avatarImageConfig
+							};
+						}
+
+						return mergedPattern;
+					});
+				}
+
+				// 通常のパターン
+				return {
+					...DEFAULT_PATTERN_CONFIG,
+					...pattern
+				};
+			})
+			.flat();
+	});
+
+	const repeatGapStyle = $derived(getStyleFromNumber(repeatGap));
+	const itemGapStyle = $derived(getStyleFromNumber(itemGap));
+</script>
+
+<div class={containerClasses} style={customStyle} data-testid="skeleton">
+	<div class="skeleton__items" style="gap: {repeatGapStyle};">
+		{#each Array(repeat) as _, index}
+			<div class="skeleton__item" style="gap: {itemGapStyle};">
+				{#each mergedPatterns as patternConfig}
+					{@const patternRepeat = patternConfig.repeat || 1}
+					{@const patternRepeatDirection = patternConfig.repeatDirection || 'vertical'}
+					{@const patternRepeatGap = getStyleFromNumber(patternConfig.repeatGap) || '8px'}
+					<div
+						class="skeleton__pattern"
+						class:skeleton__pattern--horizontal={patternRepeatDirection === 'horizontal'}
+						style="gap: {patternRepeatGap};"
+					>
+						{#each Array(patternRepeat) as _}
+							{#if patternConfig.type === 'box'}
+								{@const { type: _, width, height, radius, customStyle } = patternConfig}
+								<SkeletonBox {width} {height} {radius} {customStyle} {animated} />
+							{:else if patternConfig.type === 'heading'}
+								{@const { type: _, ...headingConfig } = patternConfig}
+								<SkeletonHeading {headingConfig} {animated} />
+							{:else if patternConfig.type === 'text'}
+								<SkeletonText textConfig={patternConfig} {animated} />
+							{:else if patternConfig.type === 'avatar'}
+								<div class="skeleton__user-list">
+									<SkeletonAvatar avatarConfig={patternConfig} {animated} />
+								</div>
+							{:else if patternConfig.type === 'media'}
+								<SkeletonMedia width={patternConfig.width} mediaConfig={patternConfig} {animated} />
+							{:else if patternConfig.type === 'button'}
+								<div class="skeleton__button">
+									<SkeletonButton buttonConfig={patternConfig} {animated} />
+								</div>
+							{/if}
+						{/each}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>.skeleton {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.skeleton__items {
+  display: flex;
+  flex-direction: column;
+}
+
+.skeleton__item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.skeleton__pattern {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.skeleton__pattern--horizontal {
+  flex-direction: row;
+  align-items: center;
+}</style>

package/dist/components/skeleton/Skeleton.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SkeletonPatternConfig } from '../../types/skeleton';
+type $$ComponentProps = {
+    patterns?: SkeletonPatternConfig[];
+    repeat?: number;
+    repeatGap?: string | number;
+    itemGap?: string | number;
+    className?: string;
+    customStyle?: string;
+    animated?: boolean;
+};
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/skeleton/SkeletonAvatar.svelte

@@ -0,0 +1,97 @@
+<!-- SkeletonAvatar.svelte -->
+
+<script lang="ts">
+	import SkeletonBox from './SkeletonBox.svelte';
+	import SkeletonText from './SkeletonText.svelte';
+	import { getStyleFromNumber } from '../../utils/style';
+	import type {
+		SkeletonAvatarConfig,
+		SkeletonTextConfig,
+		SkeletonAvatarImageConfig
+	} from '../../types/skeleton';
+
+	// =========================================================================
+	// Props
+	// =========================================================================
+
+	let {
+		// 基本プロパティ
+		avatarConfig = {},
+		animated = true
+	}: {
+		avatarConfig?: Partial<SkeletonAvatarConfig>;
+		animated?: boolean;
+	} = $props();
+
+	// デフォルト設定
+	const DEFAULT_AVATAR_IMAGE_CONFIG: SkeletonAvatarImageConfig = {
+		type: 'avatar-image',
+		size: '48px',
+		radius: 'var(--svelte-ui-skeleton-avatar-image-border-radius)',
+		customStyle: ''
+	};
+	const DEFAULT_TEXT_CONFIG: SkeletonTextConfig = {
+		type: 'text',
+		width: '160px',
+		lines: 1,
+		customStyle: ''
+	};
+	const DEFAULT_AVATAR_CONFIG: SkeletonAvatarConfig = {
+		type: 'avatar',
+		avatarImageConfig: DEFAULT_AVATAR_IMAGE_CONFIG,
+		textConfig: DEFAULT_TEXT_CONFIG
+	};
+
+	// マージされた設定
+	const mergedAvatarImageConfig = $derived({
+		...DEFAULT_AVATAR_IMAGE_CONFIG,
+		...(avatarConfig.avatarImageConfig || {})
+	});
+
+	const mergedTextConfig = $derived({
+		...DEFAULT_TEXT_CONFIG,
+		...(avatarConfig.textConfig || {})
+	});
+
+	const mergedAvatarConfig = $derived({
+		...DEFAULT_AVATAR_CONFIG,
+		...avatarConfig
+	});
+
+	const avatarImageSizeStyle = $derived(getStyleFromNumber(mergedAvatarImageConfig.size));
+	const nameWidthStyle = $derived(getStyleFromNumber(mergedTextConfig.width));
+</script>
+
+<div class="skeleton-avatar">
+	<div class="skeleton-avatar__avatar-image">
+		<SkeletonBox
+			width={avatarImageSizeStyle}
+			height={avatarImageSizeStyle}
+			radius="var(--svelte-ui-skeleton-avatar-image-border-radius)"
+			{animated}
+			customStyle={mergedAvatarImageConfig.customStyle}
+		/>
+	</div>
+	{#if mergedAvatarConfig.showName}
+		<div class="skeleton-avatar__text">
+			<SkeletonText
+				textConfig={{
+					width: nameWidthStyle,
+					lines: mergedTextConfig.lines
+				}}
+				{animated}
+			/>
+		</div>
+	{/if}
+</div>
+
+<style>.skeleton-avatar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.skeleton-avatar > * {
+  flex-shrink: 0;
+}</style>

package/dist/components/skeleton/SkeletonAvatar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SkeletonAvatarConfig } from '../../types/skeleton';
+type $$ComponentProps = {
+    avatarConfig?: Partial<SkeletonAvatarConfig>;
+    animated?: boolean;
+};
+declare const SkeletonAvatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonAvatar = ReturnType<typeof SkeletonAvatar>;
+export default SkeletonAvatar;

package/dist/components/skeleton/SkeletonBox.svelte

@@ -0,0 +1,105 @@
+<!-- SkeletonBox.svelte -->
+
+<script lang="ts">
+	import { getStyleFromNumber } from '../../utils/style';
+
+	// =========================================================================
+	// Props
+	// =========================================================================
+
+	let {
+		// 基本プロパティ
+		width,
+		height,
+		aspectRatio,
+		radius,
+		animated = true,
+		className = '',
+		customStyle = ''
+	}: {
+		width?: string | number;
+		height?: string | number;
+		aspectRatio?: string | number;
+		radius?: string | number;
+		animated?: boolean;
+		className?: string;
+		customStyle?: string;
+	} = $props();
+
+	// =========================================================================
+	// Constants
+	// =========================================================================
+
+	const DEFAULT_BOX_CONFIG = {
+		width: '100%',
+		height: '240px',
+		radius: 'var(--svelte-ui-skeleton-box-border-radius, 8px)'
+	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+
+	const containerClasses = $derived(
+		['skeleton-box', animated && 'skeleton-box--animated', className].filter(Boolean).join(' ')
+	);
+
+	const mergedConfig = $derived({
+		...DEFAULT_BOX_CONFIG,
+		width: width ?? DEFAULT_BOX_CONFIG.width,
+		height: height ?? DEFAULT_BOX_CONFIG.height,
+		radius: radius ?? DEFAULT_BOX_CONFIG.radius
+	});
+
+	const widthStyle = $derived(getStyleFromNumber(mergedConfig.width));
+	const heightStyle = $derived(getStyleFromNumber(mergedConfig.height));
+	const aspectRatioStyle = $derived(aspectRatio ? getStyleFromNumber(aspectRatio) : '');
+	const radiusStyle = $derived(getStyleFromNumber(mergedConfig.radius));
+
+	// heightとaspectRatioの優先順位を制御
+	const finalHeightStyle = $derived(
+		height ? heightStyle : aspectRatio ? '' : getStyleFromNumber(mergedConfig.height)
+	);
+	const finalAspectRatioStyle = $derived(height ? '' : aspectRatio ? aspectRatioStyle : '');
+</script>
+
+<div
+	class={containerClasses}
+	style="width: {widthStyle}; {finalHeightStyle
+		? `height: ${finalHeightStyle};`
+		: ''} {finalAspectRatioStyle
+		? `aspect-ratio: ${finalAspectRatioStyle};`
+		: ''} border-radius: {radiusStyle}; {customStyle}"
+>
+	<div class="skeleton-box__content"></div>
+</div>
+
+<style>.skeleton-box {
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+.skeleton-box--animated .skeleton-box__content {
+  animation: skeleton-pulse 4s infinite;
+}
+
+.skeleton-box__content {
+  width: 100%;
+  height: 100%;
+  background-color: var(--svelte-ui-skeleton-bg-color, #e5e7eb);
+  display: block;
+}
+
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 1;
+    animation-timing-function: ease-in-out;
+  }
+  50% {
+    opacity: 0.5;
+    animation-timing-function: ease-in-out;
+  }
+  100% {
+    opacity: 1;
+  }
+}</style>

package/dist/components/skeleton/SkeletonBox.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    width?: string | number;
+    height?: string | number;
+    aspectRatio?: string | number;
+    radius?: string | number;
+    animated?: boolean;
+    className?: string;
+    customStyle?: string;
+};
+declare const SkeletonBox: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonBox = ReturnType<typeof SkeletonBox>;
+export default SkeletonBox;

package/dist/components/skeleton/SkeletonButton.svelte

@@ -0,0 +1,71 @@
+<!-- SkeletonButton.svelte -->
+
+<script lang="ts">
+	import SkeletonBox from './SkeletonBox.svelte';
+	import { getStyleFromNumber } from '../../utils/style';
+	import type { SkeletonButtonConfig } from '../../types/skeleton';
+
+	let {
+		buttonConfig = {},
+		animated = true
+	}: {
+		buttonConfig?: Partial<SkeletonButtonConfig>;
+		animated?: boolean;
+	} = $props();
+
+	// デフォルト設定
+	const DEFAULT_BUTTON_CONFIG: SkeletonButtonConfig = {
+		type: 'button',
+		width: '120px',
+		height: '36px',
+		radius: 'var(--svelte-ui-skeleton-button-border-radius)',
+		align: 'left',
+		customStyle: ''
+	};
+
+	// マージされた設定
+	const mergedButtonConfig = $derived({
+		...DEFAULT_BUTTON_CONFIG,
+		...buttonConfig
+	});
+
+	const widthStyle = $derived(getStyleFromNumber(mergedButtonConfig.width));
+	const heightStyle = $derived(getStyleFromNumber(mergedButtonConfig.height));
+	const radiusStyle = $derived(
+		typeof mergedButtonConfig.radius === 'number'
+			? `${mergedButtonConfig.radius}px`
+			: mergedButtonConfig.radius
+	);
+
+	// alignに応じたCSSクラスを生成
+	const alignClass = $derived(`skeleton-button--align-${mergedButtonConfig.align}`);
+</script>
+
+<div class="skeleton-button {alignClass}">
+	<SkeletonBox
+		width={widthStyle}
+		height={heightStyle}
+		radius={radiusStyle}
+		{animated}
+		customStyle={mergedButtonConfig.customStyle}
+	/>
+</div>
+
+<style>
+	.skeleton-button {
+		display: flex;
+		width: 100%;
+	}
+
+	.skeleton-button--align-left {
+		justify-content: flex-start;
+	}
+
+	.skeleton-button--align-center {
+		justify-content: center;
+	}
+
+	.skeleton-button--align-right {
+		justify-content: flex-end;
+	}
+</style>

package/dist/components/skeleton/SkeletonButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SkeletonButtonConfig } from '../../types/skeleton';
+type $$ComponentProps = {
+    buttonConfig?: Partial<SkeletonButtonConfig>;
+    animated?: boolean;
+};
+declare const SkeletonButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonButton = ReturnType<typeof SkeletonButton>;
+export default SkeletonButton;

package/dist/components/skeleton/SkeletonHeading.svelte

@@ -0,0 +1,49 @@
+<!-- SkeletonHeading.svelte -->
+
+<script lang="ts">
+	import SkeletonText from './SkeletonText.svelte';
+	import { getStyleFromNumber } from '../../utils/style';
+	import type { SkeletonHeadingConfig } from '../../types/skeleton';
+
+	// =========================================================================
+	// Props
+	// =========================================================================
+
+	let {
+		headingConfig = {},
+		animated = true
+	}: {
+		headingConfig?: Partial<SkeletonHeadingConfig>;
+		animated?: boolean;
+	} = $props();
+
+	// デフォルト設定
+	const DEFAULT_HEADING_CONFIG: SkeletonHeadingConfig = {
+		type: 'heading',
+		width: '50%',
+		fontSize: '2rem',
+		customStyle: ''
+	};
+
+	// マージされた設定
+	const mergedHeadingConfig = $derived({
+		...DEFAULT_HEADING_CONFIG,
+		...headingConfig
+	});
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+
+	const widthStyle = $derived(getStyleFromNumber(mergedHeadingConfig.width));
+	const fontSizeStyle = $derived(getStyleFromNumber(mergedHeadingConfig.fontSize));
+</script>
+
+<div class="skeleton-heading" style="font-size: {fontSizeStyle}; {mergedHeadingConfig.customStyle}">
+	<SkeletonText textConfig={{ width: widthStyle, fontSize: fontSizeStyle }} {animated} />
+</div>
+
+<style>.skeleton-heading {
+  display: block;
+  width: 100%;
+}</style>

package/dist/components/skeleton/SkeletonHeading.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SkeletonHeadingConfig } from '../../types/skeleton';
+type $$ComponentProps = {
+    headingConfig?: Partial<SkeletonHeadingConfig>;
+    animated?: boolean;
+};
+declare const SkeletonHeading: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonHeading = ReturnType<typeof SkeletonHeading>;
+export default SkeletonHeading;