@lism-css/ui 0.9.2 → 0.10.0

package/src/components/Tabs/setTabs.js

@@ -2,86 +2,86 @@
  * タブ
  */
 function tabControl(e) {
-	e.preventDefault();
+  e.preventDefault();
 
-	// クリックされたボタン要素
-	const clickedButton = e.currentTarget;
+  // クリックされたボタン要素
+  const clickedButton = e.currentTarget;
 
-	// クリックイベントがキー（Enter / space）によって呼び出されたかどうか
-	// const iskeyClick = 0 === e.clientX;
+  // クリックイベントがキー（Enter / space）によって呼び出されたかどうか
+  // const iskeyClick = 0 === e.clientX;
 
-	// マウスクリック時はフォーカスを外す
-	// if (!iskeyClick) {
-	// 	clickedButton.blur();
-	// }
+  // マウスクリック時はフォーカスを外す
+  // if (!iskeyClick) {
+  // 	clickedButton.blur();
+  // }
 
-	// 属性の切り替え
-	toggleAriaData(clickedButton);
+  // 属性の切り替え
+  toggleAriaData(clickedButton);
 }
 
 const toggleAriaData = (clickedButton) => {
-	// すでにオープンされているタブの場合はなにもしない
-	const isOpend = 'true' === clickedButton.getAttribute('aria-selected');
-	if (isOpend) return;
-
-	// 新しく表示するBodyを取得
-	const targetID = clickedButton.getAttribute('aria-controls');
-	const targetBody = document.getElementById(targetID);
-	if (null === targetBody) return;
-
-	// 親のタブリスト(ul)を取得
-	const parentTabList = clickedButton.parentNode.parentNode;
-
-	// 現在選択中のタブボタンを取得
-	const selectedButton = parentTabList.querySelector('[aria-selected="true"]');
-
-	// 展開中のBodyを取得
-	const displayedID = selectedButton.getAttribute('aria-controls');
-	const displayedBody = document.getElementById(displayedID);
-
-	// ariaの処理
-	clickedButton.setAttribute('aria-selected', 'true');
-	selectedButton.setAttribute('aria-selected', 'false');
-	displayedBody.setAttribute('aria-hidden', 'true');
-	targetBody.setAttribute('aria-hidden', 'false');
+  // すでにオープンされているタブの場合はなにもしない
+  const isOpend = 'true' === clickedButton.getAttribute('aria-selected');
+  if (isOpend) return;
+
+  // 新しく表示するBodyを取得
+  const targetID = clickedButton.getAttribute('aria-controls');
+  const targetBody = document.getElementById(targetID);
+  if (null === targetBody) return;
+
+  // 親のタブリスト(ul)を取得
+  const parentTabList = clickedButton.parentNode.parentNode;
+
+  // 現在選択中のタブボタンを取得
+  const selectedButton = parentTabList.querySelector('[aria-selected="true"]');
+
+  // 展開中のBodyを取得
+  const displayedID = selectedButton.getAttribute('aria-controls');
+  const displayedBody = document.getElementById(displayedID);
+
+  // ariaの処理
+  clickedButton.setAttribute('aria-selected', 'true');
+  selectedButton.setAttribute('aria-selected', 'false');
+  displayedBody.setAttribute('aria-hidden', 'true');
+  targetBody.setAttribute('aria-hidden', 'false');
 };
 
 function setTabs(tabs) {
-	const tabBtns = tabs.querySelectorAll('button[role="tab"]');
-	tabBtns.forEach((tabBtn) => {
-		tabBtn.addEventListener('click', function (e) {
-			tabControl(e);
-		});
-	});
-
-	// タブへのリンクがあるかどうか
-	const nowUrl = window?.location?.href;
-	if (!nowUrl) return;
-
-	const hasTabLink = -1 !== nowUrl.indexOf('?lism-tab=');
-	if (!hasTabLink) return;
-
-	// URLでタブを切り替える機能がONかどうか
-
-	// URLSearchParamsオブジェクトを取得
-	const url = new URL(nowUrl);
-	const params = url.searchParams;
-
-	// getメソッド
-	const targetTabId = params.get('lism-tab');
-	const target = tabs.querySelector(`[aria-controls="${targetTabId}"]`);
-	if (target) {
-		// transitionをオフにするための属性
-		tabs.dataset.hasTabLink = '1';
-
-		// タブ切り替え
-		toggleAriaData(target);
-
-		// 少し後で属性削除
-		setTimeout(() => {
-			delete tabs.dataset.hasTabLink;
-		}, 10);
-	}
+  const tabBtns = tabs.querySelectorAll('button[role="tab"]');
+  tabBtns.forEach((tabBtn) => {
+    tabBtn.addEventListener('click', function (e) {
+      tabControl(e);
+    });
+  });
+
+  // タブへのリンクがあるかどうか
+  const nowUrl = window?.location?.href;
+  if (!nowUrl) return;
+
+  const hasTabLink = -1 !== nowUrl.indexOf('?lism-tab=');
+  if (!hasTabLink) return;
+
+  // URLでタブを切り替える機能がONかどうか
+
+  // URLSearchParamsオブジェクトを取得
+  const url = new URL(nowUrl);
+  const params = url.searchParams;
+
+  // getメソッド
+  const targetTabId = params.get('lism-tab');
+  const target = tabs.querySelector(`[aria-controls="${targetTabId}"]`);
+  if (target) {
+    // transitionをオフにするための属性
+    tabs.dataset.hasTabLink = '1';
+
+    // タブ切り替え
+    toggleAriaData(target);
+
+    // 少し後で属性削除
+    setTimeout(() => {
+      delete tabs.dataset.hasTabLink;
+    }, 10);
+  }
 }
 
 export default setTabs;

