@toife/vue 3.1.6 → 3.2.2

package/src/components/modal/modal.vue

@@ -1,251 +0,0 @@
-<style lang="scss" src="./modal.scss" scoped></style>
-<template src="./modal.html"></template>
-<script lang="ts" setup>
-import { computed, inject, onUnmounted, ref, watch } from "vue";
-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 { cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ModalProps>(), {
-  backdrop: "display",
-  keepalive: true,
-  visible: false,
-  gesture: true,
-  fullscreen: false,
-  placement: "bottom",
-  indicator: true,
-  duration: 200,
-  bounce: 0,
-});
-const emit = defineEmits<ModalEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const modal = ref();
-const present = ref();
-const isBusy = ref(false);
-const ges = ref<unknown>(null);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const gestureDir = computed(() => {
-  if (props.placement == "bottom") return "down";
-  if (props.placement == "top") return "up";
-  if (props.placement == "left") return "left";
-  if (props.placement == "right") return "right";
-});
-
-const modalAttrs = computed(() => {
-  const shape = props?.shape || appState?.shape.value || "";
-  const role = props.role || appState?.role.value || "";
-
-  return {
-    class: [
-      cssPrefix(["layer", "modal"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix("modal"),
-      {
-        fullscreen: props.fullscreen,
-        [props.placement]: true,
-      },
-      props.class,
-    ],
-    style: props.style,
-  };
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-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;
-  setTimeout(() => {
-    isBusy.value = false;
-  }, 300);
-};
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-watch(
-  () => modal.value,
-  (val) => {
-    if (val) {
-      // Drag-to-dismiss along the placement axis (skipped for centered modals)
-      ges.value = toifeGesture(modal.value, {
-        isMoving: false,
-
-        options: {
-          minDist: 30,
-        },
-
-        beforeEvent(e: unknown) {
-          if (isBusy.value || !props.gesture || props.placement == "center") {
-            return false;
-          }
-
-          if (!canStartGesture(e)) {
-            return false;
-          }
-
-          return true;
-        },
-
-        down() {
-          this.isMoving = false;
-        },
-
-        fast({ initialDirection }: unknown) {
-          busy();
-          if (initialDirection == gestureDir.value) {
-            emit("close", "gesture");
-          } else {
-            present.value.open();
-          }
-        },
-
-        move({ deltaY, deltaX, initialDirection }: unknown) {
-          if (initialDirection != gestureDir.value) return;
-          let tv = 0;
-          if (props.placement == "bottom" || props.placement == "top") tv = deltaY;
-          else tv = deltaX;
-
-          if (props.placement == "bottom") {
-            tv = deltaY > 0 ? deltaY : 0;
-          }
-
-          if (props.placement == "top") {
-            tv = deltaY < 0 ? deltaY : 0;
-          }
-
-          if (props.placement == "left") {
-            tv = deltaX < 0 ? deltaX : 0;
-          }
-
-          if (props.placement == "right") {
-            tv = deltaX > 0 ? deltaX : 0;
-          }
-
-          if (
-            (props.placement == "bottom" && (tv >= 10 || this.isMoving)) ||
-            (props.placement == "top" && (tv <= -10 || this.isMoving)) ||
-            (props.placement == "left" && (tv <= -10 || this.isMoving)) ||
-            (props.placement == "right" && (tv >= 10 || this.isMoving))
-          ) {
-            this.isMoving = true;
-            present.value.render({
-              presentTranslate: tv + "px",
-              presentTransitionDuration: "0s",
-            });
-          }
-        },
-
-        up({ deltaY, deltaX, initialDirection }: unknown) {
-          this.isMoving = false;
-          busy();
-          if (initialDirection != gestureDir.value) {
-            present.value.open();
-            return;
-          }
-
-          let size, diff, val;
-          if (props.placement == "bottom" || props.placement == "top") {
-            size = modal.value.offsetHeight;
-            val = deltaY;
-          } else {
-            size = modal.value.offsetWidth;
-            val = deltaX;
-          }
-
-          diff = (val / size) * 100;
-
-          if (diff > 50) {
-            emit("close", "gesture");
-          } else {
-            present.value.open();
-          }
-        },
-
-        cancel() {
-          this.isMoving = false;
-          busy();
-          present.value.open();
-        },
-      });
-    }
-  }
-);
-
-onUnmounted(() => {
-  if (ges.value) (ges.value as { destroy: () => void }).destroy();
-});
-</script>

package/src/components/page/index.ts

@@ -1 +0,0 @@
-export { default as Page } from "./page.vue";

package/src/components/page/page.html

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

package/src/components/page/page.scss

@@ -1,17 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$page: sass.fn-naming-prefix("page");
-
-.#{$page} {
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
-}

package/src/components/page/page.vue

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

package/src/components/present/index.ts

@@ -1,3 +0,0 @@
-export { default as Present } from "./present.vue";
-export * from "./present.composable";
-export * from "./present.type";

package/src/components/present/present.composable.ts

@@ -1,22 +0,0 @@
-import { ref } from "vue";
-
-// Base z-index for stacked overlays; increments by 2 so backdrop sits one level below its sheet
-const index = ref(1000);
-
-export const usePresent = () => {
-  const newIndex = () => {
-    index.value += 2;
-    return index.value;
-  };
-
-  const resetIndex = () => {
-    index.value = 1000;
-    return index.value;
-  };
-
-  return {
-    newIndex,
-    resetIndex,
-    index,
-  };
-};

package/src/components/present/present.html

@@ -1,9 +0,0 @@
-<div
-  v-bind="backdropAttrs"
-  @click="onClickBackdrop"
-  v-if="isRender && backdrop !== 'none'"
-  v-show="isShow"
-></div>
-<div v-bind="presentAttrs" v-if="isRender" v-show="isShow">
-  <slot />
-</div>

package/src/components/present/present.scss

@@ -1,81 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$present: sass.fn-naming-prefix("present");
-$backdrop: sass.fn-naming-prefix("present-backdrop");
-
-// Property name
-$transition-duration: sass.fn-naming-dvar(
-  ("transition", "duration"),
-  sass.fn-naming-var("duration")
-);
-
-$backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
-$backdrop-opacity: sass.fn-naming-var("backdrop", "opacity");
-
-$present-translate-plus: sass.fn-naming-dvar(("translate"), "100%");
-$present-translate-minus: sass.fn-naming-dvar(("translate"), "-100%");
-$present-opacity: sass.fn-naming-dvar(("present", "opacity"), 1);
-
-.#{$backdrop} {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  transition:
-    box-shadow #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease,
-    border-radius #{$transition-duration} ease,
-    opacity #{$transition-duration} ease;
-  background-color: rgba(#{$backdrop-background-color});
-  opacity: #{$backdrop-opacity};
-}
-
-.#{$present} {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  width: fit-content;
-  height: fit-content;
-  transition: transform #{$transition-duration} ease;
-
-  &.bottom {
-    bottom: 0;
-    left: 0;
-    transform: translateY(#{$present-translate-plus});
-    width: 100%;
-  }
-
-  &.top {
-    top: 0;
-    left: 0;
-    transform: translateY(#{$present-translate-minus});
-    width: 100%;
-  }
-
-  &.right {
-    top: 0;
-    right: 0;
-    transform: translateX(#{$present-translate-plus});
-    height: 100%;
-  }
-
-  &.left {
-    top: 0;
-    left: 0;
-    transform: translateX(#{$present-translate-minus});
-    height: 100%;
-  }
-
-  &.center {
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-    opacity: #{$present-opacity};
-    transition: opacity #{$transition-duration} ease;
-  }
-}

package/src/components/present/present.type.ts

@@ -1,26 +0,0 @@
-export type PresentPlacement = "top" | "left" | "right" | "center" | "bottom";
-
-// Present props
-export type PresentProps = {
-  keepalive?: boolean;
-  visible?: boolean;
-  backdrop?: "display" | "none" | "transparent";
-  placement?: PresentPlacement;
-  style?: unknown;
-  class?: unknown;
-  bounce?: number | string | boolean;
-  duration?: number;
-};
-
-// Present emit
-export type PresentEmit = { (e: "close", type?: string): void };
-
-// Render options
-// Parameters for render function
-export type RenderOptions = {
-  backdropTransitionDuration?: string;
-  backdropOpacity?: number;
-  presentTransitionDuration?: string;
-  presentTranslate?: string;
-  presentOpacity?: number;
-};

package/src/components/present/present.vue

@@ -1,198 +0,0 @@
-<style lang="scss" src="./present.scss" scoped></style>
-<template src="./present.html"></template>
-<script lang="ts" setup>
-import type { PresentEmit, PresentProps, RenderOptions } from "./present.type";
-import { computed, onMounted, reactive, ref, watch } from "vue";
-import { cssPrefix, cssProperty } from "../../utils";
-import { usePresent } from "./present.composable";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-defineOptions({ inheritAttrs: false });
-
-const props = withDefaults(defineProps<PresentProps>(), {
-  keepalive: false,
-  visible: false,
-  backdrop: "display",
-  duration: 200,
-  placement: "bottom",
-  bounce: false,
-});
-const emit = defineEmits(["close"]) as unknown as PresentEmit;
-const presentIndex = usePresent();
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isBounced = ref(false);
-const zIndex = ref(0);
-const isShow = ref(false);
-const styles = reactive({
-  backdropTransitionDuration: "0.2s",
-  backdropOpacity: undefined as number | undefined,
-  presentTransitionDuration: "0.2s",
-  presentTranslate: "0px",
-  presentOpacity: 1,
-});
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const backdropAttrs = computed(() => {
-  return {
-    class: [cssPrefix(["layer", "backdrop"]), cssPrefix("present-backdrop")],
-    style: {
-      zIndex: zIndex.value - 1,
-      [cssProperty("transition-duration")]: styles.backdropTransitionDuration,
-      [cssProperty(["backdrop", "opacity"])]:
-        props.backdrop === "transparent" ? 0 : styles.backdropOpacity,
-    },
-  };
-});
-
-// Present attributes
-const presentAttrs = computed(() => {
-  return {
-    class: [cssPrefix("present"), props.class, props.placement],
-    style: [
-      {
-        zIndex: zIndex.value,
-        [cssProperty("transition-duration")]: styles.presentTransitionDuration,
-        [cssProperty("translate")]: styles.presentTranslate,
-        [cssProperty(["present", "opacity"])]: styles.presentOpacity,
-      },
-      props.style,
-    ],
-  };
-});
-
-const isRender = computed(() => {
-  return isShow.value || props.keepalive;
-});
-
-const time = computed(() => {
-  return props.duration / 1000 + "s";
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const createIndex = () => {
-  if (zIndex.value === 0 || !props.keepalive) {
-    zIndex.value = presentIndex.newIndex();
-  }
-};
-
-const render = (data: RenderOptions) => {
-  if (data.backdropTransitionDuration !== undefined) {
-    styles.backdropTransitionDuration = data.backdropTransitionDuration;
-  }
-  if (data.presentTransitionDuration !== undefined) {
-    styles.presentTransitionDuration = data.presentTransitionDuration;
-  }
-
-  styles.backdropOpacity = data.backdropOpacity;
-
-  if (data.presentTranslate !== undefined) {
-    styles.presentTranslate = data.presentTranslate;
-  }
-  if (data.presentOpacity !== undefined) {
-    styles.presentOpacity = data.presentOpacity;
-  }
-};
-
-// On click backdrop
-const onClickBackdrop = (e: unknown) => {
-  (e as Event).preventDefault();
-  emit("close", "backdrop");
-};
-
-const open = () => {
-  if (props.bounce && !isBounced.value) {
-    isBounced.value = true;
-    let presentTranslate = props.bounce;
-
-    if (props.placement == "bottom" || props.placement == "right") {
-      presentTranslate = `calc(${props.bounce} * -1)`;
-    }
-
-    render({
-      backdropTransitionDuration: time.value,
-      backdropOpacity: undefined,
-      presentTranslate: String(presentTranslate),
-      presentTransitionDuration: time.value,
-      presentOpacity: 1,
-    });
-
-    setTimeout(() => {
-      render({
-        presentTranslate: "0px",
-      });
-    }, props.duration);
-  } else {
-    render({
-      backdropOpacity: undefined,
-      backdropTransitionDuration: time.value,
-      presentTranslate: "0px",
-      presentTransitionDuration: time.value,
-      presentOpacity: 1,
-    });
-  }
-};
-
-const close = () => {
-  isBounced.value = false;
-  let presentTranslate = "0px";
-  let presentOpacity = 1;
-
-  if (props.placement == "bottom" || props.placement == "right") {
-    presentTranslate = "100%";
-  } else if (props.placement == "top" || props.placement == "left") {
-    presentTranslate = "-100%";
-  } else if (props.placement == "center") {
-    presentTranslate = "0px";
-    presentOpacity = 0;
-  }
-
-  render({
-    backdropOpacity: 0,
-    backdropTransitionDuration: time.value,
-    presentTranslate,
-    presentTransitionDuration: time.value,
-    presentOpacity,
-  });
-};
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-onMounted(() => {
-  if (props.visible) open();
-  else close();
-});
-
-// Trigger visible
-watch(
-  () => props.visible,
-  () => {
-    if (props.visible) {
-      createIndex();
-      isShow.value = true;
-
-      setTimeout(() => {
-        open();
-      }, 50);
-    } else {
-      close();
-
-      setTimeout(() => {
-        isShow.value = false;
-      }, props.duration);
-    }
-  }
-);
-
-// Provide / expose (public API)
-// ----------------------------------------------------------------------------
-defineExpose({
-  render,
-  open,
-  close,
-});
-</script>

package/src/components/radio/index.ts

@@ -1,2 +0,0 @@
-export * from "./radio";
-export * from "./radio-group";

package/src/components/radio/radio/index.ts

@@ -1,2 +0,0 @@
-export { default as Radio } from "./radio.vue";
-export type { RadioProps } from "./radio.type";

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

@@ -1,11 +0,0 @@
-<div
-  v-bind="radioAttrs"
-  @pointerup="onRadio"
-  :tabindex="disabled ? -1 : 0"
-  @focus="onFocus"
-  @blur="onBlur"
-  @keydown="onKeydown"
->
-  <div v-bind="radioIconAttrs"></div>
-  <slot></slot>
-</div>