@14ch/svelte-ui 0.0.1

package/dist/utils/mobile.js

@@ -0,0 +1,47 @@
+/**
+ * Mobile detection and utilities
+ */
+// モバイルデバイス検出
+export const isMobileDevice = () => {
+    if (typeof window === 'undefined')
+        return false;
+    // User agent based detection
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    const mobileKeywords = ['mobile', 'android', 'iphone', 'ipad', 'tablet', 'touch'];
+    const isMobileUA = mobileKeywords.some((keyword) => userAgent.includes(keyword));
+    // Screen size based detection
+    const isSmallScreen = window.innerWidth <= 768;
+    // Touch capability detection
+    const hasTouchCapability = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    return isMobileUA || (isSmallScreen && hasTouchCapability);
+};
+// ビューポートサイズの取得
+export const getViewportSize = () => {
+    if (typeof window === 'undefined') {
+        return { width: 0, height: 0 };
+    }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight
+    };
+};
+// モバイルでのスクロール無効化
+export const disableBodyScroll = () => {
+    if (typeof document === 'undefined')
+        return () => { };
+    const originalStyle = window.getComputedStyle(document.body);
+    const originalOverflow = originalStyle.overflow;
+    const originalPosition = originalStyle.position;
+    document.body.style.overflow = 'hidden';
+    if (isMobileDevice()) {
+        document.body.style.position = 'fixed';
+        document.body.style.width = '100%';
+    }
+    return () => {
+        document.body.style.overflow = originalOverflow;
+        document.body.style.position = originalPosition;
+        if (isMobileDevice()) {
+            document.body.style.width = '';
+        }
+    };
+};

package/dist/utils/snackbar.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from 'svelte';
+export type SnackbarItem = {
+    id: string;
+    message?: string;
+    children?: Snippet;
+    type: 'info' | 'success' | 'warning' | 'error' | 'default';
+    variant?: 'filled' | 'outlined';
+    color?: string;
+    textColor?: string;
+    duration?: number;
+    position?: 'top' | 'bottom';
+    closable?: boolean;
+    actionLabel?: string;
+    onAction?: () => void;
+    onClose?: () => void;
+    createdAt: number;
+};
+export type SnackbarConfig = {
+    maxVisible?: number;
+    defaultDuration?: number;
+    defaultVariant?: 'filled' | 'outlined';
+    defaultPosition?: 'top' | 'bottom';
+};
+declare class SnackbarManager {
+    private _items;
+    private queue;
+    private config;
+    constructor(config?: SnackbarConfig);
+    get items(): SnackbarItem[];
+    configure(config: SnackbarConfig): void;
+    setDefaultPosition(position: 'top' | 'bottom'): void;
+    setDefaults(config: {
+        position?: 'top' | 'bottom';
+        maxVisible?: number;
+        defaultDuration?: number;
+        defaultVariant?: 'filled' | 'outlined';
+    }): void;
+    private show;
+    success(message: string, options?: Partial<Omit<SnackbarItem, 'id' | 'type' | 'message' | 'createdAt'>>): string;
+    error(message: string, options?: Partial<Omit<SnackbarItem, 'id' | 'type' | 'message' | 'createdAt'>>): string;
+    warning(message: string, options?: Partial<Omit<SnackbarItem, 'id' | 'type' | 'message' | 'createdAt'>>): string;
+    info(message: string, options?: Partial<Omit<SnackbarItem, 'id' | 'type' | 'message' | 'createdAt'>>): string;
+    default(message: string, options?: Partial<Omit<SnackbarItem, 'id' | 'type' | 'message' | 'createdAt'>>): string;
+    custom(children: Snippet, type: SnackbarItem['type'], options?: Partial<Omit<SnackbarItem, 'id' | 'type' | 'children' | 'createdAt'>>): string;
+    remove(id: string): void;
+    clear(): void;
+    getItemsByPosition(position: 'top' | 'bottom'): SnackbarItem[];
+}
+export declare const snackbarManager: SnackbarManager;
+export declare const snackbar: SnackbarManager;
+export default snackbarManager;

package/dist/utils/snackbar.svelte.js

