feat(console): support secret schema role

plugins/frontend/console/client/components/form/schema.vue

@@ -12,12 +12,16 @@
         <template v-else>
           <k-input v-model="config"
             :style="{ width: schema.meta.role === 'url' ? '18rem' : '12rem' }"
-            :type="schema.type === 'number' ? 'number' : schema.meta.role === 'secret' ? 'password' : 'text'">
+            :type="schema.type === 'number' ? 'number' : schema.meta.role === 'secret' && !showPass ? 'password' : 'text'">
             <template #suffix v-if="schema.meta.role === 'url'">
               <a :href="config" target="_blank" rel="noopener noreferrer">
-                <k-icon-link></k-icon-link>
+                <k-icon-external-link></k-icon-external-link>
               </a>
             </template>
+            <template #suffix v-else-if="schema.meta.role === 'secret'">
+              <k-icon-eye v-if="showPass" @click="showPass = !showPass"></k-icon-eye>
+              <k-icon-eye-slash v-else @click="showPass = !showPass"></k-icon-eye-slash>
+            </template>
           </k-input>
         </template>
       </div>
@@ -67,7 +71,7 @@
 
 <script lang="ts" setup>
 
-import { computed, watch, ref } from 'vue'
+import { watch, ref } from 'vue'
 import type { PropType } from 'vue'
 import Schema from 'schemastery'
 import SchemaGroup from './schema-group.vue'
@@ -91,11 +95,13 @@ function getFallback() {
   }
 }
 
-const updateModelValue = emit.bind(null, 'update:modelValue')
+const showPass = ref(false)
 
 const config = ref<any>(props.modelValue ?? getFallback())
 
-watch(config, updateModelValue, { deep: true, immediate: true })
+watch(config, (value) => {
+  emit('update:modelValue', value)
+}, { deep: true, immediate: true })
 
 </script>
 
@@ -156,6 +162,7 @@ watch(config, updateModelValue, { deep: true, immediate: true })
   }
 
   .k-input .k-icon {
+    height: 0.75rem;
     color: var(--fg3);
     transition: 0.3s ease;
 

plugins/frontend/console/client/components/icons/external-link.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"/>
+  </svg>
+</template>

plugins/frontend/console/client/components/icons/eye-slash.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path fill="currentColor" d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"/>
+  </svg>
+</template>

plugins/frontend/console/client/components/icons/eye.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+    <path fill="currentColor" d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"/>
+  </svg>
+</template>

plugins/frontend/console/client/components/icons/index.ts

@@ -1,6 +1,10 @@
 import { App } from 'vue'
-import IconLink from './link.vue'
+import ExternalLink from './external-link.vue'
+import EyeSlash from './eye-slash.vue'
+import Eye from './eye.vue'
 
 export default function (app: App) {
-  app.component('k-icon-link', IconLink)
+  app.component('k-icon-external-link', ExternalLink)
+  app.component('k-icon-eye-slash', EyeSlash)
+  app.component('k-icon-eye', Eye)
 }