@toife/vue 2.2.0 → 3.0.1

package/src/components/app/app.constants.ts

@@ -0,0 +1 @@
+export const APP_PROVIDER_STATE_KEY = "app-state";

package/src/components/app/app.html

@@ -0,0 +1,24 @@
+<div v-bind="appAttrs">
+  <slot />
+  <slot name="global"></slot>
+  <Toast placement="top-start" />
+  <Toast placement="bottom-start" />
+  <Toast placement="bottom-center" />
+  <Toast placement="bottom-end" />
+  <Toast placement="top-center" />
+  <Toast placement="top-end" />
+  <Action
+    v-if="action.data.value"
+    :visible="action.visible.value"
+    v-bind="action.data.value"
+    @close="action.close"
+    @choose="action.choose"
+  />
+  <DecisionModal
+    v-if="decisionModal.data.value"
+    :visible="decisionModal.visible.value"
+    v-bind="decisionModal.data.value"
+    @close="decisionModal.close"
+    @choose="decisionModal.choose"
+  />
+</div>

package/src/components/app/app.md

@@ -0,0 +1,77 @@
+# `<t-app>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Library root layout: provides theme/context (`provide`) for descendants, mounts multiple `Toast` regions by placement, and hosts `Action` / `DecisionModal` when using `useAction` / `useDecisionModal`.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | Router not required. |
+
+## Basic usage
+
+```vue
+<template>
+  <t-app>
+    <t-page>App content</t-page>
+  </t-app>
+</template>
+```
+
+## Props
+
+| Prop        | Type                | Default  | Description                                      |
+| ----------- | ------------------- | -------- | ------------------------------------------------ |
+| `shape`     | `string`            | `"pill"` | Default shape for children (buttons, fields, …). |
+| `divider`   | `boolean`           | `false`  | Default divider flag.                            |
+| `role`      | `string`            | `"mode"` | Default theme role.                              |
+| `shadow`    | `boolean`           | `false`  | Default shadow.                                  |
+| `triple`    | `boolean`           | `false`  | Layout flag (provided to children).              |
+| `direction` | `"left" \| "right"` | `"left"` | Direction (fields, …).                           |
+
+**Type source:** `src/components/app/app.type.ts`
+
+## Events (emits)
+
+_No public emits._
+
+## Slots
+
+| Slot      | Description                                           |
+| --------- | ----------------------------------------------------- |
+| `default` | Main app content.                                     |
+| `global`  | Extra slot (after default, before internal overlays). |
+
+## `v-model`
+
+No.
+
+## Provide / inject / context
+
+`provide(APP_PROVIDER_STATE_KEY)`: `{ shape, divider, role, shadow, triple, direction }` — children inject for consistent theming.
+
+## Expose
+
+Nothing.
+
+## Special behavior
+
+- Renders several `Toast` instances with fixed placements (top/bottom × start/center/end).
+- When `useAction()` / `useDecisionModal()` has `data`, renders the matching `Action` / `DecisionModal`.
+
+## Accessibility (a11y)
+
+Wrapper only; no special root role.
+
+## Style / class notes
+
+Classes: `layer`, `base`, `shape`, `app`.
+
+## See also
+
+- Source: `src/components/app`

package/src/components/app/app.scss

@@ -0,0 +1,27 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$app: sass.fn-naming-prefix("app");
+
+// Property name - layer: app
+$background-color: sass.fn-naming-var("app", "background-color");
+$color: sass.fn-naming-var("app", "color");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$app} {
+  width: #{sass.fn-naming-var("viewport", "width")};
+  max-width: #{sass.fn-naming-var("viewport", "max-width")};
+  height: #{sass.fn-naming-var("viewport", "height")};
+  max-height: #{sass.fn-naming-var("viewport", "max-height")};
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$color});
+  transition:
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease,
+    border-color #{$transition-duration} ease;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

package/src/components/app/app.type.ts

@@ -0,0 +1,21 @@
+import type { Ref } from "vue";
+
+export type AppDirection = "left" | "right";
+
+export type AppProps = {
+  shape?: string;
+  divider?: boolean;
+  role?: string;
+  shadow?: boolean;
+  triple?: boolean;
+  direction?: AppDirection;
+};
+
+export type AppProviderState = {
+  shape: Ref<string>;
+  divider: Ref<boolean>;
+  role: Ref<string>;
+  shadow: Ref<boolean>;
+  triple: Ref<boolean>;
+  direction: Ref<AppDirection>;
+};

