fix: resolve warnings in console

Author: kulikp1

adminforth/spa/package-lock.json

@@ -23,6 +23,7 @@
     "async-mutex": "^0.5.0",
     "dayjs": "^1.11.11",
     "debounce": "^2.1.0",
+    "dompurify": "^3.4.1",
     "flowbite-datepicker": "^1.2.6",
     "javascript-time-ago": "^2.5.11",
     "lodash.debounce": "^4.0.8",

adminforth/spa/package.json

@@ -104,6 +104,10 @@ async function close() {
   isModalOpen.value = false;
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 defineExpose({
   open: open,
   close: close,

adminforth/spa/pnpm-lock.yaml

@@ -18,7 +18,7 @@
       v-model="end"
     >
 
-    <div v-if="min && max" class="w-full px-2.5">
+    <div v-if="min !== undefined && max !== undefined" class="w-full px-2.5">
       <RangePicker
         :dot-size="20"
         height="7.99px"
@@ -36,91 +36,79 @@ import debounce from 'debounce'
 import RangePicker from './RangePicker.vue';
 
 const props = defineProps<{
-  valueStart: number | null,
-  valueEnd: number | null,
-  min: number,
-  max: number,
+  valueStart: number | null | string,
+  valueEnd: number | null | string,
+  min: number | string | undefined,
+  max: number | string | undefined,
 }>()
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 
-const minFormatted = computed(() => Math.floor(<number>props.min));
-const maxFormatted = computed(() => Math.ceil(<number>props.max));
+const minFormatted = computed(() => {
+  const v = Number(props.min);
+  return isNaN(v) ? 0 : Math.floor(v);
+});
 
+const maxFormatted = computed(() => {
+  const v = Number(props.max);
+  return isNaN(v) ? 100 : Math.ceil(v);
+});
 
-const start = ref<number | null>(props.valueStart);
-const end = ref<number | null>(props.valueEnd);
+const start = ref<number | null>(
+  props.valueStart === "" || props.valueStart === null ? null : Number(props.valueStart)
+);
+const end = ref<number | null>(
+  props.valueEnd === "" || props.valueEnd === null ? null : Number(props.valueEnd)
+);
 
 const sliderValue = ref<[number, number]>([minFormatted.value, maxFormatted.value]);
 
-watch([start, end], () => {
-  if ( !start.value && end.value ) {
-    setSliderValues(minFormatted.value, end.value);
-  } else if ( start.value && !end.value ) {
-    setSliderValues(start.value, maxFormatted.value);
-  } else if ( !start.value && !end.value ) {
-    setSliderValues(minFormatted.value, maxFormatted.value);
-  } else {
-    setSliderValues(start.value, end.value);
-  }
-})
-
-const updateFromSlider =
-    debounce((value: [number, number]) => {
-      start.value = value[0] === minFormatted.value ? null : value[0];
-      end.value = value[1] === maxFormatted.value ? null : value[1];
-    }, 500);
+function setSliderValues(s: number | null, e: number | null) {
+  sliderValue.value = [s ?? minFormatted.value, e ?? maxFormatted.value];
+}
 
-onMounted(() => {
-  updateStartFromProps();
-  updateEndFromProps();
+watch([start, end], () => {
+  setSliderValues(start.value, end.value);
+});
 
-  watch(() => props.valueStart, (value) => {
-    updateStartFromProps();
-  });
-
-  watch(() => props.valueEnd, (value) => {
-    updateEndFromProps();
-  });
-})
+const updateFromSlider = debounce((value: [number, number]) => {
+  start.value = value[0] === minFormatted.value ? null : value[0];
+  end.value = value[1] === maxFormatted.value ? null : value[1];
+}, 500);
 
 function updateStartFromProps() {
-  if (props.valueStart == start.value) {
-    return;
+  const normalized = (props.valueStart === "" || props.valueStart === null || props.valueStart === undefined) 
+    ? null : Number(props.valueStart);
+  if (normalized !== start.value) {
+    start.value = normalized;
   }
-  start.value = props.valueStart;
-  setSliderValues(start.value, end.value)
 }
 
 function updateEndFromProps() {
-  if (props.valueEnd == end.value) {
-    return;
+  const normalized = (props.valueEnd === "" || props.valueEnd === null || props.valueEnd === undefined) 
+    ? null : Number(props.valueEnd);
+  if (normalized !== end.value) {
+    end.value = normalized;
   }
-  end.value = props.valueEnd;
-  setSliderValues(start.value, end.value)
 }
 
-watch(start, () => {
-  emit('update:valueStart', start.value)
-})
+onMounted(() => {
+  updateStartFromProps();
+  updateEndFromProps();
 
-watch(end, () => {
-  emit('update:valueEnd', end.value);
+  watch(() => props.valueStart, updateStartFromProps);
+  watch(() => props.valueEnd, updateEndFromProps);
+});
+
+watch(start, (newVal) => {
+  emit('update:valueStart', newVal);
 })
 
-watch([minFormatted,maxFormatted], () => {
-  if ( !start.value && end.value ) {
-    setSliderValues(minFormatted.value, end.value);
-  } else if ( start.value && !end.value ) {
-    setSliderValues(start.value, maxFormatted.value);
-  } else if ( !start.value && !end.value ) {
-    setSliderValues(minFormatted.value, maxFormatted.value);
-  } else {
-    setSliderValues(start.value, end.value);
-  }
+watch(end, (newVal) => {
+  emit('update:valueEnd', newVal);
 })
 
-function setSliderValues(start: any, end: any) {
-  sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
-}
+watch([minFormatted, maxFormatted], () => {
+  setSliderValues(start.value, end.value);
+})
 </script>

adminforth/spa/src/afcl/Modal.vue

@@ -372,7 +372,7 @@ import CallActionWrapper from '@/components/CallActionWrapper.vue'
 const coreStore = useCoreStore();
 const { t } = useI18n();
 const { alert, confirm } = useAdminforth();
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   page: number,
   resource: AdminForthResourceFrontend | null,
   rows: any[] | null,
@@ -389,7 +389,9 @@ const props = defineProps<{
   customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration[]
   tableRowReplaceInjection?: AdminForthComponentDeclaration,
   isVirtualScrollEnabled: boolean
-}>();
+}>(), {
+  sort: () => []
+});
 
 //select between all rows or rows, that should be rendered in virtual scroll
 const rowsToRender = computed(() => {

adminforth/spa/src/components/CustomRangePicker.vue

@@ -6,7 +6,7 @@ import { useCoreStore } from '../stores/core';
 import { useUserStore } from '../stores/user';
 import { Dropdown } from 'flowbite';
 import adminforth, { useAdminforth } from '../adminforth';
-import sanitizeHtml  from 'sanitize-html'
+import DOMPurify  from 'dompurify'
 import debounce from 'debounce';
 import type { AdminForthActionFront, AdminForthResourceColumnInputCommon, AdminForthResourceFrontend, Predicate } from '@/types/Common';
 import { i18nInstance } from '../i18n'
@@ -337,26 +337,24 @@ export function humanifySize(size: number) {
 }
 
 export function protectAgainstXSS(value: string) {
-  return sanitizeHtml(value, {
-    allowedTags: [
-      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
-      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
-      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
-      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
-      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
-      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
-      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img', 'video', 'source'
+  return DOMPurify.sanitize(value, {
+    ALLOWED_TAGS: [
+      "address","article","aside","footer","header","h1","h2","h3","h4",
+      "h5","h6","hgroup","main","nav","section","blockquote","dd","div",
+      "dl","dt","figcaption","figure","hr","li","ol","p","pre",
+      "ul","a","abbr","b","bdi","bdo","br","cite","code","data","dfn",
+      "em","i","kbd","mark","q","rb","rp","rt","rtc","ruby","s","samp",
+      "small","span","strong","sub","sup","time","u","var","wbr","caption",
+      "col","colgroup","table","tbody","td","tfoot","th","thead","tr",
+      "img","video","source"
     ],
-    allowedAttributes: {
-      'li': [ 'data-list' ],
-      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ],
-      'video': [ 'src', 'controls', 'autoplay', 'loop', 'muted', 'poster', 'width', 'height', 'autoplay', 'playsinline' ],
-      'source': [ 'src', 'type' ],
-      // Allow  markup on spans (classes & styles), and
-      // generic data/aria/style attributes on any element. (e.g. for KaTeX-related previews)
-      'span': [ 'class', 'style' ],
-      '*': [ 'data-*', 'aria-*', 'style' ]
-    },
+    ALLOWED_ATTR: [
+      "data-list",
+      "src","srcset","alt","title","width","height","loading",
+      "controls","autoplay","loop","muted","poster","playsinline",
+      "class","style",
+      "data-*","aria-*"
+    ]
   });
 }
 

adminforth/spa/src/components/ResourceListTable.vue

@@ -224,7 +224,7 @@ import { getCustomComponent, initThreeDotsDropdown, getList, startBulkAction } f
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { Tooltip, Spinner } from '@/afcl'
 import type { AdminForthComponentDeclaration, AdminForthComponentDeclarationFull, AdminForthFilterOperators, AdminForthResourceColumnCommon } from '@/types/Common';
-
+import { useI18n } from 'vue-i18n';
 
 import {
   IconBanOutline,
@@ -235,6 +235,8 @@ import {
 import Filters from '@/components/Filters.vue';
 import { useAdminforth } from '@/adminforth';
 
+const { t } = useI18n();
+
 const filtersShow = ref(false);
 const { list, alert } = useAdminforth();
 const coreStore = useCoreStore();