fix: 兼容intel Mac旧版系统webview中样式问题
Co-authored-by: tangheng <tangheng@tanghengdeMacBook-Pro.local>
This commit is contained in:
zipgandtangheng authored and GitHub committed
1 parent
361f7774e9
commit
8ff0f13bd4
14 files changed
+1354
-134
No files matched your search
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
v-bind="{ ...$attrs, ...forwarded }"
|
||||
:class="
|
||||
cn(
|
||||
'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 relative grid max-h-[calc(100dvh-2rem)] w-full max-w-full gap-4 overflow-hidden rounded-xl p-4 text-sm ring-1 duration-100 outline-none pointer-events-auto sm:max-w-sm',
|
||||
'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 relative grid max-h-[calc(100dvh-2rem)] w-full max-w-sm gap-4 overflow-hidden rounded-xl border border-border p-4 text-sm shadow-lg duration-100 outline-none pointer-events-auto',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
|
||||
@@ -25,6 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
<DialogOverlay />
|
||||
<div class="fixed inset-0 z-50 grid place-items-center p-4 pointer-events-none">
|
||||
<DialogContent
|
||||
data-slot="dialog-content"
|
||||
:class="cn('relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-4 shadow-lg duration-200 sm:rounded-lg md:w-full pointer-events-auto', props.class)"
|
||||
v-bind="{ ...$attrs, ...forwarded }"
|
||||
@pointer-down-outside="
|
||||
|
||||
@@ -64,6 +64,12 @@ const selectedLabel = computed(() => {
|
||||
return props.displayName(props.modelValue);
|
||||
});
|
||||
|
||||
const triggerBaseClass = computed(() =>
|
||||
props.triggerVariant === "outline"
|
||||
? "dbx-searchable-select-trigger h-6 w-auto max-w-56 min-w-0 justify-between gap-1 px-2 text-xs font-normal shadow-none"
|
||||
: "h-6 w-auto max-w-56 min-w-0 justify-between gap-1 border-0 bg-transparent px-1 text-xs font-normal shadow-none hover:bg-muted/50 focus-visible:ring-0",
|
||||
);
|
||||
|
||||
const filteredOptions = computed(() => filterDatabaseOptions(props.options, searchText.value, props.displayName));
|
||||
const customOptionValue = computed(() => props.normalizeCustom(searchText.value.trim()));
|
||||
const canSelectCustom = computed(() => props.allowCustom && !!customOptionValue.value && !props.options.includes(customOptionValue.value));
|
||||
@@ -162,7 +168,7 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
<template>
|
||||
<Popover v-model:open="open">
|
||||
<PopoverTrigger as-child>
|
||||
<Button type="button" :variant="triggerVariant" :disabled="disabled" :title="selectedLabel" :class="cn('h-6 w-auto max-w-56 min-w-0 justify-between gap-1 border-0 bg-transparent px-1 text-xs font-normal shadow-none hover:bg-muted/50 focus-visible:ring-0', triggerClass)">
|
||||
<Button type="button" :variant="triggerVariant" :disabled="disabled" :title="selectedLabel" :class="cn(triggerBaseClass, triggerClass)">
|
||||
<slot name="trigger-label" :value="modelValue" :label="selectedLabel" :loading="loading">
|
||||
<span class="truncate">{{ loading ? loadingText : selectedLabel }}</span>
|
||||
</slot>
|
||||
@@ -244,3 +250,36 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.dbx-searchable-select-trigger {
|
||||
border: 1px solid rgb(229, 229, 229) !important;
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dbx-searchable-select-trigger:hover {
|
||||
background-color: rgb(250, 250, 250) !important;
|
||||
}
|
||||
|
||||
.dbx-searchable-select-trigger[aria-expanded="true"],
|
||||
.dbx-searchable-select-trigger:focus-visible {
|
||||
border-color: rgb(96, 165, 250) !important;
|
||||
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.22) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-searchable-select-trigger {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-searchable-select-trigger:hover {
|
||||
background-color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-searchable-select-trigger[aria-expanded="true"],
|
||||
.dark .dbx-searchable-select-trigger:focus-visible {
|
||||
border-color: rgb(147, 197, 253) !important;
|
||||
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.24) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps);
|
||||
v-bind="forwardedProps"
|
||||
:class="
|
||||
cn(
|
||||
'border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-[6px] border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=size-])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
|
||||
'dbx-select-trigger border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-[6px] border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=size-])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
@@ -31,3 +31,36 @@ const forwardedProps = useForwardProps(delegatedProps);
|
||||
</SelectIcon>
|
||||
</SelectTrigger>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.dbx-select-trigger:not(.border-0):not(.border-transparent) {
|
||||
border: 1px solid rgb(229, 229, 229) !important;
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dbx-select-trigger:not(.border-0):not(.border-transparent):hover {
|
||||
background-color: rgb(250, 250, 250) !important;
|
||||
}
|
||||
|
||||
.dbx-select-trigger:not(.border-0):not(.border-transparent)[data-state="open"],
|
||||
.dbx-select-trigger:not(.border-0):not(.border-transparent):focus-visible {
|
||||
border-color: rgb(96, 165, 250) !important;
|
||||
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.22) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent) {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent):hover {
|
||||
background-color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent)[data-state="open"],
|
||||
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent):focus-visible {
|
||||
border-color: rgb(147, 197, 253) !important;
|
||||
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.24) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -32,16 +32,92 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
|
||||
'dbx-switch data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<SwitchThumb
|
||||
data-slot="switch-thumb"
|
||||
class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
|
||||
>
|
||||
<SwitchThumb data-slot="switch-thumb" class="dbx-switch-thumb bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 pointer-events-none block ring-0 transition-transform">
|
||||
<slot name="thumb" v-bind="slotProps" />
|
||||
</SwitchThumb>
|
||||
</SwitchRoot>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.dbx-switch {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(120, 120, 128, 0.22) !important;
|
||||
background-color: rgb(229, 229, 229) !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dbx-switch[data-size="default"] {
|
||||
width: 32px !important;
|
||||
height: 18.4px !important;
|
||||
}
|
||||
|
||||
.dbx-switch[data-size="sm"] {
|
||||
width: 24px !important;
|
||||
height: 14px !important;
|
||||
}
|
||||
|
||||
.dbx-switch-thumb {
|
||||
display: block !important;
|
||||
border-radius: 9999px;
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
|
||||
.dbx-switch[data-size="default"] .dbx-switch-thumb {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
}
|
||||
|
||||
.dbx-switch[data-size="sm"] .dbx-switch-thumb {
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
}
|
||||
|
||||
.dbx-switch[data-state="checked"],
|
||||
.dbx-switch[data-checked],
|
||||
.dbx-switch[aria-checked="true"] {
|
||||
border-color: rgb(23, 23, 23) !important;
|
||||
background-color: rgb(23, 23, 23) !important;
|
||||
}
|
||||
|
||||
.dbx-switch[data-size="default"][data-state="checked"] .dbx-switch-thumb,
|
||||
.dbx-switch[data-size="default"][data-checked] .dbx-switch-thumb,
|
||||
.dbx-switch[data-size="default"][aria-checked="true"] .dbx-switch-thumb {
|
||||
transform: translateX(14px) !important;
|
||||
}
|
||||
|
||||
.dbx-switch[data-size="sm"][data-state="checked"] .dbx-switch-thumb,
|
||||
.dbx-switch[data-size="sm"][data-checked] .dbx-switch-thumb,
|
||||
.dbx-switch[data-size="sm"][aria-checked="true"] .dbx-switch-thumb {
|
||||
transform: translateX(10px) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-switch {
|
||||
border-color: rgba(255, 255, 255, 0.16) !important;
|
||||
background-color: rgba(255, 255, 255, 0.18) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-switch[data-state="checked"],
|
||||
.dark .dbx-switch[data-checked],
|
||||
.dark .dbx-switch[aria-checked="true"] {
|
||||
border-color: rgb(245, 245, 245) !important;
|
||||
background-color: rgb(245, 245, 245) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-switch[data-state="checked"] .dbx-switch-thumb,
|
||||
.dark .dbx-switch[data-checked] .dbx-switch-thumb,
|
||||
.dark .dbx-switch[aria-checked="true"] .dbx-switch-thumb {
|
||||
background-color: rgb(23, 23, 23) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user