package/src/components/app/app.vue

@@ -0,0 +1,45 @@
+<style lang="scss" src="./app.scss" scoped></style>
+<template src="./app.html"></template>
+<script lang="ts" setup>
+import { withPrefix } from "../../utils";
+import { computed, provide, toRefs } from "vue";
+import { Toast } from "../toast";
+import { Action, useAction } from "../action";
+import { DecisionModal, useDecisionModal } from "../decision-modal";
+import { type AppProviderState, type AppProps } from "./app.type";
+import { APP_PROVIDER_STATE_KEY } from "./app.constants";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<AppProps>(), {
+  shape: "pill",
+  divider: false,
+  role: "mode",
+  shadow: false,
+  triple: false,
+  direction: "left",
+});
+const { shape, divider, role, shadow, triple, direction } = toRefs(props);
+const decisionModal = useDecisionModal();
+const action = useAction();
+
+/// Computed
+/// ------------------------------------------------------------
+// Present attributes
+const appAttrs = computed(() => {
+  return {
+    class: [withPrefix(["layer", "app"]), withPrefix(["shape", shape.value]), withPrefix("app")],
+  };
+});
+
+// Export, Expose
+/// ------------------------------------------------------------
+provide<AppProviderState>(APP_PROVIDER_STATE_KEY, {
+  shape,
+  divider,
+  role,
+  shadow,
+  triple,
+  direction,
+});
+</script>

package/src/components/app/index.ts

@@ -0,0 +1,3 @@
+export { default as App } from "./app.vue";
+export * from "./app.type";
+export { APP_PROVIDER_STATE_KEY } from "./app.constants";

package/src/components/avatar/avatar.html

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

package/src/components/avatar/avatar.md

