fluekit 1.5.6 → 1.5.71

package/dist/BoxConstraints.d.ts

@@ -1,10 +1,10 @@
 import { CSSProperties } from 'vue';
 declare const BOX_CONSTRAINTS_SYMBOL: unique symbol;
 export interface BoxConstraintsProps {
-    minWidth?: number;
-    maxWidth?: number;
-    minHeight?: number;
-    maxHeight?: number;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
 }
 export type BoxConstraints = BoxConstraintsProps & {
     [BOX_CONSTRAINTS_SYMBOL]?: true;

package/dist/Builder.d.ts

@@ -0,0 +1,38 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * A function that acts as the `setup` function for this component.
+     * It can contain composition API calls (like `inject`, `useMediaQuery`)
+     * and should return a render function (returning VNodeChild).
+     *
+     * Example:
+     * ```ts
+     * () => {
+     *   const mq = useMediaQuery();
+     *   return () => h('div', mq.size.width);
+     * }
+     * ```
+     */
+    builder: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>, any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * A function that acts as the `setup` function for this component.
+     * It can contain composition API calls (like `inject`, `useMediaQuery`)
+     * and should return a render function (returning VNodeChild).
+     *
+     * Example:
+     * ```ts
+     * () => {
+     *   const mq = useMediaQuery();
+     *   return () => h('div', mq.size.width);
+     * }
+     * ```
+     */
+    builder: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/Column.d.ts

@@ -1,4 +1,4 @@
-import { FlexBoxProps } from './FlexProps';
+import { FlexBoxProps, MainAxisSize } from './FlexProps';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -8,7 +8,9 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<FlexBoxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FlexBoxProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<FlexBoxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FlexBoxProps> & Readonly<{}>, {
+    mainAxisSize: MainAxisSize;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/Container.d.ts

@@ -15,6 +15,7 @@ interface Props {
     transform?: string;
     transformAlignment?: Alignment;
     constraints?: BoxConstraints;
+    flex?: number | string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/EdgeInsets.d.ts

@@ -1,33 +1,33 @@
 declare const EDGE_INSETS_SYMBOL: unique symbol;
 export interface EdgeInsetsProps {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-    horizontal?: number;
-    vertical?: number;
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    horizontal?: number | string;
+    vertical?: number | string;
 }
 export type EdgeInsets = EdgeInsetsProps & {
     [EDGE_INSETS_SYMBOL]?: true;
 };
 export declare function EdgeInsets(edgeInsets: EdgeInsetsProps): EdgeInsets;
 export declare namespace EdgeInsets {
-    var all: (value: number) => {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
+    var all: (value: number | string) => {
+        top: string | number;
+        right: string | number;
+        bottom: string | number;
+        left: string | number;
         [EDGE_INSETS_SYMBOL]: true;
     };
-    var symmetric: ({ vertical, horizontal }: {
-        vertical?: number;
-        horizontal?: number;
+    var symmetric: ({ vertical, horizontal, }: {
+        vertical?: number | string;
+        horizontal?: number | string;
     }) => EdgeInsets;
     var only: ({ top, right, bottom, left, }: {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
+        top?: number | string;
+        right?: number | string;
+        bottom?: number | string;
+        left?: number | string;
     }) => EdgeInsets;
     var zero: EdgeInsets;
 }

package/dist/FlexBox.d.ts

@@ -1,4 +1,4 @@
-import { CrossAxisAlignment, FlexBoxProps, MainAxisAlignment } from './FlexProps';
+import { CrossAxisAlignment, FlexBoxProps, MainAxisAlignment, MainAxisSize } from './FlexProps';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -14,6 +14,7 @@ declare const __VLS_component: import('vue').DefineComponent<FlexBoxProps, {}, {
     direction: "row" | "column" | "row-reverse" | "column-reverse" | string;
     gap: number;
     mainAxisAlignment: MainAxisAlignment;
+    mainAxisSize: MainAxisSize;
     crossAxisAlignment: CrossAxisAlignment;
     as: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/FlexProps.d.ts

@@ -27,9 +27,19 @@ export declare const MainAxisAlignment: {
     readonly spaceEvenly: "space-evenly";
 };
 export type MainAxisAlignment = Valueof<typeof MainAxisAlignment> | string;
+/**
+ * MainAxisSize
+ * 对应 Flutter 的 MainAxisSize
+ */
+export declare const MainAxisSize: {
+    readonly min: "min";
+    readonly max: "max";
+};
+export type MainAxisSize = Valueof<typeof MainAxisSize> | string;
 export type FlexBoxProps = {
     direction?: "row" | "column" | "row-reverse" | "column-reverse" | string;
     mainAxisAlignment?: MainAxisAlignment;
+    mainAxisSize?: MainAxisSize;
     crossAxisAlignment?: CrossAxisAlignment;
     wrap?: boolean;
     gap?: number;

package/dist/LayoutBuilder.d.ts

@@ -0,0 +1,24 @@
+import { BoxConstraints } from './BoxConstraints';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            constraints: BoxConstraints;
+        }): any;
+    };
+    refs: {
+        el: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    el: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/MediaQuery.d.ts

@@ -0,0 +1,21 @@
+import { InjectionKey } from 'vue';
+import { EdgeInsets } from './EdgeInsets';
+export declare enum Orientation {
+    portrait = "portrait",
+    landscape = "landscape"
+}
+export interface MediaQueryData {
+    size: {
+        width: number;
+        height: number;
+    };
+    devicePixelRatio: number;
+    platformBrightness: "light" | "dark";
+    orientation: Orientation;
+    disableAnimations: boolean;
+    highContrast: boolean;
+    padding: EdgeInsets;
+    viewInsets: EdgeInsets;
+}
+export declare const MediaQueryKey: InjectionKey<MediaQueryData>;
+export declare function useMediaQuery(): MediaQueryData;

package/dist/Positioned.d.ts

@@ -1,5 +1,4 @@
 import { Props } from './usePosition';
-type __VLS_Props = Omit<Props, "zIndex">;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -9,7 +8,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/Row.d.ts

@@ -1,4 +1,4 @@
-import { FlexBoxProps } from './FlexProps';
+import { FlexBoxProps, MainAxisSize } from './FlexProps';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -12,6 +12,7 @@ declare const __VLS_component: import('vue').DefineComponent<FlexBoxProps, {}, {
     wrap: boolean;
     expanded: boolean;
     mainAxisAlignment: import('./FlexProps').MainAxisAlignment;
+    mainAxisSize: MainAxisSize;
     crossAxisAlignment: import('./FlexProps').CrossAxisAlignment;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/SegmentedControl.d.ts

@@ -1,17 +1,25 @@
 import { BoxDecoration } from './BoxDecoration';
 import { EdgeInsets } from './EdgeInsets';
+import { TextStyle } from './TextStyle';
+import { BorderRadius } from './BorderRadius';
 export interface SegmentedControlItem<T> {
     value: T;
     label: string;
+    disabled?: boolean;
 }
 export interface SegmentedControlProps<T> {
     modelValue: T;
     items: SegmentedControlItem<T>[];
     selectedColor?: string;
     unselectedColor?: string;
+    disabledColor?: string;
     borderColor?: string;
     padding?: EdgeInsets;
     decoration?: BoxDecoration;
+    selectedTextStyle?: TextStyle;
+    unselectedTextStyle?: TextStyle;
+    disabledTextStyle?: TextStyle;
+    borderRadius?: BorderRadius;
 }
 declare const _default: <T extends string | number | boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{

package/dist/Slider.d.ts

@@ -14,9 +14,9 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     onChange?: ((value: number) => any) | undefined;
     "onUpdate:value"?: ((value: number) => any) | undefined;
 }>, {
-    activeColor: string;
     min: number;
     max: number;
+    activeColor: string;
     inactiveColor: string;
     thumbColor: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/index.d.ts

@@ -41,6 +41,9 @@ export { default as Slider } from './Slider';
 export { default as AlertDialog } from './AlertDialog';
 export { default as BottomSheet } from './BottomSheet';
 export { default as SegmentedControl } from './SegmentedControl';
+export { default as Builder } from './Builder';
+export { default as LayoutBuilder } from './LayoutBuilder';
+export { default as MediaQuery } from './MediaQuery';
 export { SnackBar } from './SnackBar';
 export * from './Border';
 export * from './BoxConstraints';
@@ -49,6 +52,7 @@ export * from './BorderRadius';
 export * from './BoxShadow';
 export * from './ButtonStyle';
 export * from './EdgeInsets';
+export * from './MediaQuery';
 export { Alignment as Alignment } from './FlexProps';
 export { StackFit, CrossAxisAlignment, MainAxisAlignment } from './FlexProps';
 export * from './Gradient';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Comment, Fragment, Text, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, render, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, warn, watch, withCtx, withModifiers } from "vue";
+import { Comment, Fragment, Text, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, ref, render, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, useSlots, warn, watch, withCtx, withModifiers } from "vue";
 function isUndefined(e) {
 	return e === void 0;
 }
@@ -37,7 +37,7 @@ var EXCLUDED_VALUES = [
 	"-0%",
 	"-0px",
 	"+0px"
-], nonTransform = (e) => e.endsWith("vw") || e.endsWith("%") || EXCLUDED_VALUES.includes(e);
+], nonTransform = (e) => e.endsWith("vw") || e.endsWith("%") || e.endsWith("PX") || EXCLUDED_VALUES.includes(e);
 function px2vw(e, C = DEFAULT_VW) {
 	if (!canTransform) return isPureNumber(`${e}`) ? `${e}px` : e;
 	if (!(e === void 0 || e == null || typeof e == "number" && !Number.isFinite(e))) {
@@ -198,7 +198,7 @@ var Align_default = /* @__PURE__ */ defineComponent({
 	}
 }), BOX_CONSTRAINTS_SYMBOL = Symbol("boxConstraints"), toVal = (e) => e === Infinity ? void 0 : e;
 function BoxConstraints(e = {}) {
-	let C = Math.max(0, e.minWidth ?? 0), w = Math.max(0, e.minHeight ?? 0), T = Math.max(C, e.maxWidth ?? Infinity), E = Math.max(w, e.maxHeight ?? Infinity);
+	let C = e.minWidth ?? 0, w = e.minHeight ?? 0, T = e.maxWidth ?? Infinity, E = e.maxHeight ?? Infinity;
 	return {
 		minWidth: toVal(C),
 		maxWidth: toVal(T),
@@ -507,6 +507,9 @@ const paddingToStyle = (e) => edgeInsetsToStyle("padding", e), marginToStyle = (
 	spaceBetween: "space-between",
 	spaceAround: "space-around",
 	spaceEvenly: "space-evenly"
+}, MainAxisSize = {
+	min: "min",
+	max: "max"
 }, FlexBoxJustifyMap = {
 	start: "flex-start",
 	end: "flex-end",
@@ -820,7 +823,8 @@ var AnimatedContainer_default = /* @__PURE__ */ defineComponent({
 		clipBehavior: { default: "none" },
 		transform: {},
 		transformAlignment: {},
-		constraints: {}
+		constraints: {},
+		flex: {}
 	},
 	setup(e) {
 		let C = useStyles(), w = useSafeAttrs(), T = useGestureEvents(), D = computed(() => C.value.pointerEvents == "none" ? w.value : {
@@ -839,7 +843,7 @@ var AnimatedContainer_default = /* @__PURE__ */ defineComponent({
 				flexDirection: "column"
 			}), Object.assign(e, alignmentToFlex(j.alignment, "column"))), Object.assign(e, sizeToStyle(j));
 			let w = boxConstraintsToStyle(j.constraints);
-			return isDefined(j.width) && (delete w.minWidth, delete w.maxWidth), isDefined(j.height) && (delete w.minHeight, delete w.maxHeight), Object.assign(e, w), Object.assign(e, paddingToStyle(j.padding)), Object.assign(e, marginToStyle(j.margin)), Object.assign(e, boxDecorationToStyle(j.decoration)), Object.assign(e, A), j.clipBehavior === "antiAlias" && (e.borderRadius = e.borderRadius || "inherit"), e;
+			return isDefined(j.width) && (delete w.minWidth, delete w.maxWidth), isDefined(j.height) && (delete w.minHeight, delete w.maxHeight), Object.assign(e, w), Object.assign(e, paddingToStyle(j.padding)), Object.assign(e, marginToStyle(j.margin)), Object.assign(e, boxDecorationToStyle(j.decoration)), Object.assign(e, A), j.flex !== void 0 && (typeof j.flex == "number" ? e.flex = `${j.flex} 1 0%` : e.flex = j.flex), j.clipBehavior === "antiAlias" && (e.borderRadius = e.borderRadius || "inherit"), e;
 		}), N = computed(() => {
 			let e = {
 				position: "absolute",
@@ -949,7 +953,7 @@ var GestureDetector_default = defineComponent({
 	inheritAttrs: !1,
 	props: { behavior: {
 		type: String,
-		default: "deferToChild"
+		default: "opaque"
 	} },
 	emits: events,
 	setup(e, { slots: C, emit: E }) {
@@ -1067,6 +1071,7 @@ var GestureDetector_default = defineComponent({
 	props: {
 		direction: { default: "row" },
 		mainAxisAlignment: { default: MainAxisAlignment.start },
+		mainAxisSize: { default: MainAxisSize.max },
 		crossAxisAlignment: { default: CrossAxisAlignment.start },
 		wrap: {
 			type: Boolean,
@@ -1083,14 +1088,16 @@ var GestureDetector_default = defineComponent({
 	setup(e) {
 		let C = e, w = useSafeAttrs(), T = computed(() => {
 			let e = ["flex-box", `flex-box-${C.direction}`];
-			return C.expanded && e.push("flex-expanded"), e.join(" ");
+			return C.expanded && e.push("flex-expanded"), C.mainAxisSize === MainAxisSize.min && e.push("main-axis-min"), e.join(" ");
 		}), O = computed(() => {
 			let e = C.mainAxisAlignment, w = C.crossAxisAlignment, T = {
 				display: "flex",
 				flexDirection: C.direction,
 				flexWrap: C.wrap ? "wrap" : "nowrap"
 			};
-			return T.justifyContent = FlexBoxJustifyMap[e] || e, T.alignItems = FlexBoxAlignMap[w] || w, T.gap = px2vw(C.gap), C.expanded && (T.flex = "1", T.width = "100%", T.height = "100%"), C.constraints && Object.assign(T, boxConstraintsToStyle(C.constraints)), T;
+			T.justifyContent = FlexBoxJustifyMap[e] || e, T.alignItems = FlexBoxAlignMap[w] || w, T.gap = px2vw(C.gap);
+			let E = C.direction?.includes("row"), D = C.direction?.includes("column");
+			return C.mainAxisSize === MainAxisSize.min ? (E && (T.width = "fit-content"), D && (T.height = "fit-content")) : (E && (T.width = "100%"), D && (T.height = "100%")), C.expanded && (T.flex = "1", T.width = "100%", T.height = "100%"), C.constraints && Object.assign(T, boxConstraintsToStyle(C.constraints)), T;
 		});
 		return (C, E) => (openBlock(), createBlock(resolveDynamicComponent(e.as), mergeProps({
 			class: T.value,
@@ -1106,6 +1113,7 @@ var GestureDetector_default = defineComponent({
 	props: {
 		direction: {},
 		mainAxisAlignment: {},
+		mainAxisSize: { default: MainAxisSize.max },
 		crossAxisAlignment: {},
 		wrap: { type: Boolean },
 		gap: {},
@@ -1117,6 +1125,7 @@ var GestureDetector_default = defineComponent({
 		return (C, w) => (openBlock(), createBlock(FlexBox_default, {
 			direction: "column",
 			"main-axis-alignment": e.mainAxisAlignment,
+			"main-axis-size": e.mainAxisSize,
 			"cross-axis-alignment": e.crossAxisAlignment,
 			wrap: e.wrap,
 			gap: e.gap,
@@ -1126,6 +1135,7 @@ var GestureDetector_default = defineComponent({
 			_: 3
 		}, 8, [
 			"main-axis-alignment",
+			"main-axis-size",
 			"cross-axis-alignment",
 			"wrap",
 			"gap",
@@ -1572,7 +1582,8 @@ var Positioned_default = /* @__PURE__ */ defineComponent({
 		left: {},
 		right: {},
 		width: {},
-		height: {}
+		height: {},
+		zIndex: {}
 	},
 	setup(e) {
 		let C = e, w = useStackContext();
@@ -1591,6 +1602,7 @@ var Positioned_default = /* @__PURE__ */ defineComponent({
 	props: {
 		direction: {},
 		mainAxisAlignment: { default: "start" },
+		mainAxisSize: { default: MainAxisSize.max },
 		crossAxisAlignment: { default: "center" },
 		wrap: {
 			type: Boolean,
@@ -1608,6 +1620,7 @@ var Positioned_default = /* @__PURE__ */ defineComponent({
 		return (C, w) => (openBlock(), createBlock(FlexBox_default, {
 			direction: "row",
 			"main-axis-alignment": e.mainAxisAlignment,
+			"main-axis-size": e.mainAxisSize,
 			"cross-axis-alignment": e.crossAxisAlignment,
 			wrap: e.wrap,
 			gap: e.gap,
@@ -1618,6 +1631,7 @@ var Positioned_default = /* @__PURE__ */ defineComponent({
 			_: 3
 		}, 8, [
 			"main-axis-alignment",
+			"main-axis-size",
 			"cross-axis-alignment",
 			"wrap",
 			"gap",
@@ -2873,36 +2887,66 @@ var Transform_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @_
 		items: {},
 		selectedColor: { default: "#007AFF" },
 		unselectedColor: { default: "transparent" },
+		disabledColor: { default: "#F5F5F5" },
 		borderColor: { default: "#007AFF" },
 		padding: { default: () => EdgeInsets.symmetric({
 			vertical: 8,
 			horizontal: 16
 		}) },
-		decoration: {}
+		decoration: {},
+		selectedTextStyle: {},
+		unselectedTextStyle: {},
+		disabledTextStyle: {},
+		borderRadius: { default: () => BorderRadius.circular(4) }
 	},
 	emits: ["update:modelValue", "change"],
 	setup(e, { emit: w }) {
 		let T = e, O = w, A = (e) => {
-			e !== T.modelValue && (O("update:modelValue", e), O("change", e));
+			e.disabled || e.value !== T.modelValue && (O("update:modelValue", e.value), O("change", e.value));
 		}, j = computed(() => T.decoration ? T.decoration : BoxDecoration({
 			border: Border.all({
 				color: T.borderColor,
 				width: 1
 			}),
-			borderRadius: BorderRadius.circular(4)
+			borderRadius: T.borderRadius
 		})), P = (e, C) => {
-			let w = e === T.modelValue, E = C === T.items.length - 1;
-			return BoxDecoration({
-				color: w ? T.selectedColor : T.unselectedColor,
-				border: E ? void 0 : Border.only({ right: BorderSide({
-					color: T.borderColor,
+			let w = e.value === T.modelValue, E = C === T.items.length - 1, D = C === 0, O = BorderRadius.zero;
+			D ? O = BorderRadius.only({
+				topLeft: T.borderRadius.topLeft,
+				bottomLeft: T.borderRadius.bottomLeft
+			}) : E && (O = BorderRadius.only({
+				topRight: T.borderRadius.topRight,
+				bottomRight: T.borderRadius.bottomRight
+			}));
+			let k = w ? T.selectedColor : T.unselectedColor;
+			return e.disabled && (k = T.disabledColor), BoxDecoration({
+				color: k,
+				borderRadius: O,
+				border: Border.only({ right: BorderSide({
+					color: E ? "transparent" : T.borderColor,
 					width: 1
 				}) })
 			});
-		}, F = (e) => TextStyle({
-			color: e === T.modelValue ? "#FFFFFF" : T.borderColor,
-			fontSize: 13
-		});
+		}, F = (e) => {
+			let C = e.value === T.modelValue, w = e.disabled, E = TextStyle({
+				color: C ? "#FFFFFF" : T.borderColor,
+				fontSize: 13
+			});
+			return w ? T.disabledTextStyle ? {
+				...E,
+				...T.disabledTextStyle,
+				color: "#999999"
+			} : {
+				...E,
+				color: "#999999"
+			} : C && T.selectedTextStyle ? {
+				...E,
+				...T.selectedTextStyle
+			} : !C && T.unselectedTextStyle ? {
+				...E,
+				...T.unselectedTextStyle
+			} : E;
+		};
 		return (w, T) => (openBlock(), createBlock(Container_default, {
 			decoration: j.value,
 			"clip-behavior": "hardEdge"
@@ -2910,18 +2954,18 @@ var Transform_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @_
 			default: withCtx(() => [createVNode(Row_default, null, {
 				default: withCtx(() => [(openBlock(!0), createElementBlock(Fragment, null, renderList(e.items, (C, T) => (openBlock(), createBlock(GestureDetector_default, {
 					key: T,
-					onTap: (e) => A(C.value)
+					onTap: (e) => A(C)
 				}, {
 					default: withCtx(() => [createVNode(Container_default, {
 						padding: e.padding,
-						decoration: P(C.value, T),
+						decoration: P(C, T),
 						alignment: "center"
 					}, {
 						default: withCtx(() => [renderSlot(w.$slots, "label", {
 							item: C,
 							selected: C.value === e.modelValue,
 							index: T
-						}, () => [createVNode(Text_default, { style: normalizeStyle(F(C.value)) }, {
+						}, () => [createVNode(Text_default, { style: normalizeStyle(F(C)) }, {
 							default: withCtx(() => [createTextVNode(toDisplayString(C.label), 1)]),
 							_: 2
 						}, 1032, ["style"])])]),
@@ -2934,6 +2978,88 @@ var Transform_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @_
 			_: 3
 		}, 8, ["decoration"]));
 	}
+}), Builder_default = defineComponent({
+	name: "Builder",
+	props: { builder: {
+		type: Function,
+		required: !0
+	} },
+	setup(e) {
+		return e.builder();
+	}
+}), LayoutBuilder_default = /* @__PURE__ */ defineComponent({
+	__name: "LayoutBuilder",
+	setup(e) {
+		let C = ref(null), w = shallowRef(null), T = null, E = {
+			width: "100%",
+			height: "100%",
+			display: "block"
+		};
+		return onMounted(() => {
+			C.value && (T = new ResizeObserver((e) => {
+				for (let C of e) {
+					let e = C.contentRect.width, T = C.contentRect.height;
+					w.value = BoxConstraints.tight({
+						width: e,
+						height: T
+					});
+				}
+			}), T.observe(C.value));
+		}), onUnmounted(() => {
+			T?.disconnect();
+		}), (e, T) => (openBlock(), createElementBlock("div", {
+			ref_key: "el",
+			ref: C,
+			class: "fluekit-layout-builder",
+			style: E
+		}, [w.value ? renderSlot(e.$slots, "default", {
+			key: 0,
+			constraints: w.value
+		}) : createCommentVNode("", !0)], 512));
+	}
+});
+let Orientation = /* @__PURE__ */ function(e) {
+	return e.portrait = "portrait", e.landscape = "landscape", e;
+}({});
+const MediaQueryKey = Symbol("MediaQuery");
+var globalState = reactive({
+	size: {
+		width: 0,
+		height: 0
+	},
+	devicePixelRatio: 1,
+	platformBrightness: "light",
+	orientation: Orientation.portrait,
+	disableAnimations: !1,
+	highContrast: !1,
+	padding: EdgeInsets.zero,
+	viewInsets: EdgeInsets.zero
+}), listenersAttached = !1, updateGlobalState = () => {
+	if (typeof window > "u") return;
+	let e = window.innerWidth, C = window.innerHeight;
+	globalState.size = {
+		width: e,
+		height: C
+	}, globalState.devicePixelRatio = window.devicePixelRatio || 1, globalState.orientation = e > C ? Orientation.landscape : Orientation.portrait, globalState.platformBrightness = window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light", globalState.disableAnimations = !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, globalState.highContrast = !!window.matchMedia?.("(prefers-contrast: more)").matches;
+}, attachListeners = () => {
+	typeof window > "u" || listenersAttached || (window.addEventListener("resize", updateGlobalState), [
+		"(prefers-color-scheme: dark)",
+		"(prefers-reduced-motion: reduce)",
+		"(prefers-contrast: more)"
+	].forEach((e) => {
+		let C = window.matchMedia?.(e);
+		C?.addEventListener ? C.addEventListener("change", updateGlobalState) : C?.addListener && C.addListener(updateGlobalState);
+	}), updateGlobalState(), listenersAttached = !0);
+};
+function useMediaQuery() {
+	return attachListeners(), inject(MediaQueryKey, globalState);
+}
+var MediaQuery_default = /* @__PURE__ */ defineComponent({
+	__name: "MediaQuery",
+	props: { data: {} },
+	setup(e) {
+		return provide(MediaQueryKey, e.data), (e, C) => renderSlot(e.$slots, "default");
+	}
 }), _hoisted_1 = { class: "snackbar-overlay" }, SnackBarComponent_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "SnackBarComponent",
 	props: {
@@ -3027,4 +3153,4 @@ var Transform_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @_
 	}
 };
 setTransform(!1);
-export { AlertDialog_default as AlertDialog, Align_default as Align, Alignment, AnimatedContainer_default as AnimatedContainer, AnimatedOpacity_default as AnimatedOpacity, AssetImage, BlurStyle, Border, BorderRadius, BorderSide, BottomSheet_default as BottomSheet, Box_default as Box, BoxAlignment, BoxConstraints, BoxDecoration, BoxFit, BoxShadow, BoxShape, Button_default as Button, ButtonStyle, Card_default as Card, Center_default as Center, Checkbox_default as Checkbox, Clip, ClipOval_default as ClipOval, ClipRRect_default as ClipRRect, Column_default as Column, Container_default as Container, CrossAxisAlignment, DecorationImage, Divider_default as Divider, EdgeInsets, Expanded_default as Expanded, Fixed_default as Fixed, FontStyle, FontWeight, GestureDetector_default as GestureDetector, GridView_default as GridView, IgnorePointer_default as IgnorePointer, Image_default as Image, InkWell_default as InkWell, LinearGradient, ListTile_default as ListTile, ListView_default as ListView, MainAxisAlignment, Matrix4, MemoryImage, NetworkImage, Opacity_default as Opacity, OutlineInputBorder, Padding_default as Padding, Positioned_default as Positioned, RadialGradient, Radio_default as Radio, Row_default as Row, SafeArea_default as SafeArea, ScrollView_default as ScrollView, SegmentedControl_default as SegmentedControl, Size, SizedBox_default as SizedBox, Slider_default as Slider, SnackBar, Spacer_default as Spacer, Stack_default as Stack, StackFit, Sticky_default as Sticky, Switch_default as Switch, Text_default as Text, TextAlign, TextArea_default as TextArea, TextBaseline, TextDecoration, TextDecorationStyle, TextDirection, TextField_default as TextField, TextOverflow, TextStyle, TileMode, Transform_default as Transform, UnderlineInputBorder, Wrap_default as Wrap, borderRadiusToStyle, borderSideToStyle, borderToStyle, boxConstraintsToStyle, boxDecorationToStyle, boxShadowToCSS, buttonStyleToStyle, createAssetImage, decorationImageToStyle, edgeInsetsToStyle, isBorderRadius, isBorderSide, isBorders, isBoxConstraints, isBoxDecoration, isBoxShadow, isEdgeInsets, isImageProvider, isTextStyle, marginToStyle, matrix4ToCSSStyle, normalizeSrc, paddingToStyle, px2vw, setAssetBaseURL, setBaseUrl, setDefaultVW, setTransform, sizeToStyle, toCSSStyle as textStyleToCSSStyle, toCSSStyle };
+export { AlertDialog_default as AlertDialog, Align_default as Align, Alignment, AnimatedContainer_default as AnimatedContainer, AnimatedOpacity_default as AnimatedOpacity, AssetImage, BlurStyle, Border, BorderRadius, BorderSide, BottomSheet_default as BottomSheet, Box_default as Box, BoxAlignment, BoxConstraints, BoxDecoration, BoxFit, BoxShadow, BoxShape, Builder_default as Builder, Button_default as Button, ButtonStyle, Card_default as Card, Center_default as Center, Checkbox_default as Checkbox, Clip, ClipOval_default as ClipOval, ClipRRect_default as ClipRRect, Column_default as Column, Container_default as Container, CrossAxisAlignment, DecorationImage, Divider_default as Divider, EdgeInsets, Expanded_default as Expanded, Fixed_default as Fixed, FontStyle, FontWeight, GestureDetector_default as GestureDetector, GridView_default as GridView, IgnorePointer_default as IgnorePointer, Image_default as Image, InkWell_default as InkWell, LayoutBuilder_default as LayoutBuilder, LinearGradient, ListTile_default as ListTile, ListView_default as ListView, MainAxisAlignment, Matrix4, MediaQuery_default as MediaQuery, MediaQueryKey, MemoryImage, NetworkImage, Opacity_default as Opacity, Orientation, OutlineInputBorder, Padding_default as Padding, Positioned_default as Positioned, RadialGradient, Radio_default as Radio, Row_default as Row, SafeArea_default as SafeArea, ScrollView_default as ScrollView, SegmentedControl_default as SegmentedControl, Size, SizedBox_default as SizedBox, Slider_default as Slider, SnackBar, Spacer_default as Spacer, Stack_default as Stack, StackFit, Sticky_default as Sticky, Switch_default as Switch, Text_default as Text, TextAlign, TextArea_default as TextArea, TextBaseline, TextDecoration, TextDecorationStyle, TextDirection, TextField_default as TextField, TextOverflow, TextStyle, TileMode, Transform_default as Transform, UnderlineInputBorder, Wrap_default as Wrap, borderRadiusToStyle, borderSideToStyle, borderToStyle, boxConstraintsToStyle, boxDecorationToStyle, boxShadowToCSS, buttonStyleToStyle, createAssetImage, decorationImageToStyle, edgeInsetsToStyle, isBorderRadius, isBorderSide, isBorders, isBoxConstraints, isBoxDecoration, isBoxShadow, isEdgeInsets, isImageProvider, isTextStyle, marginToStyle, matrix4ToCSSStyle, normalizeSrc, paddingToStyle, px2vw, setAssetBaseURL, setBaseUrl, setDefaultVW, setTransform, sizeToStyle, toCSSStyle as textStyleToCSSStyle, toCSSStyle, useMediaQuery };

package/dist/usePosition.d.ts

@@ -15,5 +15,4 @@ export interface Props {
     /** z-index 层级 */
     zIndex?: number;
 }
-export declare function positionToStyle(props: Props, position?: "absolute" | "fixed" | "sticky" | "relative"): CSSProperties;
 export declare function usePositionStyle(props: Props, position?: "absolute" | "fixed" | "sticky" | "relative"): import('vue').ComputedRef<CSSProperties>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluekit",
-  "version": "1.5.6",
+  "version": "1.5.71",
   "description": "A Flutter-style Layout UI kit for Vue",
   "homepage": "https://fi2zz.github.io/fluekit/",
   "repository": {