adminforth 1.1.28 → 1.1.30

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.
package/dist/index.js CHANGED
@@ -693,7 +693,6 @@ class AdminForth {
693
693
  }
694
694
  yield interpretResource(adminUser, resource, { requestBody: body }, ActionCheckSource.DisplayButtons);
695
695
  const { allowed, error } = checkAccess(source, resource);
696
- console.log('allowed', allowed, error);
697
696
  if (!allowed) {
698
697
  return { error };
699
698
  }
@@ -111,7 +111,7 @@ class CodeInjector {
111
111
  path: '${item.path}',
112
112
  name: '${item.path}',
113
113
  component: () => import('${item.component}'),
114
- meta: { title: '${(_a = item === null || item === void 0 ? void 0 : item.meta) === null || _a === void 0 ? void 0 : _a.title}'}
114
+ meta: { title: '${((_a = item === null || item === void 0 ? void 0 : item.meta) === null || _a === void 0 ? void 0 : _a.title) || item.path.replace('/', '')}'}
115
115
  },\n`;
116
116
  }
117
117
  else {
@@ -119,7 +119,7 @@ class CodeInjector {
119
119
  path: '${item.path}',
120
120
  name: '${item.path}',
121
121
  component: ${getComponentNameFromPath(item.component)},
122
- meta: { title: '${(_b = item === null || item === void 0 ? void 0 : item.meta) === null || _b === void 0 ? void 0 : _b.title}'}
122
+ meta: { title: '${((_b = item === null || item === void 0 ? void 0 : item.meta) === null || _b === void 0 ? void 0 : _b.title) || item.path.replace('/', '')}'}
123
123
  },\n`;
124
124
  const componentName = `${getComponentNameFromPath(item.component)}`;
125
125
  routerComponents += `import ${componentName} from '${item.component}';\n`;
@@ -131,7 +131,7 @@ class CodeInjector {
131
131
  path: '${item.path}',
132
132
  name: '${item.path}',
133
133
  component: ${getComponentNameFromPath(item.component)},
134
- meta: { title: '${(_c = item === null || item === void 0 ? void 0 : item.meta) === null || _c === void 0 ? void 0 : _c.title}'}
134
+ meta: { title: '${((_c = item === null || item === void 0 ? void 0 : item.meta) === null || _c === void 0 ? void 0 : _c.title) || item.path.replace('/', '')}'}
135
135
  },\n`;
136
136
  const componentName = `${getComponentNameFromPath(item.component)}`;
137
137
  routerComponents += `import ${componentName} from '${item.component}';\n`;
@@ -141,7 +141,7 @@ class CodeInjector {
141
141
  path: '${item.path}',
142
142
  name: '${item.path}',
143
143
  component: () => import('${item.component}'),
144
- meta: { title: '${(_d = item === null || item === void 0 ? void 0 : item.meta) === null || _d === void 0 ? void 0 : _d.title}'
144
+ meta: { title: '${((_d = item === null || item === void 0 ? void 0 : item.meta) === null || _d === void 0 ? void 0 : _d.title) || item.path.replace('/', '')}'}
145
145
  },\n`;
146
146
  }
147
147
  }
@@ -22,7 +22,7 @@
22
22
  v-if="checkboxes.length"
23
23
  data-tooltip-target="tooltip-remove-all"
24
24
  data-tooltip-placement="bottom"
25
- class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
25
+ class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
26
26
  >
27
27
  <IconBanOutline class="w-5 h-5 "/>
28
28
  <div id="tooltip-remove-all" role="tooltip"
@@ -37,7 +37,7 @@
37
37
  v-for="(action,i) in listResource?.options?.bulkActions"
38
38
  :key="action.id"
39
39
  @click="startBulkAction(action.id)"
40
- class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
40
+ class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
41
41
  :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
42
42
  'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
43
43
  }"
@@ -40,7 +40,6 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
40
40
  if (!this.foreignResource) {
41
41
  throw new Error(`ForeignInlineListPlugin: Resource with ID "${this.options.foreignResourceId}" not found`);
42
42
  }
