@toife/vue 3.1.5 → 3.2.0

package/src/factory.ts

@@ -1,152 +0,0 @@
-import {
-  Action,
-  App,
-  Avatar,
-  Button,
-  Cable,
-  Card,
-  CardBody,
-  CardHeader,
-  CardFooter,
-  Checkbox,
-  Collapse,
-  Container,
-  DecisionModal,
-  Divider,
-  Dropdown,
-  Field,
-  Flex,
-  FlexItem,
-  FormGroup,
-  GestureIndicator,
-  Grid,
-  GridItem,
-  Image,
-  Modal,
-  Page,
-  Present,
-  Radio,
-  RadioGroup,
-  Refresher,
-  RouteNavigator,
-  RouteWrapper,
-  RouteProvider,
-  RouteOutlet,
-  SegmentedField,
-  Select,
-  SlideRange,
-  Skeleton,
-  Switch,
-  Tab,
-  Tabs,
-  Toast,
-  ToastContent,
-  Toolbar,
-} from "./components";
-import { type SubscribeOptions } from "./type";
-import { DefineComponent, ref, type App as VueApp } from "vue";
-
-const apps = ref<Record<string, any>>({});
-const defaultAppName = "toife";
-
-class Toife {
-  /**
-   * Subscribe options
-   */
-  public options: SubscribeOptions;
-  public app: VueApp;
-
-  /**
-   * Constructor
-   */
-  constructor(app: VueApp, options?: SubscribeOptions) {
-    this.options = options || {
-      name: defaultAppName,
-      prefix: "t-",
-    };
-
-    this.app = app;
-  }
-
-  /**
-   * Subscribe components
-   */
-  subscribeComponents() {
-    const prefix = this.options.prefix;
-    this.app.component(prefix + "app", App);
-    this.app.component(prefix + "action", Action);
-    this.app.component(prefix + "avatar", Avatar);
-    this.app.component(prefix + "button", Button);
-    this.app.component(prefix + "cable", Cable);
-    this.app.component(prefix + "card", Card);
-    this.app.component(prefix + "card-body", CardBody);
-    this.app.component(prefix + "card-header", CardHeader);
-    this.app.component(prefix + "card-footer", CardFooter);
-    this.app.component(prefix + "checkbox", Checkbox);
-    this.app.component(prefix + "radio", Radio);
-    this.app.component(prefix + "radio-group", RadioGroup);
-    this.app.component(prefix + "collapse", Collapse);
-    this.app.component(prefix + "container", Container);
-    this.app.component(prefix + "decision-modal", DecisionModal);
-    this.app.component(prefix + "divider", Divider);
-    this.app.component(prefix + "dropdown", Dropdown);
-    this.app.component(prefix + "field", Field);
-    this.app.component(prefix + "flex", Flex);
-    this.app.component(prefix + "flex-item", FlexItem);
-    this.app.component(prefix + "form-group", FormGroup);
-    this.app.component(prefix + "gesture-indicator", GestureIndicator);
-    this.app.component(prefix + "grid", Grid);
-    this.app.component(prefix + "grid-item", GridItem);
-    this.app.component(prefix + "image", Image);
-    this.app.component(prefix + "modal", Modal);
-    this.app.component(prefix + "page", Page);
-    this.app.component(prefix + "present", Present);
-    this.app.component(prefix + "refresher", Refresher);
-    this.app.component(prefix + "route-navigator", RouteNavigator);
-    this.app.component(prefix + "route-wrapper", RouteWrapper);
-    this.app.component(prefix + "route-provider", RouteProvider);
-    this.app.component(prefix + "route-outlet", RouteOutlet);
-    this.app.component(prefix + "segmented-field", SegmentedField);
-    this.app.component(prefix + "select", Select);
-    this.app.component(prefix + "slide-range", SlideRange);
-    this.app.component(prefix + "skeleton", Skeleton);
-    this.app.component(prefix + "switch", Switch);
-    this.app.component(prefix + "tab", Tab);
-    this.app.component(prefix + "tabs", Tabs);
-    this.app.component(prefix + "toast", Toast);
-    this.app.component(prefix + "toast-content", ToastContent);
-    this.app.component(prefix + "toolbar", Toolbar);
-  }
-
-  /**
-   * Subscribe a component
-   */
-  subscribe(name: string, component: DefineComponent<{}, {}, any>) {
-    if (!this.app.component(this.options.prefix + name)) {
-      this.app.component(this.options.prefix + name, component);
-    }
-  }
-}
-
-/**
- * Subscribe components
- */
-export const createToife = (app: VueApp, options?: SubscribeOptions) => {
-  const instance = new Toife(app, options);
-  apps.value[instance.options.name] = instance;
-  return instance;
-};
-
-/**
- * Get component name
- */
-export const useApp = (name: string = defaultAppName) => {
-  return apps.value[name] || null;
-};
-
-/**
- * Get all apps
- */
-export const getApps = () => {
-  return apps.value;
-};

