@lism-css/ui 0.2.1 → 0.2.3

package/src/components/Modal/_style.css

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

package/src/components/Modal/getProps.js

@@ -2,7 +2,7 @@ import atts from 'lism-css/lib/helper/atts';
 
 export function getProps({ lismClass = '', duration, style = {}, ...props }) {
 	const theProps = {
-		lismClass: atts(lismClass, 'd--modal'),
+		lismClass: atts(lismClass, 'c--modal'),
 		setPlain: true,
 	};
 	if (duration) {
@@ -17,14 +17,14 @@ export function getInnerProps({ lismClass = '', offset, style = {}, ...props })
 		style['--offset'] = offset;
 	}
 	return {
-		lismClass: atts(lismClass, 'd--modal_inner'),
+		lismClass: atts(lismClass, 'c--modal_inner'),
 		style,
 		...props,
 	};
 }
 
 export const defaultProps = {
-	body: { lismClass: 'd--modal_body' },
+	body: { lismClass: 'c--modal_body' },
 	closeBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
 	openBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
 };

package/src/components/Modal/react/Body.jsx

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

package/src/components/Modal/react/CloseBtn.jsx

@@ -1,5 +1,4 @@
-import { Lism } from '../../Lism';
-import { Icon } from '../../atomic/Icon';
+import { Lism, Icon } from 'lism-css/react';
 import { defaultProps } from '../getProps';
 
 // duration: [s]

package/src/components/Modal/react/Inner.jsx

@@ -1,4 +1,4 @@
-import { Lism } from '../../Lism';
+import { Lism } from 'lism-css/react';
 import { getInnerProps } from '../getProps';
 
 export default function ModalInner({ children, ...props }) {

package/src/components/Modal/react/Modal.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Lism } from '../../Lism';
+import { Lism } from 'lism-css/react';
 import { setEvent } from '../setModal';
 import { getProps } from '../getProps';
 

package/src/components/Modal/react/OpenBtn.jsx

@@ -1,4 +1,4 @@
-import { Lism } from '../../Lism';
+import { Lism } from 'lism-css/react';
 import { defaultProps } from '../getProps';
 
 // duration: [s]

package/src/components/Modal/setModal.ts

