cclkit4svelte 1.2.7 → 2.0.0

package/README.md

@@ -28,14 +28,14 @@ CANDY CHUPS Lab.名義でWebサービスを開発したり、ハッカソンに
 
 ## 利用方法
 
-以下のコマンドでライブラリを導入して下さい。
+利用しているパッケージマネージャーのコマンドでライブラリを導入して下さい。
 
 ```zsh
-> yarn add cclkit4svelte
+yarn add cclkit4svelte
 
-or
+npm i cclkit4svelte
 
-> npm i cclkit4svelte
+pnpm install cclkit4svelte
 ```
 
 ## 本ライブラリの開発について
@@ -51,7 +51,7 @@ volta install node@20
 
 node -v
 #任意のNodeのバージョンが表示されればOK
-v18.16.1
+v20.11.1
 ```
 
 また、本ライブラリの開発には`pnpm`の導入が必要です。`npm`や`yarn`では開発準備ができないためご注意ください。voltaを使用している場合、pnpmもvoltaを使用して導入することができます。
@@ -94,11 +94,11 @@ Basically, it is not intended to be used by non-CCL members. It is planned to be
 Please install the library with the following command.
 
 ```zsh
-> yarn add cclkit4svelte
+yarn add cclkit4svelte
 
-or
+npm i cclkit4svelte
 
-> npm i cclkit4svelte
+pnpm install cclkit4svelte
 ```
 
 ## About the development of this library
@@ -114,7 +114,7 @@ volta install node@20
 
 node -v
 #Once the desired Node version is displayed, it is OK.
-v18.16.1
+v20.11.1
 ```
 
 Also, you need to install `pnpm` to develop this library. Note that `npm` and `yarn` do not prepare you for development; if you are using volta, pnpm can also be installed using volta.

package/dist/Alert.svelte

@@ -0,0 +1,96 @@
+<script>import "./const/variables.css";
+import { CCLVividColor } from "./const/config";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let message;
+export let type = "info";
+export let dismissible = false;
+export let outline = false;
+let baseColor;
+let computedBgColor;
+let computedBorderColor;
+let textColor;
+$: {
+  switch (type) {
+    case "success":
+      baseColor = CCLVividColor.MELON_GREEN;
+      break;
+    case "error":
+      baseColor = CCLVividColor.STRAWBERRY_PINK;
+      break;
+    case "warning":
+      baseColor = CCLVividColor.PINEAPPLE_YELLOW;
+      break;
+    case "info":
+      baseColor = CCLVividColor.SODA_BLUE;
+      break;
+    default:
+      baseColor = CCLVividColor.SODA_BLUE;
+  }
+  if (outline) {
+    computedBgColor = "transparent";
+    computedBorderColor = baseColor;
+    textColor = "var(--wrap-grey)";
+  } else {
+    computedBgColor = baseColor;
+    computedBorderColor = "transparent";
+    textColor = "white";
+    if (type === "warning") {
+      textColor = "white";
+    }
+  }
+}
+function dismissAlert() {
+  dispatch("dismiss");
+}
+</script>
+
+<div
+    class="alert-wrapper"
+    class:dismissible={dismissible}
+    class:outline={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}
+</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-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:hover {
+        opacity: 1;
+    }
+</style>

