🌈 style: svg icon name in parameter 'ico'

web/views/admin/components/badge.js

@@ -1,28 +1,26 @@
-
 export default {
   props: {
-    type: {
+    ico: {
       type: String,
       required: false,
       default: "",
     },
     svgClass: {
       type: String,
       required: false,
-      default: "-ms-0.5 me-1.5 h-4 w-4",
+      default: "-ms-0.5 me-5.5 h-5 w-5",
     },
   },
 
   setup(props) { },
 
   template: `
   <span class="inline-flex items-center justify-center rounded-full px-2.5 py-0.5">
-    <svg :class="(type !== '' ? '-ms-0.5 me-1.5 '+svgClass : 'h-0 w-0' )" v-if="type!==''">
-      <use v-bind="{'xlink:href':'/assets/img/sprite.svg#'+type}" />
+    <svg :class="(ico !== '' ? '-ms-0.5 me-1.5 '+svgClass : 'h-0 w-0' )" v-if="ico!==''">
+      <use v-bind="{'xlink:href':'/assets/img/sprite.svg#'+ico}" />
     </svg>
     <p class="whitespace-nowrap text-xs">
       <slot />
     </p>
   </span>`
-}
-
+}

web/views/admin/components/drawer.js

@@ -1,4 +1,3 @@
-
 import FormButton from './form/button.js';
 
 export default {
@@ -96,12 +95,11 @@ export default {
         transitionDuration: \`200 ms\`,
         backgroundColor: backgroundColor,
       }">
-      <div class="pb-4">
+      <div class="pb-8">
         <h2 class="text-2xl font-bold text-gray-900 sm:text-3xl">{{ title }}</h2>
       </div>
       <slot />
-
-      <div class="pt-4">
+      <div class="pt-8">
         <slot name="footer">
           <form-button type="submit" name="Close" color="green" @click="closeDrawer" />
         </slot>

web/views/admin/components/form/input.js

@@ -65,10 +65,7 @@ export default {
 
     <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
       <svg class="h-4 w-4" >
-        <use xlink:href="/assets/img/sprite.svg#at-symbol" :class="error? 'text-red-500' : 'text-gray-400'" v-if="ico==='email'" />
-        <use xlink:href="/assets/img/sprite.svg#finger-print" :class="error? 'text-red-500' : 'text-gray-400'" v-if="ico==='password'" />
-        <use xlink:href="/assets/img/sprite.svg#glob-alt" :class="error? 'text-red-500' : 'text-gray-400'" v-if="ico==='domain'" />
-        <use xlink:href="/assets/img/sprite.svg#key" :class="error? 'text-red-500' : 'text-gray-400'" v-if="ico==='key'" />
+        <use v-bind="{'xlink:href':'/assets/img/sprite.svg#'+ico}" :class="error? 'text-red-500' : 'text-gray-400'" />
       </svg>
     </span>
   </label>

web/views/admin/install.html

@@ -6,10 +6,10 @@ <h1 class="text-2xl font-bold sm:text-3xl">This is the first run! 🎉</h1>
     </div>
 
     <v-form @submit="onSubmit" v-slot="{ errors }" class="mx-auto mb-0 mt-8 max-w-md space-y-4">
-      <form-input v-model="state.email" :error="errors.email" id="email" type="email" rules="required|email" name="Email" ico="email"></form-input>
-      <form-input v-model="state.password" :error="errors.password" id="password" type="password" rules="required|min:6" name="Password" ico="password"></form-input>
+      <form-input v-model="state.email" :error="errors.email" id="email" type="email" rules="required|email" name="Email" ico="at-symbol"></form-input>
+      <form-input v-model="state.password" :error="errors.password" id="password" type="password" rules="required|min:6" name="Password" ico="finger-print"></form-input>
       <hr />
-      <form-input v-model="state.domain" :error="errors.domain" id="domain" type="text" rules="required" name="Domain" ico="domain"></form-input>
+      <form-input v-model="state.domain" :error="errors.domain" id="domain" type="text" rules="required" name="Domain" ico="glob-alt"></form-input>
       <form-input v-model="state.stripe_secret" :error="errors.stripe_secret" id="stripe_secret" type="text" rules="required|min:100" name="Stripe secret key" ico="key"></form-input>
 
       <form-button type="submit" name="Create my cart" color="green" ico="row" />
@@ -26,7 +26,6 @@ <h1 class="text-2xl font-bold sm:text-3xl">This is the first run! 🎉</h1>
       FormInput,
       FormButton,
       VForm: Form,
-      VField: Field,
     },
 
     data() {

web/views/admin/signin.html

@@ -5,8 +5,8 @@ <h1 class="text-2xl font-bold sm:text-3xl">👨‍🎨 Admin sign in</h1>
     </div>
 
     <v-form @submit="onSubmit" v-slot="{ errors }" class="mx-auto mb-0 mt-8 max-w-md space-y-4">
-      <form-input v-model="state.email" :error="errors.email" id="email" type="email" rules="required|email" name="Email" ico="email"></form-input>
-      <form-input v-model="state.password" :error="errors.password" id="password" type="password" rules="required|min:6" name="Password" ico="password"></form-input>
+      <form-input v-model="state.email" :error="errors.email" id="email" type="email" rules="required|email" name="Email" ico="at-symbol"></form-input>
+      <form-input v-model="state.password" :error="errors.password" id="password" type="password" rules="required|min:6" name="Password" ico="finger-print"></form-input>
 
       <form-button type="submit" name="Login" color="green" ico="row" />
     </v-form>
@@ -22,7 +22,6 @@ <h1 class="text-2xl font-bold sm:text-3xl">👨‍🎨 Admin sign in</h1>
       FormInput,
       FormButton,
       VForm: Form,
-      VField: Field,
     },
 
     data() {