@lism-css/ui 0.2.2 → 0.8.0

package/src/components/Accordion/setAccordion.js

@@ -1,120 +1,146 @@
-// アニメーションが完了するのを待つ
-const waitAnimation = (details) => {
-	// アニメーション対象の要素を直接取得.（getAnimations({subtree: true}) は iOS Safari で動作しない場合があるので __body を直接監視）
-	const body = details.querySelector('.d--accordion_body');
-	const animations = body ? body.getAnimations() : [];
-
-	// allSettled を使うことで、キャンセル時も reject せずに完了する
-	return Promise.allSettled(animations.map((a) => a.finished));
+import { waitFrame, waitAnimation, maybePauseAnimation } from '../../helper/animation';
+
+// hidden を付け外しする時の値
+let ACCORDION_HIDDEN_VALUE = 'until-found';
+
+// アコーディオン要素から必要な要素を取得
+const getAccordionElements = (accordionItem) => {
+	const heading = accordionItem.querySelector('.c--accordion_heading');
+	const panel = accordionItem.querySelector('.c--accordion_panel');
+	return {
+		heading,
+		button: heading.querySelector('button'),
+		panel,
+		content: panel.querySelector('.c--accordion_content'),
+	};
 };
 
-// animationTime: [ms]
-const open = async (details) => {
-	// すでに開いている場合は何もしない
-	if (details.open && details.hasAttribute('data-opened')) return;
+// 親に data-allow-multiple がついていなければ、展開中のアコーディオンを閉じる
+//   Memo: 自身の除外処理はしていない( 開く動作の前に呼び出す & もし自分が含まれていても連打可能なため )
+const maybeCloseOpenedItems = (accordionItem) => {
+	const parent = accordionItem.parentNode;
+	if (!parent) return;
 
-	// open属性をセット
-	details.open = true;
+	// 親の data-allow-multiple 属性の有無をチェック
+	if (parent.hasAttribute('data-allow-multiple')) return;
 
-	// 次フレームで data-opened 属性を付与（CSS側でフェードインアニメーション開始）
-	requestAnimationFrame(() => {
-		details.setAttribute('data-opened', ''); // 属性の追加
-	});
+	// 開いているアコーディオンを取得して閉じる
+	parent.querySelectorAll(':scope > [data-opened]').forEach((_a) => closeAccordion(_a));
 };
 
-const close = async (details) => {
-	// すでに閉じている場合は何もしない
-	if (!details.open && !details.hasAttribute('data-opened')) return;
+async function openAccordion(accordionItem) {
+	const { panel, content, button } = getAccordionElements(accordionItem);
 
-	details.removeAttribute('data-opened'); // 属性を削除
+	// アニメーションがあれば一時停止
+	maybePauseAnimation(panel);
 
-	// アニメーションを待つ
-	await waitAnimation(details);
+	// hidden を削除
+	panel.removeAttribute('hidden');
 
-	// アニメーション完了後にopen属性 を除去。
-	details.open = false;
-};
+	// 1フレーム待機
+	await waitFrame();
 
-// 複数展開を許可するかどうかを、親要素の [data-multiple] でチェック.
-const getAllowMultiple = (details) => {
-	let allowMultiple = false;
-	const parent = details.parentNode;
-	if (null != parent) {
-		const dataMultiple = parent.dataset.multiple;
-		allowMultiple = 'disallow' !== dataMultiple;
-	}
-	return allowMultiple;
-};
+	// 次フレームで高さセット（ 目標の高さ = content の高さ ）
+	accordionItem.style.setProperty('--_panel-h', `${content.offsetHeight}px`);
 
-const onClick = (details, allowMultiple) => {
-	if (!details.open) {
-		if (!allowMultiple) {
-			// （複数展開が禁止されている場合）他の開いているアイテムがあるかどうかを先に探して閉じる
-			const parent = details.parentNode;
-			const openedItem = parent.querySelector(`[data-opened]`);
-			requestAnimationFrame(() => {
-				// 1フレーム待機（safariでは requestAnimationFrame() がないと動かなかった）
-				if (null != openedItem) close(openedItem);
-			});
-		}
-
-		// 開く処理
-		open(details);
-	} else if (details.open) {
-		// 閉じる処理
-		close(details);
+	// さらに1フレーム待機
+	await waitFrame();
+
+	// アニメーション開始
+	accordionItem.setAttribute('data-opened', '');
+	button.setAttribute('aria-expanded', 'true');
+
+	// アニメーションを待つ
+	const status = await waitAnimation(panel);
+
+	// アニメーションが最後まで完了した時、--_panel-h削除（高さセットしたままだとリサイズできない）
+	if ('canceled' !== status) {
+		accordionItem.style.removeProperty('--_panel-h');
 	}
-};
+}
 
-const onToggle = (details) => {
-	const hasOpen = details.open;
-	const hasDataOpen = details.hasAttribute('data-opened');
+async function closeAccordion(accordionItem) {
+	const { panel, button } = getAccordionElements(accordionItem);
 
-	// open はセットされたのに data-opened 属性がついてない時
-	if (hasOpen && !hasDataOpen) {
-		details.setAttribute('data-opened', '');
+	// アニメーションがあれば一時停止
+	maybePauseAnimation(panel);
+
+	// 現在の高さを一旦セットする
+	accordionItem.style.setProperty('--_panel-h', `${panel.offsetHeight}px`);
+
+	// 1フレーム待機
+	await waitFrame();
+
+	// 次フレームで属性を削除
+	accordionItem.removeAttribute('data-opened');
+	button.setAttribute('aria-expanded', 'false');
+
+	// 変数削除して 0px へ向けてアニメーション開始
+	accordionItem.style.removeProperty('--_panel-h');
+
+	// アニメーションを待つ
+	const status = await waitAnimation(panel);
+
+	// アニメーションが最後まで完了したら、hidden付与
+	if ('canceled' !== status) {
+		panel.setAttribute('hidden', ACCORDION_HIDDEN_VALUE);
 	}
-	// open は削除されたのに data-opened 属性がまだついている時
-	if (!hasOpen && hasDataOpen) {
-		details.removeAttribute('data-opened');
+}
+
+// アコーディオンのトグル処理
+function toggleAccordion(accordionItem) {
+	if (accordionItem.hasAttribute('data-opened')) {
+		// 自身を閉じる
+		closeAccordion(accordionItem);
+	} else {
+		// 親に data-allow-multiple がついていなければ、他のアコーディオンを閉じる
+		maybeCloseOpenedItems(accordionItem);
+
+		// 自身を開く
+		openAccordion(accordionItem);
 	}
-};
+}
 
-export const setEvent = (details) => {
-	// 複数展開を制限するかどうか
-	const allowMultiple = getAllowMultiple(details);
+/**
+ * 個別のアコーディオンにイベントをセット（React用にクリーンアップ関数を返す）
+ */
+export const setEvent = (accordionItem) => {
+	const { button, panel } = getAccordionElements(accordionItem);
 
-	// <summary> 要素をトリガーとする
-	const summary = details.querySelector('summary');
-	if (!summary) return;
+	// until-found のオン・オフが使い分けれるように、最初に初期値を取得
+	if (panel.hasAttribute('hidden')) {
+		ACCORDION_HIDDEN_VALUE = panel.getAttribute('hidden');
+	}
 
+	// clickイベント登録
 	const _clickEvent = (e) => {
-		// すぐに open 属性が切り替わらないようにする
-		e.preventDefault();
-		onClick(details, allowMultiple);
-	};
-	const _toggleEvent = () => {
-		onToggle(details);
+		e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
+		toggleAccordion(accordionItem);
 	};
 
-	// <summary> 'click' イベント
-	summary.addEventListener('click', _clickEvent);
+	// beforematchイベント登録 (ページ検索時などはこっちが発火する)
+	const _beforematchEvent = (e) => {
+		e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
+		toggleAccordion(accordionItem);
+	};
 
-	// <details> の'toggle' イベントで、ページ内検索時にも開閉されるようにする
-	details.addEventListener('toggle', _toggleEvent);
+	button.addEventListener('click', _clickEvent);
+	panel.addEventListener('beforematch', _beforematchEvent);
 
-	// react用
+	// react用: useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう
 	return () => {
-		// useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう。
-		summary.removeEventListener('click', _clickEvent);
-		details.removeEventListener('toggle', _toggleEvent);
+		button.removeEventListener('click', _clickEvent);
+		panel.removeEventListener('beforematch', _beforematchEvent);
 	};
 };
 
+/**
+ * ページ内の全アコーディオンにイベントをセット（Astro用）
+ */
 const setAccordion = () => {
-	const detailsAll = document.querySelectorAll('.d--accordion');
-	detailsAll.forEach((details) => {
-		setEvent(details);
+	const accordionAll = document.querySelectorAll('.c--accordion_item');
+	accordionAll.forEach((accordionItem) => {
+		setEvent(accordionItem);
 	});
 };
 export default setAccordion;

package/src/components/Callout/getProps.ts

@@ -23,7 +23,7 @@ export default function getCalloutProps({ type = 'note', keycolor, icon, title,
 		p: '20',
 		g: '10',
 		bdc: 'keycolor',
-		'bd-x-s': true,
+		'bd-x-s': '-',
 		bdw: '4px',
 		bxsh: '10',
 		bdrs: '5',

package/src/components/Details/_style.css

@@ -0,0 +1,48 @@
+/* Details コンポーネント用スタイル */
+/* ::details-content と grid-template-rows: 0fr → 1fr のトランジションでアニメーション */
+@layer lism.modules {
+	.c--details {
+		--duration: var(--acc-duration, 0.25s); /* transition時間 */
+		--_icon-scale: 1.1;
+		--_icon-transform: rotate(0deg); /* icon操作用 */
+		--_content-gtr: 0fr; /* 開閉操作用 */
+	}
+	.c--details[open] {
+		--_icon-transform: scaleY(-1);
+		--_content-gtr: 1fr;
+	}
+
+	/* Safariで表示されるデフォルトの三角形アイコンを削除 */
+	.c--details_summary::-webkit-details-marker {
+		display: none;
+	}
+
+	/* 見出しタグでもフォントを揃える */
+	/* .c--details_title {} */
+
+	/* アイコン */
+	.c--details_icon {
+		--svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');
+		display: inline-grid;
+		background-color: currentColor;
+		mask: var(--svg) no-repeat center center / contain;
+		scale: var(--_icon-scale);
+
+		transition: transform var(--duration);
+		transform: var(--_icon-transform);
+	}
+
+	/* ::details-content 擬似要素を使ったアニメーション */
+	.c--details::details-content {
+		display: grid;
+		grid-template-rows: var(--_content-gtr);
+		transition-duration: var(--duration);
+		transition-property: content-visibility, grid-template;
+		transition-behavior: allow-discrete;
+	}
+
+	/* コンテンツ内部のラッパー（grid-template-rows: 0frのアニメーションに必須） */
+	.c--details_body {
+		overflow: hidden;
+	}
+}

package/src/components/Details/astro/Content.astro

@@ -0,0 +1,17 @@
+---
+/**
+ * Content - コンテンツコンポーネント
+ * details要素の開閉されるコンテンツ部分のラッパー
+ * grid-template-rows: 0fr → 1fr のアニメーションに必要
+ */
+import { Lism } from 'lism-css/astro';
+import { defaultProps } from '../getProps';
+
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.body}>
+	<Lism {...defaultProps.content} {...props}>
+		<slot />
+	</Lism>
+</Lism>

package/src/components/Details/astro/Details.astro

@@ -0,0 +1,18 @@
+---
+/**
+ * Details - ルートコンポーネント
+ * details要素をレンダリングし、CSSのみでアニメーションを実装
+ * スクリプト不要で::details-contentを使用
+ */
+import getLismProps from 'lism-css/lib/getLismProps';
+import { getDetailsProps } from '../getProps';
+
+// スタイルのインポート
+import '../_style.css';
+
+const props = Astro.props || {};
+---
+
+<details {...getLismProps(getDetailsProps(props))}>
+	<slot />
+</details>

package/src/components/Details/astro/Icon.astro

@@ -0,0 +1,14 @@
+---
+/**
+ * Icon - アイコンコンポーネント
+ * 開閉状態を示すアイコン（開いた時に回転）
+ */
+import { Lism } from 'lism-css/astro';
+import { defaultProps } from '../getProps';
+
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.icon} {...props}>
+	<slot />
+</Lism>

package/src/components/{Accordion/astro/AccLabel.astro → Details/astro/Summary.astro}

@@ -1,11 +1,10 @@
 ---
-// import type { LismProps } from 'lism-css/types';
 import { Lism } from 'lism-css/astro';
 import { defaultProps } from '../getProps';
 
 const props = Astro.props || {};
 ---
 
-<Lism {...defaultProps.label} {...props}>
+<Lism tag='summary' {...defaultProps.summary} {...props}>
 	<slot />
 </Lism>

package/src/components/Details/astro/Title.astro

@@ -0,0 +1,10 @@
+---
+import { Lism } from 'lism-css/astro';
+import { defaultProps } from '../getProps';
+
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.title} {...props}>
+	<slot />
+</Lism>

package/src/components/Details/astro/index.js

@@ -0,0 +1,10 @@
+/**
+ * Astro版Detailsコンポーネントのエクスポート
+ */
+import Root from './Details.astro';
+import Summary from './Summary.astro';
+import Title from './Title.astro';
+import Icon from './Icon.astro';
+import Content from './Content.astro';
+
+export default { Root, Summary, Title, Content, Icon };

package/src/components/Details/getProps.js

@@ -0,0 +1,23 @@
+import atts from 'lism-css/lib/helper/atts';
+
+/**
+ * Detailsコンポーネントのルート要素用プロパティを生成
+ * @param {Object} props - コンポーネントのプロパティ
+ * @param {string} props.lismClass - 追加のLismクラス
+ * @returns {Object} 処理済みプロパティ
+ */
+export function getDetailsProps({ lismClass, ...props }) {
+	props.lismClass = atts(lismClass, 'c--details');
+	return props;
+}
+
+/**
+ * 各サブコンポーネント用のデフォルトプロパティ
+ */
+export const defaultProps = {
+	summary: { lismClass: 'c--details_summary', layout: 'flex', g: '10', ai: 'center' },
+	title: { lismClass: 'c--details_title', tag: 'span', fx: '1', setPlain: 1 },
+	icon: { lismClass: 'c--details_icon a--icon', tag: 'span', 'aria-hidden': 'true' },
+	body: { lismClass: 'c--details_body' },
+	content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
+};

package/src/components/Details/react/Details.jsx

@@ -0,0 +1,66 @@
+/**
+ * React版 Detailsコンポーネント
+ */
+import getLismProps from 'lism-css/lib/getLismProps';
+import { Lism } from 'lism-css/react';
+import { getDetailsProps, defaultProps } from '../getProps';
+
+// スタイルのインポート
+import '../_style.css';
+
+/**
+ * Details - ルートコンポーネント
+ * details要素をレンダリング
+ */
+export function Details({ children, ...props }) {
+	const lismProps = getLismProps(getDetailsProps(props));
+
+	return <details {...lismProps}>{children}</details>;
+}
+
+/**
+ * Summary - サマリーコンポーネント
+ * details要素のsummary部分
+ */
+export function Summary({ children, ...props }) {
+	return (
+		<Lism tag='summary' {...defaultProps.summary} {...props}>
+			{children}
+		</Lism>
+	);
+}
+
+/**
+ * Title - タイトルコンポーネント
+ */
+export function Title({ children, ...props }) {
+	return (
+		<Lism {...defaultProps.title} {...props}>
+			{children}
+		</Lism>
+	);
+}
+
+/**
+ * Icon - アイコンコンポーネント
+ */
+export function Icon({ children, ...props }) {
+	return (
+		<Lism {...defaultProps.icon} {...props}>
+			{children}
+		</Lism>
+	);
+}
+
+/**
+ * Content - コンテンツコンポーネント
+ */
+export function Content({ children, ...props }) {
+	return (
+		<Lism {...defaultProps.body}>
+			<Lism {...defaultProps.content} {...props}>
+				{children}
+			</Lism>
+		</Lism>
+	);
+}

package/src/components/Details/react/index.js

@@ -0,0 +1,6 @@
+/**
+ * React版Detailsコンポーネントのエクスポート
+ */
+import { Details as Root, Summary, Title, Icon, Content } from './Details';
+
+export default { Root, Summary, Title, Icon, Content };

package/src/components/Modal/_style.css

@@ -3,7 +3,7 @@
  *   Memo: ::backdrop のアニメーションはFirefoxで動かない
  */
 @layer lism.modules {
-	.d--modal {
+	.c--modal {
 		--flow: 0; /* flow直下にきても影響しないように */
 		--duration: var(--modal-duration, 0.4s);
 		width: 100%;
@@ -15,30 +15,30 @@
 		transition-duration: var(--duration);
 		transition-property: opacity;
 	}
-	.d--modal::backdrop {
+	.c--modal::backdrop {
 		background: none;
 	}
-	.d--modal[open] {
+	.c--modal[open] {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 	}
 
-	.d--modal_inner {
+	.c--modal_inner {
 		--offset: 0 0; /* アニメーション用 */
 		background-color: var(--base);
 		transition: translate var(--duration);
 		max-height: 100%;
 	}
 
-	/* .d--modal_body {
+	/* .c--modal_body {
 	overscroll-behavior: contain;
 } */
 
-	.d--modal:not([data-is-open]) {
+	.c--modal:not([data-is-open]) {
 		opacity: 0;
 	}
-	.d--modal:not([data-is-open]) > .d--modal_inner {
+	.c--modal:not([data-is-open]) > .c--modal_inner {
 		translate: var(--offset);
 	}
 }

package/src/components/Modal/getProps.js

@@ -2,7 +2,7 @@ import atts from 'lism-css/lib/helper/atts';
 
 export function getProps({ lismClass = '', duration, style = {}, ...props }) {
 	const theProps = {
-		lismClass: atts(lismClass, 'd--modal'),
+		lismClass: atts(lismClass, 'c--modal'),
 		setPlain: true,
 	};
 	if (duration) {
@@ -17,14 +17,14 @@ export function getInnerProps({ lismClass = '', offset, style = {}, ...props })
 		style['--offset'] = offset;
 	}
 	return {
-		lismClass: atts(lismClass, 'd--modal_inner'),
+		lismClass: atts(lismClass, 'c--modal_inner'),
 		style,
 		...props,
 	};
 }
 
 export const defaultProps = {
-	body: { lismClass: 'd--modal_body' },
+	body: { lismClass: 'c--modal_body' },
 	closeBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
 	openBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
 };

package/src/components/Modal/script.js

@@ -1,3 +1,4 @@
+/* Memo: この script は defer をつけて読み込む （DOMパース後に読み込まれます） */
 import setModal from './setModal.ts';
 
 document.addEventListener('DOMContentLoaded', function () {