@toife/vue 2.2.0 → 3.0.1

package/src/components/toast/toast-content/toast-content.scss

@@ -0,0 +1,41 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$toastContent: sass.fn-naming-prefix("toast-content");
+
+// Properties
+$space-x: sass.fn-naming-var("spacing", "x");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+// layer: toast-content
+$background-color: sass.fn-naming-var("toast", "background-color");
+$color: sass.fn-naming-var("toast", "color");
+$border-color: sass.fn-naming-var("toast", "border-color");
+$border-radius: sass.fn-naming-var("border-radius");
+$border-width: sass.fn-naming-var("stroke", "width");
+$max-height: sass.fn-naming-var("overlay", "max-height");
+
+.#{$toastContent} {
+  width: fit-content;
+  height: fit-content;
+  opacity: 1;
+  transition:
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease,
+    border-color #{$transition-duration} ease,
+    border-radius #{$transition-duration} ease,
+    opacity #{$transition-duration} ease;
+
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$color});
+  border-color: rgb(#{$border-color});
+  border-width: #{$border-width};
+  border-style: solid;
+  max-height: #{$max-height};
+  max-width: 100%;
+  padding: calc(#{$space-x} * 2) calc(#{$space-x} * 4);
+  border-radius: #{$border-radius};
+
+  &.closing {
+    opacity: 0;
+  }
+}

package/src/components/toast/toast-content/toast-content.vue

@@ -0,0 +1,53 @@
+<style lang="scss" src="./toast-content.scss" scoped></style>
+<template src="./toast-content.html"></template>
+<script lang="ts" setup>
+import { computed, inject, onMounted, ref } from "vue";
+import { type ToastContentProps, type ToastContentEmit } from "../toast.type";
+import { withPrefix } from "../../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<ToastContentProps>(), {
+  message: "",
+  duration: 2000,
+  variant: "fill",
+});
+const emit = defineEmits<ToastContentEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// State
+/// ------------------------------------------------------------
+const isClosing = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const contentAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const shape = props.shape || appState?.shape.value || "";
+  return {
+    class: [
+      withPrefix(["layer", "toast"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      withPrefix("toast-content"),
+      props.variant,
+      {
+        closing: isClosing.value,
+      },
+    ],
+  };
+});
+
+// Lifecycle
+/// ------------------------------------------------------------
+onMounted(() => {
+  setTimeout(() => {
+    isClosing.value = true;
+
+    setTimeout(() => {
+      emit("close");
+    }, 500);
+  }, props.duration);
+});
+</script>

package/src/components/toast/toast.composable.ts

@@ -0,0 +1,22 @@
+import { ref } from "vue";
+import type { ToastContentProps } from "./toast.type";
+
+// All messages
+const messages = ref<ToastContentProps[]>([]);
+const messageId = ref(1);
+
+export const useToast = () => {
+  const open = (message: ToastContentProps) => {
+    messages.value.push({ ...message, id: messageId.value++ });
+  };
+
+  const close = (id: number) => {
+    messages.value = messages.value.filter((item) => item.id !== id);
+  };
+
+  return {
+    messages,
+    open,
+    close,
+  };
+};

package/src/components/toast/toast.type.ts

@@ -0,0 +1,25 @@
+export type ToastPlacement =
+  | "bottom-start"
+  | "bottom-center"
+  | "bottom-end"
+  | "top-start"
+  | "top-center"
+  | "top-end";
+
+export type ToastContentVariant = "fill" | "text";
+
+export type ToastProps = {
+  placement: ToastPlacement;
+};
+
+export type ToastContentProps = {
+  id?: number;
+  message: string;
+  duration?: number;
+  role?: string;
+  variant?: ToastContentVariant;
+  placement?: ToastPlacement;
+  shape?: string;
+};
+
+export type ToastContentEmit = { (e: "close"): void };

package/src/components/toolbar/index.ts

@@ -0,0 +1,2 @@
+export { default as Toolbar } from "./toolbar.vue";
+export type { ToolbarProps } from "./toolbar.type";

package/src/components/toolbar/toolbar.html

@@ -0,0 +1,5 @@
+<div v-bind="toolbarAttrs">
+  <div>
+    <slot />
+  </div>
+</div>

package/src/components/toolbar/toolbar.md

