From 0a080cf662ba737fa2fb18ec93cd2811ae56523c Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Fri, 17 Sep 2021 19:41:59 +0800
Subject: [PATCH] refactor: use raw-loader to import template, update directive
 usage in demo

---
 common/play/index.js                          |  66 +++++++
 common/play/templates/.prettierrc.raw         |  11 ++
 common/play/templates/App.raw.vue             |  21 +++
 common/play/templates/index.raw.html          |  12 ++
 common/play/templates/landing.raw.html        |  33 ++++
 common/play/templates/main.raw.js             |  11 ++
 common/play/templates/package.raw             |   7 +
 components/OneDemo.vue                        |   7 +-
 components/play.js                            | 161 ------------------
 nuxt.config.js                                |   6 +-
 one/docs/demo/directives/drag/axis.vue        |   2 +-
 one/docs/demo/directives/drag/base.vue        |   2 +-
 one/docs/demo/directives/drag/containment.vue |   2 +-
 one/docs/demo/directives/drag/sort-x.vue      |   2 +-
 one/docs/demo/directives/drag/sort-y.vue      |   2 +-
 one/docs/demo/directives/drag/targets.vue     |   2 +-
 one/docs/demo/directives/nudge.vue            |   2 +-
 one/docs/demo/directives/resize.vue           |   3 +-
 one/docs/demo/directives/tooltip.vue          |   3 +-
 one/docs/demo/overlay/position.vue            |   3 +-
 one/docs/demo/overlay/relative-base.vue       |   3 +-
 package-lock.json                             |  75 ++++++--
 package.json                                  |   9 +-
 23 files changed, 241 insertions(+), 204 deletions(-)
 create mode 100644 common/play/index.js
 create mode 100644 common/play/templates/.prettierrc.raw
 create mode 100644 common/play/templates/App.raw.vue
 create mode 100644 common/play/templates/index.raw.html
 create mode 100644 common/play/templates/landing.raw.html
 create mode 100644 common/play/templates/main.raw.js
 create mode 100644 common/play/templates/package.raw
 delete mode 100644 components/play.js

