cclkit4svelte 1.2.7 → 2.0.1

package/dist/Toggle.svelte

@@ -0,0 +1,76 @@
+<script>import "./const/variables.css";
+import { CCLVividColor } from "./const/config";
+export let checked = false;
+export let color = CCLVividColor.SODA_BLUE;
+export let disabled = false;
+export let onChange = () => {
+};
+function handleChange(event) {
+  if (disabled) {
+    return;
+  }
+  const target = event.target;
+  checked = target.checked;
+  onChange();
+}
+</script>
+
+<label class="switchWrapper" class:disabled={disabled}>
+	<input type="checkbox" {checked} on:change={handleChange} {disabled} />
+	<span class="slider" style="--bg-color: var({color});" />
+</label>
+
+<style>
+	.switchWrapper {
+		position: relative;
+		display: inline-block;
+		width: 50px;
+		height: 28px;
+		cursor: pointer;
+	}
+	.switchWrapper.disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.switchWrapper input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.slider {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #ccc;
+		transition: 0.4s;
+		border-radius: 28px;
+	}
+
+	.slider:before {
+		position: absolute;
+		content: '';
+		height: 20px;
+		width: 20px;
+		left: 4px;
+		bottom: 4px;
+		background-color: white;
+		transition: 0.4s;
+		border-radius: 50%;
+	}
+
+	input:checked + .slider {
+		background-color: var(--bg-color);
+	}
+
+	input:focus + .slider {
+		box-shadow: 0 0 1px var(--bg-color);
+	}
+
+	input:checked + .slider:before {
+		transform: translateX(22px);
+	}
+</style>

package/dist/Toggle.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * トグルスイッチの状態
+             * @default false
+             * @type boolean
+             */ checked?: boolean;
+        /**
+             * トグルスイッチの色
+             * @default CCLVividColor.SODA_BLUE
+             * @type string
+             */ color?: string;
+        /**
+             * 非活性状態
+             * @default false
+             * @type boolean
+             */ disabled?: boolean;
+        /**
+             * 状態が変更されたときのイベントハンドラ
+             * @type {() => void}
+             */ onChange?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
+}
+export {};

package/dist/Tooltip.svelte

@@ -0,0 +1,130 @@
+<script>import { CCLVividColor } from "./const/config";
+export let text;
+export let position = "top";
+export let disabled = false;
+export let backgroundColor = CCLVividColor.WRAP_GREY;
+const tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+</script>
+
+<div class="tooltip-trigger" data-testid="tooltip-trigger" tabindex="0" aria-describedby={!disabled ? tooltipId : undefined}>
+  <slot />
+  <span
+    {...{id: tooltipId}}
+    style:--tooltip-background-color={backgroundColor.startsWith('--') ? `var(${backgroundColor})` : backgroundColor}
+    class="tooltip-content"
+    data-testid="tooltip-content"
+    class:disabled
+    class:top={position === 'top'}
+    class:bottom={position === 'bottom'}
+    class:left={position === 'left'}
+    class:right={position === 'right'}
+    role="tooltip"
+  >
+    {text}
+  </span>
+</div>
+
+<style>
+  .tooltip-trigger {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .tooltip-content {
+    position: absolute;
+    z-index: 10;
+    background-color: var(--tooltip-background-color);
+    color: white;
+    padding: 0.5em 1em;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    white-space: nowrap;
+    /* デフォルトは非表示 */
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.2s, visibility 0.2s;
+  }
+
+  /* disabledの場合は完全に非表示 */
+  .tooltip-content.disabled {
+    display: none;
+  }
+
+  /* ホバーまたはフォーカスで表示 */
+  .tooltip-trigger:hover .tooltip-content,
+  .tooltip-trigger:focus .tooltip-content {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  /* 吹き出しの矢印 */
+  .tooltip-content::after {
+    content: '';
+    position: absolute;
+    border-style: solid;
+  }
+
+  /* --- ポジションごとのスタイル --- */
+
+  /* 上に表示 */
+  .tooltip-content.top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 8px;
+  }
+  .tooltip-content.top::after {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-color: var(--tooltip-background-color) transparent transparent transparent;
+  }
+
+  /* 下に表示 */
+  .tooltip-content.bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 8px;
+  }
+  .tooltip-content.bottom::after {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-color: transparent transparent var(--tooltip-background-color) transparent;
+  }
+
+  /* 左に表示 */
+  .tooltip-content.left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+  }
+  .tooltip-content.left::after {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 5px;
+    border-color: transparent transparent transparent var(--tooltip-background-color);
+  }
+
+  /* 右に表示 */
+  .tooltip-content.right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 8px;
+  }
+  .tooltip-content.right::after {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 5px;
+    border-color: transparent var(--tooltip-background-color) transparent transparent;
+  }
+</style>

