From c75f4429ac96a159889bf2780c7bcde861e3956f Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Wed, 27 Nov 2019 17:21:48 +0800
Subject: [PATCH] Use native controls

---
 resources/assets/src/views/auth/Login.vue     |  9 ++--
 resources/assets/src/views/skinlib/Upload.vue | 47 ++++++++++++++-----
 .../assets/tests/views/skinlib/Upload.test.ts |  7 ++-
 3 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/resources/assets/src/views/auth/Login.vue b/resources/assets/src/views/auth/Login.vue
index c9bf3025..93d4fee0 100644
--- a/resources/assets/src/views/auth/Login.vue
+++ b/resources/assets/src/views/auth/Login.vue
@@ -37,7 +37,10 @@
 
     <div class="d-flex justify-content-between mb-3">
       <div>
-        <el-switch v-model="remember" :active-text="$t('auth.keep')" />
+        <label>
+          <input v-model="remember" type="checkbox">
+          {{ $t('auth.keep') }}
+        </label>
       </div>
       <a v-t="'auth.forgot-link'" :href="`${baseUrl}auth/forgot`" />
     </div>
@@ -56,13 +59,9 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import { Switch } from 'element-ui'
 import Captcha from '../../components/Captcha.vue'
 import emitMounted from '../../components/mixins/emitMounted'
 
-Vue.use(Switch)
-
 export default {
   name: 'Login',
   components: {
diff --git a/resources/assets/src/views/skinlib/Upload.vue b/resources/assets/src/views/skinlib/Upload.vue
index 7366fed0..cd6c6cba 100644
--- a/resources/assets/src/views/skinlib/Upload.vue
+++ b/resources/assets/src/views/skinlib/Upload.vue
@@ -17,9 +17,33 @@
             <div class="form-group">
               <label v-t="'skinlib.upload.texture-type'" />
               <br>
-              <el-radio v-model="type" label="steve">Steve</el-radio>
-              <el-radio v-model="type" label="alex">Alex</el-radio>
-              <el-radio v-model="type" label="cape">{{ $t('general.cape') }}</el-radio>
+              <label class="mr-2">
+                <input
+                  v-model="type"
+                  type="radio"
+                  name="type"
+                  value="steve"
+                >
+                Steve
+              </label>
+              <label class="mr-2">
+                <input
+                  v-model="type"
+                  type="radio"
+                  name="type"
+                  value="alex"
+                >
+                Alex
+              </label>
+              <label class="mr-2">
+                <input
+                  v-model="type"
+                  type="radio"
+                  name="type"
+                  value="cape"
+                >
+                {{ $t('general.cape') }}
+              </label>
             </div>
 
             <div class="form-group">
@@ -57,12 +81,14 @@
 
           <div class="card-footer">
             <div class="container pl-0 pr-0 d-flex justify-content-between">
-              <el-switch
-                v-model="isPrivate"
+              <label
                 class="mt-2"
-                :active-text="$t('skinlib.upload.set-as-private')"
                 :title="$t('skinlib.upload.privacy-notice')"
-              />
+                data-toggle="tooltip"
+              >
+                <input v-model="isPrivate" type="checkbox">
+                {{ $t('skinlib.upload.set-as-private') }}
+              </label>
               <button v-if="uploading" class="btn btn-success" disabled>
                 <i class="fa fa-spinner fa-spin" /> {{ $t('skinlib.uploading') }}
               </button>
@@ -84,7 +110,7 @@
       </div>
       <div class="col-md-6">
         <previewer
-          :skin="type !== 'cape' && texture"
+          :skin="type !== 'cape' ? texture : ''"
           :cape="type === 'cape' ? texture : ''"
           :model="type"
         />
@@ -94,15 +120,10 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import FileUpload from 'vue-upload-component'
 import { isSlimSkin } from 'skinview3d'
-import { Radio, Switch } from 'element-ui'
 import emitMounted from '../../components/mixins/emitMounted'
 
-Vue.use(Radio)
-Vue.use(Switch)
-
 export default {
   name: 'Upload',
   components: {
diff --git a/resources/assets/tests/views/skinlib/Upload.test.ts b/resources/assets/tests/views/skinlib/Upload.test.ts
index 1c0828b1..f3537a8e 100644
--- a/resources/assets/tests/views/skinlib/Upload.test.ts
+++ b/resources/assets/tests/views/skinlib/Upload.test.ts
@@ -1,7 +1,6 @@
 /* eslint-disable accessor-pairs */
 import Vue from 'vue'
 import { mount } from '@vue/test-utils'
-import { Radio } from 'element-ui'
 import * as skinview3d from 'skinview3d'
 import Upload from '@/views/skinlib/Upload.vue'
 import { flushPromises } from '../../utils'
@@ -96,23 +95,23 @@ test('process input file', () => {
   type Component = Vue & {
     name: string
     texture: string
+    type: string
     inputFile(attrs?: { file: Blob, name: string }): void
   }
   const wrapper = mount<Component>(Upload, {
     stubs: ['file-upload'],
   })
-  const radioes = wrapper.findAll(Radio)
 
   wrapper.vm.inputFile()
   expect(wrapper.vm.name).toBe('')
 
   wrapper.vm.inputFile({ file: blob, name: '123.png' })
   expect(wrapper.vm.name).toBe('123')
-  expect(radioes.at(1).classes()).toContain('is-checked')
+  expect(wrapper.vm.type).toBe('alex')
 
   wrapper.vm.inputFile({ file: blob, name: '456.png' })
   expect(wrapper.vm.name).toBe('123')
-  expect(radioes.at(0).classes()).toContain('is-checked')
+  expect(wrapper.vm.type).toBe('steve')
 
   wrapper.setData({ name: '' })
   wrapper.vm.inputFile({ file: blob, name: '789' })