lism-css 0.0.1 → 0.0.3

package/packages/astro/Modal/Modal.astro

@@ -0,0 +1,20 @@
+---
+import type { LismProps } from '../types';
+import { getProps } from '../../../dist/components/Modal/getProps';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {}
+const { layout, ...props } = Astro.props || {};
+const Layout = layout || Lism;
+---
+
+<Layout tag='dialog' {...getProps(props)}>
+	<slot />
+</Layout>
+
+<script>
+	import setModal from '../../../dist/components/Modal/setModal';
+	console.log('modal.astro');
+	setModal();
+</script>

package/packages/astro/Modal/index.js

@@ -0,0 +1,8 @@
+import Root from './Modal.astro';
+import Inner from './Inner.astro';
+import Body from './Body.astro';
+import CloseIconBtn from './CloseIconBtn.astro';
+import Header from './Header.astro';
+import Footer from './Footer.astro';
+
+export default { Root, Inner, Body, CloseIconBtn, Header, Footer };

package/packages/astro/OverlayLink/OverlayLink.astro

@@ -0,0 +1,10 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import getOverlayLinkProps from '../../../dist/components/OverlayLink/getProps';
+
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Lism {...getOverlayLinkProps(props)}><slot /></Lism>

package/packages/astro/OverlayLink/index.js

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

package/packages/astro/Spacer/Spacer.astro

@@ -0,0 +1,11 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import getProps from '../../../dist/components/Spacer/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Lism skipState {...getProps(props)} />

package/packages/astro/Spacer/index.js

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

package/packages/astro/Stack/Stack.astro

@@ -0,0 +1,7 @@
+---
+import Flex from '../Flex/Flex.astro';
+---
+
+<Flex _flex='stack' {...Astro.props}>
+	<slot />
+</Flex>

package/packages/astro/Stack/index.js

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

package/packages/astro/Tabs/Tab.astro

@@ -0,0 +1,26 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+
+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'
+	className='re--style'
+	role='tab'
+	aria-controls={controlId}
+	aria-selected={isActive ? 'true' : 'false'}
+	skipState
+	{...props}
+>
+	<slot />
+</Lism>

package/packages/astro/Tabs/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/packages/astro/Tabs/TabList.astro

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

package/packages/astro/Tabs/TabPanel.astro

