fluekit 1.1.0 → 1.2.0

package/dist/AnimatedContainer.d.ts

@@ -3,8 +3,8 @@ import { BoxDecoration } from './BoxDecoration';
 import { EdgeInsets } from './EdgeInsets';
 import { Alignment } from './FlexProps';
 interface Props {
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
     padding?: EdgeInsets;
     margin?: EdgeInsets;
     decoration?: BoxDecoration;

package/dist/Border.d.ts

@@ -3,7 +3,7 @@ export type BorderStyleType = "none" | "solid" | "dashed" | "dotted" | "double";
 declare const BORDER_SIDE_SYMBOL: unique symbol;
 declare const BORDERS_SYMBOL: unique symbol;
 export type BorderSide = {
-    width?: number;
+    width?: number | string;
     color?: string;
     style?: BorderStyleType;
     [BORDER_SIDE_SYMBOL]?: true;
@@ -15,20 +15,8 @@ export interface Borders {
     bottom?: BorderSide;
     [BORDERS_SYMBOL]?: true;
 }
-export declare function Border(side: Omit<BorderSide, typeof BORDER_SIDE_SYMBOL>): BorderSide;
-export declare namespace Border {
-    var all: ({ color, width, style, }?: {
-        color?: string;
-        width?: number;
-        style?: BorderStyleType;
-    }) => {
-        top: BorderSide;
-        bottom: BorderSide;
-        left: BorderSide;
-        right: BorderSide;
-        [BORDERS_SYMBOL]: true;
-    };
-}
+export declare function BorderSide(side: Omit<BorderSide, typeof BORDER_SIDE_SYMBOL>): BorderSide;
+export declare const Border: typeof BorderSide;
 /**
  * 类型守卫：检查对象是否通过 Border 构造函数创建（单个边框边）
  */
@@ -43,5 +31,6 @@ export interface Borders {
     right?: BorderSide;
     bottom?: BorderSide;
 }
+export declare function borderSideToStyle(side?: BorderSide): CSSProperties;
 export declare function borderToStyle(border: Borders): CSSProperties;
 export {};

package/dist/Button.d.ts

@@ -0,0 +1,30 @@
+import { ButtonStyle } from './ButtonStyle';
+interface Props {
+    disabled?: boolean;
+    style?: ButtonStyle;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "long-press": () => any;
+    pressed: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onLong-press"?: (() => any) | undefined;
+    onPressed?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, 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 & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ButtonStyle.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'vue';
+import { Alignment } from './Alignment';
+import { BorderSide } from './Border';
+import { BorderRadius } from './BorderRadius';
+import { EdgeInsets } from './EdgeInsets';
+import { SizeType } from './Size';
+export interface ButtonStyle {
+    backgroundColor?: string;
+    foregroundColor?: string;
+    overlayColor?: string;
+    shadowColor?: string;
+    elevation?: number;
+    padding?: EdgeInsets;
+    minimumSize?: SizeType;
+    maximumSize?: SizeType;
+    fixedSize?: SizeType;
+    side?: BorderSide;
+    shape?: BorderRadius;
+    alignment?: Alignment;
+}
+export declare const ButtonStyle: (style: ButtonStyle) => ButtonStyle;
+export declare function buttonStyleToStyle(style?: ButtonStyle): CSSProperties;

package/dist/Container.d.ts

@@ -3,8 +3,8 @@ import { Alignment } from './Alignment';
 import { BoxDecoration } from './BoxDecoration';
 import { EdgeInsets } from './EdgeInsets';
 interface Props {
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
     padding?: EdgeInsets;
     margin?: EdgeInsets;
     decoration?: BoxDecoration;

package/dist/Expanded.d.ts

@@ -1,8 +1,8 @@
 interface Props {
     flex?: number;
     alignSelf?: "auto" | "start" | "end" | "center" | "stretch" | "baseline";
-    minSize?: number;
-    maxSize?: number;
+    minSize?: number | string;
+    maxSize?: number | string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/FlexItem.d.ts

@@ -3,8 +3,8 @@ interface Props {
     expanded?: boolean;
     flexible?: boolean;
     alignSelf?: "auto" | "start" | "end" | "center" | "stretch" | "baseline";
-    minSize?: number;
-    maxSize?: number;
+    minSize?: number | string;
+    maxSize?: number | string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/Size.d.ts

@@ -1,6 +1,6 @@
 export interface SizeType {
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
 }
 export type Size = SizeType;
 export declare function Size(props: SizeType): SizeType;

package/dist/SizedBox.d.ts

@@ -1,6 +1,6 @@
 interface Props {
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/TextStyle.d.ts

@@ -99,7 +99,7 @@ export interface TextStyleProps {
     letterSpacing?: number;
     wordSpacing?: number;
     textBaseline?: TextBaseline;
-    height?: number;
+    height?: number | string;
     leadingDistribution?: any;
     locale?: any;
     foreground?: CSSProperties;
@@ -122,9 +122,9 @@ export type TextStyle = TextStyleProps & {
     [TEXT_STYLE_SYMBOL]?: true;
 };
 export declare function toCSSStyle(props?: TextStyleProps): CSSProperties;
+export { toCSSStyle as textStyleToCSSStyle };
 export declare function TextStyle(initial?: TextStyleProps, cloned?: TextStyleProps): TextStyle;
 /**
  * 类型守卫：检查对象是否通过 TextStyle 构造函数创建
  */
 export declare function isTextStyle(value: any): value is TextStyle;
-export {};

package/dist/index.css

@@ -1,2 +1,2 @@
-.flutter-list-view[data-v-7ba20c73]{flex-direction:column;display:flex}.list-view-shrink-wrap[data-v-7ba20c73]{flex:none}.flutter-stack[data-v-aefe47c2]>*{grid-area:1/1/2/2}.flutter-transform[data-v-7e66ebaa]{box-sizing:border-box}
+.fluekit-button[data-v-a5efef4c]{appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;text-align:inherit;box-sizing:border-box;background:0 0;border:0;outline:0;margin:0;padding:0}.fluekit-button[data-v-a5efef4c]:disabled{cursor:default}.flutter-list-view[data-v-7ba20c73]{flex-direction:column;display:flex}.list-view-shrink-wrap[data-v-7ba20c73]{flex:none}.flutter-stack[data-v-aefe47c2]>*{grid-area:1/1/2/2}.flutter-transform[data-v-7e66ebaa]{box-sizing:border-box}
 /*$vite$:1*/

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Align } from './Align';
 export { default as AnimatedContainer } from './AnimatedContainer';
 export { default as AnimatedOpacity } from './AnimatedOpacity';
+export { default as Button } from './Button';
 export { default as Center } from './Center';
 export { default as Column } from './Column';
 export { default as Container } from './Container';
@@ -27,6 +28,7 @@ export * from './BoxConstraints';
 export * from './BoxDecoration';
 export * from './BorderRadius';
 export * from './BoxShadow';
+export * from './ButtonStyle';
 export * from './EdgeInsets';
 export * from './FlexProps';
 export { Alignment as Alignment } from './FlexProps';

package/dist/index.js

@@ -235,7 +235,7 @@ function boxConstraintsToStyle(o) {
 	};
 }
 var BORDER_SIDE_SYMBOL = Symbol("borderSide"), BORDERS_SYMBOL = Symbol("borders");
-function Border(o) {
+function BorderSide(o) {
 	return {
 		width: o.width ? o.width : 1,
 		color: o.color || "#000",
@@ -243,6 +243,7 @@ function Border(o) {
 		[BORDER_SIDE_SYMBOL]: !0
 	};
 }
+const Border = BorderSide;
 Border.all = ({ color: o, width: F, style: I } = {}) => {
 	let L = Border({
 		color: o,
@@ -268,6 +269,11 @@ function borderSideToString(o) {
 	let F = [], { width: I, color: L, style: R } = o;
 	return I && F.push(I > 1 ? px2vw(I) : I + "px"), L && F.push(L), R && F.push(R), `${F.join(" ")}`;
 }
+function borderSideToStyle(o) {
+	if (!o) return {};
+	let F = borderSideToString(o);
+	return F ? { border: F } : {};
+}
 function borderToStyle(o) {
 	if (o) return {
 		borderLeft: borderSideToString(o.left),
@@ -789,7 +795,89 @@ var AnimatedContainer_default = /* @__PURE__ */ defineComponent({
 		});
 		return () => h(StyleProvider, { style: I.value }, F);
 	}
-}), Center_default = /* @__PURE__ */ defineComponent({
+});
+const ButtonStyle = (o) => o;
+function buttonStyleToStyle(o) {
+	if (!o) return {};
+	let F = {};
+	if (o.backgroundColor && (F.backgroundColor = o.backgroundColor), o.foregroundColor && (F.color = o.foregroundColor), o.padding && Object.assign(F, paddingToStyle(o.padding)), o.minimumSize) {
+		let { width: I, height: L } = sizeToStyle(o.minimumSize) || {};
+		I && (F.minWidth = I), L && (F.minHeight = L);
+	}
+	if (o.maximumSize) {
+		let { width: I, height: L } = sizeToStyle(o.maximumSize) || {};
+		I && (F.maxWidth = I), L && (F.maxHeight = L);
+	}
+	if (o.fixedSize) {
+		let { width: I, height: L } = sizeToStyle(o.fixedSize) || {};
+		I && (F.width = I, F.minWidth = I, F.maxWidth = I), L && (F.height = L, F.minHeight = L, F.maxHeight = L);
+	}
+	return o.side && Object.assign(F, borderSideToStyle(o.side)), o.shape && Object.assign(F, borderRadiusToStyle(o.shape)), o.elevation && (F.boxShadow = `0px ${px2vw(o.elevation)} ${px2vw(o.elevation * 2)} ${o.shadowColor || "rgba(0,0,0,0.2)"}`), o.alignment && (F.display = "flex", F.flexDirection = "column", Object.assign(F, alignmentToFlex(o.alignment, "column"))), F;
+}
+function useChildren(L) {
+	if (!L) return [];
+	let R = L();
+	return R ? R.filter((L) => !(L.type === Comment || L.type === Text && typeof L.children == "string" && !L.children.trim() || L.type === Fragment && Array.isArray(L.children) && L.children.length === 0)) : [];
+}
+function useChild(o) {
+	let F = useChildren(o);
+	return F.length === 0 ? null : F[0];
+}
+var GestureDetector_default = defineComponent({
+	name: "GestureDetector",
+	inheritAttrs: !1,
+	props: { behavior: {
+		type: String,
+		default: "deferToChild"
+	} },
+	emits: events,
+	setup(o, { slots: F, emit: R }) {
+		let z = useGestures({ emit: R });
+		return provideGesture(z, o.behavior), () => {
+			let o = useChild(F.default);
+			return o ? o.type === Text ? h("span", z, [o]) : isHtmlTag(o) ? cloneVNode(o, z) : o : null;
+		};
+	}
+}), _hoisted_1$1 = ["disabled"], Button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: !1,
+	__name: "Button",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		style: {}
+	},
+	emits: ["pressed", "long-press"],
+	setup(o, { emit: F }) {
+		let I = o, L = F, B = useStyles(), V = useSafeAttrs(), U = useGestureEvents(), W = computed(() => B.value.pointerEvents == "none" ? V.value : {
+			...V.value,
+			...U || {}
+		}), G = useGestureStyle(), K = computed(() => {
+			let o = { position: "relative" };
+			return Object.assign(o, B.value), Object.assign(o, buttonStyleToStyle(I.style)), Object.assign(o, G), o;
+		}), J = () => {
+			I.disabled || L("pressed");
+		}, Y = () => {
+			I.disabled || L("long-press");
+		};
+		return (F, I) => (openBlock(), createBlock(GestureDetector_default, {
+			onTap: J,
+			onLongPress: Y
+		}, {
+			default: withCtx(() => [createElementVNode("button", mergeProps({
+				class: "fluekit-button",
+				style: K.value,
+				disabled: o.disabled
+			}, W.value), [renderSlot(F.$slots, "default", {}, void 0, !0)], 16, _hoisted_1$1)]),
+			_: 3
+		}));
+	}
+}), __plugin_vue_export_helper_default = (o, F) => {
+	let I = o.__vccOpts || o;
+	for (let [o, L] of F) I[o] = L;
+	return I;
+}, Button_default = /* @__PURE__ */ __plugin_vue_export_helper_default(Button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a5efef4c"]]), Center_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: !1,
 	__name: "Center",
 	props: {
@@ -1001,7 +1089,7 @@ function usePositionStyle(o, F = "absolute") {
 		return I.top = px2vw(o.top), I.bottom = px2vw(o.bottom), I.left = px2vw(o.left), I.right = px2vw(o.right), I.width = px2vw(o.width), I.height = px2vw(o.height), I.zIndex = o.zIndex, I;
 	});
 }
-var Fixed_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Fixed_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: !1,
 	__name: "Fixed",
 	props: {
@@ -1020,36 +1108,7 @@ var Fixed_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			style: normalizeStyle(unref(F))
 		}, [renderSlot(o.$slots, "default", {}, void 0, !0)], 4));
 	}
-}), __plugin_vue_export_helper_default = (o, F) => {
-	let I = o.__vccOpts || o;
-	for (let [o, L] of F) I[o] = L;
-	return I;
-}, Fixed_default = /* @__PURE__ */ __plugin_vue_export_helper_default(Fixed_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b47757ec"]]);
-function useChildren(L) {
-	if (!L) return [];
-	let R = L();
-	return R ? R.filter((L) => !(L.type === Comment || L.type === Text && typeof L.children == "string" && !L.children.trim() || L.type === Fragment && Array.isArray(L.children) && L.children.length === 0)) : [];
-}
-function useChild(o) {
-	let F = useChildren(o);
-	return F.length === 0 ? null : F[0];
-}
-var GestureDetector_default = defineComponent({
-	name: "GestureDetector",
-	inheritAttrs: !1,
-	props: { behavior: {
-		type: String,
-		default: "deferToChild"
-	} },
-	emits: events,
-	setup(o, { slots: F, emit: R }) {
-		let z = useGestures({ emit: R });
-		return provideGesture(z, o.behavior), () => {
-			let o = useChild(F.default);
-			return o ? o.type === Text ? h("span", z, [o]) : isHtmlTag(o) ? cloneVNode(o, z) : o : null;
-		};
-	}
-}), ScrollView_default = /* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-b47757ec"]]), ScrollView_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: !1,
 	__name: "ScrollView",
 	props: {
@@ -1638,4 +1697,4 @@ var Text_default = /* @__PURE__ */ defineComponent({
 	}
 });
 setTransform(!1);
-export { Align_default as Align, Alignment, AnimatedContainer_default as AnimatedContainer, AnimatedOpacity_default as AnimatedOpacity, AssetImage, BlurStyle, Border, BorderRadius, BoxAlignment, BoxConstraints, BoxDecoration, BoxFit, BoxShadow, BoxShape, Center_default as Center, Clip, Column_default as Column, Container_default as Container, CrossAxisAlignment, DecorationImage, EdgeInsets, Expanded_default as Expanded, Fixed_default as Fixed, FlexBoxAlignMap, FlexBoxJustifyMap, FontStyle, FontWeight, GestureDetector_default as GestureDetector, GridView_default as GridView, IgnorePointer_default as IgnorePointer, LinearGradient, ListView_default as ListView, MainAxisAlignment, NetworkImage, Opacity_default as Opacity, Padding_default as Padding, Positioned_default as Positioned, RadialGradient, Row_default as Row, SafeArea_default as SafeArea, ScrollView_default as ScrollView, Size, SizedBox_default as SizedBox, Stack_default as Stack, StackFit, Sticky_default as Sticky, Text_default as Text, TextAlign, TextBaseline, TextDecoration, TextDecorationStyle, TextDirection, TextOverflow, TextStyle, TileMode, Transform_default as Transform, Wrap_default as Wrap, alignmentToFlex, alignmentToOrigin, alignmentToStyle, borderRadiusToStyle, borderToStyle, boxConstraintsToStyle, boxDecorationToStyle, boxShadowToCSS, decorationImageToStyle, edgeInsetsToStyle, isBorderRadius, isBorderSide, isBorders, isBoxConstraints, isBoxDecoration, isBoxShadow, isEdgeInsets, isTextStyle, marginToStyle, normalizeSrc, paddingToStyle, px2vw, setBaseUrl, setDefaultVW, setTransform, sizeToStyle, toCSSStyle };
+export { Align_default as Align, Alignment, AnimatedContainer_default as AnimatedContainer, AnimatedOpacity_default as AnimatedOpacity, AssetImage, BlurStyle, Border, BorderRadius, BorderSide, BoxAlignment, BoxConstraints, BoxDecoration, BoxFit, BoxShadow, BoxShape, Button_default as Button, ButtonStyle, Center_default as Center, Clip, Column_default as Column, Container_default as Container, CrossAxisAlignment, DecorationImage, EdgeInsets, Expanded_default as Expanded, Fixed_default as Fixed, FlexBoxAlignMap, FlexBoxJustifyMap, FontStyle, FontWeight, GestureDetector_default as GestureDetector, GridView_default as GridView, IgnorePointer_default as IgnorePointer, LinearGradient, ListView_default as ListView, MainAxisAlignment, NetworkImage, Opacity_default as Opacity, Padding_default as Padding, Positioned_default as Positioned, RadialGradient, Row_default as Row, SafeArea_default as SafeArea, ScrollView_default as ScrollView, Size, SizedBox_default as SizedBox, Stack_default as Stack, StackFit, Sticky_default as Sticky, Text_default as Text, TextAlign, TextBaseline, TextDecoration, TextDecorationStyle, TextDirection, TextOverflow, TextStyle, TileMode, Transform_default as Transform, Wrap_default as Wrap, alignmentToFlex, alignmentToOrigin, alignmentToStyle, borderRadiusToStyle, borderSideToStyle, borderToStyle, boxConstraintsToStyle, boxDecorationToStyle, boxShadowToCSS, buttonStyleToStyle, decorationImageToStyle, edgeInsetsToStyle, isBorderRadius, isBorderSide, isBorders, isBoxConstraints, isBoxDecoration, isBoxShadow, isEdgeInsets, isTextStyle, marginToStyle, normalizeSrc, paddingToStyle, px2vw, setBaseUrl, setDefaultVW, setTransform, sizeToStyle, toCSSStyle as textStyleToCSSStyle, toCSSStyle };

package/dist/usePosition.d.ts

@@ -1,17 +1,17 @@
 import { CSSProperties } from 'vue';
 export interface Props {
     /** 距离顶部的距离 */
-    top?: number;
+    top?: number | string;
     /** 距离底部的距离 */
-    bottom?: number;
+    bottom?: number | string;
     /** 距离左侧的距离 */
-    left?: number;
+    left?: number | string;
     /** 距离右侧的距离 */
-    right?: number;
+    right?: number | string;
     /** 宽度 */
-    width?: number;
+    width?: number | string;
     /** 高度 */
-    height?: number;
+    height?: number | string;
     /** z-index 层级 */
     zIndex?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluekit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A Flutter-style Layout UI kit for Vue",
   "repository": {
     "type": "git",