@thestarweb/ui 1.4.0 → 1.5.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@thestarweb/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A UI lib",
   "scripts": {
     "build": "vue-cli-service build --target lib --name star-ui --dest dist/ src/main.ts",
-    "tsc": "node ./build-ts/main.js&&tsc ./out/main.ts -declaration -declarationDir ./types -lib DOM,ES2020,DOM.Iterable,ScriptHost --target ES5 --experimentalDecorators"
+    "tsc": "node ./build-ts/main.js&&tsc --p ./tsdconfig.json"
   },
   "author": "star_ss",
   "bugs": {
@@ -32,6 +32,7 @@
   ],
   "dependencies": {
     "core-js": "^3.15.2",
+    "moment": "^2.29.1",
     "vue-class-component": "^8.0.0-0"
   },
   "peerDependencies": {

package/readme.md

@@ -8,8 +8,8 @@ npm i @thestarweb/ui
 ```
 
 ```typescript
-import { createApp } from 'vue'
-import App from './App.vue'
+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

@@ -5,12 +5,12 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import { Prop } from "../reg";
+import { Vue } from "vue-class-component";
+import { Register, Prop } from "@ui-root/reg";
 
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-button"
 })
 export default class SuButton extends Vue {

package/src/components/calendar.vue

@@ -1,89 +1,190 @@
 <template>
-	<table class="star-ui-calendar" cellspacing="0" cellpadding="0">
-		<tr class="su-calendar--inner-head">
-			<th class="" v-for="(name,index) in displayHead" :key="index">{{name}}</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">{{day}}</td>
-		</tr>
-	</table>
+	<div class="star-ui 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="su-calendar--inner-head">
+				<th :class="`su-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)">
+					
+					<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 { Options, Vue } from 'vue-class-component';
-import { Prop } from "../reg";
+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";
 
-@Options({
-	name:"su-calendar"
+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,
+		type:[Date,String],
 		default:()=>{
 			return new Date();
 		}
 	})
-	public readonly displayMonth!:Date;
-	private get displayMonthStartDate():Date{
-		let date=new Date(this.displayMonth);
-		date.setMonth(-1);
-		date.setDate(1);
+	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 ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
+			return weekNames;
 		}
 	})
 	public readonly weekName!:string[];
 