package/dist/Alert.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * The message to display in the alert.
+             * @type {string}
+             */ message: string;
+        /**
+             * The type of the alert, which determines its styling.
+             * @type {'success' | 'error' | 'warning' | 'info'}
+             * @default 'info'
+             */ type?: "success" | "error" | "warning" | "info";
+        /**
+             * Whether the alert can be dismissed by the user.
+             * @type {boolean}
+             * @default false
+             */ dismissible?: boolean;
+        /**
+             * Whether the alert should have an outline style.
+             * @type {boolean}
+             * @default false
+             */ outline?: boolean;
+    };
+    events: {
+        dismiss: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/dist/Button.svelte

@@ -1,6 +1,9 @@
 <script>import "./const/variables.css";
 export let bgColor;
 export let label;
+export let onClick = () => {
+};
+export let disabled = false;
 function getButtonColor(bgColor2) {
   return `var(${bgColor2})`;
 }
@@ -8,7 +11,7 @@ let buttonColor = getButtonColor(bgColor);
 </script>
 
 <!--汎用ボタン-->
-<button class="buttonWrapper" style="--bgColor: {buttonColor}">
+<button class="buttonWrapper" style="--bgColor: {buttonColor}" on:click={onClick} {disabled}>
 	<span class="btLabel">{label}</span>
 </button>
 
@@ -23,6 +26,10 @@ let buttonColor = getButtonColor(bgColor);
 	.buttonWrapper:hover {
 		cursor: pointer;
 	}
+	.buttonWrapper:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
 	.btLabel {
 		flex-direction: column;
 		justify-content: center;

package/dist/Button.svelte.d.ts

@@ -12,6 +12,16 @@ declare const __propDef: {
              * @default Button
              * @type string
              */ label: string;
+        /**
+             * クリックイベントハンドラ
+             * @default () => {}
+             * @type {() => void}
+             */ onClick?: () => void;
+        /**
+             * ボタンの非活性状態
+             * @default false
+             * @type boolean
+             */ disabled?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Card.svelte

@@ -23,8 +23,7 @@ function getBodyColor(borderColor2) {
       return CCLPastelColor.PEACH_PINK;
   }
 }
-$:
-  bodyColor = getBodyColor(borderColor);
+$: bodyColor = getBodyColor(borderColor);
 </script>
 
 <div class="CardWrapper" style="--border-color: var({borderColor})">

package/dist/Carousel.svelte

@@ -3,13 +3,11 @@ export let src;
 export let csWidth;
 let currentIndex = 0;
 const nextSlide = () => {
-  if (src.length === 0)
-    return;
+  if (src.length === 0) return;
   currentIndex = (currentIndex + 1) % src.length;
 };
 const prevSlide = () => {
-  if (src.length === 0)
-    return;
+  if (src.length === 0) return;
   currentIndex = (currentIndex - 1 + src.length) % src.length;
 };
 </script>

package/dist/Checkbox.svelte

@@ -0,0 +1,88 @@
+<script>import "./const/variables.css";
+import { CCLVividColor } from "./const/config";
+export let label = "";
+export let checked = false;
+export let color = CCLVividColor.SODA_BLUE;
+export let disabled = false;
+export let onChange = () => {
+};
+let checkMarkColor = "white";
+function handleChange(event) {
+  if (disabled) {
+    return;
+  }
+  const target = event.target;
+  checked = target.checked;
+  onChange();
+}
+</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};">
+		{#if checked}
+			<svg
+				class="checkMark"
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="3"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<polyline points="20 6 9 17 4 12" />
+			</svg>
+		{/if}
+	</span>
+	{#if label}
+		<span class="label">{label}</span>
+	{/if}
+</label>
+
+<style>
+	.checkboxWrapper {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		position: relative;
+	}
+	.checkboxWrapper.disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+	.checkboxWrapper input[type='checkbox'] {
+		border: 0;
+		clip: rect(0 0 0 0);
+		clip-path: inset(50%);
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: absolute;
+		white-space: nowrap;
+		width: 1px;
+	}
+	.customCheckbox {
+		width: 20px;
+		height: 20px;
+		border: 2px solid var(--bg-color);
+		border-radius: 4px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: background-color 0.2s;
+	}
+	.checkboxWrapper input[type='checkbox']:checked + .customCheckbox {
+		background-color: var(--bg-color);
+	}
+	.checkMark {
+		stroke: var(--check-mark-color);
+	}
+	.label {
+		margin-left: 8px;
+		font-size: 16px;
+	}
+</style>

package/dist/Checkbox.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * チェックボックスのラベル
+             * @default ''
+             * @type string
+             */ label?: string;
+        /**
+             * チェックボックスの状態
+             * @default false
+             * @type boolean
+             */ checked?: boolean;
+        /**
+             * チェックボックスの色
+             * @default '--soda-blue'
+             * @type string
+             */ color?: string;
+        /**
+             * 非活性状態
+             * @default false
+             * @type boolean
+             */ disabled?: boolean;
+        /**
+             * 状態が変更されたときのイベントハンドラ
+             * @type {() => void}
+             */ onChange?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/dist/DatePicker.svelte

@@ -0,0 +1,162 @@
+<script>import { createEventDispatcher } from "svelte";
+import { DateTime } from "luxon";
+import "./const/variables.css";
+const dispatch = createEventDispatcher();
+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 selectDay(day) {
+  const newDate = currentMonth.set({ day }).toJSDate();
+  selectedDate = newDate;
+  dispatch("change", newDate);
+  showCalendar = false;
+}
+function prevMonth() {
+  currentMonth = currentMonth.minus({ months: 1 });
+}
+function nextMonth() {
+  currentMonth = currentMonth.plus({ months: 1 });
+}
+function getDaysInMonth(date) {
+  const startOfMonth = date.startOf("month");
+  const endOfMonth = date.endOf("month");
+  const days = [];
+  const startDayOfWeek = startOfMonth.weekday === 7 ? 0 : startOfMonth.weekday;
+  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++) {
+    days.push(null);
+  }
+  return days;
+}
+$: 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});" />
+
+	{#if showCalendar}
+		<div class="calendarOverlay" on:mousedown|preventDefault={() => {}}>
+			<div class="calendarHeader">
+				<button on:click={prevMonth} aria-label="前月へ">&lt;</button>
+				<span>{currentMonth.toFormat('yyyy年MM月')}</span>
+				<button on:click={nextMonth} aria-label="次月へ">&gt;</button>
+			</div>
+			<div class="weekdays">
+				<span>日</span>
+				<span>月</span>
+				<span>火</span>
+				<span>水</span>
+				<span>木</span>
+				<span>金</span>
+				<span>土</span>
+			</div>
+			<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}
+					>
+						{day !== null ? day : ''}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.datePickerWrapper {
+		position: relative;
+		display: inline-block;
+	}
+
+	.datePickerWrapper input {
+		padding: 8px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		width: 120px;
+	}
+
+	.calendarOverlay {
+		position: absolute;
+		background-color: white;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		padding: 10px;
+		z-index: 1000;
+		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+		margin-top: 5px;
+	}
+
+	.calendarHeader {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 10px;
+	}
+
+	.calendarHeader button {
+		background: none;
+		border: none;
+		font-size: 1.2em;
+		cursor: pointer;
+		padding: 5px;
+	}
+
+	.weekdays,
+	.daysGrid {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		text-align: center;
+	}
+
+	.weekdays span {
+		font-weight: bold;
+		padding: 5px 0;
+	}
+
+	.daysGrid button {
+		background: none;
+		border: none;
+		padding: 0;
+		width: 30px;
+		height: 30px;
+		line-height: 30px;
+		cursor: pointer;
+		border-radius: 4px;
+	}
+
+	.daysGrid button:hover:not([disabled]) {
+		background-color: #eee;
+	}
+
+	.daysGrid button.currentMonthDay {
+		color: #333;
+	}
+
+	.daysGrid button.selected {
+		background-color: var(--selected-color);
+		color: white;
+	}
+
+	.daysGrid button[disabled] {
+		color: #ccc;
+		cursor: default;
+	}
+</style>