package/src/index.ts

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

package/src/type.ts

@@ -1,4 +0,0 @@
-export type SubscribeOptions = {
-  prefix?: string;
-  name: string;
-};

package/src/utils/element.md

@@ -1,33 +0,0 @@
-# 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

@@ -1,22 +0,0 @@
-/**
- * Check if the target is a form element
- */
-export const isFormElement = (target: any) => {
-  return (
-    target &&
-    (target.tagName == "INPUT" || target.tagName == "TEXTAREA" || target.isContentEditable)
-  );
-};
-
-/**
- * Blur the current active element
- */
-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

@@ -1,29 +0,0 @@
-# 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

@@ -1,18 +0,0 @@
-import { blurCurrentActive, isFormElement } from "./element";
-
-/** Subset of the Virtual Keyboard API used for layout. */
-type VirtualKeyboardOverlay = { overlaysContent: boolean };
-
-/**
- * Prevent default behavior
- */
-export const preventDefault = () => {
-  document.addEventListener("contextmenu", (e) => e.preventDefault());
-  document.addEventListener("pointerup", (e) => {
-    !isFormElement(e.target) && blurCurrentActive();
-  });
-
-  if ("virtualKeyboard" in navigator && navigator.virtualKeyboard) {
-    (navigator.virtualKeyboard as VirtualKeyboardOverlay).overlaysContent = true;
-  }
-};

package/src/utils/index.ts

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

package/src/utils/style/index.ts

@@ -1,57 +0,0 @@
-let prefix: string | null = null;
-let separator: string | null = null;
-
-/**
- * Get the separator from the document element
- */
-export const getCssSeparator = () => {
-  if (!separator)
-    separator = getComputedStyle(document.documentElement).getPropertyValue("--separator").trim();
-
-  return separator;
-};
-
-/**
- * Get the prefix from the document element
- */
-export const getCssPrefix = () => {
-  if (!prefix)
-    prefix = getComputedStyle(document.documentElement).getPropertyValue("--prefix").trim();
-
-  return prefix;
-};
-
-/**
- * Generate the prefixed name
- */
-export const cssPrefix = (name: string | string[]) => {
-  const p = getCssPrefix();
-  const s = getCssSeparator();
-  let names = [];
-
-  if (typeof name === "string") {
-    names = [name];
-  } else {
-    names = [...name];
-  }
-
-  if (p) {
-    names = [p, ...names];
-  }
-
-  return names.filter((item) => item !== undefined && item !== null && item !== "").join(s);
-};
-
-/**
- * Generate the property name
- */
-export const cssProperty = (name: string | string[]) => {
-  return `--${cssPrefix(name)}`;
-};
-
-/**
- * Generate the name with var() syntax
- */
-export const cssVariable = (name: string | string[]) => {
-  return `var(${cssProperty(name)})`;
-};

package/src/utils/style.md

@@ -1,49 +0,0 @@
-# Utils: `style`
-
-> Import: `import { utils } from "@toife/vue"` then `utils.cssPrefix`, … (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
-
-### `getCssPrefix(): string`
-
-Trimmed `--prefix` on `:root` (singleton cache).
-
-### `getCssSeparator(): string`
-
-Trimmed `--separator` (often `-` or `_`) used to join name parts.
-
-### `cssPrefix(name: string | string[]): string`
-
-If prefix exists: `[prefix, ...parts].join(separator)`. `name` can be a string or parts array (e.g. `['layer','surface']`).
-
-### `cssProperty(name: string | string[]): string`
-
-Returns the CSS custom property name **without** `var()`: `"--" + cssPrefix(name)`.
-
-### `variable(name: string | string[]): string`
-
-Returns `var(--<prefixed…>)`.
-
-## Example
-
-```ts
-import { utils } from "@toife/vue";
-
-utils.cssPrefix("button");
-utils.cssProperty(["field", "line"]);
-utils.variable(["field", "line"]);
-```
-
-## Environment
-
-Requires `document` and `getComputedStyle` — client-only after `:root` defines `--prefix` / `--separator`.
-
-## See also
-
-- Components using `cssPrefix` for BEM classes