cclkit4svelte 2.0.4 → 2.0.5

package/README.md

@@ -103,7 +103,7 @@ pnpm install cclkit4svelte
 
 ## About the development of this library
 
-The development of component libraries requires a Node.js environment with Version 20 or higher. Use npm as the package manager. Please check the `package.json` for detailed version information.
+The development of component libraries requires a Node.js environment with Version 20 or higher. Use pnpm as the package manager. Please check the `package.json` for detailed version information.
 
 We recommend [Volta](https://volta.sh/) for switching Node.js versions.
 

package/dist/Accordion.svelte

@@ -0,0 +1,39 @@
+<script>import { setContext } from "svelte";
+import { writable } from "svelte/store";
+export let multiple = false;
+import { ACCORDION_CONTEXT_KEY } from "./scripts/accordionContext";
+const openItems = writable(/* @__PURE__ */ new Set());
+function toggleItem(label) {
+  openItems.update((currentOpenItems) => {
+    const newOpenItems = new Set(currentOpenItems);
+    if (newOpenItems.has(label)) {
+      newOpenItems.delete(label);
+    } else {
+      if (!multiple) {
+        newOpenItems.clear();
+      }
+      newOpenItems.add(label);
+    }
+    return newOpenItems;
+  });
+}
+setContext(ACCORDION_CONTEXT_KEY, {
+  openItems,
+  toggleItem,
+  initiallyOpen: (label) => {
+    openItems.update((items) => items.add(label));
+  }
+});
+</script>
+
+<div class="accordion-wrapper" role="presentation">
+	<slot />
+</div>
+
+<style>
+	.accordion-wrapper {
+		border: 1px solid #e0e0e0;
+		border-radius: 8px;
+		overflow: hidden;
+	}
+</style>

package/dist/Accordion.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * 複数の項目を同時に開けるようにするかどうか
+             * @default false
+             * @type boolean
+             */ multiple?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/dist/AccordionItem.svelte

@@ -0,0 +1,96 @@
+<script>import { getContext, onMount } from "svelte";
+import { writable } from "svelte/store";
+export let label;
+export let isOpen = false;
+export let headerColor = void 0;
+export let contentColor = void 0;
+import { ACCORDION_CONTEXT_KEY } from "./scripts/accordionContext";
+const { openItems, toggleItem, initiallyOpen } = getContext(ACCORDION_CONTEXT_KEY);
+onMount(() => {
+  if (isOpen) {
+    initiallyOpen(label);
+  }
+});
+let isContentOpen = false;
+$: isContentOpen = $openItems.has(label);
+</script>
+
+<div
+	class="accordion-item"
+	style={`${headerColor ? `--header-bg-color: var(${headerColor});` : ''}${contentColor ? `--content-bg-color: var(${contentColor});` : ''}`}
+>
+	<h2 class="accordion-header">
+		<button
+			class="accordion-button"
+			aria-expanded={isContentOpen}
+			aria-controls={`accordion-panel-${label}`}
+			on:click={() => toggleItem(label)}
+		>
+			<span class="button-label">{label}</span>
+			<span class="accordion-icon" class:open={isContentOpen} aria-hidden="true">▼</span>
+		</button>
+	</h2>
+	{#if isContentOpen}
+		<div
+			class="accordion-content"
+			id={`accordion-panel-${label}`}
+			role="region"
+			aria-labelledby={`accordion-button-${label}`}
+		>
+			<div class="content-padding">
+				<slot />
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.accordion-item {
+		border-bottom: 1px solid #e0e0e0;
+	}
+
+	.accordion-item:last-child {
+		border-bottom: none;
+	}
+
+	.accordion-header {
+		margin: 0;
+	}
+
+	.accordion-button {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 16px 20px;
+		font-size: 1rem;
+		font-weight: 600;
+		color: #333;
+		background-color: var(--header-bg-color, #f9f9f9);
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		transition: filter 0.2s ease-in-out;
+	}
+
+	.accordion-button:hover {
+		filter: brightness(95%);
+	}
+
+	.accordion-icon {
+		transition: transform 0.2s ease-in-out;
+		transform: rotate(0deg);
+	}
+
+	.accordion-icon.open {
+		transform: rotate(180deg);
+	}
+
+	.accordion-content {
+		background-color: var(--content-bg-color, white);
+	}
+
+	.content-padding {
+		padding: 16px 20px;
+	}
+</style>

package/dist/AccordionItem.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * 項目のヘッダーとして常に表示されるテキスト
+             * @type string
+             */ label: string;
+        /**
+             * 項目の初期状態を開いた状態にするかどうか
+             * @default false
+             * @type boolean
+             */ isOpen?: boolean;
+        /**
+             * ヘッダーの背景色
+             * @type {string | undefined}
+             */ headerColor?: string | undefined;
+        /**
+             * コンテンツエリアの背景色
+             * @type {string | undefined}
+             */ contentColor?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type AccordionItemProps = typeof __propDef.props;
+export type AccordionItemEvents = typeof __propDef.events;
+export type AccordionItemSlots = typeof __propDef.slots;
+export default class AccordionItem extends SvelteComponent<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
+}
+export {};

package/dist/Alert.svelte

@@ -1,5 +1,4 @@
-<script>import "./const/variables.css";
-import { CCLVividColor } from "./const/config";
+<script>import { CCLVividColor } from "./const/config";
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
 export let message;

package/dist/Alert.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -28,10 +27,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type AlertProps = typeof __propDef.props;
 export type AlertEvents = typeof __propDef.events;
 export type AlertSlots = typeof __propDef.slots;
-export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
+export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
 }
 export {};

package/dist/BookCard.svelte

@@ -0,0 +1,96 @@
+<script>import Button from "./Button.svelte";
+export let title;
+export let coverImageUrl;
+export let altText;
+export let description;
+export let linkUrl = void 0;
+export let linkText = "\u8A73\u3057\u304F\u898B\u308B";
+export let borderColor = "--strawberry-pink";
+function handleLinkClick() {
+  if (linkUrl) {
+    window.open(linkUrl, "_blank", "noopener noreferrer");
+  }
+}
+</script>
+
+<div class="BookCardWrapper" style="--border-color: var({borderColor})">
+	<div class="BookCardImageWrapper">
+		<img class="BookCardImage" src={coverImageUrl} alt={altText} />
+	</div>
+	<div class="BookCardInfo">
+		<div class="BookCardTextWrapper">
+			<h2 class="BookCardTitle">{title}</h2>
+			<p class="BookCardDescription">{description}</p>
+		</div>
+		{#if linkUrl}
+			<div class="BookCardLinkWrapper">
+				<Button label={linkText} bgColor={borderColor} onClick={handleLinkClick} />
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.BookCardWrapper {
+		width: 300px;
+		display: flex;
+		flex-direction: column;
+		border-radius: 25px;
+		border: 5px solid var(--border-color);
+		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
+		background-color: #fff;
+		transition:
+			transform 0.2s ease-in-out,
+			box-shadow 0.2s ease-in-out;
+	}
+
+	.BookCardWrapper:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 14px 14px rgba(0, 0, 0, 0.2);
+	}
+
+	.BookCardImageWrapper {
+		width: 100%;
+		height: 400px;
+		overflow: hidden;
+		border-top-left-radius: 20px;
+		border-top-right-radius: 20px;
+	}
+
+	.BookCardImage {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.BookCardInfo {
+		padding: 20px;
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+	}
+
+	.BookCardTextWrapper {
+		flex-grow: 1;
+	}
+
+	.BookCardTitle {
+		color: var(--wrap-grey);
+		font-size: 1.2rem;
+		font-weight: bold;
+		margin: 0 0 10px 0;
+	}
+
+	.BookCardDescription {
+		color: var(--wrap-grey);
+		font-size: 0.9rem;
+		margin: 0;
+		overflow-wrap: break-word;
+	}
+
+	.BookCardLinkWrapper {
+		margin-top: 20px;
+		display: flex;
+		justify-content: center;
+	}
+</style>

package/dist/BookCard.svelte.d.ts

@@ -0,0 +1,47 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * 書籍のタイトル
+             * @type string
+             */ title: string;
+        /**
+             * 表紙画像のURL
+             * @type string
+             */ coverImageUrl: string;
+        /**
+             * 表紙画像のaltテキスト
+             * @type string
+             */ altText: string;
+        /**
+             * 書籍の短い説明文
+             * @type string
+             */ description: string;
+        /**
+             * 外部リンクのURL
+             * @type string | undefined
+             */ linkUrl?: string | undefined;
+        /**
+             * リンクボタンのテキスト
+             * @default 詳しく見る
+             * @type string
+             */ linkText?: string;
+        /**
+             * 枠線の色
+             * @default --strawberry-pink
+             * @type string
+             */ borderColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type BookCardProps = typeof __propDef.props;
+export type BookCardEvents = typeof __propDef.events;
+export type BookCardSlots = typeof __propDef.slots;
+export default class BookCard extends SvelteComponent<BookCardProps, BookCardEvents, BookCardSlots> {
+}
+export {};

package/dist/Button.svelte

@@ -1,6 +1,5 @@
-<script>import "./const/variables.css";
-export let bgColor;
-export let label;
+<script>export let bgColor = "--strawberry-pink";
+export let label = "Button";
 export let onClick = () => {
 };
 export let disabled = false;
@@ -8,6 +7,7 @@ function getButtonColor(bgColor2) {
   return `var(${bgColor2})`;
 }
 let buttonColor = getButtonColor(bgColor);
+$: buttonColor = getButtonColor(bgColor);
 </script>
 
 <!--汎用ボタン-->

package/dist/Button.svelte.d.ts

@@ -1,36 +1,34 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
+import type { ColorVar } from './const/config';
 declare const __propDef: {
     props: {
         /**
              * ボタンカラー、CCLVividColorの中から選ぶ
              * @default --strawberry-pink
-             * @type string
-             */ bgColor: string;
+             */ bgColor?: ColorVar;
         /**
              * ボタンの中に表示するテキスト
              * @default Button
-             * @type string
-             */ label: string;
+             */ label?: string;
         /**
              * クリックイベントハンドラ
              * @default () => {}
-             * @type {() => void}
              */ onClick?: () => void;
         /**
              * ボタンの非活性状態
              * @default false
-             * @type boolean
              */ disabled?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
 }
 export {};

package/dist/Card.svelte

@@ -1,5 +1,4 @@
 <script>import { CCLPastelColor, CCLVividColor } from "./const/config";
-import "./const/variables.css";
 export let borderColor;
 export let src;
 export let altText;

package/dist/Card.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -28,10 +27,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CardProps = typeof __propDef.props;
 export type CardEvents = typeof __propDef.events;
 export type CardSlots = typeof __propDef.slots;
-export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
 }
 export {};

package/dist/Carousel.svelte

@@ -1,7 +1,6 @@
 <script context="module"></script>
 
-<script>import "./const/variables.css";
-export let src;
+<script>export let src;
 export let csWidth;
 let currentIndex = 0;
 const nextSlide = () => {

package/dist/Carousel.svelte.d.ts

@@ -1,9 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 export interface Imgsrc {
     src: string;
     alt: string;
 }
-import './const/variables.css';
 declare const __propDef: {
     props: {
         /**
@@ -20,10 +19,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CarouselProps = typeof __propDef.props;
 export type CarouselEvents = typeof __propDef.events;
 export type CarouselSlots = typeof __propDef.slots;
-export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
+export default class Carousel extends SvelteComponent<CarouselProps, CarouselEvents, CarouselSlots> {
 }
 export {};

package/dist/ChangeHistory.svelte

@@ -1,5 +1,4 @@
-<script>import "./const/variables.css";
-import { CCLVividColor, CCLPastelColor } from "./const/config";
+<script>import { CCLVividColor, CCLPastelColor } from "./const/config";
 export let historyItems = [];
 export let height = void 0;
 export let defaultColor = CCLVividColor.SODA_BLUE;
@@ -21,7 +20,8 @@ $: defaultPastelColor = vividToPastelMap[defaultColor] || CCLPastelColor.SUGAR_B
 				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})"
+				style:--tag-bg-color="var({vividToPastelMap[item.color || defaultColor] ||
+					defaultPastelColor})"
 			>
 				<div class="timeline-marker"></div>
 				<div class="timeline-content">
@@ -154,4 +154,4 @@ $: defaultPastelColor = vividToPastelMap[defaultColor] || CCLPastelColor.SUGAR_B
 	.details li:last-child {
 		margin-bottom: 0;
 	}
-</style>
+</style>

package/dist/ChangeHistory.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -19,10 +18,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 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 default class ChangeHistory extends SvelteComponent<ChangeHistoryProps, ChangeHistoryEvents, ChangeHistorySlots> {
 }
 export {};

package/dist/Checkbox.svelte

@@ -1,5 +1,4 @@
-<script>import "./const/variables.css";
-import { CCLVividColor } from "./const/config";
+<script>import { CCLVividColor } from "./const/config";
 export let label = "";
 export let checked = false;
 export let color = CCLVividColor.SODA_BLUE;

package/dist/Checkbox.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -31,10 +30,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;
 export type CheckboxSlots = typeof __propDef.slots;
-export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
 }
 export {};

package/dist/CommonHeader.svelte

@@ -1,6 +1,5 @@
-<script>import "./const/variables.css";
-export let bgColor;
-export let height;
+<script>export let bgColor = "--strawberry-pink";
+export let height = "--hd-normal";
 export let logo;
 export let logoHeight;
 export let href;

package/dist/CommonHeader.svelte.d.ts

@@ -1,19 +1,15 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
+import type { ColorVar } from './const/config';
 declare const __propDef: {
     props: {
         /**
-             * ヘッダー背景色
-             * CCLVividColorの中から指定する
+             * ヘッダー背景色（CCLVividColor/CCLPastelColor の CSS 変数名）
              * @default --strawberry-pink
-             * @type string
-             */ bgColor: string;
+             */ bgColor?: ColorVar;
         /**
-             * ヘッダー高さ
-             * HeaderHeightの中から指定する
-             * @default --hd-nomal
-             * @type string
-             */ height: string;
+             * ヘッダー高さ（HeaderHeight の CSS 変数名）
+             * @default --hd-normal
+             */ height?: string;
         /**
              * ヘッダーに表示するロゴ
              * 基本的にsvg要素を読み込む
@@ -32,10 +28,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CommonHeaderProps = typeof __propDef.props;
 export type CommonHeaderEvents = typeof __propDef.events;
 export type CommonHeaderSlots = typeof __propDef.slots;
-export default class CommonHeader extends SvelteComponentTyped<CommonHeaderProps, CommonHeaderEvents, CommonHeaderSlots> {
+export default class CommonHeader extends SvelteComponent<CommonHeaderProps, CommonHeaderEvents, CommonHeaderSlots> {
 }
 export {};