@toife/vue 3.1.3 → 3.1.5

package/src/components/form-group/form-group.vue

@@ -1,7 +1,7 @@
 <style lang="scss" src="./form-group.scss" scoped></style>
 <template src="./form-group.html"></template>
 <script lang="ts" setup>
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { computed } from "vue";
 import { type FormGroupProps } from "./form-group.type";
 
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<FormGroupProps>(), {
 // ----------------------------------------------------------------------------
 const formGroupAttrs = computed(() => {
   return {
-    class: [withPrefix("form-group"), props.direction],
+    class: [cssPrefix("form-group"), props.direction],
   };
 });
 </script>

package/src/components/gesture-indicator/gesture-indicator.scss

@@ -5,10 +5,12 @@ $gesture-indicator: sass.fn-naming-prefix("gesture-indicator");
 
 // Property name - layer: gesture-indicator
 $gesture-indicator-border-color: sass.fn-naming-var("gesture-indicator", "border-color");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$gesture-indicator} {
-  background-color: rgb(#{$gesture-indicator-border-color});
+  background-color: rgba(#{$gesture-indicator-border-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,
@@ -16,7 +18,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease;
   position: absolute;
-  border-radius: 3px;
+  border-radius: calc(min(40px, #{$radius-size}) * #{$radius-ratio});
   z-index: 99;
 
   &.bottom {

package/src/components/gesture-indicator/gesture-indicator.vue

@@ -1,7 +1,7 @@
 <style lang="scss" src="./gesture-indicator.scss" scoped></style>
 <template src="./gesture-indicator.html"></template>
 <script lang="ts" setup>
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type GestureIndicatorProps } from "./gesture-indicator.type";
 import { computed, inject } from "vue";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
@@ -21,9 +21,9 @@ const gestureIndicatorAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "gesture-indicator"]),
-      withPrefix(["role", role]),
-      withPrefix("gesture-indicator"),
+      cssPrefix(["layer", "gesture-indicator"]),
+      cssPrefix(["role", role]),
+      cssPrefix("gesture-indicator"),
       props.placement,
     ],
   };

package/src/components/image/image.vue

@@ -1,22 +1,29 @@
 <template src="./image.html"></template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { type ImageProps } from "./image.type";
 
 // Component setup (props, emits, injects)
 // ----------------------------------------------------------------------------
-const { defaultSrc, src } = defineProps<ImageProps>();
+const props = defineProps<ImageProps>();
 
 // Reactive state
 // ----------------------------------------------------------------------------
 // Initialize from src to avoid an empty src flash before mount
-const dataSrc = ref<string>(src ?? "");
+const dataSrc = ref<string>(props.src ?? "");
 
 // Methods
 // ----------------------------------------------------------------------------
 const handleError = () => {
-  if (defaultSrc) {
-    dataSrc.value = defaultSrc;
+  if (props.defaultSrc) {
+    dataSrc.value = props.defaultSrc;
   }
 };
+
+watch(
+  () => props.src,
+  (newVal) => {
+    dataSrc.value = newVal ?? "";
+  }
+);
 </script>

package/src/components/index.ts

@@ -28,3 +28,4 @@ export * from "./collapse";
 export * from "./form-group";
 export * from "./dropdown";
 export * from "./select";
+export * from "./slide-range";

package/src/components/layout/flex/flex.scss

@@ -16,8 +16,6 @@ $flex-align-content: sass.fn-naming-var("flex", "align-content");
 .#{$flex} {
   display: flex;
   box-sizing: border-box;
-  width: 100%;
-  min-height: 0;
   gap: #{$flex-gap};
   flex-direction: #{$flex-direction};
   flex-wrap: #{$flex-wrap};

package/src/components/layout/flex/flex.vue

@@ -2,7 +2,7 @@
 <template src="./flex.html"></template>
 <script lang="ts" setup>
 import { computed } from "vue";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type { FlexProps } from "./flex.type";
 
 // Component setup (props, emits, injects)
@@ -16,18 +16,18 @@ const props = withDefaults(defineProps<FlexProps>(), {
 const flexAttrs = computed(() => {
   const style = props.options.map((option) => {
     return {
-      [property(["flex", "gap", option?.breakpoint || ""])]:
+      [cssProperty(["flex", "gap", option?.breakpoint || ""])]:
         typeof option.gap === "number" ? `${option.gap}px` : option.gap,
-      [property(["flex", "direction", option?.breakpoint || ""])]: option.direction,
-      [property(["flex", "wrap", option?.breakpoint || ""])]: option.wrap,
-      [property(["flex", "justify", option?.breakpoint || ""])]: option.justify,
-      [property(["flex", "align", option?.breakpoint || ""])]: option.align,
-      [property(["flex", "align-content", option?.breakpoint || ""])]: option.alignContent,
+      [cssProperty(["flex", "direction", option?.breakpoint || ""])]: option.direction,
+      [cssProperty(["flex", "wrap", option?.breakpoint || ""])]: option.wrap,
+      [cssProperty(["flex", "justify", option?.breakpoint || ""])]: option.justify,
+      [cssProperty(["flex", "align", option?.breakpoint || ""])]: option.align,
+      [cssProperty(["flex", "align-content", option?.breakpoint || ""])]: option.alignContent,
     };
   });
 
   return {
-    class: [withPrefix("flex")],
+    class: [cssPrefix("flex")],
     style,
   };
 });

package/src/components/layout/flex-item/flex-item.html

@@ -0,0 +1 @@
+<div v-bind="flexItemAttrs"><slot /></div>

package/src/components/layout/flex-item/flex-item.scss

@@ -0,0 +1,48 @@
+@use "@toife/sass-layer" as sass;
+@use "sass:map";
+@use "sass:list";
+
+$flex-item: sass.fn-naming-prefix("flex-item");
+$flex-item-grow: sass.fn-naming-var("flex-item", "grow");
+$flex-item-shrink: sass.fn-naming-var("flex-item", "shrink");
+$flex-item-basis: sass.fn-naming-var("flex-item", "basis");
+$flex-item-order: sass.fn-naming-var("flex-item", "order");
+
+.#{$flex-item} {
+  box-sizing: border-box;
+  min-width: 0;
+  flex-grow: #{$flex-item-grow};
+  flex-shrink: #{$flex-item-shrink};
+  flex-basis: #{$flex-item-basis};
+  order: #{$flex-item-order};
+
+  $bp-names: map.keys(sass.$breakpoints);
+  $bp-count: list.length($bp-names);
+
+  @for $i from 1 through $bp-count {
+    $bp-name: list.nth($bp-names, $i);
+    $bp-min: map.get(sass.$breakpoints, $bp-name);
+
+    @media (min-width: $bp-min) {
+      flex-grow: #{sass.fn-naming-cascade-dvar(
+          ("flex-item", "grow"),
+          $bp-names,
+          $i,
+          $flex-item-grow
+        )};
+      flex-shrink: #{sass.fn-naming-cascade-dvar(
+          ("flex-item", "shrink"),
+          $bp-names,
+          $i,
+          $flex-item-shrink
+        )};
+      flex-basis: #{sass.fn-naming-cascade-dvar(
+          ("flex-item", "basis"),
+          $bp-names,
+          $i,
+          $flex-item-basis
+        )};
+      order: #{sass.fn-naming-cascade-dvar(("flex-item", "order"), $bp-names, $i, $flex-item-order)};
+    }
+  }
+}

