@toife/vue 2.2.0 → 3.0.1

package/src/components/decision-modal/decision-modal.html

@@ -0,0 +1,29 @@
+<Present
+  :placement="placement"
+  backdrop="display"
+  :keepalive="false"
+  :visible="visible"
+  @close="onClose"
+>
+  <div v-bind="decisionModalAttrs">
+    <slot name="header">
+      <div v-bind="decisionModalHeaderAttrs" v-if="title">{{ title }}</div>
+    </slot>
+    <slot name="body">
+      <div v-bind="decisionModalBodyAttrs">{{ message }}</div>
+    </slot>
+    <slot name="footer">
+      <div v-bind="decisionModalFooterAttrs">
+        <CustomButton
+          v-for="(btn, btnIndex) in actions"
+          :key="`${btnIndex}`"
+          :role="btn.role"
+          :variant="btn.variant"
+          @click="onChoose(btn)"
+          :shape="shape"
+          >{{ btn.text }}</CustomButton
+        >
+      </div>
+    </slot>
+  </div>
+</Present>

package/src/components/decision-modal/decision-modal.md

@@ -0,0 +1,79 @@
+# `<t-decision-modal>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Confirmation dialog (title, message, actions) inside `Present`. Often driven with `useDecisionModal()` from `t-app`.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                |
+| ----- | ---------------------------------------------------- |
+| Vue   | ^3.5                                                 |
+| Other | `t-app` recommended; depends on `Present`, `Button`. |
+
+## Basic usage
+
+```vue
+<t-decision-modal
+  :visible="show"
+  title="Confirm"
+  message="Are you sure?"
+  :actions="[
+    { text: 'Cancel', variant: 'text', handler: () => (show = false) },
+    { text: 'Delete', variant: 'fill', handler: onDelete },
+  ]"
+  :dismiss="['backdrop']"
+  @close="show = false"
+/>
+```
+
+Composable:
+
+```ts
+const modal = useDecisionModal();
+modal.open({
+  message: "…",
+  actions: […],
+  onClose: () => {},
+  onChoose: (btn) => {},
+});
+```
+
+## Props
+
+| Prop        | Type                    | Default      | Description                        |
+| ----------- | ----------------------- | ------------ | ---------------------------------- |
+| `visible`   | `boolean`               | `false`      | Visibility.                        |
+| `title`     | `string`                | —            | Title (`header` slot overrides).   |
+| `message`   | `string`                | _(required)_ | Main copy (`body` slot overrides). |
+| `actions`   | `DecisionModalButton[]` | _(required)_ | Footer buttons.                    |
+| `dismiss`   | `string[]`              | —            | Close reasons that emit `close`.   |
+| `placement` | `string`                | `"center"`   | `Present` placement.               |
+| `role`      | `string`                | —            | Theme.                             |
+| `shape`     | `string`                | —            | Shape.                             |
+| `divider`   | `boolean`               | —            | Divider; default from app.         |
+| `flow`      | `"row" \| "column"`     | `"row"`      | Footer button layout.              |
+
+**Type source:** `src/components/decision-modal/decision-modal.type.ts`
+
+## Events (emits)
+
+| Event    | Payload                    | Description                      |
+| -------- | -------------------------- | -------------------------------- |
+| `close`  | `type?: string`            | Valid dismiss (per `dismiss`).   |
+| `choose` | `btn: DecisionModalButton` | Button chosen (after `handler`). |
+
+## Slots
+
+| Slot     | Description                              |
+| -------- | ---------------------------------------- |
+| `header` | Replaces header (default shows `title`). |
+| `body`   | Replaces `message`.                      |
+| `footer` | Replaces default button row.             |
+
+## See also
+
+- Source: `src/components/decision-modal`
+- `decision-modal.composable.ts`

package/src/components/decision-modal/decision-modal.scss

