@lism-css/ui 0.2.2 → 0.8.0

package/src/components/Modal/setModal.ts

@@ -1,105 +1,101 @@
-// オープンした時のトリガー要素を記憶する（focusを戻す）
-let THE_TRIGGER: HTMLElement | null = null;
-
-// モーダルのアニメーションが完了するのを待つ.
-const waitAnimation = async (element: HTMLElement): Promise<void> => {
-	// （子要素も取得する場合は { subtree: true } を指定）
-	const animations = element.getAnimations();
-
-	if (animations.length > 0) {
-		// allSettled を使うことで、キャンセルされた場合もrejectせずに完了扱いになる
-		await Promise.allSettled(animations.map((a) => a.finished));
-	}
-};
-
-async function modalOpen(modal: HTMLDialogElement): Promise<void> {
-	// すでに open & data-is-open が付いていれば何もしない（連打防止）
-	if (modal.open && modal.dataset.isOpen) return;
-
-	// showModal() でモーダルを開く（ open 属性の付与）
-	modal.showModal();
-
-	// 次フレームで data-is-open を付与（CSS側でフェードインアニメーション開始）
-	requestAnimationFrame(() => {
-		modal.dataset.isOpen = '1';
-	});
-}
-async function modalClose(modal: HTMLDialogElement): Promise<void> {
-	// すでに閉じている場合は何もしない
-	if (undefined === modal.dataset.isOpen) {
-		return;
-	}
-
-	// data-open 属性を削除（CSS側でフェードアウトアニメーション開始）
-	delete modal.dataset.isOpen;
-
-	// アニメーション完了を待機
-	await waitAnimation(modal);
-
-	// アニメーション終了後、dialog を閉じる（open属性の削除）
-	modal.close();
-}
+import { waitAnimation } from '../../helper/animation';
 
