@lism-css/ui 0.0.0-dev.2 → 0.0.0-dev.4

package/src/components/Accordion/astro/Accordion.astro

@@ -3,6 +3,8 @@
 import getLismProps from 'lism-css/lib/getLismProps';
 import { getAccProps } from '../getProps';
 
+import '../_style.css';
+
 // Propsの定義
 // interface Props extends LismProps {
 // 	duration?: string | number;
@@ -15,7 +17,6 @@ const props = Astro.props || {};
 </details>
 
 <script>
-	// import setEvent from './setEvent';
 	import setAccordion from '../setAccordion';
 	setAccordion();
 </script>

package/src/components/Accordion/{AccIcon.jsx → react/AccIcon.jsx}

@@ -1,5 +1,5 @@
 import { Lism, Icon } from 'lism-css/react';
-import { getAccIconProps } from './getProps';
+import { getAccIconProps } from '../getProps';
 
 export default function AccIcon({ icon = 'caret-down', viewBox, children = null, ...props }) {
 	return <Lism {...getAccIconProps(props)}>{children || <Icon viewBox={viewBox} icon={icon} />}</Lism>;

package/src/components/Accordion/{Accordion.jsx → react/Accordion.jsx}

@@ -1,10 +1,12 @@
 import React from 'react';
 import getLismProps from 'lism-css/lib/getLismProps';
 import { Lism } from 'lism-css/react';
-import { getAccProps, defaultProps } from './getProps';
-import { setEvent } from './setAccordion';
+import { getAccProps, defaultProps } from '../getProps';
+import { setEvent } from '../setAccordion';
 import AccIcon from './AccIcon';
 
+import '../_style.css';
+
 // import { AccContext } from './context';
 
 // duration: [s]

package/src/components/Modal/_style.css

@@ -0,0 +1,44 @@
+/*
+ * dialog で実装.
+ *   Memo: ::backdrop のアニメーションはFirefoxで動かない
+ */
+@layer lism.modules {
+	.d--modal {
+		--flow: 0; /* flow直下にきても影響しないように */
+		--duration: var(--modal-duration, 0.4s);
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		overflow: unset;
+		background: var(--backdrop-bg, rgb(0 0 0 / 0.6));
+		transition-duration: var(--duration);
+		transition-property: opacity;
+	}
+	.d--modal::backdrop {
+		background: none;
+	}
+	.d--modal[open] {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.d--modal_inner {
+		--offset: 0 0; /* アニメーション用 */
+		background-color: var(--base);
+		transition: translate var(--duration);
+		max-height: 100%;
+	}
+
+	/* .d--modal_body {
+	overscroll-behavior: contain;
+} */
+
+	.d--modal:not([data-is-open]) {
+		opacity: 0;
+	}
+	.d--modal:not([data-is-open]) > .d--modal_inner {
+		translate: var(--offset);
+	}
+}

package/src/components/Modal/astro/Body.astro

@@ -0,0 +1,13 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+import { defaultProps } from '../getProps';
+
+// Propsの定義
+// interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.body} {...props}>
+	<slot />
+</Lism>

package/src/components/Modal/astro/CloseBtn.astro

@@ -0,0 +1,24 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+import { Icon } from 'lism-css/react';
+import { defaultProps } from '../getProps';
+
+// Propsの定義
+// interface Props extends LismProps {}
+const { modalId = '', icon, srText = 'Close', ...props } = Astro.props || {};
+const btnProps = { ...defaultProps.closeBtn, ...props };
+---
+
+{
+	Astro.slots.has('default') ? (
+		<Lism data-modal-close={modalId} {...btnProps}>
+			<slot />
+		</Lism>
+	) : (
+		<Lism data-modal-close={modalId} {...btnProps}>
+			<Icon icon={icon || 'x'} />
+			<span class='u-hidden'>{srText || 'Close'}</span>
+		</Lism>
+	)
+}

package/src/components/Modal/astro/Inner.astro

@@ -0,0 +1,13 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+import { getInnerProps } from '../getProps';
+
+// Propsの定義
+// interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Lism {...getInnerProps(props)}>
+	<slot />
+</Lism>

package/src/components/Modal/astro/Modal.astro

@@ -0,0 +1,21 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+import { getProps } from '../getProps';
+import '../_style.css';
+
+// Propsの定義
+// interface Props extends LismProps {
+// 	duration?: string | number;
+// }
+const props = Astro.props || {};
+---
+
+<Lism {...getProps(props)}>
+	<slot />
+</Lism>
+
+<script>
+	import setModal from '../setModal';
+	setModal();
+</script>

package/src/components/Modal/astro/OpenBtn.astro

@@ -0,0 +1,14 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+import { defaultProps } from '../getProps';
+
+// Propsの定義
+// interface Props extends LismProps {}
+const { modalId = '', ...props } = Astro.props || {};
+const btnProps = { ...defaultProps.openBtn, ...props };
+---
+
+<Lism data-modal-open={modalId} {...btnProps}>
+	<slot />
+</Lism>

package/src/components/Modal/astro/index.js

@@ -0,0 +1,7 @@
+import Root from './Modal.astro';
+import Inner from './Inner.astro';
+import Body from './Body.astro';
+import CloseBtn from './CloseBtn.astro';
+import OpenBtn from './OpenBtn.astro';
+
+export default { Root, Inner, Body, CloseBtn, OpenBtn };

package/src/components/Modal/getProps.js

@@ -1,4 +1,4 @@
-import atts from '../../lib/helper/atts';
+import atts from 'lism-css/lib/helper/atts';
 
 export function getProps({ lismClass = '', duration, style = {}, ...props }) {
 	const theProps = {

package/src/components/Modal/{Body.jsx → react/Body.jsx}

@@ -1,5 +1,5 @@
-import { Lism } from '../Lism';
-import { defaultProps } from './getProps';
+import { Lism } from '../../Lism';
+import { defaultProps } from '../getProps';
 
 export default function ModalBody({ children, ...props }) {
 	return (

package/src/components/Modal/{CloseBtn.jsx → react/CloseBtn.jsx}

@@ -1,6 +1,7 @@
-import { Lism } from '../Lism';
-import { Icon } from '../atomic/Icon';
-import { defaultProps } from './getProps';
+import { Lism } from '../../Lism';
+import { Icon } from '../../atomic/Icon';
+import { defaultProps } from '../getProps';
+
 // duration: [s]
 export default function CloseBtn({ children, modalId = '', icon, srText = 'Close', ...props }) {
 	// const lismProps = getLismProps(getAccProps(props));

package/src/components/Modal/{Inner.jsx → react/Inner.jsx}

@@ -1,5 +1,5 @@
-import { Lism } from '../Lism';
-import { getInnerProps } from './getProps';
+import { Lism } from '../../Lism';
+import { getInnerProps } from '../getProps';
 
 export default function ModalInner({ children, ...props }) {
 	return <Lism {...getInnerProps(props)}>{children}</Lism>;

package/src/components/Modal/{Modal.jsx → react/Modal.jsx}

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Lism } from '../Lism';
-import { setEvent } from './setModal';
-import { getProps } from './getProps';
+import { Lism } from '../../Lism';
+import { setEvent } from '../setModal';
+import { getProps } from '../getProps';
+
+import '../_style.css';
 
 // duration: [s]
 const Modal = ({ children, ...props }) => {

package/src/components/Modal/{OpenBtn.jsx → react/OpenBtn.jsx}

@@ -1,5 +1,6 @@
-import { Lism } from '../Lism';
-import { defaultProps } from './getProps';
+import { Lism } from '../../Lism';
+import { defaultProps } from '../getProps';
+
 // duration: [s]
 export default function OpenBtn({ children, modalId = '', ...props }) {
 	return (

package/src/components/Tabs/_style.css

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

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

@@ -0,0 +1,17 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+
+// export interface Props extends LismProps {
+// 	// controlId: string;
+// 	isActive?: boolean;
+// 	tabId?: string | number;
+// 	index?: number;
+// }
+const { tabId = 'tab', index = 0, isActive, ...props } = Astro.props;
+const controlId = `${tabId}-${index}`;
+---
+
+<Lism tag='button' lismClass='d--tabs_tab' setPlain role='tab' aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
+	<slot />
+</Lism>

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

@@ -0,0 +1,8 @@
+---
+// memo: タブボタンが <button ~ button> で取得できることを前提にして<slot />だけにしている。
+// <slot name='tab' />,<slot name='panel' />に分け、それぞれをカスタムDOMで囲んだ方が確実にそれぞれの内容は取れるが、わざわざslot指定が必要になってしまう。
+---
+
+<lism-placeholder-tabitem>
+	<slot />
+</lism-placeholder-tabitem>

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

@@ -0,0 +1,8 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+---
+
+<Lism lismClass='d--tabs_list' role='tablist' {...Astro.props}>
+	<slot />
+</Lism>

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

@@ -0,0 +1,16 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+
+// export interface Props extends LismProps {
+// 	isActive?: boolean;
+// 	tabId?: string | number;
+// 	index?: number;
+// }
+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='d--tabs_panel' {...props}>
+	<slot />
+</Lism>

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

@@ -0,0 +1,57 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+// import Tab from './Tab.astro';
+// import TabPanel from './TabPanel.astro';
+import TabList from './TabList.astro';
+import { uuidv4 } from './helper.js';
+import transformTabitems from './transformTabitems.js';
+import getTabsProps from '../getProps';
+
+import '../_style.css';
+
+// import TheTab from './TheTab.astro';}
+// slotsについて: https://docs.astro.build/ja/reference/api-reference/#astroslots
+
+// Propsの定義
+// interface Props extends LismProps {
+// 	uid?: string | number;
+// 	defaultIndex?: string | number;
+// }
+// propsの取得
+const { defaultIndex = 1, tabId = '', listProps = {}, ...props } = Astro.props || {};
+
+// tabID生成
+const theTabID = tabId ? tabId : uuidv4();
+
+// 子要素の方から順番に処理されていくので、文字列処理でデータを抽出
+const { btns, panels } = transformTabitems(await Astro.slots.render('default'), theTabID, defaultIndex);
+
+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 />}
+</Lism>
+
+<script>
+	import setTabs from '../setTabs';
+	const tabsAll = document.querySelectorAll('.d--tabs');
+	tabsAll.forEach((tabs) => {
+		setTabs(tabs);
+	});
+</script>

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

@@ -0,0 +1,6 @@
+// https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
+export 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/src/components/Tabs/astro/index.js

@@ -0,0 +1,7 @@
+import Root from './Tabs.astro';
+import Item from './TabItem.astro';
+import List from './TabList.astro';
+import Panel from './TabPanel.astro';
+import Tab from './Tab.astro';
+
+export default { Root, List, Panel, Item, Tab };

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

@@ -0,0 +1,40 @@
+// <lism-placeholder-tabitem> → div.tabitem へ 変換
+export default function transformHTML(htmlString, tabID, defaultIndex) {
+	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)];
+
+	// 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++;
+
+		// <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"');
+		}
+
+		btns.push(`<button${btnAtts}>${btnContent}</button>`);
+		panels.push(panel);
+	});
+
+	return { btns, panels };
+}

package/src/components/Tabs/getProps.js

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

package/src/components/Tabs/{Tab.jsx → react/Tab.jsx}

@@ -1,5 +1,5 @@
 // import React from 'react';
-import { Lism } from '../Lism';
+import { Lism } from 'lism-css/react';
 
 export default function Tab({ tabId = 'tab', index = 0, isActive = false, ...props }) {
 	const controlId = `${tabId}-${index}`;

package/src/components/Tabs/{TabList.jsx → react/TabList.jsx}

@@ -1,4 +1,4 @@
-import { Lism } from '../Lism';
+import { Lism } from 'lism-css/react';
 
 export default function TabList(props) {
 	// jc: 's',

package/src/components/Tabs/{TabPanel.jsx → react/TabPanel.jsx}

@@ -1,5 +1,5 @@
 // import React from 'react';
-import { Lism } from '../Lism';
+import { Lism } from 'lism-css/react';
 
 export default function TabPanel({ tabId = 'tab', isActive = false, index = 0, ...props }) {
 	const controlId = `${tabId}-${index}`;

package/src/components/Tabs/{Tabs.jsx → react/Tabs.jsx}

@@ -1,12 +1,14 @@
 import React from 'react';
-import { Lism } from '../Lism';
+import { Lism } from 'lism-css/react';
 import Tab from './Tab';
 import TabItem from './TabItem';
 import TabList from './TabList';
 import TabPanel from './TabPanel';
-import getTabsProps from './getProps';
+import getTabsProps from '../getProps';
 // import { TabContext } from './context';
 
+import '../_style.css';
+
 export default function Tabs({ tabId = '', defaultIndex = 1, listProps = {}, children, ...props }) {
 	const [activeIndex, setActiveIndex] = React.useState(defaultIndex);
 	const theTabId = tabId || React.useId();

package/src/components/Tabs/script.js

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

package/src/components/Tabs/{setEvent.js → setTabs.js}

@@ -46,7 +46,7 @@ const toggleAriaData = (clickedButton) => {
 	targetBody.setAttribute('aria-hidden', 'false');
 };
 
-function setEvent(tabs) {
+function setTabs(tabs) {
 	const tabBtns = tabs.querySelectorAll('button[role="tab"]');
 	tabBtns.forEach((tabBtn) => {
 		tabBtn.addEventListener('click', function (e) {
@@ -84,4 +84,4 @@ function setEvent(tabs) {
 	}
 }
 
-export default setEvent;
+export default setTabs;

package/src/components/astro.ts

@@ -1,3 +1,3 @@
 export { default as Accordion } from './Accordion/astro';
-// export { default as Tabs } from './Tabs';
-// export { default as Modal } from './Modal';
+export { default as Modal } from './Modal/astro';
+export { default as Tabs } from './Tabs/astro';

package/src/components/react.ts

@@ -1,3 +1,3 @@
-export { default as Accordion } from './Accordion';
-// export { default as Tabs } from './Tabs';
-// export { default as Modal } from './Modal';
+export { default as Accordion } from './Accordion/react';
+export { default as Modal } from './Modal/react';
+export { default as Tabs } from './Tabs/react';

package/src/style.scss

@@ -0,0 +1 @@
+@use './components/Accordion/_style.css';

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) Loos, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/components/Accordion/_style.scss

@@ -1,54 +0,0 @@
-.d--accordion {
-	--duration: var(--acc-duration, 0.4s);
-	&[data-opened] {
-		--_notOpen: ;
-	}
-	&:not([data-opened]) {
-		--_isOpen: ;
-	}
-}
-
-.d--accordion_header {
-	display: grid;
-	grid: auto / 1fr auto;
-	gap: 0.5em;
-	align-items: center;
-	outline-offset: -1px; // overflow:clip|hidden; で見えなくなってしまうのを防ぐ
-
-	/* Safariで表示されるデフォルトの三角形アイコンを消す */
-	&::-webkit-details-marker {
-		display: none;
-	}
-}
-
-.d--accordion_body {
-	display: grid;
-	grid: 1fr / auto;
-	transition-property: margin-block, padding-block, opacity, grid-template;
-	transition-duration: var(--duration);
-}
-
-// ※ 正常な animation には必須
-.d--accordion_inner {
-	overflow: hidden;
-}
-
-// 閉じている時
-.d--accordion:not([data-opened]) {
-	> .d--accordion_body {
-		grid: 0fr / auto;
-		padding-block: 0 !important;
-		margin-block: 0 !important;
-	}
-}
-
-// アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。
-.d--accordion_icon {
-	display: grid;
-
-	// __icon 自体にborderつけたりすると回転が見えてしまうので、 icon自体を回転させる。
-	> .a--icon {
-		transition-duration: var(--duration);
-		rotate: var(--_isOpen, -180deg);
-	}
-}