@lism-css/ui 0.9.3 → 0.11.0

package/src/components/ShapeDivider/react/ShapeDivider.jsx

@@ -3,31 +3,31 @@ import getProps from '../getProps';
 import '../_style.css';
 
 export default function ShapeDivider({ children, ...props }) {
-	const componentProps = getProps(props);
+  const componentProps = getProps(props);
 
-	// level が 0 の場合は非表示
-	if (!componentProps) return null;
+  // level が 0 の場合は非表示
+  if (!componentProps) return null;
 
-	const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps;
+  const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps;
 
-	return (
-		<Lism {...lismProps}>
-			{isEmpty ? null : (
-				<div className='c--shapeDivider_inner'>
-					<svg
-						xmlns='http://www.w3.org/2000/svg'
-						className='c--shapeDivider_svg'
-						viewBox={viewBox}
-						width='100%'
-						height='100%'
-						fill='currentColor'
-						focusable='false'
-						preserveAspectRatio='none'
-					>
-						{children}
-					</svg>
-				</div>
-			)}
-		</Lism>
-	);
+  return (
+    <Lism {...lismProps}>
+      {isEmpty ? null : (
+        <div className="c--shapeDivider_inner">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="c--shapeDivider_svg"
+            viewBox={viewBox}
+            width="100%"
+            height="100%"
+            fill="currentColor"
+            focusable="false"
+            preserveAspectRatio="none"
+          >
+            {children}
+          </svg>
+        </div>
+      )}
+    </Lism>
+  );
 }

package/src/components/Tabs/_style.css

