From c988ad8ed11e618a4a859ae1c92ffc56f624e386 Mon Sep 17 00:00:00 2001 From: Lingbo Date: Thu, 11 Jul 2024 10:25:21 +0800 Subject: [PATCH] v0.3.0 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 变化 - 优化了组件的悬停提示 - 增加了 Page 组件 - 增加了 Drawer 组件 - 增加了 Scroll View 组件 - 增加了 Card 组件 - 增加了 Search 组件 - 增加了 Carousel 组件 - 增加了 Tab 组件 - 增加了 Navigation 组件 - 增加了 Appbar 组件 - 增加了 Dialog 组件 - 增加了 Popup 组件 - 增加了 Popup Menu 组件 - 增加了 Snackbar 组件 - 增加了 Tooltip 组件 - 增加了 Badge 组件 - 增加了 Chip 组件 - 增加了 Table 组件 - 修正了工作流无法打包的问题 ### 新的合作者 * @Minemetero made their first contribution in https://github.com/lingbopro/soberjs-vscode/pull/4 **Full Changelog**: https://github.com/lingbopro/soberjs-vscode/blob/dev/CHANGELOG.md --------- Co-authored-by: Minemetero Co-authored-by: Minemetero <156386015+Minemetero@users.noreply.github.com> --- .github/workflows/CI.yaml | 57 ---- .github/workflows/CI.yml | 52 ++++ .vscode/launch.json | 2 +- .vscode/settings.json | 6 +- CHANGELOG.md | 22 ++ README.md | 48 +-- custom-data/soberjs.html-data.json | 483 ++++++++++++++++++++++++++++- package-lock.json | 4 +- package.json | 8 +- 9 files changed, 594 insertions(+), 88 deletions(-) delete mode 100644 .github/workflows/CI.yaml create mode 100644 .github/workflows/CI.yml diff --git a/.github/workflows/CI.yaml b/.github/workflows/CI.yaml deleted file mode 100644 index dc5e1df..0000000 --- a/.github/workflows/CI.yaml +++ /dev/null @@ -1,57 +0,0 @@ -name: CI - -on: - push: - # Sequence of patterns matched against refs/tags - tags: - - "v*" # Push events to matching v*, i.e. v1.0, v20.15.10 - - -jobs: - build: - runs-on: ubuntu-latest - strategy: - matrix: - node-version: ['22.x'] - steps: - - name: Set up something - shell: bash - run: | - echo "Hello World!" - echo "Running at $(pwd)" - - name: Checkout - uses: actions/checkout@v4 - - name: Set up Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - - name: Set up VSCE - shell: bash - run: | - vsce --version >/dev/null 2>&1 && echo "VSCE Installed" || npm install -g @vscode/vsce - - name: Build - shell: bash - run: | - if [ ! -d "out/" ]; then mkdir out; fi - vsce package --out ./out/soberjs-vscode-${{ github.ref_name }}.vsix - - name: Login to VSCE - shell: bash - env: - AZURE_TOKEN: ${{ secrets.AZURE_TOKEN }} - run: | - echo "$AZURE_TOKEN" | vsce login lingbopro || exit 1 - - name: Publish - shell: bash - run: | - vsce publish --packagePath ./out/soberjs-vscode-${{ github.ref_name }}.vsix || exit 1 - - name: Release - uses: softprops/action-gh-release@v1 - if: startsWith(github.ref, 'refs/tags/') - with: - tag_name: ${{ github.ref_name }} - name: ${{ github.ref_name }} - body_path: CHANGELOG.md - draft: false - prerelease: false - files: | - ./out/soberjs-vscode-${{ github.ref_name }}.vsix \ No newline at end of file diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml new file mode 100644 index 0000000..37a1d8f --- /dev/null +++ b/.github/workflows/CI.yml @@ -0,0 +1,52 @@ +name: CI + +on: + push: + branches: + - master + - dev + +jobs: + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: ['22.x'] + 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: Upload artifact + uses: actions/upload-artifact@v4 + with: + 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: ${{ 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/launch.json b/.vscode/launch.json index 44a86ab..48c27a0 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -3,7 +3,7 @@ // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 { - "version": "0.2.0", + "version": "0.3.0", "configurations": [ { "name": "Extension", diff --git a/.vscode/settings.json b/.vscode/settings.json index 2250722..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", @@ -23,7 +27,7 @@ }, "files.eol": "\n", "files.autoGuessEncoding": true, - "[yaml]": { + "[yml]": { "editor.tabSize": 2, "prettier.tabWidth": 2 } diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e39707..2ac3523 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,27 @@ # 版本记录 +## v0.3.0 + +- 优化了组件的悬停提示 +- 增加了 Page 组件 +- 增加了 Drawer 组件 +- 增加了 Scroll View 组件 +- 增加了 Card 组件 +- 增加了 Search 组件 +- 增加了 Carousel 组件 +- 增加了 Tab 组件 +- 增加了 Navigation 组件 +- 增加了 Appbar 组件 +- 增加了 Dialog 组件 +- 增加了 Popup 组件 +- 增加了 Popup Menu 组件 +- 增加了 Snackbar 组件 +- 增加了 Tooltip 组件 +- 增加了 Badge 组件 +- 增加了 Chip 组件 +- 增加了 Table 组件 +- 修正了工作流无法打包的问题 + ## v0.2.0 - 根据更新 `v0.2.15` 后的文档修改了一些提示内容和属性 diff --git a/README.md b/README.md index 9b00c90..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 代码片段 -目前已支持 16 个组件（见下表） +目前已支持 Sober.js 0.2.15 的所有组件（见下表）
支持的组件（点击展开） @@ -66,27 +66,27 @@ - [x] 评分 Rate - [x] 选择框 Picker - [x] 分割线 Divider -- [ ] 容器 - - [ ] 页面 Page - - [ ] 抽屉 Drawer - - [ ] 滚动 Scroll View - - [ ] 卡片 Card - - [ ] 搜索栏 Search - - [ ] 轮播图 Carousel -- [ ] 导航 - - [ ] 选项卡 Tab - - [ ] 导航栏 Navigation - - [ ] 应用栏 Appbar -- [ ] 部件 - - [ ] 对话框 Dialog - - [ ] 弹出框 Popup - - [ ] 弹出式菜单 Popup Menu - - [ ] 提示框 Snackbar - - [ ] 工具提示 Tooltip - - [ ] 徽章 Badge - - [ ] 纸片 Chip -- [ ] 数据 - - [ ] 表格 Table +- [x] 容器 + - [x] 页面 Page + - [x] 抽屉 Drawer + - [x] 滚动 Scroll View + - [x] 卡片 Card + - [x] 搜索栏 Search + - [x] 轮播图 Carousel +- [x] 导航 + - [x] 选项卡 Tab + - [x] 导航栏 Navigation + - [x] 应用栏 Appbar +- [x] 部件 + - [x] 对话框 Dialog + - [x] 弹出框 Popup + - [x] 弹出式菜单 Popup Menu + - [x] 提示框 Snackbar + - [x] 工具提示 Tooltip + - [x] 徽章 Badge + - [x] 纸片 Chip +- [x] 数据 + - [x] 表格 Table
@@ -100,7 +100,7 @@ ## To-do -- [ ] 支持更多组件 +- [x] 支持更多组件 - [ ] 完善悬停提示 - [ ] 完成 CSS 变量名和枚举值补全 - [ ] 增加 SVG 图标补全 diff --git a/custom-data/soberjs.html-data.json b/custom-data/soberjs.html-data.json index 4842734..292316d 100644 --- a/custom-data/soberjs.html-data.json +++ b/custom-data/soberjs.html-data.json @@ -612,7 +612,488 @@ "url": "https://github.com/apprat/sober/blob/main/src/divider.ts" } ] - } + }, + { + "name": "s-page", + "description": "**页面 Page**\n\n建议作为页面根容器的组件，它拥有全局的 CSS 变量，用于控制所有后代组件的样式。\n\n```html\n\n```\n\n设置 `theme` 来使用其他主题。\n\n**属性:**\n\n- `theme`: 主题", + "attributes": [ + { + "name": "theme", + "description": "主题，可选值为 `light`, `dark`, `auto`。", + "values": [ + { + "name": "light", + "description": "亮色主题（默认）" + }, + { + "name": "dark", + "description": "暗色主题" + }, + { + "name": "auto", + "description": "跟随系统" + } + ] + } + ], + "references": [ + { + "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- `mode` _[只读]_: 模式\n\n**插槽:**\n- `start`: 开始插槽\n- `end`: 结束插槽", + "attributes": [ + { + "name": "fold", + "description": "抽屉折叠模式的阈值宽度，单位为像素。" + } + ], + "references": [ + { + "name": "文档", + "url": "https://soberjs.com/component/drawer" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/drawer.ts" + } + ] + }, + { + "name": "s-scroll-view", + "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`: 内边距", + "attributes": [ + { + "name": "type", + "description": "卡片样式，可选值为 `elevated`, `filled`, `outlined`。", + "values": [ + { + "name": "elevated", + "description": "带有阴影的卡片" + }, + { + "name": "filled", + "description": "带有背景色的卡片" + }, + { + "name": "outlined", + "description": "带有边框的卡片" + } + ] + }, + { + "name": "clickable", + "description": "是否启用可点击", + "valueSet": "boolean" + }, + { + "name": "selectable", + "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`: 下拉插槽", + "attributes": [ + { + "name": "size", + "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" + } + ] + }, + { + "name": "s-carousel", + "description": "**Carousel 组件**\n\n轮播组件用于展示一组内容，并可以自动轮播。可以通过设置持续时长来自定义每张幻灯片显示的时间。\n\n```html\n\n
\n
\n
\n\n```\n\n**属性:**\n\n- `duration` (`number`): 每张幻灯片显示的持续时长，单位为毫秒，默认值为 `4000`。\n\n**插槽:**\n- 无特定插槽。", + "attributes": [ + { + "name": "duration", + "description": "每张幻灯片显示的持续时长，单位为毫秒，默认值为 `4000`。" + } + ], + "references": [ + { + "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- `change`: 选中变化后触发。", + "attributes": [ + { + "name": "mode", + "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`: 徽章", + "attributes": [ + { + "name": "selected", + "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`: 结束插槽", + "attributes": [ + { + "name": "mode", + "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`: 徽章", + "attributes": [ + { + "name": "selected", + "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 的表现更像一个容器，它没有事件和行为。\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`): 对话框尺寸，可选值为 `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": "对话框尺寸，可选值为 `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`): 设置弹出框的默认位置，可选值为 `center`, `left`, `right`。\n\n**插槽:**\n- `trigger`: 触发器", + "attributes": [ + { + "name": "showAlign", + "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": "**弹出式菜单 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`", + "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- `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`: 触发器", + "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`: 徽章内容", + "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`: 操作", + "attributes": [ + { + "name": "type", + "description": "纸片样式，可选值为 `outlined`, `elevated`, `filled-tonal`，默认值为 `outlined`", + "values": [ + { + "name": "outlined", + "description": "带有边框的纸片" + }, + { + "name": "elevated", + "description": "带有阴影的纸片" + }, + { + "name": "filled-tonal", + "description": "带有背景色的纸片" + } + ] + }, + { + "name": "selectable", + "description": "是否启用选中，默认值为 `false`", + "valueSet": "boolean" + } + ], + "references": [ + { + "name": "文档", + "url": "https://soberjs.com/component/chip" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/chip.ts" + } + ] + }, + { + "name": "s-table", + "description": "**Table 组件**\n\nTable 表格组件用于显示结构化的数据。\n\n```html\n\n \n \n title1\n title2\n title3\n title4\n title5\n \n \n \n \n item1\n item2\n item3\n item4\n item5\n \n \n item1\n item2\n item3\n item4\n item5\n \n \n item1\n item2\n item3\n item4\n item5\n \n \n\n```\n\n**插槽:**\n- `thead`: 表头\n- `tbody`: 表身\n- `tr`: 表格行\n- `th`: 表格头\n- `td`: 表格数据", + "attributes": [], + "references": [ + { + "name": "文档", + "url": "https://soberjs.com/component/table" + }, + { + "name": "源代码", + "url": "https://github.com/apprat/sober/blob/main/src/table.ts" + } + ] + } ], "valueSets": [ { diff --git a/package-lock.json b/package-lock.json index 1666eac..740f7eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "soberjs-vscode", - "version": "0.1.0", + "version": "0.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "soberjs-vscode", - "version": "0.1.0", + "version": "0.3.0", "license": "MIT", "engines": { "vscode": "^1.90.0" diff --git a/package.json b/package.json index f8d18da..6ffbd7a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "soberjs-vscode", "displayName": "Sober.js", "description": "为 Sober.js 组件库提供自动完成、悬停提示、代码片段等功能", - "version": "0.2.0", + "version": "0.3.0", "publisher": "lingbopro", "author": { "name": "lingbopro", @@ -46,7 +46,11 @@ "path": "./snippets/html.code-snippets" }, { - "language": "javascript,typescript", + "language": "javascript", + "path": "./snippets/js-ts.code-snippets" + }, + { + "language": "typescript", "path": "./snippets/js-ts.code-snippets" } ],