@@ -0,0 +1,64 @@
+# `<t-avatar>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Displays an avatar image as a CSS `background-image` inside a themed frame (shape/role from app when omitted).
+
+## Requirements / dependencies
+
+| Item  | Notes                                             |
+| ----- | ------------------------------------------------- |
+| Vue   | ^3.5                                              |
+| Other | `t-app` recommended for default `role` / `shape`. |
+
+## Basic usage
+
+```vue
+<t-avatar src="/user.png" size="40px" />
+```
+
+## Props
+
+| Prop    | Type               | Default  | Description                           |
+| ------- | ------------------ | -------- | ------------------------------------- |
+| `shape` | `string`           | —        | Shape override; default from `t-app`. |
+| `size`  | `string \| number` | `"22px"` | Size (number is treated as px).       |
+| `src`   | `string`           | `""`     | Image URL for background.             |
+
+**Type source:** `src/components/avatar/avatar.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description                    |
+| --------- | ------------------------------ |
+| `default` | Optional inner content (rare). |
+
+## `v-model`
+
+No.
+
+## Provide / inject
+
+Injects `AppProviderState` for `role` / `shape`.
+
+## Expose
+
+Nothing.
+
+## Accessibility (a11y)
+
+Decorative background image — add `aria-label` on a parent if a name must be announced.
+
+## Style / class notes
+
+CSS variable `--<prefix>-width` via `property("width")`.
+
+## See also
+
+- Source: `src/components/avatar`

package/src/components/avatar/avatar.scss

@@ -0,0 +1,35 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class
+$avatar: sass.fn-naming-prefix("avatar");
+$shape-pill: sass.fn-naming-prefix("shape-pill");
+
+// Property - layer: avatar
+$border-radius: sass.fn-naming-var("border-radius");
+$background-color: sass.fn-naming-var("avatar", "background-color");
+$width: sass.fn-naming-var("width");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+// Avatar default is circle
+// With props square then is square
+.#{$avatar} {
+  position: relative;
+  overflow: hidden;
+  background-color: rgb(#{$background-color});
+  width: #{$width};
+  aspect-ratio: 1/1;
+  border-radius: #{$border-radius};
+  background-repeat: no-repeat;
+  background-size: cover;
+  transition:
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease,
+    border-color #{$transition-duration} ease,
+    box-shadow #{$transition-duration} ease,
+    border-radius #{$transition-duration} ease;
+  display: inline-block;
+
+  &.#{$shape-pill} {
+    border-radius: 50%;
+  }
+}

package/src/components/avatar/avatar.type.ts

@@ -0,0 +1,6 @@
+// Define
+export type AvatarProps = {
+  shape?: string;
+  size?: string | number;
+  src?: string;
+};

package/src/components/avatar/avatar.vue

@@ -0,0 +1,45 @@
+<style lang="scss" src="./avatar.scss" scoped></style>
+<template src="./avatar.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { type AvatarProps } from "./avatar.type";
+import { property, withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<AvatarProps>(), {
+  size: "22px",
+  src: "",
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const avatarAttrs = computed(() => {
+  const shape = props?.shape || appState?.shape.value || "";
+  const role = appState?.role.value || "";
+
+  return {
+    class: [
+      withPrefix(["layer", "avatar"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      withPrefix("avatar"),
+    ],
+    style: {
+      [property("width")]: props.size + (typeof props.size === "number" ? "px" : ""),
+      backgroundImage: `url(${props.src})`,
+    },
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+
+// Lifecycle
+/// ------------------------------------------------------------
+
+// Export, Expose
+/// ------------------------------------------------------------
+</script>

package/src/components/avatar/index.ts

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

package/src/components/button/button.html

@@ -0,0 +1,6 @@
+<button v-bind="buttonAttrs" @focus="onFocus" @blur="onBlur">
+  <span v-show="!props.loading"><slot></slot></span>
+  <template v-if="props.loading">
+    <span v-bind="loaderAttrs"><slot name="loading"></slot></span>
+  </template>
+</button>

package/src/components/button/button.md

@@ -0,0 +1,66 @@
+# `<t-button>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Button with variants, sizes, loading state, and theming from `t-app`.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                |
+| ----- | ---------------------------------------------------- |
+| Vue   | ^3.5                                                 |
+| Other | `t-app` recommended for `shape` / `role` / `shadow`. |
+
+## Basic usage
+
+```vue
+<t-button variant="fill" @click="save">Save</t-button>
+<t-button loading>Loading</t-button>
+```
+
+## Props
+
+| Prop      | Type                               | Default      | Description                              |
+| --------- | ---------------------------------- | ------------ | ---------------------------------------- |
+| `role`    | `string`                           | —            | Theme role; default from app.            |
+| `size`    | `"small" \| "standard" \| "large"` | `"standard"` | Size.                                    |
+| `shape`   | `string`                           | —            | Shape; default from app.                 |
+| `block`   | `boolean`                          | `false`      | Full-width button.                       |
+| `loading` | `boolean`                          | `false`      | Hides label, shows `loading` slot.       |
+| `variant` | `ButtonVariant`                    | `"fill"`     | `fill` \| `outline` \| `text` \| `link`. |
+| `shadow`  | `boolean`                          | —            | Default from app if unset.               |
+
+**Type source:** `src/components/button/button.type.ts`
+
+## Events (emits)
+
+_No declared emits_ — use native DOM listeners (`@click`).
+
+## Slots
+
+| Slot      | Description                           |
+| --------- | ------------------------------------- |
+| `default` | Button label (hidden when `loading`). |
+| `loading` | Content when `loading`.               |
+
+## `v-model`
+
+No.
+
+## Provide / inject
+
+Injects theme from `t-app`.
+
+## Expose
+
+Nothing.
+
+## Accessibility (a11y)
+
+Native `<button>`; focus/blur styling handled internally.
+
+## See also
+
+- Source: `src/components/button`

package/src/components/button/button.scss

