diff --git a/.github/workflows/Build.yaml b/.github/workflows/Build.yaml
new file mode 100644
index 0000000..aaea452
--- /dev/null
+++ b/.github/workflows/Build.yaml
@@ -0,0 +1,45 @@
+name: Build
+
+on:
+ workflow_call:
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+ strategy:
+ matrix:
+ node-version: ['22.x']
+ outputs:
+ artifact-url: ${{ steps.upload-artifact.outputs.artifact-url }}
+ commit-hash: ${{ steps.get-version.outputs.commitHash }}
+ extension-version: ${{ steps.get-version.outputs.extensionVersion }}
+ 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
+ id: get-version
+ shell: bash
+ run: |
+ extensionVersion=$(node -p "require('./package.json').version")
+ echo "extensionVersion=$extensionVersion" >> $GITHUB_ENV
+ echo "extensionVersion=$extensionVersion" >> $GITHUB_OUTPUT
+ echo "commitHash=$(git log --format="%H" | head -n 1)" >> $GITHUB_OUTPUT
+
+ - name: Package VS Code extension
+ id: package
+ uses: nhedger/package-vscode-extension@main
+
+ - name: Upload artifact
+ uses: actions/upload-artifact@v4
+ id: upload-artifact
+ 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
diff --git a/.github/workflows/CI.yaml b/.github/workflows/CI.yaml
new file mode 100644
index 0000000..db5295b
--- /dev/null
+++ b/.github/workflows/CI.yaml
@@ -0,0 +1,10 @@
+name: CI
+
+on:
+ push:
+ pull_request:
+
+jobs:
+ build:
+ name: Build
+ uses: ./.github/workflows/Build.yaml
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
deleted file mode 100644
index 37a1d8f..0000000
--- a/.github/workflows/CI.yml
+++ /dev/null
@@ -1,52 +0,0 @@
-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/.github/workflows/Publish.yaml b/.github/workflows/Publish.yaml
new file mode 100644
index 0000000..74e26ac
--- /dev/null
+++ b/.github/workflows/Publish.yaml
@@ -0,0 +1,52 @@
+name: Publish
+
+on:
+ workflow_dispatch:
+ inputs:
+ prerelease:
+ description: 'Pre-release'
+ type: boolean
+ required: false
+ default: false
+ dry_run_marketplace:
+ description: 'Dry Run (Marketplace) (Do not publish)'
+ type: boolean
+ required: false
+ default: false
+ dry_run_gh_releases:
+ description: 'Dry Run (GitHub Releases) (Do not publish)'
+ type: boolean
+ required: false
+ default: false
+
+jobs:
+ build:
+ name: Build
+ uses: ./.github/workflows/Build.yaml
+ publish:
+ needs: build
+ runs-on: ubuntu-latest
+ steps:
+ - name: Download Artifact
+ shell: bash
+ run: |
+ curl -o extension.zip '${{ needs.build.outputs.artifact-url }}'
+ echo
+ unzip extension.zip
+ echo "extensionFileName=soberjs-vscode-${{ needs.build.outputs.extension-version }}.vsix >> $GITUHB_ENV"
+ - name: Publish to Visual Studio Marketplace
+ uses: HaaLeo/publish-vscode-extension@v1
+ if: ${{ ! inputs.prerelease }}
+ with:
+ pat: ${{ secrets.AZURE_TOKEN }}
+ registryUrl: https://marketplace.visualstudio.com
+ extensionFile: ./${{ env.extensionFileName }}
+ dryRun: ${{ inputs.dry_run_marketplace }}
+ - name: Publish to GitHub Releases
+ uses: softprops/action-gh-release@v2
+ if: ${{ ! inputs.dry_run_gh_releases }}
+ with:
+ files: ./${{ env.extensionFileName }}
+ tag_name: v${{ needs.build.outputs.extension-version }}
+ prerelease: ${{ inputs.prerelease }}
+ target_commitish: ${{ needs.build.outputs.commit-hash }}
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..b5489fd
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,12 @@
+{
+ "singleQuote": true,
+ "tabWidth": 4,
+ "overrides": [
+ {
+ "files": ["*.yaml", "*.yml", "*.json", "*.html", "*.md"],
+ "options": {
+ "tabWidth": 2
+ }
+ }
+ ]
+}
diff --git a/.vscodeignore b/.vscodeignore
index 8279531..61bdd9e 100644
--- a/.vscodeignore
+++ b/.vscodeignore
@@ -5,4 +5,5 @@ out/**
docs/**
.gitignore
.gitattributes
+.prettierrc
CONTRIBUTING.md
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d394835..6a22fa8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
# 版本记录
+## v0.7.0
+
+- 针对 [Sober `0.4.1`](https://soberjs.com/introduction/update-log) 的全面更新
+- 增加 Field 组件
+- 增加 Menu 组件
+- 补充了 Popup Menu Item 组件
+- 更新工作流
+- 增加了 Field、Text Field、Picker、Checkbox、Radio Button 的 CSS 变量支持
+
## v0.6.0
- 适配 [Sober `0.3.0` 更新](https://soberjs.com/introduction/update-log)
diff --git a/README.md b/README.md
index 5d83136..5785f82 100644
--- a/README.md
+++ b/README.md
@@ -12,8 +12,11 @@
-
- 
+
+ 
+
+
+ 
@@ -25,7 +28,7 @@
一个 [Visual Studio Code](https://code.visualstudio.com) 扩展，为 [Sober.js 组件库](https://soberjs.com) 提供自动完成、悬停提示、代码片段等功能
-（非官方扩展，组件库由 [@apprat](https://gituhb.com/apprat) 创建和维护，此扩展由 [@lingbopro](https://github.com/lingbopro) 制作）
+（非官方扩展，组件库由 [@apprat](https://gituhb.com/apprat) 创建和维护，此扩展由 [@lingbopro](https://github.com/lingbopro) 制作并由 [@Minemetero](https://github.com/Minemetero) 协作）
## 安装
@@ -38,139 +41,141 @@
代码自动补全和悬停提示，包括：
-- HTML 标签名
-- HTML 标签属性名称和枚举值
-- CSS 变量名和枚举值
-- 一点 HTML 代码片段
-- Material 图标 SVG 补全
+- HTML 标签名
+- HTML 标签属性名称和枚举值
+- CSS 变量名和枚举值
+- 一点 HTML 代码片段
+- Material 图标 SVG 补全
-目前已支持 `Sober.js 0.3.0` 的所有组件、CSS 变量（见下表）和 SVG 图标
+目前已支持 `Sober.js 0.4.1` 的所有组件、CSS 变量（见下表）和 SVG 图标
支持的组件（点击展开）
-- [x] 基础组件
- - [x] 按钮 Button
- - [x] 图标 Icon
- - [x] 图标按钮 Icon Button
- - [x] 浮动操作按钮 FAB
- - [x] 分组按钮 Segmented
- - [x] 波纹 Ripple
- - [x] 复选框 Checkbox
- - [x] 单选按钮 Radio Button
- - [x] 滑块 Slider
- - [x] 线性进度 Linear Progress
- - [x] 圆形进度 Circular Progress
- - [x] 开关 Switch
- - [x] 文本框 Text Field
- - [x] 评分 Rate
- - [x] 选择框 Picker
- - [x] 分割线 Divider
-- [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
+- [x] 基础组件
+ - [x] 按钮 Button
+ - [x] 图标 Icon
+ - [x] 图标按钮 Icon Button
+ - [x] 浮动操作按钮 FAB
+ - [x] 分组按钮 Segmented Button
+ - [x] 波纹 Ripple
+ - [x] 复选框 Checkbox
+ - [x] 单选按钮 Radio Button
+ - [x] 滑块 Slider
+ - [x] 线性进度 Linear Progress
+ - [x] 圆形进度 Circular Progress
+ - [x] 开关 Switch
+ - [x] 文本框 Text Field
+ - [x] 评分 Rate
+ - [x] 选择框 Picker
+ - [x] 字段框 Field
+ - [x] 分割线 Divider
+- [x] 容器
+ - [x] 页面 Page
+ - [x] 抽屉 Drawer
+ - [x] 滚动 Scroll View
+ - [x] 卡片 Card
+ - [x] 搜索栏 Search
+ - [x] 轮播图 Carousel
+- [x] 导航
+ - [x] 选项卡 Tab
+ - [x] 导航栏 Navigation
+ - [x] 应用栏 Appbar
+ - [x] 菜单 Menu
+- [x] 部件
+ - [x] 对话框 Dialog
+ - [x] 弹出框 Popup
+ - [x] 弹出式菜单 Popup Menu
+ - [x] 提示框 Snackbar
+ - [x] 工具提示 Tooltip
+ - [x] 徽章 Badge
+ - [x] 纸片 Chip
+- [x] 数据
+ - [x] 表格 Table
支持的 CSS 变量
-- [x] 组件变量
- - [x] 波纹 Ripple
- - [x] `--ripple-color`
- - [x] `-ripple-opacity`
- - [x] 文本框 Text Field / 选择框 Picker
- - [x] `--border-radius`
- - [x] `--border-width`
- - [x] `--border-color`
- - [x] `--padding`
-- [x] 全局变量
- - [x] `--s-color-primary`
- - [x] `--s-color-on-primary`
- - [x] `--s-color-primary-container`
- - [x] `--s-color-on-primary-container`
- - [x] `--s-color-secondary`
- - [x] `--s-color-on-secondary`
- - [x] `--s-color-secondary-container`
- - [x] `--s-color-on-secondary-container`
- - [x] `--s-color-tertiary`
- - [x] `--s-color-on-tertiary`
- - [x] `--s-color-tertiary-container`
- - [x] `--s-color-on-tertiary-container`
- - [x] `--s-color-error`
- - [x] `--s-color-on-error`
- - [x] `--s-color-error-container`
- - [x] `--s-color-on-error-container`
- - [x] `--s-color-background`
- - [x] `--s-color-on-background`
- - [x] `--s-color-outline`
- - [x] `--s-color-outline-variant`
- - [x] `--s-color-surface`
- - [x] `--s-color-on-surface`
- - [x] `--s-color-surface-variant`
- - [x] `--s-color-on-surface-variant`
- - [x] `--s-color-inverse-surface`
- - [x] `--s-color-inverse-on-surface`
- - [x] `--s-color-inverse-primary`
- - [x] `--s-color-surface-container`
- - [x] `--s-color-surface-container-high`
- - [x] `--s-color-surface-container-highest`
- - [x] `--s-color-surface-container-low`
- - [x] `--s-color-surface-container-lowest`
- - [x] `--s-color-dark-primary`
- - [x] `--s-color-dark-on-primary`
- - [x] `--s-color-dark-primary-container`
- - [x] `--s-color-dark-on-primary-container`
- - [x] `--s-color-dark-secondary`
- - [x] `--s-color-dark-on-secondary`
- - [x] `--s-color-dark-secondary-container`
- - [x] `--s-color-dark-on-secondary-container`
- - [x] `--s-color-dark-tertiary`
- - [x] `--s-color-dark-on-tertiary`
- - [x] `--s-color-dark-tertiary-container`
- - [x] `--s-color-dark-on-tertiary-container`
- - [x] `--s-color-dark-error`
- - [x] `--s-color-dark-on-error`
- - [x] `--s-color-dark-error-container`
- - [x] `--s-color-dark-on-error-container`
- - [x] `--s-color-dark-background`
- - [x] `--s-color-dark-on-background`
- - [x] `--s-color-dark-outline`
- - [x] `--s-color-dark-outline-variant`
- - [x] `--s-color-dark-surface`
- - [x] `--s-color-dark-on-surface`
- - [x] `--s-color-dark-surface-variant`
- - [x] `--s-color-dark-on-surface-variant`
- - [x] `--s-color-dark-inverse-surface`
- - [x] `--s-color-dark-inverse-on-surface`
- - [x] `--s-color-dark-inverse-primary`
- - [x] `--s-color-dark-surface-container`
- - [x] `--s-color-dark-surface-container-high`
- - [x] `--s-color-dark-surface-container-highest`
- - [x] `--s-color-dark-surface-container-low`
- - [x] `--s-color-dark-surface-container-lowest`
- - [x] `--s-elevation-level1`
- - [x] `--s-elevation-level2`
- - [x] `--s-elevation-level3`
- - [x] `--s-elevation-level4`
- - [x] `--s-elevation-level5`
+- [x] 组件变量
+ - [x] 波纹 Ripple
+ - [x] `--ripple-color`
+ - [x] `-ripple-opacity`
+ - [x] 文本框 Text Field / 选择框 Picker
+ - [x] `--border-radius`
+ - [x] `--border-width`
+ - [x] `--border-color`
+ - [x] `--padding`
+- [x] 全局变量
+ - [x] `--s-color-primary`
+ - [x] `--s-color-on-primary`
+ - [x] `--s-color-primary-container`
+ - [x] `--s-color-on-primary-container`
+ - [x] `--s-color-secondary`
+ - [x] `--s-color-on-secondary`
+ - [x] `--s-color-secondary-container`
+ - [x] `--s-color-on-secondary-container`
+ - [x] `--s-color-tertiary`
+ - [x] `--s-color-on-tertiary`
+ - [x] `--s-color-tertiary-container`
+ - [x] `--s-color-on-tertiary-container`
+ - [x] `--s-color-error`
+ - [x] `--s-color-on-error`
+ - [x] `--s-color-error-container`
+ - [x] `--s-color-on-error-container`
+ - [x] `--s-color-background`
+ - [x] `--s-color-on-background`
+ - [x] `--s-color-outline`
+ - [x] `--s-color-outline-variant`
+ - [x] `--s-color-surface`
+ - [x] `--s-color-on-surface`
+ - [x] `--s-color-surface-variant`
+ - [x] `--s-color-on-surface-variant`
+ - [x] `--s-color-inverse-surface`
+ - [x] `--s-color-inverse-on-surface`
+ - [x] `--s-color-inverse-primary`
+ - [x] `--s-color-surface-container`
+ - [x] `--s-color-surface-container-high`
+ - [x] `--s-color-surface-container-highest`
+ - [x] `--s-color-surface-container-low`
+ - [x] `--s-color-surface-container-lowest`
+ - [x] `--s-color-dark-primary`
+ - [x] `--s-color-dark-on-primary`
+ - [x] `--s-color-dark-primary-container`
+ - [x] `--s-color-dark-on-primary-container`
+ - [x] `--s-color-dark-secondary`
+ - [x] `--s-color-dark-on-secondary`
+ - [x] `--s-color-dark-secondary-container`
+ - [x] `--s-color-dark-on-secondary-container`
+ - [x] `--s-color-dark-tertiary`
+ - [x] `--s-color-dark-on-tertiary`
+ - [x] `--s-color-dark-tertiary-container`
+ - [x] `--s-color-dark-on-tertiary-container`
+ - [x] `--s-color-dark-error`
+ - [x] `--s-color-dark-on-error`
+ - [x] `--s-color-dark-error-container`
+ - [x] `--s-color-dark-on-error-container`
+ - [x] `--s-color-dark-background`
+ - [x] `--s-color-dark-on-background`
+ - [x] `--s-color-dark-outline`
+ - [x] `--s-color-dark-outline-variant`
+ - [x] `--s-color-dark-surface`
+ - [x] `--s-color-dark-on-surface`
+ - [x] `--s-color-dark-surface-variant`
+ - [x] `--s-color-dark-on-surface-variant`
+ - [x] `--s-color-dark-inverse-surface`
+ - [x] `--s-color-dark-inverse-on-surface`
+ - [x] `--s-color-dark-inverse-primary`
+ - [x] `--s-color-dark-surface-container`
+ - [x] `--s-color-dark-surface-container-high`
+ - [x] `--s-color-dark-surface-container-highest`
+ - [x] `--s-color-dark-surface-container-low`
+ - [x] `--s-color-dark-surface-container-lowest`
+ - [x] `--s-elevation-level1`
+ - [x] `--s-elevation-level2`
+ - [x] `--s-elevation-level3`
+ - [x] `--s-elevation-level4`
+ - [x] `--s-elevation-level5`
@@ -184,8 +189,8 @@
## To-do
-- [x] 支持更多组件
-- [ ] 完善悬停提示
-- [x] 完成 CSS 变量名和枚举值补全
-- [x] 增加 SVG 图标补全
-- [ ] 使 SVG 图标补全可以补全填充图标，不仅是线条图标
+- [x] 支持更多组件
+- [ ] 完善悬停提示
+- [x] 完成 CSS 变量名和枚举值补全
+- [x] 增加 SVG 图标补全
+- [ ] 使 SVG 图标补全可以补全填充图标，不仅是线条图标
diff --git a/custom-data/components.css-data.json b/custom-data/components.css-data.json
index af7f775..06e4f4d 100644
--- a/custom-data/components.css-data.json
+++ b/custom-data/components.css-data.json
@@ -1,11 +1,12 @@
{
+ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/refs/heads/main/docs/customData.schema.json",
"version": 1.1,
"properties": [
{
"name": "--ripple-color",
"description": {
"kind": "markdown",
- "value": "波纹颜色\n\n**组件:**\n\n- `` 波纹 Ripple"
+ "value": "波纹颜色\n\n默认跟随文本颜色\n\n**组件:**\n\n- `` 波纹 Ripple"
},
"references": [
{
@@ -94,6 +95,149 @@
"url": "https://soberjs.com/component/picker"
}
]
+ },
+ {
+ "name": "--field-border-radius",
+ "description": {
+ "kind": "markdown",
+ "value": "圆角\n\n**默认值:** `4px`\n\n**组件:**\n\n- `` 表单域 Field"
+ },
+ "references": [
+ {
+ "name": "文档: 表单域 Field",
+ "url": "https://soberjs.com/component/field"
+ }
+ ]
+ },
+ {
+ "name": "--field-border-width",
+ "description": {
+ "kind": "markdown",
+ "value": "边框宽度\n\n**默认值:** `1px`\n\n**组件:**\n\n- `` 表单域 Field"
+ },
+ "references": [
+ {
+ "name": "文档: 表单域 Field",
+ "url": "https://soberjs.com/component/field"
+ }
+ ]
+ },
+ {
+ "name": "--field-border-color",
+ "description": {
+ "kind": "markdown",
+ "value": "边框颜色\n\n**默认值:** `var(--s-color-outline, #777680)`\n\n**组件:**\n\n- `` 表单域 Field"
+ },
+ "references": [
+ {
+ "name": "文档: 表单域 Field",
+ "url": "https://soberjs.com/component/field"
+ }
+ ]
+ },
+ {
+ "name": "--field-padding",
+ "description": {
+ "kind": "markdown",
+ "value": "内边距\n\n**默认值:** `16px`\n\n**组件:**\n\n- `` 表单域 Field"
+ },
+ "references": [
+ {
+ "name": "文档: 表单域 Field",
+ "url": "https://soberjs.com/component/field"
+ }
+ ]
+ },
+ {
+ "name": "--field-focused-border-width",
+ "description": {
+ "kind": "markdown",
+ "value": "聚焦边框高度\n\n**默认值:** `2px`\n\n**组件:**\n\n- `` 表单域 Field"
+ },
+ "references": [
+ {
+ "name": "文档: 表单域 Field",
+ "url": "https://soberjs.com/component/field"
+ }
+ ]
+ },
+ {
+ "name": "--checkbox-color",
+ "description": {
+ "kind": "markdown",
+ "value": "Checkbox 的颜色\n\n**默认值:** `var(--s-color-primary, #5256a9)`\n\n**组件:**\n\n- `` 复选框 Checkbox"
+ },
+ "references": [
+ {
+ "name": "文档: 复选框 Checkbox",
+ "url": "https://soberjs.com/component/checkbox"
+ }
+ ]
+ },
+ {
+ "name": "--radio-button-color",
+ "description": {
+ "kind": "markdown",
+ "value": "Radio Button 的颜色\n\n**默认值:** `var(--s-color-primary, #5256a9)`\n\n**组件:**\n\n- `` 单选按钮 Radio Button"
+ },
+ "references": [
+ {
+ "name": "文档: 单选按钮 Radio Button",
+ "url": "https://soberjs.com/component/radio-button"
+ }
+ ]
+ },
+ {
+ "name": "--text-field-border-radius",
+ "description": {
+ "kind": "markdown",
+ "value": "Text Field 的圆角\n\n**默认值:** `4px`\n\n**组件:**\n\n- `` 文本框 Text Field"
+ },
+ "references": [
+ {
+ "name": "文档: 文本框 Text Field",
+ "url": "https://soberjs.com/component/text-field"
+ }
+ ]
+ },
+ {
+ "name": "--text-field-border-width",
+ "description": {
+ "kind": "markdown",
+ "value": "Text Field 的边框宽度\n\n**默认值:** `1px`\n\n**组件:**\n\n- `` 文本框 Text Field"
+ },
+ "references": [
+ {
+ "name": "文档: 文本框 Text Field",
+ "url": "https://soberjs.com/component/text-field"
+ }
+ ]
+ },
+ {
+ "name": "--text-field-border-color",
+ "description": {
+ "kind": "markdown",
+ "value": "Text Field 的边框颜色\n\n**默认值:** `var(--s-color-outline, #777680)`\n\n**组件:**\n\n- `` 文本框 Text Field"
+ },
+ "references": [
+ {
+ "name": "文档: 文本框 Text Field",
+ "url": "https://soberjs.com/component/text-field"
+ }
+ ]
+ },
+ {
+ "name": "--text-field-padding",
+ "description": {
+ "kind": "markdown",
+ "value": "Text Field 的内边距\n\n**默认值:** `16px`\n\n**组件:**\n\n- `` 文本框 Text Field"
+ },
+ "references": [
+ {
+ "name": "文档: 文本框 Text Field",
+ "url": "https://soberjs.com/component/text-field"
+ }
+ ]
}
]
-}
\ No newline at end of file
+}
diff --git a/custom-data/components.html-data.json b/custom-data/components.html-data.json
index af7e8e7..baf1a5e 100644
--- a/custom-data/components.html-data.json
+++ b/custom-data/components.html-data.json
@@ -1,4 +1,5 @@
{
+ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/refs/heads/main/docs/customData.schema.json",
"version": 1.1,
"tags": [
{
@@ -486,11 +487,19 @@
},
{
"name": "s-text-field",
- "description": "**文本框 Text Field**\n\n文本框是一个容器，它可以在内部放置 **input** 和 **textarea**，推荐使用 label 来替代 placeholder\n\n```html\n\n \n \n\n\n\n \n \n \n \n\n```\n\n在使用 **textarea** 时，它的高度将会自适应\n\n你也可以设置一个最小值或最大值来定义文本框的高度\n\n```html\n\n \n\n```\n\n设置 **display: grid** 来作为块元素占满一行\n\n由于内部封装性较高，定义样式变得很复杂，因此我们开放了一些CSS变量来允许你定义一些样式\n\n**属性:**\n\n- `label` (`string`): 标签文本\n\n**插槽:**\n- `end`: 结束\n\n**CSS 变量:**\n\n- `--border-width`: 边框宽度\n- `--border-color`: 边框颜色\n- `--padding`: 内边距",
+ "description": "**文本框 Text Field**\n\n`Text Field` 是一个容器组件，可以在内部放置 `input` 和 `textarea` 元素。推荐使用 `label` 属性来替代 `placeholder`，从而在表单交互中提升可访问性。\n\n```html\n\n \n \n\n\n\n \n \n \n \n\n```\n\n在使用 `textarea` 时，组件高度将会自适应，你可以通过设置 `min-height` 和 `max-height` 来定义文本框的最小和最大高度。\n\n```html\n\n \n\n```\n\n`Text Field` 支持 `display: grid` 样式，从而作为块元素占满一行。\n\n由于组件内部封装性较高，样式自定义变得复杂，因此开放了一些 CSS 变量来允许你自定义样式。\n\n**属性:**\n\n- `label` (`string`): 标签文本，用于替代 `placeholder`。\n- `value` (`string`): 文本框中的初始值。\n- `placeholder` (`string`): 用于显示在文本框中的占位符文本。\n\n**插槽:**\n\n- `start`: 插槽用于放置在文本框开始位置的内容（如图标或按钮）。\n- `end`: 插槽用于放置在文本框结束位置的内容（如图标或按钮）。\n\n**CSS 变量:**\n\n- `--text-field-border-radius`: 文本框的圆角，默认值为 `4px`。\n- `--text-field-border-width`: 文本框的边框宽度，默认值为 `1px`。\n- `--text-field-border-color`: 文本框的边框颜色，默认值为 `var(--s-color-outline, #777680)`。\n- `--text-field-padding`: 文本框的内边距，默认值为 `16px`。\n\n**示例:**\n\n```html\n\n \n \n\n```\n\n你可以在 `` 组件中加入 `input`、`textarea` 或其他表单元素，并结合 `slot` 插槽在文本框内放置额外内容（如图标或按钮）。",
"attributes": [
{
"name": "label",
- "description": "标签文本"
+ "description": "标签文本，用于替代 `placeholder` 来描述文本框内容。"
+ },
+ {
+ "name": "value",
+ "description": "文本框中的初始值。"
+ },
+ {
+ "name": "placeholder",
+ "description": "用于显示在文本框中的占位符文本。"
}
],
"references": [
@@ -506,10 +515,10 @@
},
{
"name": "s-rate",
- "description": "**评分 Rate**\n\n```html\n\n```\n\n设置 `readonly` 启用只读模式。\n\n使用 `track` 和 `indicator` 插槽来自定义图标，你可以使用 svg 或者 icon 组件。\n\n```html\n\n \n \n\n```\n\n> 如果你希望自定义大小，那么请使用 `font-size` 来设置，该组件需要保持宽高比例，单独设置 width 和 height 可能会导致变形。\n\n**属性:**\n\n- `readonly` (`boolean`): 是否启用只读模式\n- `max` (`number`): 最大值\n- `min` (`number`): 最小值\n- `step` (`number`): 步进值\n- `value` (`number`): 当前值\n\n**事件:**\n- `change`: 值变化后触发\n- `input`: 值变化时触发\n\n**插槽:**\n- `track`: 未选中\n- `indicator`: 已选中",
+ "description": "**评分 Rate**\n\n```html\n\n```\n\n设置 `readOnly` 启用只读模式。\n\n使用 `track` 和 `indicator` 插槽来自定义图标，你可以使用 svg 或者 icon 组件。\n\n```html\n\n \n \n\n```\n\n> 如果你希望自定义大小，那么请使用 `font-size` 来设置，该组件需要保持宽高比例，单独设置 width 和 height 可能会导致变形。\n\n**属性:**\n\n- `readOnly` (`boolean`): 是否启用只读模式\n- `max` (`number`): 最大值\n- `min` (`number`): 最小值\n- `step` (`number`): 步进值\n- `value` (`number`): 当前值\n\n**事件:**\n- `change`: 值变化后触发\n- `input`: 值变化时触发\n\n**插槽:**\n- `track`: 未选中\n- `indicator`: 已选中",
"attributes": [
{
- "name": "readonly",
+ "name": "readOnly",
"description": "是否启用只读模式",
"valueSet": "boolean"
},
@@ -551,15 +560,38 @@
},
{
"name": "s-picker",
- "description": "**选择框 Picker**\n\n通常用于单选数据，它的目标是替代 `select`。\n\n```html\n\n 贵阳\n 北京\n 上海\n 深圳\n\n```\n\n由于内部封装性较高，定义样式变得很复杂，因此我们开放了一些CSS变量来允许你定义一些样式\n\n**属性:**\n\n- `label` (`string`): 标签文本\n- `options` _[只读]_ (`Item[]`): 子项目\n- `selectedIndex` (`number`): 当前选中下标\n\n**插槽:**\n- `trigger`: 触发\n\n**事件:**\n- `change`: 选中变化后触发\n\n**CSS 变量:**\n\n- `--border-width`: 边框宽度\n- `--border-color`: 边框颜色\n- `--padding`: 内边距",
+ "description": "**选择框 Picker**\n\n通常用于单选数据，它的目标是替代 `select` 元素。`s-picker` 组件可以通过定义多个 `s-picker-item` 选项来进行选择，支持标签文本、默认值设置以及自定义触发器。\n\n```html\n\n 贵阳\n 北京\n 上海\n 深圳\n 成都\n 武汉\n 南昌\n 杭州\n\n```\n\n你可以在 `s-picker-item` 上设置 `value` 来定义选项的值，并使用 `s-picker` 的 `value` 属性来设置默认选中的值。\n\n**属性:**\n\n- `label` (`string`): 标签文本，用于显示在选择框的触发按钮上。\n- `value` (`string`): 当前选中值，设置为选项 `s-picker-item` 中的 `value` 属性值。\n- `options` _[只读]_ (`PickerItem[]`): 子项目数组，默认为 `[]`。\n- `selectedIndex` (`number`): 当前选中下标，默认为 `-1`。\n- `show()` (`Function`): 显示选择框。\n- `dismiss()` (`Function`): 隐藏选择框。\n- `toggle()` (`Function`): 切换选择框的显示和隐藏状态。\n\n**事件:**\n\n- `change`: 选中值变化后触发。\n\n**插槽:**\n\n- `trigger`: 自定义触发器插槽。\n\n**CSS 变量:**\n\n- `--picker-border-radius`: 圆角，默认值为 `4px`。\n- `--picker-border-width`: 边框宽度，默认值为 `1px`。\n- `--picker-border-color`: 边框颜色，默认值为 `var(--s-color-outline, #777680)`。\n- `--picker-padding`: 内边距，默认值为 `16px`。\n- `--picker-height`: 高度，默认值为 `48px`。",
"attributes": [
{
"name": "label",
- "description": "标签文本"
+ "description": "设置选择框的标签文本，用于显示在选择框触发按钮上。",
+ "type": "string"
},
{
- "name": "onchange",
- "description": "选中变化后触发"
+ "name": "value",
+ "description": "设置选中的值，对应子项 `s-picker-item` 的 `value` 属性。",
+ "type": "string",
+ "defaultValue": ""
+ },
+ {
+ "name": "selectedIndex",
+ "description": "当前选中下标。",
+ "type": "number",
+ "defaultValue": "-1"
+ }
+ ],
+ "methods": [
+ {
+ "name": "show",
+ "description": "显示选择框。"
+ },
+ {
+ "name": "dismiss",
+ "description": "隐藏选择框。"
+ },
+ {
+ "name": "toggle",
+ "description": "切换选择框的显示与隐藏状态。"
}
],
"references": [
@@ -575,11 +607,15 @@
},
{
"name": "s-picker-item",
- "description": "**选择框项目 Picker Item**\n\n作为 `s-picker` 的子项使用。\n\n**属性:**\n\n- `selected` (`boolean`): 是否选中。",
+ "description": "**选择框项目 Picker Item**\n\n作为 `s-picker` 组件的子组件使用，用于定义每个选择项。每个 `s-picker-item` 需要设置 `value` 属性来代表其选中值。\n\n**属性:**\n\n- `value` (`string`): 项目的值，用于标识该项被选中时的返回值。\n- `selected` (`boolean`): 是否选中该项，默认为 `false`。\n\n**插槽:**\n- `start`: 项目内容开始位置的插槽\n- `end`: 项目内容结束位置的插槽",
"attributes": [
+ {
+ "name": "value",
+ "description": "项目的值，用于标识该项被选中时的返回值。"
+ },
{
"name": "selected",
- "description": "是否选中",
+ "description": "是否选中该项，默认为 `false`。",
"valueSet": "boolean"
}
],
@@ -753,7 +789,7 @@
},
{
"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- 无特定插槽。",
+ "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",
@@ -824,7 +860,7 @@
},
{
"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 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 \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`): 设置导轨模式，支持 `bottom` 和 `rail`。\n- `value` (`string`): 选中值，默认值为 `null`。\n- `options` _[只读]_ (`Item[]`): 子项目数组，默认值为 `[]`。\n- `selectedIndex` _[只读]_ (`number`): 当前选中下标，默认值为 `-1`。\n\n**事件:**\n\n- `change`: 选中变化后触发。\n\n**插槽:**\n\n- `start`: 开始插槽\n- `end`: 结束插槽",
"attributes": [
{
"name": "mode",
@@ -839,6 +875,10 @@
"description": "导轨模式"
}
]
+ },
+ {
+ "name": "value",
+ "description": "选中值"
}
],
"references": [
@@ -854,12 +894,17 @@
},
{
"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- `value` (`string`): 选中项的值。\n\n**插槽:**\n\n- `icon`: 图标\n- `text`: 文本\n- `badge`: 徽章\n\n**事件:**\n\n- `click`: 点击后触发。",
"attributes": [
{
"name": "selected",
"description": "是否选中，默认值为 `false`。",
"valueSet": "boolean"
+ },
+ {
+ "name": "value",
+ "description": "选中项的值。",
+ "valueSet": "string"
}
],
"references": [
@@ -869,7 +914,7 @@
},
{
"name": "源代码",
- "url": "https://github.com/apprat/sober/blob/main/src/navigation.ts"
+ "url": "https://github.com/apprat/sober/blob/main/src/navigation-item.ts"
}
]
},
@@ -953,7 +998,7 @@
},
{
"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```\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```\n\n**属性:**\n\n- `group` (`string`): 分组，值为 `start` 或 `end`\n- `show()` _[只读]_ (`Function`): 显示对话框\n- `dismiss()` _[只读]_ (`Function`): 隐藏对话框\n- `toggle()` _[只读]_ (`Function`): 切换抽屉\n\n**插槽:**\n- `trigger`: 触发器",
"attributes": [
{
"name": "group",
@@ -981,6 +1026,21 @@
}
]
},
+ {
+ "name": "s-popup-menu-item",
+ "description": "**弹出式菜单子项 Popup Menu Item**\n\n作为 Popup Menu 的子项使用。\n\n**插槽:**\n\n- `start`: 开始\n- `end`: 结束",
+ "attributes": [],
+ "references": [
+ {
+ "name": "文档",
+ "url": "https://soberjs.com/component/popup-menu"
+ },
+ {
+ "name": "源代码",
+ "url": "https://github.com/apprat/sober/blob/main/src/popup-menu.ts"
+ }
+ ]
+ },
{
"name": "s-bottom-sheet",
"description": "**底部面板 Bottom Sheet**\n\nBottom Sheet 组件用于在页面底部显示额外内容，通常作为其他组件的插槽使用。\n\n```html\n\n Bottom Sheet \n ...
\n\n```\n\n**插槽:**\n- `trigger`: 触发器",
@@ -1047,7 +1107,7 @@
},
{
"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```",
"attributes": [],
"references": [
{
@@ -1101,7 +1161,7 @@
},
{
"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\n```\n\n**插槽:**\n- `thead`: 表头\n- `tbody`: 表身\n- `tr`: 表格行\n- `th`: 表格头\n- `td`: 表格数据",
+ "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\n```\n\n**插槽:**\n- `thead`: 表头\n- `tbody`: 表身\n- `tr`: 表格行\n- `th`: 表格头\n- `td`: 表格数据",
"attributes": [],
"references": [
{
@@ -1113,6 +1173,66 @@
"url": "https://github.com/apprat/sober/blob/main/src/table.ts"
}
]
+ },
+ {
+ "name": "s-field",
+ "description": "**字段框 Field**\n\n这是一个容器组件，通常用于提供表单输入框的样式包装。它支持多个 CSS 变量和自定义槽位，特别适用于移动端界面。\n\n```html\n\n 请输入
\n View content here
\n\n```\n\n**属性:**\n\n- `focused` (`boolean`): 是否聚焦，默认值为 `false`\n- `labelFixed` (`boolean`): 固定Label，默认值为 `true`\n\n**插槽:**\n- `label`: Label 区域\n- `view`: 主视图区域\n\n**CSS 变量:**\n\n- `--field-border-radius`: 圆角 (默认: 4px)\n- `--field-border-width`: 边框宽度 (默认: `1px`)\n- `--field-border-color`: 边框颜色 (默认: `var(--s-color-outline, #777680)`)\n- `--field-padding`: 内边距 (默认: `16px`)\n- `--field-focused-border-width`: 聚焦时的边框宽度 (默认: `2px`)",
+ "attributes": [
+ {
+ "name": "focused",
+ "description": "是否聚焦",
+ "valueSet": "boolean"
+ },
+ {
+ "name": "labelFixed",
+ "description": "是否固定标签",
+ "valueSet": "boolean"
+ }
+ ],
+ "references": [
+ {
+ "name": "文档",
+ "url": "https://soberjs.com/component/field"
+ }
+ ]
+ },
+ {
+ "name": "s-menu",
+ "description": "**菜单 Menu**\n\n这是一个菜单容器组件，通常用于定义导航栏或侧边栏。支持多个 CSS 变量和自定义插槽，适用于桌面端和移动端界面。\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- `label`: 用于放置菜单标签的区域\n\n**CSS 变量:**\n\n- `--menu-bg-color`: 菜单背景色 (默认: `#1e1e1e`)\n- `--menu-item-color`: 菜单项文字颜色 (默认: `#ffffff`)\n- `--menu-item-hover-bg-color`: 菜单项悬停背景色 (默认: `#333`)\n- `--menu-icon-size`: 图标大小 (默认: `24px`)\n",
+ "attributes": [
+ {
+ "name": "checked",
+ "description": "是否选中菜单项",
+ "valueSet": "boolean"
+ }
+ ],
+ "references": [
+ {
+ "name": "文档",
+ "url": "https://soberjs.com/component/menu"
+ }
+ ]
+ },
+ {
+ "name": "s-menu-item",
+ "description": "**菜单子项 Menu Item**\n\n作为 Menu 的子项使用。\n\n**属性:**\n\n- `selected` (`boolean`): 菜单项是否选中，默认值为 `false`\n\n**插槽:**\n\n- `start`: 开始位置（用于放置图标）\n- `end`: 结束位置（用于放置图标）",
+ "attributes": [
+ {
+ "name": "selected",
+ "description": "是否选中菜单项，默认值为 `false`",
+ "valueSet": "boolean"
+ }
+ ],
+ "references": [
+ {
+ "name": "文档",
+ "url": "https://soberjs.com/component/popup-menu"
+ },
+ {
+ "name": "源代码",
+ "url": "https://github.com/apprat/sober/blob/main/src/popup-menu.ts"
+ }
+ ]
}
],
"valueSets": [
diff --git a/package-lock.json b/package-lock.json
index 38d7d0a..fe70141 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "soberjs-vscode",
- "version": "0.6.0",
+ "version": "0.7.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "soberjs-vscode",
- "version": "0.6.0",
+ "version": "0.7.0",
"license": "MIT",
"engines": {
"vscode": "^1.90.0"
diff --git a/package.json b/package.json
index bff8a7c..bd96695 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "soberjs-vscode",
"displayName": "Sober.js",
"description": "为 Sober.js 组件库提供自动完成、悬停提示、代码片段等功能",
- "version": "0.6.0",
+ "version": "0.7.0",
"publisher": "lingbopro",
"author": {
"name": "lingbopro",