此页面演示加载与 npm 包捆绑在一起的客户端插件并在浏览器中运行它们。
demo-plugin.tsx
import { loadClientPlugin } from '../../client-plugin.js'
import { allNames } from '@beenotung/tslib/constant/character-name.js'
import { dataTableAsset, enableDataTable } from '../components/data-table.js'
import { mapArray } from '../components/fragment.js'
import { Locale, Title } from '../components/locale.js'
import { Script } from '../components/script.js'
import SourceCode from '../components/source-code.js'
import Style from '../components/style.js'
import { Swiper } from '../components/swiper.js'
import { o } from '../jsx/jsx.js'
import { Routes } from '../routes.js'
import { Chart, ChartScript } from '../components/chart.js'
let sweetAlertPlugin = loadClientPlugin({
entryFile: 'dist/client/sweetalert.js',
})
let confettiPlugin = loadClientPlugin({
entryFile: 'dist/client/confetti.js',
})
let icons = ['success', 'error', 'warning', 'info', 'question']
// init demo chart data
let demo_chart_label: string[] = []
let demo_chart_data: number[] = []
Math.PI.toString()
.replace('.', '')
.split('')
.forEach((char, index) => {
demo_chart_label.push(String(index + 1))
demo_chart_data.push(parseInt(char))
})
let content = (
<div id="demo-plugin">
{Style(/* css */ `
h2 {
margin: 0.5em 0;
}
#demo-plugin hr {
margin: 1em 0.25em;
border-color: #5555;
}
#demo-swiper {
outline: 1px solid black;
max-width: 300px;
height: 150px;
background-color: #f552;
--swiper-theme-color: red;
}
#demo-swiper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
#demo-dataTable_wrapper .dt-layout-table {
justify-content: center;
}
#demo-dataTable .swal2-icon {
font-size: 0.5rem;
margin: 1em;
}
.demo-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
`)}
<h1>
<Locale
en="Client-Side Plugin Demo"
zh_hk="客戶端插件示範"
zh_cn="客户端插件示范"
/>
</h1>
<p>
<Locale
en="This page demo loading client-side plugins that is bundled with npm packages and run them in the browser."
zh_hk="此頁面演示加載與 npm 包捆綁在一起的客戶端插件並在瀏覽器中運行它們。"
zh_cn="此页面演示加载与 npm 包捆绑在一起的客户端插件并在浏览器中运行它们。"
/>
</p>
<hr />
<h2>
<Locale en="Swiper Demo" zh_hk="Swiper 示範" zh_cn="Swiper 示范" />
</h2>
<Swiper
id="demo-swiper"
slides={[<p>Slice 1</p>, <p>Slice 2</p>, <p>Slice 3</p>]}
showPagination
showArrow
/>
<hr />
<h2>
<Locale en="Chart Demo" zh_hk="圖表示範" zh_cn="图表示范" />
</h2>
{ChartScript}
<Chart
canvas_id="demo-chart"
dataset_labels="PI Digits"
data_labels={demo_chart_label}
data={demo_chart_data}
borderWidth={1}
min={0}
max={9}
/>
<hr />
<h2>
<Locale en="Confetti Demo" zh_hk="彩紙示範" zh_cn="彩纸示范" />
</h2>
<div className="demo-buttons">
<button onclick="fireConfetti()">
<Locale en="Fire Confetti" zh_hk="放彩紙" zh_cn="放彩纸" />
</button>
<button onclick="fireStar()">
<Locale en="Fire Star" zh_hk="放星星" zh_cn="放星星" />
</button>
<button onclick="fireEmoji()">
<Locale en="Fire Emoji" zh_hk="放表情符號" zh_cn="放表情符号" />
</button>
</div>
{confettiPlugin.node}
<hr />
<h2>
<Locale
en="Sweet Alert Demo"
zh_hk="Sweet Alert 示範"
zh_cn="Sweet Alert 示範"
/>
</h2>
{sweetAlertPlugin.node}
<h3>
<Locale en="Toast" zh_hk="提示 (Toast)" zh_cn="提示 (Toast)" />
</h3>
<div class="demo-buttons">
<button onclick="showToast('sample text message')">default</button>
{[
icons.map(icon => (
<button onclick={`showToast('sample ${icon} message', '${icon}')`}>
{icon}
</button>
)),
]}
</div>
<h3>
<Locale
en="Alert"
zh_hk="通知彈出視窗 (Alert)"
zh_cn="通知弹出窗口 (Alert)"
/>
</h3>
<div class="demo-buttons">
<button onclick="showAlert('sample text message')">default</button>
{[
icons.map(icon => (
<button onclick={`showAlert('sample ${icon} message', '${icon}')`}>
{icon}
</button>
)),
]}
</div>
<h3>
<Locale
en="Confirm"
zh_hk="確認彈出視窗 (Confirm)"
zh_cn="确认弹出窗口 (Confirm)"
/>
</h3>
<div class="demo-buttons">
<button onclick="demoConfirm()">default</button>
{[
icons.map(icon => (
<button onclick={`demoConfirm('${icon}')`}>{icon}</button>
)),
]}
</div>
{Script(/* javascript */ `
async function demoConfirm(icon) {
let isConfirmed = await showConfirm({
title: 'Confirm to submit?',
text: 'Your content will be reviewed before publishing.', // optional
icon, // optional
})
if (isConfirmed) {
showToast('Confirmed', 'success')
} else {
showToast('Cancelled', 'info')
}
}
`)}
<hr />
<h2>
<Locale
en="DataTable Demo"
zh_hk="DataTable 示範"
zh_cn="DataTable 示范"
/>
</h2>
<table id="demo-dataTable">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Status</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
{mapArray(allNames, (name, index) => {
let icon = icons[index % icons.length]
return (
<tr>
<td>{index + 1}</td>
<td>{name}</td>
<td>{icon}</td>
<th>
<div
class={`swal2-icon swal2-${icon} swal2-icon-show`}
style="display: flex;"
>
<div class="swal2-icon-content">!</div>
</div>
</th>
</tr>
)
})}
</tbody>
</table>
{dataTableAsset}
{enableDataTable('demo-dataTable', {
pageLength: 3,
lengthMenu: [1, 2, 3, 5, 10, 25],
})}
<hr />
<SourceCode page="demo-plugin.tsx" style="margin-top: 1.5rem" />
</div>
)
let routes = {
'/demo-plugin': {
menuText: (
<Locale en="Client Plugin" zh_hk="客戶端插件" zh_cn="客户端插件" />
),
title: (
<Title
t={
<Locale
en="Client Plugin Demo"
zh_hk="客戶端插件示範"
zh_cn="客户端插件示范"
/>
}
/>
),
description: (
<Locale
en="Demonstrate using client-side plugins, including Swiper, DataTables and SweetAlert2"
zh_hk="演示使用客戶端插件,包括 Swiper、DataTable 和 SweetAlert2"
zh_cn="演示使用客户端插件,包括 Swiper、DataTable 和 SweetAlert2"
/>
),
node: content,
},
} satisfies Routes
export default { routes }