diff --git a/common/play/index.js b/common/play/index.js
new file mode 100644
index 0000000..a536ea3
--- /dev/null
+++ b/common/play/index.js
@@ -0,0 +1,66 @@
+import { loading } from 'dls-graphics'
+/* eslint-disable import/no-webpack-loader-syntax */
+import meta from '!!raw-loader!./templates/package.raw'
+import prettier from '!!raw-loader!./templates/.prettierrc.raw'
+import index from '!!raw-loader!./templates/index.raw.html'
+import landing from '!!raw-loader!./templates/landing.raw.html'
+import main from '!!raw-loader!./templates/main.raw.js'
+import app from '!!raw-loader!./templates/App.raw.vue'
+/* eslint-enable import/no-webpack-loader-syntax */
+
+const API_CSB = 'https://codesandbox.io/api/v1/sandboxes/define'
+
+export function createCodeSandbox (sfc, { locale }) {
+  const win = window.open()
+  win.document.write(landing.replace('{{loading}}', genLoading()))
+  fetch(`${API_CSB}?json=1`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json'
+    },
+    body: JSON.stringify({
+      files: {
+        ...getTemplateFiles({ locale }),
+        'src/Demo.vue': {
+          content: sfc
+        }
+      }
+    })
+  })
+    .then(res => res.json())
+    .then(data => {
+      win.location = `https://codesandbox.io/s/${data.sandbox_id}?file=/src/Demo.vue`
+    })
+}
+
+function getTemplateFiles ({ locale }) {
+  return {
+    'package.json': {
+      content: meta
+    },
+    '.prettierrc': {
+      content: prettier
+    },
+    'public/index.html': {
+      content: index
+    },
+    'src/main.js': {
+      content: main.replace('{{locale}}', locale)
+    },
+    'src/App.vue': {
+      content: app
+    }
+  }
+}
+
+function genLoading () {
+  const { contents, attrs } = loading
+  const attrsStr = Object.entries({
+    ...attrs,
+    class: `loading ${attrs.class}`
+  })
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ')
+  return `<svg ${attrsStr}>${contents}</svg>`
+}
diff --git a/common/play/templates/.prettierrc.raw b/common/play/templates/.prettierrc.raw
new file mode 100644
index 0000000..e2142eb
--- /dev/null
+++ b/common/play/templates/.prettierrc.raw
@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
diff --git a/common/play/templates/App.raw.vue b/common/play/templates/App.raw.vue
new file mode 100644
index 0000000..70b71d5
--- /dev/null
+++ b/common/play/templates/App.raw.vue
@@ -0,0 +1,21 @@
+<template>
+<main>
+  <demo/>
+</main>
+</template>
+
+<script>
+import Demo from './Demo'
+
+export default {
+  components: {
+    Demo
+  }
+}
+</script>
+
+<style scoped>
+main {
+  padding: 24px;
+}
+</style>
diff --git a/common/play/templates/index.raw.html b/common/play/templates/index.raw.html
new file mode 100644
index 0000000..65413b2
--- /dev/null
+++ b/common/play/templates/index.raw.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>VEUI Playground</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/common/play/templates/landing.raw.html b/common/play/templates/landing.raw.html
new file mode 100644
index 0000000..f491baf
--- /dev/null
+++ b/common/play/templates/landing.raw.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>VEUI Playground</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      margin: 0;
+      background-color: #040404;
+    }
+    .loading {
+      position: absolute;
+      top: 38.4%;
+      left: 50%;
+      transform: translate(-50%, -38.4%);
+      height: 48px;
+      font-weight: 400;
+      color: #fff;
+    }
+  </style>
+</head>
+<body>
+  {{loading}}
+</body>
+</html>
diff --git a/common/play/templates/main.raw.js b/common/play/templates/main.raw.js
new file mode 100644
index 0000000..11f2ffb
--- /dev/null
+++ b/common/play/templates/main.raw.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App.vue'
+import 'veui-theme-dls/dist/dls.esm'
+import 'veui-theme-dls-icons/dist/icons.esm'
+import 'veui/dist/locale.{{locale}}.esm'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: (h) => h(App)
+}).$mount('#app')
diff --git a/common/play/templates/package.raw b/common/play/templates/package.raw
new file mode 100644
index 0000000..0200c61
--- /dev/null
+++ b/common/play/templates/package.raw
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "veui": "2.1.2",
+    "veui-theme-dls": "2.1.2",
+    "vue": "2.6.14"
+  }
+}
diff --git a/components/OneDemo.vue b/components/OneDemo.vue
index 9b059d9..27fa578 100644
--- a/components/OneDemo.vue
+++ b/components/OneDemo.vue
@@ -57,7 +57,8 @@ import { Button, Icon } from 'veui'
 import tooltip from 'veui/directives/tooltip'
 import i18n from 'veui/mixins/i18n'
 import { BrowserWindow } from 'vue-windows'
