@thestarweb/ui 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thestarweb/ui",
-  "version": "1.5.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

@@ -1,5 +1,5 @@
 <template>
-	<button :class="['star-ui', 'star-ui-container', 'star-ui-button','star-ui-size-'+size]">
+	<button :class="['star-ui', 'su-container', 'star-ui-container', 'star-ui-button', 'star-ui-size-'+size]">
 		<slot></slot>
 	</button>
 </template>
@@ -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/calendar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui star-ui-calendar">
+	<div class="star-ui su-calendar star-ui-calendar">
 		<div class="star-ui-calendar--ctrl" :style="{opacity: showSelYear||showSelMonth?0:1}">
 			<div @click="dYear--">&lt;&lt;</div>
 			<div @click="dMonth--">&lt;</div>
@@ -12,11 +12,11 @@
 			<div @click="dYear++">&gt;&gt;</div>
 		</div>
 		<table cellspacing="0" cellpadding="0" :style="{opacity: showSelYear||showSelMonth?0:1}">
-			<tr class="su-calendar--inner-head">
-				<th :class="`su-calendar--${item.week}`" v-for="(item,index) in displayHead" :key="index">{{item.display}}</th>
+			<tr class="star-ui-calendar--inner-head">
+				<th :class="`star-ui-calendar--${item.week}`" v-for="(item,index) in displayHead" :key="index">{{item.display}}</th>
 			</tr>
 			<tr v-for="(row,index) in displayData" :key="index">
-				<td v-for="(day,index) in row" :key="index" :class="['su-calendar--inner-cell',`su-calendar--${day.week}`,{'su-calendar--previous':day.isPrevious,'su-calendar--next':day.isNext}]" @clcik="dateClick(day)">
+				<td v-for="(day,index) in row" :key="index" :class="['star-ui-calendar--inner-cell',`star-ui-calendar--${day.week}`,{'star-ui-calendar--previous':day.isPrevious,'star-ui-calendar--next':day.isNext}]" @clcik="dateClick(day)">
 					
 					<slot v-if="$slots['default']" v-bind="day" />
 					<vnodes v-else-if="renderCell" :func="renderCell" :args="[day]" />
