lism-css 0.3.5 → 0.5.0

package/packages/astro/Center/Center.astro

@@ -1,11 +1,5 @@
 ---
-import type { LismProps } from '../types';
-import { Grid } from '../Grid';
-// import getProps from '../../../dist/components/Center/getProps';
-
-// Propsの定義
-interface Props extends LismProps {}
-const props = Astro.props || {};
+import { Lism } from '../Lism';
 ---
 
-<Grid _grid='center' {...props}><slot /></Grid>
+<Lism layout='center' {...Astro.props}><slot /></Lism>

package/packages/astro/Cluster/Cluster.astro

@@ -0,0 +1,5 @@
+---
+import { Lism } from '../Lism';
+---
+
+<Lism layout='cluster' {...Astro.props}><slot /></Lism>

package/packages/astro/Cluster/index.js

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

package/packages/astro/Columns/Columns.astro

@@ -1,11 +1,5 @@
 ---
-import type { LismProps } from '../types';
-import { Grid } from '../Grid';
-import getProps from '../../../dist/components/Columns/getProps';
-
-// Propsの定義
-interface Props extends LismProps {}
-const props = Astro.props || {};
+import { Lism } from '../Lism';
 ---
 
-<Grid _grid='columns' {...getProps(props)}><slot /></Grid>
+<Lism layout='columns' {...Astro.props}><slot /></Lism>

package/packages/astro/Container/Container.astro

@@ -1,11 +1,10 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 
 interface Props extends LismProps {}
 
-const { layout, size = true, ...props } = Astro.props || {};
-const Layout = layout || Lism;
+const { size = true, ...props } = Astro.props || {};
 ---
 
-<Layout isContainer={size} {...props}><slot /></Layout>
+<Lism isContainer={size} {...props}><slot /></Lism>

package/packages/astro/Decorator/Decorator.astro

@@ -1,7 +1,7 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
-import getProps from '../../../dist/components/Decorator/getProps';
+import getProps from '../../../dist/components/atomic/Decorator/getProps';
 
 // Propsの定義
 interface Props extends LismProps {}

package/packages/astro/Divider/Divider.astro

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

package/packages/astro/Dummy/Dummy.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 import getContent from '../../../dist/components/Dummy/getContent';
 
@@ -9,4 +9,5 @@ const { tag = 'p', pre = '', length = 'm', lang = 'en', offset = 0, ...props } =
 const content = getContent({ tag, pre, lang, length, offset });
 ---
 
-<Lism tag={tag} {...props} set:html={content} />
+{tag === 'img' && <Lism tag='img' src='https://placehold.co/300x200?text=placeholder' width='300' height='200' alt='' {...props} />}
+{tag !== 'img' && <Lism tag={tag} {...props} set:html={content} />}

package/packages/astro/Flex/Flex.astro

@@ -1,14 +1,5 @@
 ---
-import type { LismProps } from '../types';
 import { Lism } from '../Lism';
-import { getFlexProps } from '../../../dist/components/Flex/getProps';
-
-// Propsの定義
-interface Props extends LismProps {}
-
-let props = Astro.props || {};
 ---
 
-<Lism {...getFlexProps(props)}>
-	<slot />
-</Lism>
+<Lism layout='flex' {...Astro.props}><slot /></Lism>

package/packages/astro/Flex/index.js

@@ -1,2 +1 @@
 export { default as Flex } from './Flex.astro';
-export { default as Cluster } from './Cluster.astro';

package/packages/astro/Flow/Flow.astro

@@ -0,0 +1,5 @@
+---
+import { Lism } from '../Lism';
+---
+
+<Lism layout='flow' {...Astro.props}><slot /></Lism>

package/packages/astro/Flow/index.js

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

package/packages/astro/Frame/Frame.astro

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

package/packages/astro/Grid/Grid.astro

@@ -1,13 +1,5 @@
 ---
-import type { LismProps } from '../types';
 import { Lism } from '../Lism';
-import { getGridProps } from '../../../dist/components/Grid/getProps';
-
-// Propsの定義
-interface Props extends LismProps {}
-let props = Astro.props;
 ---
 
-<Lism {...getGridProps(props)}>
-	<slot />
-</Lism>
+<Lism layout='grid' {...Astro.props}><slot /></Lism>

package/packages/astro/Grid/index.js

@@ -1,2 +1 @@
 export { default as Grid } from './Grid.astro';
-export { default as GridItem } from './GridItem.astro';

package/packages/astro/HTML/a.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='a' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/button.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='button' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/div.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='div' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/h.astro

@@ -0,0 +1,6 @@
+---
+import Lism from '../Lism/Lism.astro';
+const { lv = '1', ...props } = Astro.props;
+---
+
+<Lism tag={`h${lv}`} {...props}><slot /></Lism>

package/packages/astro/HTML/img.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='img' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/index.js

