@lism-css/ui 0.9.2 → 0.10.0

package/src/components/Chat/getProps.js

@@ -4,54 +4,49 @@
 
 // 各サブ要素のデフォルトプロパティ
 export const defaultProps = {
-	avatar: {
-		lismClass: 'c--chat_avatar',
-		bgc: 'base',
-		ar: '1/1',
-		bdrs: '99',
-		'aria-hidden': 'true',
-	},
-	name: {
-		lismClass: 'c--chat_name',
-		c: 'text-2',
-		fs: 'italic',
-		fz: '2xs',
-		lh: '1',
-		py: '5',
-		px: '10',
-		aslf: 'end',
-	},
-	body: {
-		lismClass: 'c--chat_body',
-		pos: 'rel',
-	},
-	deco: {
-		lismClass: 'c--chat_deco',
-		pos: 'abs',
-	},
-	content: {
-		lismClass: 'c--chat_content',
-		bdrs: '30',
-		p: '20',
-		lh: 's',
-	},
+  avatar: {
+    lismClass: 'c--chat_avatar',
+    bgc: 'base',
+    ar: '1/1',
+    bdrs: '99',
+    'aria-hidden': 'true',
+  },
+  name: {
+    lismClass: 'c--chat_name',
+    c: 'text-2',
+    fs: 'italic',
+    fz: '2xs',
+    lh: '1',
+    py: '5',
+    px: '10',
+    aslf: 'end',
+  },
+  body: {
+    lismClass: 'c--chat_body',
+    pos: 'rel',
+  },
+  deco: {
+    lismClass: 'c--chat_deco',
+    pos: 'abs',
+  },
+  content: {
+    lismClass: 'c--chat_content',
+    bdrs: '30',
+    p: '20',
+    lh: 's',
+  },
 };
 
 /**
  * Chat コンポーネントのルートプロパティを生成
  */