package/src/components/layout/flex-item/flex-item.type.ts

@@ -0,0 +1,11 @@
+export type FlexItemOption = {
+  breakpoint?: string;
+  grow?: number;
+  shrink?: number;
+  basis?: string;
+  order?: number;
+};
+
+export type FlexItemProps = {
+  options?: FlexItemOption[];
+};

package/src/components/layout/flex-item/flex-item.vue

@@ -0,0 +1,27 @@
+<style lang="scss" src="./flex-item.scss" scoped></style>
+<template src="./flex-item.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { cssPrefix, cssProperty } from "../../../utils";
+import type { FlexItemProps } from "./flex-item.type";
+
+const props = withDefaults(defineProps<FlexItemProps>(), {
+  options: () => [],
+});
+
+const flexItemAttrs = computed(() => {
+  const style = props.options.map((option) => {
+    return {
+      [cssProperty(["flex-item", "grow", option?.breakpoint || ""])]: option.grow,
+      [cssProperty(["flex-item", "shrink", option?.breakpoint || ""])]: option.shrink,
+      [cssProperty(["flex-item", "basis", option?.breakpoint || ""])]: option.basis,
+      [cssProperty(["flex-item", "order", option?.breakpoint || ""])]: option.order,
+    };
+  });
+
+  return {
+    class: [cssPrefix("flex-item")],
+    style,
+  };
+});
+</script>

