@lism-css/ui 0.9.2 → 0.10.0

package/src/components/ShapeDivider/astro/ShapeDivider.astro

@@ -8,24 +8,24 @@ const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps || {};
 ---
 
 {
-	componentProps && (
-		<Lism {...lismProps}>
-			{isEmpty ? null : (
-				<div class='c--shapeDivider_inner'>
-					<svg
-						xmlns='http://www.w3.org/2000/svg'
-						class='c--shapeDivider_svg'
-						viewBox={viewBox}
-						width='100%'
-						height='100%'
-						fill='currentColor'
-						focusable='false'
-						preserveAspectRatio='none'
-					>
-						<slot />
-					</svg>
-				</div>
-			)}
-		</Lism>
-	)
+  componentProps && (
+    <Lism {...lismProps}>
+      {isEmpty ? null : (
+        <div class="c--shapeDivider_inner">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="c--shapeDivider_svg"
+            viewBox={viewBox}
+            width="100%"
+            height="100%"
+            fill="currentColor"
+            focusable="false"
+            preserveAspectRatio="none"
+          >
+            <slot />
+          </svg>
+        </div>
+      )}
+    </Lism>
+  )
 }

package/src/components/ShapeDivider/getProps.js

@@ -9,32 +9,32 @@
  * @param {string} [props.flip] - X/Y/XY で反転方向を指定
  */
 export default function getProps({ viewBox, isAnimation, isEmpty, level = 5, stretch, offset, flip, style = {}, ...restProps }) {
-	// level が 0 の場合は非表示
-	if (level === 0) return null;
+  // level が 0 の場合は非表示
+  if (level === 0) return null;
 
-	// CSS変数をセット
-	const computedStyle = { ...style };
-	computedStyle['--level'] = level || null;
-	computedStyle['--_inner-offset'] = offset || null;
-	computedStyle['--_inner-stretch'] = stretch || null;
+  // CSS変数をセット
+  const computedStyle = { ...style };
+  computedStyle['--level'] = level || null;
+  computedStyle['--_inner-offset'] = offset || null;
+  computedStyle['--_inner-stretch'] = stretch || null;
 
-	const _props = {
-		lismClass: 'c--shapeDivider',
-		'max-sz': 'full',
-		'aria-hidden': 'true',
-	};
-	if (flip) _props['data-flip'] = flip;
-	if (isAnimation) _props['data-has-animation'] = 'true';
+  const _props = {
+    lismClass: 'c--shapeDivider',
+    'max-sz': 'full',
+    'aria-hidden': 'true',
+  };
+  if (flip) _props['data-flip'] = flip;
+  if (isAnimation) _props['data-has-animation'] = 'true';
 
-	return {
-		..._props,
-		style: computedStyle,
+  return {
+    ..._props,
+    style: computedStyle,
 
-		// SVG用のprops
-		viewBox,
-		isEmpty,
+    // SVG用のprops
+    viewBox,
+    isEmpty,
 
-		// その他のprops
-		...restProps,
-	};
+    // その他のprops
+    ...restProps,
+  };
 }

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

@@ -1,4 +1,5 @@
-import React from 'react';
+'use client';
+import { useState, useId, Children, isValidElement } from 'react';
 import { Lism } from 'lism-css/react';
 import Tab from './Tab';
 import TabItem from './TabItem';
@@ -10,53 +11,51 @@ import getTabsProps from '../getProps';
 import '../_style.css';
 
 export default function Tabs({ tabId = '', defaultIndex = 1, listProps = {}, children, ...props }) {
-	const [activeIndex, setActiveIndex] = React.useState(defaultIndex);
-	const theTabId = tabId || React.useId();
-	const btns = [];
-	const panels = [];
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+  const theTabId = tabId || useId();
+  const btns = [];
+  const panels = [];
 
-	// Tabs.Item の処理
-	React.Children.forEach(children, (child, index) => {
-		const tabIndex = index + 1; // 1 はじまり
-		// console.log('child.type', React.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 (React.isValidElement(child) && child.type === TabItem) {
-			React.Children.forEach(child.props.children, (nestedChild) => {
-				if (React.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);
+  });
 });