-export default function getChatProps({
-	variant = 'speak',
-	direction = 'start',
-	keycolor = 'gray',
-	...props
-}) {
-	return {
-		lismClass: 'c--chat',
-		variant,
-		keycolor,
-		'data-chat-dir': direction,
-		ji: direction,
-		...props,
-	};
+export default function getChatProps({ variant = 'speak', direction = 'start', keycolor = 'gray', ...props }) {
+  return {
+    lismClass: 'c--chat',
+    variant,
+    keycolor,
+    'data-chat-dir': direction,
+    ji: direction,
+    ...props,
+  };
 }

package/src/components/Chat/react/Chat.jsx

@@ -3,22 +3,22 @@ import getChatProps, { defaultProps } from '../getProps';
 import '../_style.css';
 
 export default function Chat({ name, avatar, flow = 's', children, ...props }) {
-	const { 'data-chat-dir': direction, ...chatProps } = getChatProps(props);
+  const { 'data-chat-dir': direction, ...chatProps } = getChatProps(props);
 
-	return (
-		<Grid data-chat-dir={direction} {...chatProps}>
-			{avatar && (
-				<Frame {...defaultProps.avatar} src={avatar} alt=''>
-					<img src={avatar} alt='' width='60' height='60' decoding='async' />
-				</Frame>
-			)}
-			{name && <Lism {...defaultProps.name}>{name}</Lism>}
-			<Lism {...defaultProps.body}>
-				<Decorator {...defaultProps.deco} className='u--cbox is--skipFlow' />
-				<Flow {...defaultProps.content} className='u--cbox' flow={flow} jslf={direction}>
-					{children}
-				</Flow>
-			</Lism>
-		</Grid>
-	);
+  return (
+    <Grid data-chat-dir={direction} {...chatProps}>
+      {avatar && (
+        <Frame {...defaultProps.avatar} src={avatar} alt="">
+          <img src={avatar} alt="" width="60" height="60" decoding="async" />
+        </Frame>
+      )}
+      {name && <Lism {...defaultProps.name}>{name}</Lism>}
+      <Lism {...defaultProps.body}>
+        <Decorator {...defaultProps.deco} className="u--cbox is--skipFlow" />
+        <Flow {...defaultProps.content} className="u--cbox" flow={flow} jslf={direction}>
+          {children}
+        </Flow>
+      </Lism>
+    </Grid>
+  );
 }

package/src/components/Details/_style.css

@@ -1,48 +1,48 @@
 /* Details コンポーネント用スタイル */
 /* ::details-content と grid-template-rows: 0fr → 1fr のトランジションでアニメーション */
-@layer lism.modules {
-	.c--details {
-		--duration: var(--acc-duration, 0.25s); /* transition時間 */
-		--_icon-scale: 1.1;
-		--_icon-transform: rotate(0deg); /* icon操作用 */
-		--_content-gtr: 0fr; /* 開閉操作用 */
-	}
-	.c--details[open] {
-		--_icon-transform: scaleY(-1);
-		--_content-gtr: 1fr;
-	}
+@layer lism-modules {
+  .c--details {
+    --duration: var(--acc-duration, 0.25s); /* transition時間 */
+    --_icon-scale: 1.1;
+    --_icon-transform: rotate(0deg); /* icon操作用 */
+    --_content-gtr: 0fr; /* 開閉操作用 */
+  }
+  .c--details[open] {
+    --_icon-transform: scaleY(-1);
+    --_content-gtr: 1fr;
+  }
 
-	/* Safariで表示されるデフォルトの三角形アイコンを削除 */
-	.c--details_summary::-webkit-details-marker {
-		display: none;
-	}
+  /* Safariで表示されるデフォルトの三角形アイコンを削除 */
+  .c--details_summary::-webkit-details-marker {
+    display: none;
+  }
 
-	/* 見出しタグでもフォントを揃える */
-	/* .c--details_title {} */
+  /* 見出しタグでもフォントを揃える */
+  /* .c--details_title {} */
 
-	/* アイコン */
-	.c--details_icon {
-		--svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');
-		display: inline-grid;
-		background-color: currentColor;
-		mask: var(--svg) no-repeat center center / contain;
-		scale: var(--_icon-scale);
+  /* アイコン */
+  .c--details_icon {
+    --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');
+    display: inline-grid;
+    background-color: currentColor;
+    mask: var(--svg) no-repeat center center / contain;
+    scale: var(--_icon-scale);
 
-		transition: transform var(--duration);
-		transform: var(--_icon-transform);
-	}
+    transition: transform var(--duration);
+    transform: var(--_icon-transform);
+  }
 
-	/* ::details-content 擬似要素を使ったアニメーション */
-	.c--details::details-content {
-		display: grid;
-		grid-template-rows: var(--_content-gtr);
-		transition-duration: var(--duration);
-		transition-property: content-visibility, grid-template;
-		transition-behavior: allow-discrete;
-	}
+  /* ::details-content 擬似要素を使ったアニメーション */
+  .c--details::details-content {
+    display: grid;
+    grid-template-rows: var(--_content-gtr);
+    transition-duration: var(--duration);
+    transition-property: content-visibility, grid-template;
+    transition-behavior: allow-discrete;
+  }
 
-	/* コンテンツ内部のラッパー（grid-template-rows: 0frのアニメーションに必須） */
-	.c--details_body {
-		overflow: hidden;
-	}
+  /* コンテンツ内部のラッパー（grid-template-rows: 0frのアニメーションに必須） */
+  .c--details_body {
+    overflow: hidden;
+  }
 }

package/src/components/Details/astro/Content.astro

@@ -11,7 +11,7 @@ const props = Astro.props || {};
 ---
 
 <Lism {...defaultProps.body}>
-	<Lism {...defaultProps.content} {...props}>
-		<slot />
-	</Lism>
+  <Lism {...defaultProps.content} {...props}>
+    <slot />
+  </Lism>
 </Lism>

package/src/components/Details/astro/Details.astro

@@ -14,5 +14,5 @@ const props = Astro.props || {};
 ---
 
 <details {...getLismProps(getDetailsProps(props))}>
-	<slot />
+  <slot />
 </details>

package/src/components/Details/astro/Icon.astro

@@ -10,5 +10,5 @@ const props = Astro.props || {};
 ---
 
 <Lism {...defaultProps.icon} {...props}>
-	<slot />
+  <slot />
 </Lism>

package/src/components/Details/astro/Summary.astro

@@ -5,6 +5,6 @@ import { defaultProps } from '../getProps';
 const props = Astro.props || {};
 ---
 
-<Lism as='summary' {...defaultProps.summary} {...props}>
-	<slot />
+<Lism as="summary" {...defaultProps.summary} {...props}>
+  <slot />
 </Lism>

package/src/components/Details/astro/Title.astro

@@ -6,5 +6,5 @@ const props = Astro.props || {};
 ---
 
 <Lism {...defaultProps.title} {...props}>
-	<slot />
+  <slot />
 </Lism>

package/src/components/Details/getProps.js

@@ -7,17 +7,17 @@ import atts from 'lism-css/lib/helper/atts';
  * @returns {Object} 処理済みプロパティ
  */
 export function getDetailsProps({ lismClass, ...props }) {
-	props.lismClass = atts(lismClass, 'c--details');
-	return props;
+  props.lismClass = atts(lismClass, 'c--details');
+  return props;
 }
 
 /**
  * 各サブコンポーネント用のデフォルトプロパティ
  */
 export const defaultProps = {
-	summary: { lismClass: 'c--details_summary', layout: 'flex', g: '10', ai: 'center' },
-	title: { lismClass: 'c--details_title', as: 'span', fx: '1', setPlain: 1 },
-	icon: { lismClass: 'c--details_icon a--icon', as: 'span', 'aria-hidden': 'true' },
-	body: { lismClass: 'c--details_body' },
-	content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
+  summary: { lismClass: 'c--details_summary', layout: 'flex', g: '10', ai: 'center' },
+  title: { lismClass: 'c--details_title', as: 'span', fx: '1', setPlain: 1 },
+  icon: { lismClass: 'c--details_icon a--icon', as: 'span', 'aria-hidden': 'true' },
+  body: { lismClass: 'c--details_body' },
+  content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
 };

package/src/components/Details/react/Details.jsx

@@ -13,9 +13,9 @@ import '../_style.css';
  * details要素をレンダリング
  */
 export function Details({ children, ...props }) {
-	const lismProps = getLismProps(getDetailsProps(props));
+  const lismProps = getLismProps(getDetailsProps(props));
 
-	return <details {...lismProps}>{children}</details>;
+  return <details {...lismProps}>{children}</details>;
 }
 
 /**
@@ -23,44 +23,44 @@ export function Details({ children, ...props }) {
  * details要素のsummary部分
  */
 export function Summary({ children, ...props }) {
-	return (
-		<Lism as='summary' {...defaultProps.summary} {...props}>
-			{children}
-		</Lism>
-	);
+  return (
+    <Lism as="summary" {...defaultProps.summary} {...props}>
+      {children}
+    </Lism>
+  );
 }
 
 /**
  * Title - タイトルコンポーネント
  */
 export function Title({ children, ...props }) {
-	return (
-		<Lism {...defaultProps.title} {...props}>
-			{children}
-		</Lism>
-	);
+  return (
+    <Lism {...defaultProps.title} {...props}>
+      {children}
+    </Lism>
+  );
 }
 
 /**
  * Icon - アイコンコンポーネント
  */
 export function Icon({ children, ...props }) {
-	return (
-		<Lism {...defaultProps.icon} {...props}>
-			{children}
-		</Lism>
-	);
+  return (
+    <Lism {...defaultProps.icon} {...props}>
+      {children}
+    </Lism>
+  );
 }
 
 /**
  * Content - コンテンツコンポーネント
  */
 export function Content({ children, ...props }) {
-	return (
-		<Lism {...defaultProps.body}>
-			<Lism {...defaultProps.content} {...props}>
-				{children}
-			</Lism>
-		</Lism>
-	);
+  return (
+    <Lism {...defaultProps.body}>
+      <Lism {...defaultProps.content} {...props}>
+        {children}
+      </Lism>
+    </Lism>
+  );
 }

package/src/components/DummyImage/astro/DummyImage.astro

@@ -0,0 +1,7 @@
+---
+import { Lism } from 'lism-css/astro';
+
+const props = Astro.props;
+---
+
+<Lism as="img" src="https://cdn.lism-css.com/dummy-image.jpg" width="600" height="400" alt="" {...props} />

package/src/components/DummyImage/astro/index.ts

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

package/src/components/DummyImage/react/DummyImage.tsx

@@ -0,0 +1,5 @@
+import { Lism, type LismComponentProps } from 'lism-css/react';
+
+export default function DummyImage(props: LismComponentProps<'img'>) {
+  return <Lism as="img" src="https://cdn.lism-css.com/dummy-image.jpg" width={600} height={400} alt="" {...props} />;
+}

package/src/components/DummyImage/react/index.ts

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

package/src/components/DummyText/astro/DummyText.astro

@@ -0,0 +1,9 @@
+---
+import { Lism } from 'lism-css/astro';
+import getContent from '../getContent';
+
+const { as: tagName = 'p', pre = '', length = 'm', lang = 'en', offset = 0, ...props } = Astro.props;
+const content = getContent({ pre, lang, length, offset });
+---
+
+<Lism as={tagName} {...props} set:html={content} />

package/src/components/DummyText/astro/index.ts

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

package/src/components/DummyText/getContent.ts

@@ -0,0 +1,39 @@
+import TEXTS from './texts';
+
+type Lang = keyof typeof TEXTS;
+type Length = string;
+
+// 句読点で split し、各文の末尾に句読点を残す
+const splitByPunctuation = (content: string): string[] => {
+  return content
+    .split(/([,.、。])/)
+    .filter((item) => item !== '')
+    .reduce<string[]>((acc, curr, i, arr) => {
+      if (i % 2 === 0) {
+        acc.push(curr + (arr[i + 1] || ''));
+      }
+      return acc;
+    }, []);
+};
+
+interface GetContentOptions {
+  pre?: string;
+  length?: Length;
+  lang?: Lang;
+  offset?: number;
+}
+
+export default function getContent({ pre = '', length = 'm', lang = 'en', offset = 0 }: GetContentOptions): string {
+  const langTexts = TEXTS[lang] as Record<string, string> | undefined;
+  let content = langTexts?.[length] || '';
+
+  if (offset) {
+    content = splitByPunctuation(content).slice(offset).join('').trim();
+    content = content.charAt(0).toUpperCase() + content.slice(1);
+  }
+  if (pre) {
+    content = pre + content;
+  }
+
+  return content;
+}

package/src/components/DummyText/react/DummyText.tsx

@@ -0,0 +1,15 @@
+import type { ElementType } from 'react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import getContent from '../getContent';
+
+type DummyTextProps<T extends ElementType = 'p'> = LismComponentProps<T> & {
+  pre?: string;
+  length?: string;
+  lang?: 'ja' | 'en' | 'ar';
+  offset?: number;
+};
+
+export default function DummyText<T extends ElementType = 'p'>({ pre = '', length = 'm', lang = 'en', offset = 0, ...props }: DummyTextProps<T>) {
+  const content = getContent({ pre, lang, length, offset });
+  return <Lism {...(props as LismComponentProps)} dangerouslySetInnerHTML={{ __html: content }} />;
+}

package/src/components/DummyText/react/index.ts

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

package/src/components/DummyText/texts.ts

@@ -0,0 +1,39 @@
+const LOREM_IPSUM = {
+  ja: [
+    `ロレム・イプサムの座り雨。`,
+    `目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。`,
+    `Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。`,
+    `作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。`,
+    `内容の違いを比べるためのドラーとして、静かにそこにあります。選ばれた事実や、意味を限定しない言葉の並びは、全体の雰囲気を整える役割を果たします。時間の流れの中で、そうした文章は自然に形を変え、使う人の意図に委ねられていきます。`,
+  ],
+  en: [
+    'Lorem ipsum dolor sit amet.',
+    'Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.',
+    'Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.',
+    'Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.',
+    'Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
+  ],
+};
+
+export default {
+  ja: {
+    xs: LOREM_IPSUM.ja[0],
+    s: LOREM_IPSUM.ja[0] + LOREM_IPSUM.ja[1],
+    m: LOREM_IPSUM.ja[0] + LOREM_IPSUM.ja[1] + LOREM_IPSUM.ja[2],
+    l: LOREM_IPSUM.ja[0] + LOREM_IPSUM.ja[1] + LOREM_IPSUM.ja[2] + LOREM_IPSUM.ja[3],
+    xl: LOREM_IPSUM.ja[0] + LOREM_IPSUM.ja[1] + LOREM_IPSUM.ja[2] + LOREM_IPSUM.ja[3] + LOREM_IPSUM.ja[4],
+    codes: `ロレム・イプサムの<i>座り雨</i>、それは<a href='###'>静かに歩く仮の言葉</a>です。長いあいだ積み重ねられてきた<code>Liberroy</code>と<code>Foog</code>の取り組み」は、私たちに<b>一定の示唆</b>を与えてくれます。`,
+  },
+
+  en: {
+    xs: LOREM_IPSUM.en[0],
+    s: LOREM_IPSUM.en[0] + ' ' + LOREM_IPSUM.en[1],
+    m: LOREM_IPSUM.en[0] + ' ' + LOREM_IPSUM.en[1] + ' ' + LOREM_IPSUM.en[2],
+    l: LOREM_IPSUM.en[0] + ' ' + LOREM_IPSUM.en[1] + ' ' + LOREM_IPSUM.en[2] + ' ' + LOREM_IPSUM.en[3],
+    xl: LOREM_IPSUM.en[0] + ' ' + LOREM_IPSUM.en[1] + ' ' + LOREM_IPSUM.en[2] + ' ' + LOREM_IPSUM.en[3] + ' ' + LOREM_IPSUM.en[4],
+    codes: `Lorem ipsum dolor <i>sit amet</i>. consectetur <a href='###'>adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.`,
+  },
+  ar: {
+    s: 'هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.',
+  },
+};

package/src/components/Modal/_style.css

@@ -2,43 +2,43 @@
  * dialog で実装.
  *   Memo: ::backdrop のアニメーションはFirefoxで動かない
  */
-@layer lism.modules {
-	.c--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;
-	}
-	.c--modal::backdrop {
-		background: none;
-	}
-	.c--modal[open] {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-	}
+@layer lism-modules {
+  .c--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;
+  }
+  .c--modal::backdrop {
+    background: none;
+  }
+  .c--modal[open] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-	.c--modal_inner {
-		--offset: 0 0; /* アニメーション用 */
-		background-color: var(--base);
-		transition: translate var(--duration);
-		max-height: 100%;
-	}
+  .c--modal_inner {
+    --offset: 0 0; /* アニメーション用 */
+    background-color: var(--base);
+    transition: translate var(--duration);
+    max-height: 100%;
+  }
 
-	/* .c--modal_body {
+  /* .c--modal_body {
 	overscroll-behavior: contain;
 } */
 
-	.c--modal:not([data-is-open]) {
-		opacity: 0;
-	}
-	.c--modal:not([data-is-open]) > .c--modal_inner {
-		translate: var(--offset);
-	}
+  .c--modal:not([data-is-open]) {
+    opacity: 0;
+  }
+  .c--modal:not([data-is-open]) > .c--modal_inner {
+    translate: var(--offset);
+  }
 }

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

@@ -9,5 +9,5 @@ const props = Astro.props || {};
 ---
 
 <Lism {...defaultProps.body} {...props}>
-	<slot />
+  <slot />
 </Lism>

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

@@ -10,14 +10,14 @@ 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--srOnly'>{srText || 'Close'}</span>
-		</Lism>
-	)
+  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--srOnly">{srText || 'Close'}</span>
+    </Lism>
+  )
 }

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

@@ -9,5 +9,5 @@ const props = Astro.props || {};
 ---
 
 <Lism {...getInnerProps(props)}>
-	<slot />
+  <slot />
 </Lism>

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

@@ -12,10 +12,10 @@ const props = Astro.props || {};
 ---
 
 <Lism {...getProps(props)}>
-	<slot />
+  <slot />
 </Lism>
 
 <script>
-	import setModal from '../setModal';
-	setModal();
+  import setModal from '../setModal';
+  setModal();
 </script>