@lism-css/ui 0.10.0 → 0.12.0

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;