@thestarweb/ui 1.7.1 → 2.0.0-beta.1

package/readme.md

@@ -1,16 +0,0 @@
-# star-ui
-[website](https://ui.thestarweb.cn)
- | ![workflows](https://github.com/thestarweb/star-ui/workflows/build/badge.svg)
- | ![npm](https://img.shields.io/npm/v/@thestarweb/ui.svg) 
-
-```
-npm i @thestarweb/ui
-```
-
-```typescript
-import { createApp } from "vue"
-import App from "./App.vue"
-import StarUi from "@thestarweb/ui";
-
-createApp(App).use(StarUi).mount('#app');
- ```

package/src/components/button.vue

@@ -1,34 +0,0 @@
-<template>
-	<button :class="['star-ui', 'su-container', 'star-ui-container', 'star-ui-button', 'star-ui-size-'+size]">
-		<slot></slot>
-	</button>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Register, Prop } from "@ui-root/reg";
-
-import "../global-style.css";
-
-@Register({
-	name:"su-button"
-})
-export default class SuButton extends Vue {
-	@Prop({
-		type:String,
-		default:()=>{
-			return "medium"
-		}
-	})
-	size!:string;
-}
-</script>
-
-<style>
-.star-ui-button{
-	border-width: 1px;
-	cursor: pointer;
-	background: var(--star-ui-backgorund-color);
-	color: var(--star-ui-font-color);
-}
-</style>

package/src/components/calendar.vue

@@ -1,244 +0,0 @@
-<template>
-	<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>
-			<div class="star-ui-calendar--display-month">
-				<span @click="showSelYear=true">{{displayMonthDate.format("YYYY")}}</span>
-				-
-				<span @click="showSelMonth=true">{{displayMonthDate.format("MM")}}</span>
-			</div>
-			<div @click="dMonth++">&gt;</div>
-			<div @click="dYear++">&gt;&gt;</div>
-		</div>
-		<table cellspacing="0" cellpadding="0" :style="{opacity: showSelYear||showSelMonth?0:1}">
-			<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="['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]" />
-					<template v-else>{{day.display}}</template>
-				</td>
-			</tr>
-		</table>
-		<div v-if="showSelYear" class="star-ui-calendar--select">
-			<div class="star-ui-calendar--select-ctrl">
-				<div @click="dShowSelYear--">&lt;&lt;</div>
-				<div></div>
-				<div @click="dShowSelYear++">&gt;&gt;</div>
-			</div>
-			<div class="star-ui-calendar--select-body">
-				<div v-for="i in 12" :key="i" :class="{'now-sel':i==6&&dShowSelYear==0}" @click="dYear+=i-6+dShowSelYear*12;showSelYear=false;dShowSelYear=0;">
-					{{displayMonthDate.year()+i-6+dShowSelYear*12}}
-				</div>
-			</div>
-		</div>
-		<div v-if="showSelMonth" class="star-ui-calendar--select">
-			<!-- <div class="star-ui-calendar--select-ctrl">
-				<div @click="dShowSelYear--">&lt;&lt;</div>
-				<div></div>
-				<div @click="dShowSelYear++">&gt;&gt;</div>
-			</div> -->
-			<div class="star-ui-calendar--select-body">
-				<div v-for="i in 12" :key="i" :class="{'now-sel':i==6&&dShowSelYear==0}" @click="showSelMonth=false;dShowSelYear=0;">
-					{{i}}
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Register, Prop, Emit } from "@ui-root/reg";
-import moment from "moment";
-import CallRender from "./call-render";
-
-
-import "../global-style.css";
-
-const weekNames = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
-interface DateBaseInfo{
-	display:number;
-	isPrevious:boolean;
-	isNext:boolean;
-	week:string;
-	date:moment.Moment;
-}
-
-@Register({
-	name:"su-calendar",
-	components:{
-		vnodes: CallRender,
-	}
-})
-export default class SuCalendar extends Vue {
-	@Prop({
-		type:[Date,String],
-		default:()=>{
-			return new Date();
-		}
-	})
-	public readonly displayMonth!:Date|string;
-	private dYear=0;
-	private dMonth=0;
-	private get displayMonthDate():moment.Moment{
-		let date=moment(this.displayMonth);
-		date.date(1);
-		date.add(this.dYear,"y").add(this.dMonth,"M");
-		return date;
-	}
-	@Prop({
-		type:Array,
-		default:()=>{
-			return weekNames;
-		}
-	})
-	public readonly weekName!:string[];
-
-	@Prop({
-		type:Number,
-		default:0,
-		validator: (input:number): boolean=>{
-			return input>=0&&input<7
-		}
-	})
-	public weekOffect!:number;
-
-	private get displayHead():{
-		display:string;
-		week:string;
-	}[]{
-		const mList=this.weekName.map((item,index)=>({
-			display: item,
-			week:weekNames[index],
-		}))
-		return [
-			...mList.slice(this.weekOffect),
-			...mList.slice(0,this.weekOffect),
-		];
-	}
-	private get displayData():DateBaseInfo[][]{
-		let res:DateBaseInfo[][]=[[]];
-		let now=res[0];
-		
-		const nowDay = moment(this.displayMonthDate);
-		nowDay.set('date',1);
-		let reqPreviousDays=nowDay.day()-this.weekOffect;
-		if(reqPreviousDays<0) reqPreviousDays+=7;
-		nowDay.add(-reqPreviousDays,'days');
-		let isNotNext=true;
-		while(isNotNext||now.length<7){
-			if(now.length==7){
-				now=[];
-				res.push(now);
-			}
-			now.push({
-				display:nowDay.date(),
-				isPrevious:isNotNext&&this.displayMonthDate.month()!=nowDay.month(),
-				isNext:!isNotNext,
-				week:weekNames[nowDay.day()],
-				date:moment(nowDay),
-			});
-			nowDay.add(1,'days');
-			isNotNext=this.displayMonthDate.year()>=nowDay.year()&&this.displayMonthDate.month()>=nowDay.month();
-		}
-		return res;
-	}
-	@Prop({
-		type:Function,
-		default:undefined
-	})
-	public readonly renderCell!:(arg:DateBaseInfo)=>unknown;
-
-	private showSelYear=false;
-	private dShowSelYear=0;
-	private showSelMonth=false;
-
-	@Emit()
-	private dateClick(data:DateBaseInfo):DateBaseInfo{
-		return data;
-	}
-}
-</script>
-
-<style>
-.star-ui-calendar{
-	text-align: center;
-	display: inline-block;
-	border: 1px solid #e8eaec;
-}
-.star-ui-calendar--ctrl{
-	display: flex;
-	flex-direction: row;
-}
-.star-ui-calendar--ctrl>*{
-	padding: 5px;
-	cursor: pointer;
-}
-.star-ui-calendar--display-month{
-	flex: 1 0 auto;
-	cursor: default;
-}
-.star-ui-calendar--display-month>span{
-	cursor: pointer;
-}
-.star-ui-calendar th,.star-ui-calendar td{
-	padding: 5px 0;
-}
-.star-ui-calendar--inner-head{
-	background-color: var(--star-ui-table-head-color);
-}
-.star-ui-calendar--inner-cell{
-	border: 1px solid #e8eaec;
-	width: 42px
-}
-.star-ui-calendar--inner-cell.star-ui-calendar--Sat,.star-ui-calendar--inner-cell.star-ui-calendar--Sun{
-	color: #f00;
-}
-.star-ui-calendar--inner-cell.star-ui-calendar--previous,.star-ui-calendar--inner-cell.star-ui-calendar--next{
-	opacity: 0.5;
-}
-
-.star-ui-calendar--select{
-	position: absolute;
-	top:0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	background-color: inherit;
-}
-.star-ui-calendar--select-body{
-	flex-grow: 1;
-	display: grid;
-	grid-template-rows: repeat(3, 1fr);
-	grid-template-columns: repeat(4, 1fr);
-	align-items: center;
-}
-.star-ui-calendar--select-body>*{
-	cursor: pointer;
-}
-.star-ui-calendar--select-body>*:hover{
-	color: var(--star-ui-base-color);
-}
-.star-ui-calendar--select-ctrl{
-	display: flex;
-	flex-direction: row;
-	justify-content:space-between;
-	height: 20%;
-	align-items: center;
-}
-.star-ui-calendar--select-ctrl>*{
-	padding: 0 15px;
-	cursor: pointer;
-}
-.star-ui-calendar .now-sel{
-	color: var(--star-ui-base-color);
-	font-weight: bold;
-}
-</style>

package/src/components/call-render.tsx

@@ -1,22 +0,0 @@
-import { Vue } from 'vue-class-component';
-import { Prop, Register } from "../reg";
-
-@Register({
-    name:'call-render',
-	internalOnly: true,
-})
-export default class CallRender extends Vue {
-	@Prop({
-		type:Function,
-	})
-    // eslint-disable-next-line
-	func!:(...arg:any[])=>any;
-	@Prop({
-		type:Array,
-	})
-    // eslint-disable-next-line
-	args!:any[];
-	render(){
-		return this.func(...this.args);
-	}
-}

package/src/components/card.vue

@@ -1,126 +0,0 @@
-<template>
-	<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>
-		</div>
-		<div ref="body" class="star-ui star-ui-card--inner-body" @transitionend="handleTransitionEnd">
-			<div ref="bodyInner" class="star-ui star-ui-container star-ui-card--inner-body-inner">
-				<slot></slot>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-import { Prop, Register } from "@ui-root/reg";
-import "../global-style.css";
-import VLayout from "./layout-v.vue";
-import HLayout from "./layout-h.vue";
-import SuMain from "./layout-main.vue";
-
-
-@Register({
-	name:"su-card",
-	components:{
-		VLayout,
-		HLayout,
-		SuMain
-	}
-})
-export default class SuCard extends Vue {
-	declare $refs: {
-		body:HTMLDivElement
-		bodyInner:HTMLDivElement
-	};
-	@Prop({
-		type:String,
-		default:""
-	})
-	readonly title!:string;
-	@Prop({
-		type:Boolean,
-		default:false
-	})
-	readonly collapsible!:boolean;
-	isCollaps=false;
-	collapsChange():void{
-		const realHeight=this.$refs.bodyInner.clientHeight;
-		if(this.isCollaps){
-			this.$refs.body.style.height=realHeight+"px";
-		}else{
-			this.$refs.body.style.height=realHeight+"px";//需要先设置一个高度才能应用过渡动画
-			setTimeout(()=>this.$refs.body.style.height="0",0);//0秒定时器用于将两个高度设置都能被浏览器读取
-		}
-		this.isCollaps=!this.isCollaps;
-	}
-	handleTransitionEnd():void{
-		if(!this.isCollaps){
-			//动画播放完之后取消掉高度限制
-			this.$refs.body.style.height="";
-		}
-	}
-}
-</script>
-
-<style>
-.star-ui-card{
-	border: 1px solid var(--star-ui-line-color);
-	border-radius: var(--star-ui-border-radius);
-	display: flex;
-	flex-direction: column;
-}
-.star-ui-card--inner-head{
-	display: flex;
-	flex-direction: row;
-}
-.star-ui-card--inner-title{
-	flex-grow: 1;
-}
-.star-ui-card--inner-button-collapsible{
-	width: 0;
-	height: 0;
-	margin: 2px;
-	padding: 10px;
-	/*background: #88f;*/
-	border-radius: 50%;
-	border: 1px solid var(--star-ui-line-color);
-	display: inline-block;
-	float: right;
-}
-.star-ui-card--inner-button-collapsible:after{
-	content: " ";
-	width: 0;
-	height: 0;
-	padding: 0;
-	/*margin-left: -5px !important;
-	margin-top: -2.5px !important;*/
-	left: 5px;
-	top:8px;
-	position: absolute;
-	border-color: var(--star-ui-line-color);
-	border-style: solid;
-	border-right: solid 5px transparent;
-	border-left: solid 5px transparent;
-	transition: border-top-width 0.5s, border-bottom-width 0.5s;
-}
-.star-ui-card--inner-button-collapsible.hidden:after{
-	/*border-bottom: solid 5px #ccf;*/
-	border-bottom-width: 5px;
-	border-top-width: 0;
-}
-.star-ui-card--inner-button-collapsible.show:after{
-	/*border-top: solid 5px #ccf;*/
-	border-top-width: 5px;
-	border-bottom-width: 0;
-}
-.star-ui-card--inner-body{
-	flex-grow: 1;
-	overflow: hidden;
-	transition: height 0.5s;
-}
-.star-ui-card--inner-body-inner{
-	overflow: auto;
-}
-</style>

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

@@ -1,132 +0,0 @@
-<template>
-	<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 { 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;
-
-@Register({
-	name:"su-base-popper",
-	internalOnly:true,
-	props: {
-		fromItem:{
-			type:Object
-		},
-		style:{
-			type:Object,
-			default:function(){return {};}
-		},
-		updateType:{
-			type:String,
-			default:"v-sync"
-		},
-		visible:{
-			type:Boolean,
-			default:false
-		}
-	},
-	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
-	})
-	fromItem!:Vue|HTMLElement;
-	private div!:HTMLDivElement;
-	private id!:string;
-	private updateType!:string;
-	private visible!:boolean;
-	@SuViewCtrlInjectIsMobile readonly isMobile!:false;
-	mounted():void{
-		window.addEventListener("click",this._clickCheck);
-		this._updateVisible();
-	}
-	beforeUnmount():void{
-		window.removeEventListener("click",this._clickCheck);
-	}
-	@Emit("out-click", (res:boolean)=>res)
-	_clickCheck(ev:MouseEvent):boolean{
-		var dom=ev.target;
-		while(dom&&dom!=document){
-			if(dom==this.$refs.root||(this.fromItem&&dom==((this.fromItem instanceof HTMLElement)?this.fromItem:this.fromItem.$el))){
-				return false;
-			}
-			dom=(dom as HTMLElement).parentElement;
-		}
-		return true;
-	}
-	private syncRequestId!:number;
-	_updateVisible():void{
-		if(this.visible){
-			this.updatePos();
-		}else{
-			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.baseStyle.bottom="0";
-				this.baseStyle.left="0";
-				this.baseStyle.width="100%";
-			}else{
-				const height=dom.clientHeight;
-				let top=0,left=0;
-				while(dom&&dom!=document){
-					top+=dom.offsetTop-dom.scrollTop;
-					left+=dom.offsetLeft-dom.scrollLeft;
-					dom=dom.offsetParent;
-				}
-				top+=height;
-				this.baseStyle.top=top+"px";
-				this.baseStyle.left=left+"px";
-				if(this.updateType=="v-sync"){
-					this.syncRequestId=requestAnimationFrame(this.updatePos);
-				}
-			}
-		}
-	}
-}
-</script>
-
-<style>
-.star-ui-base-popper{
-	position: fixed;
-}
-.star-ui-popper-background{
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	background-color: rgba(0,0,0,0.5);
-}
-</style>

package/src/components/content/context-menu-box/index.vue

@@ -1,117 +0,0 @@
-<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,5 +0,0 @@
-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";