@toife/vue 2.2.0 → 3.0.1

package/src/components/form-group/form-group.scss

@@ -0,0 +1,91 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Classes
+$form-group: sass.fn-naming-prefix("form-group");
+$button: sass.fn-naming-prefix("button");
+$field: sass.fn-naming-prefix("field");
+$field-content: sass.fn-naming-prefix("field-content");
+
+.#{$form-group} {
+  display: flex;
+
+  > :deep(*) {
+    flex: 1;
+
+    &.focus {
+      z-index: 2;
+    }
+  }
+
+  &.horizontal {
+    flex-direction: row;
+
+    :deep(.#{$button}) {
+      &:not(:last-child):not(:first-child) {
+        border-radius: 0;
+      }
+
+      &:first-child:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    :deep(.#{$field}) {
+      &:not(:last-child):not(:first-child) .#{$field-content} {
+        border-radius: 0;
+      }
+
+      &:first-child:not(:last-child) .#{$field-content} {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child:not(:first-child) .#{$field-content} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+
+  &.vertical {
+    flex-direction: column;
+
+    :deep(.#{$button}) {
+      &:not(:last-child):not(:first-child) {
+        border-radius: 0;
+      }
+
+      &:first-child:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child:not(:first-child) {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+
+    :deep(.#{$field}) {
+      &:not(:last-child):not(:first-child) .#{$field-content} {
+        border-radius: 0;
+      }
+
+      &:first-child:not(:last-child) .#{$field-content} {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child:not(:first-child) .#{$field-content} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+}

package/src/components/form-group/form-group.type.ts

@@ -0,0 +1,5 @@
+export type FormGroupOrientation = "horizontal" | "vertical";
+
+export type FormGroupProps = {
+  orientation?: FormGroupOrientation;
+};

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

@@ -0,0 +1,21 @@
+<style lang="scss" src="./form-group.scss" scoped></style>
+<template src="./form-group.html"></template>
+<script lang="ts" setup>
+import { withPrefix } from "@/utils";
+import { computed } from "vue";
+import { type FormGroupProps } from "./form-group.type";
+
+/// Defined
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<FormGroupProps>(), {
+  orientation: "horizontal",
+});
+
+/// Computed
+/// ------------------------------------------------------------
+const formGroupAttrs = computed(() => {
+  return {
+    class: [withPrefix("form-group"), props.orientation],
+  };
+});
+</script>

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

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

package/src/components/gesture-indicator/gesture-indicator.html

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

package/src/components/gesture-indicator/gesture-indicator.md

@@ -0,0 +1,42 @@
+# `<t-gesture-indicator>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Small visual stroke hint for swipe placement; usually rendered inside `Modal` when swipe-to-dismiss is enabled.
+
+## Requirements / dependencies
+
+| Item  | Notes               |
+| ----- | ------------------- |
+| Vue   | ^3.5                |
+| Other | `t-app` for `role`. |
+
+## Basic usage
+
+```vue
+<!-- Rarely used standalone; Modal renders it when gesture + indicator -->
+<t-gesture-indicator placement="bottom" />
+```
+
+## Props
+
+| Prop        | Type     | Default    | Description                             |
+| ----------- | -------- | ---------- | --------------------------------------- |
+| `placement` | `string` | `"bottom"` | Placement class (e.g. `bottom`, `top`). |
+
+**Type source:** `src/components/gesture-indicator/gesture-indicator.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+_None_ — decorative empty element.
+
+## See also
+
+- Source: `src/components/gesture-indicator`
+- [modal.md](../../modal/modal.md)

package/src/components/gesture-indicator/gesture-indicator.scss

@@ -0,0 +1,45 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$gesture-indicator: sass.fn-naming-prefix("gesture-indicator");
+
+// Property name - layer: gesture-indicator
+$border-color: sass.fn-naming-var("gesture-indicator", "border-color");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$gesture-indicator} {
+  background-color: rgb(#{$border-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: absolute;
+  border-radius: 3px;
+  z-index: 99;
+
+  &.bottom {
+    width: 40px;
+    height: 4px;
+    top: 5px;
+  }
+
+  &.top {
+    width: 40px;
+    height: 4px;
+    bottom: 5px;
+  }
+
+  &.left {
+    height: 40px;
+    width: 4px;
+    right: 5px;
+  }
+
+  &.right {
+    height: 40px;
+    width: 4px;
+    left: 5px;
+  }
+}

package/{dist/components/gesture-indicator/gesture-indicator.type.d.ts → src/components/gesture-indicator/gesture-indicator.type.ts}

@@ -1,3 +1,4 @@
+// Define
 export type GestureIndicatorProps = {
-    placement?: string;
+  placement?: string;
 };

package/src/components/gesture-indicator/gesture-indicator.vue

@@ -0,0 +1,29 @@
+<style lang="scss" src="./gesture-indicator.scss" scoped></style>
+<template src="./gesture-indicator.html"></template>
+<script lang="ts" setup>
+import { withPrefix } from "../../utils";
+import { type GestureIndicatorProps } from "./gesture-indicator.type";
+import { computed, inject } from "vue";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+const props = withDefaults(defineProps<GestureIndicatorProps>(), {
+  placement: "bottom",
+});
+
+/// Computed
+/// ------------------------------------------------------------
+const gestureIndicatorAttrs = computed(() => {
+  const role = appState?.role.value || "";
+  return {
+    class: [
+      withPrefix(["layer", "gesture-indicator"]),
+      withPrefix(["role", role]),
+      withPrefix("gesture-indicator"),
+      props.placement,
+    ],
+  };
+});
+</script>

package/src/components/gesture-indicator/index.ts

@@ -0,0 +1 @@
+export { default as GestureIndicator } from "./gesture-indicator.vue";

package/src/components/image/image.html

@@ -0,0 +1 @@
+<img @error="handleError" :src="dataSrc" />

package/src/components/image/image.md

@@ -0,0 +1,41 @@
+# `<t-image>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+`<img>` with fallback to `defaultSrc` on load error.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<t-image src="/a.webp" default-src="/placeholder.png" />
+```
+
+## Props
+
+| Prop         | Type     | Default | Description                            |
+| ------------ | -------- | ------- | -------------------------------------- |
+| `src`        | `string` | —       | Primary image URL (assigned on mount). |
+| `defaultSrc` | `string` | —       | Fallback URL on `@error`.              |
+
+**Type source:** `src/components/image/image.type.ts`
+
+## Events (emits)
+
+_None declared_ — internal `@error` handler.
+
+## Slots
+
+_None._
+
+## See also
+
+- Source: `src/components/image`

package/src/components/image/image.scss

@@ -0,0 +1 @@
+// Add styles here if needed

package/src/components/image/image.type.ts

@@ -0,0 +1,5 @@
+// Define
+export type ImageProps = {
+  defaultSrc?: string;
+  src?: string;
+};

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

@@ -0,0 +1,65 @@
+# `<t-modal>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Modal content inside `Present`, integrated with `@toife/gesture` for swipe-to-dismiss along `placement` (except `center`). Optional fullscreen and gesture indicator.
+
+## Requirements / dependencies
+
+| Item  | Notes                                |
+| ----- | ------------------------------------ |
+| Vue   | ^3.5                                 |
+| Other | `@toife/gesture`; `t-app` for theme. |
+
+## Basic usage
+
+```vue
+<t-modal :visible="open" placement="bottom" @close="() => (open = false)">
+  <p>Content</p>
+</t-modal>
+```
+
+## Props
+
+| Prop              | Type                                   | Default     | Description                                  |
+| ----------------- | -------------------------------------- | ----------- | -------------------------------------------- |
+| `visible`         | `boolean`                              | `false`     | Visibility.                                  |
+| `placement`       | `PresentPlacement`                     | `"bottom"`  | Position + gesture direction.                |
+| `backdrop`        | `"display" \| "none" \| "transparent"` | `"display"` | Backdrop.                                    |
+| `keepalive`       | `boolean`                              | `true`      | Keep DOM when closed (`Present`).            |
+| `gesture`         | `boolean`                              | `true`      | Enable swipe to close.                       |
+| `fullscreen`      | `boolean`                              | `false`     | Full-screen panel.                           |
+| `indicator`       | `boolean`                              | `true`      | Show `GestureIndicator` (when not `center`). |
+| `duration`        | `number`                               | `200`       | `Present` transition (ms).                   |
+| `bounce`          | `number \| string`                     | `0`         | `Present` bounce.                            |
+| `role` / `shape`  | `string`                               | —           | Theme.                                       |
+| `class` / `style` | `unknown`                              | —           | Passed to `Present` / root.                  |
+
+**Type source:** `src/components/modal/modal.type.ts`
+
+## Events (emits)
+
+| Event   | Payload         | Description                                           |
+| ------- | --------------- | ----------------------------------------------------- |
+| `close` | `type?: string` | From `Present` or gesture (`backdrop`, `gesture`, …). |
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Modal body. |
+
+## Expose
+
+Nothing public (internal refs to `Present` / gesture).
+
+## Accessibility (a11y)
+
+Add focus trap / `aria-modal` at the app layer if you need strict WCAG compliance.
+
+## See also
+
+- Source: `src/components/modal`
+- [present.md](../../present/present.md)

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: modal
+$background-color: sass.fn-naming-var("modal", "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;
+};