-	private get displayHead():string[]{
-		return this.weekName;
-	}
-	private getMonthDate(month:number,year:number):number{
-		if(month==2){
-			if((year%100!=0&&year%4==0)||year%400==0) return 29;
-			else return 28;
+	@Prop({
+		type:Number,
+		default:0,
+		validator: (input:number): boolean=>{
+			return input>=0&&input<7
 		}
-		//if([1,3,5,7,8,10,12].)
-		let parity=month&1;
-		if(month<8?parity==1:parity==0) return 31;
-		return 30;
+	})
+	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():number[][]{
-		let res:number[][]=[[]];
+	private get displayData():DateBaseInfo[][]{
+		let res:DateBaseInfo[][]=[[]];
 		let now=res[0];
-		let month=this.displayMonthStartDate.getMonth();
-		let year=this.displayMonthStartDate.getFullYear()
-		let lastMonthDay=this.displayMonthStartDate.getDay();
-		//计算上个月开始的位置
-		let lastMonthStart=this.getMonthDate(month==1?12:month-1,year)-lastMonthDay;
-		for(let i=0;i<lastMonthDay;i++){
-			now.push(lastMonthStart+i);
-		}
-		const nowMonthDay=this.getMonthDate(month,year);
-		for(let i=1;i<=nowMonthDay;i++){
+		
+		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(i);
-		}
-		let j=1;
-		while(now.length<7){
-			now.push(j++);
+			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;
@@ -95,4 +196,49 @@ export default class SuCalendar extends Vue {
 	border: 1px solid #e8eaec;
 	width: 42px
 }
+.su-calendar--inner-cell.su-calendar--Sat,.su-calendar--inner-cell.su-calendar--Sun{
+	color: #f00;
+}
+.su-calendar--inner-cell.su-calendar--previous,.su-calendar--inner-cell.su-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

@@ -0,0 +1,22 @@
+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

@@ -13,15 +13,15 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import { Prop } from "../reg";
+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";
 
 
-@Options({
+@Register({
 	name:"su-card",
 	components:{
 		VLayout,
@@ -30,7 +30,7 @@ import SuMain from "./layout-main.vue";
 	}
 })
 export default class SuCard extends Vue {
-	$refs!: {
+	declare $refs: {
 		body:HTMLDivElement
 		bodyInner:HTMLDivElement
 	};

package/src/components/content/index.ts

@@ -0,0 +1 @@
+export { default as SuPage } from "./page.vue";

package/src/components/content/page.vue

@@ -0,0 +1,117 @@
+<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" />
+			<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>
+		</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>
+	</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 { 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({
+	name:"su-page",
+	components: {
+		SuMenu,
+	}
+})
+export default class SuMain extends Vue {
+	@Inject({from:SuViewControl.injectSymbol,default:{}}) readonly suControl!: ViewCtrlInfo;
+	@Prop({
+		type: String,
+		default: '',
+	})
+	private title!:string;
+	@Prop({
+		type: String,
+		default: '',
+	})
+	private logo!:string;
+	@Prop({
+		type: Array,
+		default: '',
+	})
+	private menu!:MenuItem[];
+	private isOpenMenu = false;
+}
+</script>
+
+<style>
+.su-page{
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+.su-page--header{
+	display: flex;
+	flex-direction: row;
+	background: #000;
+	color: #e6eaf0;
+	align-items: center;
+}
+.su-page--header>h1{
+	font-size: 20px;
+	line-height: 22px;
+	padding: 0 20px;
+}
+.su-page--menu-box{
+	flex: 1;
+	height: 100%;
+}
+.su-page--menu-box .star-ui-menu-h--chlild-box{
+	color: var(--star-ui-font-color);
+}
+.su-page--menu-box .su-menu{
+	height: 100%;
+}
+.su-page--mobile-menu-open{
+  margin-left: 15px;
+  font-size: 20px;
+}
+.su-page--mobile-menu-box{
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	transition: opacity 0.5s;
+	background-color: rgba(128, 128, 128, 0.5);
+}
+.su-page--mobile-menu-close{
+	pointer-events: none;
+	opacity: 0;
+}
+.su-page--mobile-menu-box .star-ui-menu-v{
+	margin-left: 0;
+	transition: margin-left 0.5s;
+	background-color: var(--star-ui-backgorund-color);
+	width: 80%;
+	height: 100%;
+	border-right: solid 1px var(--star-ui-line-color);
+}
+.su-page--mobile-menu-close .star-ui-menu-v{
+	margin-left: -100%;
+}
+</style>

package/src/components/input.vue

@@ -5,11 +5,11 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import { Prop, Emit } from "../reg";
+import { Vue } from 'vue-class-component';
+import { Register, Prop, Emit } from "@ui-root/reg";
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-input"
 })
 export default class SuInput extends Vue {
@@ -18,8 +18,8 @@ export default class SuInput extends Vue {
 		default:""
 	})
 	modelValue!:string|number;
-	$refs!:{
-		input:HTMLInputElement
+	declare $refs:{
+		input:HTMLInputElement,
 	};
 	@Prop({
 		type:String,

package/src/components/layout-h.vue

@@ -5,13 +5,12 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from "vue-class-component";
+import { Register } from "@ui-root/reg";
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-h-layout",
-	props: {
-	}
 })
 export default class SuHLayout extends Vue {
 }

package/src/components/layout-main.vue

@@ -5,10 +5,11 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from "vue-class-component";
+import { Register } from "@ui-root/reg";
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-main",
 	props: {
 	}

package/src/components/layout-v.vue

@@ -5,10 +5,11 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from "vue-class-component";
+import { Register } from "@ui-root/reg";
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-v-layout",
 	props: {
 	}

package/src/components/line-h.vue

@@ -3,10 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from "vue-class-component";
+import { Register } from "@ui-root/reg";
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-h-line",
 	props: {
 	}
@@ -18,11 +19,11 @@ export default class SuHLine extends Vue {
 <style>
 .su-h-line{
 	background-color:var(--star-ui-line-color);
-    width:100%;
-    height:var(--star-ui-line-width);
-    min-height:var(--star-ui-line-width);
-    max-height:var(--star-ui-line-width);
-    flex:0 0 var(--star-ui-line-width);
-    padding: 0;
+	width:100%;
+	height:var(--star-ui-line-width);
+	min-height:var(--star-ui-line-width);
+	max-height:var(--star-ui-line-width);
+	flex:0 0 var(--star-ui-line-width);
+	padding: 0;
 }
 </style>

package/src/components/line-v.vue

@@ -3,10 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from "vue-class-component";
+import { Register } from "@ui-root/reg";
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-v-line",
 	props: {
 	}
@@ -18,11 +19,11 @@ export default class SuVLine extends Vue {
 <style>
 .su-v-line{
 	background-color:var(--star-ui-line-color);
-    /*height:100%;*/
-    width:var(--star-ui-line-width);
-    min-width:var(--star-ui-line-width);
-    max-width:var(--star-ui-line-width);
-    flex:0 0 var(--star-ui-line-width);
-    padding: 0;
+	/*height:100%;*/
+	width:var(--star-ui-line-width);
+	min-width:var(--star-ui-line-width);
+	max-width:var(--star-ui-line-width);
+	flex:0 0 var(--star-ui-line-width);
+	padding: 0;
 }
 </style>

package/src/components/menu/index.ts

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