@saasmakers/ui 2.0.18 → 2.0.20
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.
|
@@ -46,12 +46,12 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
|
|
|
46
46
|
|
|
47
47
|
<span
|
|
48
48
|
aria-hidden="true"
|
|
49
|
-
class="flex items-center justify-center border-2 rounded-full transition-
|
|
49
|
+
class="flex items-center justify-center border-2 rounded-full transition-[background-color,border-color] duration-200 ease-out"
|
|
50
50
|
:class="{
|
|
51
|
-
'border-indigo-600 dark:
|
|
51
|
+
'border-transparent bg-indigo-600 dark:bg-indigo-400': modelValue,
|
|
52
52
|
'border-gray-300 dark:border-gray-600': !modelValue,
|
|
53
53
|
'group-hover:border-gray-400 dark:group-hover:border-gray-500': !disabled && !modelValue,
|
|
54
|
-
'group-hover:
|
|
54
|
+
'group-hover:bg-indigo-700 dark:group-hover:bg-indigo-300': !disabled && modelValue,
|
|
55
55
|
'h-4 w-4': size === 'sm',
|
|
56
56
|
'h-4.5 w-4.5': size === 'base',
|
|
57
57
|
'h-5 w-5': size === 'lg',
|
|
@@ -61,7 +61,7 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
|
|
|
61
61
|
<Icon
|
|
62
62
|
v-if="modelValue"
|
|
63
63
|
:name="getLayerIcon('check')"
|
|
64
|
-
class="shrink-0 text-
|
|
64
|
+
class="shrink-0 text-white"
|
|
65
65
|
:class="{
|
|
66
66
|
'size-2.5': size === 'sm',
|
|
67
67
|
'size-3': size === 'base',
|
|
@@ -74,6 +74,7 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
|
|
|
74
74
|
<BaseSpinner
|
|
75
75
|
v-else
|
|
76
76
|
class="flex-initial"
|
|
77
|
+
color="indigo"
|
|
77
78
|
:size="size"
|
|
78
79
|
/>
|
|
79
80
|
|
|
@@ -63,6 +63,12 @@ function onHeaderPointerDown(event: PointerEvent) {
|
|
|
63
63
|
handle.setPointerCapture(event.pointerId)
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
+
function onPanelAfterEnter(element: Element) {
|
|
67
|
+
// Drop the identity transform after the open animation so nested SortableJS
|
|
68
|
+
// fallbacks on iOS resolve viewport coordinates instead of a transformed ancestor.
|
|
69
|
+
element.classList.remove('translate-y-0')
|
|
70
|
+
}
|
|
71
|
+
|
|
66
72
|
function onPanelTransitionEnd(event: TransitionEvent) {
|
|
67
73
|
if (event.propertyName !== 'transform' || !drag.closing) {
|
|
68
74
|
return
|
|
@@ -209,6 +215,7 @@ watch(visible, (isVisible) => {
|
|
|
209
215
|
leave-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
|
|
210
216
|
leave-from-class="translate-y-0"
|
|
211
217
|
leave-to-class="translate-y-full motion-reduce:translate-y-0"
|
|
218
|
+
@after-enter="onPanelAfterEnter"
|
|
212
219
|
@after-leave="onAfterLeave"
|
|
213
220
|
>
|
|
214
221
|
<div
|