@lism-css/ui 0.10.0 → 0.12.0

package/src/components/Tabs/setTabs.ts

@@ -0,0 +1,65 @@
+/**
+ * タブ
+ */
+function tabControl(e: MouseEvent): void {
+  e.preventDefault();
+  const clickedButton = e.currentTarget as HTMLButtonElement;
+  toggleAriaData(clickedButton);
+}
+
+const toggleAriaData = (clickedButton: HTMLButtonElement): void => {
+  const isOpend = 'true' === clickedButton.getAttribute('aria-selected');
+  if (isOpend) return;
+
+  const targetID = clickedButton.getAttribute('aria-controls');
+  if (!targetID) return;
+  const targetBody = document.getElementById(targetID);
+  if (null === targetBody) return;
+
+  const parentTabList = clickedButton.parentNode?.parentNode as HTMLElement | null;
+  if (!parentTabList) return;
+
+  const selectedButton = parentTabList.querySelector<HTMLButtonElement>('[aria-selected="true"]');
+  if (!selectedButton) return;
+
+  const displayedID = selectedButton.getAttribute('aria-controls');
+  if (!displayedID) return;
+  const displayedBody = document.getElementById(displayedID);
+
+  clickedButton.setAttribute('aria-selected', 'true');
+  selectedButton.setAttribute('aria-selected', 'false');
+  displayedBody?.setAttribute('aria-hidden', 'true');
+  targetBody.setAttribute('aria-hidden', 'false');
+};
+
+function setTabs(tabs: HTMLElement): void {
+  const tabBtns = tabs.querySelectorAll<HTMLButtonElement>('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;
+
+  const url = new URL(nowUrl);
+  const params = url.searchParams;
+
+  const targetTabId = params.get('lism-tab');
+  if (!targetTabId) return;
+
+  const target = tabs.querySelector<HTMLButtonElement>(`[aria-controls="${targetTabId}"]`);
+  if (target) {
+    tabs.dataset.hasTabLink = '1';
+    toggleAriaData(target);
+    setTimeout(() => {
+      delete tabs.dataset.hasTabLink;
+    }, 10);
+  }
+}
+
+export default setTabs;

package/src/helper/{uuid.js → uuid.ts}

@@ -1,6 +1,6 @@
 // https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
-export default function uuidv4() {
+export default function uuidv4(): string {
   return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
-    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+    (parseInt(c) ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (parseInt(c) / 4)))).toString(16)
   );
 }

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/components/Accordion/astro/__setEvent.d.ts

@@ -1 +0,0 @@
-export default setEvent;

package/dist/components/Accordion/astro/index.d.ts

@@ -1,15 +0,0 @@
-import { default as Root } from './Root.astro';
-import { default as Item } from './Item.astro';
-import { default as Heading } from './Heading.astro';
-import { default as Panel } from './Panel.astro';
-import { default as Icon } from './Icon.astro';
-import { default as Button } from './Button.astro';
-declare namespace _default {
-    export { Root };
-    export { Item };
-    export { Heading };
-    export { Panel };
-    export { Icon };
-    export { Button };
-}
-export default _default;

package/dist/components/Alert/astro/index.d.ts

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

package/dist/components/Callout/astro/index.d.ts

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

package/dist/components/Details/astro/index.d.ts

@@ -1,13 +0,0 @@
-import { default as Root } from './Details.astro';
-import { default as Summary } from './Summary.astro';
-import { default as Title } from './Title.astro';
-import { default as Content } from './Content.astro';
-import { default as Icon } from './Icon.astro';
-declare namespace _default {
-    export { Root };
-    export { Summary };
-    export { Title };
-    export { Content };
-    export { Icon };
-}
-export default _default;

package/dist/components/DummyImage/astro/index.d.ts

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

package/dist/components/DummyText/astro/index.d.ts

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

package/dist/components/Modal/astro/index.d.ts

@@ -1,13 +0,0 @@
-import { default as Root } from './Modal.astro';
-import { default as Inner } from './Inner.astro';
-import { default as Body } from './Body.astro';
-import { default as CloseBtn } from './CloseBtn.astro';
-import { default as OpenBtn } from './OpenBtn.astro';
-declare namespace _default {
-    export { Root };
-    export { Inner };
-    export { Body };
-    export { CloseBtn };
-    export { OpenBtn };
-}
-export default _default;