@@ -98,7 +98,7 @@ export function setEvent(modal: HTMLDialogElement): void {
 }
 
 const setModal = () => {
-	const modals = document.querySelectorAll('.d--modal');
+	const modals = document.querySelectorAll('.c--modal');
 
 	modals?.forEach((target) => {
 		setEvent(target as HTMLDialogElement);

package/src/components/NavMenu/_style.css

@@ -0,0 +1,21 @@
+@layer lism.modules {
+	.c--navMenu {
+		--link-td: none;
+		--hl: var(--hl--s);
+		--_item-p: var(--s20);
+		--focus-offset: -1px; /* アコーディオン化した時にoutlineが一部見えなくなるのを防ぐ */
+	}
+
+	.c--navMenu_nest {
+		--_item-p: inherit;
+	}
+
+	.c--navMenu_link {
+		padding: var(--_item-p);
+	}
+
+	.c--navMenu_nest,
+	.c--navMenu_item {
+		--bdc: inherit;
+	}
+}

package/src/components/NavMenu/astro/Item.astro

@@ -0,0 +1,8 @@
+---
+import { Lism } from 'lism-css/astro';
+import { getItemProps } from '../getProps';
+---
+
+<Lism {...getItemProps(Astro.props)}>
+	<slot />
+</Lism>

package/src/components/NavMenu/astro/Link.astro

@@ -0,0 +1,8 @@
+---
+import { Flex } from 'lism-css/astro';
+import { getLinkProps } from '../getProps';
+---
+
+<Flex {...getLinkProps(Astro.props)}>
+	<slot />
+</Flex>

package/src/components/NavMenu/astro/Nest.astro

@@ -0,0 +1,8 @@
+---
+import { Stack } from 'lism-css/astro';
+import { getNestProps } from '../getProps';
+---
+
+<Stack {...getNestProps(Astro.props)}>
+	<slot />
+</Stack>

package/src/components/NavMenu/astro/Root.astro

@@ -0,0 +1,9 @@
+---
+import { Stack } from 'lism-css/astro';
+import { getRootProps } from '../getProps';
+import '../_style.css';
+---
+
+<Stack {...getRootProps(Astro.props)}>
+	<slot />
+</Stack>

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

@@ -0,0 +1,6 @@
+import Root from './Root.astro';
+import Nest from './Nest.astro';
+import Item from './Item.astro';
+import Link from './Link.astro';
+
+export default { Root, Nest, Item, Link };

package/src/components/NavMenu/getProps.js

@@ -0,0 +1,65 @@
+/**
+ * NavMenu コンポーネントの共通プロパティ処理
+ */
+import getMaybeCssVar from 'lism-css/lib/getMaybeCssVar';
+
+/**
+ * NavMenu.Root のプロパティを処理
+ * @param {object} props - コンポーネントのプロパティ
+ * @param {string} [props.hovC] - ホバー時のテキストカラー（--hov-c として出力）
+ * @param {string} [props.hovBgc] - ホバー時の背景カラー（--hov-bgc として出力）
+ * @param {string} [props.itemP] - 各アイテムのパディング（--_item-p として出力）
+ * @param {object} [props.style] - スタイルオブジェクト
+ */
+export function getRootProps({ hovC, hovBgc, itemP, style = {}, ...props }) {
+	const computedStyle = { ...style };
+
+	if (hovBgc) computedStyle['--hov-bgc'] = getMaybeCssVar(hovBgc, 'color');
+	if (hovC) computedStyle['--hov-c'] = getMaybeCssVar(hovC, 'color');
+	if (itemP) computedStyle['--_item-p'] = getMaybeCssVar(itemP, 'space');
+
+	return {
+		lismClass: 'c--navMenu',
+		tag: 'ul',
+		style: computedStyle,
+		...props,
+	};
+}
+
+/**
+ * NavMenu.Nest のプロパティを処理
+ */
+export function getNestProps(props) {
+	return {
+		lismClass: 'c--navMenu_nest',
+		tag: 'ul',
+		'px-s': '20',
+		...props,
+	};
+}
+
+/**
+ * NavMenu.Item のプロパティを処理
+ */
+export function getItemProps(props) {
+	return {
+		lismClass: 'c--navMenu_item',
+		tag: 'li',
+		...props,
+	};
+}
+
+/**
+ * NavMenu.Link のプロパティを処理
+ * @param {string} [props.href] - リンク先URL。指定時は a タグになる
+ * @param {string} [props.tag='span'] - HTML タグ
+ */
+export function getLinkProps({ href, tag = 'span', ...props }) {
+	return {
+		lismClass: 'c--navMenu_link',
+		tag: href ? 'a' : tag,
+		href,
+		c: 'inherit',
+		...props,
+	};
+}

package/src/components/NavMenu/react/NavMenu.jsx

@@ -0,0 +1,19 @@
+import { Lism, Stack, Flex } from 'lism-css/react';
+import { getRootProps, getNestProps, getItemProps, getLinkProps } from '../getProps';
+import '../_style.css';
+
+export function Root({ children, ...props }) {
+	return <Stack {...getRootProps(props)}>{children}</Stack>;
+}
+
+export function Nest({ children, ...props }) {
+	return <Stack {...getNestProps(props)}>{children}</Stack>;
+}
+
+export function Item({ children, ...props }) {
+	return <Lism {...getItemProps(props)}>{children}</Lism>;
+}
+
+export function Link({ children, ...props }) {
+	return <Flex {...getLinkProps(props)}>{children}</Flex>;
+}

package/src/components/NavMenu/react/index.js

@@ -0,0 +1,3 @@
+import { Root, Item, Link, Nest } from './NavMenu';
+
+export default { Root, Item, Link, Nest };

package/src/components/ShapeDivider/_style.css

@@ -0,0 +1,56 @@
+/* Note: scale 反転は、__inner に対して行う。shapeDivider自身を反転させると、X方向に隙間ができてしまう。 */
+@layer lism.modules {
+	.c--shapeDivider {
+		--level: 0;
+
+		/* svg配置調整用 */
+		--_inner-offset: 0px;
+		--_inner-stretch: 1;
+
+		/* flip がオンなら -1 にセット */
+		--_flipX: 1;
+		--_flipY: 1;
+
+		/* 500px時点を最小値, 1200px時点を最大値にして、clampで高さを変動させる */
+		height: clamp(calc(5px * var(--level)), calc(1cqw * var(--level)), calc(12px * var(--level)));
+		overflow: visible;
+	}
+
+	.c--shapeDivider:where([data-flip^='X']) {
+		--_flipX: -1;
+	}
+
+	.c--shapeDivider:where([data-flip$='Y']) {
+		--_flipY: -1;
+	}
+	.c--shapeDivider_inner {
+		/* 隙間ができるのを防ぐ */
+		--offsetY: 0.5px;
+		--offsetX: -0.5px;
+		height: 100%;
+		width: calc(100% + 1px);
+		scale: calc(var(--_flipX) * var(--_inner-stretch)) var(--_flipY);
+		translate: calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY) * var(--_flipY));
+	}
+
+	.c--shapeDivider_svg {
+		/* 位置ずれ防止 */
+		display: block;
+	}
+
+	/* 左右にスライドするアニメーション */
+	:where([data-has-animation='true']) .c--shapeDivider_svg {
+		/* ↓ X 100% にしてるのは translateXのcalc計算で * -1 をしなくていいように。*/
+		transform-origin: 100% 0;
+		animation: lism--slideShape 12s infinite alternate linear;
+	}
+}
+
+@keyframes lism--slideShape {
+	0% {
+		transform: scaleX(4);
+	}
+	100% {
+		transform: scaleX(4) translateX(calc(100% - 25%));
+	}
+}

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

@@ -0,0 +1,31 @@
+---
+import { Lism } from 'lism-css/astro';
+import getProps from '../getProps';
+import '../_style.css';
+
+const componentProps = getProps(Astro.props);
+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>
+	)
+}

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

