[add] Code Block & Range Input components

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-rc.13",
+    "version": "2.0.0-rc.14",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -29,8 +29,10 @@
         "classnames": "^2.5.1",
         "dom-renderer": "^2.6.2",
         "iterable-observer": "^1.1.0",
+        "mime": "^4.0.6",
         "mobx": "^6.13.6",
         "regenerator-runtime": "^0.14.1",
+        "shiki": "^3.1.0",
         "web-cell": "^3.0.3",
         "web-utility": "^4.4.3"
     },
@@ -59,12 +61,12 @@
         "lint-staged": "^15.4.3",
         "open-cli": "^8.0.0",
         "parcel": "~2.13.3",
-        "prettier": "^3.5.2",
+        "prettier": "^3.5.3",
         "ts-jest": "^29.2.6",
         "ts-node": "^10.9.2",
         "typedoc": "^0.27.9",
-        "typedoc-plugin-mdn-links": "^4.0.14",
-        "typescript": "~5.7.3"
+        "typedoc-plugin-mdn-links": "^5.0.1",
+        "typescript": "~5.8.2"
     },
     "scripts": {
         "prepare": "husky",

source/Content/CodeBlock.module.less

@@ -0,0 +1,4 @@
+.code pre {
+    margin: 0;
+    padding: 1rem;
+}

source/Content/CodeBlock.tsx

@@ -0,0 +1,82 @@
+import MIME from 'mime';
+import { computed, observable } from 'mobx';
+import { codeToHtml } from 'shiki';
+import {
+    attribute,
+    component,
+    observer,
+    reaction,
+    WebCell,
+    WebCellProps
+} from 'web-cell';
+
+import { IconButton } from '../Form';
+import * as styles from './CodeBlock.module.less';
+
+export interface CodeBlockProps extends WebCellProps<HTMLPreElement> {
+    name?: string;
+    value: string;
+    language: string;
+    theme?: string;
+}
+
+export interface CodeBlock extends WebCell<CodeBlockProps> {}
+
+@component({ tagName: 'code-block' })
+@observer
+export class CodeBlock extends HTMLElement implements WebCell<CodeBlockProps> {
+    @attribute
+    @observable
+    accessor name = '';
+
+    @observable
+    accessor value = '';
+
+    @attribute
+    @observable
+    accessor language = '';
+
+    @attribute
+    @observable
+    accessor theme = '';
+
+    @observable
+    accessor markup = '';
+
+    @computed
+    get dataURI() {
+        return `data:${MIME.getType(this.name)};base64,${btoa(this.value)}`;
+    }
+
+    @reaction(({ value, language, theme }) => value + language + theme)
+    async connectedCallback() {
+        if (this.value)
+            this.markup = await codeToHtml(this.value, {
+                lang: this.language,
+                theme: this.theme
+            });
+    }
+
+    render() {
+        const { name, dataURI, markup } = this;
+
+        return (
+            <>
+                {name && (
+                    <div className="text-end mb-2">
+                        <IconButton
+                            name="download"
+                            variant="warning"
+                            download={name}
+                            href={dataURI}
+                        />
+                    </div>
+                )}
+                <div
+                    className={`rounded overflow-hidden ${styles.code}`}
+                    innerHTML={markup}
+                />
+            </>
+        );
+    }
+}

source/Content/index.ts

@@ -6,3 +6,4 @@ export * from './Card';
 export * from './MediaObject';
 export * from './Accordion';
 export * from './Tabs';
+export * from './CodeBlock';

source/Form/RangeInput.tsx

@@ -0,0 +1,92 @@
+import { JsxChildren } from 'dom-renderer';
+import { observable } from 'mobx';
+import {
+    attribute,
+    component,
+    formField,
+    observer,
+    WebCellProps,
+    WebField
+} from 'web-cell';
+
+export interface RangeInputProps extends WebCellProps<HTMLInputElement> {
+    icon?: JsxChildren | ((itemValue: number) => JsxChildren);
+}
+
+export interface RangeInput extends WebField<RangeInputProps> {}
+
+@component({ tagName: 'range-input', mode: 'open' })
+@formField
+@observer
+export class RangeInput
+    extends HTMLElement
+    implements WebField<RangeInputProps>
+{
+    @attribute
+    @observable
+    accessor type = 'range';
+
+    @attribute
+    @observable
+    accessor min: number | undefined;
+
+    @attribute
+    @observable
+    accessor max: number | undefined;
+
+    @attribute
+    @observable
+    accessor step = 1;
+
+    @observable
+    accessor icon: RangeInputProps['icon'] | undefined;
+
+    connectedCallback() {
+        this.classList.add('d-inline-block', 'position-relative');
+    }
+
+    handleChange = ({ currentTarget }: Event) => {
+        this.value = (currentTarget as HTMLInputElement).value;
+
+        this.emit('change');
+    };
+
+    renderItem(index: number) {
+        const { icon, step, value } = this;
+        const fullValue = step * index;
+        const itemValue = Math.max(Math.min(+value - fullValue, step), 0);
+
+        return (
+            <li key={index} className="text-center">
+                {typeof icon === 'function' ? icon(itemValue) : icon}
+            </li>
+        );
+    }
+
+    render() {
+        const { icon, min, max = icon ? 5 : 100, value = min || 0 } = this;
+
+        return (
+            <>
+                <link
+                    rel="stylesheet"
+                    href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+                />
+                <input
+                    className={icon ? 'opacity-0' : ''}
+                    style={{ margin: '0 -0.5rem', cursor: 'pointer' }}
+                    type="range"
+                    min={min?.toString()}
+                    max={max?.toString()}
+                    value={value?.toString()}
+                    onChange={this.handleChange}
+                />
+                <ol className="list-unstyled user-select-none position-absolute start-0 top-0 w-100 h-100 pe-none d-flex justify-content-around">
+                    {Array.from({ length: max }, (_, index) =>
+                        this.renderItem(index)
+                    )}
+                </ol>
+            </>
+        );
+    }
+}

source/Form/index.ts

@@ -1,5 +1,6 @@
 export * from './Form';
 export * from './Button';
 export * from './ButtonGroup';
+export * from './RangeInput';
 export * from './FilePicker';
 export * from './FileUploader';

source/global.d.ts

@@ -0,0 +1,8 @@
+declare module '*.css' {
+    const map: Record<string, string>;
+    export = map;
+}
+declare module '*.less' {
+    const map: Record<string, string>;
+    export = map;
+}

test/index.tsx

@@ -7,7 +7,8 @@ import {
     FileModel,
     FilePicker,
     FileUploader,
-    FormControl
+    FormControl,
+    RangeInput
 } from '../source/Form';
 
 configure({ enforceActions: 'never' });
@@ -32,8 +33,12 @@ const Content = () => (
                     <h3>Regular</h3>
                     <FormControl type="range" name="count" />
 
-                    {/* <h3>Star</h3>
-                    <ScoreRange className="text-warning" name="score" /> */}
+                    <h3>Star</h3>
+                    <RangeInput
+                        className="text-warning"
+                        name="score"
+                        icon={value => (value ? '★' : '☆')}
+                    />
                 </section>
 
                 <section>