@lism-css/ui 0.1.0 → 0.1.1

package/dist/components/Accordion/setAccordion.d.ts

@@ -1,3 +1,3 @@
-export function setEvent(currentRef: any): (() => void) | undefined;
+export function setEvent(details: any): (() => void) | undefined;
 export default setAccordion;
 declare function setAccordion(): void;

package/dist/components/Accordion/setAccordion.js

@@ -1,37 +1,48 @@
-const s = (t) => Promise.all(t.getAnimations().map((e) => e.finished)), d = async (t, e = !1) => {
-  if (t.dataset.animating && !e) return;
-  t.dataset.animating = "1";
-  const n = t.querySelector(".d--accordion_body");
-  t.open ? t.open && (t.removeAttribute("data-opened"), await s(n), delete t.dataset.animating, t.open = !1) : (t.open = !0, setTimeout(async () => {
-    t.setAttribute("data-opened", ""), await s(n), delete t.dataset.animating;
-  }, 5));
-}, u = (t, e) => {
-  const n = e.open, o = e.hasAttribute("data-opened");
-  n && !o && e.setAttribute("data-opened", ""), !n && o && e.removeAttribute("data-opened");
-}, p = (t) => {
-  const e = t, n = e.querySelector('[data-role="trigger"]') || e.querySelector("summary");
-  if (!n) return;
-  let o = !1;
-  const r = e.parentNode;
-  r != null && (o = r.dataset.accordionMultiple !== "disallow");
-  const c = (a) => {
-    if (a.preventDefault(), !o && !e.open) {
-      const l = r.querySelector("[data-opened]");
-      l != null && d(l, !0);
+const l = (e) => {
+  const t = e.querySelector(".d--accordion_body"), n = t ? t.getAnimations() : [];
+  return Promise.allSettled(n.map((o) => o.finished));
+}, s = async (e) => {
+  e.open && e.hasAttribute("data-opened") || (e.open = !0, requestAnimationFrame(() => {
+    e.setAttribute("data-opened", "");
+  }));
+}, a = async (e) => {
+  !e.open && !e.hasAttribute("data-opened") || (e.removeAttribute("data-opened"), await l(e), e.open = !1);
+}, i = (e) => {
+  let t = !1;
+  const n = e.parentNode;
+  return n != null && (t = n.dataset.multiple !== "disallow"), t;
+}, p = (e, t) => {
+  if (e.open)
+    e.open && a(e);
+  else {
+    if (!t) {
+      const o = e.parentNode.querySelector("[data-opened]");
+      requestAnimationFrame(() => {
+        o != null && a(o);
+      });
     }
-    d(e);
-  }, i = (a) => {
-    u(a, e);
+    s(e);
+  }
+}, u = (e) => {
+  const t = e.open, n = e.hasAttribute("data-opened");
+  t && !n && e.setAttribute("data-opened", ""), !t && n && e.removeAttribute("data-opened");
+}, d = (e) => {
+  const t = i(e), n = e.querySelector("summary");
+  if (!n) return;
+  const o = (c) => {
+    c.preventDefault(), p(e, t);
+  }, r = () => {
+    u(e);
   };
-  return n.addEventListener("click", c), e.addEventListener("toggle", i), () => {
-    n.removeEventListener("click", c), e.removeEventListener("toggle", i);
+  return n.addEventListener("click", o), e.addEventListener("toggle", r), () => {
+    n.removeEventListener("click", o), e.removeEventListener("toggle", r);
   };
 }, m = () => {
-  document.querySelectorAll(".d--accordion").forEach((e) => {
-    p(e);
+  document.querySelectorAll(".d--accordion").forEach((t) => {
+    d(t);
   });
 };
 export {
   m as default,
-  p as setEvent
+  d as setEvent
 };

package/dist/style.css

@@ -1 +1 @@
-@layer lism.modules{.d--accordion{--duration:var(--acc-duration,0.4s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;outline-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon .a--icon{rotate:var(--_isOpen,-180deg);transition-duration:var(--duration)}}
+@layer lism.modules{.d--accordion{--duration:var(--acc-duration,0.25s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;--focus-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon>.a--icon{transform:var(--_isOpen,scaleY(-1));transition:transform var(--duration)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",
@@ -39,7 +39,7 @@
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "lism-css": "0.8.0"
+    "lism-css": "0.8.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.27.2",

package/src/components/Accordion/_style.css

@@ -1,6 +1,6 @@
 @layer lism.modules {
 	.d--accordion {
-		--duration: var(--acc-duration, 0.4s);
+		--duration: var(--acc-duration, 0.25s);
 	}
 	.d--accordion[data-opened] {
 		--_notOpen: ;
@@ -14,7 +14,7 @@
 		grid: auto / 1fr auto;
 		gap: 0.5em;
 		align-items: center;
-		outline-offset: -1px; /* overflow:clip|hidden; で見えなくなってしまうのを防ぐ */
+		--focus-offset: -1px; /* overflow:hidden; で見えなくなってしまいがちなので内側に寄せておく */
 
 		/* Safariで表示されるデフォルトの三角形アイコンを消す */
 		&::-webkit-details-marker {
@@ -47,8 +47,8 @@
 	}
 
 	/* .d--accordion_icon 自体にborderつけたりすると回転が見えてしまうので、中にある .a--icon を回転させる。 */
-	.d--accordion_icon .a--icon {
-		transition-duration: var(--duration);
-		rotate: var(--_isOpen, -180deg);
+	.d--accordion_icon > .a--icon {
+		transition: transform var(--duration);
+		transform: var(--_isOpen, scaleY(-1));
 	}
 }

package/src/components/Accordion/react/Accordion.jsx

@@ -7,9 +7,6 @@ import AccIcon from './AccIcon';
 
 import '../_style.css';
 
-// import { AccContext } from './context';
-
-// duration: [s]
 export function Accordion({ children, ...props }) {
 	const ref = React.useRef(null);
 
@@ -22,12 +19,10 @@ export function Accordion({ children, ...props }) {
 
 	return (
 		<details ref={ref} {...lismProps}>
-			{/* <AccContext.Provider value={deliverState}>{children}</AccContext.Provider> */}
 			{children}
 		</details>
 	);
 }
-
 export function Header({ children, ...props }) {
 	return (
 		<Lism tag='summary' {...defaultProps.header} {...props}>
@@ -42,7 +37,6 @@ export function Label({ children, ...props }) {
 		</Lism>
 	);
 }
-
 export function Body({ children, flow, innerProps, ...props }) {
 	return (
 		<Lism {...defaultProps.body} {...props}>

package/src/components/Accordion/setAccordion.js

@@ -1,99 +1,112 @@
-// open 属性付与からクラスの付与まで、ほんの少しだけ遅らせた方が動作が安定する
-const DELAY = 5;
+// アニメーションが完了するのを待つ
+const waitAnimation = (details) => {
+	// アニメーション対象の要素を直接取得.（getAnimations({subtree: true}) は iOS Safari で動作しない場合があるので __body を直接監視）
+	const body = details.querySelector('.d--accordion_body');
+	const animations = body ? body.getAnimations() : [];
 
-// モーダルのアニメーションが完了するのを待つ.
-const waitAnimation = (element) => {
-	return Promise.all(element.getAnimations().map((a) => a.finished));
+	// allSettled を使うことで、キャンセル時も reject せずに完了する
+	return Promise.allSettled(animations.map((a) => a.finished));
 };
 
 // animationTime: [ms]
-const clickedEvent = async (details, force = false) => {
-	// アニメーション中かどうか
-	if (details.dataset.animating && !force) return;
-	details.dataset.animating = '1';
+const open = async (details) => {
+	// すでに開いている場合は何もしない
+	if (details.open && details.hasAttribute('data-opened')) return;
 
-	const body = details.querySelector('.d--accordion_body');
+	// open属性をセット
+	details.open = true;
 
-	// オープン / クローズ 処理
-	if (!details.open) {
-		details.open = true;
-		// 少しだけ遅らせた方が動作が安定する
-		setTimeout(async () => {
-			details.setAttribute('data-opened', ''); // クラスの追加
-
-			// アニメーション完了後に dataset を除去。
-			await waitAnimation(body);
-			delete details.dataset.animating;
-		}, DELAY);
-	} else if (details.open) {
-		details.removeAttribute('data-opened'); // クラスを削除
+	// 次フレームで data-opened 属性を付与（CSS側でフェードインアニメーション開始）
+	requestAnimationFrame(() => {
+		details.setAttribute('data-opened', ''); // 属性の追加
+	});
+};
+
+const close = async (details) => {
+	// すでに閉じている場合は何もしない
+	if (!details.open && !details.hasAttribute('data-opened')) return;
+
+	details.removeAttribute('data-opened'); // 属性を削除
 
-		// アニメーション完了後に open属性 を除去。
-		await waitAnimation(body);
+	// アニメーションを待つ
+	await waitAnimation(details);
 
-		delete details.dataset.animating;
-		details.open = false;
+	// アニメーション完了後にopen属性 を除去。
+	details.open = false;
+};
+
+// 複数展開を許可するかどうかを、親要素の [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;
 };
 
-const toggleEvent = (e, details) => {
-	// e.preventDefault();
-	// console.log('toggleEvent', e.target, e.currentTarget);
+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);
+	}
+};
 
+const onToggle = (details) => {
 	const hasOpen = details.open;
-	const hasOpenedClass = details.hasAttribute('data-opened');
+	const hasDataOpen = details.hasAttribute('data-opened');
 
-	// open はセットされたのに data-opened がついてない時
-	if (hasOpen && !hasOpenedClass) {
+	// open はセットされたのに data-opened 属性がついてない時
+	if (hasOpen && !hasDataOpen) {
 		details.setAttribute('data-opened', '');
 	}
-	// open は削除されたのに data-opened がまだついている時
-	if (!hasOpen && hasOpenedClass) {
+	// open は削除されたのに data-opened 属性がまだついている時
+	if (!hasOpen && hasDataOpen) {
 		details.removeAttribute('data-opened');
 	}
 };
 
-export const setEvent = (currentRef) => {
-	const details = currentRef;
-	// トリガーが明示的に指定されていない場合は、<summary> 要素をトリガーとする
-	const clickBtn = details.querySelector(`[data-role="trigger"]`) || details.querySelector('summary');
+export const setEvent = (details) => {
+	// 複数展開を制限するかどうか
+	const allowMultiple = getAllowMultiple(details);
 
-	if (!clickBtn) return;
+	// <summary> 要素をトリガーとする
+	const summary = details.querySelector('summary');
+	if (!summary) return;
 
-	// 複数展開を許可するかどうかを、親要素の [data-accordion-multiple] でチェック.
-	let allowMultiple = false;
-	const parent = details.parentNode;
-	if (null != parent) {
-		const dataMultiple = parent.dataset.accordionMultiple;
-		allowMultiple = 'disallow' !== dataMultiple;
-	}
-
-	const _clickedEvent = (e) => {
+	const _clickEvent = (e) => {
 		// すぐに open 属性が切り替わらないようにする
 		e.preventDefault();
-
-		// 複数展開が禁止されている場合、（開く処理の直前で）他の開いているアイテムがあれば閉じる
-		if (!allowMultiple && !details.open) {
-			const openedItem = parent.querySelector(`[data-opened]`);
-			if (null != openedItem) clickedEvent(openedItem, true);
-		}
-
-		// 自身のクリック処理
-		clickedEvent(details);
+		onClick(details, allowMultiple);
 	};
-	const _toggleEvent = (e) => {
-		toggleEvent(e, details);
+	const _toggleEvent = () => {
+		onToggle(details);
 	};
 
 	// <summary> 'click' イベント
-	clickBtn.addEventListener('click', _clickedEvent);
+	summary.addEventListener('click', _clickEvent);
 
 	// <details> の'toggle' イベントで、ページ内検索時にも開閉されるようにする
 	details.addEventListener('toggle', _toggleEvent);
 
-	// useEffectでアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう。
+	// react用
 	return () => {
-		clickBtn.removeEventListener('click', _clickedEvent);
+		// useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう。
+		summary.removeEventListener('click', _clickEvent);
 		details.removeEventListener('toggle', _toggleEvent);
 	};
 };