@globalbrain/sefirot 4.30.1 → 4.32.0

package/client.d.ts

@@ -7,3 +7,8 @@ declare module 'v-calendar' {
   export * from 'v-calendar/dist/types/src/index.d.ts'
   export { default } from 'v-calendar/dist/types/src/index.d.ts'
 }
+
+interface NumberConstructor {
+  isFinite(value: unknown): value is number
+  isInteger(value: unknown): value is number
+}

package/config/nuxt.d.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line ts/ban-ts-comment
 // @ts-ignore
 declare const defineConfig: import('nuxt/config').DefineNuxtConfig
 

package/config/nuxt.js

@@ -5,25 +5,28 @@ import icons from 'unplugin-icons/nuxt'
 import { mergeConfig } from 'vite'
 import { baseConfig as baseViteConfig } from './vite.js'
 
-delete baseViteConfig.plugins
-delete baseViteConfig.resolve?.alias
-
 export const baseConfig = {
   alias: { sefirot: fileURLToPath(new URL('../lib', import.meta.url)) },
   app: { teleportId: 'sefirot-modals' },
   modules: [
     /**
+     * @this {any}
      * @param {any} _
      * @param {any} nuxt
      */
     function (_, nuxt) {
-      // eslint-disable-next-line @typescript-eslint/no-invalid-this
       return icons.bind(this, { scale: 1 }, nuxt)()
     }
   ],
   postcss: { plugins: { 'postcss-nested': {} } },
   telemetry: false,
-  vite: baseViteConfig
+  vite: {
+    ...baseViteConfig,
+    resolve: { ...baseViteConfig.resolve, alias: {} },
+    plugins: baseViteConfig.plugins?.filter(
+      (plugin) => plugin && 'name' in plugin && plugin.name !== 'unplugin-icons'
+    )
+  }
 }
 
 export function defineConfig(config = {}) {

package/config/vite.js

@@ -1,16 +1,5 @@
 // @ts-check
 
-/**
- * Adapted from
- * @see https://github.com/unplugin/unplugin-icons/blob/67fd9b7791dc1754cb8dc46b854b22c8bb4cf380/src/core/compilers/vue3.ts
- * @see https://github.com/unplugin/unplugin-icons/blob/639ec9691e022e52c641d0f96f585dbf04dab095/src/core/svgId.ts
- *
- * Original licenses:
- *
- * Copyright (c) 2020 Anthony Fu <https://github.com/antfu>
- * @license MIT
- */
-
 import { fileURLToPath } from 'node:url'
 import MagicString from 'magic-string'
 import icons from 'unplugin-icons/vite'
@@ -48,6 +37,7 @@ export const baseConfig = {
 
     // list the client-side direct dependencies/peerDependencies which get bundled
     dedupe: [
+      '@popperjs/core',
       '@sentry/browser',
       '@sentry/vue',
       '@tanstack/vue-virtual',
@@ -84,9 +74,10 @@ export const baseConfig = {
       'dayjs/plugin/relativeTime',
       'dayjs/plugin/timezone',
       'dayjs/plugin/utc',
+      'file-saver',
+      'isomorphic-dompurify',
       'markdown-it > argparse',
-      'markdown-it > entities',
-      'file-saver'
+      'markdown-it > entities'
     ],
     exclude: [
       'markdown-it'

package/lib/components/SActionList.vue

@@ -12,8 +12,8 @@ defineProps<{
 <template>
   <div class="SActionList">
     <SActionListItem
-      v-for="item, index in list"
-      :key="index"
+      v-for="(item, i) in list"
+      :key="i"
       :lead-icon="item.leadIcon"
       :label="item.label"
       :link="item.link"

package/lib/components/SActionMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Component, ref } from 'vue'
+import { type Component, ref, useTemplateRef } from 'vue'
 import { type DropdownSection, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import SButton, { type Mode, type Size, type Tooltip, type Type } from './SButton.vue'
@@ -29,21 +29,52 @@ const props = withDefaults(defineProps<{
   dropdownAlign: 'left'
 })
 
-const container = ref<any>(null)
+const containerRef = useTemplateRef('container')
+const dropdownRef = useTemplateRef('dropdown')
 
-const { isOpen, toggle } = useFlyout(container)
-const { position, update: updatePosition } = useManualDropdownPosition(container)
+const { isOpen, toggle } = useFlyout(containerRef)
+const { position: verticalPlacement, update: updateVerticalPlacement } =
+  useManualDropdownPosition(containerRef)
+
+const actualAlign = ref(props.dropdownAlign)
+
+function calculateOptimalAlign(dropdownElement: HTMLElement): 'left' | 'right' {
+  // Temporarily show the dropdown to measure it (similar to tooltip approach)
+  const originalDisplay = dropdownElement.style.display
+  dropdownElement.style.display = 'block'
+  const dropdownRect = dropdownElement.getBoundingClientRect()
+  dropdownElement.style.display = originalDisplay
+
+  const dropdownWidth = dropdownRect.width
+
+  const viewportWidth = window.innerWidth
+  const containerRect = containerRef.value!.getBoundingClientRect()
+
+  const spaceOnRight = viewportWidth - containerRect.left
+  const spaceOnLeft = containerRect.right
+
+  if (props.dropdownAlign === 'left') {
+    return spaceOnRight >= dropdownWidth ? 'left' : 'right'
+  }
+
+  return spaceOnLeft >= dropdownWidth ? 'right' : 'left'
+}
 
 async function onOpen() {
   if (!props.disabled) {
-    updatePosition()
+    updateVerticalPlacement()
+
+    if (dropdownRef.value) {
+      actualAlign.value = calculateOptimalAlign(dropdownRef.value)
+    }
+
     toggle()
   }
 }
 </script>
 
 <template>
-  <div class="SActionMenu" :class="[{ block }, dropdownAlign]" ref="container">
+  <div ref="container" class="SActionMenu" :class="[{ block }, actualAlign]">
     <div class="button">
       <SButton
         :tag
@@ -64,7 +95,12 @@ async function onOpen() {
         @click="onOpen"
       />
     </div>
-    <div v-if="isOpen" class="dropdown" :class="position">
+    <div
+      ref="dropdown"
+      class="dropdown"
+      :class="verticalPlacement"
+      :style="{ display: isOpen ? 'block' : 'none' }"
+    >
       <SDropdown :sections="options" />
     </div>
   </div>

package/lib/components/SAvatar.vue

@@ -28,7 +28,7 @@ const classes = computed(() => [
 const initial = computed(() => props.name?.charAt(0).toUpperCase())
 
 const tooltipPosition = computed(() => {
-  return (props.tooltip && typeof props.tooltip === 'object')
+  return props.tooltip && typeof props.tooltip === 'object'
     ? props.tooltip.position || 'top'
     : 'top'
 })

package/lib/components/SAvatarStack.vue

@@ -27,8 +27,8 @@ const count = computed(() => {
 <template>
   <div class="SAvatarStack" :class="size">
     <SAvatar
-      v-for="(avatar, index) in avatars"
-      :key="index"
+      v-for="(avatar, i) in avatars"
+      :key="i"
       :size
       :avatar="avatar.image"
       :name="avatar.name"
@@ -49,11 +49,11 @@ const count = computed(() => {
     overflow: hidden;
   }
 
-  &.mini > :deep(*):not(:last-child)   { margin-right: -6px }
-  &.small > :deep(*):not(:last-child)  { margin-right: -8px }
-  &.medium > :deep(*):not(:last-child) { margin-right: -8px }
-  &.large > :deep(*):not(:last-child)  { margin-right: -12px }
-  &.jumbo > :deep(*):not(:last-child)  { margin-right: -16px }
+  &.mini > :deep(*):not(:last-child)   { margin-right: -6px; }
+  &.small > :deep(*):not(:last-child)  { margin-right: -8px; }
+  &.medium > :deep(*):not(:last-child) { margin-right: -8px; }
+  &.large > :deep(*):not(:last-child)  { margin-right: -12px; }
+  &.jumbo > :deep(*):not(:last-child)  { margin-right: -16px; }
 }
 
 .more {
@@ -69,10 +69,10 @@ const count = computed(() => {
   z-index: 1;
   height: 100%;
 
-  .mini &   { font-size: 10px }
-  .small &  { font-size: 10px }
-  .medium & { font-size: 12px }
-  .large &  { font-size: 12px }
-  .jumbo &  { font-size: 14px }
+  .mini &   { font-size: 10px; }
+  .small &  { font-size: 10px; }
+  .medium & { font-size: 12px; }
+  .large &  { font-size: 12px; }
+  .jumbo &  { font-size: 14px; }
 }
 </style>

package/lib/components/SButton.vue

@@ -82,9 +82,7 @@ const classes = computed(() => [
 ])
 
 const computedTag = computed(() => {
-  return props.tag
-    ? props.tag
-    : props.href ? SLink : 'button'
+  return props.tag ? props.tag : props.href ? SLink : 'button'
 })
 
 const slots = useSlots()
@@ -96,7 +94,7 @@ const hasTooltip = computed(() => {
   )
 })
 
-function handleClick(): void {
+function onClick(): void {
   if (!props.loading) {
     props.disabled ? emit('disabled-click') : emit('click')
   }
@@ -109,8 +107,8 @@ function handleClick(): void {
     :tag="typeof tooltip === 'object' ? tooltip.tag : undefined"
     :text="typeof tooltip === 'object' ? unref(tooltip.text) : tooltip"
     :position="typeof tooltip === 'object' ? tooltip.position : undefined"
-    :display="typeof tooltip === 'object' ? tooltip.display ?? 'inline-block' : 'inline-block'"
-    :trigger="typeof tooltip === 'object' ? tooltip.trigger ?? 'both' : 'both'"
+    :display="typeof tooltip === 'object' ? (tooltip.display ?? 'inline-block') : 'inline-block'"
+    :trigger="typeof tooltip === 'object' ? (tooltip.trigger ?? 'both') : 'both'"
     :timeout="typeof tooltip === 'object' ? tooltip.timeout : undefined"
     :tabindex="-1"
   >
@@ -121,7 +119,7 @@ function handleClick(): void {
       :class="classes"
       :href
       role="button"
-      @click="handleClick"
+      @click="onClick"
     >
       <span class="content">
         <span v-if="_leadIcon" class="icon" :class="iconMode">

package/lib/components/SCard.vue

@@ -10,13 +10,13 @@ const props = defineProps<{
   mode?: Mode
 }>()
 
+const { isCollapsed } = provideCardState()
+
 const classes = computed(() => [
   props.size,
   props.mode ?? 'neutral',
   { collapsed: isCollapsed.value }
 ])
-
-const { isCollapsed } = provideCardState()
 </script>
 
 <template>

package/lib/components/SChartBar.vue

@@ -83,26 +83,51 @@ function renderChart({
   // Set dimensions and margins
   const vertical = props.type === 'vertical'
 
-  const maxKeyLength = props.data.reduce((a, b) => Math.max(a, b.key.length), Number.NEGATIVE_INFINITY)
-  const maxValueLength = props.data.reduce((a, b) => Math.max(a, b.value.toLocaleString().length), Number.NEGATIVE_INFINITY)
+  const maxKeyLength = props.data.reduce(
+    (a, b) => Math.max(a, b.key.length),
+    Number.NEGATIVE_INFINITY
+  )
+  const maxValueLength = props.data.reduce(
+    (a, b) => Math.max(a, b.value.toLocaleString().length),
+    Number.NEGATIVE_INFINITY
+  )
 
   const maxVerticalTickWidthInCh = vertical ? maxValueLength : maxKeyLength
-  const maxVerticalTickWidthInPx = getTextSize('0'.repeat(maxVerticalTickWidthInCh), `400 ${props.tickFontSize} ${font}`).width
-  const verticalLabelWidthInPx = props.yLabel ? getTextSize(props.yLabel, `400 ${props.yLabelFontSize} ${font}`).height : 0
+  const maxVerticalTickWidthInPx = getTextSize(
+    '0'.repeat(maxVerticalTickWidthInCh),
+    `400 ${props.tickFontSize} ${font}`
+  ).width
+  const verticalLabelWidthInPx = props.yLabel
+    ? getTextSize(props.yLabel, `400 ${props.yLabelFontSize} ${font}`).height
+    : 0
   const gapBetweenVerticalLabelAndTicks = props.yLabel ? props.yLabelTickGap : 0
 
-  const maxHorizontalTickHeightInPx = getTextSize('0', `400 ${props.tickFontSize} ${font}`).height // wrapping isn't supported
-  const horizontalLabelHeightInPx = props.xLabel ? getTextSize(props.xLabel, `400 ${props.xLabelFontSize} ${font}`).height : 0
+  const maxHorizontalTickHeightInPx = getTextSize(
+    '0',
+    `400 ${props.tickFontSize} ${font}`
+  ).height // wrapping isn't supported
+  const horizontalLabelHeightInPx = props.xLabel
+    ? getTextSize(props.xLabel, `400 ${props.xLabelFontSize} ${font}`).height
+    : 0
   const gapBetweenHorizontalLabelAndTicks = props.xLabel ? props.xLabelTickGap : 0
 
-  const xLabelOffset = props.xLabelOffset ?? horizontalLabelHeightInPx + 9 + maxHorizontalTickHeightInPx + gapBetweenHorizontalLabelAndTicks
-  const yLabelOffset = props.yLabelOffset ?? 9 + maxVerticalTickWidthInPx + gapBetweenVerticalLabelAndTicks
+  const xLabelOffset = props.xLabelOffset
+    ?? horizontalLabelHeightInPx + 9 + maxHorizontalTickHeightInPx + gapBetweenHorizontalLabelAndTicks
+  const yLabelOffset = props.yLabelOffset
+    ?? 9 + maxVerticalTickWidthInPx + gapBetweenVerticalLabelAndTicks
 
   const margin = {
     top: props.margins?.top ?? 30,
     right: props.margins?.right ?? 30,
-    bottom: (props.margins?.bottom ?? 30) + horizontalLabelHeightInPx + xLabelOffset - (props.xLabel ? 9 : 0),
-    left: (props.margins?.left ?? 30) + verticalLabelWidthInPx + yLabelOffset
+    bottom:
+      (props.margins?.bottom ?? 30)
+      + horizontalLabelHeightInPx
+      + xLabelOffset
+      - (props.xLabel ? 9 : 0),
+    left:
+      (props.margins?.left ?? 30)
+      + verticalLabelWidthInPx
+      + yLabelOffset
   }
 
   const width = clientWidth - margin.left - margin.right
@@ -224,8 +249,8 @@ function renderChart({
     .append('g')
     .attr('transform', (d) =>
       vertical
-        ? `translate(${(paddedScale(d.key)! - groupOffset)},0)`
-        : `translate(0,${(paddedScale(d.key)! - groupOffset)})`
+        ? `translate(${paddedScale(d.key)! - groupOffset},0)`
+        : `translate(0,${paddedScale(d.key)! - groupOffset})`
     )
 
   // Each group gets a transparent rect covering the full band (using paddedScale.step())

package/lib/components/SChartPie.vue

@@ -180,12 +180,18 @@ function renderChart({
   // Calculate radius and center the chart
   const r_k = props.half ? 0.25 : 0.5
   const radius = Math.min(height_2, (width - legendWidth) / (2 + (props.legend ? r_k : 0)))
-  const innerRadius = props.innerRadius?.(radius) ?? (props.type === 'pie' ? 6 : Math.max(radius / 1.5, radius - 50))
-
-  legendGroup
-    ?.attr('transform', `translate(${radius * (1 + r_k)},${-(props.half ? height_2 : 0) / 2 - legendHeight / 2})`)
-  svg
-    .attr('transform', `translate(${margin.left + width_2 - (props.legend ? radius * r_k + legendWidth : 0) / 2},${margin.top + height_2})`)
+  const innerRadius = props.innerRadius?.(radius)
+    ?? (props.type === 'pie' ? 6 : Math.max(radius / 1.5, radius - 50))
+
+  legendGroup?.attr(
+    'transform',
+    `translate(${radius * (1 + r_k)},${-(props.half ? height_2 : 0) / 2 - legendHeight / 2})`
+  )
+  svg.attr(
+    'transform',
+    `translate(${margin.left + width_2 - (props.legend ? radius * r_k + legendWidth : 0) / 2}`
+    + `,${margin.top + height_2})`
+  )
 
   // Create arc generator
   const arc = d3
@@ -275,7 +281,7 @@ function renderChart({
       })
       .attr('dy', '0.35em')
       .attr('fill', c.text2)
-      .attr('text-anchor', (d) => leftOrRight(d) === 1 ? 'start' : 'end')
+      .attr('text-anchor', (d) => (leftOrRight(d) === 1 ? 'start' : 'end'))
       .style('font-size', props.labelFontSize)
       .html((d) => props.labelFormat(d.data))
 

package/lib/components/SControlActionBarCollapse.vue

@@ -21,14 +21,12 @@ setCollapse(props.collapsed)
 const el = shallowRef<HTMLElement | null>(null)
 
 const icon = computed(() => {
-  return isCollapsed.value
-    ? IconArrowsOutLineVertical
-    : IconArrowsInLineVertical
+  return isCollapsed.value ? IconArrowsOutLineVertical : IconArrowsInLineVertical
 })
 </script>
 
 <template>
-  <div class="SControlActionBarCollapse" ref="el">
+  <div ref="el" class="SControlActionBarCollapse">
     <SControlActionBarButton
       :as
       :icon

package/lib/components/SControlInputSearch.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import IconMagnifyingGlass from '~icons/ph/magnifying-glass-bold'
-import { computed } from 'vue'
+import { type Component, computed } from 'vue'
 import { useControlSize } from '../composables/Control'
 import { useTrans } from '../composables/Lang'
 import { type Validatable } from '../composables/Validation'
@@ -8,7 +8,7 @@ import SInputText, { type Align, type TextColor } from './SInputText.vue'
 
 const props = defineProps<{
   placeholder?: string
-  unitAfter?: any
+  unitAfter?: Component | string
   textColor?: TextColor | ((value: string | null) => TextColor)
   align?: Align
   disabled?: boolean
@@ -52,7 +52,12 @@ const _value = computed(() => {
       type="search"
       :placeholder="placeholder ?? t.placeholder"
       :unit-before="IconMagnifyingGlass"
+      :unit-after
+      :text-color
+      :align
+      :disabled
       :model-value="_value"
+      :display-value
       :validation
       hide-error
       @update:model-value="$emit('update:model-value', $event)"

package/lib/components/SDataListItem.vue

@@ -14,9 +14,7 @@ const props = withDefaults(defineProps<{
   maxWidth: '100%'
 })
 
-const {
-  labelWidth
-} = useDataListState()
+const { labelWidth } = useDataListState()
 
 const slots = useSlots()
 

package/lib/components/SDescAvatar.vue

@@ -26,7 +26,7 @@ const _avatar = computed(() => {
 
 <template>
   <div v-if="_avatar?.length" class="SDescAvatar" :class="[dir]">
-    <div v-for="a, i in _avatar" :key="i" class="value">
+    <div v-for="(a, i) in _avatar" :key="i" class="value">
       <SAvatar
         size="nano"
         :avatar="a.avatar"

package/lib/components/SDescDay.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useSlotValue } from '../composables/Utils'
-import { type Day } from '../support/Day'
+import { type Day, day } from '../support/Day'
 import SDescEmpty from './SDescEmpty.vue'
 
 const props = defineProps<{
@@ -17,7 +17,7 @@ const _value = computed(() => {
   }
 
   if (props.value) {
-    return props.value.format(props.format ?? 'YYYY-MM-DD HH:mm:ss')
+    return day(props.value).format(props.format ?? 'YYYY-MM-DD HH:mm:ss')
   }
 
   return null

package/lib/components/SDescFile.vue

@@ -15,16 +15,14 @@ const props = defineProps<{
 }>()
 
 const items = computed(() => {
-  return props.item
-    ? Array.isArray(props.item) ? props.item : [props.item]
-    : null
+  return props.item ? (Array.isArray(props.item) ? props.item : [props.item]) : null
 })
 </script>
 
 <template>
   <div v-if="items && items.length" class="SDescFile">
     <div class="value">
-      <div v-for="item, index in items" :key="index" class="item">
+      <div v-for="(item, i) in items" :key="i" class="item">
         <div class="data">
           <div class="icon"><IconFileText class="icon-svg" /></div>
           <div class="name">{{ item.name }}</div>

package/lib/components/SDescItem.vue

@@ -7,7 +7,8 @@ defineProps<{
 }>()
 
 const labelWidthProp = inject<() => string | number | undefined>(
-  'sefirot-desc-label-width', () => undefined
+  'sefirot-desc-label-width',
+  () => undefined
 )
 
 const labelWidth = computed(() => {

package/lib/components/SDescLabel.vue

@@ -44,7 +44,7 @@ function isActionButton(action: Action): action is ActionButton {
       <template v-else>{{ value }}</template>
     </div>
     <div v-if="actions?.length" class="actions">
-      <template v-for="action, index in actions" :key="index">
+      <template v-for="(action, i) in actions" :key="i">
         <SButton
           v-if="isActionButton(action)"
           type="text"

package/lib/components/SDescLink.vue

@@ -12,13 +12,8 @@ const props = defineProps<{
 const slotValue = useSlotValue()
 
 const link = computed(() => {
-  if (props.href) {
-    return props.href
-  }
-
-  return slotValue.value
-    ? slotValue.value
-    : props.value
+  if (props.href) { return props.href }
+  return slotValue.value ? slotValue.value : props.value
 })
 </script>
 

package/lib/components/SDescPill.vue

@@ -13,16 +13,14 @@ const props = defineProps<{
 }>()
 
 const pills = computed(() => {
-  return props.pill
-    ? Array.isArray(props.pill) ? props.pill : [props.pill]
-    : null
+  return props.pill ? (Array.isArray(props.pill) ? props.pill : [props.pill]) : null
 })
 </script>
 
 <template>
   <div v-if="pills && pills.length" class="SDescPill">
     <div class="value">
-      <div v-for="pill, index in pills" :key="index" class="pill">
+      <div v-for="(pill, i) in pills" :key="i" class="pill">
         <SPill tag="div" size="mini" :mode="pill.mode" :label="pill.label" />
       </div>
     </div>

package/lib/components/SDescText.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useLinkifyIt } from 'sefirot/composables/Markdown'
 import { computed } from 'vue'
+import { useLinkifyIt } from '../composables/Markdown'
 import { useHasSlotContent } from '../composables/Utils'
 import SDescEmpty from './SDescEmpty.vue'
 
@@ -32,10 +32,10 @@ const _value = computed(() => {
 
 <template>
   <div v-if="hasSlot || _value" class="SDescText" :class="classes">
-    <div class="value" v-if="hasSlot">
+    <div v-if="hasSlot" class="value">
       <slot />
     </div>
-    <div class="value" v-else v-html="_value" />
+    <div v-else class="value" v-html="_value" />
   </div>
   <SDescEmpty v-else />
 </template>

package/lib/components/SDropdown.vue

@@ -10,7 +10,7 @@ defineProps<{
 <template>
   <div class="SDropdown">
     <div class="container">
-      <div v-for="(section, index) in sections" :key="index" class="section">
+      <div v-for="(section, i) in sections" :key="i" class="section">
         <SDropdownSection :section />
       </div>
     </div>

package/lib/components/SDropdownSectionFilter.vue

@@ -2,7 +2,10 @@
 import IconCheck from '~icons/ph/check'
 import Fuse from 'fuse.js'
 import { type MaybeRef, computed, onMounted, ref, unref } from 'vue'
-import { type DropdownSectionFilterOption, type DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
+import {
+  type DropdownSectionFilterOption,
+  type DropdownSectionFilterSelectedValue
+} from '../composables/Dropdown'
 import { useTrans } from '../composables/Lang'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 
@@ -36,7 +39,7 @@ const fuse = computed(() => {
 })
 
 const filteredOptions = computed(() => {
-  return (!props.search || !query.value)
+  return !props.search || !query.value
     ? unref(enabledOptions)
     : fuse.value.search(query.value).map((r) => r.item)
 })
@@ -47,10 +50,7 @@ onMounted(() => {
 
 function isActive(value: any) {
   const selected = unref(props.selected)
-
-  return Array.isArray(selected)
-    ? selected.includes(value)
-    : selected === value
+  return Array.isArray(selected) ? selected.includes(value) : selected === value
 }
 
 function focusPrev(event: any) {
@@ -61,16 +61,16 @@ function focusNext(event: any) {
   event.target.parentNode.nextElementSibling?.firstElementChild?.focus()
 }
 
-function handleClick(option: DropdownSectionFilterOption, value: any) {
-  option.onClick && option.onClick(value)
-  props.onClick && props.onClick(value)
+function onClick(option: DropdownSectionFilterOption, value: any) {
+  option.onClick?.(value)
+  props.onClick?.(value)
 }
 </script>
 
 <template>
   <div class="SDropdownSectionFilter">
     <div v-if="search" class="search">
-      <input class="input" :placeholder="t.i_ph" ref="input" v-model="query">
+      <input ref="input" v-model="query" class="input" :placeholder="t.i_ph">
     </div>
 
     <ul v-if="filteredOptions.length" class="list">
@@ -81,7 +81,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
           tabindex="0"
           @keyup.up.prevent="focusPrev"
           @keyup.down.prevent="focusNext"
-          @click="handleClick(option, option.value)"
+          @click="onClick(option, option.value)"
         >
           <span v-if="Array.isArray(unref(selected))" class="checkbox">
             <span class="checkbox-box">