@fulate/components 1.0.0

package/README.md

@@ -0,0 +1,37 @@
+# `@fulate/components`
+
+> 文档角色：`GUIDE`。权威来源：组件源码与测试；Root/overlay 生命周期见 [`@fulate/vue`](../vue/README.md)。
+
+`@fulate/components` 提供基于 Vue 和 Material Design 3 的 Canvas UI 组件：`FButton`、`FInput`、
+`FSelect`、`FRadio`、`FCheckbox`、`FSwitch`、`FTooltip`、`FPopover`、`FDialog` 与 `FMessage`。
+导入包会加载 Yoga 的 `f-div`/`f-span` 注册，以便组件模板使用 Flex 容器。
+
+## 基本用法
+
+```tsx
+import { FButton, FInput, FPopover } from "@fulate/components";
+
+function Panel() {
+  return (
+    <f-div>
+      <FInput modelValue={name.value} />
+      <FButton onClick={save}>Save</FButton>
+      <FPopover>Details</FPopover>
+    </f-div>
+  );
+}
+```
+
+组件遵循 Vue 的 props/events 与 composable 语义；Canvas 元素属性通过 renderer 的普通
+`setOptions()` 路径更新。组件内部的 overlay 定位复用所属 Root 的 frame-final completion，不创建
+第二个 RAF 或 scheduler。`FDialog`、`FMessage` 通过所属 Root 的 viewport/resize 事实更新，
+`FTooltip`/`FPopover` 通过 `useOutsideClick()` 与 `useOverlayPosition()` 管理触发和定位。
+
+## Overlay 与消息
+
+`useOverlay()`、`useOverlayPosition()`、`FTooltip`、`FPopover` 和 `FDialog` 使用当前 Root 提供的
+overlay Layer。`useOutsideClick()` 负责外部指针边界；`useMessage()` 返回消息 API，消息组件的
+timer，以及组件创建的 viewport 和 document listener，都会在卸载时清理。
+
+具体 props、事件和尺寸类型以包源码导出的 TypeScript 类型为准；本 README 只说明包边界，不复制
+每个组件的完整 API。

package/dist/components/button/button.d.ts

@@ -0,0 +1,81 @@
+import { type PropType } from "@vue/runtime-core";
+import type { ButtonVariant } from "./types";
+export declare const FButton: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    variant: {
+        type: PropType<ButtonVariant>;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<import("../..").ControlSize>;
+        default: import("../..").ControlSize;
+    };
+    width: {
+        type: NumberConstructor;
+        default: any;
+    };
+    height: {
+        type: NumberConstructor;
+        default: any;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("click" | "press")[], "click" | "press", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    variant: {
+        type: PropType<ButtonVariant>;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<import("../..").ControlSize>;
+        default: import("../..").ControlSize;
+    };
+    width: {
+        type: NumberConstructor;
+        default: any;
+    };
+    height: {
+        type: NumberConstructor;
+        default: any;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        default: any;
+    };
+}>> & Readonly<{
+    onClick?: (...args: any[]) => any;
+    onPress?: (...args: any[]) => any;
+}>, {
+    width: number;
+    height: number;
+    fontSize: number;
+    size: import("../..").ControlSize;
+    label: string;
+    variant: ButtonVariant;
+    color: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;

package/dist/components/button/style.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonVariant } from "./types";
+import type { InteractionState } from "../../internal/interaction";
+import type { SizeScale } from "../../internal/control-size";
+export declare const BUTTON_SIZE: SizeScale<{
+    height: number;
+    fontSize: number;
+    minWidth: number;
+    horizontalPadding: number;
+    textHorizontalPadding: number;
+}>;
+interface ButtonVisualStyle {
+    backgroundColor: string;
+    borderColor?: string;
+    textColor: string;
+    rippleColor: string;
+}
+export declare function resolveButtonVisual(variant: ButtonVariant, color: string, disabled: boolean, state: InteractionState): ButtonVisualStyle;
+export {};

package/dist/components/button/types.d.ts

