cclkit4svelte 2.0.5 → 2.0.7

package/dist/Button.svelte

@@ -1,42 +1,79 @@
-<script>export let bgColor = "--strawberry-pink";
-export let label = "Button";
-export let onClick = () => {
-};
-export let disabled = false;
-function getButtonColor(bgColor2) {
-  return `var(${bgColor2})`;
-}
-let buttonColor = getButtonColor(bgColor);
-$: buttonColor = getButtonColor(bgColor);
+<script lang="ts">
+  import type { ColorVar } from './const/config';
+
+  /**
+   * ボタンカラー、CCLVividColorの中から選ぶ
+   * @default --strawberry-pink
+   */
+  export let bgColor: ColorVar = '--strawberry-pink';
+
+  /**
+   * ボタンの中に表示するテキスト
+   * @default Button
+   */
+  export let label: string = 'Button';
+
+  /**
+   * クリックイベントハンドラ
+   * @default () => {}
+   */
+  export let onClick: () => void = () => {};
+
+  /**
+   * ボタンの非活性状態
+   * @default false
+   */
+  export let disabled: boolean = false;
+
+  /**
+   * ボタンの背景色を取得する関数
+   * @param bgColor - ボタンの背景色
+   * @returns 背景色
+   */
+  import { vividFor } from './const/colorMap';
+
+  function getButtonColor(bgColor: string): string {
+    return `var(${bgColor})`;
+  }
+
+  // 背景色を取得（props 変更に追従）
+  let buttonColor = getButtonColor(bgColor);
+  $: buttonColor = getButtonColor(bgColor);
+  $: buttonFg = vividFor(bgColor as string);
 </script>
 
 <!--汎用ボタン-->
-<button class="buttonWrapper" style="--bgColor: {buttonColor}" on:click={onClick} {disabled}>
-	<span class="btLabel">{label}</span>
+<button
+  class="buttonWrapper"
+  style="--bgColor: {buttonColor}; {buttonFg ? `--btn-fg: var(${buttonFg});` : ''}"
+  on:click={onClick}
+  {disabled}
+>
+  <span class="btLabel">{label}</span>
 </button>
 
 <style>
-	.buttonWrapper {
-		display: flex;
-		border-radius: 50px;
-		border: none;
-		padding: 15px 45px;
-		background: var(--bgColor);
-	}
-	.buttonWrapper:hover {
-		cursor: pointer;
-	}
-	.buttonWrapper:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-	.btLabel {
-		flex-direction: column;
-		justify-content: center;
-		flex-shrink: 0;
-		color: #fff;
-		text-align: center;
-		font-size: 18px;
-		line-height: normal;
-	}
+  .buttonWrapper {
+    display: flex;
+    border-radius: 50px;
+    border: none;
+    padding: 15px 45px;
+    background: var(--bgColor);
+  }
+  .buttonWrapper:hover {
+    cursor: pointer;
+  }
+  .buttonWrapper:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .btLabel {
+    flex-direction: column;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--btn-fg, #fff);
+    text-align: center;
+    font-size: 18px;
+    line-height: normal;
+  }
 </style>

package/dist/Button.svelte.d.ts

@@ -1,34 +1,36 @@
-import { SvelteComponent } from "svelte";
 import type { ColorVar } from './const/config';
