@lism-css/ui 0.2.3 → 0.8.0

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);

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>