@@ -0,0 +1 @@
+export type ButtonVariant = "filled" | "outlined" | "text";

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,106 @@
+import { type PropType } from "@vue/runtime-core";
+import type { ControlSize } from "../../types/control";
+export declare const FCheckboxGroup: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: ControlSize;
+    };
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: ControlSize;
+    };
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: any;
+    };
+}>> & Readonly<{
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}>, {
+    size: ControlSize;
+    disabled: boolean;
+    modelValue: string[];
+    gap: number;
+    direction: "row" | "column";
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+export declare const FCheckbox: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: any;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: any;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: any;
+    };
+}>> & Readonly<{
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}>, {
+    value: string;
+    size: ControlSize;
+    label: string;
+    disabled: boolean;
+    modelValue: boolean;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,64 @@
+export declare const FDialog: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closeOnOverlayClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeOnEscape: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("close" | "update:modelValue" | "open" | "opened" | "closed")[], "close" | "update:modelValue" | "open" | "opened" | "closed", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closeOnOverlayClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeOnEscape: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+    onOpen?: (...args: any[]) => any;
+    onOpened?: (...args: any[]) => any;
+    onClosed?: (...args: any[]) => any;
+}>, {
+    width: number;
+    title: string;
+    modelValue: boolean;
+    closeOnEscape: boolean;
+    closeOnOverlayClick: boolean;
+    showClose: boolean;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;

package/dist/components/field/border.d.ts

@@ -0,0 +1,9 @@
+import type { Shape } from "@fulate/core";
+export declare function useFieldBorder(disabled: () => boolean, active: () => boolean): {
+    borderRef: import("@vue/reactivity").ShallowRef<Shape<import("@fulate/core").ShapeProperties, import("@fulate/core").ShapeOption<any>>, Shape<import("@fulate/core").ShapeProperties, import("@fulate/core").ShapeOption<any>>>;
+    handlers: {
+        onMouseenter(): void;
+        onMouseleave(): void;
+    };
+    initialVisual: import("./style").FieldBorderVisual;
+};

package/dist/components/field/field.d.ts

@@ -0,0 +1,149 @@
+import { type PropType, type ShallowRef } from "@vue/runtime-core";
+import type { Element } from "@fulate/core";
+import type { Text } from "@fulate/ui";
+export interface FieldLabelSlotProps {
+    ref: ShallowRef<Text | null>;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    fitWidth: boolean;
+    lineHeight: number;
+    fontSize: number;
+    color: string;
+    silent: boolean;
+    pickable: boolean;
+}
+export declare const FField: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    paddingLeft: {
+        type: NumberConstructor;
+        required: true;
+    };
+    paddingRight: {
+        type: NumberConstructor;
+        required: true;
+    };
+    suffixWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    labelFontSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    labelHeight: {
+        type: NumberConstructor;
+        required: true;
+    };
+    labelPaddingTop: {
+        type: NumberConstructor;
+        required: true;
+    };
+    cursor: {
+        type: StringConstructor;
+        default: string;
+    };
+    elementRef: {
+        type: PropType<(element: Element | null) => void>;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, "click"[], "click", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    paddingLeft: {
+        type: NumberConstructor;
+        required: true;
+    };
+    paddingRight: {
+        type: NumberConstructor;
+        required: true;
+    };
+    suffixWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    labelFontSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    labelHeight: {
+        type: NumberConstructor;
+        required: true;
+    };
+    labelPaddingTop: {
+        type: NumberConstructor;
+        required: true;
+    };
+    cursor: {
+        type: StringConstructor;
+        default: string;
+    };
+    elementRef: {
+        type: PropType<(element: Element | null) => void>;
+        default: any;
+    };
+}>> & Readonly<{
+    onClick?: (...args: any[]) => any;
+}>, {
+    cursor: string;
+    filled: boolean;
+    disabled: boolean;
+    active: boolean;
+    hasLabel: boolean;
+    suffixWidth: number;
+    elementRef: (element: Element | null) => void;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;

package/dist/components/field/style.d.ts

@@ -0,0 +1,18 @@
+import type { SizeScale } from "../../internal/control-size";
+export declare const FIELD_BORDER_WIDTH = 0.5;
+export declare const FIELD_HOVER_BORDER_WIDTH = 1;
+export declare const FIELD_ACTIVE_BORDER_WIDTH = 1.5;
+export type FieldBorderState = "disabled" | "rest" | "hover" | "active";
+export interface FieldBorderVisual {
+    borderColor: string;
+    borderWidth: number;
+}
+export declare const FIELD_SIZE: SizeScale<{
+    height: number;
+    fontSize: number;
+    horizontalPadding: number;
+    labelHeight: number;
+    labelFontSize: number;
+    labelPaddingTop: number;
+}>;
+export declare function resolveFieldBorderVisual(state: FieldBorderState): FieldBorderVisual;

package/dist/components/input/input.d.ts

@@ -0,0 +1,80 @@
+export declare const FInput: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import("@vue/runtime-core").PropType<import("../..").ControlSize>;
+        default: import("../..").ControlSize;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: any;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("change" | "input" | "update:modelValue")[], "change" | "input" | "update:modelValue", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import("@vue/runtime-core").PropType<import("../..").ControlSize>;
+        default: import("../..").ControlSize;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: any;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        default: any;
+    };
+}>> & Readonly<{
+    onChange?: (...args: any[]) => any;
+    onInput?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}>, {
+    width: number;
+    height: number;
+    fontSize: number;
+    size: import("../..").ControlSize;
+    label: string;
+    disabled: boolean;
+    placeholder: string;
+    modelValue: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;

package/dist/components/message/message.d.ts

@@ -0,0 +1,44 @@
+import type { MessageApi } from "./types";
+export declare const FMessage: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => (import("vue/jsx-runtime").JSX.Element | import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
+    [key: string]: any;
+}>[])[], {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    width: number;
+    duration: number;
+    gap: number;
+    offset: number;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+export declare function useMessage(): MessageApi;

package/dist/components/message/types.d.ts

@@ -0,0 +1,19 @@
+export type MessageType = "success" | "info" | "warning" | "error";
+export interface MessageOptions {
+    message: string;
+    type?: MessageType;
+    duration?: number;
+    onClose?: () => void;
+}
+export interface MessageHandle {
+    close(): void;
+}
+export type MessageInput = string | MessageOptions;
+export interface MessageApi {
+    (input: MessageInput): MessageHandle;
+    success(input: MessageInput): MessageHandle;
+    info(input: MessageInput): MessageHandle;
+    warning(input: MessageInput): MessageHandle;
+    error(input: MessageInput): MessageHandle;
+    closeAll(): void;
+}