@@ -0,0 +1,12 @@
+import div from './div.astro';
+import p from './p.astro';
+import h from './h.astro';
+import span from './span.astro';
+import a from './a.astro';
+import button from './button.astro';
+import img from './img.astro';
+import ul from './ul.astro';
+import ol from './ol.astro';
+import li from './li.astro';
+
+export default { div, p, h, span, img, a, button, ul, ol, li };

package/packages/astro/HTML/li.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='li' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/ol.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='ol' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/p.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='p' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/span.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='span' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/ul.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='ul' {...Astro.props}><slot /></Lism>

package/packages/astro/Icon/Icon.astro

@@ -1,7 +1,7 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import getLismProps from '../../../dist/lib/getLismProps';
-import getProps from '../../../dist/components/Icon/getProps';
+import getProps from '../../../dist/components/atomic/Icon/getProps';
 import SVG from './SVG.astro';
 
 // Propsの定義
@@ -28,6 +28,4 @@ if (Component === '_SVG_') {
 }
 ---
 
-<Component {...getLismProps(lismProps)} {...exProps}>
-	<slot />
-</Component>
+<Component {...getLismProps(lismProps)} {...exProps}><slot /></Component>

package/packages/astro/Layer/Layer.astro

@@ -1,15 +1,8 @@
 ---
-import type { LismProps } from '../types';
 import { Lism } from '../Lism';
-import { getLayerProps } from '../../../dist/components/Layer/getProps';
-
-// Propsの定義
-interface Props extends LismProps {}
-
-let { layout, ...props } = Astro.props || {};
-const Layout = layout || Lism;
+import getFilterProps from '../../../dist/components/getFilterProps';
 ---
 
-<Layout isLayer {...getLayerProps(props)}>
+<Lism isLayer {...getFilterProps(Astro.props, 'backdropFilter')}>
 	<slot />
-</Layout>
+</Lism>

package/packages/astro/LinkBox/LinkBox.astro

@@ -1,16 +1,15 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 // import getProps from '../../../dist/components/LinkBox/getProps';
 
 interface Props extends LismProps {}
-const { layout, ...props } = Astro.props || {};
+const props = Astro.props || {};
 
 const hasHref = !!props.href;
 const tag = hasHref ? 'a' : 'div';
-const LismComponent = layout || Lism;
 ---
 
-<LismComponent isLinkBox hov='op' tag={tag} {...props}>
+<Lism isLinkBox tag={tag} {...props}>
 	<slot />
-</LismComponent>
+</Lism>

package/packages/astro/Lism/Link.astro

@@ -1,10 +1,10 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import Lism from './Lism.astro';
 
 interface Props extends LismProps {}
 ---
 
-<Lism skipState tag='a' {...Astro.props || {}}>
+<Lism tag='a' {...Astro.props || {}}>
 	<slot />
 </Lism>

package/packages/astro/Lism/Lism.astro

@@ -1,14 +1,15 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import getLismProps from '../../../dist/lib/getLismProps';
+import getLayoutProps from '../../../dist/components/getLayoutProps';
 
 // Propsの定義
 interface Props extends LismProps {}
 
-const { as, exProps, tag, ...props } = Astro.props || {};
+const { as, tag, layout, exProps, ...props } = Astro.props || {};
 const JSX = as || tag || 'div';
 ---
 
-<JSX {...getLismProps(props)} {...exProps}>
+<JSX {...getLismProps(getLayoutProps(layout, props))} {...exProps}>
 	<slot />
 </JSX>

package/packages/astro/Lism/Text.astro

@@ -1,10 +1,10 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import Lism from './Lism.astro';
 
 interface Props extends LismProps {}
 ---
 
-<Lism skipState tag='p' {...Astro.props || {}}>
+<Lism tag='p' {...Astro.props || {}}>
 	<slot />
 </Lism>

package/packages/astro/Lism/index.js

@@ -1,4 +1,3 @@
 export { default as Lism } from './Lism.astro';
 export { default as Text } from './Text.astro';
-export { default as Media } from './Media.astro';
 export { default as Link } from './Link.astro';

package/packages/astro/{Lism → Media}/Media.astro

@@ -1,16 +1,8 @@
 ---
-import type { LismProps } from '../types';
 import getLismProps from '../../../dist/lib/getLismProps';
-import getMediaProps from '../../../dist/components/getMediaProps';
+import getMediaProps from '../../../dist/components/atomic/Media/getProps';
 import { Image } from 'astro:assets';
 
-// Propsの定義
-interface Props extends LismProps {
-	// src?: string;
-	// alt?: string;
-	// width?: string | number;
-	// height?: string | number;
-}
 const { as, exProps, tag, ...props } = Astro.props || {};
 
 let JSX = as || tag || 'img';

package/packages/astro/Media/index.js

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

package/packages/astro/Modal/Body.astro

@@ -1,14 +1,13 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { defaultProps } from '../../../dist/components/Modal/getProps';
 import { Lism } from '../Lism';
 
 // Propsの定義
 interface Props extends LismProps {}
