@fastrd/ui-vue 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 FastR-D contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,23 @@
+# Source and publication scope
+
+The owner has authorized publication of the generic UI portions under MIT.
+Vue semantic primitives and v-model adapters derive from the common
+`primitives.ts` (203 lines) in FastPPT and FastFigure. Modal's public props and
+the focus-lifecycle purpose derive from their common `use-dialog-focus.ts`
+(58 lines) and Modal component. FastUI delegates focus trapping, inertness,
+nesting and focus restoration to the browser's native modal dialog rather
+than maintaining the original hand-written trap. Select retains the shared
+value/options/change contract and delegates interaction to the native select.
+
+The palette follows FastWrite's semantic colors and the approved FastTask
+workbench design. Only generic UI code and semantic design values are included.
+No private artwork, icons, logos, fonts, application data, product-specific
+workflows or brand assets are distributed. Upstream product repositories
+retain ownership of their application-specific code and assets.
+
+Source reference revisions: FastPPT `f6bf21f13445c2507719928fa68550552a8fcab2`
+(`packages/components/src/`) and FastFigure
+`13dcc4179fd0073da76f7626264af8605d5e8c70` (`src/components/ui/`).
+At both revisions, `primitives.ts` has Git blob
+`c7123af5f8316bc0486bce5c99cfbb2e9ab3dc73` and `use-dialog-focus.ts` has
+Git blob `3ffbb6c6c7bd5e3c96f2b8c05c5e008dcdfc4cab`.

package/README.md

