@globalbrain/sefirot 3.35.0 → 3.35.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,6 +3,7 @@ import IconCheck from '@iconify-icons/ph/check'
|
|
|
3
3
|
import Fuse from 'fuse.js'
|
|
4
4
|
import { type MaybeRef, computed, onMounted, ref, unref } from 'vue'
|
|
5
5
|
import { type DropdownSectionFilterOption, type DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
|
|
6
|
+
import { useTrans } from '../composables/Lang'
|
|
6
7
|
import { isArray } from '../support/Utils'
|
|
7
8
|
import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
|
|
8
9
|
import SIcon from './SIcon.vue'
|
|
@@ -14,6 +15,17 @@ const props = defineProps<{
|
|
|
14
15
|
onClick?(value: any): void
|
|
15
16
|
}>()
|
|
16
17
|
|
|
18
|
+
const { t } = useTrans({
|
|
19
|
+
en: {
|
|
20
|
+
i_ph: 'Filter options',
|
|
21
|
+
not_found: 'No options found.'
|
|
22
|
+
},
|
|
23
|
+
ja: {
|
|
24
|
+
i_ph: 'オプションを検索',
|
|
25
|
+
not_found: 'オプションが見つかりません。'
|
|
26
|
+
}
|
|
27
|
+
})
|
|
28
|
+
|
|
17
29
|
const input = ref<HTMLElement | null>(null)
|
|
18
30
|
const query = ref('')
|
|
19
31
|
|
|
@@ -60,7 +72,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
|
|
|
60
72
|
<template>
|
|
61
73
|
<div class="SDropdownSectionFilter">
|
|
62
74
|
<div v-if="search" class="search">
|
|
63
|
-
<input class="input" placeholder="
|
|
75
|
+
<input class="input" :placeholder="t.i_ph" ref="input" v-model="query">
|
|
64
76
|
</div>
|
|
65
77
|
|
|
66
78
|
<ul v-if="filteredOptions.length" class="list">
|
|
@@ -89,7 +101,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
|
|
|
89
101
|
</ul>
|
|
90
102
|
|
|
91
103
|
<p v-else class="empty">
|
|
92
|
-
|
|
104
|
+
{{ t.not_found }}
|
|
93
105
|
</p>
|
|
94
106
|
</div>
|
|
95
107
|
</template>
|
|
@@ -105,6 +117,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
|
|
|
105
117
|
z-index: 10;
|
|
106
118
|
border-bottom: 1px solid var(--c-gutter);
|
|
107
119
|
padding: 8px;
|
|
120
|
+
background-color: var(--c-bg-elv-3);
|
|
108
121
|
}
|
|
109
122
|
|
|
110
123
|
.input {
|
|
@@ -138,8 +151,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
|
|
|
138
151
|
text-align: left;
|
|
139
152
|
transition: color 0.25s, background-color 0.25s;
|
|
140
153
|
|
|
141
|
-
&:hover
|
|
142
|
-
&:focus {
|
|
154
|
+
&:hover {
|
|
143
155
|
background-color: var(--c-bg-mute-1);
|
|
144
156
|
}
|
|
145
157
|
}
|