@lism-css/ui 0.11.0 → 0.13.0

package/src/components/Accordion/setAccordion.js

@@ -1,146 +0,0 @@
-import { waitFrame, waitAnimation, maybePauseAnimation } from '../../helper/animation';
-
-// hidden を付け外しする時の値
-let ACCORDION_HIDDEN_VALUE = 'until-found';
-
-// アコーディオン要素から必要な要素を取得
-const getAccordionElements = (accordionItem) => {
-  const heading = accordionItem.querySelector('.c--accordion_heading');
-  const panel = accordionItem.querySelector('.c--accordion_panel');
-  return {
-    heading,
-    button: heading.querySelector('button'),
-    panel,
-    content: panel.querySelector('.c--accordion_content'),
-  };
-};
-
-// 親に data-allow-multiple がついていなければ、展開中のアコーディオンを閉じる
-//   Memo: 自身の除外処理はしていない( 開く動作の前に呼び出す & もし自分が含まれていても連打可能なため )
-const maybeCloseOpenedItems = (accordionItem) => {
-  const parent = accordionItem.parentNode;
-  if (!parent) return;
-
-  // 親の data-allow-multiple 属性の有無をチェック
-  if (parent.hasAttribute('data-allow-multiple')) return;
-
-  // 開いているアコーディオンを取得して閉じる
-  parent.querySelectorAll(':scope > [data-opened]').forEach((_a) => closeAccordion(_a));
-};
-
-async function openAccordion(accordionItem) {
-  const { panel, content, button } = getAccordionElements(accordionItem);
-
-  // アニメーションがあれば一時停止
-  maybePauseAnimation(panel);
-
-  // hidden を削除
-  panel.removeAttribute('hidden');
-
-  // 1フレーム待機
-  await waitFrame();
-
-  // 次フレームで高さセット（ 目標の高さ = content の高さ ）
-  accordionItem.style.setProperty('--_panel-h', `${content.offsetHeight}px`);
-
-  // さらに1フレーム待機
-  await waitFrame();
-
-  // アニメーション開始
-  accordionItem.setAttribute('data-opened', '');
-  button.setAttribute('aria-expanded', 'true');
-
-  // アニメーションを待つ
-  const status = await waitAnimation(panel);
-
-  // アニメーションが最後まで完了した時、--_panel-h削除（高さセットしたままだとリサイズできない）
-  if ('canceled' !== status) {
-    accordionItem.style.removeProperty('--_panel-h');
-  }
-}
-
-async function closeAccordion(accordionItem) {
-  const { panel, button } = getAccordionElements(accordionItem);
-
-  // アニメーションがあれば一時停止
-  maybePauseAnimation(panel);
-
-  // 現在の高さを一旦セットする
-  accordionItem.style.setProperty('--_panel-h', `${panel.offsetHeight}px`);
-
-  // 1フレーム待機
-  await waitFrame();
-
-  // 次フレームで属性を削除
-  accordionItem.removeAttribute('data-opened');
-  button.setAttribute('aria-expanded', 'false');
-
-  // 変数削除して 0px へ向けてアニメーション開始
-  accordionItem.style.removeProperty('--_panel-h');
-
-  // アニメーションを待つ
-  const status = await waitAnimation(panel);
-
-  // アニメーションが最後まで完了したら、hidden付与
-  if ('canceled' !== status) {
-    panel.setAttribute('hidden', ACCORDION_HIDDEN_VALUE);
-  }
-}
-
-// アコーディオンのトグル処理
-function toggleAccordion(accordionItem) {
-  if (accordionItem.hasAttribute('data-opened')) {
-    // 自身を閉じる
-    closeAccordion(accordionItem);
-  } else {
-    // 親に data-allow-multiple がついていなければ、他のアコーディオンを閉じる
-    maybeCloseOpenedItems(accordionItem);
-
-    // 自身を開く
-    openAccordion(accordionItem);
-  }
-}
-
-/**
- * 個別のアコーディオンにイベントをセット（React用にクリーンアップ関数を返す）
- */
-export const setEvent = (accordionItem) => {
-  const { button, panel } = getAccordionElements(accordionItem);
-
-  // until-found のオン・オフが使い分けれるように、最初に初期値を取得
-  if (panel.hasAttribute('hidden')) {
-    ACCORDION_HIDDEN_VALUE = panel.getAttribute('hidden');
-  }
-
-  // clickイベント登録
-  const _clickEvent = (e) => {
-    e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
-    toggleAccordion(accordionItem);
-  };
-
-  // beforematchイベント登録 (ページ検索時などはこっちが発火する)
-  const _beforematchEvent = (e) => {
-    e.preventDefault(); // hidden="until-found" の自動付け外しを無効化
-    toggleAccordion(accordionItem);
-  };
-
-  button.addEventListener('click', _clickEvent);
-  panel.addEventListener('beforematch', _beforematchEvent);
-
-  // react用: useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう
-  return () => {
-    button.removeEventListener('click', _clickEvent);
-    panel.removeEventListener('beforematch', _beforematchEvent);
-  };
-};
-
-/**
- * ページ内の全アコーディオンにイベントをセット（Astro用）
- */
-const setAccordion = () => {
-  const accordionAll = document.querySelectorAll('.c--accordion_item');
-  accordionAll.forEach((accordionItem) => {
-    setEvent(accordionItem);
-  });
-};
-export default setAccordion;

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

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

