fix(style): sass

fix sass ISSUES CLOSED: #5
dext7r · Jul 8, 2022 · baad8e1 · baad8e1
1 parent c4163ad
commit baad8e1
Show file tree

Hide file tree

Showing 13 changed files with 793 additions and 293 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
   push:
     tags:
-      - 'v*'
+      - "v*"
 
 jobs:
   release:
@@ -17,7 +17,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16.x
-          registry-url: 'https://registry.npmjs.org'
+          registry-url: "https://registry.npmjs.org"
 
       - name: Setup
         run: npm i -g @antfu/ni pnpm

diff --git a/README.md b/README.md
@@ -84,12 +84,10 @@ export default {
 
 ### version
 
-| [vue-amis-sdk](https://www.npmjs.com/package/vue-amis-sdk)                                                               | [amis](https://www.npmjs.com/package/amis)                                                                              | [amis-editor](https://www.npmjs.com/package/amis-editor)                                                                              |
-|--------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
-| [![amis-editor](https://badgen.net/badge/vue-amis-sdk/1.10.0/blue)](https://www.npmjs.com/package/vue-amis-sdk/v/1.10.0) | [![amis](https://img.shields.io/badge/amis-1.10.0-green.svg)](https://www.npmjs.com/package/amis/v/1.10.0)              | [![amis-editor](https://badgen.net/badge/amis-editor/4.1.0-beta.28/blue)](https://www.npmjs.com/package/amis-editor/v/4.1.0-beta.28) |
-| [![amis-editor](https://badgen.net/badge/vue-amis-sdk/1.10.2/blue)](https://www.npmjs.com/package/vue-amis-sdk/v/1.10.2) | [![amis](https://img.shields.io/badge/amis-1.9.2-green.svg)](https://www.npmjs.com/package/amis/v/1.10.2)               | [![amis-editor](https://badgen.net/badge/amis-editor/4.1.0-beta.28/blue)](https://www.npmjs.com/package/amis-editor/v/4.1.0-beta.28) |
-| [![amis-editor](https://badgen.net/badge/vue-amis-sdk/1.10.3/blue)](https://www.npmjs.com/package/vue-amis-sdk/v/1.10.3) | [![amis](https://img.shields.io/badge/amis-1.9.1beta.11-green.svg)](https://www.npmjs.com/package/amis/v/1.9.1-beta.11) | [![amis-editor](https://badgen.net/badge/amis-editor/4.1.0-beta.24/blue)](https://www.npmjs.com/package/amis-editor/v/4.1.0-beta.24) |
-| [![amis-editor](https://badgen.net/badge/vue-amis-sdk/2.0.0-beta.1/blue)](https://www.npmjs.com/package/vue-amis-sdk/v/2.0.0-beta.1)   | [![amis](https://img.shields.io/badge/amis-2.0.0-green.svg)](https://www.npmjs.com/package/amis/v/2.0.0)                | [![amis-editor](https://badgen.net/badge/amis-editor/4.2.0-beta.3/blue)](https://www.npmjs.com/package/amis-editor/v/4.2.0-beta.3)         |
+| [vue-amis-sdk](https://www.npmjs.com/package/vue-amis-sdk)                                                                           | [amis](https://www.npmjs.com/package/amis)                                                                              | [amis-editor](https://www.npmjs.com/package/amis-editor)                                                                             |
+|--------------------------------------------------------------------------------------------------------------------------------------| ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| [![amis-editor](https://badgen.net/badge/vue-amis-sdk/1.10.0/blue)](https://www.npmjs.com/package/vue-amis-sdk/v/1.10.0)             | [![amis](https://img.shields.io/badge/amis-1.10.0-green.svg)](https://www.npmjs.com/package/amis/v/1.10.0)              | [![amis-editor](https://badgen.net/badge/amis-editor/4.1.0-beta.28/blue)](https://www.npmjs.com/package/amis-editor/v/4.1.0-beta.28) |
+| [![amis-editor](https://badgen.net/badge/vue-amis-sdk/2.0.0-beta.5/blue)](https://www.npmjs.com/package/vue-amis-sdk/v/2.0.0-beta.5) | [![amis](https://img.shields.io/badge/amis-2.0.0-green.svg)](https://www.npmjs.com/package/amis/v/2.0.0)                | [![amis-editor](https://badgen.net/badge/amis-editor/4.2.0-beta.3/blue)](https://www.npmjs.com/package/amis-editor/v/4.2.0-beta.3)   |
 
 ### repo
 

diff --git a/examples/App.vue b/examples/App.vue
@@ -1,16 +1,16 @@
 <template>
-  <div id='app'>
+  <div id="app">
     <div class="header"><i class="pc-preview" title="PC模式"></i></div>
     <vue-amis-sdk
       class="editor-widget"
-      id='editorName'
-      theme='cxd'
-      className='is-fixed'
-      :preview='isPreview'
-      :isMobile='isMobile'
-      @onChange='onChange'
-      :value='schema'
-      :showCustomRenderersPanel='showCustomRenderersPanel'
+      id="editorName"
+      theme="cxd"
+      className="is-fixed"
+      :preview="isPreview"
+      :isMobile="isMobile"
+      @onChange="onChange"
+      :value="schema"
+      :showCustomRenderersPanel="showCustomRenderersPanel"
     />
   </div>
 </template>
@@ -20,73 +20,73 @@ import "amis-editor/dist/style.css";
 // import "../node_modules/amis-ui/lib/helper.css";
 // import "../node_modules/amis-ui/lib/themes/antd.css";
 export default {
-  name: 'App',
+  name: "App",
   data() {
     return {
       isPreview: true,
       isMobile: false,
       showCustomRenderersPanel: true,
       schema: {
-        "type": "page",
-        "body": [
+        type: "page",
+        body: [
           {
-            "type": "input-text",
-            "label": "文本",
-            "name": "text",
-            "id": "u:41304a249687"
+            type: "input-text",
+            label: "文本",
+            name: "text",
+            id: "u:41304a249687",
           },
           {
-            "type": "nested-select",
-            "label": "嵌套下拉框",
-            "name": "nestedSelect",
-            "options": [
+            type: "nested-select",
+            label: "嵌套下拉框",
+            name: "nestedSelect",
+            options: [
               {
-                "label": "选项A",
-                "value": "A"
+                label: "选项A",
+                value: "A",
               },
               {
-                "label": "选项B",
-                "value": "B",
-                "children": [
+                label: "选项B",
+                value: "B",
+                children: [
                   {
-                    "label": "选项C",
-                    "value": "C"
+                    label: "选项C",
+                    value: "C",
                   },
                   {
-                    "label": "选项D",
-                    "value": "D"
-                  }
-                ]
-              }
+                    label: "选项D",
+                    value: "D",
+                  },
+                ],
+              },
             ],
-            "id": "u:b25bd22690e7"
+            id: "u:b25bd22690e7",
           },
           {
-            "type": "select",
-            "label": "选项",
-            "name": "select",
-            "options": [
+            type: "select",
+            label: "选项",
+            name: "select",
+            options: [
               {
-                "label": "选项A",
-                "value": "A"
+                label: "选项A",
+                value: "A",
               },
               {
-                "label": "选项B",
-                "value": "B"
-              }
+                label: "选项B",
+                value: "B",
+              },
             ],
-            "id": "u:b5bc1c1228bb"
-          }
-        ]
-      }
-    }
+            id: "u:b5bc1c1228bb",
+          },
+        ],
+      },
+    };
   },
   methods: {
     onChange(e) {
-      console.log(e)
-    }
-  }
-}
+      console.log(e);
+    },
+  },
+};
 </script>
 <style scoped>
 #app {
@@ -105,7 +105,7 @@ export default {
   align-items: center;
   background-color: #f5f5f5;
 }
-.editor-widget{
+.editor-widget {
   height: calc(100% - 50px);
 }
 </style>
diff --git a/examples/components/HelloWorld.vue b/examples/components/HelloWorld.vue
@@ -2,40 +2,89 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
     <p>
-      For a guide and recipes on how to configure / customize this project,<br>
+      For a guide and recipes on how to configure / customize this project,<br />
       check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
     </p>
     <h3>Installed CLI Plugins</h3>
     <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
     </ul>
     <h3>Essential Links</h3>
     <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
     </ul>
     <h3>Ecosystem</h3>
     <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+          >vue-devtools</a
+        >
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
+      </li>
     </ul>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'HelloWorld',
+  name: "HelloWorld",
   props: {
-    msg: String
-  }
-}
+    msg: String,
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-amis-sdk",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "private": false,
   "main": "sdk/vue-amis-sdk.umd.min.js",
   "browser": "sdk/vue-amis-sdk.umd.min.js",
@@ -38,7 +38,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@fortawesome/fontawesome-free": "^6.1.1",
     "amis": "2.0.0",
-    "amis-editor": "4.2.0-beta.3",
+    "amis-editor": "5.1.8",
     "amis-formula": "^2.0.0",
     "amis-ui": "^2.0.0",
     "axios": "^0.24.0",

diff --git a/packages/VueAmisSdk/src/VueAmisSdk.vue b/packages/VueAmisSdk/src/VueAmisSdk.vue
@@ -18,11 +18,12 @@
 </template>
 <script>
 // fortawesome
-import './style.scss';
-import '@fortawesome/fontawesome-free/css/all.css';
-import '@fortawesome/fontawesome-free/js/all'
-import {Editor, ShortcutKey} from "amis-editor";
-import {ReactInVue} from "vuera";
+import "./style.scss";
+import "@fortawesome/fontawesome-free/css/all.css";
+import "@fortawesome/fontawesome-free/js/all";
+import { Editor, ShortcutKey } from "amis-editor";
+import { ReactInVue } from "vuera";
+
 export default {
   name: "VueAmisSdk",
   components: {
@@ -53,8 +54,7 @@ export default {
     },
     value: {
       type: Object,
-      default: () => {
-      },
+      default: () => {},
     },
     plugins: {
       type: Array,
@@ -81,22 +81,37 @@ export default {
       this.$emit("change", e);
     },
     onSave(e) {
-      console.log(e)
+      console.log(e);
       this.$emit("onSave", e);
     },
     onPreview(e) {
-      console.log(e)
+      console.log(e);
       this.$emit("onPreview", e);
     },
   },
 };
 </script>
-<style lang="scss">
-.editor-right-panel .editorPanel-tabs .editorPanel-tabs-header > li > a .editor-tab-icon > svg {
+<style>
+/* 解决 amis-editor icon 图标过大 */
+.editor-right-panel
+  .editorPanel-tabs
+  .editorPanel-tabs-header
+  > li
+  > a
+  .editor-tab-icon
+  > svg {
   font-size: 16px !important;
   width: 16px;
   height: auto;
   margin-bottom: 0 !important;
   color: #151b26;
 }
+
+/*
+https://github.com/baidu/amis/pull/4813/files
+解决 select 含有 Placeholder
+*/
+.hidden {
+  display: none;
+}
 </style>