cclkit4svelte 2.0.6 → 2.0.7

package/dist/Accordion.svelte

@@ -1,39 +1,50 @@
-<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();
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+
+  /**
+   * 複数の項目を同時に開けるようにするかどうか
+   * @default false
+   * @type boolean
+   */
+  export let multiple: boolean = false;
+
+  import { ACCORDION_CONTEXT_KEY } from './scripts/accordionContext';
+
+  const openItems = writable<Set<string>>(new Set());
+
+  function toggleItem(label: string) {
+    openItems.update((currentOpenItems) => {
+      const newOpenItems = new Set(currentOpenItems);
+      if (newOpenItems.has(label)) {
+        newOpenItems.delete(label);
+      } else {
+        if (!multiple) {
+          newOpenItems.clear();
+        }
+        newOpenItems.add(label);
       }
-      newOpenItems.add(label);
+      return newOpenItems;
+    });
+  }
+
+  setContext(ACCORDION_CONTEXT_KEY, {
+    openItems,
+    toggleItem,
+    initiallyOpen: (label: string) => {
+      openItems.update((items) => items.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 />
+  <slot />
 </div>
 
 <style>
-	.accordion-wrapper {
-		border: 1px solid #e0e0e0;
-		border-radius: 8px;
-		overflow: hidden;
-	}
+  .accordion-wrapper {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+  }
 </style>

package/dist/Accordion.svelte.d.ts

@@ -1,24 +1,33 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * 複数の項目を同時に開けるようにするかどうか
-             * @default false
-             * @type boolean
-             */ multiple?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Accordion: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+       * 複数の項目を同時に開けるようにするかどうか
+       * @default false
+       * @type boolean
+       */ multiple?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Accordion = InstanceType<typeof Accordion>;
+export default Accordion;

package/dist/AccordionItem.svelte

@@ -1,96 +1,129 @@
-<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);
+<script lang="ts">
+  import { getContext, onMount } from 'svelte';
+  import { writable, type Readable } from 'svelte/store';
+
+  /**
+   * 項目のヘッダーとして常に表示されるテキスト
+   * @type string
+   */
+  export let label: string;
+
+  /**
+   * 項目の初期状態を開いた状態にするかどうか
+   * @default false
+   * @type boolean
+   */
+  export let isOpen: boolean = false;
+
+  /**
+   * ヘッダーの背景色
+   * @type {string | undefined}
+   */
+  export let headerColor: string | undefined = undefined;
+
+  /**
+   * コンテンツエリアの背景色
+   * @type {string | undefined}
+   */
+  export let contentColor: string | undefined = undefined;
+
+  import { ACCORDION_CONTEXT_KEY } from './scripts/accordionContext';
+
+  interface AccordionContext {
+    openItems: Readable<Set<string>>;
+    toggleItem: (label: string) => void;
+    initiallyOpen: (label: string) => void;
   }
-});
-let isContentOpen = false;
-$: isContentOpen = $openItems.has(label);
+
+  const { openItems, toggleItem, initiallyOpen } =
+    getContext<AccordionContext>(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});` : ''}`}
+  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}
+  <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;
-	}
+  .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

@@ -1,36 +1,45 @@
-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;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const AccordionItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+       * 項目のヘッダーとして常に表示されるテキスト
+       * @type string
+       */ label: string;
+    /**
+       * 項目の初期状態を開いた状態にするかどうか
+       * @default false
+       * @type boolean
+       */ isOpen?: boolean;
+    /**
+       * ヘッダーの背景色
+       * @type {string | undefined}
+       */ headerColor?: string | undefined;
+    /**
+       * コンテンツエリアの背景色
+       * @type {string | undefined}
+       */ contentColor?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type AccordionItem = InstanceType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/Alert.svelte

@@ -1,95 +1,124 @@
-<script>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";
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * The message to display in the alert.
+   * @type {string}
+   */
+  export let message: string;
+
+  /**
+   * The type of the alert, which determines its styling.
+   * @type {'success' | 'error' | 'warning' | 'info'}
+   * @default 'info'
+   */
+  export let type: 'success' | 'error' | 'warning' | 'info' = 'info';
+
+  /**
+   * Whether the alert can be dismissed by the user.
+   * @type {boolean}
+   * @default false
+   */
+  export let dismissible: boolean = false;
+
+  /**
+   * Whether the alert should have an outline style.
+   * @type {boolean}
+   * @default false
+   */
+  export let outline: boolean = false;
+
+  let baseColor: string;
+  let computedBgColor: string;
+  let computedBorderColor: string;
+  let textColor: string;
+
+  $: {
+    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; // Fallback
     }
+
+    if (outline) {
+      computedBgColor = 'transparent';
+      computedBorderColor = baseColor;
+      textColor = 'var(--wrap-grey)'; // Outline alerts usually have dark text for contrast
+    } else {
+      computedBgColor = baseColor;
+      computedBorderColor = 'transparent'; // No border for filled alerts
+      textColor = 'white'; // Default text color for filled alerts
+      if (type === 'warning') {
+        textColor = 'white'; // Ensure warning text is white for filled style
+      }
+    }
+  }
+
+  function dismissAlert() {
+    dispatch('dismiss');
   }
-}
-function dismissAlert() {
-  dispatch("dismiss");
-}
 </script>
 
 <div
-	class="alert-wrapper"
-	class:dismissible
-	class: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;
-	}
+  .dismiss-button:hover {
+    opacity: 1;
+  }
 </style>