43
- console.log('🔌 ForeignInlineListPlugin', this.options);
44
43
  resourceConfig.columns.push({
45
44
  name: `foreignInlineList_${this.foreignResource.resourceId}`,
46
45
  label: 'Foreign Inline List',
@@ -109,7 +109,7 @@
109
109
  <td :colspan="resource?.columns.length + 2">
110
110
 
111
111
  <div id="toast-simple"
112
- class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
112
+ class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 divide-x rtl:divide-x-reverse divide-gray-200 dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
113
113
  role="alert">
114
114
  <IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
115
115
  <div class="ps-4 text-sm font-normal">No items here yet</div>
@@ -208,7 +208,7 @@
208
208
  </table>
209
209
  </div>
210
210
  <!-- pagination -->
211
- <div class="flex flex-col items-center mt-4 xs:flex-row xs:justify-between xs:items-center"
211
+ <div class="flex flex-col items-center mt-4 mb-4 xs:flex-row xs:justify-between xs:items-center"
212
212
  v-if="rows && totalRows >= pageSize && totalRows > 0"
213
213
  >
214
214
  <!-- Help text -->
@@ -22,7 +22,7 @@
22
22
  v-if="checkboxes.length"
23
23
  data-tooltip-target="tooltip-remove-all"
24
24
  data-tooltip-placement="bottom"
25
- class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
25
+ class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
26
26
  >
27
27
  <IconBanOutline class="w-5 h-5 "/>
28
28
 
@@ -38,7 +38,7 @@
38
38
  v-for="(action,i) in coreStore.resource?.options?.bulkActions"
39
39
  :key="action.id"
40
40
  @click="startBulkAction(action.id)"
41
- class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
41
+ class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
42
42
  :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
43
43
  'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
44
44
  }"
@@ -10,14 +10,14 @@
10
10
  />
11
11
  <BreadcrumbsWithButtons>
12
12
  <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }"
13
- class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
13
+ class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
14
14
  >
15
15
  <IconPenSolid class="w-4 h-4" />
16
16
  Edit
17
17
  </RouterLink>
18
18
 
19
19
  <button v-if="coreStore?.resourceOptions?.allowedActions?.delete" @click="deleteRecord"
20
- class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
20
+ class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
21
21
  >
22
22
  <IconTrashBinSolid class="w-4 h-4" />
23
23
  Delete
package/index.ts CHANGED
@@ -786,7 +786,6 @@ class AdminForth implements AdminForthClass {
786
786
  await interpretResource(adminUser, resource, { requestBody: body }, ActionCheckSource.DisplayButtons);
787
787
 
788
788
  const { allowed, error } = checkAccess(source as AllowedActionsEnum, resource);
789
- console.log('allowed', allowed, error);
790
789
  if (!allowed) {
791
790
  return { error };
792
791
  }
@@ -124,13 +124,13 @@ class CodeInjector implements CodeInjectorType {
124
124
  path: '${item.path}',
125
125
  name: '${item.path}',
126
126
  component: () => import('${item.component}'),
127
- meta: { title: '${item?.meta?.title}'}
127
+ meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
128
128
  },\n`} else {
129
129
  routes += `{
130
130
  path: '${item.path}',
131
131
  name: '${item.path}',
132
132
  component: ${getComponentNameFromPath(item.component)},
133
- meta: { title: '${item?.meta?.title}'}
133
+ meta: { title: '${item?.meta?.title|| item.path.replace('/', '')}'}
134
134
  },\n`
135
135
  const componentName = `${getComponentNameFromPath(item.component)}`;
136
136
  routerComponents += `import ${componentName} from '${item.component}';\n`;
@@ -141,7 +141,7 @@ class CodeInjector implements CodeInjectorType {
141
141
  path: '${item.path}',
142
142
  name: '${item.path}',
143
143
  component: ${getComponentNameFromPath(item.component)},
144
- meta: { title: '${item?.meta?.title}'}
144
+ meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
145
145
  },\n`
146
146
  const componentName = `${getComponentNameFromPath(item.component)}`;
147
147
  routerComponents += `import ${componentName} from '${item.component}';\n`;}