@@ -0,0 +1,113 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$button: sass.fn-naming-prefix("button");
+$loader: sass.fn-naming-prefix("loader");
+
+// Property name
+$border-radius: sass.fn-naming-var("border-radius");
+$border-width: sass.fn-naming-var("stroke", "width");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$spacing-x: sass.fn-naming-var("spacing", "x");
+$spacing-y: sass.fn-naming-var("spacing", "y");
+
+$color: sass.fn-naming-var("button", "color");
+
+$border-color: sass.fn-naming-var("button", "border-color");
+$border-color-hover: sass.fn-naming-var("button", "border-color", "strong");
+$border-color-focus: sass.fn-naming-var("button", "border-color", "heavy");
+$border-color-active: sass.fn-naming-var("button", "border-color", "heavy");
+$border-color-disabled: sass.fn-naming-var("button", "border-color");
+$border-color-inactive: sass.fn-naming-var("button", "border-color", "soft");
+
+$size-font-size: sass.fn-naming-var("font-size");
+$size-height: sass.fn-naming-var("height");
+$size-coefficient-x: sass.fn-naming-var("coefficient-x");
+$size-coefficient-y: sass.fn-naming-var("coefficient-y");
+$size-line-height: sass.fn-naming-var("line-height");
+
+$background-color: sass.fn-naming-var("button", "background-color");
+$background-color-hover: sass.fn-naming-var("button", "background-color", "strong");
+$background-color-focus: sass.fn-naming-var("button", "background-color", "heavy");
+$background-color-active: sass.fn-naming-var("button", "background-color", "heavy");
+$background-color-disabled: sass.fn-naming-var("button", "background-color");
+$background-color-inactive: sass.fn-naming-var("button", "background-color", "soft");
+
+.#{$button} {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  color: rgb(#{$color});
+  background: rgb(#{$background-color});
+  border-color: rgb(#{$border-color});
+  border-style: solid;
+  border-width: #{$border-width};
+  white-space: nowrap;
+  border-radius: #{$border-radius};
+  cursor: pointer;
+  transition:
+    color #{$transition-duration} ease,
+    background-color #{$transition-duration} ease,
+    border-color #{$transition-duration} ease,
+    border-radius #{$transition-duration} ease,
+    box-shadow #{$transition-duration} ease;
+  box-shadow: none;
+
+  padding: calc(#{$spacing-y} * #{$size-coefficient-y}) calc(#{$spacing-x} * #{$size-coefficient-x});
+  font-size: #{$size-font-size};
+  height: #{$size-height};
+  line-height: #{$size-line-height};
+
+  &:hover {
+    border-color: rgb(#{$border-color-hover});
+    background-color: rgb(#{$background-color-hover});
+  }
+
+  &.focus,
+  &:focus {
+    border-color: rgb(#{$border-color-focus});
+    background-color: rgb(#{$background-color-focus});
+
+    &.shadow {
+      box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+    }
+  }
+
+  &:active,
+  &.active {
+    border-color: rgb(#{$border-color-active});
+    background-color: rgb(#{$background-color-active});
+  }
+
+  &:disabled,
+  &.disabled {
+    border-color: rgba(#{$border-color-disabled}, 0.5);
+    background-color: rgba(#{$background-color-disabled}, 0.5);
+    cursor: not-allowed;
+  }
+
+  // Case is block, then display full width
+  &.block {
+    width: 100%;
+  }
+
+  // Style for loading icon
+  .#{$loader} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  // Style for content of button
+  > span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: inherit;
+    line-height: inherit;
+  }
+}

package/src/components/button/button.type.ts

@@ -0,0 +1,14 @@
+// Define
+export type ButtonVariant = "fill" | "outline" | "text" | "link";
+
+export type ButtonSize = "small" | "standard" | "large";
+
+export type ButtonProps = {
+  role?: string;
+  size?: ButtonSize;
+  shape?: string;
+  block?: boolean;
+  loading?: boolean;
+  variant?: ButtonVariant;
+  shadow?: boolean;
+};

package/src/components/button/button.vue

@@ -0,0 +1,61 @@
+<style lang="scss" src="./button.scss" scoped></style>
+<template src="./button.html"></template>
+<script lang="ts" setup>
+import { computed, inject, ref } from "vue";
+import { type ButtonProps } from "./button.type";
+import { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<ButtonProps>(), {
+  size: "standard",
+  block: false,
+  loading: false,
+  variant: "fill",
+  shadow: undefined,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// State
+/// ------------------------------------------------------------
+const isFocused = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const buttonAttrs = computed(() => {
+  const shape = props.shape || appState?.shape.value || "";
+  const role = props.role || appState?.role.value || "";
+  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+
+  return {
+    class: [
+      withPrefix(["layer", "button"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      withPrefix("button"),
+      withPrefix(["size", props.size]),
+      props.variant,
+      {
+        block: props.block,
+        shadow,
+        focus: isFocused.value,
+      },
+    ],
+  };
+});
+
+const loaderAttrs = {
+  class: [withPrefix("loader")],
+} as const;
+
+/// Methods
+/// ------------------------------------------------------------
+const onFocus = () => {
+  isFocused.value = true;
+};
+
+const onBlur = () => {
+  isFocused.value = false;
+};
+</script>

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "./button.vue";
+export type { ButtonProps } from "./button.type";

package/src/components/cable/cable.constants.ts

@@ -0,0 +1 @@
+export const CABLE_PROVIDER_STATE_KEY = "cable-state";

package/src/components/cable/cable.html

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