@toife/vue 3.3.3 → 3.3.5

package/src/components/image/image.vue

@@ -1,32 +0,0 @@
-<template src="./image.html"></template>
-<script setup lang="ts">
-import { unref, ref, watch, computed, inject } from "vue";
-import { APP_PROVIDER_STATE_KEY, type AppProviderState, type ImageProps } from "@toife/core";
-import type { ProviderStateRefs } from "../../shared/provider-state";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = defineProps<ImageProps>();
-const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-// Initialize from src to avoid an empty src flash before mount
-const dataSrc = ref<string>(props.src ?? "");
-const defaultSrc = computed(() => props.defaultSrc ?? unref(appState?.data)?.errorImageUrl ?? "");
-
-// Methods
-// ----------------------------------------------------------------------------
-const handleError = () => {
-  if (defaultSrc.value) {
-    dataSrc.value = defaultSrc.value as string;
-  }
-};
-
-watch(
-  () => props.src,
-  (newVal) => {
-    dataSrc.value = newVal ?? "";
-  }
-);
-</script>

package/src/components/image/index.ts

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

package/src/components/index.ts

@@ -1,33 +0,0 @@
-export * from "./app";
-export * from "./present";
-export * from "./modal";
-export * from "./gesture-indicator";
-export * from "./layout";
-export * from "./button";
-export * from "./cable";
-export * from "./toolbar";
-export * from "./skeleton";
-export * from "./tabs";
-export * from "./switch";
-export * from "./checkbox";
-export * from "./radio";
-export * from "./card";
-export * from "./toast";
-export * from "./avatar";
-export * from "./divider";
-export * from "./image";
-export * from "./action";
-export * from "./decision-modal";
-export * from "./field";
-export * from "./segmented-field";
-export * from "./container";
-export * from "./refresher";
-export * from "./route";
-export * from "./page";
-export * from "./collapse";
-export * from "./form-group";
-export * from "./dropdown";
-export * from "./select";
-export * from "./slide-range";
-export * from "./tag";
-export * from "./tooltip";

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

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

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

@@ -1,15 +0,0 @@
-<style lang="scss" src="@toife/core/features/layout/flex.scss" scoped></style>
-<template src="./flex.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { FLEX_DEFAULT_PROPS, getFlexAttrs, type FlexProps } from "@toife/core";
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<FlexProps>(), {
-  ...FLEX_DEFAULT_PROPS,
-});
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const flexAttrs = computed(() => getFlexAttrs(props.options));
-</script>

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

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

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

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

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

@@ -1,11 +0,0 @@
-<style lang="scss" src="@toife/core/features/layout/flex-item.scss" scoped></style>
-<template src="./flex-item.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { FLEX_ITEM_DEFAULT_PROPS, getFlexItemAttrs, type FlexItemProps } from "@toife/core";
-const props = withDefaults(defineProps<FlexItemProps>(), {
-  ...FLEX_ITEM_DEFAULT_PROPS,
-});
-
-const flexItemAttrs = computed(() => getFlexItemAttrs(props.options));
-</script>

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

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

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

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

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

@@ -1,15 +0,0 @@
-<style lang="scss" src="@toife/core/features/layout/grid.scss" scoped></style>
-<template src="./grid.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { GRID_DEFAULT_PROPS, getGridAttrs, type GridProps } from "@toife/core";
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<GridProps>(), {
-  ...GRID_DEFAULT_PROPS,
-});
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const gridAttrs = computed(() => getGridAttrs(props.options));
-</script>

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

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

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

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

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

@@ -1,11 +0,0 @@
-<style lang="scss" src="@toife/core/features/layout/grid-item.scss" scoped></style>
-<template src="./grid-item.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { GRID_ITEM_DEFAULT_PROPS, getGridItemAttrs, type GridItemProps } from "@toife/core";
-const props = withDefaults(defineProps<GridItemProps>(), {
-  ...GRID_ITEM_DEFAULT_PROPS,
-});
-
-const gridItemAttrs = computed(() => getGridItemAttrs(props.options));
-</script>

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

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

package/src/components/layout/index.ts

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

package/src/components/modal/index.ts

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

package/src/components/modal/modal.html

