@plexui/vue 0.1.12 → 0.2.0

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

@@ -0,0 +1,94 @@
+import { type Component, type PropType, type SlotsType, type VNodeChild } from "vue";
+import { type SortableLayout } from "../../lib/sortable.js";
+/** Reorders its direct children by dragging, from anywhere but a control, or by a `SortableHandle` where grips are shown. */
+export declare const Sortable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** The list, in the order of the children. Bind with `v-model:value`. */
+    value: {
+        type: PropType<readonly unknown[]>;
+        required: true;
+    };
+    /** `list` for rows one under another, `grid` for items that stand side by side. @default "list" */
+    layout: {
+        type: PropType<SortableLayout>;
+        default: string;
+    };
+    /** Element to render, such as `TableBody` for table rows. @default "div" */
+    as: {
+        type: PropType<string | Component>;
+        default: string;
+    };
+    /** Turns dragging off. @default false */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Shows the grips of `SortableHandle`. A hidden grip still takes the keyboard, and the item drags from anywhere but a control. @default true in a table, otherwise false */
+    handles: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: unknown[]) => true;
+    change: (_value: unknown[]) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** The list, in the order of the children. Bind with `v-model:value`. */
+    value: {
+        type: PropType<readonly unknown[]>;
+        required: true;
+    };
+    /** `list` for rows one under another, `grid` for items that stand side by side. @default "list" */
+    layout: {
+        type: PropType<SortableLayout>;
+        default: string;
+    };
+    /** Element to render, such as `TableBody` for table rows. @default "div" */
+    as: {
+        type: PropType<string | Component>;
+        default: string;
+    };
+    /** Turns dragging off. @default false */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Shows the grips of `SortableHandle`. A hidden grip still takes the keyboard, and the item drags from anywhere but a control. @default true in a table, otherwise false */
+    handles: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((_value: unknown[]) => any) | undefined;
+    "onUpdate:value"?: ((_value: unknown[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    as: string | Component;
+    layout: SortableLayout;
+    handles: boolean;
+}, SlotsType<{
+    /** The items, one direct child per entry of `value`, keyed by the entry and not by its index */
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** The grip of an item. Arrow keys move the item while the handle has focus. */
+export declare const SortableHandle: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Name of the handle for assistive technology. @default "Reorder" */
+    ariaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Name of the handle for assistive technology. @default "Reorder" */
+    ariaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    ariaLabel: string;
+}, SlotsType<{
+    /** The grip */
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type { SortableLayout };

package/dist/types/components/Sortable/index.d.ts

@@ -0,0 +1 @@
+export { Sortable, SortableHandle, type SortableLayout } from "./Sortable.js";

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

@@ -1,5 +1,5 @@
 import { type PropType } from "vue";
-import type { Sizes } from "@plexui/styles/types";
+import type { Sizes, Variants } from "@plexui/styles/types";
 export type Tag = {
     value: string;
     valid: boolean;
@@ -24,6 +24,11 @@ export declare const TagInput: import("vue").DefineComponent<import("vue").Extra
         type: PropType<Sizes<"sm" | "md" | "lg" | "xl" | "2xl" | "3xl">>;
         default: string;
     };
+    /** Visual style. `ghost` has no frame, for a field that its container already frames. @default "outline" */
+    variant: {
+        type: PropType<Variants<"outline" | "ghost">>;
+        default: string;
+    };
     /** Placeholder text for the input */
     placeholder: {
         type: StringConstructor;
@@ -78,6 +83,11 @@ export declare const TagInput: import("vue").DefineComponent<import("vue").Extra
         type: PropType<Sizes<"sm" | "md" | "lg" | "xl" | "2xl" | "3xl">>;
         default: string;
     };
+    /** Visual style. `ghost` has no frame, for a field that its container already frames. @default "outline" */
+    variant: {
+        type: PropType<Variants<"outline" | "ghost">>;
+        default: string;
+    };
     /** Placeholder text for the input */
     placeholder: {
         type: StringConstructor;
@@ -121,6 +131,7 @@ export declare const TagInput: import("vue").DefineComponent<import("vue").Extra
     size: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
     delimiters: string[];
     placeholder: string;
+    variant: "outline" | "ghost";
     pill: boolean;
     autoFocus: boolean;
     rows: number;

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

@@ -3,7 +3,7 @@ import type { ControlSize, Sizes, Variants } from "@plexui/styles/types";
 declare const TextareaComponent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** Visual style of the textarea. @default "outline" */
     variant: {
-        type: PropType<Variants<"outline" | "soft">>;
+        type: PropType<Variants<"outline" | "soft" | "ghost">>;
         default: string;
     };
     /** Controls the size of the textarea. @default "md" */
@@ -80,7 +80,7 @@ declare const TextareaComponent: import("vue").DefineComponent<import("vue").Ext
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** Visual style of the textarea. @default "outline" */
     variant: {
-        type: PropType<Variants<"outline" | "soft">>;
+        type: PropType<Variants<"outline" | "soft" | "ghost">>;
         default: string;
     };
     /** Controls the size of the textarea. @default "md" */
@@ -157,7 +157,7 @@ declare const TextareaComponent: import("vue").DefineComponent<import("vue").Ext
     defaultValue: string | number;
     disabled: boolean;
     size: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-    variant: "soft" | "outline";
+    variant: "soft" | "outline" | "ghost";
     readOnly: boolean;
     readonly: boolean;
     allowAutofillExtensions: boolean;

package/dist/types/lib/sortable.d.ts

@@ -0,0 +1,9 @@
+export type SortableLayout = "list" | "grid";
+/** Applies a move to the list. Resolves once the DOM shows the new order. */
+export type SortableCommit = (from: number, to: number) => void | Promise<void>;
+/** The order after a move. `to` counts the list without the moved item. */
+export declare const moveItem: <T>(items: readonly T[], from: number, to: number) => T[];
+/** Starts a drag from a press inside the list. Goes on the list's `pointerdown`. */
+export declare function sortablePointerDown(event: PointerEvent, list: HTMLElement, layout: SortableLayout, commit: SortableCommit): void;
+/** Moves the focused handle's item with the arrow keys. Goes on the list's `keydown`. */
+export declare function sortableKeyDown(event: KeyboardEvent, list: HTMLElement, commit: SortableCommit): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/vue",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "description": "Plex UI components for Vue 3, built on Reka UI and the shared @plexui/styles CSS",
   "type": "module",
   "license": "MIT",