adminforth 4.5.0 → 4.5.1

package/dist/spa/package-lock.json

@@ -50,7 +50,6 @@
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
         "flag-icons": "^7.2.3",
-        "flowbite": "^3.1.2",
         "i18n-iso-countries": "^7.12.0",
         "npm-run-all2": "^9.0.2",
         "portfinder": "^1.0.32",
@@ -3111,19 +3110,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/flowbite": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-3.1.2.tgz",
-      "integrity": "sha512-MkwSgbbybCYgMC+go6Da5idEKUFfMqc/AmSjm/2ZbdmvoKf5frLPq/eIhXc9P+rC8t9boZtUXzHDgt5whZ6A/Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@popperjs/core": "^2.9.3",
-        "flowbite-datepicker": "^1.3.1",
-        "mini-svg-data-uri": "^1.4.3",
-        "postcss": "^8.5.1"
-      }
-    },
     "node_modules/flowbite-datepicker": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.3.2.tgz",

package/dist/spa/package.json

@@ -55,7 +55,6 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "flag-icons": "^7.2.3",
-    "flowbite": "^3.1.2",
     "i18n-iso-countries": "^7.12.0",
     "npm-run-all2": "^9.0.2",
     "portfinder": "^1.0.32",

package/dist/spa/pnpm-lock.yaml

@@ -129,9 +129,6 @@ importers:
       flag-icons:
         specifier: ^7.2.3
         version: 7.5.0
-      flowbite:
-        specifier: ^3.1.2
-        version: 3.1.2(rollup@4.60.2)
       i18n-iso-countries:
         specifier: ^7.12.0
         version: 7.14.0
@@ -1308,9 +1305,6 @@ packages:
   flowbite@2.5.2:
     resolution: {integrity: sha512-kwFD3n8/YW4EG8GlY3Od9IoKND97kitO+/ejISHSqpn3vw2i5K/+ZI8Jm2V+KC4fGdnfi0XZ+TzYqQb4Q1LshA==}
 
-  flowbite@3.1.2:
-    resolution: {integrity: sha512-MkwSgbbybCYgMC+go6Da5idEKUFfMqc/AmSjm/2ZbdmvoKf5frLPq/eIhXc9P+rC8t9boZtUXzHDgt5whZ6A/Q==}
-
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
@@ -3263,15 +3257,6 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  flowbite@3.1.2(rollup@4.60.2):
-    dependencies:
-      '@popperjs/core': 2.11.8
-      flowbite-datepicker: 1.3.2(rollup@4.60.2)
-      mini-svg-data-uri: 1.4.4
-      postcss: 8.5.30
-    transitivePeerDependencies:
-      - rollup
-
   fraction.js@5.3.4: {}
 
   fs.realpath@1.0.0: {}

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

@@ -1,87 +1,111 @@
 <template>
-  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center" @mouseenter="mouseOn" @mouseleave="mouseOff">
+  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center" :style="{ anchorName }" @mouseenter="show" @mouseleave="hide">
       <slot></slot>
   </div>
-  <teleport to="body" v-if="showTooltip">
+  <teleport to="body" v-if="isOpen">
     <div
+      ref="tooltipEl"
+      popover="manual"
       role="tooltip"
-      class="absolute z-[100] invisible inline-block px-2.5 py-1.5 text-xs font-medium text-lightTooltipText dark:text-darkTooltipText transition-opacity duration-150 bg-lightTooltipBackground rounded-md shadow-popover opacity-0 tooltip dark:bg-darkTooltipBackground dark:shadow-darkPopover"
-      ref="tooltip"
+      :data-placement="placement"
+      :style="{ positionAnchor: anchorName }"
+      class="afcl-tooltip-popover inline-block px-2.5 py-1.5 text-xs font-medium text-lightTooltipText dark:text-darkTooltipText transition-opacity duration-150 bg-lightTooltipBackground rounded-md shadow-popover dark:bg-darkTooltipBackground dark:shadow-darkPopover"
     >
       <slot name="tooltip"></slot>
-      <div class="tooltip-arrow" data-popper-arrow></div>
+      <div class="afcl-tooltip-arrow" :style="{ left: `${arrowLeft}px` }"></div>
     </div>
   </teleport>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, type Ref } from 'vue';