package/src/components/layout/flex-item/index.ts

@@ -0,0 +1,2 @@
+export { default as FlexItem } from "./flex-item.vue";
+export * from "./flex-item.type";

package/src/components/layout/grid/grid.scss

@@ -14,8 +14,6 @@ $grid-auto-flow: sass.fn-naming-var("grid", "auto-flow");
 .#{$grid} {
   display: grid;
   box-sizing: border-box;
-  width: 100%;
-  min-height: 0;
   gap: #{$grid-gap};
   grid-template-columns: #{$grid-columns};
   grid-template-rows: #{$grid-rows};

package/src/components/layout/grid/grid.vue

@@ -2,7 +2,7 @@
 <template src="./grid.html"></template>
 <script lang="ts" setup>
 import { computed } from "vue";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type { GridProps } from "./grid.type";
 
 // Component setup (props, emits, injects)
@@ -16,16 +16,16 @@ const props = withDefaults(defineProps<GridProps>(), {
 const gridAttrs = computed(() => {
   const style = props.options.map((option) => {
     return {
-      [property(["grid", "gap", option?.breakpoint || ""])]:
+      [cssProperty(["grid", "gap", option?.breakpoint || ""])]:
         typeof option.gap === "number" ? `${option.gap}px` : option.gap,
-      [property(["grid", "columns", option?.breakpoint || ""])]: option.columns,
-      [property(["grid", "rows", option?.breakpoint || ""])]: option.rows,
-      [property(["grid", "auto-flow", option?.breakpoint || ""])]: option.autoFlow,
+      [cssProperty(["grid", "columns", option?.breakpoint || ""])]: option.columns,
+      [cssProperty(["grid", "rows", option?.breakpoint || ""])]: option.rows,
+      [cssProperty(["grid", "auto-flow", option?.breakpoint || ""])]: option.autoFlow,
     };
   });
 
   return {
-    class: [withPrefix("grid")],
+    class: [cssPrefix("grid")],
     style,
   };
 });

package/src/components/layout/grid-item/grid-item.html

@@ -0,0 +1 @@
+<div v-bind="gridItemAttrs"><slot /></div>

package/src/components/layout/grid-item/grid-item.scss

@@ -0,0 +1,49 @@
+@use "@toife/sass-layer" as sass;
+@use "sass:map";
+@use "sass:list";
+
+$grid-item: sass.fn-naming-prefix("grid-item");
+$grid-item-row: sass.fn-naming-var("grid-item", "row");
+$grid-item-column: sass.fn-naming-var("grid-item", "column");
+$grid-item-justify: sass.fn-naming-var("grid-item", "justify");
+$grid-item-align: sass.fn-naming-var("grid-item", "align");
+
+.#{$grid-item} {
+  display: grid;
+  box-sizing: border-box;
+  min-width: 0;
+  grid-column: #{$grid-item-column};
+  grid-row: #{$grid-item-row};
+  justify-self: #{$grid-item-justify};
+  align-self: #{$grid-item-align};
+
+  $bp-names: map.keys(sass.$breakpoints);
+  $bp-count: list.length($bp-names);
+
+  @for $i from 1 through $bp-count {
+    $bp-name: list.nth($bp-names, $i);
+    $bp-min: map.get(sass.$breakpoints, $bp-name);
+
+    @media (min-width: $bp-min) {
+      grid-column: #{sass.fn-naming-cascade-dvar(
+          ("grid-item", "column"),
+          $bp-names,
+          $i,
+          $grid-item-column
+        )};
+      grid-row: #{sass.fn-naming-cascade-dvar(("grid-item", "row"), $bp-names, $i, $grid-item-row)};
+      justify-self: #{sass.fn-naming-cascade-dvar(
+          ("grid-item", "justify"),
+          $bp-names,
+          $i,
+          $grid-item-justify
+        )};
+      align-self: #{sass.fn-naming-cascade-dvar(
+          ("grid-item", "align"),
+          $bp-names,
+          $i,
+          $grid-item-align
+        )};
+    }
+  }
+}

