v0.5.0

README.md

@@ -43,6 +43,7 @@
 - HTML 标签属性名称和枚举值
 - CSS 变量名和枚举值
 - 一点 HTML 代码片段
+- Material 图标 SVG 补全
 
 目前已支持 Sober.js 0.2.15 的所有组件和 CSS 变量（见下表）  
 
@@ -192,5 +193,6 @@
 - [x] 支持更多组件
 - [ ] 完善悬停提示
 - [x] 完成 CSS 变量名和枚举值补全
-- [ ] 增加 SVG 图标补全
+- [x] 增加 SVG 图标补全
+- [ ] 使 SVG 图标补全可以补全填充图标，不仅是线条图标
 

custom-data/components.html-data.json

@@ -157,7 +157,7 @@
       "attributes": [
         {
           "name": "size",
-          "description": "按钮大小。\n\n可选值为:\n- `medium`\n- `small`\n- `large`",
+          "description": "按钮大小。\n\n可选值为:\n- `medium`\n- `small`",
           "values": [
             {
               "name": "medium",
@@ -166,10 +166,6 @@
             {
               "name": "small",
               "description": "大小较小"
-            },
-            {
-              "name": "large",
-              "description": "大小较大"
             }
           ]
         },

docs/dev-guide.md

@@ -29,14 +29,10 @@
 
 见 [贡献指南](./../CONTRIBUTING.md)。
 
-<!-- 没做完呢，别动！ -->
-<!--
 
 ## 提示
 
 ### 生成 SVG 代码片段文件
-<details>
-<summary>点击展开</summary>
 
 Sober 图标库中有很多图标，手动编写代码片段非常费时，因此可以使用脚本来生成。
 
@@ -49,14 +45,55 @@ Sober 图标库中有很多图标，手动编写代码片段非常费时，因
     <summary>点击展开</summary>
 
     ```js
-    下个版本补充，别动这！！！
-    --- @lingbopro, 2024/7/12
+    async function getIcons() {
+        const header = `
+    // 此代码片段由脚本生成，包含了 Sober 图标库中的图标
+    // 如要获知更多信息，请查看开发指南(docs/dev-guide.md)`;
+        function wait(delay) {
+            return new Promise(function (resolve, reject) {
+                setTimeout(function () {
+                    resolve();
+                }, delay);
+            });
+        }
+        let elementSnippet = {};
+        let iconSnippet = {};
+        let contentEl = document.querySelector('.detail>pre');
+        let headlineEl = document.querySelector('s-dialog:has(.detail) > [slot="headline"]');
+        let iconsEl = document.querySelectorAll('.group .item');
+        for(const current of iconsEl) {
+            current.click();
+            let content = contentEl.innerText;
+            let name = headlineEl.innerText;
+            let casedName = name.toLowerCase().replaceAll(' ', '-');
+            let lines = content.split('\n');
+            let elementLines = ['<s-icon>'];
+            lines[1] = '\t' + lines[1].substr(2);
+            for(const line of lines) {
+                elementLines.push('\t' + line);
+            }
+            elementLines.push('</s-icon>');
+            let snippetDescription = `Sober Material 图标: ${name}`;
+            iconSnippet[`MD Icon: ${name}`] = {
+                prefix: [`mdi:${casedName}`, `svg:mdi-${casedName}`],
+                body: lines,
+                description: snippetDescription
+            };
+            elementSnippet[`Sober Icon: ${name}`] = {
+                prefix: [`s-icon:${casedName}`],
+                body: elementLines,
+                description: snippetDescription
+            };
+            await wait(2);
+        }
+        console.log('// 代码片段: <s-icon> 元素的 SVG 图标' + header + '\n\n' + JSON.stringify(elementSnippet));
+        console.log('// 代码片段: Sober.js 图标库图标的 SVG' + header + '\n\n' + JSON.stringify(iconSnippet));
+    }
+    getIcons();
     ```
     （脚本由 [@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) 中，并格式化它们
+4. 等待约 20-50 秒后，控制台会输出两段长文本，将第一段放入 [snippets/s-icon.code-snippets](./../snippets/s-icon.code-snippets) 中，第二段放入 [snippets/svg-icon.code-snippets](./../snippets/svg-icon.code-snippets) 中，并格式化它们
 
-</details>
--->

package.json

@@ -2,7 +2,7 @@
   "name": "soberjs-vscode",
   "displayName": "Sober.js",
   "description": "为 Sober.js 组件库提供自动完成、悬停提示、代码片段等功能",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "publisher": "lingbopro",
   "author": {
     "name": "lingbopro",
@@ -44,6 +44,14 @@
         "language": "html",
         "path": "./snippets/html.code-snippets"
       },
+      {
+        "language": "html",
+        "path": "./snippets/s-icon.code-snippets"
+      },
+      {
+        "language": "html",
+        "path": "./snippets/svg-icon.code-snippets"
+      },
       {
         "language": "javascript",
         "path": "./snippets/js-ts.code-snippets"