cclkit4svelte 2.0.0 → 2.0.1

package/dist/ProgressBar.svelte

@@ -0,0 +1,52 @@
+<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>
+
+<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}
+>
+  <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;
+  }
+</style>

package/dist/ProgressBar.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } 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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ProgressBarProps = typeof __propDef.props;
+export type ProgressBarEvents = typeof __propDef.events;
+export type ProgressBarSlots = typeof __propDef.slots;
+export default class ProgressBar extends SvelteComponentTyped<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
+}
+export {};

package/dist/Spinner.svelte

@@ -0,0 +1,31 @@
+<script>import { CCLVividColor } from "./const/config";
+export let size = "40px";
+export let color = CCLVividColor.STRAWBERRY_PINK;
+export let borderWidth = "4px";
+</script>
+
+<div
+  class="spinner"
+  style="width: {size}; height: {size}; border-width: {borderWidth}; --spinner-color: var({color});"
+  role="status"
+></div>
+
+<style>
+  .spinner {
+    display: inline-block;
+    border-radius: 50%;
+    border-style: solid;
+    border-color: #f3f3f3;
+    border-top-color: var(--spinner-color);
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/Spinner.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string;
+        color?: string;
+        borderWidth?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
+export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+}
+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,3 +1,14 @@
+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',
@@ -6,7 +17,7 @@ var CCLVividColor = {
     GRAPE_PURPLE: '--grape-purple',
     WRAP_GREY: '--wrap-grey'
 };
-var CCLPastelColor = {
+var CCLPastelColorBase = {
     PEACH_PINK: '--peach-pink',
     LEMON_YELLOW: '--lemon-yellow',
     SUGAR_BLUE: '--sugar-blue',
@@ -14,6 +25,13 @@ var CCLPastelColor = {
     AKEBI_PURPLE: '--akebi-purple',
     CLOUD_GREY: '--cloud-grey'
 };
+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',

package/dist/index.d.ts

@@ -13,3 +13,10 @@ 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

@@ -14,3 +14,10 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cclkit4svelte",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": "reiji1020 <sk@reiji1020.info>",
   "license": "MIT",
   "type": "module",