package/src/components/layout/grid-item/grid-item.type.ts

@@ -0,0 +1,14 @@
+export type GridItemJustify = "start" | "end" | "center" | "stretch";
+export type GridItemAlign = "start" | "end" | "center" | "stretch";
+
+export type GridItemOption = {
+  breakpoint?: string;
+  row?: number;
+  column?: number;
+  justify?: GridItemJustify;
+  align?: GridItemAlign;
+};
+
+export type GridItemProps = {
+  options?: GridItemOption[];
+};

package/src/components/layout/grid-item/grid-item.vue

@@ -0,0 +1,27 @@
+<style lang="scss" src="./grid-item.scss" scoped></style>
+<template src="./grid-item.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { cssPrefix, cssProperty } from "../../../utils";
+import type { GridItemProps } from "./grid-item.type";
+
+const props = withDefaults(defineProps<GridItemProps>(), {
+  options: () => [],
+});
+
+const gridItemAttrs = computed(() => {
+  const style = props.options.map((option) => {
+    return {
+      [cssProperty(["grid-item", "row", option?.breakpoint || ""])]: option.row,
+      [cssProperty(["grid-item", "column", option?.breakpoint || ""])]: option.column,
+      [cssProperty(["grid-item", "justify", option?.breakpoint || ""])]: option.justify,
+      [cssProperty(["grid-item", "align", option?.breakpoint || ""])]: option.align,
+    };
+  });
+
+  return {
+    class: [cssPrefix("grid-item")],
+    style,
+  };
+});
+</script>

package/src/components/layout/grid-item/index.ts

@@ -0,0 +1,2 @@
+export { default as GridItem } from "./grid-item.vue";
+export * from "./grid-item.type";

package/src/components/layout/index.ts

@@ -1,3 +1,4 @@
 export * from "./grid";
 export * from "./flex";
-export * from "./cell";
+export * from "./grid-item";
+export * from "./flex-item";

package/src/components/modal/modal.scss

@@ -9,15 +9,17 @@ $viewport-width: sass.fn-naming-var("viewport", "width");
 $viewport-max-width: sass.fn-naming-var("viewport", "max-width");
 $viewport-height: sass.fn-naming-var("viewport", "height");
 $viewport-max-height: sass.fn-naming-var("viewport", "max-height");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $transition-duration: sass.fn-naming-var("motion", "duration");
