@toife/vue 3.2.5 → 3.2.7

package/src/components/present/present.vue

@@ -0,0 +1,234 @@
+<style lang="scss" src="@toife/core/features/present/present.scss" scoped></style>
+<template src="./present.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { usePresent } from "./present.composable";
+import {
+  PRESENT_DEFAULT_PROPS,
+  PRESENT_DEFAULT_STYLES,
+  APP_PROVIDER_STATE_KEY,
+  getAppClassSelector,
+  getPresentAttrs,
+  getPresentBackdropAttrs,
+  type AppProviderState,
+  type PresentEvent,
+  type PresentProps,
+  type RenderOptions,
+  type PresentStyles,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<PresentProps>(), {
+  ...PRESENT_DEFAULT_PROPS,
+});
+const emit = defineEmits(["close"]) as unknown as PresentEvent;
+const presentIndex = usePresent();
+const appState = inject<ProviderStateRefs<AppProviderState> | null>(APP_PROVIDER_STATE_KEY, null);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const isBounced = ref(false);
+const zIndex = ref(0);
+const isShow = ref(false);
+const isReadyBackdrop = ref(false);
+const isTeleportReady = ref(false);
+const styles = reactive<PresentStyles>({ ...PRESENT_DEFAULT_STYLES });
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const teleportTo = computed(() => {
+  if (props.teleport) return props.teleport;
+  if (unref(appState?.rootEl)) return unref(appState?.rootEl);
+  return getAppClassSelector();
+});
+
+const syncTeleportReady = () => {
+  if (props.teleport) {
+    isTeleportReady.value = !!document.querySelector(props.teleport);
+    return;
+  }
+
+  if (unref(appState?.rootEl)) {
+    isTeleportReady.value = true;
+    return;
+  }
+
+  isTeleportReady.value = !!document.querySelector(getAppClassSelector());
+};
+
+const backdropAttrs = computed(() =>
+  getPresentBackdropAttrs({
+    zIndex: zIndex.value - 1,
+    backdropTransitionDuration: styles.backdropTransitionDuration,
+    backdropOpacity: props.backdrop === "transparent" ? 0 : styles.backdropOpacity,
+  })
+);
+
+// Present attributes
+const presentAttrs = computed(() =>
+  getPresentAttrs({
+    zIndex: zIndex.value,
+    presentTransitionDuration: styles.presentTransitionDuration,
+    presentTranslate: styles.presentTranslate,
+    presentOpacity: styles.presentOpacity,
+    className: props.class,
+    placement: props.placement,
+    style: 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();
+  if (isReadyBackdrop.value) emit("close", "backdrop");
+};
+
+const open = () => {
+  setTimeout(() => {
+    isReadyBackdrop.value = true;
+  }, 300);
+
+  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 = () => {
+  isReadyBackdrop.value = false;
+  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(() => {
+  syncTeleportReady();
+  if (!isTeleportReady.value) {
+    nextTick(() => {
+      syncTeleportReady();
+      if (!isTeleportReady.value) requestAnimationFrame(syncTeleportReady);
+    });
+  }
+
+  if (props.visible) open();
+  else close();
+});
+
+watch(
+  () => [props.teleport, unref(appState?.rootEl)] as const,
+  () => syncTeleportReady(),
+  { immediate: true }
+);
+
+// Trigger visible
+watch(
+  () => props.visible,
+  () => {
+    if (props.visible) {
+      createIndex();
+      isShow.value = true;
+
+      setTimeout(() => {
+        open();
+      }, 100);
+    } else {
+      close();
+
+      setTimeout(() => {
+        isShow.value = false;
+      }, props.duration);
+    }
+  }
+);
+
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
+defineExpose({
+  render,
+  open,
+  close,
+});
+</script>

package/src/components/radio/index.ts

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

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

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

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

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

package/src/components/radio/radio/radio.vue

@@ -0,0 +1,84 @@
+<style lang="scss" src="@toife/core/features/radio/radio.scss" scoped></style>
+<template src="./radio.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, ref } from "vue";
+import {
+  RADIO_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  RADIO_GROUP_PROVIDER_STATE_KEY,
+  getRadioAttrs,
+  getRadioIconAttrs,
+  type AppProviderState,
+  type RadioGroupProviderState,
+  type RadioProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<RadioProps>(), {
+  ...RADIO_DEFAULT_PROPS,
+});
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+const radioGroupState = inject<ProviderStateRefs<RadioGroupProviderState> | null>(
+  RADIO_GROUP_PROVIDER_STATE_KEY,
+  null
+);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const isFocused = ref(false);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const disabled = computed(() => {
+  return props.disabled || (unref(radioGroupState?.disabled) ?? false);
+});
+
+const readonly = computed(() => {
+  return props.readonly || (unref(radioGroupState?.readonly) ?? false);
+});
+
+const radioAttrs = computed(() => {
+  const shadow = (props?.shadow !== undefined ? props.shadow : unref(appState?.shadow)) ?? false;
+  const role = props.role || unref(radioGroupState?.role) || unref(appState?.role) || "";
+  const variant = props.variant || unref(radioGroupState?.variant) || "";
+  const isChecked = unref(radioGroupState?.modelValue) === props.value;
+
+  return getRadioAttrs({
+    role,
+    size: props.size,
+    variant,
+    checked: isChecked,
+    disabled: disabled.value,
+    readonly: readonly.value,
+    shadow: shadow && !props.disabled && isFocused.value,
+    focus: isFocused.value,
+  });
+});
+
+const radioIconAttrs = getRadioIconAttrs();
+
+// Methods
+// ----------------------------------------------------------------------------
+const onRadio = () => {
+  if (disabled.value || readonly.value || !radioGroupState) return;
+  radioGroupState.setValue(props.value);
+};
+
+const onFocus = () => {
+  if (disabled.value || readonly.value) return;
+  isFocused.value = true;
+};
+
+const onBlur = () => {
+  if (disabled.value || readonly.value) return;
+  isFocused.value = false;
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key !== " " && e.key !== "Enter") return;
+  e.preventDefault();
+  onRadio();
+};
+</script>

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

@@ -0,0 +1 @@
+export { default as RadioGroup } from "./radio-group.vue";

package/src/components/radio/radio-group/radio-group.html

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

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

@@ -0,0 +1,59 @@
+<style lang="scss" src="@toife/core/features/radio/radio-group.scss" scoped></style>
+<template src="./radio-group.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, provide } from "vue";
+import {
+  RADIO_GROUP_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  RADIO_GROUP_PROVIDER_STATE_KEY,
+  getRadioGroupAttrs,
+  type AppProviderState,
+  type RadioGroupEvent,
+  type RadioGroupProps,
+  type RadioGroupProviderState,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+  ...RADIO_GROUP_DEFAULT_PROPS,
+});
+const emit = defineEmits<RadioGroupEvent>();
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const modelValue = computed(() => props.modelValue);
+
+const role = computed(() => {
+  return props.role || unref(appState?.role) || "";
+});
+
+const variant = computed(() => {
+  return props.variant;
+});
+
+const shadow = computed(() => {
+  return (props?.shadow !== undefined ? props.shadow : unref(appState?.shadow)) ?? false;
+});
+
+const disabled = computed(() => props.disabled);
+const readonly = computed(() => props.readonly);
+
+const radioGroupAttrs = computed(() => getRadioGroupAttrs({ direction: props.direction }));
+
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
+provide<ProviderStateRefs<RadioGroupProviderState>>(RADIO_GROUP_PROVIDER_STATE_KEY, {
+  modelValue,
+  role,
+  variant,
+  disabled,
+  readonly,
+  shadow,
+  setValue: (val: string | number) => {
+    emit("update:modelValue", val);
+  },
+});
+</script>

package/src/components/refresher/index.ts

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

package/src/components/refresher/refresher.html

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

package/src/components/refresher/refresher.vue

@@ -0,0 +1,100 @@
+<style lang="scss" src="@toife/core/features/refresher/refresher.scss" scoped></style>
+<template src="./refresher.html"></template>
+<script lang="ts" setup>
+import { ref, onUnmounted, watch, computed } from "vue";
+import { gesture, type GestureMovePayload, type GestureUpPayload } from "@toife/gesture";
+import { getRefresherAttrs, type RefresherEvent } from "@toife/core";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const emit = defineEmits<RefresherEvent>();
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const refreshing = ref(false);
+const container = ref();
+let cleanup: unknown;
+let isPulling = false;
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const containerAttrs = computed(() => getRefresherAttrs());
+
+// Methods
+// ----------------------------------------------------------------------------
+const close = () => {
+  refreshing.value = false;
+};
+
+const refresh = () => {
+  refreshing.value = true;
+  return close;
+};
+
+const up = () => {
+  emit("end", { refresh });
+};
+
+const cancel = () => {
+  isPulling = false;
+  refreshing.value = false;
+  emit("cancel");
+};
+
+// Lifecycle
+// ----------------------------------------------------------------------------
+watch(
+  () => container.value,
+  () => {
+    cleanup && (cleanup as { destroy: () => void }).destroy();
+    if (!container.value) return;
+    cleanup = gesture(
+      container.value,
+      {
+        options: {
+          minMove: 20,
+        },
+
+        beforeEvent() {
+          if (isPulling) return true;
+          if ((container.value?.scrollTop || 0) > 0) return false;
+          return true;
+        },
+        down() {
+          if (refreshing.value) return;
+          isPulling = (container.value?.scrollTop || 0) <= 0;
+          if (!isPulling) return;
+          emit("start");
+        },
+        move({ deltaY, initialDirection }: GestureMovePayload) {
+          if (refreshing.value || !isPulling || initialDirection != "down") return;
+          const v = deltaY < 0 ? 0 : deltaY;
+          emit("move", { refresh, offset: v });
+        },
+        up({ initialDirection }: GestureUpPayload) {
+          const wasPulling = isPulling;
+          isPulling = false;
+          if (refreshing.value || !wasPulling) return;
+          if (initialDirection != "down") {
+            cancel();
+            return;
+          }
+          up();
+        },
+        cancel() {
+          isPulling = false;
+          if (refreshing.value) return;
+          cancel();
+        },
+      },
+      {
+        passive: false,
+      }
+    );
+  }
+);
+
+onUnmounted(() => {
+  cleanup && (cleanup as { destroy: () => void }).destroy();
+});
+</script>

package/src/components/route/index.ts

@@ -0,0 +1,5 @@
+export * from "./route-navigator";
+export * from "./route-wrapper";
+export * from "./route-provider";
+export * from "./route-outlet";
+export { clone } from "./route.util";

package/src/components/route/route-navigator/index.ts

@@ -0,0 +1 @@
+export { default as RouteNavigator } from "./route-navigator.vue";

package/src/components/route/route-navigator/route-navigator.html

@@ -0,0 +1,19 @@
+<div v-bind="navigatorAttrs" ref="navigatorRef">
+  <div
+    v-for="(item, index) in stack"
+    :key="item.name"
+    v-bind="componentAttrs"
+    :style="{zIndex: index * 2 + 100}"
+    :name="item.name"
+    :class="{
+      active: index === activeIndex,
+      prepare: index === activeIndex + 1,
+      back: index === activeIndex - 1,
+    }"
+  >
+    <RouteProvider :stack="item.stack">
+      <RouteOutlet :component="item.component" />
+    </RouteProvider>
+  </div>
+  <div v-bind="backdropAttrs"></div>
+</div>