+/**
+ * モーダルの開閉イベントを設定する
+ */
 export function setEvent(modal: HTMLDialogElement): void {
 	// modalがない、またはidがない場合は処理を終了
 	if (!modal || !modal.id) return;
 
+	// オープンした時のトリガー要素を記憶する（data属性を戻すため）
+	let theTrigger: HTMLElement | null = null;
+
 	// モーダルを開くトリガーと閉じるトリガーを取得
-	const openTriggers: NodeListOf<HTMLElement> = document.querySelectorAll(`[data-modal-open="${modal.id}"]`);
-	const closeTriggers: NodeListOf<HTMLElement> = modal.querySelectorAll(`[data-modal-close="${modal.id}"]`);
+	const openTriggers = document.querySelectorAll<HTMLElement>(`[data-modal-open="${modal.id}"]`);
+	const closeTriggers = modal.querySelectorAll<HTMLElement>(`[data-modal-close="${modal.id}"]`);
 
-	// 自身にクローズイベントを追加(余白部分をクリックしても閉じるように)
-	modal.addEventListener('click', (e) => {
-		if (e.target === modal) {
-			modalClose(modal);
-		}
-	});
+	/**
+	 * ダイアログを開く処理
+	 *   Point: showModal() してから、CSSアニメーション用の data-is-open属性を付与する
+	 */
+	const openDialog = () => {
+		// すでに open & data-is-open が付いていれば何もしない（連打防止）
+		if (modal.open && modal.hasAttribute('data-is-open')) return;
 
-	// closeボタンにイベント登録
-	modal.addEventListener('close', (e) => {
-		if (THE_TRIGGER) {
-			// THE_TRIGGER.focus(); // showModal()ではフォーカス戻す必要なし
+		// showModal() でモーダルを開く（ open 属性の付与）
+		modal.showModal();
 
-			// オープンボタンのdata属性削除
-			delete THE_TRIGGER.dataset.targetOpened;
-			THE_TRIGGER = null;
+		// 次フレームで data-is-open を付与（CSS側でフェードインアニメーション開始）
+		requestAnimationFrame(() => {
+			modal.dataset.isOpen = '1';
+		});
+	};
+
+	/**
+	 * ダイアログを閉じる処理
+	 *   Point: data-is-open属性を削除してCSSアニメーションが終わってから、close() を実行する
+	 */
+	const closeDialog = async (): Promise<void> => {
+		// すでに閉じている場合は何もしない
+		if (!modal.hasAttribute('data-is-open')) {
+			return;
 		}
 
-		// モーダルを閉じる
-		modalClose(modal);
-	});
+		// data-is-open 属性を削除（CSS側でフェードアウトアニメーション開始）
+		modal.removeAttribute('data-is-open');
 
-	// openボタンにイベント登録追加
+		// アニメーション完了を待機
+		await waitAnimation(modal);
+
+		// アニメーション終了後、dialog を閉じる（open属性の削除）
+		modal.close();
+	};
+
+	// openボタンにイベント登録
 	openTriggers.forEach((trigger) => {
-		trigger?.addEventListener('click', (e) => {
+		trigger?.addEventListener('click', () => {
 			// button側にもdata属性付与
 			trigger.dataset.targetOpened = '1';
-			THE_TRIGGER = trigger; // close() 時にdata属性削除するために記憶
+			theTrigger = trigger; // close() 時にdata属性削除するために記憶
 
 			// モーダルを開く
-			modalOpen(modal);
+			openDialog();
 		});
 	});
 
-	// 閉じるトリガーにイベントリスナーを追加
+	// closeボタンにイベント登録
 	closeTriggers.forEach((trigger) => {
-		trigger?.addEventListener('click', (e) => {
-			modalClose(modal);
+		trigger?.addEventListener('click', () => {
+			void closeDialog();
 		});
 	});
 
+	// 余白クリックで閉じる
+	modal.addEventListener('click', (e) => {
+		if (e.target === modal) {
+			void closeDialog();
+		}
+	});
+
+	// close() 完了時にトリガーのdata属性をリセット
+	modal.addEventListener('close', () => {
+		if (theTrigger) {
+			theTrigger.removeAttribute('data-target-opened');
+			theTrigger = null;
+		}
+	});
+
 	/**
 	 * ESCキーで閉じた時もアニメーションを実行する処理
 	 */
 	modal.addEventListener('cancel', (e) => {
 		e.preventDefault(); // デフォルトの即時 close() を防ぐ
-		modalClose(modal); // 自分で用意したクローズ処理
+		void closeDialog(); // 自分で用意したクローズ処理
 	});
 }
 
 const setModal = () => {
-	const modals = document.querySelectorAll('.d--modal');
-
+	const modals = document.querySelectorAll('.c--modal');
 	modals?.forEach((target) => {
 		setEvent(target as HTMLDialogElement);
 	});

package/src/components/Tabs/_style.css

@@ -1,14 +1,14 @@
 @layer lism.modules {
-	.d--tabs {
+	.c--tabs {
 		display: grid;
 		grid: 'list' 'panel' / 100%;
 	}
-	.d--tabs_list {
+	.c--tabs_list {
 		grid-area: list;
 		display: flex;
 		overflow-x: auto;
 	}
-	.d--tabs_tab {
+	.c--tabs_tab {
 		&[aria-selected='true'] {
 			--_notSelected: ;
 		}
@@ -21,7 +21,7 @@
 		}
 	}
 
-	.d--tabs_panel {
+	.c--tabs_panel {
 		grid-area: panel;
 		width: 100%;
 

package/src/components/Tabs/astro/Tab.astro

@@ -12,6 +12,6 @@ const { tabId = 'tab', index = 0, isActive, ...props } = Astro.props;
 const controlId = `${tabId}-${index}`;
 ---
 
-<Lism tag='button' lismClass='d--tabs_tab' setPlain role='tab' aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
+<Lism tag='button' lismClass='c--tabs_tab' setPlain role='tab' aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
 	<slot />
 </Lism>

package/src/components/Tabs/astro/TabList.astro

@@ -3,6 +3,6 @@
 import { Lism } from 'lism-css/astro';
 ---
 
-<Lism lismClass='d--tabs_list' role='tablist' {...Astro.props}>
+<Lism lismClass='c--tabs_list' role='tablist' {...Astro.props}>
 	<slot />
 </Lism>

package/src/components/Tabs/astro/TabPanel.astro

@@ -11,6 +11,6 @@ const { tabId = 'tab', index = 0, isActive = false, ...props } = Astro.props;
 const controlId = `${tabId}-${index}`;
 ---
 
-<Lism id={controlId} role='tabpanel' aria-hidden={isActive ? 'false' : 'true'} lismClass='d--tabs_panel' {...props}>
+<Lism id={controlId} role='tabpanel' aria-hidden={isActive ? 'false' : 'true'} lismClass='c--tabs_panel' {...props}>
 	<slot />
 </Lism>

package/src/components/Tabs/astro/Tabs.astro

@@ -4,7 +4,8 @@ import { Lism } from 'lism-css/astro';
 // import Tab from './Tab.astro';
 // import TabPanel from './TabPanel.astro';
 import TabList from './TabList.astro';
-import { uuidv4 } from './helper.js';
+import uuid from '../../../helper/uuid.js';
+
 import transformTabitems from './transformTabitems.js';
 import getTabsProps from '../getProps';
 
@@ -22,7 +23,7 @@ import '../_style.css';
 const { defaultIndex = 1, tabId = '', listProps = {}, ...props } = Astro.props || {};
 
 // tabID生成
-const theTabID = tabId ? tabId : uuidv4();
+const theTabID = tabId ? tabId : uuid();
 
 // 子要素の方から順番に処理されていくので、文字列処理でデータを抽出
 const { btns, panels } = transformTabitems(await Astro.slots.render('default'), theTabID, defaultIndex);
@@ -50,7 +51,7 @@ const hasItems = btns.length > 0;
 
 <script>
 	import setTabs from '../setTabs';
-	const tabsAll = document.querySelectorAll('.d--tabs');
+	const tabsAll = document.querySelectorAll('.c--tabs');
 	tabsAll.forEach((tabs) => {
 		setTabs(tabs);
 	});

package/src/components/Tabs/getProps.js

@@ -2,7 +2,7 @@ import atts from 'lism-css/lib/helper/atts';
 
 export default function getTabsProps({ lismClass, ...props }) {
 	return {
-		lismClass: atts(lismClass, 'd--tabs'),
+		lismClass: atts(lismClass, 'c--tabs'),
 		...props,
 	};
 }

package/src/components/Tabs/react/Tab.jsx

@@ -7,7 +7,7 @@ export default function Tab({ tabId = 'tab', index = 0, isActive = false, ...pro
 	return (
 		<Lism
 			tag='button'
-			lismClass='d--tabs_tab'
+			lismClass='c--tabs_tab'
 			setPlain
 			role='tab'
 			aria-controls={controlId}

package/src/components/Tabs/react/TabList.jsx

@@ -2,5 +2,5 @@ import { Lism } from 'lism-css/react';
 
 export default function TabList(props) {
 	// jc: 's',
-	return <Lism lismClass='d--tabs_list' role='tablist' {...props} />;
+	return <Lism lismClass='c--tabs_list' role='tablist' {...props} />;
 }

package/src/components/Tabs/react/TabPanel.jsx

@@ -4,5 +4,5 @@ import { Lism } from 'lism-css/react';
 export default function TabPanel({ tabId = 'tab', isActive = false, index = 0, ...props }) {
 	const controlId = `${tabId}-${index}`;
 
-	return <Lism id={controlId} role='tabpanel' aria-hidden={isActive ? 'false' : 'true'} lismClass='d--tabs_panel' {...props} />;
+	return <Lism id={controlId} role='tabpanel' aria-hidden={isActive ? 'false' : 'true'} lismClass='c--tabs_panel' {...props} />;
 }

package/src/components/Tabs/script.js

@@ -1,7 +1,7 @@
 import setTabs from './setTabs.js';
 
 document.addEventListener('DOMContentLoaded', function () {
-	const tabsAll = document.querySelectorAll('.d--tabs');
+	const tabsAll = document.querySelectorAll('.c--tabs');
 	tabsAll.forEach((tabs) => {
 		setTabs(tabs);
 	});

package/src/components/astro.ts

@@ -5,6 +5,7 @@ export { default as Badge } from './Badge/astro';
 export { default as Button } from './Button/astro';
 export { default as Callout } from './Callout/astro';
 export { default as Chat } from './Chat/astro';
+export { default as Details } from './Details/astro';
 export { default as Modal } from './Modal/astro';
 export { default as NavMenu } from './NavMenu/astro';
 export { default as ShapeDivider } from './ShapeDivider/astro';

package/src/components/react.ts

@@ -5,6 +5,7 @@ export { default as Badge } from './Badge/react';
 export { default as Button } from './Button/react';
 export { default as Callout } from './Callout/react';
 export { default as Chat } from './Chat/react';
+export { default as Details } from './Details/react';
 export { default as Modal } from './Modal/react';
 export { default as NavMenu } from './NavMenu/react';
 export { default as ShapeDivider } from './ShapeDivider/react';

package/src/helper/animation.ts

@@ -0,0 +1,36 @@
+// アニメーション完了時のステータス
+type AnimationStatus = 'none' | 'finished' | 'canceled';
+
+/**
+ * 1フレーム待機する（requestAnimationFrame のPromiseラッパー）
+ */
+export const waitFrame = (): Promise<number> => new Promise((resolve) => requestAnimationFrame(resolve));
+
+/**
+ * 要素のアニメーションが完了するのを待つ
+ * @returns アニメーションの結果ステータス
+ *   - 'none': アニメーションが実行されていなかった
+ *   - 'finished': すべてのアニメーションが正常に完了
+ *   - 'canceled': pause() 等でキャンセルされたアニメーションがあった
+ */
+export const waitAnimation = async (el: HTMLElement): Promise<AnimationStatus> => {
+	const animations = el.getAnimations();
+
+	// アニメーションがなければ 'none' を返す
+	if (animations.length === 0) return 'none';
+
+	// allSettled を使うことで、キャンセル時も例外にならずに結果を取得できる
+	const results = await Promise.allSettled(animations.map((a) => a.finished));
+
+	// （ pause()で止めた時用 ）rejected があれば 'canceled'
+	return results.every((r) => r.status === 'fulfilled') ? 'finished' : 'canceled';
+};
+
+/**
+ * 実行中のアニメーションがあれば一旦停止させる
+ */
+export const maybePauseAnimation = (el: HTMLElement): void => {
+	const animations = el.getAnimations();
+	if (animations.length === 0) return;
+	animations.forEach((a) => a.pause());
+};

package/src/{components/Tabs/astro/helper.js → helper/uuid.js}

@@ -1,5 +1,5 @@
 // https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
-export function uuidv4() {
+export default function uuidv4() {
 	return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
 		(c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
 	);

package/dist/components/Tabs/astro/helper.d.ts

@@ -1 +0,0 @@
-export function uuidv4(): string;

package/src/components/Accordion/astro/AccBody.astro

@@ -1,13 +0,0 @@
----
-// import type { LismProps } from 'lism-css/types';
-import { Lism } from 'lism-css/astro';
-import { defaultProps } from '../getProps';
-
-const { flow, innerProps, ...props } = Astro.props || {};
----
-
-<Lism {...defaultProps.body} {...props}>
-	<Lism layout='flow' flow={flow} {...defaultProps.inner} {...innerProps}>
-		<slot />
-	</Lism>
-</Lism>

package/src/components/Accordion/astro/AccHeader.astro

@@ -1,13 +0,0 @@
----
-// import type { LismProps } from 'lism-css/types';
-import { Lism } from 'lism-css/astro';
-import { defaultProps } from '../getProps';
-
-// interface Props extends LismProps {}
-
-const props = Astro.props || {};
----
-
-<Lism tag='summary' {...defaultProps.header} {...props}>
-	<slot />
-</Lism>

package/src/components/Accordion/astro/AccHeaderLabel.astro

@@ -1,12 +0,0 @@
----
-import AccHeader from './AccHeader.astro';
-import AccLabel from './AccLabel.astro';
-import AccIcon from './AccIcon.astro';
----
-
-<AccHeader {...Astro.props || {}}>
-	<AccLabel>
-		<slot />
-	</AccLabel>
-	<AccIcon />
-</AccHeader>

package/src/components/Accordion/astro/AccIcon.astro

@@ -1,17 +0,0 @@
----
-import { Lism, Icon } from 'lism-css/astro';
-import { getAccIconProps } from '../getProps';
-
-// Propsの定義
-// interface Props extends LismProps {
-// 	icon?: string;
-// 	size?: string;
-// 	iconProps?: Object;
-// }
-
-const { viewBox, icon = 'caret-down', ...props } = Astro.props || {};
----
-
-<Lism {...getAccIconProps(props)}>
-	{Astro.slots.has('default') ? <slot /> : <Icon viewBox={viewBox} icon={icon} />}
-</Lism>

package/src/components/Accordion/astro/Accordion.astro

@@ -1,22 +0,0 @@
----
-// import type { LismProps } from 'lism-css/types';
-import getLismProps from 'lism-css/lib/getLismProps';
-import { getAccProps } from '../getProps';
-
-import '../_style.css';
-
-// Propsの定義
-// interface Props extends LismProps {
-// 	duration?: string | number;
-// }
-const props = Astro.props || {};
----
-
-<details {...getLismProps(getAccProps(props))}>
-	<slot />
-</details>
-
-<script>
-	import setAccordion from '../setAccordion';
-	setAccordion();
-</script>