package/dist/Tooltip.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+        position?: "top" | "bottom" | "left" | "right";
+        disabled?: boolean;
+        backgroundColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/dist/const/config.d.ts

@@ -7,13 +7,18 @@ declare const CCLVividColor: {
     WRAP_GREY: string;
 };
 declare const CCLPastelColor: {
-    PEACH_PINK: string;
-    LEMON_YELLOW: string;
-    SUGAR_BLUE: string;
-    MATCHA_GREEN: string;
-    AKEBI_PURPLE: string;
-    CLOUD_GREY: string;
+    readonly PEACH_PINK: string;
+    readonly LEMON_YELLOW: string;
+    readonly SUGAR_BLUE: string;
+    readonly MATCHA_GREEN: string;
+    readonly AKEBI_PURPLE: string;
+    readonly CLOUD_GREY: string;
 };
+export declare enum ProgressBarHeight {
+    NARROW = "5px",
+    DEFAULT = "10px",
+    WIDE = "20px"
+}
 declare const HeaderHeight: {
     WIDE: string;
     NORMAL: string;

package/dist/const/config.js

@@ -1,4 +1,15 @@
-const CCLVividColor = {
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var CCLVividColor = {
     STRAWBERRY_PINK: '--strawberry-pink',
     PINEAPPLE_YELLOW: '--pineapple-yellow',
     SODA_BLUE: '--soda-blue',
@@ -6,7 +17,7 @@ const CCLVividColor = {
     GRAPE_PURPLE: '--grape-purple',
     WRAP_GREY: '--wrap-grey'
 };
-const CCLPastelColor = {
+var CCLPastelColorBase = {
     PEACH_PINK: '--peach-pink',
     LEMON_YELLOW: '--lemon-yellow',
     SUGAR_BLUE: '--sugar-blue',
@@ -14,7 +25,14 @@ const CCLPastelColor = {
     AKEBI_PURPLE: '--akebi-purple',
     CLOUD_GREY: '--cloud-grey'
 };
-const HeaderHeight = {
+var CCLPastelColor = __assign({}, CCLPastelColorBase);
+export var ProgressBarHeight;
+(function (ProgressBarHeight) {
+    ProgressBarHeight["NARROW"] = "5px";
+    ProgressBarHeight["DEFAULT"] = "10px";
+    ProgressBarHeight["WIDE"] = "20px";
+})(ProgressBarHeight || (ProgressBarHeight = {}));
+var HeaderHeight = {
     WIDE: '--hd-wide',
     NORMAL: '--hd-normal',
     NALLOW: '--hd-nallow'

package/dist/index.d.ts

@@ -7,4 +7,16 @@ export { default as Card } from './Card.svelte';
 export { default as Table } from './Table.svelte';
 export { default as Carousel } from './Carousel.svelte';
 export { default as CommonHeader } from './CommonHeader.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as RadioButton } from './RadioButton.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
 export { CCLVividColor, CCLPastelColor, HeaderHeight } from './const/config';
+export { default as Spinner } from './Spinner.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as Select } from './Select.svelte';
+export { default as ToolTip } from './Tooltip.svelte';
+export { default as Input } from './Input.svelte';

package/dist/index.js

@@ -8,4 +8,16 @@ export { default as Card } from './Card.svelte';
 export { default as Table } from './Table.svelte';
 export { default as Carousel } from './Carousel.svelte';
 export { default as CommonHeader } from './CommonHeader.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as RadioButton } from './RadioButton.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
 export { CCLVividColor, CCLPastelColor, HeaderHeight } from './const/config';
+export { default as Spinner } from './Spinner.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as Select } from './Select.svelte';
+export { default as ToolTip } from './Tooltip.svelte';
+export { default as Input } from './Input.svelte';

package/dist/scripts/date.js

@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon';
-const getYear = () => {
+var getYear = function () {
     return DateTime.now().year;
 };
 export { getYear };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cclkit4svelte",
-  "version": "1.2.7",
+  "version": "2.0.1",
   "author": "reiji1020 <sk@reiji1020.info>",
   "license": "MIT",
   "type": "module",
@@ -53,9 +53,10 @@
     "@storybook/sveltekit": "^8.5.8",
     "@storybook/test": "^8.5.8",
     "@storybook/test-runner": "^0.17.0",
-    "@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^1.30.4",
-    "@sveltejs/package": "^2.3.5",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/luxon": "^3.4.2",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
@@ -70,12 +71,12 @@
     "react-dom": "^18.3.1",
     "semantic-release": "^23.1.1",
     "storybook": "^8.5.8",
-    "svelte": "^4.2.19",
+    "svelte": "^4.2.7",
     "svelte-check": "^3.8.6",
     "svelte2tsx": "^0.6.27",
     "tslib": "^2.7.0",
-    "typescript": "^5.6.2",
-    "vite": "^4.5.5"
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
   },
   "volta": {
     "node": "20.11.1",