cclkit4svelte 2.0.5 → 2.0.7

package/dist/Table.svelte

@@ -1,86 +1,127 @@
-<script>import { CCLPastelColor, CCLVividColor } from "./const/config";
-export let tableColor;
-let bodyColor;
-export let dataHeader;
-export let tableData;
-function getBodyColor(tableColor2) {
-  switch (tableColor2) {
-    case CCLVividColor.STRAWBERRY_PINK:
-      return CCLPastelColor.PEACH_PINK;
-    case CCLVividColor.PINEAPPLE_YELLOW:
-      return CCLPastelColor.LEMON_YELLOW;
-    case CCLVividColor.SODA_BLUE:
-      return CCLPastelColor.SUGAR_BLUE;
-    case CCLVividColor.MELON_GREEN:
-      return CCLPastelColor.MATCHA_GREEN;
-    case CCLVividColor.GRAPE_PURPLE:
-      return CCLPastelColor.AKEBI_PURPLE;
-    case CCLVividColor.WRAP_GREY:
-      return CCLPastelColor.CLOUD_GREY;
-    default:
-      return CCLPastelColor.PEACH_PINK;
+<script lang="ts">
+  import { CCLPastelColor, CCLVividColor } from './const/config';
+  import { vividFor } from './const/colorMap';
+
+  /**
+   * テーブルメインカラー
+   * CCLVividColorの中から指定する
+   * @default --strawberry-pink
+   * @type string
+   */
+  export let tableColor: string;
+
+  /**
+   * テーブルサブカラー
+   * CCLPasterColorの中から指定する
+   * @default --peach-pink
+   * @type string
+   */
+  let bodyColor: string;
+
+  /**
+   * テーブルのヘッダー
+   * 一次元配列で自由長、
+   * @type Array<string>
+   */
+  export let dataHeader: string[];
+
+  /**
+   * テーブルにいれるデータ
+   * 2次元の配列で自由長
+   * @type Array<Array<string | number>>
+   */
+  export let tableData: (string | number)[][];
+
+  /**
+   * テーブルカラーに応じた背景色を取得する関数
+   * @param tableColor - テーブルのメインカラー
+   * @returns 背景色
+   */
+  function getBodyColor(tableColor: string): string {
+    switch (tableColor) {
+      case CCLVividColor.STRAWBERRY_PINK:
+        return CCLPastelColor.PEACH_PINK;
+      case CCLVividColor.PINEAPPLE_YELLOW:
+        return CCLPastelColor.LEMON_YELLOW;
+      case CCLVividColor.SODA_BLUE:
+        return CCLPastelColor.SUGAR_BLUE;
+      case CCLVividColor.MELON_GREEN:
+        return CCLPastelColor.MATCHA_GREEN;
+      case CCLVividColor.GRAPE_PURPLE:
+        return CCLPastelColor.AKEBI_PURPLE;
+      case CCLVividColor.WRAP_GREY:
+        return CCLPastelColor.CLOUD_GREY;
+      default:
+        return CCLPastelColor.PEACH_PINK;
+    }
   }
-}
-$: bodyColor = getBodyColor(tableColor);
+
+  // 背景色を取得
+  $: bodyColor = getBodyColor(tableColor);
+  // ヘッダの前景色（万一パステルが指定された場合に備える）
+  $: headerFg = vividFor(tableColor);
 </script>
 
 <!--汎用テーブル-->
 <div class="table-wrapper">
-	<table>
-		<!--テーブルヘッダー-->
-		<thead class="table-header" style="--bgColor: var({tableColor})">
-			<tr>
-				{#each dataHeader as title}
-					<th>{title}</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody>
-			{#each tableData as row}
-				<tr class="table-body-style" style="--table-body-color: var({bodyColor})">
-					{#each row as data}
-						<td>{data}</td>
-					{/each}
-				</tr>
-			{/each}
-		</tbody>
-	</table>
+  <table>
+    <!--テーブルヘッダー-->
+    <thead
+      class="table-header"
+      style="--bgColor: var({tableColor}); {headerFg ? `--th-fg: var(${headerFg});` : ''}"
+    >
+      <tr>
+        {#each dataHeader as title}
+          <th>{title}</th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each tableData as row}
+        <tr class="table-body-style" style="--table-body-color: var({bodyColor})">
+          {#each row as data}
+            <td>{data}</td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
 </div>
 
 <style>
-	th {
-		padding: 5px 60px;
-	}
+  th {
+    padding: 5px 60px;
+  }
 
-	thead {
-		position: sticky;
-		top: 0;
-		left: 0;
-		white-space: nowrap;
-	}
+  thead {
+    position: sticky;
+    top: 0;
+    left: 0;
+    white-space: nowrap;
+  }
 
-	table {
-		border-collapse: collapse;
-		width: 100%;
-	}
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
 
-	.table-wrapper {
-		overflow-y: auto;
-		max-width: 90%;
-		height: 200px;
-		-webkit-overflow-scrolling: touch;
-	}
+  .table-wrapper {
+    overflow-y: auto;
+    max-width: 90%;
+    height: 200px;
+    -webkit-overflow-scrolling: touch;
+  }
 
-	.table-header {
-		background-color: var(--bgColor);
-		color: #ffffff;
-	}
-	.table-body-style {
-		text-align: center;
-		color: var(--wrap-grey);
-		white-space: nowrap;
-	}
-	.table-body-style:nth-child(odd) {
-		background-color: var(--table-body-color);
-	}
+  .table-header {
+    background-color: var(--bgColor);
+    color: var(--th-fg, #ffffff);
+  }
+  .table-body-style {
+    text-align: center;
+    color: var(--wrap-grey);
+    white-space: nowrap;
+  }
+  .table-body-style:nth-child(odd) {
+    background-color: var(--table-body-color);
+  }
 </style>

package/dist/Table.svelte.d.ts

@@ -1,33 +1,35 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * テーブルメインカラー
-             * CCLVividColorの中から指定する
-             * @default --strawberry-pink
-             * @type string
-             */ tableColor: string;
-        /**
-             * テーブルのヘッダー
-             * 一次元配列で自由長、
-             * @type Array<string>
-             */ dataHeader: string[];
-        /**
-             * テーブルにいれるデータ
-             * 2次元の配列で自由長
-             * @type Array<Array<string | number>>
-             */ tableData: (string | number)[][];
+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 TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Table: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * テーブルメインカラー
+       * CCLVividColorの中から指定する
+       * @default --strawberry-pink
+       * @type string
+       */ tableColor: string;
+    /**
+       * テーブルのヘッダー
+       * 一次元配列で自由長、
+       * @type Array<string>
+       */ dataHeader: string[];
+    /**
+       * テーブルにいれるデータ
+       * 2次元の配列で自由長
+       * @type Array<Array<string | number>>
+       */ tableData: (string | number)[][];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Table = InstanceType<typeof Table>;
+export default Table;

package/dist/Tabs.svelte

@@ -1,85 +1,91 @@
-<script>import { setContext } from "svelte";
-import { writable } from "svelte/store";
-import { TABS_CONTEXT_KEY } from "./scripts/tabsContext";
-const tabData = writable([]);
-const activeTabLabel = writable("");
-setContext(TABS_CONTEXT_KEY, {
-  addTab: (tab) => {
-    tabData.update((currentTabs) => {
-      const newTabs = [...currentTabs, tab];
-      if (newTabs.length === 1) {
-        activeTabLabel.set(tab.label);
-      }
-      return newTabs;
-    });
-  },
-  activeTabLabel
-});
-let activeColor = "--strawberry-pink";
-$: {
-  const activeTab = $tabData.find((t) => t.label === $activeTabLabel);
-  activeColor = activeTab ? activeTab.color : "--strawberry-pink";
-}
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+
+  import { TABS_CONTEXT_KEY } from './scripts/tabsContext';
+
+  const tabData = writable([]);
+  const activeTabLabel = writable('');
+
+  setContext(TABS_CONTEXT_KEY, {
+    addTab: (tab) => {
+      tabData.update((currentTabs) => {
+        const newTabs = [...currentTabs, tab];
+        // Set the first tab as active by default
+        if (newTabs.length === 1) {
+          activeTabLabel.set(tab.label);
+        }
+        return newTabs;
+      });
+    },
+    activeTabLabel
+  });
+
+  let activeColor = '--strawberry-pink';
+  $: {
+    const activeTab = $tabData.find((t) => t.label === $activeTabLabel);
+    activeColor = activeTab ? activeTab.color : '--strawberry-pink';
+  }
 </script>
 
 <div class="tabs-container">
-	<div role="tablist" class="tab-list">
-		{#each $tabData as tab}
-			<button
-				role="tab"
-				class="tab-button"
-				class:active={tab.label === $activeTabLabel}
-				aria-selected={tab.label === $activeTabLabel}
-				aria-controls={`tab-panel-${tab.label}`}
-				id={`tab-button-${tab.label}`}
-				on:click={() => activeTabLabel.set(tab.label)}
-				style="--active-color: var({tab.color});"
-				disabled={tab.disabled}
-			>
-				{tab.label}
-			</button>
-		{/each}
-	</div>
+  <div role="tablist" class="tab-list">
+    {#each $tabData as tab}
+      <button
+        role="tab"
+        class="tab-button"
+        class:active={tab.label === $activeTabLabel}
+        aria-selected={tab.label === $activeTabLabel}
+        aria-controls={`tab-panel-${tab.label}`}
+        id={`tab-button-${tab.label}`}
+        on:click={() => activeTabLabel.set(tab.label)}
+        style="--active-color: var({tab.color});"
+        disabled={tab.disabled}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
 
-	<div class="tab-content">
-		<slot />
-	</div>
+  <div class="tab-content">
+    <slot />
+  </div>
 </div>
 
 <style>
-	.tab-list {
-		display: flex;
-		border-bottom: 2px solid #eee;
-	}
+  .tab-list {
+    display: flex;
+    border-bottom: 2px solid #eee;
+  }
 
-	.tab-button {
-		padding: 12px 24px;
-		cursor: pointer;
-		border: none;
-		background: none;
-		font-size: 1rem;
-		color: var(--wrap-grey);
-		border-bottom: 3px solid transparent;
-		margin-bottom: -2px; /* Overlap the container's border */
-		transition: border-color 0.2s ease-in-out;
-	}
+  .tab-button {
+    padding: 12px 24px;
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-size: 1rem;
+    color: var(--wrap-grey);
+    border-bottom: 3px solid transparent;
+    margin-bottom: -2px; /* Overlap the container's border */
+    transition: border-color 0.2s ease-in-out;
+  }
 
-	.tab-button.active {
-		border-bottom-color: var(--active-color);
-		font-weight: bold;
-		color: black;
-	}
+  .tab-button.active {
+    border-bottom-color: var(--active-color);
+    font-weight: bold;
+    color: black;
+  }
 
-	.tab-button:hover:not(.active) {
-		color: black;
-	}
+  .tab-button:hover:not(.active) {
+    color: black;
+  }
 
-	.tab-content {
-		padding: 24px 8px;
-	}
+  .tab-content {
+    padding: 24px 8px;
+  }
 
-	.tab-button:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
+  .tab-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
 </style>

package/dist/Tabs.svelte.d.ts

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TabsProps = typeof __propDef.props;
-export type TabsEvents = typeof __propDef.events;
-export type TabsSlots = typeof __propDef.slots;
-export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Tabs = InstanceType<typeof Tabs>;
+export default Tabs;

package/dist/Textarea.svelte

@@ -1,59 +1,108 @@
-<script>import { CCLVividColor } from "./const/config";
-export let label = "";
-export let value = "";
-export let placeholder = "";
-export let borderColor = CCLVividColor.STRAWBERRY_PINK;
-export let disabled = false;
-export let id = "ccl-textarea";
-export let rows = 5;
-export let cols = 20;
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  /**
+   * ラベルのテキスト
+   * @default ''
+   * @type string
+   */
+  export let label: string = '';
+
+  /**
+   * 入力値
+   * @default ''
+   * @type string
+   */
+  export let value: string = '';
+
+  /**
+   * プレースホルダーのテキスト
+   * @default ''
+   * @type string
+   */
+  export let placeholder: string = '';
+
+  /**
+   * 枠線の色
+   * @default --strawberry-pink
+   * @type string
+   */
+  export let borderColor: string = CCLVividColor.STRAWBERRY_PINK;
+
+  /**
+   * 非活性状態にするか
+   * @default false
+   * @type boolean
+   */
+  export let disabled: boolean = false;
+
+  /**
+   * コンポーネントのID
+   * @default 'ccl-textarea'
+   * @type string
+   */
+  export let id: string = 'ccl-textarea';
+
+  /**
+   * 行数
+   * @default 5
+   * @type number
+   */
+  export let rows: number = 5;
+
+  /**
+   * 列数
+   * @default 20
+   * @type number
+   */
+  export let cols: number = 20;
 </script>
 
 <div class="textarea-wrapper">
-	{#if label}
-		<label for={id} class="textarea-label">{label}</label>
-	{/if}
-	<textarea
-		{id}
-		bind:value
-		{placeholder}
-		{disabled}
-		{rows}
-		{cols}
-		class="textarea-field"
-		style="--border-color: var({borderColor})"
-	/>
+  {#if label}
+    <label for={id} class="textarea-label">{label}</label>
+  {/if}
+  <textarea
+    {id}
+    bind:value
+    {placeholder}
+    {disabled}
+    {rows}
+    {cols}
+    class="textarea-field"
+    style="--border-color: var({borderColor})"
+  />
 </div>
 
 <style>
-	.textarea-wrapper {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	.textarea-label {
-		font-size: 14px;
-		color: var(--wrap-grey);
-	}
-
-	.textarea-field {
-		padding: 10px 15px;
-		border-radius: 8px;
-		border: 2px solid var(--border-color);
-		font-size: 16px;
-		outline: none;
-		transition: border-color 0.2s;
-		resize: vertical; /* 垂直方向のみリサイズ可能 */
-	}
-
-	.textarea-field:focus {
-		border-color: var(--ccl-focus-color, var(--soda-blue)); /* フォーカス時の色を定義 */
-	}
-
-	.textarea-field:disabled {
-		background-color: var(--cloud-grey);
-		cursor: not-allowed;
-		border-color: var(--cloud-grey);
-	}
+  .textarea-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .textarea-label {
+    font-size: 14px;
+    color: var(--wrap-grey);
+  }
+
+  .textarea-field {
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: 2px solid var(--border-color);
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.2s;
+    resize: vertical; /* 垂直方向のみリサイズ可能 */
+  }
+
+  .textarea-field:focus {
+    border-color: var(--ccl-focus-color, var(--soda-blue)); /* フォーカス時の色を定義 */
+  }
+
+  .textarea-field:disabled {
+    background-color: var(--cloud-grey);
+    cursor: not-allowed;
+    border-color: var(--cloud-grey);
+  }
 </style>