adminforth 2.4.0-next.26 → 2.4.0-next.261

package/dist/spa/src/afcl/Toggle.vue

@@ -0,0 +1,32 @@
+<template>
+    <label class="inline-flex items-center cursor-pointer bor" :class="{'opacity-50' : props.disabled}">
+        <input :id="id" 
+            type="checkbox" 
+            value="" class="sr-only peer" 
+            :disabled="props.disabled"
+            :checked="props.modelValue"
+            @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+            > 
+            <div class="afcl-toggle border border-lightToggleBorderUnactive relative min-w-11 min-h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4 
+                peer-focus:ring-lightToggleRing dark:peer-focus:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive 
+                peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:top-[2px] peer-checked:border-none 
+                peer-checked:after:border-lightToggleBorderActive  after:content-[''] after:absolute after:top-[1px] 
+                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 
+                after:h-5 after:w-5 after:transition-all dark:border-darkToggleBorderUnactive peer-checked:bg-lightToggleBgActive 
+                dark:peer-checked:bg-darkToggleBgActive dark:peer-checked:after:border-darkToggleBorderActive dark:peer-checked:after:bg-darkToggleCircleActive">
+            </div>
+        <label :for="id" class="cursor-pointer ms-3 text-sm font-medium text-lightToggleText dark:text-darkToggleText">
+            <slot></slot>
+        </label>
+    </label>
+</template>
+
+<script setup lang="ts">
+    const props = defineProps({
+        modelValue: Boolean,
+        disabled: Boolean,
+    });
+
+    defineEmits(['update:modelValue']);
+    const id = `afcb-${Math.random().toString(36).substring(7)}`
+</script>

package/dist/spa/src/afcl/Tooltip.vue

@@ -1,30 +1,34 @@
 <template>
-  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center">
+  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center" @mouseenter="mouseOn" @mouseleave="mouseOff">
       <slot></slot>
   </div>
-  <div
-    role="tooltip"
-    class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
-    ref="tooltip"
-  >
-    <slot name="tooltip"></slot>
-    <div class="tooltip-arrow" data-popper-arrow></div>
-  </div>
-
+  <teleport to="body" v-if="showTooltip">
+    <div
+      role="tooltip"
+      class="absolute z-20 invisible inline-block px-3 py-2 text-sm font-medium text-lightTooltipText dark:darkTooltipText transition-opacity duration-300 bg-lightTooltipBackground rounded-lg shadow-sm opacity-0 tooltip dark:bg-darkTooltipBackground"
+      ref="tooltip"
+    >
+      <slot name="tooltip"></slot>
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, onUnmounted, type Ref } from 'vue';
+import { ref, nextTick, type Ref } from 'vue';
 import { Tooltip } from 'flowbite';
 
 const triggerEl = ref(null);
 const tooltip = ref(null);
-
+const showTooltip = ref(false);
 const tp: Ref<Tooltip|null> = ref(null);
 
-onMounted(async () => {
-  //await one tick when all is mounted
+async function mouseOn() {
+  showTooltip.value = true;
   await nextTick();
+
+  tp.value?.destroy();
+
   tp.value = new Tooltip(
     tooltip.value,
     triggerEl.value,
@@ -33,11 +37,15 @@ onMounted(async () => {
       triggerType: 'hover',
     },
   );
-})
 
+  tp.value.show();
+}
 
-onUnmounted(() => {
-  //destroy tooltip
+function mouseOff() {
+  tp.value?.hide();
   tp.value?.destroy();
-})
+  tp.value = null;
+  showTooltip.value = false;
+}
+
 </script>

package/dist/spa/src/afcl/VerticalTabs.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="md:flex">
-    <ul class="flex-column space-y space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
+    <ul class="ps-6 flex-column space-y space-y-4 text-sm font-medium text-lightVerticalTabsText dark:text-darkVerticalTabsText md:me-4 mb-4 md:mb-0 md:mr-0 mr-6">
       <li v-for="tab in tabs" :key="`${tab}-tab-controll`">
         <a 
           href="#"
-          @click="activeTab = tab"
+          @click="setActiveTab(tab)"
           class="inline-flex items-center px-4 py-3 rounded-lg w-full"
-          :class="tab === activeTab ? 'text-lightPrimaryContrast bg-lightPrimary active dark:bg-darkPrimary' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white'"
+          :class="tab === activeTab ? 'text-lightVerticalTabsTextActive bg-lightVerticalTabsBackgroundActive active dark:bg-darkVerticalTabsBackgroundActive dark:text-darkVerticalTabsTextActive' : 'text-lightVerticalTabsText dark:text-darkVerticalTabsText hover:text-lightVerticalTabsTextHover bg-lightVerticalTabsBackground hover:bg-lightVerticalTabsBackgroundHover dark:bg-darkVerticalTabsBackground dark:hover:bg-darkVerticalTabsBackgroundHover dark:hover:darkVerticalTabsTextHover'"
           aria-current="page"
         >
           <slot :name="`tab:${tab}`"></slot>
         </a>
       </li>
     </ul>
-    <div class="ps-6  text-medium text-gray-500 dark:text-gray-400  w-full ">
+    <div class="ps-6 text-medium text-lightVerticalTabsSlotText dark:text-darkVerticalTabsSlotText  w-full ">
       <slot :name="activeTab"></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, useSlots, ref, type Ref } from 'vue';