-import { createCodeSandbox } from './play'
+import { getLocale } from '../common/i18n'
+import { createCodeSandbox } from '../common/play'
 
 export default {
   name: 'one-demo',
@@ -98,14 +99,14 @@ export default {
   },
   methods: {
     play () {
-      createCodeSandbox(preprocess(this.$refs.source.textContent))
+      let locale = getLocale(this.$route.path)
+      createCodeSandbox(preprocess(this.$refs.source.textContent), { locale })
     }
   }
 }
 
 function preprocess (code) {
   return code.replace(/from 'veui'/g, `from 'veui/dist/veui.esm'`)
-    .replace(/(?:import 'veui-theme-dls-icons[^']+'\n)+/g, `import 'veui-theme-dls-icons/dist/icons.esm'\n`)
 }
 
 Icon.register({
diff --git a/components/play.js b/components/play.js
deleted file mode 100644
index 7fe9d7e..0000000
--- a/components/play.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import { loading } from 'dls-graphics'
-
-const API_CSB = 'https://codesandbox.io/api/v1/sandboxes/define'
-
-export function createCodeSandbox (sfc) {
-  const win = window.open()
-  win.document.write(landing)
-  fetch(`${API_CSB}?json=1`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Accept: 'application/json'
-    },
-    body: JSON.stringify({
-      files: {
-        ...templateFiles,
-        'src/Demo.vue': {
-          content: sfc
-        }
-      }
-    })
-  })
-    .then(res => res.json())
-    .then(data => {
-      win.location = `https://codesandbox.io/s/${data.sandbox_id}?file=/src/Demo.vue`
-    })
-}
-
-const meta = `{
-  "dependencies": {
-    "veui": "2.1.2",
-    "veui-theme-dls": "2.1.2",
-    "vue": "2.6.14"
-  }
-}
-`
-
-const prettier = `{
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "fluid": false
-}
-`
-
-const index = `<!DOCTYPE html>
-<html lang="zh-Hans">
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <title>VEUI Playground</title>
-</head>
-<body>
-  <div id="app"></div>
-</body>
-</html>
-`
-
-const main = `import Vue from 'vue'
-import App from './App.vue'
-import 'veui-theme-dls/dist/dls.esm'
-
-Vue.config.productionTip = false
-
-new Vue({
-  render: (h) => h(App)
-}).$mount('#app')
-`
-
-const app = `<template>
-<main>
-  <demo/>
-</main>
-</template>
-
-<script>
-import Demo from './Demo'
-
-export default {
-  components: {
-    Demo
-  }
-}
-</script>
-
-<style scoped>
-main {
-  padding: 24px;
-}
-</style>
-`
-
-const templateFiles = {
-  'package.json': {
-    content: meta
-  },
-  '.prettierrc': {
-    content: prettier
-  },
-  'public/index.html': {
-    content: index
-  },
-  'src/main.js': {
-    content: main
-  },
-  'src/App.vue': {
-    content: app
-  }
-}
-
-const landing = `<!DOCTYPE html>
-<html lang="zh-Hans">
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <title>VEUI Playground</title>
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-    body {
-      position: relative;
-      width: 100vw;
-      height: 100vh;
-      margin: 0;
-      background-color: #040404;
-    }
-    .loading {
-      position: absolute;
-      top: 38.4%;
-      left: 50%;
-      transform: translate(-50%, -38.4%);
-      height: 48px;
-      font-weight: 400;
-      color: #fff;
-    }
-  </style>
-</head>
-<body>
-  ${genLoading()}
-</body>
-</html>
-`
-
-function genLoading () {
-  const { contents, attrs } = loading
-  const attrsStr = Object.entries({
-    ...attrs,
-    class: `loading ${attrs.class}`
-  })
-    .map(([key, value]) => `${key}="${value}"`)
-    .join(' ')
-  return `<svg ${attrsStr}>${contents}</svg>`
-}
diff --git a/nuxt.config.js b/nuxt.config.js
index ae0db48..96bc12b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -39,7 +39,7 @@ module.exports = {
     css: false
   },
 
-  css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl'],
+  css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl', 'veui-theme-dls/'],
 
   plugins: [
     { src: '~plugins/i18n.js' },
@@ -82,10 +82,6 @@ module.exports = {
         options: {
           locale: ['zh-Hans', 'en-US'],
           modules: [
-            {
-              package: 'veui-theme-dls',
-              fileName: '{module}.less'
-            },
             {
               package: 'veui-theme-dls',
               fileName: '{module}.js',
diff --git a/one/docs/demo/directives/drag/axis.vue b/one/docs/demo/directives/drag/axis.vue
index cbfc170..a0ed43d 100644
--- a/one/docs/demo/directives/drag/axis.vue
+++ b/one/docs/demo/directives/drag/axis.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import drag from 'veui/directives/drag'
+import { drag } from 'veui'
 
 export default {
   directives: {
diff --git a/one/docs/demo/directives/drag/base.vue b/one/docs/demo/directives/drag/base.vue
index f265692..6a07aa0 100644
--- a/one/docs/demo/directives/drag/base.vue
+++ b/one/docs/demo/directives/drag/base.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import drag from 'veui/directives/drag'
+import { drag } from 'veui'
 
 export default {
   directives: {
diff --git a/one/docs/demo/directives/drag/containment.vue b/one/docs/demo/directives/drag/containment.vue
index 255be60..6074b59 100644
--- a/one/docs/demo/directives/drag/containment.vue
+++ b/one/docs/demo/directives/drag/containment.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import drag from 'veui/directives/drag'
+import { drag } from 'veui'
 
 export default {
   directives: {
diff --git a/one/docs/demo/directives/drag/sort-x.vue b/one/docs/demo/directives/drag/sort-x.vue
index 2d90c7d..3cbe2e0 100644
--- a/one/docs/demo/directives/drag/sort-x.vue
+++ b/one/docs/demo/directives/drag/sort-x.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import drag from 'veui/directives/drag'
+import { drag } from 'veui'
 
 const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)
 
diff --git a/one/docs/demo/directives/drag/sort-y.vue b/one/docs/demo/directives/drag/sort-y.vue
index 56fb7c5..0edeb5c 100644
--- a/one/docs/demo/directives/drag/sort-y.vue
+++ b/one/docs/demo/directives/drag/sort-y.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import drag from 'veui/directives/drag'
+import { drag } from 'veui'
 
 const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)
 
diff --git a/one/docs/demo/directives/drag/targets.vue b/one/docs/demo/directives/drag/targets.vue
index 1059014..0722269 100644
--- a/one/docs/demo/directives/drag/targets.vue
+++ b/one/docs/demo/directives/drag/targets.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import drag from 'veui/directives/drag'
+import { drag } from 'veui'
 
 export default {
   directives: {
diff --git a/one/docs/demo/directives/nudge.vue b/one/docs/demo/directives/nudge.vue
index 2ccee48..9c65725 100644
--- a/one/docs/demo/directives/nudge.vue
+++ b/one/docs/demo/directives/nudge.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import nudge from 'veui/directives/nudge'
+import { nudge } from 'veui'
 
 export default {
   directives: {
diff --git a/one/docs/demo/directives/resize.vue b/one/docs/demo/directives/resize.vue
index 763cc55..7181150 100644
--- a/one/docs/demo/directives/resize.vue
+++ b/one/docs/demo/directives/resize.vue
@@ -47,8 +47,7 @@
 </template>
 
 <script>
-import { Button } from 'veui'
-import { resize } from 'veui/directives'
+import { Button, resize } from 'veui'
 
 export default {
   components: {
diff --git a/one/docs/demo/directives/tooltip.vue b/one/docs/demo/directives/tooltip.vue
index 39dfe88..e76ee90 100644
--- a/one/docs/demo/directives/tooltip.vue
+++ b/one/docs/demo/directives/tooltip.vue
@@ -22,8 +22,7 @@
 </template>
 
 <script>
-import { Button, Icon } from 'veui'
-import tooltip from 'veui/directives/tooltip'
+import { Button, Icon, tooltip } from 'veui'
 import 'veui-theme-dls-icons/zoom-in'
 import 'veui-theme-dls-icons/upload'
 import 'veui-theme-dls-icons/trash'
diff --git a/one/docs/demo/overlay/position.vue b/one/docs/demo/overlay/position.vue
index 1ca9dd5..9ca56d7 100644
--- a/one/docs/demo/overlay/position.vue
+++ b/one/docs/demo/overlay/position.vue
@@ -18,8 +18,7 @@
 </template>
 
 <script>
-import { Overlay, Button } from 'veui'
-import outside from 'veui/directives/outside'
+import { Overlay, Button, outside } from 'veui'
 
 export default {
   components: {
diff --git a/one/docs/demo/overlay/relative-base.vue b/one/docs/demo/overlay/relative-base.vue
index 79e43e3..da274ba 100644
--- a/one/docs/demo/overlay/relative-base.vue
+++ b/one/docs/demo/overlay/relative-base.vue
@@ -20,8 +20,7 @@
 </template>
 
 <script>
-import { Overlay, Button } from 'veui'
-import outside from 'veui/directives/outside'
+import { Overlay, Button, outside } from 'veui'
 
 export default {
   components: {
diff --git a/package-lock.json b/package-lock.json
index 44029b5..f284919 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8095,9 +8095,9 @@
       }
     },
     "date-fns": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz",
-      "integrity": "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==",
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.24.0.tgz",
+      "integrity": "sha512-6ujwvwgPID6zbI0o7UbURi2vlLDR9uP26+tW6Lg+Ji3w7dd0i3DOcjcClLjLPranT60SSEFBwdSyYwn/ZkPIuw==",
       "dev": true
     },
     "de-indent": {
@@ -15651,6 +15651,49 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "rc9": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-1.2.0.tgz",
@@ -18814,9 +18857,9 @@
       }
     },
     "veui": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/veui/-/veui-2.1.1.tgz",
-      "integrity": "sha512-0l9tZAx6xHygQSegqyFcD5QbKwwcAfI3imLsU8TCGmzIPebPnXvaSXOtFm6KKUep6wvdFGaofGRU5KPZ1pyEpw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/veui/-/veui-2.1.3.tgz",
+      "integrity": "sha512-hBV8G7wJLAd9yEvX/Nqv4DHfSO1wWYAmxhcGyeymRAQ07EPnOd1w6zeyHwx4P2QlzwwGm2lCw/2bDQgXd8Ju5g==",
       "dev": true,
       "requires": {
         "bytes": "^3.0.0",
@@ -18839,9 +18882,9 @@
       }
     },
     "veui-loader": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.1.1.tgz",
-      "integrity": "sha512-DmwuQEvvDC2+yOLwkdiLEQI/EEnsCTQXW7svypA7l95Tyo+phE6Iw4PhOlTY9Hz2ywLUgDCHHBN+KSCH5u3kMw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.1.3.tgz",
+      "integrity": "sha512-OxrZxXGR5z6m7TR1Z7RAqYFkUUsq5GlNyCPl6VoHbT9M3bvxWfNI74G88cC65agkTOKdC0WODtSCpzXL+ZqUfQ==",
       "dev": true,
       "requires": {
         "loader-utils": "^2.0.0",
@@ -18931,9 +18974,9 @@
       }
     },
     "veui-theme-dls": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.1.1.tgz",
-      "integrity": "sha512-zrQXNwikp6zNFEWdYE5kEN7CUu1N5pYO3aoSp6HJYYEZA940s9Nw1vb/IUVNQga2nuOxtkePgnhudPEe/W44Vw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.1.3.tgz",
+      "integrity": "sha512-5tT/x9amQMJj3IyIDCd9BSBXjnBAylWd+IZ8uaCiS0PyNlGpMsqavzc5KBUWcFieOsabdOmgiQbPJVlb18W2ZQ==",
       "dev": true,
       "requires": {
         "classlist-polyfill": "^1.2.0",
@@ -18941,7 +18984,7 @@
         "focus-visible": "^4.1.0",
         "less-plugin-dls": "^1.4.0",
         "less-plugin-est": "^3.0.0",
-        "veui-theme-dls-icons": "^2.1.1"
+        "veui-theme-dls-icons": "^2.1.3"
       },
       "dependencies": {
         "dls-icons-vue": {
@@ -18953,9 +18996,9 @@
       }
     },
     "veui-theme-dls-icons": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.1.1.tgz",
-      "integrity": "sha512-VSLg11amuDfvxYKE8CJg/eMaLbXAGY6PZ6CQdv5APtvNxWJWrETYOl7Lmem05dUI8+BJCrhMZLxi5JSPvyuMEA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.1.3.tgz",
+      "integrity": "sha512-hLtKT/T8JpZCdDQBvcGGIJrxDeYFlv4z2k359x8vCsYwDOnsFgfkVfSv0Y+0DR/C9KnH0MDkSEtZ8dq2hFcAEQ==",
       "dev": true,
       "requires": {
         "dls-icons-vue": "^1.9.0"
diff --git a/package.json b/package.json
index 2673f1e..3d81fb9 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "preact": "^10.5.14",
     "prettier": "^1.16.4",
     "prettier-eslint": "^8.8.2",
+    "raw-loader": "^4.0.2",
     "recursive-readdir": "^2.2.2",
     "recursive-readdir-sync": "^1.0.6",
     "rehype-raw": "^2.0.0",
@@ -72,10 +73,10 @@
     "stylus-loader": "^3.0.2",
     "unist-util-remove": "^1.0.1",
     "unist-util-visit": "^1.4.0",
-    "veui": "^2.1.1",
-    "veui-loader": "^2.1.1",
-    "veui-theme-dls": "^2.1.1",
-    "veui-theme-dls-icons": "^2.1.1",
+    "veui": "^2.1.3",
+    "veui-loader": "^2.1.3",
+    "veui-theme-dls": "^2.1.3",
+    "veui-theme-dls-icons": "^2.1.3",
     "vue-awesome": "^4.1.0",
     "vue-i18n": "^8.16.0",
     "vue-windows": "^0.2.4"