@@ -0,0 +1,107 @@
+// src/lib/utils/snackbar.ts
+class SnackbarManager {
+    _items = $state([]);
+    queue = $state([]);
+    config = $state({
+        maxVisible: 5,
+        defaultDuration: 3000,
+        defaultVariant: 'filled',
+        defaultPosition: 'bottom'
+    });
+    constructor(config) {
+        if (config) {
+            this.config = { ...this.config, ...config };
+        }
+    }
+    // 現在表示中のアイテムを取得
+    get items() {
+        return this._items;
+    }
+    // 設定更新
+    configure(config) {
+        this.config = { ...this.config, ...config };
+    }
+    // デフォルト位置を設定
+    setDefaultPosition(position) {
+        this.config.defaultPosition = position;
+    }
+    // デフォルト設定を一括更新
+    setDefaults(config) {
+        if (config.position !== undefined)
+            this.config.defaultPosition = config.position;
+        if (config.maxVisible !== undefined)
+            this.config.maxVisible = config.maxVisible;
+        if (config.defaultDuration !== undefined)
+            this.config.defaultDuration = config.defaultDuration;
+        if (config.defaultVariant !== undefined)
+            this.config.defaultVariant = config.defaultVariant;
+    }
+    // 基本的なshow メソッド
+    show(options) {
+        const id = `snackbar-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const item = {
+            id,
+            variant: this.config.defaultVariant,
+            duration: this.config.defaultDuration,
+            position: this.config.defaultPosition,
+            ...options,
+            createdAt: Date.now()
+        };
+        // 最大表示数を超えた場合、キューに追加
+        if (this._items.length >= this.config.maxVisible) {
+            this.queue = [...this.queue, item];
+            return id;
+        }
+        // 表示数以内の場合は即座に表示
+        this._items = [...this._items, item];
+        return id;
+    }
+    // タイプ別メソッド
+    success(message, options) {
+        return this.show({ message, type: 'success', ...options });
+    }
+    error(message, options) {
+        return this.show({ message, type: 'error', ...options });
+    }
+    warning(message, options) {
+        return this.show({ message, type: 'warning', ...options });
+    }
+    info(message, options) {
+        return this.show({ message, type: 'info', ...options });
+    }
+    default(message, options) {
+        return this.show({ message, type: 'default', ...options });
+    }
+    // カスタムコンテンツ用メソッド
+    custom(children, type, options) {
+        return this.show({ children, type, ...options });
+    }
+    // 削除メソッド
+    remove(id) {
+        const filteredItems = this._items.filter((item) => item.id !== id);
+        // キューに待機中のアイテムがあり、表示数に余裕がある場合は次を表示
+        if (this.queue.length > 0 && filteredItems.length < this.config.maxVisible) {
+            const nextItem = this.queue[0];
+            this.queue = this.queue.slice(1);
+            this._items = [...filteredItems, nextItem];
+        }
+        else {
+            this._items = filteredItems;
+        }
+    }
+    // 全削除メソッド
+    clear() {
+        this._items = [];
+        this.queue = [];
+    }
+    // 位置別のアイテムを取得
+    getItemsByPosition(position) {
+        return this._items.filter((item) => item.position === position);
+    }
+}
+// グローバルインスタンス
+export const snackbarManager = new SnackbarManager();
+// 後方互換性のため、snackbarとしてもエクスポート
+export const snackbar = snackbarManager;
+// デフォルトエクスポート（後方互換性のため）
+export default snackbarManager;

package/dist/utils/style.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Style utility functions
+ */
+/**
+ * Converts a number or string value to a CSS style value.
+ * If the value is a number, it appends 'px' to it.
+ * If the value is already a string, it returns as is.
+ *
+ * @param value - The value to convert (number or string)
+ * @returns CSS style value as string
+ *
+ * @example
+ * getStyleFromNumber(100) // "100px"
+ * getStyleFromNumber("50%") // "50%"
+ * getStyleFromNumber("2rem") // "2rem"
+ */
+export declare const getStyleFromNumber: (value: string | number | undefined, defaultValue?: string) => string | undefined;

package/dist/utils/style.js

@@ -0,0 +1,22 @@
+/**
+ * Style utility functions
+ */
+/**
+ * Converts a number or string value to a CSS style value.
+ * If the value is a number, it appends 'px' to it.
+ * If the value is already a string, it returns as is.
+ *
+ * @param value - The value to convert (number or string)
+ * @returns CSS style value as string
+ *
+ * @example
+ * getStyleFromNumber(100) // "100px"
+ * getStyleFromNumber("50%") // "50%"
+ * getStyleFromNumber("2rem") // "2rem"
+ */
+export const getStyleFromNumber = (value, defaultValue) => {
+    if (value === undefined || value === null) {
+        return defaultValue;
+    }
+    return typeof value === 'number' ? `${value}px` : value;
+};

package/package.json

@@ -0,0 +1,102 @@
+{
+	"name": "@14ch/svelte-ui",
+	"description": "Modern Svelte UI components library with TypeScript support",
+	"private": false,
+	"version": "0.0.1",
+	"type": "module",
+	"keywords": [
+		"svelte",
+		"ui",
+		"components",
+		"typescript",
+		"sveltekit",
+		"library"
+	],
+	"author": "14ch",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/iyodatakashi/svelte-ui.git"
+	},
+	"homepage": "https://github.com/iyodatakashi/svelte-ui#readme",
+	"bugs": {
+		"url": "https://github.com/iyodatakashi/svelte-ui/issues"
+	},
+	"main": "dist/index.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./styles": "./dist/assets/styles/import.scss",
+		"./styles/*": "./dist/assets/styles/*"
+	},
+	"files": [
+		"dist/components/",
+		"dist/types/",
+		"dist/utils/",
+		"dist/assets/",
+		"dist/index.js",
+		"dist/index.d.ts"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"package": "svelte-package",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run",
+		"test:browser": "vitest --config vitest.config.ts --run",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"prepublishOnly": "npm run package"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^4.1.1",
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@storybook/addon-a11y": "^9.1.5",
+		"@storybook/addon-docs": "^9.1.5",
+		"@storybook/addon-svelte-csf": "^5.0.8",
+		"@storybook/addon-themes": "^9.1.5",
+		"@storybook/addon-vitest": "^9.1.5",
+		"@storybook/sveltekit": "^9.1.5",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@types/node": "^20",
+		"@vitest/browser": "3.2.4",
+		"@vitest/coverage-v8": "^3.2.4",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-storybook": "^9.1.5",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"storybook": "^9.1.5",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.2.6",
+		"vitest": "3.2.4",
+		"vitest-browser-svelte": "^1.1.0"
+	},
+	"dependencies": {
+		"dayjs": "^1.11.13",
+		"dompurify": "^3.2.6",
+		"sass": "^1.89.2"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	}
+}