From d3e8905b899385eebb3543da104f1837a8c5cddc Mon Sep 17 00:00:00 2001 From: TechQuery Date: Mon, 17 Jun 2024 05:20:56 +0800 Subject: [PATCH] [refactor] upgrade List Group, Button Group & Toggle Button components [optimize] Module folder structure --- package.json | 8 +- pnpm-lock.yaml | 32 +++---- source/{ => Calendar}/CountDown.tsx | 4 +- source/{ => Calendar}/MonthCalendar.tsx | 6 +- source/Content/Accordion.tsx | 2 +- source/Content/Card.tsx | 2 +- source/Content/Jumbotron.tsx | 2 +- source/Content/ListGroup.tsx | 65 ++++++++++++++ source/Content/Tabs.tsx | 2 +- source/Content/index.ts | 3 +- source/{ => Form}/Button.tsx | 29 ++++++- source/Form/ButtonGroup.tsx | 39 +++++++++ source/{ => Form}/Form.tsx | 4 +- source/{Content => Layout}/Collapse.tsx | 0 source/{ => Layout}/Grid.tsx | 2 +- source/{ => Layout}/Offcanvas.tsx | 2 +- source/{ => Layout}/Ratio.tsx | 0 source/{Content => Layout}/ScrollBoundary.tsx | 0 source/Layout/index.ts | 5 ++ source/{ => Media}/Carousel.tsx | 0 source/{ => Media}/Image.tsx | 0 {v1 => source}/Media/index.ts | 1 - source/{ => Navigator}/Dropdown.tsx | 2 +- source/{ => Navigator}/Nav.tsx | 2 +- source/{ => Navigator}/Navbar.tsx | 6 +- source/Reminder/index.ts | 1 + source/index.ts | 21 ++--- v1/Content/ListGroup.tsx | 74 ---------------- v1/Form/ButtonGroup.tsx | 41 --------- v1/Form/InputGroup.tsx | 86 ------------------- 30 files changed, 184 insertions(+), 257 deletions(-) rename source/{ => Calendar}/CountDown.tsx (97%) rename source/{ => Calendar}/MonthCalendar.tsx (97%) create mode 100644 source/Content/ListGroup.tsx rename source/{ => Form}/Button.tsx (73%) create mode 100644 source/Form/ButtonGroup.tsx rename source/{ => Form}/Form.tsx (98%) rename source/{Content => Layout}/Collapse.tsx (100%) rename source/{ => Layout}/Grid.tsx (93%) rename source/{ => Layout}/Offcanvas.tsx (98%) rename source/{ => Layout}/Ratio.tsx (100%) rename source/{Content => Layout}/ScrollBoundary.tsx (100%) create mode 100644 source/Layout/index.ts rename source/{ => Media}/Carousel.tsx (100%) rename source/{ => Media}/Image.tsx (100%) rename {v1 => source}/Media/index.ts (67%) rename source/{ => Navigator}/Dropdown.tsx (98%) rename source/{ => Navigator}/Nav.tsx (97%) rename source/{ => Navigator}/Navbar.tsx (97%) delete mode 100644 v1/Content/ListGroup.tsx delete mode 100644 v1/Form/ButtonGroup.tsx delete mode 100644 v1/Form/InputGroup.tsx diff --git a/package.json b/package.json index 5633f85c..36997d48 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "boot-cell", - "version": "2.0.0-beta.26", + "version": "2.0.0-beta.28", "license": "LGPL-3.0", "author": "shiy2008@gmail.com", "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6", @@ -26,7 +26,7 @@ "dependencies": { "@swc/helpers": "^0.5.11", "classnames": "^2.5.1", - "dom-renderer": "^2.1.7", + "dom-renderer": "^2.1.8", "mobx": "^6.12.4", "regenerator-runtime": "^0.14.1", "web-cell": "^3.0.0-rc.16", @@ -64,10 +64,10 @@ "open-cli": "^8.0.0", "parcel": "~2.12.0", "prettier": "^3.3.2", - "ts-jest": "^29.1.4", + "ts-jest": "^29.1.5", "ts-node": "^10.9.2", "typedoc": "^0.25.13", - "typedoc-plugin-mdn-links": "^3.1.29", + "typedoc-plugin-mdn-links": "^3.1.30", "typescript": "~5.4.5" }, "scripts": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f444f32c..7c8006b0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,8 +15,8 @@ importers: specifier: ^2.5.1 version: 2.5.1 dom-renderer: - specifier: ^2.1.7 - version: 2.1.7(typescript@5.4.5) + specifier: ^2.1.8 + version: 2.1.8(typescript@5.4.5) mobx: specifier: ^6.12.4 version: 6.12.4 @@ -100,8 +100,8 @@ importers: specifier: ^3.3.2 version: 3.3.2 ts-jest: - specifier: ^29.1.4 - version: 29.1.4(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(jest@29.7.0(@types/node@20.14.2)(ts-node@10.9.2(@swc/core@1.5.28(@swc/helpers@0.5.11))(@types/node@20.14.2)(typescript@5.4.5)))(typescript@5.4.5) + specifier: ^29.1.5 + version: 29.1.5(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(jest@29.7.0(@types/node@20.14.2)(ts-node@10.9.2(@swc/core@1.5.28(@swc/helpers@0.5.11))(@types/node@20.14.2)(typescript@5.4.5)))(typescript@5.4.5) ts-node: specifier: ^10.9.2 version: 10.9.2(@swc/core@1.5.28(@swc/helpers@0.5.11))(@types/node@20.14.2)(typescript@5.4.5) @@ -109,8 +109,8 @@ importers: specifier: ^0.25.13 version: 0.25.13(typescript@5.4.5) typedoc-plugin-mdn-links: - specifier: ^3.1.29 - version: 3.1.29(typedoc@0.25.13(typescript@5.4.5)) + specifier: ^3.1.30 + version: 3.1.30(typedoc@0.25.13(typescript@5.4.5)) typescript: specifier: ~5.4.5 version: 5.4.5 @@ -1285,8 +1285,8 @@ packages: resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==} engines: {node: '>=0.3.1'} - dom-renderer@2.1.7: - resolution: {integrity: sha512-RIqayT+FfjgEV/cZzyctkg1pvtsBfIcJBCPCvVozlCOXeXGustqJeU9oPAaWJ0eZJYxB7Baq43VY5gwiSxDD+A==} + dom-renderer@2.1.8: + resolution: {integrity: sha512-XciJAb8pAFAlpFOBO79njazvbfNzA16+045Uie5kZORSu+NY5X2cecjI4nyT4M4ji0nzRsF8P8KHH8xvKM1cdg==} dom-serializer@1.4.1: resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==} @@ -2424,8 +2424,8 @@ packages: resolution: {integrity: sha512-Y2fmSnZjQdDb9W4w4r1tswlMHylzWIeOKpx0aZH9BgGtACHhrk3OkT52AzwcuqTRBZtvvnTjDBh8eynMulu8Vg==} engines: {node: '>=14.16'} - ts-jest@29.1.4: - resolution: {integrity: sha512-YiHwDhSvCiItoAgsKtoLFCuakDzDsJ1DLDnSouTaTmdOcOwIkSzbLXduaQ6M5DRVhuZC/NYaaZ/mtHbWMv/S6Q==} + ts-jest@29.1.5: + resolution: {integrity: sha512-UuClSYxM7byvvYfyWdFI+/2UxMmwNyJb0NPkZPQE2hew3RurV7l7zURgOHAd/1I1ZdPpe3GUsXNXAcN8TFKSIg==} engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: @@ -2491,8 +2491,8 @@ packages: resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==} engines: {node: '>=12.20'} - typedoc-plugin-mdn-links@3.1.29: - resolution: {integrity: sha512-dFKri2eYa+Owq+/3h3z/GvRQF5yM5kzbPqQWLo0LTIv5s78tFGq+yl8vNGf6CkJGakPBfdnHdfeo4bSsVZH0WQ==} + typedoc-plugin-mdn-links@3.1.30: + resolution: {integrity: sha512-aB3UqyRGdxYziOHKzE7AQPh+9xpqqHHrp23F+T6yshHeuSiauCL+zzgTRhi4Ad1x30/7rTkCtyQ5dfO/+1FDKA==} peerDependencies: typedoc: '>= 0.23.14 || 0.24.x || 0.25.x' @@ -4186,7 +4186,7 @@ snapshots: diff@4.0.2: {} - dom-renderer@2.1.7(typescript@5.4.5): + dom-renderer@2.1.8(typescript@5.4.5): dependencies: tslib: 2.6.3 web-utility: 4.4.0(typescript@5.4.5) @@ -5454,7 +5454,7 @@ snapshots: '@tokenizer/token': 0.3.0 ieee754: 1.2.1 - ts-jest@29.1.4(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(jest@29.7.0(@types/node@20.14.2)(ts-node@10.9.2(@swc/core@1.5.28(@swc/helpers@0.5.11))(@types/node@20.14.2)(typescript@5.4.5)))(typescript@5.4.5): + ts-jest@29.1.5(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(jest@29.7.0(@types/node@20.14.2)(ts-node@10.9.2(@swc/core@1.5.28(@swc/helpers@0.5.11))(@types/node@20.14.2)(typescript@5.4.5)))(typescript@5.4.5): dependencies: bs-logger: 0.2.6 fast-json-stable-stringify: 2.1.0 @@ -5510,7 +5510,7 @@ snapshots: type-fest@2.19.0: {} - typedoc-plugin-mdn-links@3.1.29(typedoc@0.25.13(typescript@5.4.5)): + typedoc-plugin-mdn-links@3.1.30(typedoc@0.25.13(typescript@5.4.5)): dependencies: typedoc: 0.25.13(typescript@5.4.5) @@ -5569,7 +5569,7 @@ snapshots: web-cell@3.0.0-rc.16(element-internals-polyfill@1.3.11)(typescript@5.4.5): dependencies: '@swc/helpers': 0.5.11 - dom-renderer: 2.1.7(typescript@5.4.5) + dom-renderer: 2.1.8(typescript@5.4.5) element-internals-polyfill: 1.3.11 mobx: 6.12.4 regenerator-runtime: 0.14.1 diff --git a/source/CountDown.tsx b/source/Calendar/CountDown.tsx similarity index 97% rename from source/CountDown.tsx rename to source/Calendar/CountDown.tsx index 81b9d252..3731948f 100644 --- a/source/CountDown.tsx +++ b/source/Calendar/CountDown.tsx @@ -1,7 +1,7 @@ import { computed, observable } from 'mobx'; import { WebCell, attribute, component, observer } from 'web-cell'; -import { Status } from './type'; +import { Status } from '../type'; interface TimeUnit { scale: number; @@ -101,7 +101,7 @@ export class CountDown extends HTMLElement implements WebCell {
    {this.timeSections.map(({ value, label }, index) => (
  1. diff --git a/source/MonthCalendar.tsx b/source/Calendar/MonthCalendar.tsx similarity index 97% rename from source/MonthCalendar.tsx rename to source/Calendar/MonthCalendar.tsx index 00396cca..7811eb47 100644 --- a/source/MonthCalendar.tsx +++ b/source/Calendar/MonthCalendar.tsx @@ -10,9 +10,9 @@ import { splitArray } from 'web-utility'; -import { Badge } from './Reminder'; -import { Button, ButtonProps } from './Button'; -import { Table, TableProps } from './Content'; +import { Badge } from '../Reminder'; +import { Button, ButtonProps } from '../Form/Button'; +import { Table, TableProps } from '../Content'; export interface DateData { date: TimeData; diff --git a/source/Content/Accordion.tsx b/source/Content/Accordion.tsx index 03caf665..f90ac0f2 100644 --- a/source/Content/Accordion.tsx +++ b/source/Content/Accordion.tsx @@ -10,7 +10,7 @@ import { reaction } from 'web-cell'; -import { CollapseProps, Collapse } from './Collapse'; +import { CollapseProps, Collapse } from '../Layout/Collapse'; export const AccordionItem: FC> = ({ className = '', diff --git a/source/Content/Card.tsx b/source/Content/Card.tsx index 78535018..7bb6e363 100644 --- a/source/Content/Card.tsx +++ b/source/Content/Card.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { FC, WebCellProps } from 'web-cell'; -import { Image, ImageProps } from '../Image'; +import { Image, ImageProps } from '../Media/Image'; import { TextColor, PositionY } from '../type'; export interface CardProps extends WebCellProps { diff --git a/source/Content/Jumbotron.tsx b/source/Content/Jumbotron.tsx index 73804198..4b91375a 100644 --- a/source/Content/Jumbotron.tsx +++ b/source/Content/Jumbotron.tsx @@ -3,7 +3,7 @@ import { JsxChildren } from 'dom-renderer'; import { FC } from 'web-cell'; import { BackgroundColor } from '../type'; -import { Container, ContainerProps } from '../Grid'; +import { Container, ContainerProps } from '../Layout/Grid'; export interface JumbotronProps extends Omit, diff --git a/source/Content/ListGroup.tsx b/source/Content/ListGroup.tsx new file mode 100644 index 00000000..3c6643eb --- /dev/null +++ b/source/Content/ListGroup.tsx @@ -0,0 +1,65 @@ +import classNames from 'classnames'; +import { FC, WebCellProps } from 'web-cell'; + +import { Size, Status, Theme } from '../type'; + +export interface ListGroupProps extends WebCellProps { + variant?: 'flush'; + numbered?: boolean; + horizontal?: true | Size; +} + +export const ListGroup: FC = ({ + className = '', + variant, + numbered, + horizontal, + children, + ...props +}) => ( +
    + {children} +
    +); + +export interface ListGroupItemProps + extends WebCellProps, + Partial> { + variant?: keyof typeof Status | keyof typeof Theme; +} + +export const ListGroupItem: FC = ({ + className = '', + variant, + href, + active, + disabled, + children, + ...props +}) => ( + + {children} + +); diff --git a/source/Content/Tabs.tsx b/source/Content/Tabs.tsx index e079cf67..3b04a3f4 100644 --- a/source/Content/Tabs.tsx +++ b/source/Content/Tabs.tsx @@ -9,7 +9,7 @@ import { reaction } from 'web-cell'; -import { Nav, NavLink } from '../Nav'; +import { Nav, NavLink } from '../Navigator/Nav'; export interface TabProps { caption: JsxChildren; diff --git a/source/Content/index.ts b/source/Content/index.ts index dbd32355..e50cc8bd 100644 --- a/source/Content/index.ts +++ b/source/Content/index.ts @@ -1,8 +1,7 @@ +export * from './ListGroup'; export * from './Table'; export * from './Jumbotron'; export * from './Card'; export * from './MediaObject'; -export * from './ScrollBoundary'; -export * from './Collapse'; export * from './Accordion'; export * from './Tabs'; diff --git a/source/Button.tsx b/source/Form/Button.tsx similarity index 73% rename from source/Button.tsx rename to source/Form/Button.tsx index 52e7a18f..a140abfb 100644 --- a/source/Button.tsx +++ b/source/Form/Button.tsx @@ -1,10 +1,11 @@ import classNames from 'classnames'; import { JsxChildren, VNode } from 'dom-renderer'; import { FC, WebCellProps } from 'web-cell'; +import { uniqueID } from 'web-utility'; -import { FormControlProps } from './Form'; -import { Icon, IconProps } from './Reminder'; -import { TextColor } from './type'; +import { FormCheckProps, FormControlProps } from './Form'; +import { Icon, IconProps } from '../Reminder'; +import { TextColor } from '../type'; export interface ButtonProps extends WebCellProps, @@ -82,3 +83,25 @@ export const CloseButton: FC> = ({ {...props} /> ); + +export interface ToggleButtonProps + extends WebCellProps, + Pick { + type: Exclude; +} + +export const ToggleButton: FC = ({ + className = '', + id = uniqueID(), + variant = 'primary', + children, + ...props +}) => ( + <> + + + + +); diff --git a/source/Form/ButtonGroup.tsx b/source/Form/ButtonGroup.tsx new file mode 100644 index 00000000..3f3d26a3 --- /dev/null +++ b/source/Form/ButtonGroup.tsx @@ -0,0 +1,39 @@ +import classNames from 'classnames'; +import { FC, WebCellProps } from 'web-cell'; + +export interface ButtonGroupProps extends WebCellProps { + vertical?: boolean; + size?: 'sm' | 'lg'; +} + +export const ButtonGroup: FC = ({ + className = '', + vertical, + size, + children, + ...props +}) => ( +
    + {children} +
    +); + +export type ButtonToolbarProps = WebCellProps; + +export const ButtonToolbar: FC = ({ + className = '', + children, + ...props +}) => ( +
    + {children} +
    +); diff --git a/source/Form.tsx b/source/Form/Form.tsx similarity index 98% rename from source/Form.tsx rename to source/Form/Form.tsx index 7b0cfdbd..962dfe62 100644 --- a/source/Form.tsx +++ b/source/Form/Form.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import { VNode } from 'dom-renderer'; +import { JsxChildren } from 'dom-renderer'; import { FC, WebCellProps } from 'web-cell'; import { uniqueID } from 'web-utility'; @@ -108,7 +108,7 @@ export interface FormCheckProps extends WebCellProps { type: 'radio' | 'checkbox' | 'switch'; inline?: boolean; reverse?: boolean; - label?: VNode; + label?: JsxChildren; } export const FormCheck: FC = ({ diff --git a/source/Content/Collapse.tsx b/source/Layout/Collapse.tsx similarity index 100% rename from source/Content/Collapse.tsx rename to source/Layout/Collapse.tsx diff --git a/source/Grid.tsx b/source/Layout/Grid.tsx similarity index 93% rename from source/Grid.tsx rename to source/Layout/Grid.tsx index 80f70333..6d6c51e2 100644 --- a/source/Grid.tsx +++ b/source/Layout/Grid.tsx @@ -1,7 +1,7 @@ import { JsxProps } from 'dom-renderer'; import { FC } from 'web-cell'; -import { Size } from './type'; +import { Size } from '../type'; export interface ContainerProps extends JsxProps { fluid?: boolean | Size; diff --git a/source/Offcanvas.tsx b/source/Layout/Offcanvas.tsx similarity index 98% rename from source/Offcanvas.tsx rename to source/Layout/Offcanvas.tsx index 923da225..205d2780 100644 --- a/source/Offcanvas.tsx +++ b/source/Layout/Offcanvas.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import { FC, WebCellProps } from 'web-cell'; import { uniqueID } from 'web-utility'; -import { CloseButton } from './Button'; +import { CloseButton } from '../Form/Button'; export const OffcanvasTitle: FC> = ({ className = '', diff --git a/source/Ratio.tsx b/source/Layout/Ratio.tsx similarity index 100% rename from source/Ratio.tsx rename to source/Layout/Ratio.tsx diff --git a/source/Content/ScrollBoundary.tsx b/source/Layout/ScrollBoundary.tsx similarity index 100% rename from source/Content/ScrollBoundary.tsx rename to source/Layout/ScrollBoundary.tsx diff --git a/source/Layout/index.ts b/source/Layout/index.ts new file mode 100644 index 00000000..de59286b --- /dev/null +++ b/source/Layout/index.ts @@ -0,0 +1,5 @@ +export * from './Ratio'; +export * from './Grid'; +export * from './ScrollBoundary'; +export * from './Collapse'; +export * from './Offcanvas'; diff --git a/source/Carousel.tsx b/source/Media/Carousel.tsx similarity index 100% rename from source/Carousel.tsx rename to source/Media/Carousel.tsx diff --git a/source/Image.tsx b/source/Media/Image.tsx similarity index 100% rename from source/Image.tsx rename to source/Media/Image.tsx diff --git a/v1/Media/index.ts b/source/Media/index.ts similarity index 67% rename from v1/Media/index.ts rename to source/Media/index.ts index 70adf10d..e7e5d3ef 100644 --- a/v1/Media/index.ts +++ b/source/Media/index.ts @@ -1,3 +1,2 @@ export * from './Image'; -export * from './Embed'; export * from './Carousel'; diff --git a/source/Dropdown.tsx b/source/Navigator/Dropdown.tsx similarity index 98% rename from source/Dropdown.tsx rename to source/Navigator/Dropdown.tsx index a76dc1e3..0f2598f2 100644 --- a/source/Dropdown.tsx +++ b/source/Navigator/Dropdown.tsx @@ -3,7 +3,7 @@ import { JsxChildren } from 'dom-renderer'; import { observable } from 'mobx'; import { FC, WebCellProps, attribute, component, observer } from 'web-cell'; -import { Button, ButtonProps } from './Button'; +import { Button, ButtonProps } from '../Form/Button'; export const Dropdown: FC> = ({ className = '', diff --git a/source/Nav.tsx b/source/Navigator/Nav.tsx similarity index 97% rename from source/Nav.tsx rename to source/Navigator/Nav.tsx index c91b17fe..adff3228 100644 --- a/source/Nav.tsx +++ b/source/Navigator/Nav.tsx @@ -1,7 +1,7 @@ import { JsxChildren } from 'dom-renderer'; import { FC, WebCell, WebCellProps, component } from 'web-cell'; -import { ButtonProps } from './Button'; +import { ButtonProps } from '../Form/Button'; import { DropdownButton } from './Dropdown'; import { OffcanvasNavbar } from './Navbar'; diff --git a/source/Navbar.tsx b/source/Navigator/Navbar.tsx similarity index 97% rename from source/Navbar.tsx rename to source/Navigator/Navbar.tsx index 9579416f..45e95a7b 100644 --- a/source/Navbar.tsx +++ b/source/Navigator/Navbar.tsx @@ -10,15 +10,15 @@ import { } from 'web-cell'; import { delegate, uniqueID } from 'web-utility'; -import { Container, ContainerProps } from './Grid'; +import { Container, ContainerProps } from '../Layout/Grid'; import { Offcanvas, OffcanvasBody, OffcanvasBoxProps, OffcanvasHeader, OffcanvasTitle -} from './Offcanvas'; -import { BackgroundColor, PositionY, Size } from './type'; +} from '../Layout/Offcanvas'; +import { BackgroundColor, PositionY, Size } from '../type'; export type NavbarBrandProps = JsxProps; diff --git a/source/Reminder/index.ts b/source/Reminder/index.ts index 9177f1e5..55d11e6d 100644 --- a/source/Reminder/index.ts +++ b/source/Reminder/index.ts @@ -1,3 +1,4 @@ export * from './Badge'; export * from './Icon'; export * from './FAIcon'; +export * from './Progress'; diff --git a/source/index.ts b/source/index.ts index d19101af..4843df92 100644 --- a/source/index.ts +++ b/source/index.ts @@ -1,16 +1,13 @@ export * from './type'; -export * from './Ratio'; -export * from './Grid'; +export * from './Layout'; export * from './Content'; -export * from './Form'; -export * from './Button'; +export * from './Form/Form'; +export * from './Form/Button'; export * from './Reminder'; -export * from './Image'; +export * from './Media'; export * from './Prompt'; -export * from './Dropdown'; -export * from './Carousel'; -export * from './Nav'; -export * from './Navbar'; -export * from './Offcanvas'; -export * from './CountDown'; -export * from './MonthCalendar'; +export * from './Navigator/Dropdown'; +export * from './Navigator/Nav'; +export * from './Navigator/Navbar'; +export * from './Calendar/CountDown'; +export * from './Calendar/MonthCalendar'; diff --git a/v1/Content/ListGroup.tsx b/v1/Content/ListGroup.tsx deleted file mode 100644 index ae3f4325..00000000 --- a/v1/Content/ListGroup.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { WebCellProps, VNodeChildElement, VNode, createCell } from 'web-cell'; -import type { HTMLHyperLinkProps } from 'web-utility'; -import classNames from 'classnames'; - -import { CommonColors } from '../utility/constant'; - -export interface ListItemProps extends WebCellProps, HTMLHyperLinkProps { - color?: CommonColors; - disabled?: boolean; - active?: boolean; -} - -export function ListItem({ - className, - color, - disabled, - active, - tabIndex, - defaultSlot, - ...rest -}: ListItemProps) { - return ( - - {defaultSlot} - - ); -} - -export function isListItem(node: VNodeChildElement): node is VNode { - return (node as VNode).data?.class?.['list-group-item']; -} - -export interface ListGroupProps extends WebCellProps { - flush?: boolean; - horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl'; -} - -export function ListGroup({ - className, - flush, - horizontal, - defaultSlot, - ...rest -}: ListGroupProps) { - var modeClass = ''; - - if (flush) modeClass += 'list-group-flush'; - else if (horizontal) { - modeClass += 'list-group-horizontal'; - - if (typeof horizontal === 'string') modeClass += '-' + horizontal; - } - - return ( -
    - {defaultSlot} -
    - ); -} diff --git a/v1/Form/ButtonGroup.tsx b/v1/Form/ButtonGroup.tsx deleted file mode 100644 index e88fed46..00000000 --- a/v1/Form/ButtonGroup.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { WebCellProps, createCell } from 'web-cell'; -import classNames from 'classnames'; - -export interface ButtonGroupProps extends WebCellProps { - size?: 'sm' | 'lg'; - vertical?: boolean; -} - -export function ButtonGroup({ - vertical, - size, - className, - defaultSlot, - ...rest -}: ButtonGroupProps) { - return ( -
    - {defaultSlot} -
    - ); -} - -export function Toolbar({ className, defaultSlot, ...rest }: WebCellProps) { - return ( -
    - {defaultSlot} -
    - ); -} diff --git a/v1/Form/InputGroup.tsx b/v1/Form/InputGroup.tsx deleted file mode 100644 index c1e556a6..00000000 --- a/v1/Form/InputGroup.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { VNode, VNodeChildElement, WebCellProps, createCell } from 'web-cell'; -import { HTMLContainerProps, uniqueID } from 'web-utility'; -import classNames from 'classnames'; - -import { isButton } from './Button'; -import { DropMenu } from '../Navigator/DropMenu'; -import { isToggleField } from './ToggleField'; -import { ValidMessage, ValidableFieldProps } from './Form'; - -export interface InputGroupProps - extends WebCellProps, - HTMLContainerProps, - ValidableFieldProps { - size?: 'sm' | 'lg'; -} - -function toLabelNode(node: VNodeChildElement) { - if (isToggleField(node)) - node.data.class = { - ...node.data.class, - 'input-group-text': true - }; - else if ( - typeof node === 'string' || - typeof node === 'number' || - !( - /^(input|textarea|select|label)/.test((node as VNode).sel) || - isButton(node) || - DropMenu.is(node) - ) - ) - node = ; - - return node as VNode; -} - -export function InputGroup({ - className, - id = uniqueID(), - size, - defaultSlot, - validMode, - validMessage, - invalidMessage, - ...rest -}: InputGroupProps) { - var lastID = '', - count = 0; - - const nodes = (defaultSlot as VNodeChildElement[]) - .flat(Infinity) - .reverse() - .map(node => { - node = toLabelNode(node); - - const [tag] = node.sel.split(/[^\w-]/); - - switch (tag) { - case 'input': - case 'textarea': - case 'select': - lastID = (node.data.props ||= {}).id = - node.data.props?.id || `${id}-${count++}`; - break; - case 'label': - if (node.data.class?.['input-group-text']) - (node.data.props ||= {}).htmlFor = lastID; - } - return node; - }) - .reverse(); - - return ( -
    - {nodes} - -
    - ); -}