@thestarweb/ui 1.6.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thestarweb/ui",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "A UI lib",
   "scripts": {
     "build": "vue-cli-service build --target lib --name star-ui --dest dist/ src/main.ts",

package/src/components/button.vue

@@ -27,8 +27,8 @@ export default class SuButton extends Vue {
 <style>
 .star-ui-button{
 	border-width: 1px;
-}
-.star-ui-button.star-ui-size-mini{
-	border-radius:2px;
+	cursor: pointer;
+	background: var(--star-ui-backgorund-color);
+	color: var(--star-ui-font-color);
 }
 </style>

package/src/components/common/base-popper.vue

@@ -1,6 +1,6 @@
 <template>
-	<teleport :to="'#'+id">
-		<div>
+	<teleport to="body">
+		<div ref="root" :class="['star-ui-base-popper', ...ctrlClass]" :style="{visibility: visible ? '' : 'hidden', ...baseStyle, ...style}">
 			<div class="star-ui-popper-background" v-if="isMobile" @click="$emit('out-click')"></div>
 			<slot></slot>
 		</div>
@@ -38,11 +38,18 @@ let nowId=0;
 	watch:{
 		visible(){
 			this._updateVisible();
+		},
+		isMobile(){
+			if(this.syncRequestId)cancelAnimationFrame(this.syncRequestId);
+			this.updatePos();
 		}
 	},
 	// inject: ['$suControl']
 })
 export default class SuButton extends Vue {
+	declare $refs: {
+		root:HTMLDivElement;
+	};
 	@Prop({
 		type:Object
 	})
@@ -52,16 +59,6 @@ export default class SuButton extends Vue {
 	private updateType!:string;
 	private visible!:boolean;
 	@SuViewCtrlInjectIsMobile readonly isMobile!:false;
-	beforeCreate():void{
-		this.div=document.createElement("div");
-		document.body.append(this.div);
-		this.id="star-ui-popper-"+nowId++;
-		this.div.id=this.id;
-		this.div.style.position="fixed";
-	}
-	unmounted():void{
-		document.body.removeChild(this.div);
-	}
 	mounted():void{
 		window.addEventListener("click",this._clickCheck);
 		this._updateVisible();
@@ -73,7 +70,7 @@ export default class SuButton extends Vue {
 	_clickCheck(ev:MouseEvent):boolean{
 		var dom=ev.target;
 		while(dom&&dom!=document){
-			if(dom==this.div||(this.fromItem&&dom==((this.fromItem instanceof HTMLElement)?this.fromItem:this.fromItem.$el))){
+			if(dom==this.$refs.root||(this.fromItem&&dom==((this.fromItem instanceof HTMLElement)?this.fromItem:this.fromItem.$el))){
 				return false;
 			}
 			dom=(dom as HTMLElement).parentElement;
@@ -83,26 +80,24 @@ export default class SuButton extends Vue {
 	private syncRequestId!:number;
 	_updateVisible():void{
 		if(this.visible){
-			this.div.style.display="";
 			this.updatePos();
 		}else{
-			this.div.style.display="none";
 			if(this.syncRequestId)cancelAnimationFrame(this.syncRequestId);
 		}
 	}
 	@SuViewCtrlInjectClassName
 	readonly ctrlClass!:string[];
+	// eslint-disable-next-line
+	private baseStyle:Record<string, any>={};
 	updatePos():void{
 		if(this.fromItem){
+			this.baseStyle={};
 			let dom=(this.fromItem instanceof HTMLElement)?this.fromItem:this.fromItem.$el;
 			if(this.isMobile){
-				this.div.style.bottom="0";
-				this.div.style.left="0";
-				this.div.style.width="100%";
-				// this.div.style.height="100%";
-				this.div.className=this.ctrlClass.join(' ');
+				this.baseStyle.bottom="0";
+				this.baseStyle.left="0";
+				this.baseStyle.width="100%";
 			}else{
-				this.div.className=this.ctrlClass.join(' ');
 				const height=dom.clientHeight;
 				let top=0,left=0;
 				while(dom&&dom!=document){
@@ -111,8 +106,8 @@ export default class SuButton extends Vue {
 					dom=dom.offsetParent;
 				}
 				top+=height;
-				this.div.style.top=top+"px";
-				this.div.style.left=left+"px";
+				this.baseStyle.top=top+"px";
+				this.baseStyle.left=left+"px";
 				if(this.updateType=="v-sync"){
 					this.syncRequestId=requestAnimationFrame(this.updatePos);
 				}
@@ -123,6 +118,9 @@ export default class SuButton extends Vue {
 </script>
 
 <style>
+.star-ui-base-popper{
+	position: fixed;
+}
 .star-ui-popper-background{
 	position: fixed;
 	width: 100%;

package/src/components/content/page.vue

@@ -129,5 +129,6 @@ export default class SuMain extends Vue {
 }
 .su-page--main{
 	overflow: auto;
+	flex: 1;
 }
 </style>

package/src/components/form/form/form-item.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="`star-ui su-form-item star-ui-form-item star-ui-col-${col} star-ui-form--label-align-${labelAlign||pLabelAlign}`">
-		<div class="start-ui star-ui-container star-ui-form-item--label" :style="labelStyle">
+		<div ref="labelDiv" class="start-ui star-ui-container star-ui-form-item--label" :style="labelStyle">
 			{{label}}
 			<slot name="label"></slot>
 		</div>
@@ -15,17 +15,27 @@ import { Vue } from "vue-class-component";
 import { Inject } from "vue-property-decorator";
 import { Register, Prop } from "@ui-root/reg";
 import { TypeFormLabelAlign } from "@ui-root/outher";
+import { Bus } from "./form.vue";
 
 import "@ui-root/global-style.css";
 
 export const InjectLabelWidth = Symbol('InjectLabelWidth');
 export const InjectLabelAlign = Symbol('InjectLabelAlign');
+export const InjectEventBus = Symbol('InjectEventBus');
 
 @Register({
 	name:"su-form-item",
 	hideInDoc:true,
+	watch:{
+		label(this:SuButton){
+			this.bus&&this.bus.labelUpdate(this);
+		}
+	}
 })
 export default class SuButton extends Vue {
+	declare $refs: {
+		labelDiv: HTMLDivElement
+	};
 	@Prop({
 		type:String,
 		default:()=>{
@@ -37,7 +47,7 @@ export default class SuButton extends Vue {
 		type:[String, Number],
 	})
 	readonly labelWidth!:string|number|undefined;
-	@Inject({from:InjectLabelWidth})
+	@Inject({from:InjectLabelWidth,default:undefined})
 	readonly pLabelWidth!:string|number|undefined;
 	@Prop({
 		autoType: "FormLabelAlign",
@@ -60,8 +70,18 @@ export default class SuButton extends Vue {
 		}
 		return ret;
 	}
+	@Inject({from:InjectEventBus})
+	readonly bus!:Bus|undefined;
 	created(){
-		console.log(this.col);
+		if(this.bus){
+			this.bus.addItem(this);
+		}
+		debugger
+	}
+	beforeUnmount(){
+		if(this.bus){
+			this.bus.removeItem(this);
+		}
 	}
 }
 </script>
@@ -75,6 +95,7 @@ export default class SuButton extends Vue {
 }
 .star-ui-form-item--label{
 	overflow: hidden;
+	box-sizing: border-box;
 }
 .star-ui-form-item--content{
 	flex: 1;

package/src/components/form/form/form.vue

@@ -8,13 +8,19 @@
 import { Vue } from "vue-class-component";
 import { Register, Prop } from "@ui-root/reg";
 import type { TypeFormLabelAlign } from "@ui-root/outher";
+import { Provide } from "vue-property-decorator";
+import Item, { InjectEventBus, InjectLabelAlign, InjectLabelWidth } from "./form-item.vue";
 
 import "@ui-root/global-style.css";
-import { Provide } from "vue-property-decorator";
-import { InjectLabelAlign, InjectLabelWidth } from "./form-item.vue";
+
+export interface Bus{
+	addItem:(item:Item)=>void,
+	removeItem:(item:Item)=>void,
+	labelUpdate:(item:Item)=>void,
+}
 
 @Register({
-	name:"su-form"
+	name:"su-form",
 })
 export default class SuButton extends Vue {
 	@Prop({
@@ -23,12 +29,11 @@ export default class SuButton extends Vue {
 			return "right"
 		}
 	})
-	@Provide({to:InjectLabelAlign})
+	@Provide({to:InjectLabelAlign,reactive:true})
 	readonly labelAlign!:TypeFormLabelAlign;
 	@Prop({
 		type: Number
 	})
-	@Provide({to:InjectLabelWidth})
 	readonly labelWidth!:number|undefined;
 	@Prop({
 		type: Boolean,
@@ -37,6 +42,59 @@ export default class SuButton extends Vue {
 		}
 	})
 	readonly allowAotoMobile!:boolean;
+	@Provide({to:InjectEventBus,reactive:true})
+	private bus:Bus|undefined;
+	private items=new Set<Item>();
+	private addItem(item:Item):void{
+		this.items.add(item);
+		this.$nextTick(this.updateLabelWidth);
+	}
+	private removeItem(item:Item):void{
+		this.items.delete(item);
+		this.$nextTick(this.updateLabelWidth);
+	}
+	private updateLabelWidth(){
+		if(!this.isLoaded) return;
+		if(typeof this.labelWidth === 'undefined'){
+			this.sendLabelWidth = undefined;
+		}else if(this.labelWidth === 0){
+			this.sendLabelWidth=undefined;
+			this.$nextTick(() => {
+				let maxWidth = 0;
+				this.items.forEach((item => {
+					if((item.labelAlign||this.labelAlign) === 'top'){
+						return;
+					}
+					const width = item.$refs.labelDiv.offsetWidth;
+					if(width>maxWidth){
+						maxWidth=width;
+					}
+				}));
+				this.sendLabelWidth=maxWidth;
+			})
+		}else{
+			this.sendLabelWidth=this.labelWidth;
+		}
+	}
+	private isLoaded=false;
+	@Provide({to:InjectLabelWidth,reactive:true})
+	private sendLabelWidth:number|undefined=0;
+	created(){
+		this.bus={
+			addItem: this.addItem,
+			removeItem: this.removeItem,
+			labelUpdate: this.updateLabelWidth,
+		}
+	}
+	mounted(){
+		this.$nextTick(() => {
+			this.isLoaded=true;
+			this.updateLabelWidth();
+		});
+	}
+	beforeUnmount(){
+		this.isLoaded=false;
+	}
 }
 </script>
 <style>

package/src/components/layout/auto-direction/index.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="star-ui star-ui-auto-direction su-auto-direction">
+		<slot />
+	</div>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component";
+import { Register } from "@ui-root/reg";
+import "@ui-root/global-style.css";
+
+@Register({
+	name:"su-auto-direction",
+})
+export default class SuAutoDirection extends Vue {
+}
+</script>
+
+<style>
+.star-ui-auto-direction{
+	display: flex;
+	padding: 0;
+	flex-direction: row;
+}
+.star-ui-view-control.star-ui-view-control-mobile .star-ui-auto-direction{
+	flex-direction: column;
+}
+</style>

package/src/components/layout/index.ts

@@ -0,0 +1 @@
+export { default as SuAutoDirection } from "./auto-direction/index.vue";

package/src/components/view-control.vue

@@ -44,7 +44,7 @@ export default class SuViewControl extends Vue {
 		this.windowWidth = window.innerWidth;
 		this.windowHeight = window.innerHeight;
 	}
-	@Provide({to:SuViewCtrlInjectKeyIsMobile})
+	@Provide({to:SuViewCtrlInjectKeyIsMobile,reactive:true})
 	public get $isMobile():boolean{
 		switch (this.deviceType) {
 			case "mobile":
@@ -56,12 +56,11 @@ export default class SuViewControl extends Vue {
 			case "ua":
 				return navigator.userAgent.toLowerCase().indexOf("mobile")!=-1;
 			case "screen-width":
-				console.log(this.windowWidth);
 				return this.windowWidth < 1000;
 		}
 		return false;
 	}
-	@Provide({to:SuViewCtrlInjectKeyClassName})
+	@Provide({to:SuViewCtrlInjectKeyClassName,reactive:true})
 	public get className():string[]{
 		return [
 			'su-view-control',

package/src/main.ts

@@ -21,6 +21,7 @@ export { default as SuCalendar } from "./components/calendar.vue";
 export { default as SuViewControl } from "./components/view-control.vue";
 
 export * from "./components/menu";
+export * from "./components/layout"
 export * from "./components/content";
 
 import { data } from "./reg";

package/types/components/common/base-popper.vue.d.ts

@@ -1,19 +1,21 @@
 import { Vue } from 'vue-class-component';
 import "../../global-style.css";
 export default class SuButton extends Vue {
+    $refs: {
+        root: HTMLDivElement;
+    };
     fromItem: Vue | HTMLElement;
     private div;
     private id;
     private updateType;
     private visible;
     readonly isMobile: false;
-    beforeCreate(): void;
-    unmounted(): void;
     mounted(): void;
     beforeUnmount(): void;
     _clickCheck(ev: MouseEvent): boolean;
     private syncRequestId;
     _updateVisible(): void;
     readonly ctrlClass: string[];
+    private baseStyle;
     updatePos(): void;
 }

package/types/components/form/form/form-item.vue.d.ts

@@ -1,9 +1,14 @@
 import { Vue } from "vue-class-component";
 import { TypeFormLabelAlign } from "../../../outher";
+import { Bus } from "./form.vue";
 import "@ui-root/global-style.css";
 export declare const InjectLabelWidth: unique symbol;
 export declare const InjectLabelAlign: unique symbol;
+export declare const InjectEventBus: unique symbol;
 export default class SuButton extends Vue {
+    $refs: {
+        labelDiv: HTMLDivElement;
+    };
     readonly label: string;
     readonly labelWidth: string | number | undefined;
     readonly pLabelWidth: string | number | undefined;
@@ -11,5 +16,7 @@ export default class SuButton extends Vue {
     readonly pLabelAlign: TypeFormLabelAlign;
     readonly col: number;
     private get labelStyle();
+    readonly bus: Bus | undefined;
     created(): void;
+    beforeUnmount(): void;
 }

package/types/components/form/form/form.vue.d.ts

@@ -1,8 +1,24 @@
 import { Vue } from "vue-class-component";
 import type { TypeFormLabelAlign } from "../../../outher";
+import Item from "./form-item.vue";
 import "@ui-root/global-style.css";
+export interface Bus {
+    addItem: (item: Item) => void;
+    removeItem: (item: Item) => void;
+    labelUpdate: (item: Item) => void;
+}
 export default class SuButton extends Vue {
     readonly labelAlign: TypeFormLabelAlign;
     readonly labelWidth: number | undefined;
     readonly allowAotoMobile: boolean;
+    private bus;
+    private items;
+    private addItem;
+    private removeItem;
+    private updateLabelWidth;
+    private isLoaded;
+    private sendLabelWidth;
+    created(): void;
+    mounted(): void;
+    beforeUnmount(): void;
 }

package/types/components/layout/auto-direction/index.vue.d.ts

@@ -0,0 +1,4 @@
+import { Vue } from "vue-class-component";
+import "@ui-root/global-style.css";
+export default class SuAutoDirection extends Vue {
+}

package/types/components/layout/index.d.ts

@@ -0,0 +1 @@
+export { default as SuAutoDirection } from "./auto-direction/index.vue";

package/types/main.d.ts

@@ -15,6 +15,7 @@ export { default as SuSlider } from "./components/slider.vue";
 export { default as SuCalendar } from "./components/calendar.vue";
 export { default as SuViewControl } from "./components/view-control.vue";
 export * from "./components/menu";
+export * from "./components/layout";
 export * from "./components/content";
 export * from "./outher";
 import { App } from "vue";