cclkit4svelte 2.0.6 → 3.0.0

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,222 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+  import type { ColorVar } from './const/config';
+
+  export let page: number = 1; // 1-based
+  export let total: number | undefined = undefined; // total items
+  export let perPage: number = 10; // items per page when using total
+  export let pageCount: number | undefined = undefined; // total pages (alternative to total)
+  export let boundaryCount: number = 1; // pages maintained at each boundary
+  export let siblingCount: number = 1; // pages around current page
+  export let showFirstLast: boolean = true;
+  export let showPrevNext: boolean = true;
+  export let disabled: boolean = false;
+  export let accentColor: ColorVar = '--soda-blue';
+  export let ariaLabel: string = 'Pagination';
+
+  const dispatch = createEventDispatcher<{ change: { page: number } }>();
+
+  // normalize and clamp helpers
+  function getPageCount(): number {
+    const count = pageCount ?? (total && perPage ? Math.ceil(total / perPage) : 1);
+    return Math.max(1, count || 1);
+  }
+
+  function clampPage(p: number): number {
+    const max = getPageCount();
+    return Math.min(Math.max(1, Math.trunc(p || 1)), max);
+  }
+
+  $: page = clampPage(page);
+
+  function goTo(p: number) {
+    if (disabled) return;
+    const next = clampPage(p);
+    if (next !== page) {
+      page = next;
+      dispatch('change', { page });
+    }
+  }
+
+  type Item = number | 'ellipsis';
+
+  function range(start: number, end: number): number[] {
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  }
+
+  function usePagination(): Item[] {
+    const totalPages = getPageCount();
+
+    // total pages small enough to show all
+    const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3; // first + last + current
+    const totalBlocks = totalNumbers + 2; // with two ellipses
+
+    if (totalPages <= totalBlocks) {
+      return range(1, totalPages);
+    }
+
+    const startPages = range(1, Math.min(boundaryCount, totalPages));
+    const endPages = range(
+      Math.max(totalPages - boundaryCount + 1, boundaryCount + 1),
+      totalPages
+    );
+
+    const siblingsStart = Math.max(
+      Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
+      boundaryCount + 2
+    );
+    const siblingsEnd = Math.min(
+      Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+      endPages[0] - 2
+    );
+
+    const items: Item[] = [
+      ...startPages,
+      siblingsStart > boundaryCount + 2 ? 'ellipsis' : (boundaryCount + 1) as unknown as Item,
+      ...range(siblingsStart, siblingsEnd),
+      siblingsEnd < totalPages - boundaryCount - 1 ? 'ellipsis' : (totalPages - boundaryCount) as unknown as Item,
+      ...endPages
+    ];
+
+    // Clean up potential duplicate numbers from the conditional fallbacks above
+    const normalized: Item[] = [];
+    let prev: Item | undefined = undefined;
+    for (const it of items) {
+      if (it === 'ellipsis') {
+        if (prev !== 'ellipsis') normalized.push('ellipsis');
+      } else {
+        if (it !== prev) normalized.push(it);
+      }
+      prev = it;
+    }
+    return normalized;
+  }
+
+  $: items = usePagination();
+
+  onMount(() => {
+    // Ensure initial page is clamped and consumers can react if needed
+    const normalized = clampPage(page);
+    if (normalized !== page) {
+      page = normalized;
+      dispatch('change', { page });
+    }
+  });
+</script>
+
+<nav class="ccl-pagination" aria-label={ariaLabel} style={`--ccl-pagination-accent: var(${accentColor});`}>
+  <ul class="ccl-pagination__list" role="list">
+    {#if showFirstLast}
+      <li>
+        <button
+          class="ccl-pagination__control"
+          on:click={() => goTo(1)}
+          disabled={disabled || page === 1}
+          aria-label="go to first page"
+          type="button"
+        >«</button>
+      </li>
+    {/if}
+    {#if showPrevNext}
+      <li>
+        <button
+          class="ccl-pagination__control"
+          on:click={() => goTo(page - 1)}
+          disabled={disabled || page === 1}
+          aria-label="go to previous page"
+          type="button"
+        >‹</button>
+      </li>
+    {/if}
+
+    {#each items as it}
+      {#if it === 'ellipsis'}
+        <li class="ccl-pagination__ellipsis" aria-hidden="true">…</li>
+      {:else}
+        <li>
+          <button
+            class="ccl-pagination__page"
+            class:active={it === page}
+            aria-label={`go to page ${it}`}
+            aria-current={it === page ? 'page' : undefined}
+            disabled={disabled}
+            on:click={() => goTo(it)}
+            type="button"
+          >{it}</button>
+        </li>
+      {/if}
+    {/each}
+
+    {#if showPrevNext}
+      <li>
+        <button
+          class="ccl-pagination__control"
+          on:click={() => goTo(page + 1)}
+          disabled={disabled || page === getPageCount()}
+          aria-label="go to next page"
+          type="button"
+        >›</button>
+      </li>
+    {/if}
+    {#if showFirstLast}
+      <li>
+        <button
+          class="ccl-pagination__control"
+          on:click={() => goTo(getPageCount())}
+          disabled={disabled || page === getPageCount()}
+          aria-label="go to last page"
+          type="button"
+        >»</button>
+      </li>
+    {/if}
+  </ul>
+</nav>
+
+<style>
+  .ccl-pagination {
+    --ccl-pagination-accent: var(--soda-blue);
+    display: inline-block;
+  }
+  .ccl-pagination__list {
+    list-style: none;
+    display: inline-flex;
+    gap: 6px;
+    padding: 0;
+    margin: 0;
+    align-items: center;
+  }
+  .ccl-pagination__page,
+  .ccl-pagination__control {
+    appearance: none;
+    border: 1px solid var(--wrap-grey, #ccc);
+    background: white;
+    color: inherit;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    font: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .ccl-pagination__page.active {
+    background: var(--ccl-pagination-accent);
+    border-color: var(--ccl-pagination-accent);
+    color: white;
+  }
+  .ccl-pagination__ellipsis {
+    padding: 0 4px;
+    color: var(--wrap-grey, #888);
+  }
+  .ccl-pagination__page:disabled,
+  .ccl-pagination__control:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .ccl-pagination__page:not(:disabled):hover,
+  .ccl-pagination__control:not(:disabled):hover {
+    border-color: var(--ccl-pagination-accent);
+  }
+</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<{
+    page?: number;
+    total?: number | undefined;
+    perPage?: number;
+    pageCount?: number | undefined;
+    boundaryCount?: number;
+    siblingCount?: number;
+    showFirstLast?: boolean;
+    showPrevNext?: boolean;
+    disabled?: boolean;
+    accentColor?: ColorVar;
+    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;