package/src/components/Avatar/react/Avatar.jsx

@@ -1,9 +0,0 @@
-import { Frame } from 'lism-css/react';
-
-export default function Avatar({ size = '1.5em', src = '', alt = '', ...props }) {
-  return (
-    <Frame lismClass="c--avatar" ar="1/1" w={size} bdrs="99" {...props}>
-      <img src={src} alt={alt} width="100%" height="100%" decoding="async" />
-    </Frame>
-  );
-}

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

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

package/src/components/Badge/react/Badge.jsx

@@ -1,12 +0,0 @@
-import { Lism } from 'lism-css/react';
-import '../_style.css';
-
-export default function Badge(props) {
-  // c--badge では c, bgc は 変数で受け取る
-  const _propConfig = {
-    c: { isVar: 1 },
-    bgc: { isVar: 1 },
-  };
-
-  return <Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" _propConfig={_propConfig} {...props} />;
-}

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

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

package/src/components/Button/react/Button.jsx

@@ -1,12 +0,0 @@
-import { Flex } from 'lism-css/react';
-import '../_style.css';
-
-export default function Button(props) {
-  // c--button では c, bgc は 変数で受け取る
-  const _propConfig = {
-    c: { isVar: 1 },
-    bgc: { isVar: 1 },
-  };
-
-  return <Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" _propConfig={_propConfig} {...props} />;
-}

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

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

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

@@ -1,66 +0,0 @@
-/**
- * React版 Detailsコンポーネント
- */
-import getLismProps from 'lism-css/lib/getLismProps';
-import { Lism } from 'lism-css/react';
-import { getDetailsProps, defaultProps } from '../getProps';
-
-// スタイルのインポート
-import '../_style.css';
-
-/**
- * Details - ルートコンポーネント
- * details要素をレンダリング
- */
-export function Details({ children, ...props }) {
-  const lismProps = getLismProps(getDetailsProps(props));
-
-  return <details {...lismProps}>{children}</details>;
-}
-
-/**
- * Summary - サマリーコンポーネント
- * details要素のsummary部分
- */
-export function Summary({ children, ...props }) {
-  return (
-    <Lism as="summary" {...defaultProps.summary} {...props}>
-      {children}
-    </Lism>
-  );
-}
-
-/**
- * Title - タイトルコンポーネント
- */
-export function Title({ children, ...props }) {
-  return (
-    <Lism {...defaultProps.title} {...props}>
-      {children}
-    </Lism>
-  );
-}
-
-/**
- * Icon - アイコンコンポーネント
- */
-export function Icon({ children, ...props }) {
-  return (
-    <Lism {...defaultProps.icon} {...props}>
-      {children}
-    </Lism>
-  );
-}
-
-/**
- * Content - コンテンツコンポーネント
- */
-export function Content({ children, ...props }) {
-  return (
-    <Lism {...defaultProps.body}>
-      <Lism {...defaultProps.content} {...props}>
-        {children}
-      </Lism>
-    </Lism>
-  );
-}

package/src/components/Modal/getProps.js

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

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

@@ -1,10 +0,0 @@
-import { Lism } from 'lism-css/react';
-import { defaultProps } from '../getProps';
-
-export default function ModalBody({ children, ...props }) {
-  return (
-    <Lism {...defaultProps.body} {...props}>
-      {children}
-    </Lism>
-  );
-}

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

@@ -1,20 +0,0 @@
-import { Lism, Icon } from 'lism-css/react';
-import { defaultProps } from '../getProps';
-
-// duration: [s]
-export default function CloseBtn({ children, modalId = '', icon, srText = 'Close', ...props }) {
-  // const lismProps = getLismProps(getAccProps(props));
-
-  return (
-    <Lism data-modal-close={modalId} {...defaultProps.closeBtn} {...props}>
-      {children ? (
-        children
-      ) : (
-        <>
-          <Icon icon={icon || 'x'} />
-          <span className="u--srOnly">{srText || 'Close'}</span>
-        </>
-      )}
-    </Lism>
-  );
-}

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

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

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

@@ -1,23 +0,0 @@
-'use client';
-import { useRef, useEffect } from 'react';
-import { Lism } from 'lism-css/react';
-import { setEvent } from '../setModal';
-import { getProps } from '../getProps';
-
-import '../_style.css';
-
-// duration: [s]
-const Modal = ({ children, ...props }) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (!ref?.current) return;
-    return setEvent(ref?.current);
-  }, [ref]);
-
-  return (
-    <Lism forwardedRef={ref} {...getProps(props)}>
-      {children}
-    </Lism>
-  );
-};
-export default Modal;

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

