Skip to content

Commit

Permalink
v0.4.0
Browse files Browse the repository at this point in the history
## 变化
- 增加了组件的 CSS 变量补全
- 增加了 CSS 全局变量(颜色变量)补全
- 将 `custom-data/soberjs.html-data.json` 重命名为
[`custom-data/components.html-data.json`](./custom-data/components.html-data.json)
- 增加了 [开发指南文档](./docs/dev-guide.md)

**Full Changelog**:
https://github.com/lingbopro/soberjs-vscode/blob/dev/CHANGELOG.md
lingbopro authored Jul 12, 2024
1 parent c988ad8 commit 586ace9
Showing 9 changed files with 871 additions and 17 deletions.
4 changes: 3 additions & 1 deletion .vscodeignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.github/**
.vscode/**
.vscode-test/**
out/**
docs/**
.gitignore
.gitattributes
out/**
CONTRIBUTING.md
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# 版本记录

## v0.4.0
- 增加了组件的 CSS 变量补全
- 增加了 CSS 全局变量(颜色变量)补全
-`custom-data/soberjs.html-data.json` 重命名为 [`custom-data/components.html-data.json`](https://github.com/lingbopro/soberjs-vscode/blob/master/custom-data/components.html-data.json)
- 增加了 [开发指南文档](https://github.com/lingbopro/soberjs-vscode/blob/master/docs/dev-guide.md)

## v0.3.0

- 优化了组件的悬停提示
12 changes: 12 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# 贡献指南

欢迎您的贡献!请遵循以下指南:

Fork 存储库。
为您的功能或 bug 修复创建一个新分支。
为您的更改编写代码。
使用版本号(或大致内容)作为标题提交您的更改。
将您的分支推送到您的 fork。
向主存储库提交拉取请求 **(`dev` 分支)**

另外,您可以参阅 [开发指南](./docs/dev-guide.md)
99 changes: 94 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -4,7 +4,8 @@
<img src="https://img.shields.io/badge/GitHub-black?style=for-the-badge&logo=github" alt="GitHub"/>
</a>
<a href="https://marketplace.visualstudio.com/items?itemName=lingbopro.soberjs-vscode" target="_blank">
<img src="https://img.shields.io/badge/Visual%20Studio%20Marketplace-blue?style=for-the-badge&logo=visualstudiocode" alt="GitHub"/>
<!-- Simpleicons 的 Microsoft 图标全寄了,只能用 SVG 凑合了 -->
<img src="https://img.shields.io/badge/Visual%20Studio%20Marketplace-blue?style=for-the-badge&logo=data%3Aimage%2Fsvg%2Bxml%3Bcharset%3Dutf-8%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNOTQuMTQ1LjM0OGE4IDggMCAwIDAtLjU2My4wNzIgOCA4IDAgMCAwLS45MjguMDI3IDggOCAwIDAgMC0uOTgyLjIxNSA4IDggMCAwIDAtLjU1My4wNzIgOCA4IDAgMCAwLS44MjIuMzg3IDggOCAwIDAgMC0uNDg2LjIyOUE4IDggMCAwIDAgODggMi42NjhMNDUuNDg2IDQ5LjY3NGwtMjQuODItMjAuMzQtMi4xNzItMS44NjVhNS4zMzMgNS4zMzMgMCAwIDAtLjgyNi0uNDYzIDUuMzMzIDUuMzMzIDAgMCAwLS41MzUtLjMgNS4zMzMgNS4zMzMgMCAwIDAtLjYwNC0uMjI3IDUuMzMzIDUuMzMzIDAgMCAwLS42NDQtLjE1IDUuMzMzIDUuMzMzIDAgMCAwLS41MDQtLjAxNyA1LjMzMyA1LjMzMyAwIDAgMC0uNTEtLjA3NCA1LjMzMyA1LjMzMyAwIDAgMC0uMjY2LjA2IDUuMzMzIDUuMzMzIDAgMCAwLS4yMTQtLjAwMyA1LjMzMyA1LjMzMyAwIDAgMC0uMjI3LjA2IDUuMzMzIDUuMzMzIDAgMCAwLS40ODQuMDA2IDMuNCAzLjQgMCAwIDAtLjcwNy4yNGwtOS42OTQgNC4wNjdhNS4zMzMgNS4zMzMgMCAwIDAtMS40NjYuOTUgNS4zMzMgNS4zMzMgMCAwIDAtLjIxNS4xNzcgNS4zMzMgNS4zMzMgMCAwIDAtLjIzLjMxMiA1LjMzMyA1LjMzMyAwIDAgMC0uNjQuODggNS4zMzMgNS4zMzMgMCAwIDAtLjI2Ny40NzYgNS4zMzMgNS4zMzMgMCAwIDAtLjA5LjI3NSA1LjMzMyA1LjMzMyAwIDAgMC0uMjMyLjkwOCA1LjMzMyA1LjMzMyAwIDAgMC0uMTM5LjUxNnY1Ny42OGE1LjMzMyA1LjMzMyAwIDAgMCAuMTM5LjUxMiA1LjMzMyA1LjMzMyAwIDAgMCAuMjMyLjkxNCA1LjMzMyA1LjMzMyAwIDAgMCAuMDkuMjcxIDUuMzMzIDUuMzMzIDAgMCAwIC4yNjguNDc3IDUuMzMzIDUuMzMzIDAgMCAwIC42MzguODc5IDUuMzMzIDUuMzMzIDAgMCAwIC4yMy4zMTIgNS4zMzMgNS4zMzMgMCAwIDAgLjIxNi4xNzggNS4zMzMgNS4zMzMgMCAwIDAgMS40NjYuOTQ5bDkuNjk0IDQuMDY2YTUuMzMzIDUuMzMzIDAgMCAwIDEuNzE2LjM3IDUuMzMzIDUuMzMzIDAgMCAwIC41MS0uMDEgNS4zMzMgNS4zMzMgMCAwIDAgMS4yNzItLjE5OCA1LjMzMyA1LjMzMyAwIDAgMCAuNTEtLjE1NCA1LjMzMyA1LjMzMyAwIDAgMCAxLjUxMy0uODczbDIuMTcyLTEuODY3IDI0LjgyLTIwLjM0TDg4IDEyNS4zMzRhOCA4IDAgMCAwIDEuOTAyIDEuMzg3IDggOCAwIDAgMCAuNjA0LjIzIDggOCAwIDAgMCAuMDA2LjAwMiA4IDggMCAwIDAgMS4zNDIuNTE2IDggOCAwIDAgMCAuMjQyLjAxMyA4IDggMCAwIDAgMS41NTguMDg4IDggOCAwIDAgMCAuOTkuMDE0IDggOCAwIDAgMCAyLjQ1LS43MDNsMjYuMzczLTEyLjY4YTggOCAwIDAgMCAuNTcyLS4zMDYgOCA4IDAgMCAwIC4xNy0uMTA2IDggOCAwIDAgMCAuMzgzLS4yNSA4IDggMCAwIDAgLjE4MS0uMTM1IDggOCAwIDAgMCAuMzMtLjI1OCA4IDggMCAwIDAgLjIwNC0uMTczIDggOCAwIDAgMCAuMjc3LS4yNiA4IDggMCAwIDAgLjE5LS4xOSA4IDggMCAwIDAgLjI4My0uMzE0IDggOCAwIDAgMCAuMTQ0LS4xNjYgOCA4IDAgMCAwIC4yNjYtLjM1MiA4IDggMCAwIDAgLjE0Mi0uMTkzIDggOCAwIDAgMCAuMzMtLjUzIDggOCAwIDAgMCAuMDktLjE3IDggOCAwIDAgMCAuMi0uMzg2IDggOCAwIDAgMCAuMTEzLS4yNTYgOCA4IDAgMCAwIC4xNTItLjM3OSA4IDggMCAwIDAgLjA3Ni0uMjE1IDggOCAwIDAgMCAuMTE2LS4zNjcgOCA4IDAgMCAwIC4wODItLjMwNCA4IDggMCAwIDAgLjA3Mi0uMzQyIDggOCAwIDAgMCAuMDUzLS4yNzQgOCA4IDAgMCAwIC4wNTYtLjQzMSA4IDggMCAwIDAgLjAyMi0uMTggOCA4IDAgMCAwIC4wMDItLjAyMyA4IDggMCAwIDAgLjAyNy0uNjUzVjIxLjAyN2E4IDggMCAwIDAgMC0uMDExIDggOCAwIDAgMC0uMDI3LS42NTUgOCA4IDAgMCAwLS4wMTgtLjE1OCA4IDggMCAwIDAtLjA2Ni0uNTA4IDggOCAwIDAgMC0uMDM0LS4xNyA4IDggMCAwIDAtLjA5NS0uNDQzIDggOCAwIDAgMC0uMDczLS4yNjggOCA4IDAgMCAwLS4xMDMtLjMzIDggOCAwIDAgMC0uMTAyLS4yOTUgOCA4IDAgMCAwLS4xNDItLjM0NSA4IDggMCAwIDAtLjEtLjIzMyA4IDggMCAwIDAtLjIwOS0uNDA0IDggOCAwIDAgMC0uMTAzLS4xOTUgOCA4IDAgMCAwLS4zMzItLjUyOCA4IDggMCAwIDAtLjEwNi0uMTQgOCA4IDAgMCAwLS4yNzctLjM3IDggOCAwIDAgMC0uMTg4LS4yMTYgOCA4IDAgMCAwLS4yNDYtLjI3NCA4IDggMCAwIDAtLjE5My0uMTkzIDggOCAwIDAgMC0uMjgtLjI2MiA4IDggMCAwIDAtLjIwMi0uMTc0IDggOCAwIDAgMC0uMzMtLjI1NyA4IDggMCAwIDAtLjE4Mi0uMTM1IDggOCAwIDAgMC0uMzgzLS4yNSA4IDggMCAwIDAtLjE3LS4xMDYgOCA4IDAgMCAwLS41NzItLjMwNkw5Ny4wOTQgMS4xMkE4IDggMCAwIDAgOTQuNzUuNDE2YTggOCAwIDAgMC0uMzQyLjAwMiA4IDggMCAwIDAtLjI2My0uMDd6TTk2IDM2LjkwOHY1NC4xODZMNjIuOTQ3IDY0LjAwMiA5NiAzNi45MDh6bS04MCA4LjgyIDE2LjUyNyAxOC4yNzRMMTYgODIuMjc1VjQ1LjczeiIvPjwvc3ZnPg%3D%3D" alt="GitHub"/>
</a>
</p>
<p>
@@ -17,7 +18,6 @@
<a href="https://marketplace.visualstudio.com/items?itemName=lingbopro.soberjs-vscode" target="_blank">
<img src="https://img.shields.io/visual-studio-marketplace/i/lingbopro.soberjs-vscode?style=for-the-badge&logo=visualstudiocode&label=Installs" alt="Visual Studio Marketplace Installs" />
<img src="https://img.shields.io/visual-studio-marketplace/r/lingbopro.soberjs-vscode?style=for-the-badge&logo=visualstudiocode&label=Rating" alt="Visual Studio Marketplace Rating" />
<img src="https://img.shields.io/visual-studio-marketplace/v/lingbopro.soberjs-vscode?style=for-the-badge&logo=visualstudiocode&label=Version" alt="Visual Studio Marketplace Version" />
</a>
</p>

@@ -41,10 +41,10 @@

- HTML 标签名
- HTML 标签属性名称和枚举值
- _~~CSS 变量名和枚举值(尚未完成)~~_
- CSS 变量名和枚举值
- 一点 HTML 代码片段

目前已支持 Sober.js 0.2.15 的所有组件(见下表)
目前已支持 Sober.js 0.2.15 的所有组件和 CSS 变量(见下表)

<details>
<summary>支持的组件(点击展开)</summary>
@@ -89,6 +89,95 @@
- [x] 表格 Table

</details>
<details>
<summary>支持的 CSS 变量</summary>

- [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] 全局变量

<details>
<summary>点击展开(共 68 个)</summary>

- [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`

</details>
</details>

### 功能展示

@@ -102,6 +191,6 @@

- [x] 支持更多组件
- [ ] 完善悬停提示
- [ ] 完成 CSS 变量名和枚举值补全
- [x] 完成 CSS 变量名和枚举值补全
- [ ] 增加 SVG 图标补全

99 changes: 99 additions & 0 deletions custom-data/components.css-data.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
{
"version": 1.1,
"properties": [
{
"name": "--ripple-color",
"description": {
"kind": "markdown",
"value": "波纹颜色\n\n**组件:**\n\n- `<s-ripple>` 波纹 Ripple"
},
"references": [
{
"name": "文档: 波纹 Ripple",
"url": "https://soberjs.com/component/ripple"
}
]
},
{
"name": "--ripple-opacity",
"description": {
"kind": "markdown",
"value": "波纹不透明度\n\n**组件:**\n\n- `<s-ripple>` 波纹 Ripple"
},
"references": [
{
"name": "文档: 波纹 Ripple",
"url": "https://soberjs.com/component/ripple"
}
]
},
{
"name": "--border-radius",
"description": {
"kind": "markdown",
"value": "边框圆角\n\n**组件:**\n\n- `<s-text-field>` 文本框 Text Field\n- `<s-picker>` 选择框 Picker"
},
"references": [
{
"name": "文档: 文本框 Text Field",
"url": "https://soberjs.com/component/text-field"
},
{
"name": "文档: 选择框 Picker",
"url": "https://soberjs.com/component/picker"
}
]
},
{
"name": "--border-width",
"description": {
"kind": "markdown",
"value": "边框宽度\n\n**组件:**\n\n- `<s-text-field>` 文本框 Text Field\n- `<s-picker>` 选择框 Picker"
},
"references": [
{
"name": "文档: 文本框 Text Field",
"url": "https://soberjs.com/component/text-field"
},
{
"name": "文档: 选择框 Picker",
"url": "https://soberjs.com/component/picker"
}
]
},
{
"name": "--border-color",
"description": {
"kind": "markdown",
"value": "边框颜色\n\n**组件:**\n\n- `<s-text-field>` 文本框 Text Field\n- `<s-picker>` 选择框 Picker"
},
"references": [
{
"name": "文档: 文本框 Text Field",
"url": "https://soberjs.com/component/text-field"
},
{
"name": "文档: 选择框 Picker",
"url": "https://soberjs.com/component/picker"
}
]
},
{
"name": "--padding",
"description": {
"kind": "markdown",
"value": "边框内边距\n\n**组件:**\n\n- `<s-text-field>` 文本框 Text Field\n- `<s-picker>` 选择框 Picker"
},
"references": [
{
"name": "文档: 文本框 Text Field",
"url": "https://soberjs.com/component/text-field"
},
{
"name": "文档: 选择框 Picker",
"url": "https://soberjs.com/component/picker"
}
]
}
]
}
File renamed without changes.
584 changes: 584 additions & 0 deletions custom-data/global.css-data.json

Large diffs are not rendered by default.

62 changes: 62 additions & 0 deletions docs/dev-guide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
# 开发指南

## 目录

- [开发指南](#开发指南)
- [目录](#目录)
- [项目结构](#项目结构)

## 项目结构

- [CHANGELOG.md](./../CHANGELOG.md): 存储版本更新记录
- [CONTRIBUTING.md](./../CONTRIBUTING.md): 包含贡献指南
- [custom-data/](./../custom-data/): 包含自定义 HTML 和 CSS 数据
- [components.css-data.json](./../custom-data/components.css-data.json): 包含组件的 CSS 变量数据
- [components.html-data.json](./../custom-data/components.html-data.json): 包含组件标签和属性数据
- [global.css-data.json](./../custom-data/global.css-data.json): 包含全局 CSS 变量数据
- [docs/](./../docs/): 包含文档
- [dev-guide.md](./../docs/dev-guide.md): 开发指南(此文件)
- [icon.png](./../icon.png): 此扩展的图标
- [LICENSE](./../LICENSE): 包含开源许可文件
- [package.json](./../package.json): 包含项目元数据
- [README.md](./../README.md): 自述文件
- [snippets/](./../snippets/): 包含代码片段文件
- [html.code-snippets](./../snippets/html.code-snippets): 包含 HTML 代码片段
- [js-ts.code-snippets](./../snippets/js-ts.code-snippets): 包含 JavaScript/Typescript 代码片段
- [SUPPORT.md](./../SUPPORT.md): 包含支持信息

## 贡献

[贡献指南](./../CONTRIBUTING.md)

<!-- 没做完呢,别动! -->
<!--
## 提示
### 生成 SVG 代码片段文件
<details>
<summary>点击展开</summary>
Sober 图标库中有很多图标,手动编写代码片段非常费时,因此可以使用脚本来生成。
1. 打开 [Sober.js 图标库](https://soberjs.com/resource/icon)
2. 打开 DevTools,并切换到 Console (控制台) 选项卡
3. 粘贴以下代码并运行
**(运行时不要操作网页!!!)**
<details>
<summary>点击展开</summary>
```js
下个版本补充,别动这!!!
--- @lingbopro, 2024/7/12
```
(脚本由 [@lingbopro](https://github.com/lingbopro) 制作)
</details>
4. 等待 15-30 秒后,控制台会输出两段长文本,将第一段放入 [snippets/s-icon.code-snippets](./../snippets/s-icon.code-snippets) 中,第二段放入 [snippets/svg-icon.code-snippets](./../snippets/svg-icon.code-snippets) 中,并格式化它们
</details>
-->
22 changes: 11 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
"name": "soberjs-vscode",
"displayName": "Sober.js",
"description": "为 Sober.js 组件库提供自动完成、悬停提示、代码片段等功能",
"version": "0.3.0",
"version": "0.4.0",
"publisher": "lingbopro",
"author": {
"name": "lingbopro",
@@ -11,20 +11,19 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/lingbopro/soberjs-vscode.git"
"url": "https://github.com/lingbopro/soberjs-vscode"
},
"icon": "icon.png",
"keywords": [
"vscode",
"vscode-extension",
"sober",
"soberjs",
"sober.js",
"components",
"front-end",
"material",
"material design",
"material you",
"components"
"material",
"sober.js",
"sober",
"soberjs",
"web components"
],
"license": "MIT",
"bugs": {
@@ -56,12 +55,13 @@
],
"html": {
"customData": [
"./custom-data/soberjs.html-data.json"
"./custom-data/components.html-data.json"
]
},
"css": {
"customData": [
"./custom-data/soberjs.css-data.json"
"./custom-data/components.css-data.json",
"./custom-data/global.css-data.json"
]
}
}

0 comments on commit 586ace9

Please sign in to comment.