@@ -0,0 +1,22 @@
+---
+import type { LismProps } from '../types';
+import { GridItem } from '../Grid';
+
+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}`;
+---
+
+<GridItem
+	id={controlId}
+	role='tabpanel'
+	aria-hidden={isActive ? 'false' : 'true'}
+	lismClass='d--tabs__panel'
+	{...props}
+>
+	<slot />
+</GridItem>

package/packages/astro/Tabs/Tabs.astro

@@ -0,0 +1,60 @@
+---
+import type { LismProps } from '../types';
+import { Grid } from '../Grid';
+// import Tab from './Tab.astro';
+// import TabPanel from './TabPanel.astro';
+import TabList from './TabList.astro';
+import { uuidv4 } from '../helper/index.js';
+import transformTabitems from './transformTabitems.js';
+import getTabsProps from '../../../dist/components/Tabs/getProps';
+
+// 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;
+---
+
+<Grid {...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 />}
+</Grid>
+
+<script>
+	// import setEvent from './setEvent';
+	import setEvent from '../../../dist/components/Tabs/setEvent';
+	const tabsAll = document.querySelectorAll('.d--tabs');
+	tabsAll.forEach((tabs) => {
+		setEvent(tabs);
+	});
+</script>

package/packages/astro/Tabs/index.js

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

package/packages/astro/Tabs/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/packages/astro/Test/Test.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {
+	duration?: string | number;
+}
+const props = Astro.props || {};
+---
+
+<Lism data-lism='test' bd p='20' {...props}>
+	<slot />
+</Lism>

package/packages/astro/Test/TestItem.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {
+	duration?: string | number;
+}
+const props = Astro.props || {};
+---
+
+<Lism data-lism='test-item' bd bds='dashed' {...props}>
+	<slot />
+</Lism>

package/packages/astro/Test/index.js

@@ -0,0 +1,4 @@
+import { default as Root } from './Test.astro';
+import { default as Item } from './TestItem.astro';
+
+export default { Root, Item };

package/packages/astro/WithSide/WithSide.astro

@@ -0,0 +1,12 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { getWithSideProps } from '../../../dist/components/WithSide/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+
+const props = Astro.props || {};
+---
+
+<Lism {...getWithSideProps(props)}><slot /></Lism>

package/packages/astro/WithSide/index.js

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

package/packages/astro/helper/index.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/packages/astro/index.js

@@ -0,0 +1,29 @@
+/**
+ * .astro でLismコンポーネントを配布
+ */
+
+// export { default as Lism } from './Lism/Lism.astro';
+// export { Lism, Text, Media, Link } from './Lism';
+export * from './Lism';
+export * from './Dummy';
+export * from './Box';
+export * from './Flex';
+export * from './Stack';
+export * from './Grid';
+export * from './Columns';
+export * from './Center';
+export * from './WithSide';
+export * from './Frame';
+
+export * from './Container';
+export * from './Layer';
+export * from './LinkBox';
+
+export * from './Spacer';
+export * from './Decorator';
+export * from './Divider';
+export * from './Icon';
+
+export { default as Accordion } from './Accordion';
+export { default as Modal } from './Modal';
+export { default as Tabs } from './Tabs';

package/packages/astro/types.ts

@@ -0,0 +1,28 @@
+// export interface LismClass {
+// 	b?: string;
+// 	c?: string;
+// 	l?: string;
+// 	e?: string;
+// }
+export interface LismStyle {
+	[key: string]: number | string; // 任意のプロパティを受け取る
+}
+
+export interface exProps {
+	[key: string]: any;
+}
+
+export interface LismProps {
+	lismClass?: string;
+	_lismClass?: string[];
+	lismStyle?: LismStyle;
+	lismState?: string[];
+	skipState?: boolean;
+	as?: any;
+	tag?: string;
+	variant?: string;
+	// lismState?: ;
+	// style
+	exProps?: exProps;
+	[key: string]: any;
+}

package/packages/next-js/Accordion/Accordion.jsx

@@ -0,0 +1,19 @@
+'use client';
+import Accordion from '../../../dist/components/Accordion';
+// import 'style';
+
+export function Root(props) {
+	return <Accordion.Root {...props} />;
+}
+export function Header(props) {
+	return <Accordion.Header {...props} />;
+}
+export function Label(props) {
+	return <Accordion.Label {...props} />;
+}
+export function Body(props) {
+	return <Accordion.Body {...props} />;
+}
+export function Icon(props) {
+	return <Accordion.Icon {...props} />;
+}

package/packages/next-js/Accordion/index.js

@@ -0,0 +1,2 @@
+import { Root, Header, Label, Body, Icon } from './Accordion';
+export default { Root, Header, Label, Body, Icon };

package/src/scss/__memo/_lh-auto-all.scss

@@ -0,0 +1,46 @@
+/*
+ * タイポグラフィオート計算でを * に対して指定するケース
+ * 親要素の --lh の引き継ぎに問題が発生する。
+ 	→ 下限・上限を超える値がセットされている時、その値を継承できない。
+ */
+:root{
+	--lh--min: 1.3em;
+	--lh--max: 1.9em;
+}
+// ---------------------------------------------------------------------
+
+// 全要素で --fz, --lh を受け取れるように
+:where(body *){
+	font-size: var(--fz, inherit);
+	line-height: var(--lh, inherit);
+}
+
+// [style*="--fz:"]{
+// 	font-size: var(--fz);
+// }
+
+
+// :not([style*="font-size"]) にしてても、* によって親要素側で計算されはじめたりするので、多少影響は受ける
+*:not([style*="font-size"]),
+[style*="--fz:"], // --fzでフォントサイズ指定されているもの
+[class*="-fz\:"], {
+
+	--slope: 0.35; // 自動計算用の傾き
+	--base: calc(var(--lh, var(--root--lh)) * 1em); // 計算ように単位をつけておく
+
+	// 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
+	line-height: clamp(
+		min(var(--lh--min), var(--base)),
+		calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz, 1em)) ),
+		max(var(--lh--max), var(--base))
+	);
+}
+
+// .-fz:などに対して--lh指定されてあった場合に上書きできる位置で
+// [style*="--lh:"]{
+// 	line-height: var(--lh);
+// 	--lh--min: min(var(--lh--min), var(--base));
+// 	--lh--max: max(var(--lh--min), var(--base));
+// }
+
+// ---------------------------------------------------------------------

package/src/scss/__memo/_lh-auto-h.scss

@@ -0,0 +1,50 @@
+/*
+ * タイポグラフィ
+ */
+:root {
+	--lh--min: 1.3em;
+	--lh--max: 1.9em;
+}
+
+// ---------------------------------------------------------------------
+body {
+	--fz: 1em; // 計算用に --fz の単位をem化しておく
+	--lh: var(--root--lh); // 任意の値
+}
+
+// :where(body *),
+:where(:is(h1, h2, h3, h4, h5, h6, p)) {
+	font-size: var(--fz, inherit);
+	line-height: var(--lh, inherit);
+}
+
+// [style*="--fz:"]{
+// 	font-size: var(--fz);
+// }
+
+// :where(:is(h1, h2, h3, h4, h5, h6, p)):not([style*="font-size"]){
+// 	color: red;
+// }
+
+.-typoCalc, // (仮名) 自動計算対象にするというユーティリティクラス合ったほうが便利かも...？
+[style*="--fz:"], // --fzでフォントサイズ指定されているもの
+:where(:is(h1, h2, h3, h4, h5, h6, p)):not([style*="font-size"]),
+[class*="-fz\:"] {
+	--slope: 0.35; // 自動計算用の傾き
+	--base: calc(var(--lh) * 1em); // 計算ように単位をつけておく
+
+	// 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
+	line-height: clamp(
+		min(var(--lh--min), var(--base)),
+		calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz))),
+		max(var(--lh--max), var(--base))
+	);
+	font-size: var(--fz);
+}
+
+// --lh指定されている要素自身はその値で上書き。→ .-lh: 使ってもらう?
+[style*='--lh:'] {
+	line-height: var(--lh);
+}
+
+// ---------------------------------------------------------------------

package/src/scss/__memo/_lh-manual.scss

@@ -0,0 +1,58 @@
+:root {
+	// 各fzサイズ用のline-height
+	--ls--6L--lh: 1.2;
+	--ls--5L--lh: 1.4;
+	--ls--4L--lh: 1.4;
+	--ls--3L--lh: 1.5;
+	--ls--2L--lh: 1.6;
+	--ls--L--lh: 1.6;
+
+	// 1,
+	// 1.25, 5XL
+	// 1.4 4XL
+	// 1.5, 2XL, 3XL,
+	// 1.6, L XL
+	// 1.75 base
+	// 2,
+	// 2.5
+
+	// 1, xs    sm   md,  lg  xl
+	// 1, 1.25, 1.5. 1.75, 2,  2.5
+}
+
+h1 {
+	--lh: var(--ls--4L--lh);
+}
+h2 {
+	--lh: var(--ls--3L--lh);
+}
+h3 {
+	--lh: var(--ls--2L--lh);
+}
+h4 {
+	--lh: var(--ls--L--lh);
+}
+// h5 {}
+// h6 {}
+
+// .-fz\:xs {}
+// .-fz\:s {}
+// .-fz\:m {}
+.-fz\:l {
+	--lh: var(--ls--L--lh);
+}
+.-fz\:xl {
+	--lh: var(--ls--2L--lh);
+}
+.-fz\:2xl {
+	--lh: var(--ls--3L--lh);
+}
+.-fz\:3xl {
+	--lh: var(--ls--4L--lh);
+}
+.-fz\:4xl {
+	--lh: var(--ls--5L--lh);
+}
+.-fz\:5xl {
+	--lh: var(--ls--6L--lh);
+}