@@ -0,0 +1 @@
+export { default } from './ShapeDivider.astro';

package/src/components/ShapeDivider/getProps.js

@@ -0,0 +1,40 @@
+/**
+ * ShapeDivider コンポーネントの共通プロパティ処理
+ * @param {string} [props.viewBox] - SVG の viewBox
+ * @param {boolean} [props.isAnimation] - アニメーションを有効にするか
+ * @param {boolean} [props.isEmpty] - シェイプを非表示にしてスペーサーとして使用
+ * @param {number} [props.level=5] - シェイプの高さレベル
+ * @param {string} [props.stretch] - 水平方向の引き伸ばし量
+ * @param {string} [props.offset] - 水平方向のオフセット
+ * @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;
+
+	// 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';
+
+	return {
+		..._props,
+		style: computedStyle,
+
+		// SVG用のprops
+		viewBox,
+		isEmpty,
+
+		// その他のprops
+		...restProps,
+	};
+}

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

@@ -0,0 +1,33 @@
+import { Lism } from 'lism-css/react';
+import getProps from '../getProps';
+import '../_style.css';
+
+export default function ShapeDivider({ children, ...props }) {
+	const componentProps = getProps(props);
+
+	// level が 0 の場合は非表示
+	if (!componentProps) return null;
+
+	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>
+	);
+}

package/src/components/ShapeDivider/react/index.js

@@ -0,0 +1 @@
+export { default } from './ShapeDivider';

package/src/components/Tabs/_style.css

@@ -1,14 +1,14 @@
 @layer lism.modules {
-	.d--tabs {
+	.c--tabs {
 		display: grid;
 		grid: 'list' 'panel' / 100%;
 	}
-	.d--tabs_list {
+	.c--tabs_list {
 		grid-area: list;
 		display: flex;
 		overflow-x: auto;
 	}
-	.d--tabs_tab {
+	.c--tabs_tab {
 		&[aria-selected='true'] {
 			--_notSelected: ;
 		}
@@ -21,7 +21,7 @@
 		}
 	}
 
-	.d--tabs_panel {
+	.c--tabs_panel {
 		grid-area: panel;
 		width: 100%;
 

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

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

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

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

@@ -50,7 +50,7 @@ const hasItems = btns.length > 0;
 
 <script>
 	import setTabs from '../setTabs';
-	const tabsAll = document.querySelectorAll('.d--tabs');
+	const tabsAll = document.querySelectorAll('.c--tabs');
 	tabsAll.forEach((tabs) => {
 		setTabs(tabs);
 	});

package/src/components/Tabs/getProps.js

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

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

@@ -7,7 +7,7 @@ export default function Tab({ tabId = 'tab', index = 0, isActive = false, ...pro
 	return (
 		<Lism
 			tag='button'
-			lismClass='d--tabs_tab'
+			lismClass='c--tabs_tab'
 			setPlain
 			role='tab'
 			aria-controls={controlId}

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

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

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

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

package/src/components/Tabs/script.js

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

package/src/components/astro.ts

@@ -4,5 +4,8 @@ export { default as Avatar } from './Avatar/astro';
 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 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';

package/src/components/react.ts

@@ -4,5 +4,8 @@ export { default as Avatar } from './Avatar/react';
 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 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';

package/src/style.scss

@@ -2,3 +2,6 @@
 @use './components/Avatar/_style.css' as avatar;
 @use './components/Badge/_style.css' as badge;
 @use './components/Button/_style.css' as button;
+@use './components/Chat/_style.css' as chat;
+@use './components/NavMenu/_style.css' as navmenu;
+@use './components/ShapeDivider/_style.css' as shapedivider;