@@ -1,32 +1,32 @@
-@layer lism.modules {
-	.c--tabs {
-		display: grid;
-		grid: 'list' 'panel' / 100%;
-	}
-	.c--tabs_list {
-		grid-area: list;
-		display: flex;
-		overflow-x: auto;
-	}
-	.c--tabs_tab {
-		&[aria-selected='true'] {
-			--_notSelected: ;
-		}
-		&[aria-selected='false'] {
-			--_isSelected: ;
-		}
-		/* 非アクティブの時、薄いカラーに */
-		:where(&) {
-			color: var(--_notSelected, var(--text-2));
-		}
-	}
+@layer lism-modules {
+  .c--tabs {
+    display: grid;
+    grid: 'list' 'panel' / 100%;
+  }
+  .c--tabs_list {
+    grid-area: list;
+    display: flex;
+    overflow-x: auto;
+  }
+  .c--tabs_tab {
+    &[aria-selected='true'] {
+      --_notSelected: ;
+    }
+    &[aria-selected='false'] {
+      --_isSelected: ;
+    }
+    /* 非アクティブの時、薄いカラーに */
+    :where(&) {
+      color: var(--_notSelected, var(--text-2));
+    }
+  }
 
-	.c--tabs_panel {
-		grid-area: panel;
-		width: 100%;
+  .c--tabs_panel {
+    grid-area: panel;
+    width: 100%;
 
-		&:where([aria-hidden='true']) {
-			display: none;
-		}
-	}
+    &:where([aria-hidden='true']) {
+      display: none;
+    }
+  }
 }

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 as='button' lismClass='c--tabs_tab' setPlain role='tab' aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
-	<slot />
+<Lism as="button" lismClass="c--tabs_tab" setPlain role="tab" aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
+  <slot />
 </Lism>

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

@@ -4,5 +4,5 @@
 ---
 
 <lism-placeholder-tabitem>
-	<slot />
+  <slot />
 </lism-placeholder-tabitem>

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

@@ -3,6 +3,6 @@
 import { Lism } from 'lism-css/astro';
 ---
 
-<Lism lismClass='c--tabs_list' role='tablist' {...Astro.props}>
-	<slot />
+<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='c--tabs_panel' {...props}>
-	<slot />
+<Lism id={controlId} role="tabpanel" aria-hidden={isActive ? 'false' : 'true'} lismClass="c--tabs_panel" {...props}>
+  <slot />
 </Lism>

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

@@ -32,27 +32,27 @@ const hasItems = btns.length > 0;
 ---
 
 <Lism {...getTabsProps(props)}>
-	{
-		btns && (
-			<TabList {...listProps}>
-				{btns.map((btn, index) => {
-					return <Fragment key={index} set:html={btn} />;
-				})}
-			</TabList>
-		)
-	}
-	{
-		panels.map((panel, index) => {
-			return <Fragment key={index} set:html={panel} />;
-		})
-	}
-	{!hasItems && <slot />}
+  {
+    btns && (
+      <TabList {...listProps}>
+        {btns.map((btn, index) => {
+          return <Fragment key={index} set:html={btn} />;
+        })}
+      </TabList>
+    )
+  }
+  {
+    panels.map((panel, index) => {
+      return <Fragment key={index} set:html={panel} />;
+    })
+  }
+  {!hasItems && <slot />}
 </Lism>
 
 <script>
-	import setTabs from '../setTabs';
-	const tabsAll = document.querySelectorAll('.c--tabs');
-	tabsAll.forEach((tabs) => {
-		setTabs(tabs);
-	});
+  import setTabs from '../setTabs';
+  const tabsAll = document.querySelectorAll('.c--tabs');
+  tabsAll.forEach((tabs) => {
+    setTabs(tabs);
+  });
 </script>

package/src/components/Tabs/astro/transformTabitems.js

@@ -1,40 +1,40 @@
 // <lism-placeholder-tabitem> → div.tabitem へ 変換
 export default function transformHTML(htmlString, tabID, defaultIndex) {
-	let index = 1; // 1スタート
-	let btns = [];
-	let panels = [];
+  let index = 1; // 1スタート
+  let btns = [];
+  let panels = [];
 
-	// <lism-placeholder-tabitem>でコンテンツを囲んでいるので中身を解析する。
-	const regex = /<lism-placeholder-tabitem(.*?)>(.*?)<\/lism-placeholder-tabitem>/gs;
-	const matches = [...htmlString.matchAll(regex)];
+  // <lism-placeholder-tabitem>でコンテンツを囲んでいるので中身を解析する。
+  const regex = /<lism-placeholder-tabitem(.*?)>(.*?)<\/lism-placeholder-tabitem>/gs;
+  const matches = [...htmlString.matchAll(regex)];
 
-	// console.log(matches);
-	matches.forEach((match) => {
-		// const tabItemAttrs = match[1]; // 使わないがdata-astro-source-file属性が自動でついてきたりするので、属性値があっても問題ないようにしている。
-		const tabItemContent = match[2];
+  // console.log(matches);
+  matches.forEach((match) => {
+    // const tabItemAttrs = match[1]; // 使わないがdata-astro-source-file属性が自動でついてきたりするので、属性値があっても問題ないようにしている。
+    const tabItemContent = match[2];
 
-		const controlId = `${tabID}-${index}`;
-		const isActive = index === defaultIndex;
-		index++;
+    const controlId = `${tabID}-${index}`;
+    const isActive = index === defaultIndex;
+    index++;
 
-		// <lism-placeholder-tabtbn>からタブボタンを生成
-		const btnMatch = tabItemContent.match(/<button(.*?)>(.*?)<\/button>(.*)/s);
-		if (!btnMatch) return;
-		let btnAtts = btnMatch[1];
-		let btnContent = btnMatch[2];
-		let panel = btnMatch[3];
+    // <lism-placeholder-tabtbn>からタブボタンを生成
+    const btnMatch = tabItemContent.match(/<button(.*?)>(.*?)<\/button>(.*)/s);
+    if (!btnMatch) return;
+    let btnAtts = btnMatch[1];
+    let btnContent = btnMatch[2];
+    let panel = btnMatch[3];
 
-		// btnContent = btnContent.replace(` slot="tab"`, '');
-		btnAtts = btnAtts.replace(`aria-controls="tab-0"`, `aria-controls="${controlId}"`);
-		panel = panel.replace(`id="tab-0"`, `id="${controlId}"`);
-		if (isActive) {
-			btnAtts = btnAtts.replace(/aria-selected="false"/, 'aria-selected="true"');
-			panel = panel.replace(/aria-hidden="true"/, 'aria-hidden="false"');
-		}
+    // btnContent = btnContent.replace(` slot="tab"`, '');
+    btnAtts = btnAtts.replace(`aria-controls="tab-0"`, `aria-controls="${controlId}"`);
+    panel = panel.replace(`id="tab-0"`, `id="${controlId}"`);
+    if (isActive) {
+      btnAtts = btnAtts.replace(/aria-selected="false"/, 'aria-selected="true"');
+      panel = panel.replace(/aria-hidden="true"/, 'aria-hidden="false"');
+    }
 
-		btns.push(`<button${btnAtts}>${btnContent}</button>`);
-		panels.push(panel);
-	});
+    btns.push(`<button${btnAtts}>${btnContent}</button>`);
+    panels.push(panel);
+  });
 
-	return { btns, panels };
+  return { btns, panels };
 }

package/src/components/Tabs/getProps.js

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

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

@@ -2,17 +2,9 @@
 import { Lism } from 'lism-css/react';
 
 export default function Tab({ tabId = 'tab', index = 0, isActive = false, ...props }) {
-	const controlId = `${tabId}-${index}`;
+  const controlId = `${tabId}-${index}`;
 
-	return (
-		<Lism
-			as='button'
-			lismClass='c--tabs_tab'
-			setPlain
-			role='tab'
-			aria-controls={controlId}
-			aria-selected={isActive ? 'true' : 'false'}
-			{...props}
-		/>
-	);
+  return (
+    <Lism as="button" lismClass="c--tabs_tab" setPlain role="tab" aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props} />
+  );
 }

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