@@ -0,0 +1,57 @@
+# `<t-toolbar>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Toolbar surface with height / safe-area; `placement` comes from props or from `t-cable` (inject).
+
+## Requirements / dependencies
+
+| Item  | Notes                                                            |
+| ----- | ---------------------------------------------------------------- |
+| Vue   | ^3.5                                                             |
+| Other | Place inside `t-cable` to inherit placement; `t-app` for `role`. |
+
+## Basic usage
+
+```vue
+<t-cable placement="bottom">
+  <t-toolbar>
+    <t-button>Home</t-button>
+  </t-toolbar>
+</t-cable>
+```
+
+## Props
+
+| Prop        | Type               | Default  | Description                                       |
+| ----------- | ------------------ | -------- | ------------------------------------------------- |
+| `placement` | `string \| null`   | `null`   | Placement class; if null, uses `cable.placement`. |
+| `safeArea`  | `boolean`          | `true`   | Safe-area padding (notch, home indicator).        |
+| `size`      | `string \| number` | `"50px"` | Toolbar height.                                   |
+| `role`      | `string`           | —        | Theme.                                            |
+
+**Type source:** `src/components/toolbar/toolbar.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description                                    |
+| --------- | ---------------------------------------------- |
+| `default` | Buttons / content (wrapped in an inner `div`). |
+
+## Provide / inject
+
+Optional inject `CABLE_PROVIDER_STATE_KEY` and `APP_PROVIDER_STATE_KEY`.
+
+## Style / class notes
+
+Variable `--<prefix>-toolbar-size`; classes `with-safe-area`, placement.
+
+## See also
+
+- Source: `src/components/toolbar`

package/src/components/toolbar/toolbar.scss

@@ -0,0 +1,79 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$toolbar: sass.fn-naming-prefix("toolbar");
+
+// Property name - layer: toolbar
+$toolbar-size: sass.fn-naming-var("toolbar", "size");
+$background-color: sass.fn-naming-var("toolbar", "background-color");
+$safe-area-right: sass.fn-naming-var("safe-area", "right");
+$safe-area-left: sass.fn-naming-var("safe-area", "left");
+$safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
+$safe-area-top: sass.fn-naming-var("safe-area", "top");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$toolbar} {
+  background-color: 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;
+
+  > div {
+    align-items: center;
+    display: flex;
+    position: relative;
+
+    > * {
+      flex: 1;
+    }
+  }
+
+  &.bottom,
+  &.top {
+    > div {
+      flex-direction: row;
+      height: #{$toolbar-size};
+      max-height: #{$toolbar-size};
+      width: 100%;
+
+      > * {
+        height: 100%;
+      }
+    }
+  }
+
+  &.left,
+  &.right {
+    > div {
+      flex-direction: column;
+      width: #{$toolbar-size};
+      max-width: #{$toolbar-size};
+      height: 100%;
+
+      > * {
+        width: 100%;
+      }
+    }
+  }
+
+  &.with-safe-area {
+    &.right {
+      padding-right: #{$safe-area-right};
+    }
+
+    &.left {
+      padding-left: #{$safe-area-left};
+    }
+
+    &.bottom {
+      padding-bottom: #{$safe-area-bottom};
+    }
+
+    &.top {
+      padding-top: #{$safe-area-top};
+    }
+  }
+}

package/src/components/toolbar/toolbar.type.ts

@@ -0,0 +1,7 @@
+// Define
+export type ToolbarProps = {
+  placement?: string | null;
+  safeArea?: boolean;
+  size?: string | number;
+  role?: string;
+};

package/src/components/toolbar/toolbar.vue

@@ -0,0 +1,41 @@
+<style lang="scss" src="./toolbar.scss" scoped></style>
+<template src="./toolbar.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { type ToolbarProps } from "./toolbar.type";
+import { property, withPrefix } from "../../utils";
+import { type CableProviderState } from "../cable/cable.type";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+import { CABLE_PROVIDER_STATE_KEY } from "../cable";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<ToolbarProps>(), {
+  placement: null,
+  safeArea: true,
+  size: "50px",
+});
+const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const toolbarAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const placement = props.placement || cable?.placement.value || "";
+  return {
+    class: [
+      withPrefix(["layer", "toolbar"]),
+      withPrefix(["role", role]),
+      withPrefix("toolbar"),
+      placement,
+      {
+        "with-safe-area": props.safeArea,
+      },
+    ],
+    style: {
+      [property(["toolbar", "size"])]: props.size + (typeof props.size === "number" ? "px" : ""),
+    },
+  };
+});
+</script>

package/src/env.d.ts

@@ -0,0 +1,7 @@
+// Vue SFC module typings for this package and for consumers (source is built in their app).
+// Intentionally no "vite/client" so projects without Vite still typecheck.
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/factory.ts

@@ -0,0 +1,83 @@
+import {
+  Action,
+  App,
+  Avatar,
+  Button,
+  Cable,
+  Card,
+  CardBody,
+  CardHeader,
+  CardFooter,
+  Checkbox,
+  Collapse,
+  Container,
+  DecisionModal,
+  Divider,
+  Field,
+  FormGroup,
+  GestureIndicator,
+  Image,
+  Modal,
+  Page,
+  Present,
+  Radio,
+  RadioGroup,
+  Refresher,
+  RouteNavigator,
+  RouteWrapper,
+  RouteProvider,
+  RouteOutlet,
+  SegmentedField,
+  Skeleton,
+  Switch,
+  Tab,
+  Tabs,
+  Toast,
+  ToastContent,
+  Toolbar,
+} from "./components";
+import { type CreateToifeOptions } from "./type";
+
+export const createToife = (options?: CreateToifeOptions) => {
+  return {
+    install: (app: any) => {
+      const prefix = options?.prefix || "t-";
+      app.component(prefix + "app", App);
+      app.component(prefix + "action", Action);
+      app.component(prefix + "avatar", Avatar);
+      app.component(prefix + "button", Button);
+      app.component(prefix + "cable", Cable);
+      app.component(prefix + "card", Card);
+      app.component(prefix + "card-body", CardBody);
+      app.component(prefix + "card-header", CardHeader);
+      app.component(prefix + "card-footer", CardFooter);
+      app.component(prefix + "checkbox", Checkbox);
+      app.component(prefix + "radio", Radio);
+      app.component(prefix + "radio-group", RadioGroup);
+      app.component(prefix + "collapse", Collapse);
+      app.component(prefix + "container", Container);
+      app.component(prefix + "decision-modal", DecisionModal);
+      app.component(prefix + "divider", Divider);
+      app.component(prefix + "field", Field);
+      app.component(prefix + "form-group", FormGroup);
+      app.component(prefix + "gesture-indicator", GestureIndicator);
+      app.component(prefix + "image", Image);
+      app.component(prefix + "modal", Modal);
+      app.component(prefix + "page", Page);
+      app.component(prefix + "present", Present);
+      app.component(prefix + "refresher", Refresher);
+      app.component(prefix + "route-navigator", RouteNavigator);
+      app.component(prefix + "route-wrapper", RouteWrapper);
+      app.component(prefix + "route-provider", RouteProvider);
+      app.component(prefix + "route-outlet", RouteOutlet);
+      app.component(prefix + "segmented-field", SegmentedField);
+      app.component(prefix + "skeleton", Skeleton);
+      app.component(prefix + "switch", Switch);
+      app.component(prefix + "tab", Tab);
+      app.component(prefix + "tabs", Tabs);
+      app.component(prefix + "toast", Toast);
+      app.component(prefix + "toast-content", ToastContent);
+      app.component(prefix + "toolbar", Toolbar);
+    },
+  };
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+/// <reference path="./env.d.ts" />
+export * from "./factory";
+export * as utils from "./utils";
+export * from "./components";

package/{dist/type.d.ts → src/type.ts}

@@ -1,3 +1,3 @@
 export type CreateToifeOptions = {
-    prefix?: string;
+  prefix?: string;
 };

package/src/utils/element.md

@@ -0,0 +1,33 @@
+# Utils: `element`
+
+> Import: `import { utils } from "@toife/vue"` then `utils.isFormElement`, `utils.blurCurrentActive` (see `src/index.ts`).
+
+**Source:** `src/utils/element.ts`
+
+## Description
+
+Helpers to detect form-like elements and blur the active field (shared with global event handling).
+
+## API
+
+### `isFormElement(target: any): boolean`
+
+Returns `true` if `target` is an `INPUT`, `TEXTAREA`, or `contentEditable` element.
+
+### `blurCurrentActive(): void`
+
+If the active element is an input/textarea/contentEditable, calls `.blur()`.
+
+## Example
+
+```ts
+import { utils } from "@toife/vue";
+
+document.addEventListener("click", (e) => {
+  if (!utils.isFormElement(e.target)) utils.blurCurrentActive();
+});
+```
+
+## See also
+
+- [events.md](./events.md) — document listeners and virtual keyboard

package/src/utils/element.ts

@@ -0,0 +1,16 @@
+export const isFormElement = (target: any) => {
+  return (
+    target &&
+    (target.tagName == "INPUT" || target.tagName == "TEXTAREA" || target.isContentEditable)
+  );
+};
+
+export const blurCurrentActive = () => {
+  const active = document.activeElement as HTMLElement | null;
+  if (
+    active &&
+    (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable)
+  ) {
+    active.blur();
+  }
+};

package/src/utils/events.md

@@ -0,0 +1,29 @@
+# Utils: `events`
+
+> Import: `import { utils } from "@toife/vue"` then `utils.preventDefault`.
+
+**Source:** `src/utils/events.ts`
+
+## Description
+
+Registers global behavior: block context menu, blur on `pointerup` outside form elements (via `isFormElement` / `blurCurrentActive`), and set `navigator.virtualKeyboard.overlaysContent` when available.
+
+## API
+
+### `preventDefault(): void`
+
+Call once at app bootstrap to attach the listeners above.
+
+**Note:** No teardown is returned — for tests or SSR without `document`, avoid calling or wrap yourself.
+
+## Example
+
+```ts
+import { utils } from "@toife/vue";
+
+utils.preventDefault();
+```
+
+## See also
+
+- [element.md](./element.md)

package/src/utils/events.ts

@@ -0,0 +1,12 @@
+import { blurCurrentActive, isFormElement } from "./element";
+
+export const preventDefault = () => {
+  document.addEventListener("contextmenu", (e) => e.preventDefault());
+  document.addEventListener("pointerup", (e) => {
+    !isFormElement(e.target) && blurCurrentActive();
+  });
+
+  if ("virtualKeyboard" in navigator) {
+    (navigator.virtualKeyboard as any).overlaysContent = true;
+  }
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./element";
+export * from "./events";
+export * from "./style";

package/src/utils/style/index.ts

@@ -0,0 +1,42 @@
+let prefix: string | null = null;
+let separator: string | null = null;
+
+export const getSeparator = () => {
+  if (!separator)
+    separator = getComputedStyle(document.documentElement).getPropertyValue("--separator").trim();
+
+  return separator;
+};
+
+export const getPrefix = () => {
+  if (!prefix)
+    prefix = getComputedStyle(document.documentElement).getPropertyValue("--prefix").trim();
+
+  return prefix;
+};
+
+export const withPrefix = (name: string | string[]) => {
+  const p = getPrefix();
+  const s = getSeparator();
+  let names = [];
+
+  if (typeof name === "string") {
+    names = [name];
+  } else {
+    names = [...name];
+  }
+
+  if (p) {
+    names = [p, ...names];
+  }
+
+  return names.join(s);
+};
+
+export const property = (name: string | string[]) => {
+  return "--" + withPrefix(name);
+};
+
+export const variable = (name: string | string[]) => {
+  return "var(" + property(name) + ")";
+};

package/src/utils/style.md

@@ -0,0 +1,49 @@
+# Utils: `style`
+
+> Import: `import { utils } from "@toife/vue"` then `utils.withPrefix`, … (or import from `src/utils` in the monorepo).
+
+**Source:** `src/utils/style/index.ts`
+
+## Description
+
+Reads `--prefix` and `--separator` from `document.documentElement` (cached), then builds BEM-style class names and CSS variable names `--…` / `var(--…)` for dynamic theming.
+
+## API
+
+### `getPrefix(): string`
+
+Trimmed `--prefix` on `:root` (singleton cache).
+
+### `getSeparator(): string`
+
+Trimmed `--separator` (often `-` or `_`) used to join name parts.
+
+### `withPrefix(name: string | string[]): string`
+
+If prefix exists: `[prefix, ...parts].join(separator)`. `name` can be a string or parts array (e.g. `['layer','surface']`).
+
+### `property(name: string | string[]): string`
+
+Returns the CSS custom property name **without** `var()`: `"--" + withPrefix(name)`.
+
+### `variable(name: string | string[]): string`
+
+Returns `var(--<prefixed…>)`.
+
+## Example
+
+```ts
+import { utils } from "@toife/vue";
+
+utils.withPrefix("button");
+utils.property(["field", "line"]);
+utils.variable(["field", "line"]);
+```
+
+## Environment
+
+Requires `document` and `getComputedStyle` — client-only after `:root` defines `--prefix` / `--separator`.
+
+## See also
+
+- Components using `withPrefix` for BEM classes

package/dist/components/action/action.type.d.ts

@@ -1,17 +0,0 @@
-export type ActionButton = {
-    text?: string;
-    color?: string;
-    size?: string;
-    variant?: string;
-    handler?: () => void;
-    data?: unknown;
-    key?: string | number;
-};
-export type ActionProps = {
-    actions?: ActionButton[][];
-    visible?: boolean;
-    dismiss?: Array<string>;
-};
-export type ActionEmit = {
-    (e: 'dismiss', type: string, data?: unknown): void;
-};

package/dist/components/action/action.vue.d.ts

@@ -1,14 +0,0 @@
-import { ActionButton, ActionProps } from './action.type';
-declare const _default: import('vue').DefineComponent<ActionProps, {
-    open: () => void;
-    close: () => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    dismiss: (type: string, data?: unknown) => any;
-}, string, import('vue').PublicProps, Readonly<ActionProps> & Readonly<{
-    onDismiss?: ((type: string, data?: unknown) => any) | undefined;
-}>, {
-    dismiss: Array<string>;
-    visible: boolean;
-    actions: ActionButton[][];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/action/factory.d.ts

@@ -1,3 +0,0 @@
-export declare const createAction: (props?: any, component?: any) => {
-    open(): Promise<any>;
-};

package/dist/components/action/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Action } from './action.vue';
-export * from './factory';