@toife/vue 3.1.4 → 3.1.6

package/src/components/field/field.type.ts

@@ -1,13 +1,13 @@
-import type { AppDirection, AppSize } from "../app";
+import type { AppDirection } from "../app";
 
 export type FieldVariant = "outline" | "fill" | "underline";
-export type FieldSize = AppSize;
+export type FieldSize = string;
 export type FieldType = "text" | "number" | "email" | "password" | "tel" | "url" | "paragraph";
 
 // Type definitions
 export type FieldProps = {
   // Wrapper
-  modelValue?: string;
+  modelValue?: string | number;
   name?: string;
   variant?: FieldVariant;
   role?: string;
@@ -18,7 +18,7 @@ export type FieldProps = {
 
   // Input
   id?: string;
-  value?: string;
+  value?: string | number;
   placeholder?: string;
   disabled?: boolean;
   readonly?: boolean;

package/src/components/field/field.vue

@@ -1,9 +1,9 @@
+<style lang="scss" src="./field.scss" scoped></style>
 <template src="./field.html"></template>
 <script lang="ts" setup>
-import { computed, inject } from "vue";
-import type { FieldProps } from "./field.type";
-import type { FieldEmit } from "./field.type";
-import { OutlineField } from "./outline";
+import { computed, inject, nextTick, onMounted, ref, watch } from "vue";
+import type { FieldProps, FieldEmit } from "./field.type";
+import { cssProperty, cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -12,6 +12,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   modelValue: "",
   type: "text",
   size: "standard",
+  role: undefined,
+  shape: undefined,
   disabled: false,
   readonly: false,
   message: "",
@@ -21,66 +23,101 @@ const props = withDefaults(defineProps<FieldProps>(), {
   shadow: undefined,
   direction: undefined,
   line: 1,
+  maxLine: 1,
 });
 const emit = defineEmits<FieldEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
+// Reactive state
+// ----------------------------------------------------------------------------
+const isFocus = ref(false);
+const caret = ref(0);
+const content = ref("");
+
 // Computed properties
 // ----------------------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
+const fieldAttrs = computed(() => {
+  const role = props.role || appState?.role?.value || "";
+  const shape = props.shape || appState?.shape?.value || "";
+  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow?.value) ?? false;
+  const direction = props.direction || appState?.direction?.value || "left";
 
-const shape = computed(() => {
-  return props.shape || appState?.shape.value || "";
+  return {
+    class: [
+      cssPrefix(["layer", "field"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix("field"),
+      cssPrefix(["size", props.size]),
+      cssPrefix(["direction", direction]),
+      props.variant,
+      props.type,
+      {
+        disabled: props.disabled,
+        focus: isFocus.value,
+        shadow,
+        readonly: props.readonly,
+      },
+    ],
+    style: {
+      [cssProperty(["field", "line"])]: props.line,
+      [cssProperty(["field", "max-line"])]: props.maxLine || props.line,
+    },
+  };
 });
 
-const shadow = computed(() => {
-  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+const rawContent = computed(() => {
+  return props.modelValue ?? props.value ?? "";
 });
 
-const direction = computed(() => {
-  return props.direction || appState?.direction?.value || "left";
-});
+const fieldContentAttrs = computed(() => ({
+  class: [cssPrefix("field-content")],
+}));
 
-const fieldAttrs = computed(() => {
-  return {
-    ...props,
-    direction: direction.value,
-    role: role.value,
-    shape: shape.value,
-    shadow: shadow.value,
-    onInput,
-    onFocus,
-    onBlur,
-    onBeforeinput,
-  };
-});
+const fieldInputAttrs = computed(() => ({
+  class: [cssPrefix("field-input")],
+  name: props.name,
+  id: props.id,
+  placeholder: props.placeholder,
+  autocomplete: props.autocomplete,
+  type: props.type,
+  readonly: props.readonly,
+  disabled: props.disabled,
+}));
+
+const fieldMessageAttrs = computed(() => ({
+  class: [cssPrefix("field-message")],
+}));
+
+const fieldHelpAttrs = computed(() => ({
+  class: [cssPrefix("field-help")],
+}));
 
 // Methods
 // ----------------------------------------------------------------------------
-const onInput = (event: Event) => {
-  let raw = "";
-  // Outline variant uses contenteditable for non-password types; password uses a real input
-  if (props.type !== "password") {
-    raw = (event.target as HTMLElement).innerText;
-  } else {
-    raw = (event.target as HTMLInputElement).value;
-  }
-  const value = raw.trim() === "" ? "" : raw;
-  emit("update:modelValue", value as string);
-  emit("input", event);
+const onFocus = (ev: FocusEvent) => {
+  if (props.disabled) return;
+  isFocus.value = true;
+  emit("focus", ev);
 };
 
-const onFocus = (event: FocusEvent) => {
-  emit("focus", event);
+const onBlur = (ev: FocusEvent) => {
+  if (props.disabled) return;
+  isFocus.value = false;
+  emit("blur", ev);
 };
 
-const onBlur = (event: FocusEvent) => {
-  emit("blur", event);
-};
+watch(
+  () => rawContent.value,
+  (value) => {
+    content.value = value.toString();
+  }
+);
 
-const onBeforeinput = (event: Event) => {
-  emit("beforeinput", event);
-};
+watch(
+  () => content.value,
+  (value) => {
+    emit("update:modelValue", value.toString());
+  }
+);
 </script>

package/src/components/field/index.ts

@@ -1,2 +1,2 @@
 export { default as Field } from "./field.vue";
-export type { FieldVariant, FieldSize, FieldProps, FieldEmit } from "./field.type";
+export * from "./field.type";

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

@@ -7,10 +7,10 @@ $gesture-indicator: sass.fn-naming-prefix("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");
+$transition-duration: sass.fn-naming-var("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,

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/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.vue

@@ -2,7 +2,7 @@
 <template src="./flex-item.html"></template>
 <script lang="ts" setup>
 import { computed } from "vue";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type { FlexItemProps } from "./flex-item.type";
 
 const props = withDefaults(defineProps<FlexItemProps>(), {
@@ -12,15 +12,15 @@ const props = withDefaults(defineProps<FlexItemProps>(), {
 const flexItemAttrs = computed(() => {
   const style = props.options.map((option) => {
     return {
-      [property(["flex-item", "grow", option?.breakpoint || ""])]: option.grow,
-      [property(["flex-item", "shrink", option?.breakpoint || ""])]: option.shrink,
-      [property(["flex-item", "basis", option?.breakpoint || ""])]: option.basis,
-      [property(["flex-item", "order", option?.breakpoint || ""])]: option.order,
+      [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: [withPrefix("flex-item")],
+    class: [cssPrefix("flex-item")],
     style,
   };
 });

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.vue

@@ -2,7 +2,7 @@
 <template src="./grid-item.html"></template>
 <script lang="ts" setup>
 import { computed } from "vue";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type { GridItemProps } from "./grid-item.type";
 
 const props = withDefaults(defineProps<GridItemProps>(), {
@@ -12,15 +12,15 @@ const props = withDefaults(defineProps<GridItemProps>(), {
 const gridItemAttrs = computed(() => {
   const style = props.options.map((option) => {
     return {
-      [property(["grid-item", "row", option?.breakpoint || ""])]: option.row,
-      [property(["grid-item", "column", option?.breakpoint || ""])]: option.column,
-      [property(["grid-item", "justify", option?.breakpoint || ""])]: option.justify,
-      [property(["grid-item", "align", option?.breakpoint || ""])]: option.align,
+      [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: [withPrefix("grid-item")],
+    class: [cssPrefix("grid-item")],
     style,
   };
 });

package/src/components/modal/modal.scss

@@ -15,11 +15,11 @@ $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");
+$transition-duration: sass.fn-naming-var("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

@@ -7,7 +7,7 @@ $backdrop: sass.fn-naming-prefix("present-backdrop");
 // Property name
 $transition-duration: sass.fn-naming-dvar(
   ("transition", "duration"),
-  sass.fn-naming-var("motion", "duration")
+  sass.fn-naming-var("duration")
 );
 
 $backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
@@ -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 as number | 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,