[refactor] Progress Bar, Modal & Dialog components (#23)

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.23",
+    "version": "2.0.0-beta.26",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -27,9 +27,9 @@
         "@swc/helpers": "^0.5.11",
         "classnames": "^2.5.1",
         "dom-renderer": "^2.1.7",
-        "mobx": "^6.12.3",
+        "mobx": "^6.12.4",
         "regenerator-runtime": "^0.14.1",
-        "web-cell": "^3.0.0-rc.15",
+        "web-cell": "^3.0.0-rc.16",
         "web-utility": "^4.4.0"
     },
     "peerDependencies": {
@@ -49,7 +49,6 @@
         "@parcel/transformer-typescript-types": "~2.12.0",
         "@peculiar/webcrypto": "^1.5.0",
         "@tech_query/snabbdom-looks-like": "^2.0.1",
-        "@types/classnames": "^2.3.1",
         "@types/jest": "^29.5.12",
         "@types/resize-observer-browser": "^0.1.11",
         "@types/turndown": "^5.0.4",
@@ -60,7 +59,7 @@
         "iterable-observer": "^1.0.1",
         "jest": "^29.7.0",
         "less": "^4.2.0",
-        "lint-staged": "^15.2.6",
+        "lint-staged": "^15.2.7",
         "markdown-area-element": "^0.2.3",
         "open-cli": "^8.0.0",
         "parcel": "~2.12.0",

pnpm-lock.yaml

@@ -4,13 +4,13 @@ import { FC, WebCellProps } from 'web-cell';
 
 import { FormControlProps } from './Form';
 import { Icon, IconProps } from './Reminder';
-import { Color } from './type';
+import { TextColor } from './type';
 
 export interface ButtonProps
     extends WebCellProps<HTMLButtonElement>,
         Omit<WebCellProps<HTMLAnchorElement>, 'type'>,
         Pick<FormControlProps<'input'>, 'size'> {
-    variant?: Color | `outline-${Color}` | 'link';
+    variant?: TextColor | `outline-${TextColor}` | 'link';
     active?: boolean;
 }
 

source/Button.tsx

@@ -178,7 +178,7 @@ export class Carousel extends HTMLElement implements WebCell<CarouselProps> {
             <>
                 <link
                     rel="stylesheet"
-                    href="https://unpkg.com/[email protected].2/dist/css/bootstrap.min.css"
+                    href="https://unpkg.com/[email protected].3/dist/css/bootstrap.min.css"
                 />
                 {this.renderContent()}
             </>

source/Carousel.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import { FC, WebCellProps } from 'web-cell';
 
-import { Image, ImageProps } from './Image';
-import { Color, PositionY } from './type';
+import { Image, ImageProps } from '../Image';
+import { TextColor, PositionY } from '../type';
 
 export interface CardProps extends WebCellProps<HTMLDivElement> {
-    bg?: Color;
-    text?: Color | 'white' | 'muted';
-    border?: Color;
+    bg?: TextColor;
+    text?: TextColor | 'white' | 'muted';
+    border?: TextColor;
     body?: boolean;
 }
 

source/Accordion.tsx source/Content/Accordion.tsxsource/Accordion.tsx renamed to source/Content/Accordion.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import { JsxChildren } from 'dom-renderer';
 import { FC } from 'web-cell';
 
-import { BackgroundColor } from './type';
-import { Container, ContainerProps } from './Grid';
+import { BackgroundColor } from '../type';
+import { Container, ContainerProps } from '../Grid';
 
 export interface JumbotronProps
     extends Omit<ContainerProps, 'title'>,

source/Card.tsx source/Content/Card.tsxsource/Card.tsx renamed to source/Content/Card.tsx

@@ -17,7 +17,7 @@ export const MediaObject: FC<MediaObjectProps> = ({
     image,
     imageRow = 'start',
     imageColumn = 'start',
-    defaultSlot,
+    children,
     ...rest
 }) => {
     const start = imageColumn === 'start';
@@ -39,7 +39,7 @@ export const MediaObject: FC<MediaObjectProps> = ({
             </div>
             <div className={`flex-grow-1 ${start ? 'ms-3' : 'me-3'}`}>
                 <h5 className="mt-0">{title}</h5>
-                {defaultSlot}
+                {children}
             </div>
         </>
     );