@@ -1,11 +0,0 @@
-import { Lism } from 'lism-css/react';
-import { defaultProps } from '../getProps';
-
-// duration: [s]
-export default function OpenBtn({ children, modalId = '', ...props }) {
-  return (
-    <Lism data-modal-open={modalId} {...defaultProps.openBtn} {...props}>
-      {children}
-    </Lism>
-  );
-}

package/src/components/NavMenu/getProps.js

@@ -1,65 +0,0 @@
-/**
- * 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',
-    as: 'ul',
-    style: computedStyle,
-    ...props,
-  };
-}
-
-/**
- * NavMenu.Nest のプロパティを処理
- */
-export function getNestProps(props) {
-  return {
-    lismClass: 'c--navMenu_nest',
-    as: 'ul',
-    'px-s': '20',
-    ...props,
-  };
-}
-
-/**
- * NavMenu.Item のプロパティを処理
- */
-export function getItemProps(props) {
-  return {
-    lismClass: 'c--navMenu_item',
-    as: 'li',
-    ...props,
-  };
-}
-
-/**
- * NavMenu.Link のプロパティを処理
- * @param {string} [props.href] - リンク先URL。指定時は a タグになる
- * @param {string} [props.as='span'] - HTML タグ
- */
-export function getLinkProps({ href, as = 'span', ...props }) {
-  return {
-    lismClass: 'c--navMenu_link',
-    as: href ? 'a' : as,
-    href,
-    c: 'inherit',
-    ...props,
-  };
-}

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

@@ -1,19 +0,0 @@
-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/ShapeDivider/astro/index.js

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

package/src/components/ShapeDivider/getProps.js

@@ -1,40 +0,0 @@
-/**
- * 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/Tabs/getProps.js

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

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

@@ -1,10 +0,0 @@
-// import React from 'react';
-import { Lism } from 'lism-css/react';
-
-export default function Tab({ tabId = 'tab', index = 0, isActive = false, ...props }) {
-  const controlId = `${tabId}-${index}`;
-
-  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 +0,0 @@
-// Note: <Tabs>側でループして色々処理される。
-// 引数でちゃんと処理したいpropを書いておかないとだめ。
-export default function TabItem({ isTabItem = true, children }) {
-  return <div>{children}</div>;
-}

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

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

package/src/components/Tabs/setTabs.js

@@ -1,87 +0,0 @@
-/**
- * タブ
- */
-function tabControl(e) {
-  e.preventDefault();
-
-  // クリックされたボタン要素
-  const clickedButton = e.currentTarget;
-
-  // クリックイベントがキー（Enter / space）によって呼び出されたかどうか
-  // const iskeyClick = 0 === e.clientX;
-
-  // マウスクリック時はフォーカスを外す
-  // if (!iskeyClick) {
-  // 	clickedButton.blur();
-  // }
-
-  // 属性の切り替え
-  toggleAriaData(clickedButton);
-}
-
-const toggleAriaData = (clickedButton) => {
-  // すでにオープンされているタブの場合はなにもしない
-  const isOpend = 'true' === clickedButton.getAttribute('aria-selected');
-  if (isOpend) return;
-
-  // 新しく表示するBodyを取得
-  const targetID = clickedButton.getAttribute('aria-controls');
-  const targetBody = document.getElementById(targetID);
-  if (null === targetBody) return;
-
-  // 親のタブリスト(ul)を取得
-  const parentTabList = clickedButton.parentNode.parentNode;
-
-  // 現在選択中のタブボタンを取得
-  const selectedButton = parentTabList.querySelector('[aria-selected="true"]');
-
-  // 展開中のBodyを取得
-  const displayedID = selectedButton.getAttribute('aria-controls');
-  const displayedBody = document.getElementById(displayedID);
-
-  // ariaの処理
-  clickedButton.setAttribute('aria-selected', 'true');
-  selectedButton.setAttribute('aria-selected', 'false');
-  displayedBody.setAttribute('aria-hidden', 'true');
-  targetBody.setAttribute('aria-hidden', 'false');
-};
-
-function setTabs(tabs) {
-  const tabBtns = tabs.querySelectorAll('button[role="tab"]');
-  tabBtns.forEach((tabBtn) => {
-    tabBtn.addEventListener('click', function (e) {
-      tabControl(e);
-    });
-  });
-
-  // タブへのリンクがあるかどうか
-  const nowUrl = window?.location?.href;
-  if (!nowUrl) return;
-
-  const hasTabLink = -1 !== nowUrl.indexOf('?lism-tab=');
-  if (!hasTabLink) return;
-
-  // URLでタブを切り替える機能がONかどうか
-
-  // URLSearchParamsオブジェクトを取得
-  const url = new URL(nowUrl);
-  const params = url.searchParams;
-
-  // getメソッド
-  const targetTabId = params.get('lism-tab');
-  const target = tabs.querySelector(`[aria-controls="${targetTabId}"]`);
-  if (target) {
-    // transitionをオフにするための属性
-    tabs.dataset.hasTabLink = '1';
-
-    // タブ切り替え
-    toggleAriaData(target);
-
-    // 少し後で属性削除
-    setTimeout(() => {
-      delete tabs.dataset.hasTabLink;
-    }, 10);
-  }
-}
-
-export default setTabs;