package/dist/DatePicker.svelte.d.ts

@@ -0,0 +1,44 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * 選択された日付
+             * @default null
+             * @type {Date | null}
+             */ selectedDate?: Date | null;
+        /**
+             * 日付ピッカーのプレースホルダーテキスト
+             * @default '日付を選択'
+             * @type string
+             */ placeholder?: string;
+        /**
+             * 日付ピッカーのID
+             * @default ''
+             * @type string
+             */ id?: string;
+        /**
+             * ボーダーカラー、CCLVividColorの中から選ぶ
+             * @default --strawberry-pink
+             * @type string
+             */ borderColor?: string;
+        /**
+             * blurイベントでカレンダーを閉じないようにするか
+             * テスト用途で利用
+             * @default false
+             * @type boolean
+             */ disableBlurClose?: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DatePickerProps = typeof __propDef.props;
+export type DatePickerEvents = typeof __propDef.events;
+export type DatePickerSlots = typeof __propDef.slots;
+export default class DatePicker extends SvelteComponentTyped<DatePickerProps, DatePickerEvents, DatePickerSlots> {
+}
+export {};

package/dist/FormGroup.svelte

@@ -0,0 +1,53 @@
+<script>export let label = "";
+export let helpText = "";
+export let errorMessage = "";
+export let forId = "";
+</script>
+
+<div class="formGroupWrapper">
+	{#if label}
+		<label for={forId} class="formLabel">{label}</label>
+	{/if}
+
+	<div class="formControl">
+		<slot />
+	</div>
+
+	{#if helpText && !errorMessage}
+		<p class="helpText">{helpText}</p>
+	{/if}
+
+	{#if errorMessage}
+		<p class="errorMessage">{errorMessage}</p>
+	{/if}
+</div>
+
+<style>
+	.formGroupWrapper {
+		margin-bottom: 16px;
+	}
+
+	.formLabel {
+		display: block;
+		font-size: 14px;
+		font-weight: bold;
+		margin-bottom: 4px;
+		color: #333;
+	}
+
+	.formControl {
+		/* スロットコンテンツのスタイルを調整するために必要に応じて追加 */
+	}
+
+	.helpText {
+		font-size: 12px;
+		color: #666;
+		margin-top: 4px;
+	}
+
+	.errorMessage {
+		font-size: 12px;
+		color: #d9534f; /* Bootstrap danger color */
+		margin-top: 4px;
+	}
+</style>

package/dist/FormGroup.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * フォーム要素のラベルテキスト
+             * @default ''
+             * @type string
+             */ label?: string;
+        /**
+             * ユーザーへの補足説明やヒント
+             * @default ''
+             * @type string
+             */ helpText?: string;
+        /**
+             * バリデーションエラーが発生した場合に表示するメッセージ
+             * @default ''
+             * @type string
+             */ errorMessage?: string;
+        /**
+             * ラベルと入力要素を関連付けるためのID
+             * @default ''
+             * @type string
+             */ forId?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FormGroupProps = typeof __propDef.props;
+export type FormGroupEvents = typeof __propDef.events;
+export type FormGroupSlots = typeof __propDef.slots;
+export default class FormGroup extends SvelteComponentTyped<FormGroupProps, FormGroupEvents, FormGroupSlots> {
+}
+export {};