@saasmakers/ui 2.0.18 → 2.0.19

package/app/components/fields/FieldCheckbox.vue

@@ -18,6 +18,23 @@ withDefaults(defineProps<Omit<FieldCheckbox, 'modelValue'>>(), {
 
 const id = useId()
 const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
+const isAnimatingCheck = ref(false)
+
+watch(modelValue, (value) => {
+  if (!value) {
+    isAnimatingCheck.value = false
+  }
+})
+
+function onChange(event: Event) {
+  isAnimatingCheck.value = (event.target as HTMLInputElement).checked
+}
+
+function onCheckAnimationEnd(event: AnimationEvent) {
+  if (event.animationName.startsWith('pop-in')) {
+    isAnimatingCheck.value = false
+  }
+}
 </script>
 
 <template>
@@ -42,27 +59,31 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
           :class="{ 'field-disabled': disabled }"
           :disabled="disabled"
           type="checkbox"
+          @change="onChange"
         >
 
         <span
           aria-hidden="true"
-          class="flex items-center justify-center border-2 rounded-full transition-colors"
+          class="flex items-center justify-center border-2 rounded-full transition-[background-color,border-color] duration-200 ease-out"
           :class="{
-            'border-indigo-600 dark:border-indigo-400': modelValue,
+            'animate-pop-in motion-reduce:animate-none': isAnimatingCheck,
+            'border-transparent bg-indigo-600 dark:bg-indigo-400': modelValue,
             'border-gray-300 dark:border-gray-600': !modelValue,
             'group-hover:border-gray-400 dark:group-hover:border-gray-500': !disabled && !modelValue,
-            'group-hover:border-indigo-700 dark:group-hover:border-indigo-300': !disabled && modelValue,
+            'group-hover:bg-indigo-700 dark:group-hover:bg-indigo-300': !disabled && modelValue,
             'h-4 w-4': size === 'sm',
             'h-4.5 w-4.5': size === 'base',
             'h-5 w-5': size === 'lg',
             'peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-500/40 peer-focus-visible:ring-offset-2 peer-focus-visible:outline-none': !disabled,
           }"
+          @animationend="onCheckAnimationEnd"
         >
           <Icon
             v-if="modelValue"
             :name="getLayerIcon('check')"
-            class="shrink-0 text-gray-900 dark:text-white"
+            class="shrink-0 text-white"
             :class="{
+              'animate-fade-in': isAnimatingCheck,
               'size-2.5': size === 'sm',
               'size-3': size === 'base',
               'size-3.5': size === 'lg',
@@ -74,6 +95,7 @@ const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
       <BaseSpinner
         v-else
         class="flex-initial"
+        color="indigo"
         :size="size"
       />
 

package/app/components/layout/LayoutBottomSheet.vue

@@ -63,6 +63,12 @@ function onHeaderPointerDown(event: PointerEvent) {
   handle.setPointerCapture(event.pointerId)
 }
 
+function onPanelAfterEnter(element: Element) {
+  // Drop the identity transform after the open animation so nested SortableJS
+  // fallbacks on iOS resolve viewport coordinates instead of a transformed ancestor.
+  element.classList.remove('translate-y-0')
+}
+
 function onPanelTransitionEnd(event: TransitionEvent) {
   if (event.propertyName !== 'transform' || !drag.closing) {
     return
@@ -209,6 +215,7 @@ watch(visible, (isVisible) => {
         leave-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
         leave-from-class="translate-y-0"
         leave-to-class="translate-y-full motion-reduce:translate-y-0"
+        @after-enter="onPanelAfterEnter"
         @after-leave="onAfterLeave"
       >
         <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",

package/uno.config.ts

@@ -33,22 +33,30 @@ export const shortcuts: Record<string, string> = {
 export const theme = {
   animation: {
     keyframes: {
+      'fade-in': '{0%,25%{opacity:0}100%{opacity:1}}',
       'fade-pulse': '{0%,100%{opacity:0.25}50%{opacity:1}}',
+      'pop-in': '{from{transform:scale(0.8)}to{transform:scale(1)}}',
       'scale-pulse': '{0%,100%{transform:scale(0)}50%{transform:scale(1)}}',
     },
 
     durations: {
+      'fade-in': '200ms',
       'fade-pulse': '1s',
+      'pop-in': '250ms',
       'scale-pulse': '2s',
     },
 
     timingFns: {
+      'fade-in': 'ease-out',
       'fade-pulse': 'ease-in-out',
+      'pop-in': 'cubic-bezier(0.34,1.56,0.64,1)',
       'scale-pulse': 'linear',
     },
 
     counts: {
+      'fade-in': '1',
       'fade-pulse': 'infinite',
+      'pop-in': '1',
       'scale-pulse': 'infinite',
     },
   },