+
{{ t('pagination.text.total', { total }) }}
@@ -8,8 +12,11 @@
- ...
+ ...
@@ -76,6 +90,7 @@ const props = withDefaults(defineProps<{
showSizer?: boolean
sizerOptions?: (number | string)[]
dark?: boolean
+ glass?: boolean
}>(), {
total: 100,
pageSize: 10,
@@ -85,7 +100,8 @@ const props = withDefaults(defineProps<{
showTotal: false,
showSizer: false,
sizerOptions: () => [10, 20, 50, 100],
- dark: false
+ dark: false,
+ glass: false
})
const currentPage = ref(Number(props.modelValue))
diff --git a/src/ui/select/ShadcnSelect.vue b/src/ui/select/ShadcnSelect.vue
index 04840fd0..bf1f7a90 100644
--- a/src/ui/select/ShadcnSelect.vue
+++ b/src/ui/select/ShadcnSelect.vue
@@ -4,7 +4,7 @@
border && (dark ? 'border border-gray-600' : 'border border-gray-200'),
MinSize[size]
]">
-
+
-
-
-
-
-
+ glass ? (dark ? 'bg-white/10' : 'bg-white/30') : (dark ? 'border-gray-600 bg-gray-800' : 'border-gray-200 bg-white')]">
+
+
+
+
+
+
+
+ 无匹配结果
+
+
+
+
+
+ 无匹配结果
+
+
+
@@ -105,6 +124,7 @@ import { HoverType } from '@/ui/common/type.ts'
import { SelectEmits, SelectOptionProps, SelectProps } from '@/ui/select/types.ts'
import { generateRandomId } from '@/utils/common.ts'
import { ShadcnSkeleton } from '@/ui/skeleton'
+import { ShadcnInput } from '@/ui/input'
const emit = defineEmits
()
@@ -118,7 +138,9 @@ const props = withDefaults(defineProps(), {
lazy: false,
loading: false,
dark: false,
- glass: false
+ glass: false,
+ search: false,
+ searchPlaceholder: '搜索...'
})
const isExpanded = ref(false)
@@ -128,6 +150,7 @@ const selectRef = ref(null)
const dropdownRef = ref(null)
const parentName = `shadcn-select-${generateRandomId()}`
const isLoading = ref(false)
+const searchQuery = ref('')
// Handle scroll loading
const handleScroll = () => {
@@ -217,14 +240,34 @@ const removeSelection = (index: number) => {
}
const internalOptions = computed(() => {
- return props.options || slotOptions.value
+ const options = props.options || slotOptions.value
+ if (props.search && searchQuery.value) {
+ return options.filter(option =>
+ option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+ )
+ }
+ return options
+})
+
+const visibleOptionsCount = computed(() => {
+ if (!props.search || !searchQuery.value) {
+ return slotOptions.value.length
+ }
+ return slotOptions.value.filter(option =>
+ option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+ ).length
})
const toggleDropdown = () => {
if (!props.disabled) {
isExpanded.value = !isExpanded.value
if (isExpanded.value) {
- nextTick(updateSelectedLabels)
+ nextTick(() => {
+ updateSelectedLabels()
+ })
+ }
+ else {
+ searchQuery.value = ''
}
}
}
@@ -281,7 +324,9 @@ provide('selectContext', {
multiple: props.multiple,
parentName,
dark: computed(() => props.dark),
- glass: computed(() => props.glass)
+ glass: computed(() => props.glass),
+ searchQuery: computed(() => searchQuery.value),
+ search: computed(() => props.search)
})
onMounted(() => {
diff --git a/src/ui/select/ShadcnSelectOption.vue b/src/ui/select/ShadcnSelectOption.vue
index fd0de98d..3c4482e6 100644
--- a/src/ui/select/ShadcnSelectOption.vue
+++ b/src/ui/select/ShadcnSelectOption.vue
@@ -1,5 +1,6 @@
-
-
+
@@ -15,7 +19,8 @@
@@ -36,12 +41,14 @@ const props = withDefaults(defineProps<{
size?: keyof typeof WrapperSize
fixed?: boolean
dark?: boolean
+ glass?: boolean
}>(), {
modelValue: true,
type: 'primary',
size: 'default',
fixed: false,
- dark: false
+ dark: false,
+ glass: false
})
watch(() => props.modelValue, (newValue) => {
diff --git a/src/ui/tab/ShadcnTab.vue b/src/ui/tab/ShadcnTab.vue
index bf8de475..b1bd4cf8 100644
--- a/src/ui/tab/ShadcnTab.vue
+++ b/src/ui/tab/ShadcnTab.vue
@@ -27,27 +27,33 @@
class="overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
@@ -12,19 +13,21 @@
class="flex items-center cursor-pointer hover:text-muted-foreground"
@click="onClear">
-
+
-
+
@@ -35,9 +38,10 @@
:formatter="zeroPadFormatter"
:parser="parseNumber"
:dark="dark"
+ :glass="glass"
@focus="isOpen = true"
@on-change="onTimeChange"/>
- :
+ :
- :
+ :
@@ -66,6 +72,7 @@
class="space-x-1"
type="single"
:dark="dark"
+ :glass="glass"
@on-change="handlePeriodChange as any">
{{ t('timePicker.text.am') }}
@@ -82,7 +89,10 @@
:key="time"
:class="[
'px-2 py-1 text-sm rounded-md select-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
- dark ? 'hover:bg-gray-700 active:bg-gray-600' : 'hover:bg-gray-100 active:bg-gray-200'
+ glass && !dark ? 'hover:bg-white/50 active:bg-white/70 text-gray-800' : '',
+ glass && dark ? 'hover:bg-white/20 active:bg-white/30 text-gray-100' : '',
+ !glass && dark ? 'hover:bg-gray-700 active:bg-gray-600' : '',
+ !glass && !dark ? 'hover:bg-gray-100 active:bg-gray-200' : ''
]"
@click="selectQuickTime(time)">
{{ time }}
@@ -109,7 +119,8 @@ const props = withDefaults(defineProps(), {
disabled: false,
clearable: true,
format: 'HH:mm',
- dark: false
+ dark: false,
+ glass: false
})
const emit = defineEmits()
diff --git a/src/ui/time-picker/types.ts b/src/ui/time-picker/types.ts
index b96708ff..7c234f28 100644
--- a/src/ui/time-picker/types.ts
+++ b/src/ui/time-picker/types.ts
@@ -9,6 +9,7 @@ export interface TimePickerProps
quickTimes?: string[] // see format
format?: 'HH:mm' | 'HH:mm:ss' | 'hh:mm A' | 'hh:mm:ss A'
dark?: boolean
+ glass?: boolean
}
export type TimePickerEmits = {
diff --git a/src/ui/tooltip/ShadcnTooltip.vue b/src/ui/tooltip/ShadcnTooltip.vue
index d1732c9d..b61d9d74 100644
--- a/src/ui/tooltip/ShadcnTooltip.vue
+++ b/src/ui/tooltip/ShadcnTooltip.vue
@@ -5,27 +5,35 @@
-
-
-
-
+ :style="[tooltipStyle, { maxWidth: computedMaxWidth }]">
+
+
+
+
diff --git a/src/ui/upload/ShadcnUpload.vue b/src/ui/upload/ShadcnUpload.vue
index 9401fb22..5b96a85f 100644
--- a/src/ui/upload/ShadcnUpload.vue
+++ b/src/ui/upload/ShadcnUpload.vue
@@ -3,9 +3,10 @@
-
-