From 5ff9e1753962dc54a9655c906bff012f568ce449 Mon Sep 17 00:00:00 2001 From: lingbopro Date: Wed, 10 Jul 2024 13:31:32 +0800 Subject: [PATCH] v0.3.0-beta.2 --- .github/workflows/CI.yml | 42 +++-- .vscode/settings.json | 4 + CHANGELOG.md | 1 + README.md | 4 +- custom-data/soberjs.html-data.json | 260 +++++++++++++++++++++++++---- 5 files changed, 258 insertions(+), 53 deletions(-) diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index e207f6a..37a1d8f 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -4,6 +4,7 @@ on: push: branches: - master + - dev jobs: build: @@ -14,25 +15,38 @@ jobs: steps: - name: Checkout uses: actions/checkout@v4 + + - name: Setup Node ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + + - name: Get Extension Version + shell: bash + run: | + echo "extensionVersion=$(node -p "require('./package.json').version")" >> $GITHUB_ENV - name: Package VS Code extension id: package uses: nhedger/package-vscode-extension@main #放心版本号是和打包是你写的版本号一致 路径都是一样版本号变一下就行 - - name: Publish VS Code extension artifact + - name: Upload artifact uses: actions/upload-artifact@v4 with: - name: 0.3.0 #注意!!!每次更新必须手动更新版本号 - path: /home/runner/work/soberjs-vscode/soberjs-vscode/soberjs-vscode-0.3.0.vsix #注意!!!每次更新必须手动更新版本号 + name: soberjs-vscode-${{ env.extensionVersion }}.vsix + path: /home/runner/work/soberjs-vscode/soberjs-vscode/soberjs-vscode-${{ env.extensionVersion }}.vsix + compression-level: 0 + if-no-files-found: error - - name: Release #这里有些问题发布不了，不过你可以从artifact下载 - uses: softprops/action-gh-release@v2 - if: startsWith(github.ref, 'refs/tags/') - with: - tag_name: 0.3.0 #注意!!!每次更新必须手动更新版本号 - name: 0.3.0 #注意!!!每次更新必须手动更新版本号 - body_path: CHANGELOG.md - draft: false - prerelease: false - files: | #注意!!!每次更新必须手动更新版本号 - /home/runner/work/soberjs-vscode/soberjs-vscode/soberjs-vscode-0.3.0.vsix + # 既然发布不了就别发布了 + # - name: Release #这里有些问题发布不了，不过你可以从artifact下载 + # uses: softprops/action-gh-release@v2 + # if: startsWith(github.ref, 'refs/tags/') + # with: + # tag_name: ${{ env.extensionVersion }} + # name: ${{ env.extensionVersion }} + # body_path: CHANGELOG.md + # draft: false + # prerelease: false + # files: | #注意!!!每次更新必须手动更新版本号 + # /home/runner/work/soberjs-vscode/soberjs-vscode/soberjs-vscode-${{ env.extensionVersion }}.vsix diff --git a/.vscode/settings.json b/.vscode/settings.json index 502e378..8fa04eb 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,8 +3,12 @@ "Appbar", "apprat", "horiz", + "onclick", "oninput", + "showalign", "soberjs", + "tbody", + "thead", "VSIX" ], "editor.wordWrap": "on", diff --git a/CHANGELOG.md b/CHANGELOG.md index 0330da4..2ac3523 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## v0.3.0 +- 优化了组件的悬停提示 - 增加了 Page 组件 - 增加了 Drawer 组件 - 增加了 Scroll View 组件 diff --git a/README.md b/README.md index 84b33f3..5cde292 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Release - Build status + Build Status Visual Studio Marketplace Installs @@ -44,7 +44,7 @@ - _~~CSS 变量名和枚举值（尚未完成）~~_ - 一点 HTML 代码片段 -目前已支持所有 0.2.15 的所有组件（见下表） +目前已支持 Sober.js 0.2.15 的所有组件（见下表）
支持的组件（点击展开） diff --git a/custom-data/soberjs.html-data.json b/custom-data/soberjs.html-data.json index 312d71b..292316d 100644 --- a/custom-data/soberjs.html-data.json +++ b/custom-data/soberjs.html-data.json @@ -615,15 +615,24 @@ }, { "name": "s-page", - "description": "A root container component for the page, with global CSS variables to control styles of all descendant components. Use it as ``.", + "description": "**页面 Page**\n\n建议作为页面根容器的组件，它拥有全局的 CSS 变量，用于控制所有后代组件的样式。\n\n```html\n\n```\n\n设置 `theme` 来使用其他主题。\n\n**属性:**\n\n- `theme`: 主题", "attributes": [ { "name": "theme", - "description": "Sets the theme for the page. Supports three themes: light (default), dark, and auto (follows the system theme).", + "description": "主题，可选值为 `light`, `dark`, `auto`。", "values": [ - { "name": "light", "description": "Light theme (default)." }, - { "name": "dark", "description": "Dark theme." }, - { "name": "auto", "description": "Follows the system theme." } + { + "name": "light", + "description": "亮色主题（默认）" + }, + { + "name": "dark", + "description": "暗色主题" + }, + { + "name": "auto", + "description": "跟随系统" + } ] } ], @@ -631,12 +640,16 @@ { "name": "文档", "url": "https://soberjs.com/component/page" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/page.ts" } ] }, { "name": "s-drawer", - "description": "**Drawer 组件**\n\n当容器的宽度小于 fold 的值时，抽屉会切换为折叠模式。通常适用于移动端，以便于腾出更多空间。\n\n```html\n\n
Start
\n
Main
\n
End
\n\n```\n\n**属性:**\n\n- `fold` (`number`): 抽屉折叠模式的阈值宽度，单位为像素。\n\n**插槽:**\n- `start`: 开始插槽\n- `end`: 结束插槽", + "description": "**抽屉 Drawer**\n\n当容器的宽度小于 `fold` 的值时，抽屉会切换为折叠模式。通常适用于移动端，以便于腾出更多空间。\n\n```html\n\n
Start
\n
Main
\n
End
\n\n```\n\n**属性:**\n\n- `fold` (`number`): 抽屉折叠模式的阈值宽度，单位为像素。\n- `mode` _[只读]_: 模式\n\n**插槽:**\n- `start`: 开始插槽\n- `end`: 结束插槽", "attributes": [ { "name": "fold", @@ -647,62 +660,103 @@ { "name": "文档", "url": "https://soberjs.com/component/drawer" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/drawer.ts" } ] }, { "name": "s-scroll-view", - "description": "为容器提供样式的滚动条。滚动条样式仅对支持鼠标输入的设备有效，并针对触摸设备进行了优化。将其用作 ``.", + "description": "**滚动 Scroll View**\n\n滚动为容器提供了滚动条样式，出于触屏设备优化，滚动条样式仅在支持鼠标的设备上有效。\n\n```html\n\n
\n\n```", "attributes": [], "references": [ { "name": "文档", "url": "https://soberjs.com/component/scroll-view" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/scroll-view.ts" } ] }, { "name": "s-card", - "description": "**Card 组件**\n\n用于显示内容的卡片组件，支持多种样式，可以作为容器使用。\n\n```html\n\n
\n
Headline
\n
Subhead
\n
Cards are often used for grid lists, which provide click effects
\n Action\n Action\n\n\n\n
\n
Headline
\n
Subhead
\n
Cards are often used for grid lists, which provide click effects
\n Action\n Action\n\n\n\n
\n
Headline
\n
Subhead
\n
Cards are often used for grid lists, which provide click effects
\n Action\n Action\n\n\n\n
\n
Headline
\n
Subhead
\n
Cards are often used for grid lists, which provide click effects
\n Action\n Action\n\n\n\n Card\n\n```\n\n**属性:**\n\n- `type` (`elevated`, `filled`, `outlined`): 卡片样式，默认为 `elevated`\n- `clickable` (`boolean`): 是否启用可点击，默认为 `false`\n- `selectable` (`boolean`): 是否启用选中，默认为 `false`\n\n**插槽:**\n- `image`: 图片\n- `headline`: 标题\n- `subhead`: 副标题\n- `text`: 卡片文本\n- `action`: 操作按钮\n\n**CSS 变量:**\n\n- `--border-radius`: 边框半径\n- `--border-width`: 边框宽度\n- `--border-color`: 边框颜色\n- `--padding`: 内边距", + "description": "**卡片 Card**\n\n用于显示内容的卡片组件，支持多种样式，可以作为容器使用。\n\n```html\n\n
\n
Headline
\n
Subhead
\n
Cards are often used for grid lists, which provide click effects
\n Action\n Action\n\n\n\n
\n
Headline
\n
Subhead
\n
Cards are often used for grid lists, which provide click effects
\n Action\n Action\n\n\n\n
\n
Headline
\n
Subhead
\n
Cards are often used for grid lists, which provide click effects
\n Action\n Action\n\n\n\n
\n
Headline
\n
Subhead
\n
Cards are often used for grid lists, which provide click effects
\n Action\n Action\n\n\n\n Card\n\n```\n\n**属性:**\n\n- `type` (`elevated`, `filled`, `outlined`): 卡片样式，默认为 `elevated`\n- `clickable` (`boolean`): 是否启用可点击，默认为 `false`\n- `selectable` (`boolean`): 是否启用选中，默认为 `false`\n\n**插槽:**\n- `image`: 图片\n- `headline`: 标题\n- `subhead`: 副标题\n- `text`: 卡片文本\n- `action`: 操作按钮\n\n**CSS 变量:**\n\n- `--border-radius`: 边框半径\n- `--border-width`: 边框宽度\n- `--border-color`: 边框颜色\n- `--padding`: 内边距", "attributes": [ { "name": "type", "description": "卡片样式，可选值为 `elevated`, `filled`, `outlined`。", "values": [ - { "name": "elevated", "description": "elevated (default)." }, - { "name": "filled", "description": "filled." }, - { "name": "outlined", "description": "outlined." } + { + "name": "elevated", + "description": "带有阴影的卡片" + }, + { + "name": "filled", + "description": "带有背景色的卡片" + }, + { + "name": "outlined", + "description": "带有边框的卡片" + } ] }, { "name": "clickable", - "description": "是否启用可点击，布尔值。" + "description": "是否启用可点击", + "valueSet": "boolean" }, { "name": "selectable", - "description": "是否启用选中，布尔值。" + "description": "是否启用选中", + "valueSet": "boolean" } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/card" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/card.ts" } ] }, { "name": "s-search", - "description": "**Search 组件**\n\n搜索组件支持不同尺寸和插槽。可以使用图标按钮、设置不同的尺寸以及自定义下拉插槽。\n\n```html\n\n \n \n \n\n\n\n \n \n \n \n \n \n \n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n\n \n \n \n
\n hello\n
\n\n```\n\n**属性:**\n\n- `size` (`string`): 按钮大小，可选值为 `medium`, `small`, `large`，默认值为 `medium`。\n\n**插槽:**\n- `start`: 开始插槽\n- `end`: 结束插槽\n- `dropdown`: 下拉插槽", + "description": "**搜索栏 Search**\n\n搜索组件支持不同尺寸和插槽。可以使用图标按钮、设置不同的尺寸以及自定义下拉插槽。\n\n```html\n\n \n \n \n\n\n\n \n \n \n \n \n \n \n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n\n \n \n \n
\n hello\n
\n\n```\n\n**属性:**\n\n- `size` (`string`): 按钮大小，可选值为 `medium`, `small`, `large`，默认值为 `medium`。\n\n**插槽:**\n- `start`: 开始插槽\n- `end`: 结束插槽\n- `dropdown`: 下拉插槽", "attributes": [ { "name": "size", - "description": "按钮大小，可选值为 `medium`, `small`, `large`，默认值为 `medium`。" + "description": "按钮大小，可选值为 `medium`, `small`, `large`，默认值为 `medium`。", + "values": [ + { + "name": "medium", + "description": "默认值。中等大小" + }, + { + "name": "small", + "description": "大小较小" + }, + { + "name": "large", + "description": "大小较大" + } + ] } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/search" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/search.ts" } ] }, @@ -719,181 +773,309 @@ { "name": "文档", "url": "https://soberjs.com/component/carousel" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/carousel.ts" } ] }, { "name": "s-tab", - "description": "**Tab 组件**\n\n选项卡组件用于在同一个区域内切换不同的内容。支持徽章、左右对齐以及固定模式。\n\n```html\n\n \n
Item 1
\n \n \n
Item 2
\n \n \n
Item 3
\n \n\n\n\n \n
Item 1
\n \n \n \n
Item 2
\n \n \n
Item 3
\n 99\n \n\n\n\n \n
Item 1
\n \n \n
Item 2
\n \n \n
Item 3
\n \n\n\n\n \n
Item 1
\n \n \n
Item 2
\n \n \n
Item 3
\n \n\n```\n\n**属性:**\n\n- `mode` (`string`): 设置固定模式，使 item 均分占据宽度，不再支持滚动。\n\n**插槽:**\n- 无特定插槽。\n\n**事件:**\n- `change`: 选中变化后触发。", + "description": "**选项卡 Tab**\n\n选项卡组件用于在同一个区域内切换不同的内容。支持徽章、左右对齐以及固定模式。\n\n```html\n\n \n
Item 1
\n \n \n
Item 2
\n \n \n
Item 3
\n \n\n\n\n \n
Item 1
\n \n \n \n
Item 2
\n \n \n
Item 3
\n 99\n \n\n\n\n \n
Item 1
\n \n \n
Item 2
\n \n \n
Item 3
\n \n\n\n\n \n
Item 1
\n \n \n
Item 2
\n \n \n
Item 3
\n \n\n```\n\n**属性:**\n\n- `mode` (`string`): 设置固定模式，使 item 均分占据宽度，不再支持滚动。\n\n**事件:**\n- `change`: 选中变化后触发。", "attributes": [ { "name": "mode", - "description": "设置固定模式，使 item 均分占据宽度，不再支持滚动。" + "description": "设置固定模式，使 item 均分占据宽度，不再支持滚动。", + "values": [ + { + "name": "scrollable", + "description": "可滚动模式" + }, + { + "name": "fixed", + "description": "固定模式" + } + ] } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/tab" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/tab.ts" } ] }, { "name": "s-tab-item", - "description": "**Tab Item 组件**\n\n选项卡项组件，作为 s-tab 组件的子组件。\n\n**属性:**\n\n- `selected` (`boolean`): 是否选中，默认值为 `false`。\n\n**插槽:**\n- `icon`: 图标\n- `text`: 文本\n- `badge`: 徽章", + "description": "**选项卡项目 Tab Item**\n\n选项卡项组件，作为 `s-tab` 组件的子组件。\n\n**属性:**\n\n- `selected` (`boolean`): 是否选中，默认值为 `false`。\n\n**插槽:**\n- `icon`: 图标\n- `text`: 文本\n- `badge`: 徽章", "attributes": [ { "name": "selected", - "description": "是否选中，默认值为 `false`。" + "description": "是否选中，默认值为 `false`。", + "valueSet": "boolean" } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/tab-item" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/tab.ts" } ] }, { "name": "s-navigation", - "description": "**Navigation 组件**\n\n导航组件用于在应用中进行页面切换或执行其他操作。支持图标、文本、徽章插槽，以及导轨模式。\n\n```html\n\n \n \n
Item 1
\n \n \n \n
Item 2
\n \n \n \n
Item 3
\n \n\n\n\n \n \n
Item 1
\n \n \n \n \n
Item 2
\n \n \n \n
Item 3
\n 99\n \n\n\n\n \n \n
Item 1
\n \n \n \n
Item 2\">
\n \n \n \n
Item 3\">
\n \n\n```\n\n**属性:**\n\n- `mode` (`string`): 设置导轨模式。\n\n**事件:**\n- `change`: 选中变化后触发。\n\n**插槽:**\n- `start`: 开始插槽\n- `end`: 结束插槽", + "description": "**导航栏 Navigation**\n\n导航组件用于在应用中进行页面切换或执行其他操作。支持图标、文本、徽章插槽，以及导轨模式。\n\n```html\n\n \n \n
Item 1
\n \n \n \n
Item 2
\n \n \n \n
Item 3
\n \n\n\n\n \n \n
Item 1
\n \n \n \n \n
Item 2
\n \n \n \n
Item 3
\n 99\n \n\n\n\n \n \n
Item 1
\n \n \n \n
Item 2\">
\n \n \n \n
Item 3\">
\n \n\n```\n\n**属性:**\n\n- `mode` (`string`): 设置导轨模式。\n\n**事件:**\n- `change`: 选中变化后触发。\n\n**插槽:**\n- `start`: 开始插槽\n- `end`: 结束插槽", "attributes": [ { "name": "mode", - "description": "设置导轨模式。" + "description": "设置导轨模式。", + "values": [ + { + "name": "bottom", + "description": "底栏模式" + }, + { + "name": "rail", + "description": "导轨模式" + } + ] } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/navigation" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/navigation.ts" } ] }, { "name": "s-navigation-item", - "description": "**Navigation Item 组件**\n\n导航项组件，作为 s-navigation 组件的子组件。\n\n**属性:**\n\n- `selected` (`boolean`): 是否选中，默认值为 `false`。\n\n**插槽:**\n- `icon`: 图标\n- `text`: 文本\n- `badge`: 徽章", + "description": "**导航栏子项 Navigation Item**\n\n导航项组件，作为 `s-navigation` 组件的子组件。\n\n**属性:**\n\n- `selected` (`boolean`): 是否选中，默认值为 `false`。\n\n**插槽:**\n- `icon`: 图标\n- `text`: 文本\n- `badge`: 徽章", "attributes": [ { "name": "selected", - "description": "是否选中，默认值为 `false`。" + "description": "是否选中，默认值为 `false`。", + "valueSet": "boolean" } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/navigation" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/navigation.ts" } ] }, { "name": "s-appbar", - "description": "**Appbar 组件**\n\nAppbar 是一个容器组件，在屏幕宽度小于 840px 时，高度会变为 56px。支持导航、标题和操作按钮的插槽。可以嵌套使用，内部的 appbar 会居中并设置一个最大宽度，默认为 1280px。\n\n```html\n\n \n \n \n \n \n
Title
\n \n \n \n \n\n\n\n \n \n \n \n \n \n
Title
\n \n \n \n \n \n\n```\n\n**插槽:**\n- `navigation`: 导航\n- `headline`: 标题\n- `action`: 操作", + "description": "**应用栏 Appbar**\n\nAppbar 的表现更像一个容器，它没有事件和行为。\n\n在屏幕宽度小于 **840px** 时，它的高度会变为 **56px**。\n\n支持导航、标题和操作按钮的插槽。\n\n你可以嵌套该组件，内部的 appbar 会居中并且设置一个最大宽度，默认为 **1280px**。\n\n```html\n\n \n \n \n \n \n
Title
\n \n \n \n \n\n\n\n \n \n \n \n \n \n
Title
\n \n \n \n \n \n\n```\n\n**插槽:**\n- `navigation`: 导航\n- `headline`: 标题\n- `action`: 操作", "references": [ { "name": "文档", "url": "https://soberjs.com/component/appbar" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/appbar.ts" } ] }, { "name": "s-dialog", - "description": "**Dialog 组件**\n\nDialog 对话框组件用于显示重要信息或提示。\n\n```html\n\n dialog \n
Title
\n
问人生、头白京国，算来何事消得。不如罨画清溪上，蓑笠扁舟一只。人不识，且笑煮、鲈鱼趁著莼丝碧。无端酸鼻，向岐路消魂，征轮驿骑，断雁西风急。英雄辈，事业东西南北。临风因甚泣。酬知有愿频挥手，零雨凄其此日。休太息，须信道、诸公衮衮皆虚掷。年来踪迹。有多少雄心，几翻恶梦，泪点霜华织。
\n 取消\n 确定\n\n```\n\n**属性:**\n\n- `size` (`string`): 对话框尺寸，可选值为 `full` (全屏)\n\n**事件:**\n\n- `show`: 对话框开始显示时触发\n- `showed`: 对话框显示后触发（动画结束）\n- `dismiss`: 对话框开始隐藏时触发\n- `dismissed`: 对话框隐藏后触发（动画结束）\n\n**插槽:**\n- `trigger`: 触发器\n- `headline`: 标题\n- `text`: 文本内容\n- `action`: 操作按钮", + "description": "**对话框 Dialog**\n\nDialog 对话框组件用于显示重要信息或提示。\n\n```html\n\n dialog \n
Title
\n
问人生、头白京国，算来何事消得。不如罨画清溪上，蓑笠扁舟一只。人不识，且笑煮、鲈鱼趁著莼丝碧。无端酸鼻，向岐路消魂，征轮驿骑，断雁西风急。英雄辈，事业东西南北。临风因甚泣。酬知有愿频挥手，零雨凄其此日。休太息，须信道、诸公衮衮皆虚掷。年来踪迹。有多少雄心，几翻恶梦，泪点霜华织。
\n 取消\n 确定\n\n```\n\n**属性:**\n\n- `size` (`string`): 对话框尺寸，可选值为 `basic` (普通), `full` (全屏)\n\n**事件:**\n\n- `show`: 对话框开始显示时触发\n- `showed`: 对话框显示后触发（动画结束）\n- `dismiss`: 对话框开始隐藏时触发\n- `dismissed`: 对话框隐藏后触发（动画结束）\n\n**插槽:**\n- `trigger`: 触发器\n- `headline`: 标题\n- `text`: 文本内容\n- `action`: 操作按钮", "attributes": [ { "name": "size", - "description": "对话框尺寸，可选值为 `full` (全屏)" + "description": "对话框尺寸，可选值为 `basic` (普通), `full` (全屏)", + "values": [ + { + "name": "basic", + "description": "普通" + }, + { + "name": "full", + "description": "全屏" + } + ] } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/dialog" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/dialog.ts" } ] }, { "name": "s-popup", - "description": "**Popup 组件**\n\nPopup 弹出框组件用于展示临时内容或提示信息。支持通过不同方式触发，并且可以设置默认位置。\n\n```html\n\n popup \n
\n 弹出框\n
\n\n\n\n popup \n
\n 弹出框\n
\n\n```\n\n**属性:**\n\n- `showAlign` (`string`): 设置弹出框的默认位置，可选值如 `right`。\n\n**插槽:**\n- `trigger`: 触发器", + "description": "**弹出框 Popup**\n\nPopup 弹出框组件用于展示临时内容或提示信息。支持通过不同方式触发，并且可以设置默认位置。\n\n```html\n\n popup \n
\n 弹出框\n
\n\n\n\n popup \n
\n 弹出框\n
\n\n```\n\n**属性:**\n\n- `showAlign` (`string`): 设置弹出框的默认位置，可选值为 `center`, `left`, `right`。\n\n**插槽:**\n- `trigger`: 触发器", "attributes": [ { "name": "showAlign", - "description": "设置弹出框的默认位置，可选值如 `right`" + "description": "设置弹出框的默认位置，可选值为 `center`, `left`, `right`", + "values": [ + { + "name": "center", + "description": "居中" + }, + { + "name": "left", + "description": "居左" + }, + { + "name": "right", + "description": "居右" + } + ] } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/popup" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/popup.ts" } ] }, { "name": "s-popup-menu", - "description": "**PopupMenu 组件**\n\nPopupMenu 弹出菜单组件用于在指定元素位置显示菜单项。支持动态调用和子菜单的复杂布局。\n\n```html\n\n 菜单\n 选项1\n 选项2\n 选项3\n 选项4\n 选项5\n\n\n\n 动态调用 \n\n\n 选项1\n 选项2\n 选项3\n 选项4\n 选项5\n\n```\n\n**属性:**\n\n- `group` (`string`): 分组，值为 `start` 或 `end`\n- `show()` (`Function`, 只读): 显示对话框\n- `dismiss()` (`Function`, 只读): 隐藏对话框\n- `toggle()` (`Function`, 只读): 切换抽屉\n\n**插槽:**\n- `trigger`: 触发器\n- `Menu Item`: 菜单项\n- `start`: 开始\n- `end`: 结束", + "description": "**弹出式菜单 Popup Menu**\n\nPopupMenu 弹出菜单组件用于在指定元素位置显示菜单项。支持动态调用和子菜单的复杂布局。\n\n```html\n\n 菜单\n 选项1\n 选项2\n 选项3\n 选项4\n 选项5\n\n\n\n 动态调用 \n\n\n 选项1\n 选项2\n 选项3\n 选项4\n 选项5\n\n```\n\n**属性:**\n\n- `group` (`string`): 分组，值为 `start` 或 `end`\n- `show()` (`Function`, 只读): 显示对话框\n- `dismiss()` (`Function`, 只读): 隐藏对话框\n- `toggle()` (`Function`, 只读): 切换抽屉\n\n**插槽:**\n- `trigger`: 触发器\n- `Menu Item`: 菜单项\n- `start`: 开始\n- `end`: 结束", "attributes": [ { "name": "group", - "description": "分组，值为 `start` 或 `end`" + "description": "分组，值为 `start` 或 `end`", + "values": [ + { + "name": "start", + "description": "开始" + }, + { + "name": "end", + "description": "结束" + } + ] } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/popup-menu" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/popup-menu.ts" } ] }, { "name": "s-snackbar", - "description": "**Snackbar 组件**\n\nSnackbar 提示框组件用于显示临时消息。支持通过触发器显示和关闭，并且可以配置动作按钮。\n\n```html\n\n Snackbar \n Snackbar Message\n 关闭 \n\n```\n\n**事件:**\n\n- `show`: 提示框显示时触发\n- `showed`: 提示框显示后触发（动画结束）\n- `dismiss`: 提示框开始隐藏时触发\n- `dismissed`: 提示框隐藏后触发（动画结束）\n\n**插槽:**\n- `trigger`: 触发器", - "attributes": [], + "description": "**提示框 Snackbar**\n\nSnackbar 提示框组件用于显示临时消息。支持通过触发器显示和关闭，并且可以配置动作按钮。\n\n```html\n\n Snackbar \n Snackbar Message\n 关闭 \n\n```\n\n**属性:**\n\n- `action` (`string`): 操作按钮文本\n\n**事件:**\n\n- `show`: 提示框显示时触发\n- `showed`: 提示框显示后触发（动画结束）\n- `dismiss`: 提示框开始隐藏时触发\n- `dismissed`: 提示框隐藏后触发（动画结束）\n\n**插槽:**\n- `trigger`: 触发器", + "attributes": [ + { + "name": "action", + "description": "操作按钮文本" + } + ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/snackbar" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/snackbar.ts" } ] }, { "name": "s-tooltip", - "description": "**Tooltip 组件**\n\nTooltip 提示信息组件用于在支持鼠标的设备上通过鼠标悬停触发提示信息，在触屏设备上通过长按触发。\n\n```html\n\n Tooltip\n 提示信息\n\n```\n\n工具提示支持自定义布局，例如放置图片，但请注意，无论你放置什么布局，都无法触发任何事件。\n\n**插槽:**\n- `trigger`: 触发器", + "description": "**工具提示 Tooltip**\n\nTooltip 提示信息组件用于在支持鼠标的设备上通过鼠标悬停触发提示信息，在触屏设备上通过长按触发。\n\n```html\n\n Tooltip\n 提示信息\n\n```\n\n工具提示支持自定义布局，例如放置图片，但请注意，无论你放置什么布局，都无法触发任何事件。\n\n**插槽:**\n- `trigger`: 触发器", "attributes": [], "references": [ { "name": "文档", "url": "https://soberjs.com/component/tooltip" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/tooltip.ts" } ] }, { "name": "s-badge", - "description": "**Badge 组件**\n\nBadge 徽章组件用于显示数字或状态标识，通常用于其他组件的插槽中。\n\n```html\n\n26\n```\n\n**插槽:**\n- `default`: 徽章内容", + "description": "**徽章 Badge**\n\nBadge 徽章组件用于显示数字或状态标识，通常用于其他组件的插槽中。\n\n```html\n\n26\n```\n\n**插槽:**\n- `default`: 徽章内容", "attributes": [], "references": [ { "name": "文档", "url": "https://soberjs.com/component/badge" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/badge.ts" } ] }, { "name": "s-chip", - "description": "**Chip 组件**\n\nChip 组件用于显示标签或可交互的元素。\n\n```html\nChip1\nChip2\n\n Chip3\n \n \n \n \n\n```\n\n**属性:**\n\n- `type` (`string`): 纸片样式，可选值为 `outlined`, `elevated`, `filled-tonal`\n- `selectable` (`boolean`): 是否启用选中，默认值为 `false`\n\n**插槽:**\n- `start`: 开始\n- `end`: 结束\n- `action`: 操作", + "description": "**纸片 Chip**\n\nChip 组件用于显示标签或可交互的元素。\n\n```html\nChip1\nChip2\n\n Chip3\n \n \n \n \n\n```\n\n**属性:**\n\n- `type` (`string`): 纸片样式，可选值为 `outlined`, `elevated`, `filled-tonal`\n- `selectable` (`boolean`): 是否启用选中，默认值为 `false`\n\n**插槽:**\n- `start`: 开始\n- `end`: 结束\n- `action`: 操作", "attributes": [ { "name": "type", - "description": "纸片样式，可选值为 `outlined`, `elevated`, `filled-tonal`" + "description": "纸片样式，可选值为 `outlined`, `elevated`, `filled-tonal`，默认值为 `outlined`", + "values": [ + { + "name": "outlined", + "description": "带有边框的纸片" + }, + { + "name": "elevated", + "description": "带有阴影的纸片" + }, + { + "name": "filled-tonal", + "description": "带有背景色的纸片" + } + ] }, { "name": "selectable", - "description": "是否启用选中，默认值为 `false`" + "description": "是否启用选中，默认值为 `false`", + "valueSet": "boolean" } ], "references": [ { "name": "文档", "url": "https://soberjs.com/component/chip" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/chip.ts" } ] }, @@ -905,6 +1087,10 @@ { "name": "文档", "url": "https://soberjs.com/component/table" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/table.ts" } ] }