@@ -1,5 +1,5 @@
 // Note: <Tabs>側でループして色々処理される。
 // 引数でちゃんと処理したいpropを書いておかないとだめ。
 export default function TabItem({ isTabItem = true, children }) {
-	return <div>{children}</div>;
+  return <div>{children}</div>;
 }

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

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

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

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

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

@@ -11,53 +11,51 @@ import getTabsProps from '../getProps';
 import '../_style.css';
 
 export default function Tabs({ tabId = '', defaultIndex = 1, listProps = {}, children, ...props }) {
-	const [activeIndex, setActiveIndex] = useState(defaultIndex);
-	const theTabId = tabId || useId();
-	const btns = [];
-	const panels = [];
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+  const theTabId = tabId || useId();
+  const btns = [];
+  const panels = [];
 
-	// Tabs.Item の処理
-	Children.forEach(children, (child, index) => {
-		const tabIndex = index + 1; // 1 はじまり
-		// console.log('child.type', isValidElement(child), child.type);
+  // Tabs.Item の処理
+  Children.forEach(children, (child, index) => {
+    const tabIndex = index + 1; // 1 はじまり
+    // console.log('child.type', isValidElement(child), child.type);
 
-		if (isValidElement(child) && child.type === TabItem) {
-			Children.forEach(child.props.children, (nestedChild) => {
-				if (isValidElement(nestedChild)) {
-					if (nestedChild.type === Tab) {
-						const tabProps = nestedChild.props;
-						btns.push(
-							<Tab
-								{...tabProps}
-								tabId={theTabId}
-								index={tabIndex}
-								key={tabIndex}
-								isActive={tabIndex === activeIndex}
-								onClick={() => setActiveIndex(tabIndex)}
-							/>
-						);
-					} else if (nestedChild.type === TabPanel) {
-						const panelProps = nestedChild.props;
-						panels.push(
-							<TabPanel {...panelProps} tabId={theTabId} index={tabIndex} key={tabIndex} isActive={tabIndex === activeIndex} />
-						);
-					}
-				}
-			});
-		}
-	});
+    if (isValidElement(child) && child.type === TabItem) {
+      Children.forEach(child.props.children, (nestedChild) => {
+        if (isValidElement(nestedChild)) {
+          if (nestedChild.type === Tab) {
+            const tabProps = nestedChild.props;
+            btns.push(
+              <Tab
+                {...tabProps}
+                tabId={theTabId}
+                index={tabIndex}
+                key={tabIndex}
+                isActive={tabIndex === activeIndex}
+                onClick={() => setActiveIndex(tabIndex)}
+              />
+            );
+          } else if (nestedChild.type === TabPanel) {
+            const panelProps = nestedChild.props;
+            panels.push(<TabPanel {...panelProps} tabId={theTabId} index={tabIndex} key={tabIndex} isActive={tabIndex === activeIndex} />);
+          }
+        }
+      });
+    }
+  });
 
-	return (
-		<Lism {...getTabsProps(props)}>
-			{btns.length === 0 ? (
-				// TabItemを使わず直接TabListなどを子要素に配置する場合
-				children
-			) : (
-				<>
-					<TabList {...listProps}>{btns}</TabList>
-					{panels}
-				</>
-			)}
-		</Lism>
-	);
+  return (
+    <Lism {...getTabsProps(props)}>
+      {btns.length === 0 ? (
+        // TabItemを使わず直接TabListなどを子要素に配置する場合
+        children
+      ) : (
+        <>
+          <TabList {...listProps}>{btns}</TabList>
+          {panels}
+        </>
+      )}
+    </Lism>
+  );
 }

package/src/components/Tabs/script.js

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

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