cclkit4svelte 2.0.6 → 3.0.0

package/dist/Checkbox.svelte

@@ -1,97 +1,128 @@
-<script>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 = () => {
-};
-const checkMarkColor = "white";
-function handleChange(event) {
-  if (disabled) {
-    return;
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  /**
+   * チェックボックスのラベル
+   * @default ''
+   * @type string
+   */
+  export let label: string = '';
+
+  /**
+   * チェックボックスの状態
+   * @default false
+   * @type boolean
+   */
+  export let checked: boolean = false;
+
+  /**
+   * チェックボックスの色
+   * @default '--soda-blue'
+   * @type string
+   */
+  export let color: string = CCLVividColor.SODA_BLUE;
+
+  /**
+   * 非活性状態
+   * @default false
+   * @type boolean
+   */
+  export let disabled: boolean = false;
+
+  /**
+   * 状態が変更されたときのイベントハンドラ
+   * @type {() => void}
+   */
+  export let onChange: () => void = () => {};
+
+  const checkMarkColor = 'white' as const;
+
+  function handleChange(event: Event) {
+    if (disabled) {
+      return;
+    }
+    const target = event.target as HTMLInputElement;
+    checked = target.checked;
+    onChange();
   }
-  const target = event.target;
-  checked = target.checked;
-  onChange();
-}
 </script>
 
 <label class="checkboxWrapper" class: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}
+  <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;
-	}
+  .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

@@ -1,41 +1,43 @@
-import { SvelteComponent } from "svelte";
-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;
+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 CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
-export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * チェックボックスのラベル
+       * @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;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Checkbox = InstanceType<typeof Checkbox>;
+export default Checkbox;

package/dist/CommonHeader.svelte

@@ -1,33 +1,60 @@
-<script>export let bgColor = "--strawberry-pink";
-export let height = "--hd-normal";
-export let logo;
-export let logoHeight;
-export let href;
+<script lang="ts">
+  import type { ColorVar } from './const/config';
+
+  /**
+   * ヘッダー背景色（CCLVividColor/CCLPastelColor の CSS 変数名）
+   * @default --strawberry-pink
+   */
+  export let bgColor: ColorVar = '--strawberry-pink';
+  /**
+   * ヘッダー高さ（HeaderHeight の CSS 変数名）
+   * @default --hd-normal
+   */
+  export let height: string = '--hd-normal';
+
+  /**
+   * ヘッダーに表示するロゴ
+   * 基本的にsvg要素を読み込む
+   * @type string
+   */
+  export let logo: string;
+
+  /**
+   * ロゴの高さ
+   * @type string
+   */
+  export let logoHeight: string;
+
+  /**
+   * ロゴのリンク先
+   * @type string
+   */
+  export let href: string;
 </script>
 
 <!--汎用ヘッダー-->
 <header>
-	<div class="wrapper" style="--bgColor: var({bgColor}); --height: var({height})">
-		{#if logo}
-			<a {href}>
-				<img style="height: {logoHeight}" src={logo} alt="SVG Image" />
-			</a>
-		{:else}
-			<p>SVGファイルが指定されていません</p>
-		{/if}
-	</div>
+  <div class="wrapper" style="--bgColor: var({bgColor}); --height: var({height})">
+    {#if logo}
+      <a {href}>
+        <img style="height: {logoHeight}" src={logo} alt="SVG Image" />
+      </a>
+    {:else}
+      <p>SVGファイルが指定されていません</p>
+    {/if}
+  </div>
 </header>
 
 <style>
-	.wrapper {
-		background: var(--bgColor);
-		height: var(--height);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
+  .wrapper {
+    background: var(--bgColor);
+    height: var(--height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-	.a {
-		fill: #fff;
-	}
+  .a {
+    fill: #fff;
+  }
 </style>

package/dist/CommonHeader.svelte.d.ts

@@ -1,39 +1,41 @@
-import { SvelteComponent } from "svelte";
 import type { ColorVar } from './const/config';
-declare const __propDef: {
-    props: {
-        /**
-             * ヘッダー背景色（CCLVividColor/CCLPastelColor の CSS 変数名）
-             * @default --strawberry-pink
-             */ bgColor?: ColorVar;
-        /**
-             * ヘッダー高さ（HeaderHeight の CSS 変数名）
-             * @default --hd-normal
-             */ height?: string;
-        /**
-             * ヘッダーに表示するロゴ
-             * 基本的にsvg要素を読み込む
-             * @type string
-             */ logo: string;
-        /**
-             * ロゴの高さ
-             * @type string
-             */ logoHeight: string;
-        /**
-             * ロゴのリンク先
-             * @type string
-             */ href: string;
+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 CommonHeaderProps = typeof __propDef.props;
-export type CommonHeaderEvents = typeof __propDef.events;
-export type CommonHeaderSlots = typeof __propDef.slots;
-export default class CommonHeader extends SvelteComponent<CommonHeaderProps, CommonHeaderEvents, CommonHeaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CommonHeader: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * ヘッダー背景色（CCLVividColor/CCLPastelColor の CSS 変数名）
+       * @default --strawberry-pink
+       */ bgColor?: ColorVar;
+    /**
+       * ヘッダー高さ（HeaderHeight の CSS 変数名）
+       * @default --hd-normal
+       */ height?: string;
+    /**
+       * ヘッダーに表示するロゴ
+       * 基本的にsvg要素を読み込む
+       * @type string
+       */ logo: string;
+    /**
+       * ロゴの高さ
+       * @type string
+       */ logoHeight: string;
+    /**
+       * ロゴのリンク先
+       * @type string
+       */ href: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CommonHeader = InstanceType<typeof CommonHeader>;
+export default CommonHeader;