@toife/vue 2.2.0 → 3.0.0

package/src/components/image/image.vue

@@ -0,0 +1,25 @@
+<style lang="scss" src="./image.scss" scoped></style>
+<template src="./image.html"></template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { type ImageProps } from "./image.type";
+
+/// Define
+/// ------------------------------------------------------------
+const dataSrc = ref<unknown>("");
+const { defaultSrc, src } = defineProps<ImageProps>();
+
+/// Methods
+/// ------------------------------------------------------------
+const handleError = () => {
+  if (defaultSrc) {
+    dataSrc.value = defaultSrc;
+  }
+};
+
+/// Lifecycle
+/// ------------------------------------------------------------
+onMounted(() => {
+  dataSrc.value = src;
+});
+</script>

package/src/components/image/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,27 @@
+export * from "./app";
+export * from "./present";
+export * from "./modal";
+export * from "./gesture-indicator";
+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";

package/src/components/modal/index.ts

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

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

@@ -0,0 +1,78 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$modal: sass.fn-naming-prefix("modal");
+
+// Property name - layer: surface
+$background-color: sass.fn-naming-var("surface", "background-color");
+$viewport-width: sass.fn-naming-var("viewport", "width");
+$viewport-max-width: sass.fn-naming-var("viewport", "max-width");
+$viewport-height: sass.fn-naming-var("viewport", "height");
+$viewport-max-height: sass.fn-naming-var("viewport", "max-height");
+$border-radius: sass.fn-naming-var("border-radius");
+$safe-area-top: sass.fn-naming-var("safe-area", "top");
+$safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
+$safe-area-left: sass.fn-naming-var("safe-area", "left");
+$safe-area-right: sass.fn-naming-var("safe-area", "right");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$modal} {
+  background: rgb(#{$background-color});
+  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;
+  position: relative;
+
+  &.bottom,
+  &.top,
+  &.fullscreen {
+    width: #{$viewport-width};
+    max-width: #{$viewport-max-width};
+  }
+
+  &.left,
+  &.right,
+  &.fullscreen {
+    height: #{$viewport-height};
+    max-height: #{$viewport-max-height};
+  }
+
+  &:not(.fullscreen) {
+    overflow: hidden;
+
+    &.top {
+      max-height: calc(#{$viewport-max-height} - #{$safe-area-bottom});
+      max-width: #{$viewport-max-width};
+      border-bottom-left-radius: #{$border-radius};
+      border-bottom-right-radius: #{$border-radius};
+    }
+
+    &.bottom {
+      max-height: calc(#{$viewport-max-height} - #{$safe-area-top});
+      max-width: #{$viewport-max-width};
+      border-top-left-radius: #{$border-radius};
+      border-top-right-radius: #{$border-radius};
+    }
+
+    &.left {
+      max-width: calc(#{$viewport-max-width} - #{$safe-area-right});
+      max-height: #{$viewport-max-height};
+      border-top-right-radius: #{$border-radius};
+      border-bottom-right-radius: #{$border-radius};
+    }
+
+    &.right {
+      max-width: calc(#{$viewport-max-width} - #{$safe-area-left});
+      max-height: #{$viewport-max-height};
+      border-top-left-radius: #{$border-radius};
+      border-bottom-left-radius: #{$border-radius};
+    }
+
+    &.center {
+      border-radius: #{$border-radius};
+    }
+  }
+}

package/src/components/modal/modal.type.ts

@@ -0,0 +1,21 @@
+// Props
+export type ModalProps = {
+  role?: string;
+  class?: unknown;
+  visible?: boolean;
+  gesture?: boolean;
+  fullscreen?: boolean;
+  placement?: "top" | "left" | "right" | "center" | "bottom";
+  keepalive?: boolean;
+  backdrop?: "display" | "none" | "transparent";
+  shape?: string;
+  indicator?: boolean;
+  duration?: number;
+  bounce?: number | string;
+  style?: unknown;
+};
+
+// Emit
+export type ModalEmit = {
+  (e: "close", type?: string): void;
+};

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", "surface"]),
+      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.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,14 @@
+<template src="./page.html"></template>
+<style lang="scss" src="./page.scss" scoped></style>
+<script lang="ts" setup>
+import { withPrefix } from "@/utils";
+import { computed } from "vue";
+
+/// Computed
+/// ------------------------------------------------------------
+const pageAttrs = computed(() => {
+  return {
+    class: [withPrefix("page")],
+  };
+});
+</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.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;
+};