@@ -150,7 +150,7 @@ class CodeInjector implements CodeInjectorType {
150
150
  path: '${item.path}',
151
151
  name: '${item.path}',
152
152
  component: () => import('${item.component}'),
153
- meta: { title: '${item?.meta?.title}'
153
+ meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
154
154
  },\n`
155
155
 
156
156
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "adminforth",
3
- "version": "1.1.28",
3
+ "version": "1.1.30",
4
4
  "description": "OpenSource Vue3 powered forth-generation admin panel",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -22,7 +22,7 @@
22
22
  v-if="checkboxes.length"
23
23
  data-tooltip-target="tooltip-remove-all"
24
24
  data-tooltip-placement="bottom"
25
- class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
25
+ class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
26
26
  >
27
27
  <IconBanOutline class="w-5 h-5 "/>
28
28
  <div id="tooltip-remove-all" role="tooltip"
@@ -37,7 +37,7 @@
37
37
  v-for="(action,i) in listResource?.options?.bulkActions"
38
38
  :key="action.id"
39
39
  @click="startBulkAction(action.id)"
40
- class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
40
+ class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
41
41
  :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
42
42
  'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
43
43
  }"
@@ -43,7 +43,6 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
43
43
  if (!this.foreignResource) {
44
44
  throw new Error(`ForeignInlineListPlugin: Resource with ID "${this.options.foreignResourceId}" not found`);
45
45
  }
46
- console.log('🔌 ForeignInlineListPlugin', this.options);
47
46
  resourceConfig.columns.push({
48
47
  name: `foreignInlineList_${this.foreignResource.resourceId}`,
49
48
  label: 'Foreign Inline List',
@@ -109,7 +109,7 @@
109
109
  <td :colspan="resource?.columns.length + 2">
110
110
 
111
111
  <div id="toast-simple"
112
- class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
112
+ class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 divide-x rtl:divide-x-reverse divide-gray-200 dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
113
113
  role="alert">
114
114
  <IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
115
115
  <div class="ps-4 text-sm font-normal">No items here yet</div>
@@ -208,7 +208,7 @@
208
208
  </table>
209
209
  </div>
210
210
  <!-- pagination -->
211
- <div class="flex flex-col items-center mt-4 xs:flex-row xs:justify-between xs:items-center"
211
+ <div class="flex flex-col items-center mt-4 mb-4 xs:flex-row xs:justify-between xs:items-center"
212
212
  v-if="rows && totalRows >= pageSize && totalRows > 0"
213
213
  >
214
214
  <!-- Help text -->
@@ -22,7 +22,7 @@
22
22
  v-if="checkboxes.length"
23
23
  data-tooltip-target="tooltip-remove-all"
24
24
  data-tooltip-placement="bottom"
25
- class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
25
+ class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
26
26
  >
27
27
  <IconBanOutline class="w-5 h-5 "/>
28
28
 
@@ -38,7 +38,7 @@
38
38
  v-for="(action,i) in coreStore.resource?.options?.bulkActions"
39
39
  :key="action.id"
40
40
  @click="startBulkAction(action.id)"
41
- class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
41
+ class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
42
42
  :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
43
43
  'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
44
44
  }"
@@ -10,14 +10,14 @@
10
10
  />
11
11
  <BreadcrumbsWithButtons>
12
12
  <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }"
13
- class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
13
+ class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
14
14
  >
15
15
  <IconPenSolid class="w-4 h-4" />
16
16
  Edit
17
17
  </RouterLink>
18
18
 
19
19
  <button v-if="coreStore?.resourceOptions?.allowedActions?.delete" @click="deleteRecord"
20
- class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
20
+ class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
21
21
  >
22
22
  <IconTrashBinSolid class="w-4 h-4" />
23
23
  Delete