adminforth 4.4.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/CountryFlag.vue

@@ -1,14 +1,48 @@
 <template>
-  <div class="aspect-[4/3] w-8 h-6 flex items-center justify-center">
-    <img v-if="flagUrl" :src="flagUrl" :alt="countryCode" class="flag-icon h-full object-contain rounded-sm"/>
+  <span v-bind="restAttrs" :class="rootClasses">
+    <!-- a hairline edge keeps white stripes visible on a white page -->
+    <img
+      v-if="flagUrl"
+      :src="flagUrl"
+      :alt="countryCode"
+      class="block w-full h-full object-cover ring-1 ring-black/10 dark:ring-white/10"
+      :class="IMAGE_RADIUS[size]"
+    />
     <span v-else-if="getFlagUrl && countryCode">{{ countryCode }}</span>
-  </div>
+  </span>
 </template>
 
 <script setup lang="ts">
-import { computed, shallowRef } from 'vue';
+import { computed, shallowRef, useAttrs } from 'vue';
+import { type ClassNameValue } from 'tailwind-merge';
+import { mergeClasses } from './classMerge';
 
-const props = defineProps(['countryCode']);
+type CountryFlagSize = 'sm' | 'md';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{
+  countryCode?: string,
+  // sm is 16×12 for menus, lists and selects, md is 32×24
+  size?: CountryFlagSize,
+}>(), {
+  size: 'md',
+});
+
+const SIZES: Record<CountryFlagSize, string> = { sm: 'w-4 h-3', md: 'w-8 h-6' };
+const IMAGE_RADIUS: Record<CountryFlagSize, string> = { sm: 'rounded-[2px]', md: 'rounded-[3px]' };
+
+const attrs = useAttrs();
+const restAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const rootClasses = computed(() => mergeClasses(
+  'afcl-country-flag inline-flex shrink-0 items-center justify-center',
+  SIZES[props.size],
+  attrs.class as ClassNameValue,
+));
 
 // the map of flag URLs is loaded when a flag is shown for the first time
 const getFlagUrl = shallowRef<(countryCode: string) => string | undefined>();
@@ -18,12 +52,3 @@ import('./countryFlagUrls').then((module) => {
 
 const flagUrl = computed(() => props.countryCode && getFlagUrl.value?.(props.countryCode));
 </script>
-
-<style scoped>
-    .flag-icon {
-        box-shadow: inset -0.3px -0.3px 0.3px 0px rgba(0 0 0 / 0.2),
-            inset 0.3px 0.3px 0.3px 0px rgba(255 255 255 / 0.2),
-            0px 0px 3px #00000030;
-        width: auto;
-    }
-</style>

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/components/ValueRenderer.vue

@@ -12,7 +12,7 @@
       >
         <RouterLink
           v-if="foreignResource && foreignResource?.pk"
-          class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
+          class="font-medium hover:underline whitespace-nowrap"
           :to="{
             name: 'resource-show',
             params: {

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.4.0",
+  "version": "4.5.1",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",