+$border-radius: calc(min(#{$viewport-width}, #{$radius-size}) * #{$radius-ratio});
 
 .#{$modal} {
-  background: rgb(#{$modal-background-color});
+  background: rgba(#{$modal-background-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,

package/src/components/modal/modal.vue

@@ -6,7 +6,7 @@ import { gesture as toifeGesture } from "@toife/gesture";
 import { Present } from "../present";
 import { GestureIndicator } from "../gesture-indicator";
 import { type ModalProps, type ModalEmit } from "./modal.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -47,10 +47,10 @@ const modalAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "modal"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix("modal"),
+      cssPrefix(["layer", "modal"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix("modal"),
       {
         fullscreen: props.fullscreen,
         [props.placement]: true,
@@ -67,6 +67,65 @@ const close = (e: string) => {
   emit("close", e);
 };
 
+const SCROLLABLE_OVERFLOW_VALUES = ["auto", "scroll", "overlay"];
+
+/**
+ * Check if the element is scrollable
+ * @param el - The element
+ * @param axis - The axis of the scroll
+ * @returns True if the element is scrollable, false otherwise
+ */
+const isScrollable = (el: HTMLElement, axis: "x" | "y") => {
+  const style = getComputedStyle(el);
+  if (axis == "y") {
+    return (
+      el.scrollHeight > el.clientHeight && SCROLLABLE_OVERFLOW_VALUES.includes(style.overflowY)
+    );
+  }
+
+  return el.scrollWidth > el.clientWidth && SCROLLABLE_OVERFLOW_VALUES.includes(style.overflowX);
+};
+
+/**
+ * Check if the element has remaining scroll
+ * @param el - The element
+ * @param direction - The direction of the scroll
+ * @returns True if the element has remaining scroll, false otherwise
+ */
+const hasRemainingScroll = (el: HTMLElement, direction: "up" | "down" | "left" | "right") => {
+  if (direction == "down") return el.scrollTop > 0;
+  if (direction == "up") return el.scrollTop < el.scrollHeight - el.clientHeight;
+  if (direction == "right") return el.scrollLeft > 0;
+
+  return el.scrollLeft < el.scrollWidth - el.clientWidth;
+};
+
+/**
+ * Check if the gesture can start
+ * @param e - The event
+ * @returns True if the gesture can start, false otherwise
+ */
+const canStartGesture = (e: unknown) => {
+  if (!modal.value || !gestureDir.value) return true;
+
+  const target = (e as { target?: EventTarget }).target;
+  if (!(target instanceof Element)) return true;
+
+  const axis = gestureDir.value == "left" || gestureDir.value == "right" ? "x" : "y";
+  let current: Element | null = target;
+
+  while (current && current !== modal.value) {
+    if (current instanceof HTMLElement && isScrollable(current, axis)) {
+      if (hasRemainingScroll(current, gestureDir.value)) {
+        return false;
+      }
+    }
+    current = current.parentElement;
+  }
+
+  return true;
+};
+
 // Cooldown so rapid gesture events do not fight the sheet animation
 const busy = () => {
   isBusy.value = true;
@@ -94,6 +153,10 @@ watch(
             return false;
           }
 
+          if (!canStartGesture(e)) {
+            return false;
+          }
+
           return true;
         },
 

package/src/components/page/page.vue

@@ -1,10 +1,10 @@
 <template src="./page.html"></template>
 <style lang="scss" src="./page.scss" scoped></style>
 <script lang="ts" setup>
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 
 // Top-level page surface inside the app shell
 const pageAttrs = {
-  class: [withPrefix("page")],
+  class: [cssPrefix("page")],
 } as const;
 </script>

package/src/components/present/present.scss

@@ -18,7 +18,7 @@ $present-translate-minus: sass.fn-naming-dvar(("translate"), "-100%");
 $present-opacity: sass.fn-naming-dvar(("present", "opacity"), 1);
 
 .#{$backdrop} {
-  position: absolute;
+  position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
@@ -30,7 +30,7 @@ $present-opacity: sass.fn-naming-dvar(("present", "opacity"), 1);
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease,
     opacity #{$transition-duration} ease;
-  background-color: rgb(#{$backdrop-background-color});
+  background-color: rgba(#{$backdrop-background-color});
   opacity: #{$backdrop-opacity};
 }
 
@@ -38,7 +38,7 @@ $present-opacity: sass.fn-naming-dvar(("present", "opacity"), 1);
   display: flex;
   justify-content: center;
   align-items: center;
-  position: absolute;
+  position: fixed;
   width: fit-content;
   height: fit-content;
   transition: transform #{$transition-duration} ease;

package/src/components/present/present.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import type { PresentEmit, PresentProps, RenderOptions } from "./present.type";
 import { computed, onMounted, reactive, ref, watch } from "vue";
-import { withPrefix, property } from "../../utils";
+import { cssPrefix, cssProperty } from "../../utils";
 import { usePresent } from "./present.composable";
 
 // Component setup (props, emits, injects)
@@ -28,7 +28,7 @@ const zIndex = ref(0);
 const isShow = ref(false);
 const styles = reactive({
   backdropTransitionDuration: "0.2s",
-  backdropOpacity: 0.4,
+  backdropOpacity: undefined,
   presentTransitionDuration: "0.2s",
   presentTranslate: "0px",
   presentOpacity: 1,
@@ -38,11 +38,11 @@ const styles = reactive({
 // ----------------------------------------------------------------------------
 const backdropAttrs = computed(() => {
   return {
-    class: [withPrefix(["layer", "backdrop"]), withPrefix("present-backdrop")],
+    class: [cssPrefix(["layer", "backdrop"]), cssPrefix("present-backdrop")],
     style: {
       zIndex: zIndex.value - 1,
-      [property("transition-duration")]: styles.backdropTransitionDuration,
-      [property(["backdrop", "opacity"])]:
+      [cssProperty("transition-duration")]: styles.backdropTransitionDuration,
+      [cssProperty(["backdrop", "opacity"])]:
         props.backdrop === "transparent" ? 0 : styles.backdropOpacity,
     },
   };
@@ -51,13 +51,13 @@ const backdropAttrs = computed(() => {
 // Present attributes
 const presentAttrs = computed(() => {
   return {
-    class: [withPrefix("present"), props.class, props.placement],
+    class: [cssPrefix("present"), props.class, props.placement],
     style: [
       {
         zIndex: zIndex.value,
-        [property("transition-duration")]: styles.presentTransitionDuration,
-        [property("translate")]: styles.presentTranslate,
-        [property(["present", "opacity"])]: styles.presentOpacity,
+        [cssProperty("transition-duration")]: styles.presentTransitionDuration,
+        [cssProperty("translate")]: styles.presentTranslate,
+        [cssProperty(["present", "opacity"])]: styles.presentOpacity,
       },
       props.style,
     ],
@@ -87,9 +87,9 @@ const render = (data: RenderOptions) => {
   if (data.presentTransitionDuration !== undefined) {
     styles.presentTransitionDuration = data.presentTransitionDuration;
   }
-  if (data.backdropOpacity !== undefined) {
-    styles.backdropOpacity = data.backdropOpacity;
-  }
+
+  styles.backdropOpacity = data.backdropOpacity;
+
   if (data.presentTranslate !== undefined) {
     styles.presentTranslate = data.presentTranslate;
   }
@@ -115,7 +115,7 @@ const open = () => {
 
     render({
       backdropTransitionDuration: time.value,
-      backdropOpacity: 0.4,
+      backdropOpacity: undefined,
       presentTranslate: String(presentTranslate),
       presentTransitionDuration: time.value,
       presentOpacity: 1,
@@ -128,7 +128,7 @@ const open = () => {
     }, props.duration);
   } else {
     render({
-      backdropOpacity: 0.4,
+      backdropOpacity: undefined,
       backdropTransitionDuration: time.value,
       presentTranslate: "0px",
       presentTransitionDuration: time.value,

package/src/components/radio/radio/radio.html

@@ -1,6 +1,6 @@
 <div
   v-bind="radioAttrs"
-  @click="onRadio"
+  @pointerup="onRadio"
   :tabindex="disabled ? -1 : 0"
   @focus="onFocus"
   @blur="onBlur"