@thestarweb/ui 1.5.2 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thestarweb/ui",
-  "version": "1.5.2",
+  "version": "1.7.0",
   "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,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>
@@ -8,15 +8,16 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import { SuViewCtrlInjectIsMobile } from "@ui-root/outher";
-import { Emit, Prop } from "@ui-root/reg";
+import { Vue } from 'vue-class-component';
+import { SuViewCtrlInjectClassName, SuViewCtrlInjectIsMobile } from "@ui-root/outher";
+import { Emit, Prop, Register } from "@ui-root/reg";
 
 import "../../global-style.css";
 let nowId=0;
 
-@Options({
+@Register({
 	name:"su-base-popper",
+	internalOnly:true,
 	props: {
 		fromItem:{
 			type:Object
@@ -37,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
 	})
@@ -51,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();
@@ -72,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;
@@ -82,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.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";
+				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){
@@ -108,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);
 				}
@@ -120,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/context-menu-box/index.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="star-ui su-context-menu-box star-ui-context-menu-box" @contextmenu="handleContextMenu">
+		<slot />
+	</div>
+	<teleport to="body" v-if="isOpenMenu">
+		<div ref="mask" :class="['su-context-menu--mask', 'star-ui-context-menu--mask', ...ctrlClass]" @click="handleMaskClick">
+			<component :is="component" class="su-context-menu star-ui-context-menu" :style="isMobile ? '' : `top: ${currentY}px; left: ${currentX}px;`" :menu="currentMenu" :itemComponent="itemComponent">
+				<template v-slot="data">
+					<div class="su-context-menu--item star-ui-context-menu--item" @click="handleItemClick(data)">
+						<span class="star-ui-context-menu--text">{{data.title}}</span>
+						<span v-if="!data.click">&gt;</span>
+					</div>
+				</template>
+			</component>
+		</div>
+	</teleport>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component";
+import { Prop, Register } from "@ui-root/reg";
+import { SuViewCtrlInjectClassName, SuViewCtrlInjectIsMobile } from "@ui-root/outher";
+import MenuBox from "../menu/menu-h/menu-h-child.vue";
+import MenuBoxMobile from "../menu/menu-v/index.vue";
+import MenuItem from "../menu/menu-h/menu-h-item.vue";
+import "@ui-root/global-style.css";
+import { ContextMenuItem } from "@ui-root/types";
+
+@Register({
+	name:"su-context-menu-box",
+	components: {
+		MenuBox,
+		MenuBoxMobile,
+	}
+})
+export default class SuMain extends Vue {
+	private itemComponent = MenuItem;
+	declare $refs:{
+		mask:HTMLDivElement,
+	};
+	@SuViewCtrlInjectIsMobile readonly isMobile!:boolean;
+	@SuViewCtrlInjectClassName readonly ctrlClass!:string[];
+	private get component(){
+		if(this.isMobile){
+			return MenuBoxMobile;
+		}
+		return MenuBox;
+	}
+	@Prop({
+		type: [Array, Function],
+		required: true,
+	})
+	private menu!:ContextMenuItem[] | ((ev: MouseEvent) => ContextMenuItem[]);
+	private isOpenMenu = false;
+	private currentMenu: ContextMenuItem[] = [];
+	private currentX = 0;
+	private currentY = 0;
+	private handleContextMenu(ev: MouseEvent){
+		// ev.stopPropagation();
+		ev.preventDefault();
+		if(typeof this.menu === 'function'){
+			this.currentMenu = this.menu(ev) || [];
+		}else{
+			this.currentMenu = this.menu || [];
+		}
+		// this.currentMenu=[{title: 'aa', children: [ {title: 'aa.1', click: () => console.log('aa.1 click')} ]}, {title: 'bb', click: () => console.log('bb click')}];
+		this.currentX=ev.clientX;
+		this.currentY=ev.clientY;
+		this.isOpenMenu = true;
+	}
+	handleMaskClick(ev: MouseEvent){
+		if (ev.target === this.$refs.mask) {
+			this.isOpenMenu = false;
+		}
+	}
+	handleItemClick(item: ContextMenuItem){
+		if (item.click) {
+			this.isOpenMenu = false;
+			item.click();
+		}
+	}
+}
+</script>
+
+<style>
+	.star-ui-context-menu--mask{
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+	.star-ui-context-menu{
+		position: absolute;
+		opacity: 1;
+	}
+	.star-ui-context-menu--item{
+		min-width: 100px;
+		padding: var(--star-ui-default-padding);
+		cursor: pointer;
+		display: flex;
+		flex-direction: row;
+	}
+	.star-ui-context-menu--text{
+		flex: 1;
+	}
+	.star-ui-view-control-mobile.star-ui-context-menu--mask{
+		background: var(--star-ui-mask-color);
+	}
+	.star-ui-view-control-mobile .star-ui-context-menu{
+		width: 100%;
+		background-color: var(--star-ui-backgorund-color);
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+</style>

package/src/components/content/index.ts

@@ -1 +1,5 @@
-export { default as SuPage } from "./page.vue";
+export { default as SuPage } from "./page.vue";
+export { default as SuMenu } from "./menu/index.vue";
+export { default as SuContextMenuBox } from "./context-menu-box/index.vue";
+export { default as SuModal } from "./modals/modal.vue";
+export { default as SuModalConfirm } from "./modals/confirm.vue";

package/src/components/{menu → content/menu}/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<component :is="menuComponent" :menu="menu" class="su-menu">
+	<component :is="menuComponent" :menu="menu" class="star-ui su-menu star-ui-menu">
 		<template v-slot="data">
 			<div @click="handleItemClick(data)">
 				<slot v-if="$slots['default']" v-bind="data" />
@@ -79,7 +79,7 @@ export default class SuHMenu extends Vue {
 
 </script>
 <style>
-.su-menu a{
+.star-ui-menu a{
 	color: inherit;
 	text-decoration: none;
 }

package/src/components/{menu → content/menu}/menu-h/index.vue

@@ -2,7 +2,9 @@
 	<div :class="['star-ui', 'star-ui-menu', 'star-ui-menu-h']">
 		<su-h-menu-item v-for="item in menu" :key="item.path" :item="item" childDirection="bottom">
 			<template v-slot="data">
-				<slot v-bind="data" />
+				<div class="star-ui star-ui-menu--item star-ui-menu-h--item">
+					<slot v-bind="data" />
+				</div>
 			</template>
 		</su-h-menu-item>
 	</div>

package/src/components/{menu → content/menu}/menu-h/menu-h-item.vue

@@ -1,8 +1,9 @@
 <template>
 	<div class="star-ui star-ui-menu--item-box star-ui-menu-h--item-box">
-		<div class="star-ui star-ui-menu--item star-ui-menu-h--item">
+		<!-- <div class="star-ui star-ui-menu--item star-ui-menu-h--item" @click="handleItemClick(item)">
 			<slot v-bind="item" />
-		</div>
+		</div> -->
+		<slot v-bind="item" />
 		<su-h-menu-child :menu="item.children || []" :itemComponent="selfClass" :direction="childDirection">
 			<template v-slot="item">
 				<slot v-bind="item" />
@@ -12,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { Register, Prop } from "@ui-root/reg";
+import { Register, Prop, Emit } from "@ui-root/reg";
 import { Vue } from "vue-class-component";
 import SuHMenuChild from "./menu-h-child.vue";
 import isFocus from "@ui-root/directives/is-focus";

package/src/components/content/modals/confirm.vue

@@ -0,0 +1,45 @@
+<template>
+	<su-modal :visible="visible" @close="close">
+		<template v-slot:title>
+			{{title}}
+		</template>
+		<template v-slot:footer>
+			<su-button @click="confirm">确认</su-button>
+			<su-button @click="close">取消</su-button>
+		</template>
+	</su-modal>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-class-component';
+import { Register, Prop, Emit } from "@ui-root/reg";
+import SuModal from "./modal.vue";
+import {SuButton} from "@ui-root/main";
+
+@Register({
+	name:"su-modal-confirm",
+	components:{
+		SuModal,
+		SuButton
+	},
+	hideInDoc: true,
+})
+export default class SuModalConfirm extends Vue {
+	@Prop({
+		type: String,
+	})
+	private readonly title!:string|undefined;
+	@Prop({
+		type: Boolean,
+	})
+	private readonly visible!:boolean|undefined;
+	@Emit()
+	private close(){
+		return 1;
+	}
+	@Emit()
+	private confirm(){
+		return 1;
+	}
+}
+</script>

package/src/components/content/modals/modal.vue

@@ -0,0 +1,110 @@
+<template>
+	<teleport to="body" v-if="locVisable">
+		<div class="star-ui-modal--mask">
+			<div class="star-ui star-ui-modal su-modal">
+				<div class="star-ui-modal--header">
+					<div class="star-ui-modal--title">
+						<slot name="title" />
+						{{title}}
+					</div>
+					<i class="star-ui-icon-font star-ui-icon-close" @click="close"/>
+				</div>
+				<div class="star-ui-modal--body">
+					<slot />
+				</div>
+				<div class="star-ui-modal--footer">
+					<slot name="footer" />
+				</div>
+			</div>
+		</div>
+	</teleport>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-class-component';
+import { Register, Prop, Emit } from "@ui-root/reg";
+import "@ui-root/global-style.css";
+import { SuViewCtrlInjectIsMobile } from '@ui-root/outher';
+
+@Register({
+	name:"su-modal",
+	watch: {
+		visible(v){
+			console.log(v)
+			if (typeof v !== 'undefined') {
+				this.locVisable = v;
+			}
+		},
+	},
+})
+export default class SuModalConfirm extends Vue {
+	@Prop({
+		type: Boolean,
+		default: undefined
+	})
+	private readonly visible!:boolean|undefined;
+	private locVisable = false;
+	@Emit('update:visable')
+	private updateVisable(visable:boolean):boolean{
+		return visable;
+	}
+	@Emit()
+	public close():void{
+		if(typeof this.visible === 'undefined'){
+			this.locVisable = false;
+		}
+		this.updateVisable(false);
+	}
+	public show():void{
+		if(typeof this.visible === 'undefined'){
+			this.locVisable = true;
+		}
+		this.updateVisable(true);
+	}
+	@Prop({
+		type: String,
+	})
+	private readonly title!:string|undefined;
+	created():void{
+		if (typeof this.visible !== 'undefined') {
+			this.locVisable = this.visible;
+		}
+	}
+	@SuViewCtrlInjectIsMobile readonly isMobile!: boolean;
+}
+</script>
+
+<style>
+.star-ui-modal{
+	background-color: var(--star-ui-backgorund-color);
+	border-radius: var(--star-ui-border-radius);
+}
+.star-ui-modal--mask{
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--star-ui-mask-color);
+}
+.star-ui-modal--header,
+.star-ui-modal--body,
+.star-ui-modal--footer{
+	padding: var(--star-ui-default-padding);
+}
+.star-ui-modal--header{
+	display: flex;
+	flex-direction: row;
+}
+.star-ui-modal--title{
+	flex: 1 1 0;
+	overflow: hidden;
+}
+.star-ui-modal--header>i{
+	flex: 0 0 auto;
+	cursor: pointer;
+}
+</style>

package/src/components/content/page.vue

@@ -36,7 +36,7 @@
 import { Vue } from "vue-class-component";
 import { Prop, Register } from "@ui-root/reg";
 import { SuViewCtrlInjectIsMobile } from "@ui-root/outher";
-import { SuMenu } from "@ui-root/components/menu";
+import { SuMenu } from "@ui-root/main";
 import { MenuItem } from "@ui-root/types";
 import "@ui-root/global-style.css";
 
@@ -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

@@ -0,0 +1,116 @@
+<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);
+		}
+	}
+	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>