@@ -1,21 +0,0 @@
-<Present
-  ref="present"
-  :duration="duration"
-  :bounce="bounce"
-  :class="class"
-  :placement="placement"
-  :backdrop="backdrop"
-  :visible="visible"
-  :keepalive="keepalive"
-  @close="close"
-  :style="style"
->
-  <slot name="extra"></slot>
-  <GestureIndicator
-    :placement="placement"
-    v-if="gesture && indicator && placement != 'center'"
-  ></GestureIndicator>
-  <div ref="modal" v-bind="modalAttrs">
-    <slot />
-  </div>
-</Present>

package/src/components/modal/modal.vue

@@ -1,248 +0,0 @@
-<style lang="scss" src="@toife/core/features/modal/modal.scss" scoped></style>
-<template src="./modal.html"></template>
-<script lang="ts" setup>
-import { computed, inject, onUnmounted, ref, unref, watch } from "vue";
-import {
-  gesture as toifeGesture,
-  type GestureFastPayload,
-  type GestureMovePayload,
-  type GestureUpPayload,
-} from "@toife/gesture";
-import { Present } from "../present";
-import { GestureIndicator } from "../gesture-indicator";
-import {
-  MODAL_DEFAULT_PROPS,
-  APP_PROVIDER_STATE_KEY,
-  SCROLLABLE_OVERFLOW_VALUES,
-  getModalAttrs,
-  type AppProviderState,
-  type ModalEvent,
-  type ModalProps,
-} from "@toife/core";
-import type { ProviderStateRefs } from "../../shared/provider-state";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ModalProps>(), {
-  ...MODAL_DEFAULT_PROPS,
-});
-const emit = defineEmits<ModalEvent>();
-const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const modal = ref();
-const present = ref();
-const isBusy = ref(false);
-const isMoving = 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 || unref(appState?.shape) || "";
-  const role = props.role || unref(appState?.role) || "";
-
-  return getModalAttrs({
-    role,
-    shape,
-    placement: props.placement,
-    fullscreen: props.fullscreen,
-    className: props.class,
-    style: props.style,
-  });
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const close = (e: string) => {
-  emit("close", e);
-};
-
-function hasScrollableOverflow(value: string): boolean {
-  return (SCROLLABLE_OVERFLOW_VALUES as readonly string[]).includes(value);
-}
-
-/**
- * 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 && hasScrollableOverflow(style.overflowY);
-  }
-
-  return el.scrollWidth > el.clientWidth && hasScrollableOverflow(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, {
-        options: {
-          minDist: 30,
-        },
-
-        beforeEvent(e: Event) {
-          if (isBusy.value || !props.gesture || props.placement == "center") {
-            return false;
-          }
-
-          if (!canStartGesture(e)) {
-            return false;
-          }
-
-          return true;
-        },
-
-        down() {
-          isMoving.value = false;
-        },
-
-        fast({ initialDirection }: GestureFastPayload) {
-          busy();
-          if (initialDirection == gestureDir.value) {
-            emit("close", "gesture");
-          } else {
-            present.value.open();
-          }
-        },
-
-        move({ deltaY, deltaX, initialDirection }: GestureMovePayload) {
-          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 || isMoving.value)) ||
-            (props.placement == "top" && (tv <= -10 || isMoving.value)) ||
-            (props.placement == "left" && (tv <= -10 || isMoving.value)) ||
-            (props.placement == "right" && (tv >= 10 || isMoving.value))
-          ) {
-            isMoving.value = true;
-            present.value.render({
-              presentTranslate: tv + "px",
-              presentTransitionDuration: "0s",
-            });
-          }
-        },
-
-        up({ deltaY, deltaX, initialDirection }: GestureUpPayload) {
-          isMoving.value = 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() {
-          isMoving.value = 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.vue

@@ -1,7 +0,0 @@
-<template src="./page.html"></template>
-<style lang="scss" src="@toife/core/features/page/page.scss" scoped></style>
-<script lang="ts" setup>
-import { getPageAttrs } from "@toife/core";
-// Top-level page surface inside the app shell
-const pageAttrs = getPageAttrs();
-</script>

package/src/components/present/index.ts

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

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,11 +0,0 @@
-<Teleport :to="teleportTo" :disabled="!isTeleportReady">
-  <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>
-</Teleport>