@lovince/ui-vue 0.5.0 → 0.6.0

package/README.md

@@ -6,7 +6,7 @@ effects run through [`@lovince/ui-dom`](../ui-dom). This package subscribes to
 the machine, feeds props in, and renders what `connect()` returns. It holds no
 behaviour of its own.
 
-> **Status: `0.5.0`, experimental.** The API may change before `1.0`.
+> **Status: `0.6.0`, experimental.** The API may change before `1.0`.
 
 ```bash
 bun add @lovince/ui-vue

package/dist/components/display/timeline.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Orientation } from '@lovince/ui-headless';
+import { Orientation, TimelineAlign } from '@lovince/ui-headless';
 export declare const LvTimeline: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
@@ -13,6 +13,11 @@ export declare const LvTimeline: import('vue').DefineComponent<import('vue').Ext
         type: PropType<Orientation>;
         default: string;
     };
+    /** Which side of the rail content sits on; `alternate` zig-zags. Horizontal timelines put content below. */
+    align: {
+        type: PropType<TimelineAlign>;
+        default: string;
+    };
     reveal: {
         type: BooleanConstructor;
         default: boolean;
@@ -36,6 +41,11 @@ export declare const LvTimeline: import('vue').DefineComponent<import('vue').Ext
         type: PropType<Orientation>;
         default: string;
     };
+    /** Which side of the rail content sits on; `alternate` zig-zags. Horizontal timelines put content below. */
+    align: {
+        type: PropType<TimelineAlign>;
+        default: string;
+    };
     reveal: {
         type: BooleanConstructor;
         default: boolean;
@@ -50,6 +60,7 @@ export declare const LvTimeline: import('vue').DefineComponent<import('vue').Ext
     orientation: Orientation;
     reveal: boolean;
     current: number;
+    align: "start" | "end" | "alternate";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export declare const LvTimelineItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {

package/dist/components/navigation/pagination.d.ts

@@ -195,6 +195,113 @@ export declare const LvPaginationNext: import('vue').DefineComponent<import('vue
     asChild: boolean;
     label: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvPaginationFirst: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => 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<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvPaginationLast: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => 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<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** A page field for long lists: typing edits a draft, Enter or blur goes to that page. */
+export declare const LvPaginationInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    label: {
+        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<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** Announces the page politely when it changes. Defaults to "Page 4 of 12". */
+export declare const LvPaginationStatus: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => 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<{
+    as: {
+        default: string;
+        type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export declare const LvPaginationEllipsis: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;

package/dist/components/primitives/icon.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IconFlip, IconName } from '@lovince/icons';
+import { IconAnimation, IconFlip, IconName, IconTrigger } from '@lovince/icons';
 export declare const LvIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     name: {
         type: PropType<IconName>;
@@ -33,6 +33,21 @@ export declare const LvIcon: import('vue').DefineComponent<import('vue').Extract
         type: StringConstructor;
         default: undefined;
     };
+    /** Motion from `@lovince/icons/style.css`. Omit for a still icon. */
+    animation: {
+        type: PropType<IconAnimation>;
+        default: undefined;
+    };
+    /** When it plays; each animation has a sensible default. */
+    trigger: {
+        type: PropType<IconTrigger>;
+        default: undefined;
+    };
+    /** `active` trigger: plays each time this turns true. `loop`: pauses while false. */
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>, () => 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<{
@@ -68,12 +83,30 @@ export declare const LvIcon: import('vue').DefineComponent<import('vue').Extract
         type: StringConstructor;
         default: undefined;
     };
+    /** Motion from `@lovince/icons/style.css`. Omit for a still icon. */
+    animation: {
+        type: PropType<IconAnimation>;
+        default: undefined;
+    };
+    /** When it plays; each animation has a sensible default. */
+    trigger: {
+        type: PropType<IconTrigger>;
+        default: undefined;
+    };
+    /** `active` trigger: plays each time this turns true. `loop`: pauses while false. */
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
     fill: number | boolean;
     size: string | number;
     label: string;
+    active: boolean;
+    trigger: "loop" | "active" | "hover" | "group-hover" | "press" | "in-view" | "mount";
     flip: IconFlip;
     rotate: string | number;
     strokeWidth: string | number;
     absoluteStrokeWidth: boolean;
+    animation: "pop" | "spin" | "pulse" | "bounce" | "wiggle" | "ring" | "nudge" | "draw";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/icon.d.ts

@@ -1,2 +1,2 @@
 export { LvIcon } from './components/primitives/icon';
-export type { IconFlip, IconName } from '@lovince/icons';
+export type { IconAnimation, IconFlip, IconName, IconTrigger } from '@lovince/icons';

package/dist/icon.js

@@ -1,7 +1,7 @@
-import { computed as e, defineComponent as t, h as n } from "vue";
-import { CANVAS as r, paths as i, resolveFill as a, resolveGeometry as o } from "@lovince/icons";
+import { computed as e, defineComponent as t, h as n, onBeforeUnmount as r, ref as i, watch as a } from "vue";
+import { CANVAS as o, iconMotionAttrs as s, iconPathLength as c, observeInView as l, paths as u, resolveFill as d, resolveGeometry as f, resolveIconTrigger as p } from "@lovince/icons";
 //#region src/components/primitives/icon.ts
-var s = t({
+var m = t({
 	name: "LvIcon",
 	inheritAttrs: !1,
 	props: {
@@ -36,10 +36,31 @@ var s = t({
 		label: {
 			type: String,
 			default: void 0
+		},
+		animation: {
+			type: String,
+			default: void 0
+		},
+		trigger: {
+			type: String,
+			default: void 0
+		},
+		active: {
+			type: Boolean,
+			default: void 0
 		}
 	},
-	setup: (t, { attrs: s }) => {
-		let c = e(() => o({
+	setup: (t, { attrs: m }) => {
+		let h = i(null), g = i(!1), _ = null, v = () => {
+			_?.(), _ = null;
+		};
+		a([h, () => p({
+			animation: t.animation,
+			trigger: t.trigger
+		})], ([e, t]) => {
+			v(), e !== null && t === "in-view" && !g.value && (_ = l(e, () => g.value = !0));
+		}, { flush: "post" }), r(v);
+		let y = e(() => f({
 			size: t.size,
 			strokeWidth: t.strokeWidth,
 			absoluteStrokeWidth: t.absoluteStrokeWidth,
@@ -47,30 +68,38 @@ var s = t({
 			flip: t.flip
 		}));
 		return () => {
-			let e = i[t.name] ?? [], o = a(t.fill), l = t.label === void 0 || t.label.length === 0;
+			let e = u[t.name] ?? [], r = d(t.fill), i = t.label === void 0 || t.label.length === 0, a = {
+				animation: t.animation,
+				trigger: t.trigger,
+				active: t.active,
+				inView: g.value
+			}, l = c(a);
 			return n("svg", {
-				...s,
-				class: ["lovince-icon", s.class],
+				...m,
+				...s(a),
+				ref: h,
+				class: ["lovince-icon", m.class],
 				"data-icon": t.name,
 				xmlns: "http://www.w3.org/2000/svg",
-				width: c.value.size,
-				height: c.value.size,
-				viewBox: `0 0 ${r} ${r}`,
+				width: y.value.size,
+				height: y.value.size,
+				viewBox: `0 0 ${o} ${o}`,
 				fill: "none",
 				stroke: "currentColor",
-				"stroke-width": c.value.strokeWidth,
+				"stroke-width": y.value.strokeWidth,
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
-				"aria-hidden": l ? "true" : void 0,
-				role: l ? void 0 : "img",
-				"aria-label": l ? void 0 : t.label
-			}, [n("g", { transform: c.value.transform }, e.map((e) => n("path", {
+				"aria-hidden": i ? "true" : void 0,
+				role: i ? void 0 : "img",
+				"aria-label": i ? void 0 : t.label
+			}, [n("g", { transform: y.value.transform }, e.map((e) => n("path", {
 				d: e,
-				fill: o > 0 ? "currentColor" : "none",
-				"fill-opacity": o > 0 ? o : void 0
+				pathLength: l,
+				fill: r > 0 ? "currentColor" : "none",
+				"fill-opacity": r > 0 ? r : void 0
 			})))]);
 		};
 	}
 });
 //#endregion
-export { s as LvIcon };
+export { m as LvIcon };