-import { Tooltip } from 'flowbite';
+import { ref, nextTick, onBeforeUnmount, useId } from 'vue';
 
-const triggerEl = ref(null);
-const tooltip = ref(null);
-const showTooltip = ref(false);
-const tp: Ref<Tooltip|null> = ref(null);
+const OFFSET = 8;
+const SUPPORTS_ANCHOR = CSS.supports('anchor-name: --a');
 
-async function mouseOn() {
-  showTooltip.value = true;
+const anchorName = `--afcl-tooltip-${useId()}`;
+const triggerEl = ref<HTMLElement>();
+const tooltipEl = ref<HTMLElement>();
+const isOpen = ref(false);
+const placement = ref<'top' | 'bottom'>('bottom');
+const arrowLeft = ref(0);
+
+async function show() {
+  isOpen.value = true;
   await nextTick();
+  tooltipEl.value!.showPopover();
 
-  tp.value?.destroy();
+  const trigger = triggerEl.value!.getBoundingClientRect();
+  if (!SUPPORTS_ANCHOR) {
+    placeByRect(trigger);
+  }
+  const tooltip = tooltipEl.value!.getBoundingClientRect();
+  placement.value = tooltip.top < trigger.top ? 'top' : 'bottom';
+  arrowLeft.value = trigger.left + trigger.width / 2 - tooltip.left;
 
-  tp.value = new Tooltip(
-    tooltip.value,
-    triggerEl.value,
-    {
-      placement: 'bottom',
-      triggerType: 'hover',
-    },
-  );
+  document.addEventListener('keydown', onKeydown);
+}
 
-  tp.value.show();
+function hide() {
+  isOpen.value = false;
+  document.removeEventListener('keydown', onKeydown);
 }
 
-function mouseOff() {
-  tp.value?.hide();
-  tp.value?.destroy();
-  tp.value = null;
-  showTooltip.value = false;
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    hide();
+  }
 }
 
+// Safari before 26 and Firefox before 147 have no CSS anchor positioning
+function placeByRect(trigger: DOMRect) {
+  const el = tooltipEl.value!;
+  const { width, height } = el.getBoundingClientRect();
+  const fitsBelow = trigger.bottom + OFFSET + height <= window.innerHeight;
+  const top = fitsBelow ? trigger.bottom + OFFSET : trigger.top - OFFSET - height;
+  const left = Math.min(Math.max(trigger.left + (trigger.width - width) / 2, 0), window.innerWidth - width);
+  el.style.top = `${top}px`;
+  el.style.left = `${left}px`;
+}
+
+onBeforeUnmount(hide);
 </script>
 
 <style>
-.tooltip .tooltip-arrow,
-.tooltip .tooltip-arrow::before {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-}
-
-.tooltip .tooltip-arrow {
-  visibility: hidden;
+/* popover puts the tooltip into the top layer, so no z-index and no clipping by overflow of the parents */
+.afcl-tooltip-popover {
+  inset: auto;
+  margin: 0;
+  overflow: visible;
 }
 
-.tooltip .tooltip-arrow::before {
-  visibility: visible;
-  content: '';
-  transform: rotate(45deg);
+@supports (anchor-name: --a) {
+  .afcl-tooltip-popover {
+    position-area: bottom;
+    position-try-fallbacks: flip-block;
+    margin-top: 8px;
+  }
 }
 
-.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
-  bottom: -4px;
+@starting-style {
+  .afcl-tooltip-popover {
+    opacity: 0;
+  }
 }
 
-.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
-  top: -4px;
+.afcl-tooltip-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  transform: translateX(-50%) rotate(45deg);
 }
 
-.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
-  right: -4px;
+.afcl-tooltip-popover[data-placement='top'] > .afcl-tooltip-arrow {
+  bottom: -4px;
 }
 
-.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
-  left: -4px;
+.afcl-tooltip-popover[data-placement='bottom'] > .afcl-tooltip-arrow {
+  top: -4px;
 }
-</style>
+</style>

package/dist/spa/src/views/ListView.vue

@@ -35,7 +35,6 @@
       <template v-if="isResourceReady && checkboxes.length" #selection>
         <Button
           @click="()=>{checkboxes = []}"
-          data-tooltip-target="tooltip-remove-all"
           variant="secondary"
           iconOnly
         >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",