-declare const __propDef: {
-    props: {
-        /**
-             * ボタンカラー、CCLVividColorの中から選ぶ
-             * @default --strawberry-pink
-             */ bgColor?: ColorVar;
-        /**
-             * ボタンの中に表示するテキスト
-             * @default Button
-             */ label?: string;
-        /**
-             * クリックイベントハンドラ
-             * @default () => {}
-             */ onClick?: () => void;
-        /**
-             * ボタンの非活性状態
-             * @default false
-             */ disabled?: 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 ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Button: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * ボタンカラー、CCLVividColorの中から選ぶ
+       * @default --strawberry-pink
+       */ bgColor?: ColorVar;
+    /**
+       * ボタンの中に表示するテキスト
+       * @default Button
+       */ label?: string;
+    /**
+       * クリックイベントハンドラ
+       * @default () => {}
+       */ onClick?: () => void;
+    /**
+       * ボタンの非活性状態
+       * @default false
+       */ disabled?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;

package/dist/Card.svelte

@@ -1,88 +1,123 @@
-<script>import { CCLPastelColor, CCLVividColor } from "./const/config";
-export let borderColor;
-export let src;
-export let altText;
-export let title;
-export let cardText;
-function getBodyColor(borderColor2) {
-  switch (borderColor2) {
-    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';
+
+  /**
+   * 枠線の色
+   * @default --strawberry-pink
+   * @type string
+   */
+  export let borderColor: string;
+
+  /**
+   * 画像ソース
+   * @type string
+   */
+  export let src: string;
+
+  /**
+   * alt属性に指定する値
+   * @type string
+   */
+  export let altText: string;
+
+  /**
+   * 記事の見出し
+   * @type string
+   */
+  export let title: string;
+
+  /**
+   * カードの詳細テキスト(140字程度推奨)
+   * @type string
+   */
+  export let cardText: string;
+
+  /**
+   * 枠線の色に応じた背景色を取得する関数
+   * @param borderColor - 枠線の色
+   * @returns 背景色
+   */
+  function getBodyColor(borderColor: string): string {
+    switch (borderColor) {
+      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(borderColor);
+
+  // 背景色を取得
+  $: bodyColor = getBodyColor(borderColor);
 </script>
 
 <div class="CardWrapper" style="--border-color: var({borderColor})">
-	<img class="CardImage" {src} alt={altText} />
-	<div class="CardInfo" style="--background-color: var({bodyColor});">
-		<div class="CardTextWrapper">
-			<h2 class="CardTitle">{title}</h2>
-			<span class="CardText">{cardText}</span>
-		</div>
-	</div>
+  <img class="CardImage" {src} alt={altText} />
+  <div class="CardInfo" style="--background-color: var({bodyColor});">
+    <div class="CardTextWrapper">
+      <h2 class="CardTitle">{title}</h2>
+      <span class="CardText">{cardText}</span>
+    </div>
+  </div>
 </div>
 
 <style>
-	.CardWrapper {
-		height: 500px;
-		width: 300px;
-		position: relative;
-		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
-		border-radius: 25px;
-		border: 5px solid var(--border-color);
-		z-index: -1;
-	}
+  .CardWrapper {
+    height: 500px;
+    width: 300px;
+    position: relative;
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
+    border-radius: 25px;
+    border: 5px solid var(--border-color);
+    z-index: -1;
+  }
 
-	.CardImage {
-		height: auto;
-		max-width: 100%;
-		top: 0;
-		position: absolute;
-		border-top-left-radius: 20px;
-		border-top-right-radius: 20px;
-	}
+  .CardImage {
+    height: auto;
+    max-width: 100%;
+    top: 0;
+    position: absolute;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+  }
 
-	.CardInfo {
-		height: 195px;
-		width: 300px;
-		position: absolute;
-		background: var(--background-color);
-		top: 300px;
-		border-bottom-left-radius: 20px;
-		border-bottom-right-radius: 20px;
-		border-top: 5px solid var(--border-color);
-		z-index: 1;
-	}
+  .CardInfo {
+    height: 195px;
+    width: 300px;
+    position: absolute;
+    background: var(--background-color);
+    top: 300px;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    border-top: 5px solid var(--border-color);
+    z-index: 1;
+  }
 
-	.CardTextWrapper {
-		height: auto;
-		max-width: 95%;
-		position: absolute;
-		top: -5%;
-		left: 5%;
-		overflow-wrap: break-word;
-	}
+  .CardTextWrapper {
+    height: auto;
+    max-width: 95%;
+    position: absolute;
+    top: -5%;
+    left: 5%;
+    overflow-wrap: break-word;
+  }
 
-	.CardTitle {
-		color: var(--border-color);
-	}
+  .CardTitle {
+    color: var(--border-color);
+  }
 
-	.CardText {
-		color: var(--wrap-grey);
-		text-overflow: ellipsis;
-		overflow: hidden;
-	}
+  .CardText {
+    color: var(--wrap-grey);
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 </style>

package/dist/Card.svelte.d.ts

@@ -1,38 +1,40 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * 枠線の色
-             * @default --strawberry-pink
-             * @type string
-             */ borderColor: string;
-        /**
-             * 画像ソース
-             * @type string
-             */ src: string;
-        /**
-             * alt属性に指定する値
-             * @type string
-             */ altText: string;
-        /**
-             * 記事の見出し
-             * @type string
-             */ title: string;
-        /**
-             * カードの詳細テキスト(140字程度推奨)
-             * @type string
-             */ cardText: 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 CardProps = typeof __propDef.props;
-export type CardEvents = typeof __propDef.events;
-export type CardSlots = typeof __propDef.slots;
-export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Card: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * 枠線の色
+       * @default --strawberry-pink
+       * @type string
+       */ borderColor: string;
+    /**
+       * 画像ソース
+       * @type string
+       */ src: string;
+    /**
+       * alt属性に指定する値
+       * @type string
+       */ altText: string;
+    /**
+       * 記事の見出し
+       * @type string
+       */ title: string;
+    /**
+       * カードの詳細テキスト(140字程度推奨)
+       * @type string
+       */ cardText: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Card = InstanceType<typeof Card>;
+export default Card;

package/dist/Carousel.svelte

@@ -1,75 +1,100 @@
-<script context="module"></script>
+<script context="module" lang="ts">
+  export interface Imgsrc {
+    src: string;
+    alt: string;
+  }
+</script>
+
+<script lang="ts">
+  /**
+   * Image data
+   * Provide an array of objects containing image URL and alt text
+   * @type Array<Imgsrc>
+   */
+  export let src: Array<Imgsrc>;
+
+  /**
+   * Width of the carousel component
+   * @type string
+   */
+  export let csWidth: string;
+
+  let currentIndex = 0;
+
+  /**
+   * Move to the next slide
+   */
+  const nextSlide = () => {
+    if (src.length === 0) return;
+    currentIndex = (currentIndex + 1) % src.length;
+  };
 
-<script>export let src;
-export let csWidth;
-let currentIndex = 0;
-const nextSlide = () => {
-  if (src.length === 0) return;
-  currentIndex = (currentIndex + 1) % src.length;
-};
-const prevSlide = () => {
-  if (src.length === 0) return;
-  currentIndex = (currentIndex - 1 + src.length) % src.length;
-};
+  /**
+   * Move to the previous slide
+   */
+  const prevSlide = () => {
+    if (src.length === 0) return;
+    currentIndex = (currentIndex - 1 + src.length) % src.length;
+  };
 </script>
 
 <div
-	class="carouselWrapper"
-	style="--carousel-width: {csWidth}; --translate-x: calc(-{currentIndex} * 100%)"
+  class="carouselWrapper"
+  style="--carousel-width: {csWidth}; --translate-x: calc(-{currentIndex} * 100%)"
 >
-	<div class="slides">
-		{#each src as item, index}
-			<img class="slide" src={item.src} alt={item.alt} />
-		{/each}
-	</div>
-	<div class="buttons">
-		<button on:click={prevSlide}>❮</button>
-		<button on:click={nextSlide}>❯</button>
-	</div>
+  <div class="slides">
+    {#each src as item, index}
+      <img class="slide" src={item.src} alt={item.alt} />
+    {/each}
+  </div>
+  <div class="buttons">
+    <button on:click={prevSlide}>❮</button>
+    <button on:click={nextSlide}>❯</button>
+  </div>
 </div>
 
 <style>
-	.carouselWrapper {
-		position: relative;
-		overflow: hidden;
-		width: var(--carousel-width);
-	}
-	.slides {
-		display: flex;
-		transition: transform 0.5s ease-in-out;
-		transform: translateX(var(--translate-x));
-	}
-	.slide {
-		min-width: 100%;
-	}
-	.buttons {
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 100%;
-	}
-	.buttons button:first-child {
-		position: absolute;
-		left: 20px;
-		z-index: 1;
-	}
-	.buttons button:last-child {
-		position: absolute;
-		right: 20px;
-		z-index: 1;
-	}
-	button {
-		background: white;
-		color: black;
-		border: none;
-		padding: 10px;
-		cursor: pointer;
-		border-radius: 50%;
-		width: 40px;
-		height: 40px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-	}
+  .carouselWrapper {
+    position: relative;
+    overflow: hidden;
+    width: var(--carousel-width);
+  }
+  .slides {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+    transform: translateX(var(--translate-x));
+  }
+  .slide {
+    min-width: 100%;
+  }
+  .buttons {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+  }
+  .buttons button:first-child {
+    position: absolute;
+    left: 20px;
+    z-index: 1;
+  }
+  .buttons button:last-child {
+    position: absolute;
+    right: 20px;
+    z-index: 1;
+  }
+  button {
+    background: white;
+    color: black;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  }
 </style>