@toife/vue 3.2.5 → 3.2.7

package/src/components/image/image.vue

@@ -0,0 +1,32 @@
+<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

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

package/src/components/index.ts

@@ -0,0 +1,32 @@
+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";

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

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

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

@@ -0,0 +1,15 @@
+<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

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

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

@@ -0,0 +1,11 @@
+<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

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

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

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

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

@@ -0,0 +1,15 @@
+<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

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

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

@@ -0,0 +1,11 @@
+<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

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

package/src/components/layout/index.ts

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

package/src/components/modal/index.ts

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

package/src/components/modal/modal.html

@@ -0,0 +1,20 @@
+<Present
+  ref="present"
+  :duration="duration"
+  :bounce="bounce"
+  :class="class"
+  :placement="placement"
+  :backdrop="backdrop"
+  :visible="visible"
+  :keepalive="keepalive"
+  @close="close"
+  :style="style"
+>
+  <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

@@ -0,0 +1,248 @@
+<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

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

package/src/components/page/page.html

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

package/src/components/page/page.vue

@@ -0,0 +1,7 @@
+<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

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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,11 @@
+<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>