@@ -0,0 +1,136 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$decision-modal: sass.fn-naming-prefix("decision-modal");
+$decision-modal-header: sass.fn-naming-prefix("decision-modal-header");
+$decision-modal-body: sass.fn-naming-prefix("decision-modal-body");
+$decision-modal-footer: sass.fn-naming-prefix("decision-modal-footer");
+$button: sass.fn-naming-prefix("button");
+$shape-pill: sass.fn-naming-prefix("shape-pill");
+
+// Property name - layer: decision-modal
+$border-radius: sass.fn-naming-var("border-radius");
+$background-color: sass.fn-naming-var("decision-modal", "background-color");
+$width: sass.fn-naming-var("viewport", "width");
+$max-width: sass.fn-naming-var("overlay", "max-width");
+$padding-y: sass.fn-naming-var("spacing", "y");
+$padding-x: sass.fn-naming-var("spacing", "x");
+$margin-y: sass.fn-naming-var("spacing", "y");
+$margin-x: sass.fn-naming-var("spacing", "x");
+$animation-duration: sass.fn-naming-var("motion", "duration");
+$border-width: sass.fn-naming-var("stroke", "width");
+$border-color: sass.fn-naming-var("decision-modal", "border-color");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$decision-modal} {
+  // Styles
+  background-color: rgb(#{$background-color});
+  width: #{$width};
+  max-width: #{$max-width};
+  overflow: hidden;
+  position: relative;
+  margin: calc(#{$margin-x} * 4) calc(#{$margin-y} * 2);
+  border-radius: #{$border-radius};
+  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;
+
+  // Header of alert
+  .#{$decision-modal-header} {
+    padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+    border-bottom: #{$border-width} solid transparent;
+    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;
+  }
+
+  // Content of alert
+  .#{$decision-modal-body} {
+    padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
+  }
+
+  // Footer of alert
+  .#{$decision-modal-footer} {
+    display: flex;
+    border-top: #{$border-width} solid transparent;
+    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;
+
+    > * {
+      flex: 1;
+    }
+
+    .#{$button} {
+      font-weight: 600;
+      border-radius: 0rem;
+    }
+
+    &.actions-flow-column {
+      flex-direction: column;
+    }
+
+    &.actions-flow-row {
+      flex-direction: row;
+    }
+  }
+
+  &.#{$shape-pill} {
+    .#{$decision-modal-footer} {
+      column-gap: #{$padding-x};
+      row-gap: #{$padding-y};
+      padding: calc(#{$padding-y} * 2) calc(#{$padding-x} * 2);
+
+      .#{$button} {
+        border-radius: #{$border-radius};
+      }
+    }
+  }
+
+  &.divider {
+    .#{$decision-modal-header},
+    .#{$decision-modal-footer} {
+      border-color: rgb(#{$border-color});
+    }
+  }
+
+  // Set effect with class
+  &.pop {
+    animation: pop #{$animation-duration} ease-in-out;
+  }
+}
+
+@keyframes pop {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  70% {
+    transform: scale(1);
+  }
+
+  80% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,35 @@
+import { ButtonVariant } from "../button/button.type";
+
+// Define
+export type DecisionModalButton = {
+  text?: string;
+  role?: string;
+  variant?: ButtonVariant;
+  handler?: () => void;
+  data?: unknown;
+};
+
+export type DecisionModalFlow = "row" | "column";
+
+export type DecisionModalProps = {
+  visible?: boolean;
+  title?: string;
+  message: string;
+  actions: DecisionModalButton[];
+  dismiss?: Array<string>;
+  placement?: string;
+  role?: string;
+  shape?: string;
+  divider?: boolean;
+  flow?: DecisionModalFlow;
+};
+
+export type DecisionModalComposableProps = DecisionModalProps & {
+  onClose?: (type?: string) => void;
+  onChoose?: (btn?: DecisionModalButton) => void;
+};
+
+export type DecisionModalEmit = {
+  (e: "close", type?: string): void;
+  (e: "choose", btn: DecisionModalButton): void;
+};

package/src/components/decision-modal/decision-modal.vue

@@ -0,0 +1,98 @@
+<style lang="scss" src="./decision-modal.scss" scoped></style>
+<template src="./decision-modal.html"></template>
+<script lang="ts" setup>
+import { computed, inject, ref } from "vue";
+import { Present } from "../present";
+import { Button as CustomButton } from "../button";
+import {
+  type DecisionModalEmit,
+  type DecisionModalButton,
+  type DecisionModalProps,
+} from "./decision-modal.type";
+import { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+const emit = defineEmits<DecisionModalEmit>();
+const props = withDefaults(defineProps<DecisionModalProps>(), {
+  placement: "center",
+  keepalive: false,
+  visible: false,
+  shape: undefined,
+  role: undefined,
+  divider: undefined,
+  flow: "row",
+});
+
+/// State
+/// ------------------------------------------------------------
+const pop = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const shape = computed(() => {
+  return props.shape || appState?.shape.value || "";
+});
+
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const divider = computed(() => {
+  return (props.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
+});
+
+const decisionModalAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "decision-modal"]),
+      withPrefix(["role", role.value]),
+      withPrefix(["shape", shape.value]),
+      withPrefix("decision-modal"),
+      {
+        pop: pop.value,
+        divider: divider.value,
+      },
+    ],
+  };
+});
+
+const decisionModalHeaderAttrs = computed(() => {
+  return {
+    class: [withPrefix("decision-modal-header")],
+  };
+});
+
+const decisionModalBodyAttrs = computed(() => {
+  return {
+    class: [withPrefix("decision-modal-body")],
+  };
+});
+
+const decisionModalFooterAttrs = computed(() => {
+  return {
+    class: [withPrefix("decision-modal-footer"), `actions-flow-${props.flow}`],
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const onClose = (val: string) => {
+  if (props.dismiss && props.dismiss.includes(val)) {
+    emit("close", val);
+  } else if (val === "backdrop") {
+    pop.value = true;
+    setTimeout(() => {
+      pop.value = false;
+    }, 300);
+  }
+};
+
+const onChoose = (btn: DecisionModalButton) => {
+  emit("close");
+  btn.handler && btn.handler();
+  emit("choose", btn);
+};
+</script>

package/src/components/decision-modal/index.ts

@@ -0,0 +1,9 @@
+export { default as DecisionModal } from "./decision-modal.vue";
+export type {
+  DecisionModalProps,
+  DecisionModalEmit,
+  DecisionModalButton,
+  DecisionModalComposableProps,
+  DecisionModalFlow,
+} from "./decision-modal.type";
+export { useDecisionModal } from "./decision-modal.composable";

package/src/components/divider/divider.html

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

package/src/components/divider/divider.md

@@ -0,0 +1,42 @@
+# `<t-divider>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Horizontal or vertical divider line following theme.
+
+## Requirements / dependencies
+
+| Item  | Notes               |
+| ----- | ------------------- |
+| Vue   | ^3.5                |
+| Other | `t-app` for `role`. |
+
+## Basic usage
+
+```vue
+<t-divider orientation="horizontal" />
+<t-divider orientation="vertical" />
+```
+
+## Props
+
+| Prop          | Type                         | Default        | Description                     |
+| ------------- | ---------------------------- | -------------- | ------------------------------- |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Divider direction.              |
+| `role`        | `string`                     | —              | Theme stroke; default from app. |
+
+**Type source:** `src/components/divider/divider.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+_None._
+
+## See also
+
+- Source: `src/components/divider`

package/src/components/divider/divider.scss

@@ -0,0 +1,29 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class
+$divider: sass.fn-naming-prefix("divider");
+
+// Property - layer: stroke
+$border-color: sass.fn-naming-var("divider", "border-color");
+$border-width: sass.fn-naming-var("stroke", "width");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+// Divider
+.#{$divider} {
+  transition:
+    border-radius #{$transition-duration} ease,
+    box-shadow #{$transition-duration} ease,
+    border-color #{$transition-duration} ease,
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease;
+
+  &.horizontal {
+    width: 100%;
+    border-bottom: #{$border-width} solid rgb(#{$border-color});
+  }
+
+  &.vertical {
+    height: 100%;
+    border-right: #{$border-width} solid rgb(#{$border-color});
+  }
+}

package/src/components/divider/divider.type.ts

@@ -0,0 +1,6 @@
+export type DividerOrientation = "horizontal" | "vertical";
+
+export type DividerProps = {
+  orientation?: DividerOrientation;
+  role?: string;
+};

package/src/components/divider/divider.vue

@@ -0,0 +1,31 @@
+<style lang="scss" src="./divider.scss" scoped></style>
+<template src="./divider.html"></template>
+<script lang="ts" setup>
+import { withPrefix } from "../../utils";
+import { type DividerProps } from "./divider.type";
+import { computed, inject } from "vue";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<DividerProps>(), {
+  orientation: "horizontal",
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const dividerAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  return {
+    class: [
+      withPrefix(["layer", "divider"]),
+      withPrefix(["role", role]),
+      withPrefix("divider"),
+      {
+        [props.orientation]: true,
+      },
+    ],
+  };
+});
+</script>

package/src/components/divider/index.ts

@@ -0,0 +1,2 @@
+export { default as Divider } from "./divider.vue";
+export type { DividerOrientation, DividerProps } from "./divider.type";

package/src/components/field/field.html

@@ -0,0 +1 @@
+<OutlineField v-if="props.variant === 'outline'" v-bind="fieldAttrs" />

package/src/components/field/field.md

@@ -0,0 +1,68 @@
+# `<t-field>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Text input field. The current implementation only renders `OutlineField` when `variant === 'outline'`. Supports `v-model`, validation message, help text, and many input options.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-field v-model="text" placeholder="Type…" />
+```
+
+## Props
+
+| Prop                    | Type               | Default      | Description                                                       |
+| ----------------------- | ------------------ | ------------ | ----------------------------------------------------------------- |
+| `modelValue`            | `string`           | `""`         | Value (`v-model`).                                                |
+| `name`                  | `string`           | —            | Input `name`.                                                     |
+| `variant`               | `FieldVariant`     | `"outline"`  | Only `outline` is wired in the current UI.                        |
+| `role` / `shape`        | `string`           | —            | Theme; default from app.                                          |
+| `size`                  | `FieldSize`        | `"standard"` | Field size.                                                       |
+| `shadow`                | `boolean`          | —            | Default from app.                                                 |
+| `direction`             | `AppDirection`     | —            | Default from app or `left`.                                       |
+| `id`                    | `string`           | —            | Element id.                                                       |
+| `value`                 | `string`           | —            | May mirror model (`OutlineField` uses `value \|\| modelValue`).   |
+| `placeholder`           | `string`           | `""`         | Placeholder.                                                      |
+| `disabled` / `readonly` | `boolean`          | `false`      |                                                                   |
+| `autocomplete`          | `string`           | —            |                                                                   |
+| `maxLength`             | `number \| string` | —            |                                                                   |
+| `tabindex`              | `number \| string` | —            |                                                                   |
+| `type`                  | `FieldType`        | `"text"`     | `text`, `number`, `email`, `password`, `tel`, `url`, `paragraph`. |
+| `line` / `maxLine`      | `number \| string` | `1` / —      | Lines (paragraph).                                                |
+| `message`               | `string`           | `""`         | Validation / warning message.                                     |
+| `help`                  | `string`           | `""`         | Help hint.                                                        |
+
+**Type source:** `src/components/field/field.type.ts`
+
+## Events (emits)
+
+| Event               | Payload      | Description   |
+| ------------------- | ------------ | ------------- |
+| `update:modelValue` | `string`     | Model update. |
+| `focus`             | `FocusEvent` |               |
+| `blur`              | `FocusEvent` |               |
+| `input`             | `Event`      |               |
+| `beforeinput`       | `Event`      |               |
+
+## Slots
+
+_None_ — content is owned by `OutlineField` (which may expose a default slot in the implementation).
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## See also
+
+- Source: `src/components/field`
+- [outline-field.md](./outline/outline-field.md) — implementation detail when `variant="outline"`

package/src/components/field/field.type.ts

@@ -0,0 +1,43 @@
+import type { AppDirection } from "../app";
+
+export type FieldVariant = "outline" | "fill" | "underline";
+export type FieldSize = "small" | "standard" | "large";
+export type FieldType = "text" | "number" | "email" | "password" | "tel" | "url" | "paragraph";
+
+// Define
+export type FieldProps = {
+  // Wrapper
+  modelValue?: string;
+  name?: string;
+  variant?: FieldVariant;
+  role?: string;
+  shape?: string;
+  size?: FieldSize;
+  shadow?: boolean;
+  direction?: AppDirection;
+
+  // Input
+  id?: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  autocomplete?: string;
+  maxLength?: number | string;
+  tabindex?: number | string;
+  type?: FieldType;
+  line?: number | string;
+  maxLine?: number | string;
+
+  // Support
+  message?: string;
+  help?: string;
+};
+
+export type FieldEmit = {
+  (e: "update:modelValue", value: string): void;
+  (e: "focus", ev: FocusEvent): void;
+  (e: "blur", ev: FocusEvent): void;
+  (e: "input", ev: Event): void;
+  (e: "beforeinput", ev: Event): void;
+};