@toife/vue 3.3.2 → 3.3.5

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

@@ -1,51 +0,0 @@
-<style lang="scss" src="@toife/core/features/toast/toast-content.scss" scoped></style>
-<template src="./toast-content.html"></template>
-<script lang="ts" setup>
-import { unref, computed, inject, onMounted, ref } from "vue";
-import {
-  TOAST_CONTENT_DEFAULT_PROPS,
-  APP_PROVIDER_STATE_KEY,
-  getToastContentAttrs,
-  type AppProviderState,
-  type ToastContentEvent,
-  type ToastContentProps,
-} from "@toife/core";
-import type { ProviderStateRefs } from "../../../shared/provider-state";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ToastContentProps>(), {
-  ...TOAST_CONTENT_DEFAULT_PROPS,
-});
-const emit = defineEmits<ToastContentEvent>();
-const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isClosing = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const contentAttrs = computed(() => {
-  const role = props.role || unref(appState?.role) || "";
-  const shape = props.shape || unref(appState?.shape) || "";
-  return getToastContentAttrs({
-    role,
-    shape,
-    variant: 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 "@toife/core";
-
-// 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/toolbar/index.ts

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

package/src/components/toolbar/toolbar.html

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

package/src/components/toolbar/toolbar.vue

@@ -1,39 +0,0 @@
-<style lang="scss" src="@toife/core/features/toolbar/toolbar.scss" scoped></style>
-<template src="./toolbar.html"></template>
-<script lang="ts" setup>
-import { unref, computed, inject } from "vue";
-import {
-  TOOLBAR_DEFAULT_PROPS,
-  APP_PROVIDER_STATE_KEY,
-  CABLE_PROVIDER_STATE_KEY,
-  getToolbarAttrs,
-  type AppProviderState,
-  type CableProviderState,
-  type ToolbarProps,
-} from "@toife/core";
-import type { ProviderStateRefs } from "../../shared/provider-state";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ToolbarProps>(), {
-  ...TOOLBAR_DEFAULT_PROPS,
-});
-const cable = inject<ProviderStateRefs<CableProviderState>>(CABLE_PROVIDER_STATE_KEY);
-const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const toolbarAttrs = computed(() => {
-  const role = props.role || unref(appState?.role) || "";
-  const placement = props.placement || unref(cable?.placement) || "";
-  const divider =
-    (props?.divider !== undefined ? props.divider : unref(appState?.divider)) ?? false;
-
-  return getToolbarAttrs({
-    role,
-    placement,
-    safe: props.safe,
-    divider,
-  });
-});
-</script>

package/src/components/tooltip/index.ts

@@ -1 +0,0 @@
-export { default as Tooltip } from "./tooltip.vue";

package/src/components/tooltip/tooltip.html

@@ -1,15 +0,0 @@
-<div ref="rootRef" v-bind="wrapperAttrs">
-  <div
-    ref="triggerRef"
-    v-bind="triggerAttrs"
-    @pointerenter="show"
-    @pointerleave="hide"
-    @focusin="show"
-    @focusout="onFocusOut"
-  >
-    <slot />
-  </div>
-  <div v-show="visible" v-bind="contentAttrs">
-    <slot name="content" />
-  </div>
-</div>

package/src/components/tooltip/tooltip.vue

@@ -1,63 +0,0 @@
-<style lang="scss" src="@toife/core/features/tooltip/tooltip.scss" scoped></style>
-<template src="./tooltip.html"></template>
-<script lang="ts" setup>
-import { unref, computed, inject, ref } from "vue";
-import {
-  TOOLTIP_DEFAULT_PROPS,
-  APP_PROVIDER_STATE_KEY,
-  getTooltipAttrs,
-  getTooltipContentAttrs,
-  getTooltipTriggerAttrs,
-  type AppProviderState,
-  type TooltipProps,
-} from "@toife/core";
-import type { ProviderStateRefs } from "../../shared/provider-state";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<TooltipProps>(), {
-  ...TOOLTIP_DEFAULT_PROPS,
-});
-const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const rootRef = ref<HTMLElement | null>(null);
-const triggerRef = ref<HTMLElement | null>(null);
-const visible = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const wrapperAttrs = computed(() => {
-  const role = props.role ?? unref(appState?.role) ?? "";
-  const shape = props.shape ?? unref(appState?.shape) ?? "";
-
-  return getTooltipAttrs({
-    role,
-    shape,
-    size: props.size,
-    disabled: props.disabled,
-  });
-});
-
-const contentAttrs = computed(() => getTooltipContentAttrs({ placement: props.placement }));
-const triggerAttrs = getTooltipTriggerAttrs();
-
-// Methods
-// ----------------------------------------------------------------------------
-const show = () => {
-  if (props.disabled) return;
-  visible.value = true;
-};
-
-const hide = () => {
-  visible.value = false;
-};
-
-const onFocusOut = (event: FocusEvent) => {
-  const root = rootRef.value;
-  const next = event.relatedTarget as Node | null;
-  if (root && next && root.contains(next)) return;
-  hide();
-};
-</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,164 +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,
-  Tag,
-  Tab,
-  Tabs,
-  Tooltip,
-  Toast,
-  ToastContent,
-  Toolbar,
-} from "./components";
-import { type SubscribeOptions } from "./types";
-import { DefineComponent, ref, type App as VueApp } from "vue";
-import { preventDefault } from "@toife/core";
-
-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 = {
-      name: options?.name || defaultAppName,
-      prefix: options?.prefix || "t-",
-    };
-
-    this.app = app;
-  }
-
-  /**
-   * Subscribe components
-   */
-  subscribeAll() {
-    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 + "tag", Tag);
-    this.app.component(prefix + "tab", Tab);
-    this.app.component(prefix + "tabs", Tabs);
-    this.app.component(prefix + "tooltip", Tooltip);
-    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);
-    }
-  }
-
-  /**
-   * Prevent default behavior
-   */
-  preventDefault() {
-    preventDefault();
-  }
-}
-
-/**
- * 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 "./components";
-export * from "@toife/core";

package/src/shared/provider-state.ts

@@ -1,8 +0,0 @@
-import type { ComputedRef, Ref } from "vue";
-
-/** Vue `provide`/`inject` shape for core provider state (refs stay reactive). */
-export type ProviderStateRefs<T extends Record<string, unknown>> = {
-  [K in keyof T]: T[K] extends (...args: infer A) => infer R
-    ? (...args: A) => R
-    : Ref<T[K]> | ComputedRef<T[K]>;
-};

package/src/types.ts

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