Use vite as builder and demo runtime (#312)

Maronato · Jan 31, 2022 · dd817ba · dd817ba
1 parent 830a0f1
commit dd817ba
Show file tree

Hide file tree

Showing 50 changed files with 856 additions and 4,876 deletions.
diff --git a/build/esbuild.config.mjs b/build/esbuild.config.mjs
diff --git a/build/tsconfig.json b/build/tsconfig.json
diff --git a/demo/.editorconfig b/demo/.editorconfig
diff --git a/demo/.eslintignore b/demo/.eslintignore
diff --git a/demo/.gitignore b/demo/.gitignore
diff --git a/demo/.prettierrc b/demo/.prettierrc
diff --git a/demo/.stylelintrc b/demo/.stylelintrc
diff --git a/demo/README.md b/demo/README.md
diff --git a/demo/index.html b/demo/index.html
@@ -9,33 +9,5 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
-    <script>
-      ;(function (document, window) {
-        if (!document || !window) {
-          return
-        }
-
-        var styleText =
-          "::-moz-focus-inner{border:0 !important;}:focus{outline: none !important;"
-        var unfocus_style = document.createElement("STYLE")
-
-        window.unfocus = function () {
-          document.getElementsByTagName("HEAD")[0].appendChild(unfocus_style)
-
-          document.addEventListener("mousedown", function () {
-            unfocus_style.innerHTML = styleText + "}"
-          })
-          document.addEventListener("keydown", function () {
-            unfocus_style.innerHTML = ""
-          })
-        }
-
-        unfocus.style = function (style) {
-          styleText += style
-        }
-
-        unfocus()
-      })(document, window)
-    </script>
   </body>
 </html>
diff --git a/demo/package.json b/demo/package.json
diff --git a/demo/postcss.config.js b/demo/postcss.config.js
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -1,55 +1,21 @@
 <template>
-  <div class="text-center m-64">
-    <button @click="showToast">Show toast</button>
-  </div>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
 </template>
 
-<script lang="ts">
-import { ref } from "vue"
-import { useToast } from "./vue-toastification"
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 import HelloWorld from "./components/HelloWorld.vue"
+</script>
 
-import VRadio from "./components/ui/Radio/index"
-import VSwitch from "./components/ui/Switch/index"
-import VSlider from "./components/ui/Slider/index"
-import VInput from "./components/ui/Input"
-import VSelect from "./components/ui/Select"
-import VButton from "./components/ui/Button"
-import VCode from "./components/ui/Code"
-
-export default {
-  name: "App",
-  components: {
-    HelloWorld,
-    VRadio,
-    VSlider,
-    VSwitch,
-    VInput,
-    VSelect,
-    VButton,
-    VCode,
-  },
-  setup() {
-    const toast = useToast()
-
-    const myData = ref(true)
-
-    const slider = ref(0)
-
-    const input = ref("hey")
-
-    const disable = ref(false)
-
-    const choices = ref([
-      { text: "hey", value: "1" },
-      { text: "oh", value: "2" },
-    ])
-
-    const choice = ref(choices.value[0])
-
-    const showToast = () => toast.success("hey")
-
-    return { toast, myData, choices, choice, slider, input, disable, showToast }
-  },
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
 }
-</script>
+</style>
diff --git a/demo/src/assets/css/global.css b/demo/src/assets/css/global.css
diff --git a/demo/src/assets/css/prismjs/plugins/toolbar.css b/demo/src/assets/css/prismjs/plugins/toolbar.css