package/src/components/astro.ts

@@ -10,3 +10,5 @@ export { default as Modal } from './Modal/astro';
 export { default as NavMenu } from './NavMenu/astro';
 export { default as ShapeDivider } from './ShapeDivider/astro';
 export { default as Tabs } from './Tabs/astro';
+export { default as DummyText } from './DummyText/astro';
+export { default as DummyImage } from './DummyImage/astro';

package/src/components/react.ts

@@ -10,3 +10,5 @@ export { default as Modal } from './Modal/react';
 export { default as NavMenu } from './NavMenu/react';
 export { default as ShapeDivider } from './ShapeDivider/react';
 export { default as Tabs } from './Tabs/react';
+export { default as DummyText } from './DummyText/react';
+export { default as DummyImage } from './DummyImage/react';

package/src/helper/animation.ts

@@ -14,23 +14,23 @@ export const waitFrame = (): Promise<number> => new Promise((resolve) => request
  *   - 'canceled': pause() 等でキャンセルされたアニメーションがあった
  */
 export const waitAnimation = async (el: HTMLElement): Promise<AnimationStatus> => {
-	const animations = el.getAnimations();
+  const animations = el.getAnimations();
 
-	// アニメーションがなければ 'none' を返す
-	if (animations.length === 0) return 'none';
+  // アニメーションがなければ 'none' を返す
+  if (animations.length === 0) return 'none';
 
-	// allSettled を使うことで、キャンセル時も例外にならずに結果を取得できる
-	const results = await Promise.allSettled(animations.map((a) => a.finished));
+  // allSettled を使うことで、キャンセル時も例外にならずに結果を取得できる
+  const results = await Promise.allSettled(animations.map((a) => a.finished));
 
-	// （ pause()で止めた時用 ）rejected があれば 'canceled'
-	return results.every((r) => r.status === 'fulfilled') ? 'finished' : 'canceled';
+  // （ 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());
+  const animations = el.getAnimations();
+  if (animations.length === 0) return;
+  animations.forEach((a) => a.pause());
 };

package/src/helper/uuid.js

@@ -1,6 +1,6 @@
 // https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
 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)
-	);
+  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
+    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+  );
 }