cclkit4svelte 2.0.1 → 2.0.3

package/dist/Alert.svelte

@@ -46,51 +46,51 @@ function dismissAlert() {
 </script>
 
 <div
-    class="alert-wrapper"
-    class:dismissible={dismissible}
-    class:outline={outline}
-    style="background-color: var({computedBgColor}); color: {textColor}; border-color: var({computedBorderColor});"
+	class="alert-wrapper"
+	class:dismissible
+	class:outline
+	style="background-color: var({computedBgColor}); color: {textColor}; border-color: var({computedBorderColor});"
 >
-    <span class="alert-message">{message}</span>
-    {#if dismissible}
-        <button class="dismiss-button" on:click={dismissAlert} aria-label="Dismiss alert">
-            &times;
-        </button>
-    {/if}
+	<span class="alert-message">{message}</span>
+	{#if dismissible}
+		<button class="dismiss-button" on:click={dismissAlert} aria-label="Dismiss alert">
+			&times;
+		</button>
+	{/if}
 </div>
 
 <style>
-    .alert-wrapper {
-        padding: 12px 20px;
-        border-radius: 8px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 16px;
-        font-weight: 500;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        margin-bottom: 10px; /* Add some spacing when multiple alerts are shown */
-        border: 2px solid; /* Use solid border, color set by style attribute */
-    }
+	.alert-wrapper {
+		padding: 12px 20px;
+		border-radius: 8px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 16px;
+		font-weight: 500;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		margin-bottom: 10px; /* Add some spacing when multiple alerts are shown */
+		border: 2px solid; /* Use solid border, color set by style attribute */
+	}
 
-    .alert-message {
-        flex-grow: 1;
-    }
+	.alert-message {
+		flex-grow: 1;
+	}
 
-    .dismiss-button {
-        background: none;
-        border: none;
-        color: inherit; /* Inherit text color from parent */
-        font-size: 20px;
-        cursor: pointer;
-        margin-left: 15px;
-        padding: 0;
-        line-height: 1;
-        opacity: 0.7;
-        transition: opacity 0.2s ease-in-out;
-    }
+	.dismiss-button {
+		background: none;
+		border: none;
+		color: inherit; /* Inherit text color from parent */
+		font-size: 20px;
+		cursor: pointer;
+		margin-left: 15px;
+		padding: 0;
+		line-height: 1;
+		opacity: 0.7;
+		transition: opacity 0.2s ease-in-out;
+	}
 
-    .dismiss-button:hover {
-        opacity: 1;
-    }
-</style>
+	.dismiss-button:hover {
+		opacity: 1;
+	}
+</style>

package/dist/Button.svelte

@@ -39,4 +39,4 @@ let buttonColor = getButtonColor(bgColor);
 		font-size: 18px;
 		line-height: normal;
 	}
-</style>
+</style>

package/dist/Card.svelte

@@ -86,4 +86,4 @@ $: bodyColor = getBodyColor(borderColor);
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}
-</style>
+</style>

package/dist/Carousel.svelte

@@ -1,3 +1,5 @@
+<script context="module"></script>
+
 <script>import "./const/variables.css";
 export let src;
 export let csWidth;
@@ -12,7 +14,10 @@ const prevSlide = () => {
 };
 </script>
 
-<div class="carouselWrapper" style="--carousel-width: {csWidth}; --translate-x: calc(-{currentIndex} * 100%)">
+<div
+	class="carouselWrapper"
+	style="--carousel-width: {csWidth}; --translate-x: calc(-{currentIndex} * 100%)"
+>
 	<div class="slides">
 		{#each src as item, index}
 			<img class="slide" src={item.src} alt={item.alt} />
@@ -68,4 +73,4 @@ const prevSlide = () => {
 		justify-content: center;
 		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 	}
-</style>
+</style>

package/dist/Carousel.svelte.d.ts

@@ -1,4 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+export interface Imgsrc {
+    src: string;
+    alt: string;
+}
 import './const/variables.css';
 declare const __propDef: {
     props: {

package/dist/ChangeHistory.svelte

@@ -0,0 +1,157 @@
+<script>import "./const/variables.css";
+import { CCLVividColor, CCLPastelColor } from "./const/config";
+export let historyItems = [];
+export let height = void 0;
+export let defaultColor = CCLVividColor.SODA_BLUE;
+const vividToPastelMap = {
+  [CCLVividColor.STRAWBERRY_PINK]: CCLPastelColor.PEACH_PINK,
+  [CCLVividColor.PINEAPPLE_YELLOW]: CCLPastelColor.LEMON_YELLOW,
+  [CCLVividColor.SODA_BLUE]: CCLPastelColor.SUGAR_BLUE,
+  [CCLVividColor.MELON_GREEN]: CCLPastelColor.MATCHA_GREEN,
+  [CCLVividColor.GRAPE_PURPLE]: CCLPastelColor.AKEBI_PURPLE,
+  [CCLVividColor.WRAP_GREY]: CCLPastelColor.CLOUD_GREY
+};
+$: defaultPastelColor = vividToPastelMap[defaultColor] || CCLPastelColor.SUGAR_BLUE;
+</script>
+
+<div class="change-history-container" style={height ? `height: ${height};` : ''}>
+	<ul class="timeline">
+		{#each historyItems as item (item.date + item.title)}
+			<li
+				class="timeline-item"
+				style:--marker-color="var({item.color || defaultColor})"
+				style:--tag-color="var({item.color || defaultColor})"
+				style:--tag-bg-color="var({vividToPastelMap[item.color || defaultColor] || defaultPastelColor})"
+			>
+				<div class="timeline-marker"></div>
+				<div class="timeline-content">
+					<div class="header">
+						<time class="date" datetime={item.date}>{item.date}</time>
+						{#if item.tag}
+							<span class="tag">{item.tag}</span>
+						{/if}
+						{#if item.version}
+							<span class="version">{item.version}</span>
+						{/if}
+					</div>
+					<h3 class="title">{item.title}</h3>
+					{#if item.details && item.details.length > 0}
+						<ul class="details">
+							{#each item.details as detail}
+								<li>{detail}</li>
+							{/each}
+						</ul>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	.change-history-container {
+		font-family: sans-serif;
+		max-width: 800px;
+		margin: 0 auto;
+		padding: 20px;
+		overflow-y: auto;
+	}
+
+	.timeline {
+		list-style-type: none;
+		padding-left: 20px;
+		position: relative;
+	}
+
+	/* タイムラインの縦線 */
+	.timeline::before {
+		content: '';
+		position: absolute;
+		top: 5px;
+		left: 5px;
+		height: calc(100% - 5px);
+		width: 2px;
+		background-color: #dee2e6;
+	}
+
+	.timeline-item {
+		position: relative;
+		margin-bottom: 30px;
+		padding-left: 35px;
+	}
+
+	.timeline-item:last-child {
+		margin-bottom: 0;
+	}
+
+	.timeline-marker {
+		position: absolute;
+		top: 5px;
+		left: -2px;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background-color: var(--marker-color);
+		border: 3px solid #fff;
+		z-index: 1;
+	}
+
+	.timeline-content {
+		background-color: #ffffff;
+		padding: 15px 20px;
+		border-radius: 6px;
+		border: 1px solid #dee2e6;
+	}
+
+	.header {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		margin-bottom: 8px;
+	}
+
+	.date {
+		font-weight: bold;
+		color: #343a40;
+	}
+
+	.tag {
+		background-color: var(--tag-bg-color);
+		color: var(--tag-color);
+		padding: 3px 10px;
+		border-radius: 12px;
+		font-size: 0.85em;
+		font-weight: 600;
+	}
+
+	.version {
+		background-color: #f1f3f5; /* ニュートラルなグレー */
+		color: #495057;
+		padding: 3px 10px;
+		border-radius: 12px;
+		font-size: 0.85em;
+		font-weight: 600;
+	}
+
+	.title {
+		margin: 0 0 12px 0;
+		font-size: 1.15em;
+		font-weight: 600;
+		color: #212529;
+	}
+
+	.details {
+		list-style-type: disc;
+		padding-left: 20px;
+		margin: 0;
+		color: #495057;
+		line-height: 1.6;
+	}
+
+	.details li {
+		margin-bottom: 5px;
+	}
+	.details li:last-child {
+		margin-bottom: 0;
+	}
+</style>

package/dist/ChangeHistory.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * 表示する更新履歴の配列
+             * @type {HistoryItem[]}
+             */ historyItems?: HistoryItem[];
+        /**
+             * コンポーネントの高さ。'400px'や'50vh'のようにCSSの値を指定します。
+             * @type {string | undefined}
+             */ height?: string | undefined;
+        /**
+             * アイテムに色が指定されていない場合のデフォルトカラー。`CCLVividColor`の値を指定します。
+             * @type {string}
+             */ defaultColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChangeHistoryProps = typeof __propDef.props;
+export type ChangeHistoryEvents = typeof __propDef.events;
+export type ChangeHistorySlots = typeof __propDef.slots;
+export default class ChangeHistory extends SvelteComponentTyped<ChangeHistoryProps, ChangeHistoryEvents, ChangeHistorySlots> {
+}
+export {};

package/dist/Checkbox.svelte

@@ -6,7 +6,7 @@ export let color = CCLVividColor.SODA_BLUE;
 export let disabled = false;
 export let onChange = () => {
 };
-let checkMarkColor = "white";
+const checkMarkColor = "white";
 function handleChange(event) {
   if (disabled) {
     return;
@@ -17,9 +17,19 @@ function handleChange(event) {
 }
 </script>
 
-<label class="checkboxWrapper" class:disabled={disabled}>
-	<input type="checkbox" bind:checked on:change={handleChange} {disabled} aria-label={label} name={label} />
-	<span class="customCheckbox" style="--bg-color: var({color}); --check-mark-color: {checkMarkColor};">
+<label class="checkboxWrapper" class:disabled>
+	<input
+		type="checkbox"
+		bind:checked
+		on:change={handleChange}
+		{disabled}
+		aria-label={label}
+		name={label}
+	/>
+	<span
+		class="customCheckbox"
+		style="--bg-color: var({color}); --check-mark-color: {checkMarkColor};"
+	>
 		{#if checked}
 			<svg
 				class="checkMark"

package/dist/CommonHeader.svelte

@@ -3,13 +3,16 @@ export let bgColor;
 export let height;
 export let logo;
 export let logoHeight;
+export let href;
 </script>
 
 <!--汎用ヘッダー-->
 <header>
 	<div class="wrapper" style="--bgColor: var({bgColor}); --height: var({height})">
 		{#if logo}
-			<img style="height: {logoHeight}" src={logo} alt="SVG Image" />
+			<a {href}>
+				<img style="height: {logoHeight}" src={logo} alt="SVG Image" />
+			</a>
 		{:else}
 			<p>SVGファイルが指定されていません</p>
 		{/if}

package/dist/CommonHeader.svelte.d.ts

@@ -23,6 +23,10 @@ declare const __propDef: {
              * ロゴの高さ
              * @type string
              */ logoHeight: string;
+        /**
+             * ロゴのリンク先
+             * @type string
+             */ href: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/DatePicker.svelte

@@ -6,18 +6,20 @@ export let selectedDate = null;
 export let placeholder = "\u65E5\u4ED8\u3092\u9078\u629E";
 export let id = "date-picker-" + Math.random().toString(36).substring(2, 9);
 export let borderColor = "--strawberry-pink";
-export let disableBlurClose = false;
 let showCalendar = false;
 let currentMonth = selectedDate ? DateTime.fromJSDate(selectedDate) : DateTime.local();
 $: formattedDate = selectedDate ? DateTime.fromJSDate(selectedDate).toFormat("yyyy/MM/dd") : "";
-function toggleCalendar() {
-  showCalendar = !showCalendar;
+function openCalendar() {
+  showCalendar = true;
+}
+function closeCalendar() {
+  showCalendar = false;
 }
 function selectDay(day) {
   const newDate = currentMonth.set({ day }).toJSDate();
   selectedDate = newDate;
   dispatch("change", newDate);
-  showCalendar = false;
+  closeCalendar();
 }
 function prevMonth() {
   currentMonth = currentMonth.minus({ months: 1 });
@@ -29,27 +31,59 @@ function getDaysInMonth(date) {
   const startOfMonth = date.startOf("month");
   const endOfMonth = date.endOf("month");
   const days = [];
-  const startDayOfWeek = startOfMonth.weekday === 7 ? 0 : startOfMonth.weekday;
+  const startDayOfWeek = startOfMonth.weekday % 7;
   for (let i = 0; i < startDayOfWeek; i++) {
     days.push(null);
   }
   for (let i = 1; i <= endOfMonth.day; i++) {
     days.push(i);
   }
-  const remainingDays = 42 - days.length;
-  for (let i = 0; i < remainingDays; i++) {
+  while (days.length < 42) {
     days.push(null);
   }
   return days;
 }
+function clickOutside(node) {
+  const handleClick = (event) => {
+    if (node && !node.contains(event.target) && !event.defaultPrevented) {
+      node.dispatchEvent(new CustomEvent("click_outside"));
+    }
+  };
+  document.addEventListener("click", handleClick, true);
+  return {
+    destroy() {
+      document.removeEventListener("click", handleClick, true);
+    }
+  };
+}
 $: daysInMonth = getDaysInMonth(currentMonth);
 </script>
 
-<div class="datePickerWrapper" style="--selected-color: var({borderColor});">
-	<input type="text" {id} value={formattedDate} placeholder={placeholder} on:focus={toggleCalendar} on:blur={() => { if (!disableBlurClose) toggleCalendar(); }} readonly style="border-color: var({borderColor});" />
+<!--
+  - `use:clickOutside` でアクションを適用
+  - `on:click_outside` で外側クリック時の動作を定義
+-->
+<div
+		class="datePickerWrapper"
+		style="--selected-color: var({borderColor});"
+		use:clickOutside
+		on:click_outside={closeCalendar}
+>
+	<input
+			type="text"
+			{id}
+			value={formattedDate}
+			{placeholder}
+			on:focus={openCalendar}
+			readonly
+			style="border-color: var({borderColor});"
+	/>
 
 	{#if showCalendar}
-		<div class="calendarOverlay" on:mousedown|preventDefault={() => {}}>
+		<!--
+      - カレンダー内のクリックが外側クリックと誤認されないようにイベントの伝播を止める
+    -->
+		<div class="calendarOverlay" on:click|stopPropagation>
 			<div class="calendarHeader">
 				<button on:click={prevMonth} aria-label="前月へ">&lt;</button>
 				<span>{currentMonth.toFormat('yyyy年MM月')}</span>
@@ -67,10 +101,13 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 			<div class="daysGrid">
 				{#each daysInMonth as day}
 					<button
-						class:currentMonthDay={day !== null}
-						class:selected={selectedDate && day === DateTime.fromJSDate(selectedDate).day && currentMonth.month === DateTime.fromJSDate(selectedDate).month && currentMonth.year === DateTime.fromJSDate(selectedDate).year}
-						on:click={() => day && selectDay(day)}
-						disabled={day === null}
+							class:currentMonthDay={day !== null}
+							class:selected={selectedDate &&
+							day === DateTime.fromJSDate(selectedDate).day &&
+							currentMonth.month === DateTime.fromJSDate(selectedDate).month &&
+							currentMonth.year === DateTime.fromJSDate(selectedDate).year}
+							on:click={() => day && selectDay(day)}
+							disabled={day === null}
 					>
 						{day !== null ? day : ''}
 					</button>
@@ -81,6 +118,7 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 </div>
 
 <style>
+	/* スタイルは変更なし */
 	.datePickerWrapper {
 		position: relative;
 		display: inline-block;
@@ -91,6 +129,11 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 		border: 1px solid #ccc;
 		border-radius: 4px;
 		width: 120px;
+		cursor: pointer; /* クリックできることを示す */
+	}
+
+	.datePickerWrapper input:focus {
+		outline: none;
 	}
 
 	.calendarOverlay {
@@ -159,4 +202,4 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 		color: #ccc;
 		cursor: default;
 	}
-</style>
+</style>

package/dist/DatePicker.svelte.d.ts

@@ -22,14 +22,9 @@ declare const __propDef: {
              * @default --strawberry-pink
              * @type string
              */ borderColor?: string;
-        /**
-             * blurイベントでカレンダーを閉じないようにするか
-             * テスト用途で利用
-             * @default false
-             * @type boolean
-             */ disableBlurClose?: boolean;
     };
     events: {
+        click: MouseEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/Footer.svelte

@@ -22,4 +22,4 @@ const year = getYear();
 		color: #fff;
 		font-size: 9px;
 	}
-</style>
+</style>