@toife/vue 2.2.0 → 3.0.1

package/src/components/modal/modal.vue

@@ -0,0 +1,186 @@
+<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 { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+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);
+
+/// State
+/// ------------------------------------------------------------
+const modal = ref();
+const present = ref();
+const isBusy = ref(false);
+const ges = ref<unknown>(null);
+
+/// Computed
+/// ------------------------------------------------------------
+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: [
+      withPrefix(["layer", "modal"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      withPrefix("modal"),
+      {
+        fullscreen: props.fullscreen,
+        [props.placement]: true,
+      },
+      props.class,
+    ],
+    style: props.style,
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const close = (e: string) => {
+  emit("close", e);
+};
+
+const busy = () => {
+  isBusy.value = true;
+  setTimeout(() => {
+    isBusy.value = false;
+  }, 300);
+};
+
+// Lifecycle
+/// ------------------------------------------------------------
+watch(
+  () => modal.value,
+  (val) => {
+    if (val) {
+      ges.value = toifeGesture(modal.value, {
+        isMoving: false,
+
+        options: {
+          minDist: 30,
+        },
+
+        beforeEvent(e: unknown) {
+          if (isBusy.value || !props.gesture || props.placement == "center") {
+            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

@@ -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.md

@@ -0,0 +1,39 @@
+# `<t-page>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Simple page wrapper with the themed `page` class.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<t-app>
+  <t-page>
+    <t-toolbar />
+    <t-container>Content</t-container>
+  </t-page>
+</t-app>
+```
+
+## Props
+
+_None._
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | Page structure. |
+
+## See also
+
+- Source: `src/components/page`

package/src/components/page/page.scss

@@ -0,0 +1,17 @@
+@use "@toife/sass-layer-generator" 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

@@ -0,0 +1,9 @@
+<template src="./page.html"></template>
+<style lang="scss" src="./page.scss" scoped></style>
+<script lang="ts" setup>
+import { withPrefix } from "@/utils";
+
+const pageAttrs = {
+  class: [withPrefix("page")],
+} as const;
+</script>

package/src/components/present/index.ts

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

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

@@ -0,0 +1,21 @@
+import { ref } from "vue";
+
+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,9 @@
+<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.md

@@ -0,0 +1,60 @@
+# `Present` _(named export; not in default `createToife`)_
+
+> **Not** registered by `createToife()` — import: `import { Present } from "@toife/vue"` and register globally yourself if needed.
+
+## Description
+
+Overlay layer: backdrop + animated panel, stacking z-index via `usePresent`. Used internally by `Modal`, `Action`, `DecisionModal`.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<Present :visible="show" placement="bottom" backdrop="display" @close="onClose">
+  <div>Content</div>
+</Present>
+```
+
+## Props
+
+| Prop              | Type                                   | Default     | Description                         |
+| ----------------- | -------------------------------------- | ----------- | ----------------------------------- |
+| `visible`         | `boolean`                              | `false`     | Open/close (with `duration` delay). |
+| `backdrop`        | `"display" \| "none" \| "transparent"` | `"display"` | Backdrop.                           |
+| `placement`       | `PresentPlacement`                     | `"bottom"`  | Animation direction.                |
+| `keepalive`       | `boolean`                              | `false`     | Keep DOM when closed.               |
+| `duration`        | `number`                               | `200`       | ms.                                 |
+| `bounce`          | `number \| string \| boolean`          | `false`     | Open bounce.                        |
+| `class` / `style` | `unknown`                              | —           | Panel.                              |
+
+**Type source:** `src/components/present/present.type.ts`
+
+## Events (emits)
+
+| Event   | Payload         | Description                                 |
+| ------- | --------------- | ------------------------------------------- |
+| `close` | `type?: string` | e.g. `'backdrop'` when backdrop is clicked. |
+
+## Slots
+
+| Slot      | Description    |
+| --------- | -------------- |
+| `default` | Panel content. |
+
+## Expose (template ref)
+
+| API                              | Description                                       |
+| -------------------------------- | ------------------------------------------------- |
+| `render(options: RenderOptions)` | Update transition styles (translate, opacity, …). |
+| `open()` / `close()`             | Manual animation control.                         |
+
+## See also
+
+- Source: `src/components/present`
+- `present.composable.ts` — `usePresent` (z-index stack)

package/src/components/present/present.scss

@@ -0,0 +1,81 @@
+@use "@toife/sass-layer-generator" 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("motion", "duration")
+);
+// layer: backdrop
+$backdrop-bg: 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: absolute;
+  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: rgb(#{$backdrop-bg});
+  opacity: #{$backdrop-opacity};
+}
+
+.#{$present} {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  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

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

@@ -0,0 +1,198 @@
+<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 { withPrefix, property } from "../../utils";
+import { usePresent } from "./present.composable";
+
+/// Define
+/// ------------------------------------------------------------
+const presentIndex = usePresent();
+const emit = defineEmits(["close"]) as unknown as PresentEmit;
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<PresentProps>(), {
+  keepalive: false,
+  visible: false,
+  backdrop: "display",
+  duration: 200,
+  placement: "bottom",
+  bounce: false,
+});
+
+/// State
+/// ------------------------------------------------------------
+const isBounced = ref(false);
+const zIndex = ref(0);
+const isShow = ref(false);
+const styles = reactive({
+  backdropTransitionDuration: "0.2s",
+  backdropOpacity: 0.4,
+  presentTransitionDuration: "0.2s",
+  presentTranslate: "0px",
+  presentOpacity: 1,
+});
+
+/// Computed
+/// ------------------------------------------------------------
+const backdropAttrs = computed(() => {
+  return {
+    class: [withPrefix(["layer", "backdrop"]), withPrefix("present-backdrop")],
+    style: {
+      zIndex: zIndex.value - 1,
+      [property("transition-duration")]: styles.backdropTransitionDuration,
+      [property(["backdrop", "opacity"])]:
+        props.backdrop === "transparent" ? 0 : styles.backdropOpacity,
+    },
+  };
+});
+
+// Present attributes
+const presentAttrs = computed(() => {
+  return {
+    class: [withPrefix("present"), props.class, props.placement],
+    style: [
+      {
+        zIndex: zIndex.value,
+        [property("transition-duration")]: styles.presentTransitionDuration,
+        [property("translate")]: styles.presentTranslate,
+        [property(["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;
+  }
+  if (data.backdropOpacity !== undefined) {
+    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: 0.4,
+      presentTranslate: String(presentTranslate),
+      presentTransitionDuration: time.value,
+      presentOpacity: 1,
+    });
+
+    setTimeout(() => {
+      render({
+        presentTranslate: "0px",
+      });
+    }, props.duration);
+  } else {
+    render({
+      backdropOpacity: 0.4,
+      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);
+    }
+  }
+);
+
+// Export, Expose
+/// ------------------------------------------------------------
+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,2 @@
+export { default as Radio } from "./radio.vue";
+export type { RadioProps } from "./radio.type";

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

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