+import { onMounted, useSlots, ref, type Ref } from 'vue';
   const tabs : Ref<string[]> = ref([]);
   const activeTab = ref('');
   const props = defineProps({
@@ -31,6 +31,11 @@
   const emites = defineEmits([
     'update:activeTab',
   ]);
+
+  defineExpose({
+    setActiveTab
+  });
+
   onMounted(() => {
     const slots = useSlots();
     tabs.value = Object.keys(slots).reduce((tbs: string[], tb: string) => {
@@ -44,6 +49,10 @@
     }
   });
 
-  
-
+  function setActiveTab(tab: string) {
+    if (tabs.value.includes(tab)) {
+      activeTab.value = tab;
+      emites('update:activeTab', tab);
+    }
+  }
 </script>

package/dist/spa/src/afcl/index.ts

@@ -19,6 +19,9 @@ export { default as Skeleton } from './Skeleton.vue';
 export { default as Dialog } from './Dialog.vue';
 export { default as MixedChart } from './MixedChart.vue';
 export { default as CountryFlag } from './CountryFlag.vue';
-
-
-
+export { default as JsonViewer } from './JsonViewer.vue';
+export { default as Toggle } from './Toggle.vue';
+export { default as DatePicker } from './DatePicker.vue';
+export { default as Textarea } from './Textarea.vue';
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as Card } from './Card.vue';

package/dist/spa/src/components/AcceptModal.vue

@@ -1,29 +1,23 @@
-<script setup lang="ts">
-import { useModalStore } from '@/stores/modal';
-
-const modalStore = useModalStore();
-</script>
-
 <template>
   <Teleport to="body">
-    <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
-        <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
-                <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
+  <div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-[110] w-full h-full overflow-y-auto overflow-x-hidden flex items-center justify-center">
+    <div class="relative p-4 w-full max-w-md max-h-full" >
+            <div class="afcl-confirmation-container relative bg-lightAcceptModalBackground rounded-lg shadow dark:bg-darkAcceptModalBackground dark:shadow-black">
+        <button type="button" @click="modalStore.togleModal" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
                     <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                     </svg>
                     <span class="sr-only">{{ $t('Close modal') }}</span>
                 </button>
                 <div class="p-4 md:p-5 text-center">
-                    <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                    <svg class="mx-auto mb-4 text-lightAcceptModalWarningIcon w-12 h-12 dark:text-darkAcceptModalWarningIcon"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                     </svg>
-                    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
-                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
+                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>
-                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-lightPrimary 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">{{ modalStore?.modalContent?.cancelText }}</button>
+                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
                 </div>
             </div>
         </div>
@@ -32,6 +26,46 @@ const modalStore = useModalStore();
 </Teleport>
 </template>
 
+<script setup lang="ts">
+import { watch, onMounted, nextTick, ref } from 'vue';
+import { useModalStore } from '@/stores/modal';
+import { Modal } from 'flowbite';
+
+const modalStore = useModalStore();
+const modalEl = ref(null);
+const modal = ref(null);
+
+watch( () => modalStore.isOpened, (newVal) => {
+    if (newVal) {
+        open();
+    } else {
+        close();
+    }
+  }
+);
+
+onMounted(async () => {
+  await nextTick();
+  modal.value = new Modal(
+    modalEl.value,
+    {
+      closable: true,
+      backdrop: 'static',
+      backdropClasses: "bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-[100]"
+    }
+  );
+})
+
+function open() {
+  modal.value?.show();
+}
+
+function close() {
+  modal.value?.hide();
+}
+
+</script>
+
 <style scoped>
 .modal {
   position: fixed;

package/dist/spa/src/components/Breadcrumbs.vue

@@ -2,7 +2,7 @@
   <nav class="flex" aria-label="Breadcrumb">
       <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
         <li class="inline-flex items-center">
-          <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-lightPrimary dark:text-gray-400 dark:hover:text-white">
+          <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm font-medium text-lightBreadcrumbsHomepageText hover:text-lightBreadcrumbsHomepageTextHover dark:text-darkBreadcrumbsHomepageText dark:hover:text-darkBreadcrumbsHomepageTextHover">
             <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
               <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
             </svg>
@@ -11,19 +11,19 @@
         </li>
         <li>
           <div class="flex items-center">
-            <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+            <svg class="rtl:rotate-180 w-3 h-3 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
             </svg>
-            <RouterLink :to="{name: 'resource-list', params: { resourceId: $route.params.resourceId }}" class="text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">{{ coreStore.resourceById[$route.params.resourceId]?.label }}</RouterLink>
+            <RouterLink :to="{name: 'resource-list', params: { resourceId: $route.params.resourceId }}" class="text-sm font-medium text-lightBreadcrumbsText md:ms-2 dark:text-darkBreadcrumbsText">{{ coreStore.resourceById[$route.params.resourceId]?.label }}</RouterLink>
           </div>
         </li>
 
         <li v-if="$route.params.primaryKey">
           <div class="flex items-center">
-            <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+            <svg class="rtl:rotate-180 w-3 h-3 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
             </svg>
-            <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400
+            <span class="ms-1 text-sm font-medium text-lightBreadcrumbsText md:ms-2 dark:text-darkBreadcrumbsText
               max-w-80 truncate">
               {{ $route.name === 'resource-edit' ? $t('Edit') : $t('Show') }} {{ coreStore.record?._label }}</span>
           </div>

package/dist/spa/src/components/ColumnValueInput.vue

@@ -17,14 +17,29 @@
     <Select
       v-else-if="column.foreignResource"
       ref="input"
+      :key="`${column.name}-${(columnOptions[column.name] || []).length}`"
       class="w-full min-w-24"
       :options="columnOptions[column.name] || []"
+      :searchDisabled="!column.foreignResource.searchableFields"
+      @scroll-near-end="loadMoreOptions && loadMoreOptions(column.name)"
+      @search="(searchTerm) => {
+        if (column.foreignResource.searchableFields && onSearchInput && onSearchInput[column.name]) {
+          onSearchInput[column.name](searchTerm);
+        }
+      }"
       teleportToBody
       :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
       :modelValue="value"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
-    />
+    >
+      <template #extra-item v-if="columnLoadingState && columnLoadingState[column.name]?.loading">
+        <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
+          <Spinner class="w-4 h-4" />
+          {{ $t('Loading...') }}
+        </div>
+      </template>
+    </Select>
     <Select
       v-else-if="column.enum"
       ref="input"
@@ -52,6 +67,7 @@
       step="1"
       class="w-40"
       placeholder="0"
+      :fullWidth="true"
       :min="![undefined, null].includes(column.minValue) ? column.minValue : ''"
       :max="![undefined, null].includes(column.maxValue) ? column.maxValue : ''"
       :prefix="column.inputPrefix"
@@ -60,7 +76,7 @@
       :modelValue="value"
       @update:modelValue="$emit('update:modelValue', $event)"
     />
-    <CustomDatePicker
+    <DatePicker
       v-else-if="['datetime', 'date', 'time'].includes(type || column.type)"
       ref="input"
       :column="column"
@@ -76,6 +92,7 @@
       step="0.1"
       class="w-40"
       placeholder="0.0"
+      :fullWidth="true"
       :min="![undefined, null].includes(column.minValue) ? column.minValue : ''"
       :max="![undefined, null].includes(column.maxValue) ? column.maxValue : ''"
       :prefix="column.inputPrefix"
@@ -84,28 +101,25 @@
       @update:modelValue="$emit('update:modelValue', $event)"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
     />
-    <textarea
+    <Textarea
       v-else-if="['text', 'richtext'].includes(type || column.type)"
-      ref="input"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
       :placeholder="$t('Text')"
-      :value="value"
-      @input="$emit('update:modelValue', $event.target.value)"
+      :modelValue="value"
+      @update:modelValue="$emit('update:modelValue', $event)"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
     />
-    <textarea
+    <Textarea
       v-else-if="['json'].includes(type || column.type)"
-      ref="input"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
       :placeholder="$t('Text')"
-      :value="value"
-      @input="$emit('update:modelValue', $event.target.value)"
+      :modelValue="value"
+      @update:modelValue="$emit('update:modelValue', $event)"
     />
     <Input
       v-else
       ref="input"
       :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
       class="w-full"
+      :fullWidth="true"
       :placeholder="$t('Text')"
       :prefix="column.inputPrefix"
       :suffix="column.inputSuffix"
@@ -123,7 +137,7 @@
       class="h-6 inset-y-2 right-0 flex items-center px-2 pt-4 z-index-100 focus:outline-none"
       @click="$emit('delete')"
     >
-      <IconTrashBinSolid class="w-6 h-6 text-gray-400"/>
+      <IconTrashBinSolid class="w-6 h-6 text-lightInputIcons dark:text-darkInputIcons"/>
     </button>
     <button
       v-else-if="column.masked"
@@ -131,18 +145,20 @@
       @click="$emit('update:unmasked')"
       class="h-6 inset-y-2 right-0 flex items-center px-2 pt-4 z-index-100 focus:outline-none"
     >
-      <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked[column.name]"/>
-      <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
+      <IconEyeSolid class="w-6 h-6 text-lightInputIcons dark:text-darkInputIcons"  v-if="!unmasked[column.name]"/>
+      <IconEyeSlashSolid class="w-6 h-6 text-lightInputIcons dark:text-darkInputIcons" v-else />
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
   import { IconEyeSlashSolid, IconEyeSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
-  import CustomDatePicker from "@/components/CustomDatePicker.vue";
+  import DatePicker from "@/afcl/DatePicker.vue";
   import Select from '@/afcl/Select.vue';
   import Input from '@/afcl/Input.vue';
-  import { ref } from 'vue';
+  import Spinner from '@/afcl/Spinner.vue';
+  import Textarea from '@/afcl/Textarea.vue';
+  import { ref, inject } from 'vue';
   import { getCustomComponent } from '@/utils';
   import { useI18n } from 'vue-i18n';
   import { useCoreStore } from '@/stores/core';
@@ -171,7 +187,11 @@
     }
   );
 
-  const input = ref(null);
+  const columnLoadingState = inject('columnLoadingState', {} as any);
+  const onSearchInput = inject('onSearchInput', {} as any);
+  const loadMoreOptions = inject('loadMoreOptions', (() => {}) as any);
+
+const input = ref<HTMLInputElement | null>(null);
 
   const getBooleanOptions = (column: any) => {
     const options: Array<{ label: string; value: boolean | null }> = [

package/dist/spa/src/components/ColumnValueInputWrapper.vue

@@ -13,12 +13,13 @@
         :currentValues="currentValues"
         :mode="mode"
         :columnOptions="columnOptions"
+        :unmasked="unmasked"
         :deletable="!column.editReadonly"
         @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
         @update:unmasked="$emit('update:unmasked', column.name)"
         @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
         @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
-        @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
+        @delete="setCurrentValue(column.name, currentValues[column.name].filter((_: any, index: any) => index !== arrayItemIndex))"
       />
     </div>
     <div class="flex items-center">
@@ -26,7 +27,7 @@
         v-if="!column.editReadonly"
         type="button"
       @click="addArrayItem"
-      class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary 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"
+      class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-lightInputText focus:outline-none bg-lightInputBackground rounded border border-lightInputBorder hover:bg-lightInputBackgroundHover hover:text-lightInputTextHover hover:border-lightInputBorderHover focus:z-10 focus:ring-4 focus:ring-lightInputFocusRing dark:focus:ring-darkInputFocusRing dark:bg-darkInputBackground dark:text-darkInputText dark:border-darkInputBorder dark:hover:darkInputTextHover dark:hover:bg-darkInputHover"
       :class="{'mt-2': currentValues[column.name].length}"
     >
       <IconPlusOutline class="w-4 h-4 me-2"/>
@@ -70,7 +71,7 @@
   
   const emit = defineEmits(['update:unmasked', 'update:inValidity', 'update:emptiness', 'focus-last-input']);
   
-  const arrayItemRefs = ref([]);
+  const arrayItemRefs = ref<HTMLInputElement[]>([]);
   
   async function addArrayItem() {
     props.setCurrentValue(props.column.name, props.currentValues[props.column.name], props.currentValues[props.column.name].length);

package/dist/spa/src/components/CustomDateRangePicker.vue

@@ -3,21 +3,21 @@
     <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: column.type === 'time'}">
       <div class="relative">
         <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
+          <IconCalendar class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon"/>
         </div>
 
         <input ref="datepickerStartEl" type="text"
-               class="bg-gray-50 border leading-none 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-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+               class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
                :placeholder="$t('From')">
       </div>
 
       <div class="relative">
         <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
+          <IconCalendar class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon"/>
         </div>
 
         <input ref="datepickerEndEl" type="text"
-               class="bg-gray-50 border leading-none 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-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+               class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
                :placeholder="$t('To')">
       </div>
     </div>
@@ -27,11 +27,11 @@
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
+              <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
 
             <input v-model="startTime" type="time" id="start-time"
-                   class="bg-gray-50 border leading-none 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-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    value="00:00" required/>
           </div>
         </div>
@@ -39,11 +39,11 @@
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
+              <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
 
             <input v-model="endTime" type="time" id="end-time"
-                   class="bg-gray-50 border leading-none 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-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    value="00:00" required/>
           </div>
         </div>
@@ -172,6 +172,7 @@ function updateFromProps() {
   if (!props.valueEnd) {
     datepickerEndEl.value.value = '';
     endTime.value = '';
+    endDate.value = '';
   } else if (props.column.type === 'time') {
     endTime.value = props.valueEnd;
   } else {

package/dist/spa/src/components/CustomRangePicker.vue

@@ -4,7 +4,7 @@
       :min="minFormatted"
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
-      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-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-blue-500 dark:focus:border-blue-500"
       :placeholder="$t('From')"
       v-model="start"
     >
@@ -13,7 +13,7 @@
       :min="minFormatted"
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
-      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-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-blue-500 dark:focus:border-blue-500"
       :placeholder="$t('To')"
       v-model="end"
     >
@@ -21,7 +21,7 @@
     <button
       v-if="isChanged"
       type="button"
-      class="flex items-center p-0.5 ml-auto 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-lightPrimary 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 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="flex items-center p-0.5 ml-auto px-3 text-sm font-medium text-lightRangePickerButtonText focus:outline-none bg-lightRangePickerButtonBackground rounded border border-lightRangePickerButtonBorder hover:bg-lightRangePickerButtonBackgroundHover hover:text-lightRangePickerButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightRangePickerFocusRing dark:focus:ring-darkRangePickerFocusRing dark:bg-darkRangePickerButtonBackground dark:text-darkRangePickerButtonText dark:border-darkRangePickerButtonBorder dark:hover:text-darkRangePickerButtonTextHover dark:hover:bg-darkRangePickerButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
       @click="clear">Clear
     </button>
 
@@ -57,15 +57,15 @@ const props = defineProps({
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 
-const minFormatted = computed(() => Math.floor(props.min));
-const maxFormatted = computed(() => Math.ceil(props.max));
+const minFormatted = computed(() => Math.floor(<number>props.min));
+const maxFormatted = computed(() => Math.ceil(<number>props.max));
 
 const isChanged = computed(() => {
   return start.value && start.value !== minFormatted.value || end.value && end.value !== maxFormatted.value;
 });
 
-const start = ref(props.valueStart);
-const end = ref(props.valueEnd);
+const start = ref<string | number>(props.valueStart);
+const end = ref<string | number>(props.valueEnd);
 
 const sliderValue = ref([minFormatted.value, maxFormatted.value]);
 
@@ -118,7 +118,7 @@ const clear = () => {
   setSliderValues('', '')
 }
 
-function setSliderValues(start, end) {
+function setSliderValues(start: any, end: any) {
   sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
 }
 </script>
@@ -153,4 +153,33 @@ function setSliderValues(start, end) {
       @apply bg-lightPrimaryOpacity;
     }
 }
+
+.dark .custom-slider {
+  &:deep(.vue-slider-rail) {
+    background-color: rgb(55 65 81); // gray-700
+  }
+
+  &:deep(.vue-slider-dot-handle) {
+    @apply bg-darkPrimary;
+    border: none;
+    box-shadow: none;
+  }
+
+  &:deep(.vue-slider-dot-handle:hover) {
+    @apply bg-darkPrimary;
+    filter: brightness(1.1);
+    border: none;
+    box-shadow: none;
+  }
+
+  &:deep(.vue-slider-process) {
+    @apply bg-darkPrimaryOpacity;
+  }
+
+  &:deep(.vue-slider-process:hover) {
+    filter: brightness(1.1);
+    @apply bg-darkPrimaryOpacity;
+  }
+}
+
 </style>