@mlightcad/ui-components 0.0.10 → 0.0.11

package/README.md

@@ -115,7 +115,7 @@ interface Props {
 }
 ```
 
-Buttons in toolbar are described by the following data.
+Buttons in toolbar are described by the following data. Property `icon` can be icon provided by Element Plus or icon imported through `vite-svg-loader`.
 
 ```javascript
 /**
@@ -123,9 +123,9 @@ Buttons in toolbar are described by the following data.
  */
 export interface MlButtonData {
   /**
-   * Icon represented by one SVG string
+   * Icon represented by one vue component
    */
-  icon: string
+  icon: Component 
   /**
    * Text shown below icon
    */
@@ -141,32 +141,30 @@ export interface MlButtonData {
 }
 ```
 
-Usage of this component is as follows. To simplify example code, we use the same SVG icon for all button in toolbar.
+Usage of this component is as follows. 
 
 ```javascript
 <script setup lang="ts">
 import '@mlightcad/ui-components/dist/style.css'
 import { MlButtonData, MlToolbar } from '@mlightcad/ui-components'
 import { reactive } from 'vue'
-
-const svg =
-  '<svg data-v-d0da8fdb="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357.12 357.12 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a351.616 351.616 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357.12 357.12 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088-24.512 11.968a294.113 294.113 0 0 0-34.816 20.096l-22.656 15.36-116.224-25.088-65.28 113.152 79.68 88.192-1.92 27.136a293.12 293.12 0 0 0 0 40.192l1.92 27.136-79.808 88.192 65.344 113.152 116.224-25.024 22.656 15.296a294.113 294.113 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152 24.448-11.904a288.282 288.282 0 0 0 34.752-20.096l22.592-15.296 116.288 25.024 65.28-113.152-79.744-88.192 1.92-27.136a293.12 293.12 0 0 0 0-40.256l-1.92-27.136 79.808-88.128-65.344-113.152-116.288 24.96-22.592-15.232a287.616 287.616 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384m0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256"></path></svg>'
+import { Delete, Edit, Search } from '@element-plus/icons-vue'
 
 const data = reactive<MlButtonData[]>([
   {
-    icon: svg,
+    icon: Edit,
     text: 'Edit',
     command: 'edit',
     description: 'This is description for edit button'
   },
   {
-    icon: svg,
+    icon: Delete,
     text: 'Delete',
     command: 'delete',
     description: 'This is description for delete button'
   },
   {
-    icon: svg,
+    icon: Search,
     text: 'Search',
     command: 'search',
     description: 'This is description for search button'
@@ -180,7 +178,7 @@ const handleCommand = (command: string) => {
 
 <template>
   <div>
-    <ml-toolbar :items="data1" layout="vertical" @click="handleCommand"/>
+    <ml-toolbar :items="data" layout="vertical" @click="handleCommand"/>
   </div>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlightcad/ui-components",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "One common UI component library based on Element Plus",
   "license": "MIT",
   "author": "MLight Lee <mlight.lee@outlook.com>",

package/src/components/{MlToolbar.vue → MlToolBar.vue}

@@ -13,8 +13,9 @@
         @click="handleCommand(item.command)"
       >
         <div>
-          <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
-          <el-icon :size="buttonIconSize" v-html="item.icon" />
+          <el-icon :size="buttonIconSize">
+            <component :is="item.icon" />
+          </el-icon>
           <div v-if="isShowButtonText" class="ml-toolbar-button-text">
             {{ item.text }}
           </div>
@@ -25,16 +26,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { Component, computed } from 'vue'
 
 /**
  * Data to descibe button appearance
  */
 export interface MlButtonData {
   /**
-   * Icon represented by one SVG string
+   * Icon represented by one vue component
    */
-  icon: string
+  icon: Component 
   /**
    * Text shown below icon
    */

package/src/index.ts

@@ -2,18 +2,18 @@ import MlCollapse from './components/MlCollapse.vue'
 import MlDropdown from './components/MlDropdown.vue'
 import MlLanguage from './components/MlLanguage.vue'
 import MlStatusBar from './components/MlStatusBar.vue'
-import MlToolbar from './components/MlToolbar.vue'
+import MlToolBar from './components/MlToolBar.vue'
 import MlToolPalette from './components/MlToolPalette.vue'
 export {
   MlCollapse,
   MlDropdown,
   MlLanguage,
   MlStatusBar,
-  MlToolbar,
+  MlToolBar,
   MlToolPalette
 }
 export type { MlDropdownMenuItem } from './components/MlDropdown.vue'
-export type { MlButtonData } from './components/MlToolbar.vue'
+export type { MlButtonData } from './components/MlToolBar.vue'
 
 // Optionally, export them as a plugin for Vue
 export default {
@@ -23,7 +23,7 @@ export default {
     app.component('MlDropdown', MlDropdown)
     app.component('MlLanguage', MlLanguage)
     app.component('MlStatusBar', MlStatusBar)
-    app.component('MlToolbar', MlToolbar)
+    app.component('MlToolbar', MlToolBar)
     app.component('MlToolPalette', MlToolPalette)
   }
 }