@@ -1,3 +1,51 @@
-# Temporary Holding Version
+# @fastrd/ui-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+MIT · 0.1.1 · Vue ^3.5 peer · exact foundation 0.1.1 registry dependency.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { Button, TextField, Modal, ModalBody, Select } from '@fastrd/ui-vue'
+import '@fastrd/ui-vue/styles.css'
+const name = ref('')
+const open = ref(false)
+const format = ref('pdf')
+</script>
+<template>
+  <TextField v-model.trim="name" aria-label="Name" />
+  <Select :value="format" :options="[{value:'pdf',label:'PDF'}]" @change="format=$event" />
+  <Button variant="primary" @click="open=true">Settings</Button>
+  <Modal :open="open" label="Settings" @close="open=false">
+    <ModalBody><Button @click="open=false">Close</Button></ModalBody>
+  </Modal>
+</template>
+```
+
+Button variants: primary, secondary (default), quiet, icon, navigation, danger.
+Sizes: xs/sm/md; Button defaults sm, fields md. Loading buttons are busy and
+disabled; icon buttons need an accessible label supplied by the caller.
+TextField/TextArea/SelectField support Vue v-model and native events/attrs;
+TextField supports trim, number, lazy and checkbox/radio models.
+
+Modal has open, label/labelledby, md/lg/xl size and dismissible (default true).
+close is a request; the caller sets open=false. The browser owns native dialog
+focus, inertness and nesting. No body teleport: scoped tokens survive.
+Native `method=dialog` forms are not the controlled close API.
+
+Select accepts value, options [{value,label,disabled?}], placeholder, disabled,
+size and emits change(string) only for a different value. It is a native select:
+keyboard/typeahead/touch/form behavior follows the platform. In migration,
+remove the original custom-listbox CSS and avoid handling preview shortcuts
+when a native select has focus. Disabled options are skipped by the browser.
+
+Semantic primitives preserve the shared names and native refs: Box, Text,
+Heading, Panel, ModalBody, Header, Footer, Nav, Aside, Main, Article, Form, Field,
+Fieldset, Legend, Disclosure, DisclosureTrigger, List, ListItem, DescriptionList,
+Term, Description, Table/Head/Body/Row/Cell/Header/Caption, Frame, Image,
+DialogSurface, Progress, Link, Svg, SvgPath, SelectField, SelectOption, RichText.
+RichText renders caller-owned trusted HTML. `as` applies to element primitives.
+useDialogFocus accepts a native dialog ref and returns onDialogCancel; native
+modal behavior replaces the original custom focus trap.
+
+Class names use fastui-*; no legacy fp-* aliases or application brands are
+included. Application layouts and preview styles stay with the host.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './primitives.js';
+export { Modal, Select, useDialogFocus } from './interactive.js';
+export type { ModalProps, SelectProps, SelectItem } from './interactive.js';

package/dist/index.js

@@ -0,0 +1,242 @@
+// packages/vue/src/primitives.ts
+import {
+  h,
+  mergeProps,
+  withDirectives,
+  vModelDynamic,
+  vModelText,
+  vModelSelect
+} from "vue";
+function element(name, tag, className = "") {
+  const component = (props, { attrs, slots }) => h(props.as ?? tag, mergeProps(attrs, { class: className }), slots.default?.());
+  component.displayName = name;
+  component.props = ["as"];
+  component.inheritAttrs = false;
+  return component;
+}
+var Box = element("Box", "div");
+var Text = element("Text", "span");
+var Heading = element("Heading", "h2", "fastui-heading");
+var Panel = element("Panel", "section");
+var ModalBody = element("ModalBody", "div", "fastui-modal-body");
+var Header = element("Header", "header");
+var Footer = element("Footer", "footer");
+var Nav = element("Nav", "nav");
+var Aside = element("Aside", "aside");
+var Main = element("Main", "main");
+var Article = element("Article", "article");
+var Form = element("Form", "form");
+var Field = element("Field", "label", "fastui-field");
+var Fieldset = element("Fieldset", "fieldset", "fastui-fieldset");
+var Legend = element("Legend", "legend", "fastui-legend");
+var Disclosure = element("Disclosure", "details", "fastui-disclosure");
+var DisclosureTrigger = (props, { attrs, slots }) => h(props.as ?? "summary", mergeProps(attrs, {
+  class: ["fastui-disclosure-trigger", `fastui-disclosure-trigger--${props.size ?? "sm"}`]
+}), slots.default?.());
+DisclosureTrigger.props = ["as", "size"];
+DisclosureTrigger.inheritAttrs = false;
+var List = element("List", "ul");
+var ListItem = element("ListItem", "li");
+var DescriptionList = element("DescriptionList", "dl");
+var Term = element("Term", "dt");
+var Description = element("Description", "dd");
+var Table = element("Table", "table", "fastui-table");
+var TableHead = element("TableHead", "thead");
+var TableBody = element("TableBody", "tbody");
+var TableRow = element("TableRow", "tr");
+var TableCell = element("TableCell", "td");
+var TableHeader = element("TableHeader", "th");
+var TableCaption = element("TableCaption", "caption");
+var Frame = element("Frame", "iframe");
+var Image = element("Image", "img");
+var DialogSurface = element("DialogSurface", "dialog", "fastui-dialog");
+var Progress = element("Progress", "progress", "fastui-progress");
+var Link = element("Link", "a", "fastui-link");
+var Svg = (_props, { attrs, slots }) => h("svg", attrs, slots.default?.());
+var SvgPath = (_props, { attrs }) => h("path", attrs);
+var Button = (props, { attrs, slots }) => h("button", mergeProps(attrs, {
+  type: props.type ?? "button",
+  disabled: props.disabled || props.loading,
+  "aria-busy": props.loading || void 0,
+  class: ["fastui-button", `fastui-button--${props.variant ?? "secondary"}`, `fastui-button--${props.size ?? "sm"}`]
+}), slots.default?.());
+Button.props = {
+  variant: String,
+  size: String,
+  type: String,
+  disabled: Boolean,
+  loading: Boolean
+};
+Button.inheritAttrs = false;
+var TextField = (props, { attrs }) => {
+  const kind = typeof attrs.type === "string" ? attrs.type : "text";
+  const vnode = h("input", mergeProps(attrs, {
+    class: ["fastui-input", `fastui-input--${kind}`, `fastui-input--${props.size ?? "md"}`],
+    "onUpdate:modelValue": props["onUpdate:modelValue"]
+  }));
+  return props["onUpdate:modelValue"] ? withDirectives(vnode, [
+    [vModelDynamic, props.modelValue, void 0, props.modelModifiers ?? {}]
+  ]) : vnode;
+};
+TextField.props = ["size", "modelValue", "modelModifiers", "onUpdate:modelValue"];
+TextField.inheritAttrs = false;
+var TextArea = (props, { attrs }) => {
+  const vnode = h("textarea", mergeProps(attrs, {
+    class: "fastui-textarea",
+    "onUpdate:modelValue": props["onUpdate:modelValue"]
+  }));
+  return props["onUpdate:modelValue"] ? withDirectives(vnode, [
+    [vModelText, props.modelValue, void 0, props.modelModifiers ?? {}]
+  ]) : vnode;
+};
+TextArea.props = ["modelValue", "modelModifiers", "onUpdate:modelValue"];
+TextArea.inheritAttrs = false;
+var SelectField = (props, { attrs, slots }) => {
+  const vnode = h("select", mergeProps(attrs, {
+    class: "fastui-select",
+    "onUpdate:modelValue": props["onUpdate:modelValue"]
+  }), slots.default?.());
+  return props["onUpdate:modelValue"] ? withDirectives(vnode, [
+    [vModelSelect, props.modelValue, void 0, props.modelModifiers ?? {}]
+  ]) : vnode;
+};
+SelectField.props = ["modelValue", "modelModifiers", "onUpdate:modelValue"];
+SelectField.inheritAttrs = false;
+var SelectOption = element("SelectOption", "option");
+var RichText = (props, { attrs }) => h("div", mergeProps(attrs, { innerHTML: props.html }));
+RichText.props = ["html"];
+RichText.inheritAttrs = false;
+
+// packages/vue/src/interactive.ts
+import {
+  defineComponent,
+  h as h2,
+  mergeProps as mergeProps2,
+  shallowRef,
+  watch,
+  onMounted,
+  onBeforeUnmount
+} from "vue";
+import { syncDialog } from "@fastrd/ui-foundation";
+function useDialogFocus(dialog, isOpen, close) {
+  const sync = () => {
+    if (dialog.value) syncDialog(dialog.value, isOpen());
+  };
+  watch(isOpen, sync, { flush: "post" });
+  onMounted(sync);
+  onBeforeUnmount(() => {
+    if (dialog.value) syncDialog(dialog.value, false);
+  });
+  function onDialogCancel(event) {
+    event.preventDefault();
+    close();
+  }
+  return { onDialogCancel };
+}
+var Modal = defineComponent({
+  name: "Modal",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, required: true },
+    label: String,
+    labelledby: String,
+    size: { type: String, default: "md" },
+    dismissible: { type: Boolean, default: true }
+  },
+  emits: { close: () => true },
+  setup(props, { attrs, slots, emit }) {
+    const surface = shallowRef();
+    const close = () => {
+      if (props.dismissible) emit("close");
+    };
+    const { onDialogCancel } = useDialogFocus(surface, () => props.open, close);
+    let backdropDown = false;
+    const outside = (event) => {
+      if (event.target !== surface.value) return false;
+      const rect = surface.value.getBoundingClientRect();
+      return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+    };
+    return () => h2("dialog", mergeProps2(attrs, {
+      ref: surface,
+      class: ["fastui-dialog", `fastui-dialog--${props.size}`],
+      "aria-label": props.label ?? attrs["aria-label"],
+      "aria-labelledby": props.labelledby ?? attrs["aria-labelledby"],
+      onCancel: onDialogCancel,
+      onPointerdown: (event) => {
+        backdropDown = outside(event);
+      },
+      onClick: (event) => {
+        if (backdropDown && outside(event)) close();
+        backdropDown = false;
+      }
+    }), props.open ? slots.default?.() : void 0);
+  }
+});
+var Select = (props, { attrs }) => h2("select", mergeProps2(attrs, {
+  class: ["fastui-select", `fastui-select--${props.size ?? "md"}`],
+  value: props.options.some((option) => option.value === props.value) ? props.value : "",
+  disabled: props.disabled,
+  onChange: (event) => {
+    const value = event.target.value;
+    if (value !== props.value) props.onChange?.(value);
+  }
+}), [
+  ...props.options.some((option) => option.value === props.value) ? [] : [h2("option", { value: "", disabled: true }, props.placeholder ?? "")],
+  ...props.options.map((option) => h2("option", { key: option.value, value: option.value, disabled: option.disabled }, option.label))
+]);
+Select.props = {
+  value: String,
+  options: { type: Array, required: true },
+  placeholder: String,
+  size: String,
+  disabled: Boolean,
+  onChange: Function
+};
+Select.inheritAttrs = false;
+export {
+  Article,
+  Aside,
+  Box,
+  Button,
+  Description,
+  DescriptionList,
+  DialogSurface,
+  Disclosure,
+  DisclosureTrigger,
+  Field,
+  Fieldset,
+  Footer,
+  Form,
+  Frame,
+  Header,
+  Heading,
+  Image,
+  Legend,
+  Link,
+  List,
+  ListItem,
+  Main,
+  Modal,
+  ModalBody,
+  Nav,
+  Panel,
+  Progress,
+  RichText,
+  Select,
+  SelectField,
+  SelectOption,
+  Svg,
+  SvgPath,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Term,
+  Text,
+  TextArea,
+  TextField,
+  useDialogFocus
+};

package/dist/interactive.d.ts

@@ -0,0 +1,67 @@
+import { type ShallowRef, type PropType, type FunctionalComponent, type SelectHTMLAttributes } from 'vue';
+import type { ControlSize } from './primitives.js';
+/** Native dialog owns focus containment and restoration, including nested dialogs. */
+export declare function useDialogFocus(dialog: ShallowRef<HTMLDialogElement | undefined>, isOpen: () => boolean, close: () => void): {
+    onDialogCancel: (event: Event) => void;
+};
+export interface ModalProps {
+    open: boolean;
+    label?: string;
+    labelledby?: string;
+    size?: 'md' | 'lg' | 'xl';
+    dismissible?: boolean;
+}
+export declare const Modal: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    label: StringConstructor;
+    labelledby: StringConstructor;
+    size: {
+        type: PropType<ModalProps["size"]>;
+        default: string;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    label: StringConstructor;
+    labelledby: StringConstructor;
+    size: {
+        type: PropType<ModalProps["size"]>;
+        default: string;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    size: "md" | "lg" | "xl" | undefined;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface SelectItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes, 'value' | 'size' | 'onChange' | 'multiple'> {
+    value: string | undefined;
+    options: readonly SelectItem[];
+    placeholder?: string;
+    size?: ControlSize;
+    onChange?: (value: string) => void;
+}
+/** Native select provides keyboard navigation, typeahead and mobile pickers. */
+export declare const Select: FunctionalComponent<SelectProps>;

package/dist/primitives.d.ts

@@ -0,0 +1,69 @@
+import { type FunctionalComponent, type HTMLAttributes, type ButtonHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes, type SelectHTMLAttributes, type SVGAttributes } from 'vue';
+export type ControlSize = 'xs' | 'sm' | 'md';
+export type ButtonVariant = 'primary' | 'secondary' | 'quiet' | 'icon' | 'navigation' | 'danger';
+export type ElementProps = HTMLAttributes & {
+    as?: string;
+};
+export declare const Box: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Text: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Heading: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Panel: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const ModalBody: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Header: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Footer: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Nav: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Aside: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Main: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Article: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Form: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Field: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Fieldset: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Legend: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Disclosure: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const DisclosureTrigger: FunctionalComponent<ElementProps & {
+    size?: 'xs' | 'sm';
+}>;
+export declare const List: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const ListItem: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const DescriptionList: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Term: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Description: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Table: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const TableHead: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const TableBody: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const TableRow: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const TableCell: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const TableHeader: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const TableCaption: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Frame: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Image: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const DialogSurface: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Progress: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Link: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const Svg: FunctionalComponent<SVGAttributes>;
+export declare const SvgPath: FunctionalComponent<SVGAttributes>;
+export interface ButtonProps extends ButtonHTMLAttributes {
+    variant?: ButtonVariant;
+    size?: ControlSize;
+    loading?: boolean;
+}
+export declare const Button: FunctionalComponent<ButtonProps>;
+export interface ModelProps {
+    modelValue?: unknown;
+    modelModifiers?: {
+        number?: boolean;
+        trim?: boolean;
+        lazy?: boolean;
+    };
+    'onUpdate:modelValue'?: (value: any) => void;
+}
+export interface TextFieldProps extends Omit<InputHTMLAttributes, 'size'>, ModelProps {
+    size?: ControlSize;
+}
+export declare const TextField: FunctionalComponent<TextFieldProps>;
+export declare const TextArea: FunctionalComponent<TextareaHTMLAttributes & ModelProps>;
+export declare const SelectField: FunctionalComponent<SelectHTMLAttributes & ModelProps>;
+export declare const SelectOption: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const RichText: FunctionalComponent<HTMLAttributes & {
+    html: string;
+}>;

package/dist/styles.css

@@ -0,0 +1,2 @@
+@import "@fastrd/ui-foundation/tokens.css";
+@import "@fastrd/ui-foundation/controls.css";

package/package.json

@@ -1,6 +1,17 @@
 {
   "name": "@fastrd/ui-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Vue primitives and accessible native controls for FastUI",
+  "type": "module",
+  "license": "MIT",
+  "repository": {"type":"git","url":"git+https://github.com/FastR-D/FastUI.git","directory":"packages/vue"},
+  "publishConfig": {"access":"public"},
+  "files": ["dist", "LICENSE", "README.md", "NOTICE.md"],
+  "sideEffects": ["**/*.css"],
+  "dependencies": {"@fastrd/ui-foundation":"0.1.1"},
+  "peerDependencies": {"vue":"^3.5.0"},
+  "exports": {
+    ".": {"types":"./dist/index.d.ts","import":"./dist/index.js"},
+    "./styles.css": "./dist/styles.css"
+  }
+}