@toife/vue 3.3.3 → 3.3.5

package/src/components/present/present.vue

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

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

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

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

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>

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

@@ -1,86 +0,0 @@
-<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 shape = props.shape || unref(radioGroupState?.shape) || unref(appState?.shape) || "";
-  const variant = props.variant || unref(radioGroupState?.variant) || "";
-  const isChecked = unref(radioGroupState?.modelValue) === props.value;
-
-  return getRadioAttrs({
-    role,
-    shape,
-    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

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

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

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

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

@@ -1,64 +0,0 @@
-<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 shape = computed(() => {
-  return props.shape || unref(appState?.shape) || "";
-});
-
-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,
-  shape,
-  variant,
-  disabled,
-  readonly,
-  shadow,
-  setValue: (val: string | number) => {
-    emit("update:modelValue", val);
-  },
-});
-</script>

package/src/components/refresher/index.ts

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

package/src/components/refresher/refresher.html

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

package/src/components/refresher/refresher.vue

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

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

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

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

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