adminforth 2.4.0-next.69 → 2.4.0-next.70

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.
Files changed (11) hide show
  1. package/dist/modules/styles.d.ts +28 -0
  2. package/dist/modules/styles.d.ts.map +1 -1
  3. package/dist/modules/styles.js +33 -5
  4. package/dist/modules/styles.js.map +1 -1
  5. package/dist/spa/src/afcl/Checkbox.vue +21 -13
  6. package/dist/spa/src/afcl/Toggle.vue +32 -0
  7. package/dist/spa/src/afcl/index.ts +1 -1
  8. package/dist/spa/src/components/ResourceListTable.vue +15 -30
  9. package/dist/spa/src/components/ResourceListTableVirtual.vue +16 -30
  10. package/dist/spa/src/controls/BoolToggle.vue +34 -0
  11. package/package.json +1 -1
package/dist/modules/styles.d.ts CHANGED
@@ -50,6 +50,20 @@ export declare const styles: () => {
50
50
  lightDropdownOptionsBackground: string;
51
51
  lightDropdownOptionsHoverBackground: string;
52
52
  lightDropdownOptionsText: string;
53
+ lightCheckboxBgUnchecked: string;
54
+ lightCheckboxBgChecked: string;
55
+ lightCheckboxIconColor: string;
56
+ lightCheckboxBorderColor: string;
57
+ lightFocusRing: string;
58
+ lightTextLabel: string;
59
+ lightToggleBgUnactive: string;
60
+ lightToggleBgActive: string;
61
+ lightToggleCircleUnactive: string;
62
+ lightToggleCircleActive: string;
63
+ lightToggleRing: string;
64
+ lightToggleText: string;
65
+ lightToggleBorderUnactive: string;
66
+ lightToggleBorderActive: string;
53
67
  darkHtml: string;
54
68
  darkPrimary: string;
55
69
  darkPrimaryContrast: string;
@@ -91,6 +105,20 @@ export declare const styles: () => {
91
105
  darkDropdownOptionsBackground: string;
92
106
  darkDropdownOptionsHoverBackground: string;
93
107
  darkDropdownOptionsText: string;
108
+ darkCheckboxBgUnchecked: string;
109
+ darkCheckboxBgChecked: string;
110
+ darkCheckboxIconColor: string;
111
+ darkCheckboxBorderColor: string;
112
+ darkFocusRing: string;
113
+ darkTextLabel: string;
114
+ darkToggleBgUnactive: string;
115
+ darkToggleBgActive: string;
116
+ darkToggleCircleUnactive: string;
117
+ darkToggleCircleActive: string;
118
+ darkToggleRing: string;
119
+ darkToggleText: string;
120
+ darkToggleBorderUnactive: string;
121
+ darkToggleBorderActive: string;
94
122
  };
95
123
  boxShadow: {
96
124
  customLight: string;
package/dist/modules/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../modules/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIjB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../modules/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKjB,CAAC"}
package/dist/modules/styles.js CHANGED
@@ -58,11 +58,25 @@ export const styles = () => ({
58
58
  lightDropdownOptionsBackground: "#FFFFFF", //dropdown menu background color
59
59
  lightDropdownOptionsHoverBackground: "#f3f4f6", //dropdown menu hover background color
60
60
  lightDropdownOptionsText: "#000000", //dropdown menu hover background color
61
+ lightCheckboxBgUnchecked: "alias:lightPrimaryContrast lighten", //checkbox unchecked state bg
62
+ lightCheckboxBgChecked: "alias:lightPrimary", //cheched state bg
63
+ lightCheckboxIconColor: "alias:lightPrimaryContrast lighten", //checked icon color
64
+ lightCheckboxBorderColor: "alias:lightPrimary darken", //border color
65
+ lightFocusRing: "alias:lightPrimary lighten", //focus ring color
66
+ lightTextLabel: "black", //text color of checkbox label
67
+ lightToggleBgUnactive: "#F9FAFB",
68
+ lightToggleBgActive: "alias:lightPrimary darken",
69
+ lightToggleCircleUnactive: "alias:lightPrimary",
70
+ lightToggleCircleActive: "#F9FAFB",
71
+ lightToggleRing: "alias:lightPrimary lighten",
72
+ lightToggleText: "black",
73
+ lightToggleBorderUnactive: "#E5E7EB",
74
+ lightToggleBorderActive: "alias:lightPrimary darken",
61
75
  // colors for dark theme
62
76
  darkHtml: "#111827",
63
77
  darkPrimary: "rgb(130 172 255)", // primary color
64
78
  darkPrimaryContrast: "alias:darkPrimary inverse", // primary color contrast
65
- darkPrimaryOpacity: "#212A40", // primary color opacity
79
+ darkPrimaryOpacity: "alias:darkPrimary opacity:0.2", // primary color opacity
66
80
  darkNavbar: "#111827",
67
81
  darkNavbarBorder: "#e5e7eb",
68
82
  darkNavbarText: "#9ca3af",
@@ -93,13 +107,27 @@ export const styles = () => ({
93
107
  darkForm: "#111111",
94
108
  darkFormBorder: "#222222",
95
109
  darkFormHeading: "alias:darkListTableHeading",
96
- darkDropdownButtonsBackground: "#374151",
97
- darkDropownButtonsBorder: "#4b5563",
110
+ darkDropdownButtonsBackground: "alias:darkForm darken",
111
+ darkDropownButtonsBorder: "alias:darkForm lighten",
98
112
  darkDropdownButtonsText: "#ffffff",
99
113
  darkDropdownButtonsPlaceholderText: "#9ca3af",
100
- darkDropdownOptionsBackground: "#374151",
101
- darkDropdownOptionsHoverBackground: "#4b5563",
114
+ darkDropdownOptionsBackground: "#alias:darkForm lighten",
115
+ darkDropdownOptionsHoverBackground: "alias:darkForm",
102
116
  darkDropdownOptionsText: "#9ca3af",
117
+ darkCheckboxBgUnchecked: "alias:darkPrimaryContrast lighten", //checkbox unchecked state bg
118
+ darkCheckboxBgChecked: "alias:darkPrimary", //cheched state bg
119
+ darkCheckboxIconColor: "alias:darkPrimaryContrast lighten", //checked icon color
120
+ darkCheckboxBorderColor: "alias:darkPrimary darken", //border color
121
+ darkFocusRing: "alias:darkPrimary lighten",
122
+ darkTextLabel: "white",
123
+ darkToggleBgUnactive: "#F9FAFB",
124
+ darkToggleBgActive: "alias:darkPrimary darken",
125
+ darkToggleCircleUnactive: "alias:darkPrimary",
126
+ darkToggleCircleActive: "#F9FAFB",
127
+ darkToggleRing: "alias:darkPrimary lighten",
128
+ darkToggleText: "alias:darkPrimaryContrast lighten",
129
+ darkToggleBorderUnactive: "alias:darkPrimary lighten",
130
+ darkToggleBorderActive: "alias:darkPrimary darken",
103
131
  },
104
132
  boxShadow: {
105
133
  customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
package/dist/modules/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../modules/styles.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../modules/styles.ts"],"names":[],"mappings":"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"}
package/dist/spa/src/afcl/Checkbox.vue CHANGED
@@ -1,21 +1,29 @@
1
1
  <template>
2
- <div class="afcl-checkbox flex items-center h-5" :class="{'opacity-50' : props.disabled}">
3
- <input :id="id"
4
- ref="rememberInput"
5
- type="checkbox"
6
- :checked="props.modelValue"
7
- :disabled="props.disabled"
8
- @change="$emit('update:modelValue', $event.target.checked)"
9
- class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-lightPrimary cursor-pointer
10
- focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 checked:bg-lightPrimary checked:dark:bg-darkPrimary" />
2
+ <div class="afcl-checkbox flex items-center relative h-5" :class="{'opacity-50' : props.disabled}">
3
+ <div class="flex items-center justify-center">
4
+ <input :id="id"
5
+ ref="rememberInput"
6
+ type="checkbox"
7
+ :checked="props.modelValue"
8
+ :disabled="props.disabled"
9
+ @change="$emit('update:modelValue', $event.target.checked)"
10
+ class="peer appearance-none min-w-4 min-h-4 bg-lightCheckboxBgUnchecked border border-lightCheckboxBorderColor rounded-sm checked:bg-lightCheckboxBgChecked
11
+ focus:ring-lightFocusRing dark:focus:ring-darkFocusRing dark:focus:ring-darkFocusRing
12
+ focus:ring-2 dark:bg-darkCheckboxBgUnchecked dark:border-darkCheckboxBorderColor dark:checked:bg-darkCheckboxBgChecked cursor-pointer"
13
+ >
14
+ <div class="pointer-events-none absolute text-lightCheckboxIconColor dark:text-darkCheckboxIconColor leading-none peer-checked:block hidden">
15
+ <IconCheckOutline width="18" height="18" />
16
+ </div>
17
+ </div>
18
+ <label :for="id" class="ms-2 text-sm font-medium text-lightTextLabel dark:text-darkTextLabel">
19
+ <slot></slot>
20
+ </label>
21
+
11
22
  </div>
12
- <label :for="id" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
13
- <slot></slot>
14
- </label>
15
23
  </template>
16
24
 
17
25
  <script setup lang="ts">
18
-
26
+ import { IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
19
27
  const props = defineProps({
20
28
  modelValue: Boolean,
21
29
  disabled: Boolean,
package/dist/spa/src/afcl/Toggle.vue ADDED
@@ -0,0 +1,32 @@
1
+ <template>
2
+ <label class="inline-flex items-center cursor-pointer bor" :class="{'opacity-50' : props.disabled}">
3
+ <input :id="id"
4
+ type="checkbox"
5
+ value="" class="sr-only peer"
6
+ :disabled="props.disabled"
7
+ :checked="props.modelValue"
8
+ @change="$emit('update:modelValue', $event.target.checked)"
9
+ >
10
+ <div class="border border-lightToggleBorderUnactive relative min-w-11 min-h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4
11
+ peer-focus:ring-lightToggleRing dark:peer-focus:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive
12
+ peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:top-[2px] peer-checked:border-none
13
+ peer-checked:after:border-lightToggleBorderActive after:content-[''] after:absolute after:top-[1px]
14
+ after:start-[2px] after:bg-lightToggleCircleUnactive peer-checked:after:bg-lightToggleCircleActive dark:after:bg-darkToggleCircleUnactive after:border-lightToggleBgUnactive dark:after:border-darkToggleBgUnactive after:border after:rounded-full
15
+ after:h-5 after:w-5 after:transition-all dark:border-darkToggleBorderUnactive peer-checked:bg-lightToggleBgActive
16
+ dark:peer-checked:bg-darkToggleBgActive dark:peer-checked:after:border-darkToggleBorderActive dark:peer-checked:after:bg-darkToggleCircleActive">
17
+ </div>
18
+ <label :for="id" class="cursor-pointer ms-3 text-sm font-medium text-lightToggleText dark:text-darkToggleText">
19
+ <slot></slot>
20
+ </label>
21
+ </label>
22
+ </template>
23
+
24
+ <script setup lang="ts">
25
+ const props = defineProps({
26
+ modelValue: Boolean,
27
+ disabled: Boolean,
28
+ });
29
+
30
+ defineEmits(['update:modelValue']);
31
+ const id = `afcb-${Math.random().toString(36).substring(7)}`
32
+ </script>
package/dist/spa/src/afcl/index.ts CHANGED
@@ -20,5 +20,5 @@ export { default as Dialog } from './Dialog.vue';
20
20
  export { default as MixedChart } from './MixedChart.vue';
21
21
  export { default as CountryFlag } from './CountryFlag.vue';
22
22
  export { default as JsonViewer } from './JsonViewer.vue';
23
-
23
+ export { default as Toggle } from './Toggle.vue';
24
24
 
package/dist/spa/src/components/ResourceListTable.vue CHANGED
@@ -16,17 +16,13 @@
16
16
  <!-- table header -->
17
17
  <tr class="t-header sticky z-10 top-0 text-xs bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
18
18
  <td scope="col" class="p-4">
19
- <div class="flex items-center justify-center relative">
20
- <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
21
- :disabled="!rows || !rows.length"
22
- class="peer appearance-none w-4 h-4 text-blue-600 bg-light-primary border border-gray-500 rounded-sm checked:bg-blue-500
23
- focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
24
- focus:ring-2 dark:bg-dark-primary dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer">
25
- <label for="checkbox-all-search" class="sr-only">{{ $t('checkbox') }}</label>
26
- <div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
27
- <IconCheckOutline width="18" height="18" />
28
- </div>
29
- </div>
19
+ <Checkbox
20
+ :modelValue="allFromThisPageChecked"
21
+ :disabled="!rows || !rows.length"
22
+ @update:modelValue="selectAll"
23
+ >
24
+ <span class="sr-only">{{ $t('checkbox') }}</span>
25
+ </Checkbox>
30
26
  </td>
31
27
 
32
28
  <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
@@ -95,24 +91,13 @@
95
91
  :class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
96
92
  >
97
93
  <td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
98
- <div class="flex items-center justify-center relative">
99
- <input
100
- @click="(e)=>e.stopPropagation()"
101
- id="checkbox-table-search-1"
102
- type="checkbox"
103
- :checked="checkboxesInternal.includes(row._primaryKeyValue)"
104
- @change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
105
- class="peer appearance-none w-4 h-4 text-blue-600 bg-light-primary border border-gray-500 rounded-sm checked:bg-blue-500
106
- focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
107
- focus:ring-2 dark:bg-dark-primary dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer"
108
- />
109
- <label for="checkbox-table-search-1" class="sr-only">
110
- {{ $t('checkbox') }}
111
- </label>
112
- <div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
113
- <IconCheckOutline width="18" height="18" />
114
- </div>
115
- </div>
94
+ <Checkbox
95
+ :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
96
+ @change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
97
+ @click="(e)=>e.stopPropagation()"
98
+ >
99
+ <span class="sr-only">{{ $t('checkbox') }}</span>
100
+ </Checkbox>
116
101
  </td>
117
102
 
118
103
  <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
@@ -320,12 +305,12 @@ import {
320
305
  IconEyeSolid,
321
306
  IconPenSolid,
322
307
  IconTrashBinSolid,
323
- IconCheckOutline
324
308
  } from '@iconify-prerendered/vue-flowbite';
325
309
  import router from '@/router';
326
310
  import { Tooltip } from '@/afcl';
327
311
  import type { AdminForthResourceCommon } from '@/types/Common';
328
312
  import adminforth from '@/adminforth';
313
+ import Checkbox from '@/afcl/Checkbox.vue';
329
314
 
330
315
  const coreStore = useCoreStore();
331
316
  const { t } = useI18n();
package/dist/spa/src/components/ResourceListTableVirtual.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  :style="`height: ${containerHeight}px; will-change: transform;`"
6
6
  @scroll="handleScroll"
7
7
  ref="containerRef"
8
- >
8
+ >
9
9
  <!-- skelet loader -->
10
10
  <div role="status" v-if="!resource || !resource.columns"
11
11
  class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
@@ -20,17 +20,13 @@
20
20
  <!-- table header -->
21
21
  <tr class="t-header sticky z-10 top-0 text-xs bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
22
22
  <td scope="col" class="p-4">
23
- <div class="flex items-center justify-center relative">
24
- <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
25
- :disabled="!rows || !rows.length"
26
- class="peer appearance-none w-4 h-4 text-blue-600 bg-light-primary border border-gray-500 rounded-sm checked:bg-blue-500
27
- focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
28
- focus:ring-2 dark:bg-dark-primary dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer">
29
- <label for="checkbox-all-search" class="sr-only">{{ $t('checkbox') }}</label>
30
- <div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
31
- <IconCheckOutline width="18" height="18" />
32
- </div>
33
- </div>
23
+ <Checkbox
24
+ :modelValue="allFromThisPageChecked"
25
+ :disabled="!rows || !rows.length"
26
+ @update:modelValue="selectAll"
27
+ >
28
+ <span class="sr-only">{{ $t('checkbox') }}</span>
29
+ </Checkbox>
34
30
  </td>
35
31
 
36
32
  <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
@@ -106,24 +102,13 @@
106
102
  @mounted="(el) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
107
103
  >
108
104
  <td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
109
- <div class="flex items-center justify-center relative">
110
- <input
111
- @click="(e)=>e.stopPropagation()"
112
- id="checkbox-table-search-1"
113
- type="checkbox"
114
- :checked="checkboxesInternal.includes(row._primaryKeyValue)"
115
- @change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
116
- class="peer appearance-none w-4 h-4 text-blue-600 bg-gray-50 border border-gray-500 rounded-sm checked:bg-blue-500
117
- focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
118
- focus:ring-2 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer"
119
- />
120
- <label for="checkbox-table-search-1" class="sr-only">
121
- {{ $t('checkbox') }}
122
- </label>
123
- <div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
124
- <IconCheckOutline width="18" height="18" />
125
- </div>
126
- </div>
105
+ <Checkbox
106
+ :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
107
+ @change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
108
+ @click="(e)=>e.stopPropagation()"
109
+ >
110
+ <span class="sr-only">{{ $t('checkbox') }}</span>
111
+ </Checkbox>
127
112
  </td>
128
113
  <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
129
114
  <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
@@ -342,6 +327,7 @@ import router from '@/router';
342
327
  import { Tooltip } from '@/afcl';
343
328
  import type { AdminForthResourceCommon } from '@/types/Common';
344
329
  import adminforth from '@/adminforth';
330
+ import Checkbox from '@/afcl/Checkbox.vue';
345
331
 
346
332
  const coreStore = useCoreStore();
347
333
  const { t } = useI18n();
package/dist/spa/src/controls/BoolToggle.vue ADDED
@@ -0,0 +1,34 @@
1
+ <template>
2
+ <Toggle
3
+ :disabled="readonly"
4
+ @update:modelValue="$emit('update:value', $event)"
5
+ :modelValue="valueFromRecord"
6
+ >
7
+ <p>{{text}}</p>
8
+ </Toggle>
9
+ </template>
10
+
11
+ <script setup lang="ts">
12
+ import Toggle from '@/afcl/Toggle.vue';
13
+ import type {
14
+ AdminForthResourceColumnCommon,
15
+ AdminForthResourceCommon,
16
+ AdminUser,
17
+ } from "@/types/Common";
18
+
19
+ const props = defineProps<{
20
+ value: boolean,
21
+ text: string,
22
+ column: AdminForthResourceColumnCommon,
23
+ record: any,
24
+ meta: any,
25
+ resource: AdminForthResourceCommon,
26
+ adminUser: AdminUser,
27
+ readonly: boolean
28
+ }>();
29
+ console.log(JSON.stringify(props));
30
+ console.log("Current mode:", props.meta?.mode)
31
+ defineEmits(['update:value']);
32
+ const valueFromRecord = props.record[props.column.name]
33
+ const editReadOnly = props.column.editReadonly;
34
+ </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "adminforth",
3
- "version": "2.4.0-next.69",
3
+ "version": "2.4.0-next.70",
4
4
  "description": "OpenSource Vue3 powered forth-generation admin panel",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",