@toife/vue 3.1.6 → 3.2.0

package/src/components/toast/toast/toast.vue

@@ -1,34 +0,0 @@
-<style lang="scss" src="./toast.scss" scoped></style>
-<template src="./toast.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { type ToastProps } from "../toast.type";
-import { cssPrefix } from "../../../utils";
-import { useToast } from "../toast.composable";
-import { ToastContent } from "../toast-content";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ToastProps>(), {
-  placement: "bottom-end",
-});
-const toast = useToast();
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const toastAttrs = computed(() => {
-  return {
-    class: [cssPrefix("toast"), props.placement],
-  };
-});
-
-const toastMessages = computed(() => {
-  return toast.messages.value.filter((item) => item.placement == props.placement);
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const dismiss = (id: number) => {
-  toast.close(id);
-};
-</script>

package/src/components/toast/toast-content/index.ts

@@ -1 +0,0 @@
-export { default as ToastContent } from "./toast-content.vue";

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

@@ -1 +0,0 @@
-<div v-bind="contentAttrs">{{ props.message }}</div>

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

@@ -1,42 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$toastContent: sass.fn-naming-prefix("toast-content");
-
-// Property name - layer: toast
-$toast-background-color: sass.fn-naming-var("toast", "background-color");
-$toast-color: sass.fn-naming-var("toast", "color");
-$toast-border-color: sass.fn-naming-var("toast", "border-color");
-
-$space-x: sass.fn-naming-var("spacing", "x");
-$transition-duration: sass.fn-naming-var("duration");
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$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: rgba(#{$toast-background-color});
-  color: rgba(#{$toast-color});
-  border-color: rgba(#{$toast-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: calc(min(#{$radius-size}, #{$max-height}) * #{$radius-ratio});
-
-  &.closing {
-    opacity: 0;
-  }
-}

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

@@ -1,53 +0,0 @@
-<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 { cssPrefix } from "../../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ToastContentProps>(), {
-  message: "",
-  duration: 2000,
-  variant: "fill",
-});
-const emit = defineEmits<ToastContentEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isClosing = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const contentAttrs = computed(() => {
-  const role = props.role || appState?.role.value || "";
-  const shape = props.shape || appState?.shape.value || "";
-  return {
-    class: [
-      cssPrefix(["layer", "toast"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix("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

@@ -1,22 +0,0 @@
-import { ref } from "vue";
-import type { ToastContentProps } from "./toast.type";
-
-// Queue of active toast payloads (each open() appends with a monotonic id)
-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

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

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

package/src/components/toolbar/toolbar.html

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

package/src/components/toolbar/toolbar.scss

@@ -1,64 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$toolbar: sass.fn-naming-prefix("toolbar");
-
-// Property name - layer: toolbar
-$toolbar-background-color: sass.fn-naming-var("toolbar", "background-color");
-$toolbar-color: sass.fn-naming-var("toolbar", "color");
-$toolbar-border-color: sass.fn-naming-var("toolbar", "border-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("duration");
-
-$border-width: sass.fn-naming-var("stroke", "width");
-$border: #{$border-width} solid rgba(#{$toolbar-border-color});
-
-.#{$toolbar} {
-  background-color: rgba(#{$toolbar-background-color});
-  color: rgba(#{$toolbar-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;
-
-  &.safe {
-    &.right {
-      padding-right: #{$safe-area-right};
-    }
-
-    &.left {
-      padding-left: #{$safe-area-left};
-    }
-
-    &.bottom {
-      padding-bottom: #{$safe-area-bottom};
-    }
-
-    &.top {
-      padding-top: #{$safe-area-top};
-    }
-  }
-
-  &.divider {
-    &.bottom {
-      border-top: #{$border};
-    }
-
-    &.top {
-      border-bottom: #{$border};
-    }
-
-    &.left {
-      border-right: #{$border};
-    }
-
-    &.right {
-      border-left: #{$border};
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-// Type definitions
-export type ToolbarProps = {
-  placement?: string | null;
-  safe?: boolean;
-  role?: string;
-  divider?: boolean;
-};

package/src/components/toolbar/toolbar.vue

@@ -1,41 +0,0 @@
-<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 { cssProperty, cssPrefix } 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";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ToolbarProps>(), {
-  placement: null,
-  safe: true,
-  divider: undefined,
-});
-const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const toolbarAttrs = computed(() => {
-  const role = props.role || appState?.role.value || "";
-  const placement = props.placement || cable?.placement.value || "";
-  const divider = (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
-
-  return {
-    class: [
-      cssPrefix(["layer", "toolbar"]),
-      cssPrefix(["role", role]),
-      cssPrefix("toolbar"),
-      placement,
-      {
-        safe: props.safe,
-        divider: divider,
-      },
-    ],
-  };
-});
-</script>

package/src/env.d.ts

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

@@ -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)})`;
-};