cclkit4svelte 2.0.5 → 2.0.7

package/dist/Input.svelte.d.ts

@@ -1,62 +1,64 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * 入力フィールドのタイプ
-             * @default 'text'
-             * @type {'text' | 'password' | 'email' | 'number'}
-             */ type?: "text" | "password" | "email" | "number";
-        /**
-             * ラベルのテキスト
-             * @default ''
-             * @type string
-             */ label?: string;
-        /**
-             * 入力値
-             * @default ''
-             * @type string
-             */ value?: string;
-        /**
-             * プレースホルダーのテキスト
-             * @default ''
-             * @type string
-             */ placeholder?: string;
-        /**
-             * 枠線の色
-             * @default --strawberry-pink
-             * @type string
-             */ borderColor?: string;
-        /**
-             * 非活性状態にするか
-             * @default false
-             * @type boolean
-             */ disabled?: boolean;
-        /**
-             * コンポーネントのID
-             * @default 'ccl-input'
-             * @type string
-             */ id?: string;
-        /**
-             * バリデーションメッセージ
-             * @default ''
-             * @type string
-             */ validationMessage?: string;
-        /**
-             * バリデーションの状態
-             * @default true
-             * @type boolean
-             */ isValid?: 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: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type InputProps = typeof __propDef.props;
-export type InputEvents = typeof __propDef.events;
-export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Input: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * 入力フィールドのタイプ
+       * @default 'text'
+       * @type {'text' | 'password' | 'email' | 'number'}
+       */ type?: "text" | "password" | "email" | "number";
+    /**
+       * ラベルのテキスト
+       * @default ''
+       * @type string
+       */ label?: string;
+    /**
+       * 入力値
+       * @default ''
+       * @type string
+       */ value?: string;
+    /**
+       * プレースホルダーのテキスト
+       * @default ''
+       * @type string
+       */ placeholder?: string;
+    /**
+       * 枠線の色
+       * @default --strawberry-pink
+       * @type string
+       */ borderColor?: string;
+    /**
+       * 非活性状態にするか
+       * @default false
+       * @type boolean
+       */ disabled?: boolean;
+    /**
+       * コンポーネントのID
+       * @default 'ccl-input'
+       * @type string
+       */ id?: string;
+    /**
+       * バリデーションメッセージ
+       * @default ''
+       * @type string
+       */ validationMessage?: string;
+    /**
+       * バリデーションの状態
+       * @default true
+       * @type boolean
+       */ isValid?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/dist/Pagination.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+  import { vividFor } from './const/colorMap';
+
+  const dispatch = createEventDispatcher<{ change: { page: number } }>();
+
+  /** 現在のページ(1始まり) */
+  export let page: number = 1;
+  /** 総アイテム数（`pageCount`とどちらか一方を指定） */
+  export let total: number | undefined = undefined;
+  /** 1ページあたり件数（`total`指定時に使用） */
+  export let perPage: number = 10;
+  /** 総ページ数（`total`の代わりに明示指定可） */
+  export let pageCount: number | undefined = undefined;
+
+  /** 省略せず両端に常に表示するページ数 */
+  export let boundaryCount: number = 1;
+  /** 現在ページの前後に表示するページ数 */
+  export let siblingCount: number = 1;
+
+  /** 最初/最後ページボタンの表示 */
+  export let showFirstLast: boolean = true;
+  /** 前へ/次へボタンの表示 */
+  export let showPrevNext: boolean = true;
+
+  /** 操作不可にする */
+  export let disabled: boolean = false;
+
+  /** アクセントカラー（選択中・ホバー等） */
+  export let accentColor: ColorVar = CCLVividColor.SODA_BLUE;
+
+  /** `nav`のARIAラベル */
+  export let ariaLabel: string = 'Pagination';
+
+  $: accentFg = vividFor(accentColor as string);
+  $: styleInline =
+    `--accent-color: var(${accentColor});` + (accentFg ? ` --accent-fg: var(${accentFg});` : '');
+
+  $: totalPages = Math.max(
+    1,
+    pageCount ?? (total != null ? Math.ceil(total / Math.max(1, perPage)) : 1)
+  );
+  $: currentPage = clamp(page, 1, totalPages);
+  $: pages = getVisiblePages(totalPages, currentPage, siblingCount, boundaryCount);
+
+  function clamp(n: number, min: number, max: number) {
+    return Math.min(max, Math.max(min, n));
+  }
+
+  function range(start: number, end: number) {
+    const arr: number[] = [];
+    for (let i = start; i <= end; i++) arr.push(i);
+    return arr;
+  }
+
+  function getVisiblePages(
+    total: number,
+    current: number,
+    sib: number,
+    boundary: number
+  ): (number | 'ellipsis-start' | 'ellipsis-end')[] {
+    if (total <= 0) return [1];
+
+    const startPages = range(1, Math.min(boundary, total));
+    const endPages = range(Math.max(total - boundary + 1, boundary + 1), total);
+
+    // 兄弟範囲の開始/終了を計算
+    const siblingsStart = Math.max(
+      Math.min(current - sib, total - boundary - sib * 2 - 1),
+      boundary + 2
+    );
+    const siblingsEnd = Math.min(
+      Math.max(current + sib, boundary + sib * 2 + 2),
+      endPages.length > 0 ? endPages[0] - 2 : total - 1
+    );
+
+    const pages: (number | 'ellipsis-start' | 'ellipsis-end')[] = [];
+    pages.push(...startPages);
+
+    if (siblingsStart > boundary + 2) {
+      pages.push('ellipsis-start');
+    } else if (boundary + 1 < total - boundary) {
+      pages.push(boundary + 1);
+    }
+
+    pages.push(...range(siblingsStart, siblingsEnd));
+
+    if (siblingsEnd < total - boundary - 1) {
+      pages.push('ellipsis-end');
+    } else if (total - boundary > boundary) {
+      pages.push(total - boundary);
+    }
+
+    pages.push(...endPages);
+    // ユニーク化と並び順維持
+    const seen = new Set<string>();
+    return pages.filter((p) => {
+      const key = String(p);
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+  }
+
+  function goTo(target: number) {
+    if (disabled) return;
+    const next = clamp(target, 1, totalPages);
+    if (next !== currentPage) {
+      dispatch('change', { page: next });
+    }
+  }
+  //
+</script>
+
+<nav class="ccl-pagination" aria-label={ariaLabel} style={styleInline}>
+  <ul class="list" role="list">
+    {#if showFirstLast}
+      <li>
+        <button
+          type="button"
+          class="item control"
+          on:click={() => goTo(1)}
+          aria-label="Go to first page"
+          disabled={disabled || currentPage === 1}>«</button
+        >
+      </li>
+    {/if}
+    {#if showPrevNext}
+      <li>
+        <button
+          type="button"
+          class="item control"
+          on:click={() => goTo(currentPage - 1)}
+          aria-label="Go to previous page"
+          disabled={disabled || currentPage === 1}>‹</button
+        >
+      </li>
+    {/if}
+
+    {#each pages as p}
+      {#if p === 'ellipsis-start' || p === 'ellipsis-end'}
+        <li><span class="item ellipsis" aria-hidden="true">…</span></li>
+      {:else}
+        <li>
+          <button
+            type="button"
+            class="item {p === currentPage ? 'active' : ''}"
+            aria-current={p === currentPage ? 'page' : undefined}
+            aria-label={`Go to page ${p}`}
+            {disabled}
+            on:click={() => goTo(p as number)}>{p}</button
+          >
+        </li>
+      {/if}
+    {/each}
+
+    {#if showPrevNext}
+      <li>
+        <button
+          type="button"
+          class="item control"
+          on:click={() => goTo(currentPage + 1)}
+          aria-label="Go to next page"
+          disabled={disabled || currentPage === totalPages}>›</button
+        >
+      </li>
+    {/if}
+    {#if showFirstLast}
+      <li>
+        <button
+          type="button"
+          class="item control"
+          on:click={() => goTo(totalPages)}
+          aria-label="Go to last page"
+          disabled={disabled || currentPage === totalPages}>»</button
+        >
+      </li>
+    {/if}
+  </ul>
+  <div class="sr-only" aria-live="polite">Page {currentPage} of {totalPages}</div>
+</nav>
+
+<style>
+  .ccl-pagination {
+    display: inline-block;
+    --accent-color: var(--soda-blue);
+    --size: 36px;
+  }
+  .list {
+    display: flex;
+    gap: 6px;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    align-items: center;
+  }
+  .item {
+    width: var(--size);
+    min-width: var(--size);
+    height: var(--size);
+    padding: 0;
+    border-radius: 50%;
+    border: 2px solid var(--cloud-grey);
+    background: white;
+    color: var(--wrap-grey);
+    font-size: 14px;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition:
+      border-color 0.15s,
+      color 0.15s,
+      background 0.15s;
+  }
+  .item.control {
+    font-size: 18px; /* larger chevrons */
+  }
+  .item.ellipsis {
+    width: auto;
+    min-width: auto;
+    padding: 0 4px;
+    border-radius: 0;
+    background: transparent;
+    border: none;
+    cursor: default;
+    color: var(--wrap-grey);
+  }
+  .item:hover:not(:disabled) {
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+  }
+  .item.active {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    color: var(--accent-fg, #fff);
+    cursor: default;
+  }
+  .item:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/dist/Pagination.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { ColorVar } from './const/config';
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+    /** 現在のページ(1始まり) */ page?: number;
+    /** 総アイテム数（`pageCount`とどちらか一方を指定） */ total?: number | undefined;
+    /** 1ページあたり件数（`total`指定時に使用） */ perPage?: number;
+    /** 総ページ数（`total`の代わりに明示指定可） */ pageCount?: number | undefined;
+    /** 省略せず両端に常に表示するページ数 */ boundaryCount?: number;
+    /** 現在ページの前後に表示するページ数 */ siblingCount?: number;
+    /** 最初/最後ページボタンの表示 */ showFirstLast?: boolean;
+    /** 前へ/次へボタンの表示 */ showPrevNext?: boolean;
+    /** 操作不可にする */ disabled?: boolean;
+    /** アクセントカラー（選択中・ホバー等） */ accentColor?: ColorVar;
+    /** `nav`のARIAラベル */ ariaLabel?: string;
+}, {
+    change: CustomEvent<{
+        page: number;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Pagination = InstanceType<typeof Pagination>;
+export default Pagination;

package/dist/ProgressBar.svelte

@@ -1,52 +1,57 @@
-<script>import { CCLVividColor, ProgressBarHeight } from "./const/config";
-export let value = 0;
-export let maxValue = 100;
-export let barColor = CCLVividColor.SODA_BLUE;
-export let backgroundColor = "#e0e0e0";
-export let height = ProgressBarHeight.DEFAULT;
-export let containerWidth = "100%";
-export let isSticky = false;
-export let isRounded = true;
-$: progress = value / maxValue * 100;
-$: finalBarColor = barColor.startsWith("--") ? `var(${barColor})` : barColor;
-$: finalBackgroundColor = backgroundColor.startsWith("--") ? `var(${backgroundColor})` : backgroundColor;
+<script lang="ts">
+  import { CCLVividColor, ProgressBarHeight } from './const/config';
+
+  export let value: number = 0; // 現在の進捗 (0-100)
+  export let maxValue: number = 100; // 最大値
+  export let barColor: string = CCLVividColor.SODA_BLUE; // バーの色
+  export let backgroundColor: string = '#e0e0e0'; // 背景色
+  export let height: ProgressBarHeight = ProgressBarHeight.DEFAULT; // プログレスバーの高さ
+  export let containerWidth: string = '100%'; // プログレスバー全体の幅
+  export let isSticky: boolean = false; // 上部に固定表示するか
+  export let isRounded: boolean = true; // 角を丸くするか
+
+  $: progress = (value / maxValue) * 100;
+  $: finalBarColor = barColor.startsWith('--') ? `var(${barColor})` : barColor;
+  $: finalBackgroundColor = backgroundColor.startsWith('--')
+    ? `var(${backgroundColor})`
+    : backgroundColor;
 </script>
 
 <div
-	class="progress-bar-container"
-	class:sticky={isSticky}
-	class:rounded={isRounded}
-	style="background-color: {finalBackgroundColor}; width: {containerWidth}; height: {height};"
-	role="progressbar"
-	aria-valuenow={value}
-	aria-valuemin="0"
-	aria-valuemax={maxValue}
+  class="progress-bar-container"
+  class:sticky={isSticky}
+  class:rounded={isRounded}
+  style="background-color: {finalBackgroundColor}; width: {containerWidth}; height: {height};"
+  role="progressbar"
+  aria-valuenow={value}
+  aria-valuemin="0"
+  aria-valuemax={maxValue}
 >
-	<div class="progress-bar" style="width: {progress}%; background-color: {finalBarColor};"></div>
+  <div class="progress-bar" style="width: {progress}%; background-color: {finalBarColor};"></div>
 </div>
 
 <style>
-	.progress-bar-container {
-		overflow: hidden;
-		position: relative;
-	}
-
-	.progress-bar-container.sticky {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 9999;
-	}
-
-	.progress-bar-container.rounded {
-		border-radius: 10px;
-	}
-
-	.progress-bar {
-		height: 100%;
-	}
-
-	.progress-bar-container.rounded .progress-bar {
-		border-radius: 10px;
-	}
+  .progress-bar-container {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .progress-bar-container.sticky {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+  }
+
+  .progress-bar-container.rounded {
+    border-radius: 10px;
+  }
+
+  .progress-bar {
+    height: 100%;
+  }
+
+  .progress-bar-container.rounded .progress-bar {
+    border-radius: 10px;
+  }
 </style>

package/dist/ProgressBar.svelte.d.ts

@@ -1,26 +1,28 @@
-import { SvelteComponent } from "svelte";
 import { ProgressBarHeight } from './const/config';
-declare const __propDef: {
-    props: {
-        value?: number;
-        maxValue?: number;
-        barColor?: string;
-        backgroundColor?: string;
-        height?: ProgressBarHeight;
-        containerWidth?: string;
-        isSticky?: boolean;
-        isRounded?: 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: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ProgressBarProps = typeof __propDef.props;
-export type ProgressBarEvents = typeof __propDef.events;
-export type ProgressBarSlots = typeof __propDef.slots;
-export default class ProgressBar extends SvelteComponent<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ProgressBar: $$__sveltets_2_IsomorphicComponent<{
+    value?: number;
+    maxValue?: number;
+    barColor?: string;
+    backgroundColor?: string;
+    height?: ProgressBarHeight;
+    containerWidth?: string;
+    isSticky?: boolean;
+    isRounded?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProgressBar = InstanceType<typeof ProgressBar>;
+export default ProgressBar;