Merge branch 'next' into AdminForth/676

Author: yaroslav8765

adminforth/dataConnectors/mongo.ts

@@ -97,7 +97,7 @@ class MongoConnector extends AdminForthBaseConnector implements IAdminForthDataS
             if (
                 value &&
                 typeof value === 'object' &&
-                ('$numberDecimal' in value || value._bsontype === 'Decimal128')
+                ('$numberDecimal' in value || (value as any)._bsontype === 'Decimal128')
               ) {
               addType(fullKey, 'decimal');
               return;

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -217,5 +217,4 @@ customization: {
   ]
 }
 
-
 ```

adminforth/modules/styles.ts

@@ -60,7 +60,14 @@ export const styles = () => ({
     lightButtonsDisabledText: "#f3f4f6", // button disabled text
     lightButtonsIcon: "#333333", // button icon
 
+    lightDropdownButtonsBackground: "#f9fafb", // dropdown button/input background color
+    lightDropownButtonsBorder: "#d1d5db", //border color
+    lightDropdownButtonsText: "#6b7280", //text color
+    lightDropdownButtonsPlaceholderText: "#6b7280", //placeholder text color
 
+    lightDropdownOptionsBackground: "#FFFFFF", //dropdown menu background color
+    lightDropdownOptionsHoverBackground: "#f3f4f6", //dropdown menu hover background color 
+    lightDropdownOptionsText: "#000000", //dropdown menu hover background color
 
     // colors for dark theme
     darkHtml: "#111827",
@@ -102,7 +109,16 @@ export const styles = () => ({
 
     darkForm: "#111111", 
     darkFormBorder: "#222222", 
-    darkFormHeading: "alias:darkListTableHeading" 
+    darkFormHeading: "alias:darkListTableHeading",
+
+    darkDropdownButtonsBackground: "#374151",
+    darkDropownButtonsBorder: "#4b5563",
+    darkDropdownButtonsText: "#ffffff",
+    darkDropdownButtonsPlaceholderText: "#9ca3af",
+
+    darkDropdownOptionsBackground: "#374151",
+    darkDropdownOptionsHoverBackground: "#4b5563",
+    darkDropdownOptionsText: "#9ca3af",
 
   },
   boxShadow: {

adminforth/spa/src/afcl/Select.vue

@@ -10,7 +10,9 @@
         v-model="search"
         @click="inputClick"
         @input="inputInput"
-        class="block w-full pl-3 pr-10 py-2.5 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out 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"
+        class="block w-full pl-3 pr-10 py-2.5 border border-lightDropownButtonsBorder rounded-md leading-5 bg-lightDropdownButtonsBackground 
+        placeholder-lightDropdownButtonsPlaceholderText text-lightDropdownButtonsText sm:text-sm transition duration-150 ease-in-out dark:bg-darkDropdownButtonsBackground dark:border-darkDropownButtonsBorder dark:placeholder-darkDropdownButtonsPlaceholderText
+      dark:text-darkDropdownButtonsText focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
         autocomplete="off" data-custom="no-autofill"
         :placeholder="
           selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
@@ -36,19 +38,19 @@
     </div>
     <teleport to="body" v-if="teleportToBody && showDropdown">
       <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop}"
-        class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
+        class="fixed z-[5] w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground
           dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
         <div
           v-for="item in filteredItems"
           :key="item.value"
-          class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400"
+          class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
           :class="{ 'bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity': selectedItems.includes(item) }"
           @click="toogleItem(item)"
         >
           <slot name="item" :option="item"></slot>
           <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
         </div>
-        <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
+        <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
           {{ options.length ? $t('No results found') : $t('No items here') }}
         </div>
 
@@ -59,22 +61,22 @@
     </teleport>
 
     <div v-if="!teleportToBody && showDropdown" ref="dropdownEl" :style="dropdownStyle" :class="{'shadow-none': isTop}"
-      class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
+      class="absolute z-10 mt-1 w-full bg-lightDropdownOptionsBackground shadow-lg text-lightDropdownOptionsText dark:shadow-black dark:bg-darkDropdownOptionsBackground
         dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
       <div
         v-for="item in filteredItems"
         :key="item.value"
-        class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400"
+        class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground dark:text-darkDropdownOptionsText"
         :class="{ 'bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity': selectedItems.includes(item) }"
         @click="toogleItem(item)"
       >
         <slot name="item" :option="item"></slot>
         <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
       </div>
-      <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
+      <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
         {{ options.length ? $t('No results found') : $t('No items here') }}
       </div>
-      <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-gray-400">
+      <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-darkDropdownOptionsText">
         <slot name="extra-item"></slot>
       </div>