@thestarweb/ui 1.4.2 → 1.6.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@thestarweb/ui",
-  "version": "1.4.2",
+  "version": "1.6.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 --esModuleInterop"
+    "tsc": "node ./build-ts/main.js&&tsc --p ./tsdconfig.json"
   },
   "author": "star_ss",
   "bugs": {

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

@@ -1,16 +1,16 @@
 <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>
 
 <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,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]" />
@@ -52,8 +52,8 @@
 </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 moment from "moment";
 import CallRender from "./call-render";
 
@@ -69,7 +69,7 @@ interface DateBaseInfo{
 	date:moment.Moment;
 }
 
-@Options({
+@Register({
 	name:"su-calendar",
 	components:{
 		vnodes: CallRender,
@@ -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/call-render.tsx

@@ -1,8 +1,9 @@
-import { Options, Vue } from 'vue-class-component';
-import { Prop } from "../reg";
+import { Vue } from 'vue-class-component';
+import { Prop, Register } from "../reg";
 
-@Options({
+@Register({
     name:'call-render',
+	internalOnly: true,
 })
 export default class CallRender extends Vue {
 	@Prop({

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>
@@ -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/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>
+			<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
@@ -55,7 +51,7 @@ export default class SuButton extends Vue {
 	private id!:string;
 	private updateType!:string;
 	private visible!:boolean;
-	@Inject({from:'viewCtrlInfo',default:{}}) readonly suControl!: ViewCtrlInfo;
+	@SuViewCtrlInjectIsMobile readonly isMobile!:false;
 	beforeCreate():void{
 		this.div=document.createElement("div");
 		document.body.append(this.div);
@@ -94,17 +90,19 @@ export default class SuButton extends Vue {
 			if(this.syncRequestId)cancelAnimationFrame(this.syncRequestId);
 		}
 	}
+	@SuViewCtrlInjectClassName
+	readonly ctrlClass!:string[];
 	updatePos():void{
 		if(this.fromItem){
 			let dom=(this.fromItem instanceof HTMLElement)?this.fromItem:this.fromItem.$el;
-			if(this.suControl.isMobile){
+			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.div.className=this.ctrlClass.join(' ');
 			}else{
-				this.div.className="star-ui su-view-control su-view-control-pc";
+				this.div.className=this.ctrlClass.join(' ');
 				const height=dom.clientHeight;
 				let top=0,left=0;
 				while(dom&&dom!=document){

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,133 @@
+<template>
+	<div class="star-ui su-page">
+		<header class="su-ui su-page--header">
+			<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="!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="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 { Prop, Register } from "@ui-root/reg";
+import { SuViewCtrlInjectIsMobile } from "@ui-root/outher";
+import { SuMenu } from "@ui-root/components/menu";
+import { MenuItem } from "@ui-root/types";
+import "@ui-root/global-style.css";
+
+@Register({
+	name:"su-page",
+	components: {
+		SuMenu,
+	}
+})
+export default class SuMain extends Vue {
+	@SuViewCtrlInjectIsMobile readonly isMobile!:boolean;
+	@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%;
+	z-index: 999999;
+}
+.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%;
+}
+.su-page--main{
+	overflow: auto;
+}
+</style>

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

@@ -0,0 +1,96 @@
+<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">
+			{{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 "@ui-root/global-style.css";
+
+export const InjectLabelWidth = Symbol('InjectLabelWidth');
+export const InjectLabelAlign = Symbol('InjectLabelAlign');
+
+@Register({
+	name:"su-form-item",
+	hideInDoc:true,
+})
+export default class SuButton extends Vue {
+	@Prop({
+		type:String,
+		default:()=>{
+			return 'label';
+		}
+	})
+	readonly label!:string;
+	@Prop({
+		type:[String, Number],
+	})
+	readonly labelWidth!:string|number|undefined;
+	@Inject({from:InjectLabelWidth})
+	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;
+	}
+	created(){
+		console.log(this.col);
+	}
+}
+</script>
+
+<style>
+.star-ui-form-item{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	overflow: hidden;
+}
+.star-ui-form-item--label{
+	overflow: hidden;
+}
+.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,51 @@
+<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 "@ui-root/global-style.css";
+import { Provide } from "vue-property-decorator";
+import { InjectLabelAlign, InjectLabelWidth } from "./form-item.vue";
+
+@Register({
+	name:"su-form"
+})
+export default class SuButton extends Vue {
+	@Prop({
+		autoType: "FormLabelAlign",
+		default:()=>{
+			return "right"
+		}
+	})
+	@Provide({to:InjectLabelAlign})
+	readonly labelAlign!:TypeFormLabelAlign;
+	@Prop({
+		type: Number
+	})
+	@Provide({to:InjectLabelWidth})
+	readonly labelWidth!:number|undefined;
+	@Prop({
+		type: Boolean,
+		default:()=>{
+			return true
+		}
+	})
+	readonly allowAotoMobile!:boolean;
+}
+</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,15 +1,15 @@
 <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>
 
 <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 {
@@ -76,5 +76,6 @@ export default class SuInput extends Vue {
 	flex:1;
 	color: unset;
 	background: unset;
+	width: 100%;
 }
 </style>

package/src/components/layout-h.vue

@@ -1,24 +1,23 @@
 <template>
-	<div class="star-ui su-h-layout">
+	<div class="star-ui su-h-layout star-ui-h-layout">
 		<slot></slot>
 	</div>
 </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 {
 }
 </script>
 
 <style>
-.su-h-layout{
+.star-ui-h-layout{
 	display: flex;
 	flex-direction: row;
 	width: 100%;
@@ -26,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,14 +1,15 @@
 <template>
-	<div class="star-ui su-main">
+	<div class="star-ui su-main star-ui-main">
 		<slot></slot>
 	</div>
 </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: {
 	}
@@ -18,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,14 +1,15 @@
 <template>
-	<div class="star-ui su-v-layout">
+	<div class="star-ui su-v-layout star-ui-v-layout">
 		<slot></slot>
 	</div>
 </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: {
 	}
@@ -18,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%;
@@ -26,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>