adminforth 2.4.0-next.12 → 2.4.0-next.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
 
3
- <div class="flex z-0" :class="{'opacity-50' : readonly}">
3
+ <div class="afcl-input flex z-0 relative" :class="{'opacity-50' : readonly}">
4
4
  <span
5
5
  v-if="$slots.prefix || prefix"
6
6
  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
@@ -21,7 +21,9 @@
21
21
  :disabled="readonly"
22
22
  >
23
23
 
24
-
24
+ <div v-if="$slots.rightIcon" class="absolute inset-y-0 right-0 pr-3 flex items-center">
25
+ <slot name="rightIcon" />
26
+ </div>
25
27
  <span
26
28
  v-if="$slots.suffix || suffix"
27
29
  class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-e-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600 ">
@@ -23,13 +23,13 @@
23
23
 
24
24
  <!-- Main modal -->
25
25
  <div id="authentication-modal" tabindex="-1"
26
- class="overflow-y-auto flex flex-grow
26
+ class="af-login-modal overflow-y-auto flex flex-grow
27
27
  overflow-x-hidden z-50 min-w-[350px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
28
28
  <div class="relative p-4 w-full max-h-full max-w-[400px]">
29
29
  <!-- Modal content -->
30
- <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
30
+ <div class="af-login-modal-content relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
31
31
  <!-- Modal header -->
32
- <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
32
+ <div class="af-login-modal-header flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
33
33
 
34
34
  <div v-if="coreStore?.config?.loginPageInjections?.panelHeader.length > 0">
35
35
  <component
@@ -44,11 +44,11 @@
44
44
  </h3>
45
45
  </div>
46
46
  <!-- Modal body -->
47
- <div class="p-4 md:p-5">
47
+ <div class="af-login-modal-body p-4 md:p-5">
48
48
  <form class="space-y-4" @submit.prevent>
49
49
  <div>
50
50
  <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
51
- <input
51
+ <Input
52
52
  autocomplete="username"
53
53
  type="username"
54
54
  name="username"
@@ -56,20 +56,24 @@
56
56
  ref="usernameInput"
57
57
  oninput="setCustomValidity('')"
58
58
  @keydown.enter="passwordInput.focus()"
59
- class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
59
+ class="w-full"
60
+ placeholder="name@company.com" required />
60
61
  </div>
61
- <div class="relative">
62
+ <div class="">
62
63
  <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your password') }}</label>
63
- <input
64
+ <Input
64
65
  ref="passwordInput"
65
66
  autocomplete="current-password"
66
67
  oninput="setCustomValidity('')"
67
68
  @keydown.enter="login"
68
- :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
69
- <button type="button" @click="showPw = !showPw" class="absolute top-12 right-3 -translate-y-1/2 text-gray-400 dark:text-gray-300">
70
- <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
71
- <IconEyeSlashSolid class="w-5 h-5" v-else />
72
- </button>
69
+ :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="w-full" required>
70
+ <template #rightIcon>
71
+ <button type="button" @click="showPw = !showPw" class="text-gray-400 dark:text-gray-300">
72
+ <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
73
+ <IconEyeSlashSolid class="w-5 h-5" v-else />
74
+ </button>
75
+ </template>
76
+ </Input>
73
77
  </div>
74
78
 
75
79
  <div v-if="coreStore.config.rememberMeDays"
@@ -88,7 +92,7 @@
88
92
  :meta="c.meta"
89
93
  />
90
94
 
91
- <div v-if="error" class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
95
+ <div v-if="error" class="af-login-modal-error flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
92
96
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
93
97
  <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
94
98
  </svg>
@@ -130,7 +134,7 @@ import { useUserStore } from '@/stores/user';
130
134
  import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
131
135
  import { callAdminForthApi, loadFile } from '@/utils';
132
136
  import { useRoute, useRouter } from 'vue-router';
133
- import { Button, Checkbox } from '@/afcl';
137
+ import { Button, Checkbox, Input } from '@/afcl';
134
138
  import { useI18n } from 'vue-i18n';
135
139
 
136
140
  const { t } = useI18n();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "adminforth",
3
- "version": "2.4.0-next.12",
3
+ "version": "2.4.0-next.14",
4
4
  "description": "OpenSource Vue3 powered forth-generation admin panel",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",