-const { layout, ...props } = Astro.props || {};
-const Layout = layout || Lism;
+const props = Astro.props || {};
 ---
 
-<Layout {...defaultProps.body} {...props}>
+<Lism {...defaultProps.body} {...props}>
 	<slot />
-</Layout>
+</Lism>

package/packages/astro/Modal/CloseBtn.astro

@@ -0,0 +1,24 @@
+---
+import type { LismProps } from '../../types';
+import { defaultProps } from '../../../dist/components/Modal/getProps';
+import { Lism } from '../Lism';
+import { Icon } from '../Icon';
+
+// Propsの定義
+interface Props extends LismProps {}
+const { modalId = '', icon, srText = 'Close', ...props } = Astro.props || {};
+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-hidden'>{srText || 'Close'}</span>
+		</Lism>
+	)
+}

package/packages/astro/Modal/Inner.astro

@@ -1,13 +1,13 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { defaultProps } from '../../../dist/components/Modal/getProps';
-import { Stack } from '../Stack';
+import { Lism } from '../Lism';
 
 // Propsの定義
 interface Props extends LismProps {}
 const props = Astro.props || {};
 ---
 
-<Stack {...defaultProps.inner} {...props}>
+<Lism {...defaultProps.inner} {...props}>
 	<slot />
-</Stack>
+</Lism>

package/packages/astro/Modal/Modal.astro

@@ -1,17 +1,16 @@
 ---
-import type { LismProps } from '../types';
+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;
+const props = Astro.props || {};
 ---
 
-<Layout tag='dialog' {...getProps(props)}>
+<Lism {...getProps(props)}>
 	<slot />
-</Layout>
+</Lism>
 
 <script>
 	import setModal from '../../../dist/components/Modal/setModal';

package/packages/astro/Modal/OpenBtn.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../../types';
+import { defaultProps } from '../../../dist/components/Modal/getProps';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {}
+const { modalId = '', ...props } = Astro.props || {};
+const btnProps = { ...defaultProps.openBtn, ...props };
+---
+
+<Lism data-modal-open={modalId} {...btnProps}>
+	<slot />
+</Lism>

package/packages/astro/Modal/index.js

@@ -1,8 +1,7 @@
 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';
+import CloseBtn from './CloseBtn.astro';
+import OpenBtn from './OpenBtn.astro';
 
-export default { Root, Inner, Body, CloseIconBtn, Header, Footer };
+export default { Root, Inner, Body, CloseBtn, OpenBtn };

package/packages/astro/OverlayLink/OverlayLink.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 import getOverlayLinkProps from '../../../dist/components/OverlayLink/getProps';
 

package/packages/astro/Spacer/Spacer.astro

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

package/packages/astro/Stack/Stack.astro

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

package/packages/astro/Tabs/Tab.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 
 export interface Props extends LismProps {
@@ -12,15 +12,6 @@ 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}
->
+<Lism tag='button' lismClass='d--tabs_tab' setPlain role='tab' aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
 	<slot />
 </Lism>

package/packages/astro/Tabs/TabList.astro

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

package/packages/astro/Tabs/TabPanel.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 
 export interface Props extends LismProps {

package/packages/astro/Tabs/Tabs.astro

@@ -1,10 +1,10 @@
 ---
-import type { LismProps } from '../types';
-import { Grid } from '../Grid';
+import type { LismProps } from '../../types';
+import { Lism } from '../Lism';
 // import Tab from './Tab.astro';
 // import TabPanel from './TabPanel.astro';
 import TabList from './TabList.astro';
-import { uuidv4 } from '../helper/index.js';
+import { uuidv4 } from '../helper.js';
 import transformTabitems from './transformTabitems.js';
 import getTabsProps from '../../../dist/components/Tabs/getProps';
 
@@ -23,16 +23,12 @@ const { defaultIndex = 1, tabId = '', listProps = {}, ...props } = Astro.props |
 const theTabID = tabId ? tabId : uuidv4();
 
 // 子要素の方から順番に処理されていくので、文字列処理でデータを抽出
-const { btns, panels } = transformTabitems(
-	await Astro.slots.render('default'),
-	theTabID,
-	defaultIndex
-);
+const { btns, panels } = transformTabitems(await Astro.slots.render('default'), theTabID, defaultIndex);
 
 const hasItems = btns.length > 0;
 ---
 
-<Grid {...getTabsProps(props)}>
+<Lism {...getTabsProps(props)}>
 	{
 		btns && (
 			<TabList {...listProps}>
@@ -48,7 +44,7 @@ const hasItems = btns.length > 0;
 		})
 	}
 	{!hasItems && <slot />}
-</Grid>
+</Lism>
 
 <script>
 	// import setEvent from './setEvent';

package/packages/astro/Test/Test.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 
 // Propsの定義