@@ -189,17 +189,17 @@ export default class SuCalendar extends Vue {
 .star-ui-calendar th,.star-ui-calendar td{
 	padding: 5px 0;
 }
-.su-calendar--inner-head{
+.star-ui-calendar--inner-head{
 	background-color: var(--star-ui-table-head-color);
 }
-.su-calendar--inner-cell{
+.star-ui-calendar--inner-cell{
 	border: 1px solid #e8eaec;
 	width: 42px
 }
-.su-calendar--inner-cell.su-calendar--Sat,.su-calendar--inner-cell.su-calendar--Sun{
+.star-ui-calendar--inner-cell.star-ui-calendar--Sat,.star-ui-calendar--inner-cell.star-ui-calendar--Sun{
 	color: #f00;
 }
-.su-calendar--inner-cell.su-calendar--previous,.su-calendar--inner-cell.su-calendar--next{
+.star-ui-calendar--inner-cell.star-ui-calendar--previous,.star-ui-calendar--inner-cell.star-ui-calendar--next{
 	opacity: 0.5;
 }
 

package/src/components/card.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui star-ui-card">
+	<div class="star-ui su-card star-ui-card">
 		<div v-if="title!=''||collapsible||this.$slots.title" class="star-ui star-ui-container star-ui-card--inner-head">
 			<div class="star-ui star-ui-card--inner-title">{{title}}</div>
 			<button v-if="collapsible" :class="['star-ui','star-ui-card--inner-button-collapsible',isCollaps?'show':'hidden']" @click="collapsChange"></button>

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

@@ -1,27 +1,23 @@
 <template>
-	<teleport :to="'#'+id">
-		<div>
-			<div class="star-ui-popper-background" v-if="suControl.isMobile" @click="$emit('out-click')"></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>
 	</teleport>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import { Inject } from "vue-property-decorator";
-import { Emit, Prop } from "../../reg";
+import { Vue } from 'vue-class-component';
+import { SuViewCtrlInjectClassName, SuViewCtrlInjectIsMobile } from "@ui-root/outher";
+import { Emit, Prop, Register } from "@ui-root/reg";
 
-import { ViewCtrlInfo } from "../../types";
-
-
-
-// import { Vue } from "vue"
 import "../../global-style.css";
 let nowId=0;
 
-@Options({
+@Register({
 	name:"su-base-popper",
+	internalOnly:true,
 	props: {
 		fromItem:{
 			type:Object
@@ -42,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
 	})
@@ -55,17 +58,7 @@ export default class SuButton extends Vue {
 	private id!:string;
 	private updateType!:string;
 	private visible!:boolean;
-	@Inject({from:'viewCtrlInfo',default:{}}) readonly suControl!: ViewCtrlInfo;
-	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);
-	}
+	@SuViewCtrlInjectIsMobile readonly isMobile!:false;
 	mounted():void{
 		window.addEventListener("click",this._clickCheck);
 		this._updateVisible();
@@ -77,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;
@@ -87,24 +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.suControl.isMobile){
-				this.div.style.bottom="0";
-				this.div.style.left="0";
-				this.div.style.width="100%";
-				// this.div.style.height="100%";
-				this.div.className="star-ui su-view-control su-view-control-mobile";
+			if(this.isMobile){
+				this.baseStyle.bottom="0";
+				this.baseStyle.left="0";
+				this.baseStyle.width="100%";
 			}else{
-				this.div.className="star-ui su-view-control su-view-control-pc";
 				const height=dom.clientHeight;
 				let top=0,left=0;
 				while(dom&&dom!=document){
@@ -113,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);
 				}
@@ -125,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

@@ -1,31 +1,43 @@
 <template>
 	<div class="star-ui su-page">
 		<header class="su-ui su-page--header">
-			<span v-if="suControl.isMobile" class="star-ui-icon-font star-ui-icon-menu su-page--mobile-menu-open"  @click="isOpenMenu=true" />
+			<span v-if="isMobile" class="star-ui-icon-font star-ui-icon-menu su-page--mobile-menu-open"  @click="isOpenMenu=true" />
 			<h1 v-if="title">{{title}}</h1>
 			<img v-if="logo" :src="logo" alt="logo" />
 			<slot name="header"></slot>
-			<div v-if="!suControl.isMobile" class="su-page--menu-box">
-				<su-menu :menu="menu" direction="h"></su-menu>
+			<div v-if="!isMobile" class="su-page--menu-box">
+				<su-menu :menu="menu" direction="h">
+					<template v-if="$slots['menu']" v-slot="item">
+						<slot name="menu" v-bind="item" />
+					</template>
+					<template v-else-if="$slots['menu-text']" v-slot:menu-text="item">
+						<slot name="text" v-bind="item" />
+					</template>
+				</su-menu>
 			</div>
 		</header>
 		<main class="su-ui su-page--main">
 			<slot></slot>
 		</main>
-		<div v-if="suControl.isMobile" :class="['su-ui', 'su-page--mobile-menu-box', isOpenMenu ? 'su-page--mobile-menu-box-open' : 'su-page--mobile-menu-close']" @click="isOpenMenu=false">
-			<su-menu :menu="menu" direction="v" @click.stop></su-menu>
+		<div v-if="isMobile" :class="['su-ui', 'su-page--mobile-menu-box', isOpenMenu ? 'su-page--mobile-menu-box-open' : 'su-page--mobile-menu-close']" @click="isOpenMenu=false">
+			<su-menu :menu="menu" direction="v" @click.stop>
+				<template v-if="$slots['menu']" v-slot="item">
+					<slot name="menu" v-bind="item" />
+				</template>
+				<template v-else-if="$slots['menu-text']" v-slot:menu-text="item">
+					<slot name="text" v-bind="item" />
+				</template>
+			</su-menu>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
 import { Vue } from "vue-class-component";
-import { Inject } from "vue-property-decorator";
 import { Prop, Register } from "@ui-root/reg";
-import { SuViewControl } from "@ui-root/main";
+import { SuViewCtrlInjectIsMobile } from "@ui-root/outher";
 import { SuMenu } from "@ui-root/components/menu";
 import { MenuItem } from "@ui-root/types";
-import { ViewCtrlInfo } from "@ui-root/types";
 import "@ui-root/global-style.css";
 
 @Register({
@@ -35,7 +47,7 @@ import "@ui-root/global-style.css";
 	}
 })
 export default class SuMain extends Vue {
-	@Inject({from:SuViewControl.injectSymbol,default:{}}) readonly suControl!: ViewCtrlInfo;
+	@SuViewCtrlInjectIsMobile readonly isMobile!:boolean;
 	@Prop({
 		type: String,
 		default: '',
@@ -79,6 +91,7 @@ export default class SuMain extends Vue {
 .su-page--menu-box{
 	flex: 1;
 	height: 100%;
+	z-index: 999999;
 }
 .su-page--menu-box .star-ui-menu-h--chlild-box{
 	color: var(--star-ui-font-color);
@@ -114,4 +127,8 @@ export default class SuMain extends Vue {
 .su-page--mobile-menu-close .star-ui-menu-v{
 	margin-left: -100%;
 }
+.su-page--main{
+	overflow: auto;
+	flex: 1;
+}
 </style>

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

@@ -0,0 +1,117 @@
+<template>
+	<div :class="`star-ui su-form-item star-ui-form-item star-ui-col-${col} star-ui-form--label-align-${labelAlign||pLabelAlign}`">
+		<div ref="labelDiv" class="start-ui star-ui-container star-ui-form-item--label" :style="labelStyle">
+			{{label}}
+			<slot name="label"></slot>
+		</div>
+		<div class="start-ui star-ui-container star-ui-form-item--content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+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:()=>{
+			return 'label';
+		}
+	})
+	readonly label!:string;
+	@Prop({
+		type:[String, Number],
+	})
+	readonly labelWidth!:string|number|undefined;
+	@Inject({from:InjectLabelWidth,default:undefined})
+	readonly pLabelWidth!:string|number|undefined;
+	@Prop({
+		autoType: "FormLabelAlign",
+	})
+	readonly labelAlign!:TypeFormLabelAlign;
+	@Inject({from:InjectLabelAlign,default:"right"})
+	readonly pLabelAlign!:TypeFormLabelAlign;
+	@Prop({
+		type:Number,
+		default:()=>{
+			return 24;
+		}
+	})
+	readonly col!:number;
+	private get labelStyle():Record<string, unknown>{
+		const ret:Record<string, unknown>={};
+		const labelWidth = this.labelWidth || this.pLabelWidth;
+		if(labelWidth){
+			ret.width=typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth;
+		}
+		return ret;
+	}
+	@Inject({from:InjectEventBus})
+	readonly bus!:Bus|undefined;
+	created(){
+		if(this.bus){
+			this.bus.addItem(this);
+		}
+		debugger
+	}
+	beforeUnmount(){
+		if(this.bus){
+			this.bus.removeItem(this);
+		}
+	}
+}
+</script>
+
+<style>
+.star-ui-form-item{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	overflow: hidden;
+}
+.star-ui-form-item--label{
+	overflow: hidden;
+	box-sizing: border-box;
+}
+.star-ui-form-item--content{
+	flex: 1;
+}
+.star-ui-form-item--content>.star-ui-select,.star-ui-form-item--content>.star-ui-input{
+	width: 100%;
+}
+
+.star-ui-form--label-align-left .star-ui-form-item--label, .star-ui-form--label-align-top .star-ui-form-item--label{
+	text-align: left;
+}
+.star-ui-form--label-align-right .star-ui-form-item--label{
+	text-align: right;
+}
+.star-ui-form-item.star-ui-form--label-align-top{
+	flex-direction: column;
+	align-items: stretch;
+}
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+	<form :class="`star-ui su-form star-ui-form ${allowAotoMobile?'star-ui-form--auto-mobile':''}`">
+		<slot></slot>
+	</form>
+</template>
+
+<script lang="ts">
+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";
+
+export interface Bus{
+	addItem:(item:Item)=>void,
+	removeItem:(item:Item)=>void,
+	labelUpdate:(item:Item)=>void,
+}
+
+@Register({
+	name:"su-form",
+})
+export default class SuButton extends Vue {
+	@Prop({
+		autoType: "FormLabelAlign",
+		default:()=>{
+			return "right"
+		}
+	})
+	@Provide({to:InjectLabelAlign,reactive:true})
+	readonly labelAlign!:TypeFormLabelAlign;
+	@Prop({
+		type: Number
+	})
+	readonly labelWidth!:number|undefined;
+	@Prop({
+		type: Boolean,
+		default:()=>{
+			return true
+		}
+	})
+	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>
+.star-ui-form{
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+.star-ui-view-control.star-ui-view-control-mobile .star-ui-form--auto-mobile>.star-ui-form-item{
+	width: 100%;
+}
+</style>

package/src/components/form/form/index.ts

@@ -0,0 +1,2 @@
+export { default as SuForm } from "./form.vue";
+export { default as SuFormItem } from "./form-item.vue";

package/src/components/form/index.ts

@@ -0,0 +1 @@
+export * from "./form/index";

package/src/components/input.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['star-ui','star-ui-input',{'is-focus':isFocused}]">
+	<div :class="['star-ui', 'su-input','star-ui-input',{'is-focus':isFocused}]">
 		<input type="text" ref="input" :value="modelValue" :name="name" :class="['star-ui','star-ui-input--inner','star-ui-size-'+size]" @input.stop="handleInput" @focus="handleFocus" @blur="handleBlur">
 	</div>
 </template>
@@ -76,5 +76,6 @@ export default class SuInput extends Vue {
 	flex:1;
 	color: unset;
 	background: unset;
+	width: 100%;
 }
 </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/layout-h.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-h-layout">
+	<div class="star-ui su-h-layout star-ui-h-layout">
 		<slot></slot>
 	</div>
 </template>
@@ -17,7 +17,7 @@ export default class SuHLayout extends Vue {
 </script>
 
 <style>
-.su-h-layout{
+.star-ui-h-layout{
 	display: flex;
 	flex-direction: row;
 	width: 100%;
@@ -25,10 +25,10 @@ export default class SuHLayout extends Vue {
 	padding: 0;
 	overflow: hidden;
 }
-.su-h-layout>*{
+.star-ui-h-layout>*{
 	flex:0 0 auto;
 }
-.su-h-layout>.su-main{
+.star-ui-h-layout>.star-ui-main{
 	width: 0;
 }
 </style>

package/src/components/layout-main.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-main">
+	<div class="star-ui su-main star-ui-main">
 		<slot></slot>
 	</div>
 </template>
@@ -19,7 +19,7 @@ export default class SuMain extends Vue {
 </script>
 
 <style>
-.su-main{
+.star-ui-main{
 	flex: 1;
 }
 </style>

package/src/components/layout-v.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-v-layout">
+	<div class="star-ui su-v-layout star-ui-v-layout">
 		<slot></slot>
 	</div>
 </template>
@@ -19,7 +19,7 @@ export default class SuVLayout extends Vue {
 </script>
 
 <style>
-.su-v-layout{
+.star-ui-v-layout{
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -27,10 +27,10 @@ export default class SuVLayout extends Vue {
 	padding: 0;
 	overflow: hidden;
 }
-.su-v-layout>*{
+.star-ui-v-layout>*{
 	flex:0 0 auto;
 }
-.su-v-layout>.su-main{
+.star-ui-v-layout>.star-ui-main{
 	height: 0;
 }
 </style>

package/src/components/line-h.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-h-line"></div>
+	<div class="star-ui su-h-line star-ui-h-line"></div>
 </template>
 
 <script lang="ts">
@@ -17,7 +17,7 @@ export default class SuHLine extends Vue {
 </script>
 
 <style>
-.su-h-line{
+.star-ui-h-line{
 	background-color:var(--star-ui-line-color);
 	width:100%;
 	height:var(--star-ui-line-width);

package/src/components/line-v.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-v-line"></div>
+	<div class="star-ui su-v-line star-ui-v-line"></div>
 </template>
 
 <script lang="ts">
@@ -17,7 +17,7 @@ export default class SuVLine extends Vue {
 </script>
 
 <style>
-.su-v-line{
+.star-ui-v-line{
 	background-color:var(--star-ui-line-color);
 	/*height:100%;*/
 	width:var(--star-ui-line-width);