package/dist/components/NavMenu/astro/index.d.ts

@@ -1,11 +0,0 @@
-import { default as Root } from './Root.astro';
-import { default as Nest } from './Nest.astro';
-import { default as Item } from './Item.astro';
-import { default as Link } from './Link.astro';
-declare namespace _default {
-    export { Root };
-    export { Nest };
-    export { Item };
-    export { Link };
-}
-export default _default;

package/dist/components/Tabs/astro/index.d.ts

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

package/dist/components/Tabs/astro/transformTabitems.d.ts

@@ -1,4 +0,0 @@
-export default function transformHTML(htmlString: any, tabID: any, defaultIndex: any): {
-    btns: any[];
-    panels: any[];
-};

package/dist/components/astro.d.ts

@@ -1,14 +0,0 @@
-export { default as Accordion } from './Accordion/astro';
-export { default as Alert } from './Alert/astro';
-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 Details } from './Details/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';
-export { default as DummyText } from './DummyText/astro';
-export { default as DummyImage } from './DummyImage/astro';

package/dist/lism-css/dist/config/helper/getSvgUrl.js

@@ -1,4 +0,0 @@
-const g = (a, r = "") => a ? r === "base64" ? (a = Buffer.from(a).toString("base64"), `url(data:image/svg+xml;base64,${a})`) : (a = a.replace(/'/g, '"'), a = a.replace(/="#/g, '="%23'), `url('data:image/svg+xml,${a}')`) : "";
-export {
-  g as default
-};

package/src/components/Accordion/getProps.js

@@ -1,77 +0,0 @@
-import atts from 'lism-css/lib/helper/atts';
-
-export function getRootProps({ lismClass, allowMultiple, ...props }) {
-  props.lismClass = atts(lismClass, 'c--accordion');
-  if (allowMultiple) props['data-allow-multiple'] = '';
-  return props;
-}
-
-// duration: [s]
-export function getItemProps({ lismClass, ...props }) {
-  props.lismClass = atts(lismClass, 'c--accordion_item');
-  return props;
-}
-
-export function getHeadingProps(props) {
-  const defaultProps = {
-    lismClass: 'c--accordion_heading',
-    as: 'div',
-    setPlain: 1,
-  };
-
-  const returnProps = { ...defaultProps, ...props };
-
-  // div の時は role 付与
-  if (returnProps.as === 'div') {
-    returnProps.role = 'heading';
-  }
-  return returnProps;
-}
-
-// id: Context から取得できればそれを優先（React用）
-export function getPanelProps({ lismClass, _contextID, accID = '__LISM_ACC_ID__', isOpen = false, ...props }) {
-  // panel側は必要最低限のプロパティのみ。
-  const panelProps = {
-    lismClass: atts(lismClass, 'c--accordion_panel'),
-    id: _contextID || accID,
-    hidden: isOpen ? undefined : 'until-found',
-    pos: 'relative',
-    ov: 'hidden',
-  };
-
-  // 余白などその他の指定は全て _content 側へ渡す
-  const contentProps = { lismClass: 'c--accordion_content', layout: 'flow', ...props };
-
-  // content側へ移すprops
-  // ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb', 'px-s', 'px-e', 'py-s', 'py-e'].forEach((prop) => {
-  // 	if (props[prop]) {
-  // 		contentProps[prop] = props[prop];
-  // 		delete props[prop];
-  // 	}
-  // });
-
-  // 2つ返す
-  return { panelProps, contentProps };
-}
-
-export const defaultProps = {
-  // header: { lismClass: 'c--accordion_header' },
-  button: {
-    lismClass: 'c--accordion_button',
-    as: 'button',
-    layout: 'flex',
-    setPlain: 1,
-    g: '10',
-    w: '100%',
-    ai: 'center',
-    jc: 'between',
-  },
-  icon: {
-    lismClass: 'c--accordion_icon a--icon',
-    as: 'span',
-    // d: 'grid',
-    pi: 'center',
-    fxsh: '0',
-    'aria-hidden': 'true',
-  },
-};

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>
-  );
-}