@thestarweb/ui 1.4.2 → 1.5.0

package/package.json

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

@@ -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

@@ -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,

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

@@ -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 {

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";

package/src/components/menu/index.vue

@@ -0,0 +1,83 @@
+<template>
+	<component :is="menuComponent" :menu="menu" class="su-menu">
+		<template v-slot="data">
+			<div @click="handleItemClick(data)">
+				<slot v-if="$slots['default']" v-bind="data" />
+				<component v-else :is="displayComponent" :[useedKey]="data.path" @click.prevent>
+					{{data.title}}
+				</component>
+			</div>
+		</template>
+	</component>
+</template>
+
+<script lang="ts">
+import { Register, Prop } from "@ui-root/reg";
+import { ConcreteComponent } from "vue";
+import { Vue } from "vue-class-component";
+import HMenu from "./menu-h/index.vue";
+import VMenu from "./menu-v/index.vue";
+import { MenuItem } from "@ui-root/types";
+import '@ui-root/global-style.css';
+
+@Register({
+	name: 'su-menu',
+})
+export default class SuHMenu extends Vue {
+	@Prop({
+		type: Array,
+		required: true,
+	})
+	private menu!:MenuItem[];
+	@Prop({
+		type: String,
+		required: true,
+		default: 'h'
+	})
+	private direction!:"h"|"v"|"row";
+	private get menuComponent(){
+		if (["h",'row','r'].includes(this.direction)){
+			return HMenu;
+		}
+		return VMenu;
+	}
+	@Prop({
+		type: [String,Function,Object],
+		default: undefined,
+	})
+	private component!:string|Vue|Record<string, unknown>|ConcreteComponent|undefined;
+	private get displayComponent():string|Vue|ConcreteComponent|Record<string, unknown>{
+		if(this.component) return this.component;
+		// const vueRouterLink = resolveComponent('router-link');
+		// if(typeof vueRouterLink != 'string') return vueRouterLink;
+		return 'a';
+	}
+	@Prop({
+		type: String,
+		default: ()=>"",
+	})
+	private key!:string;
+	private get useedKey():string{
+		if(this.component && this.key) return this.key;
+		if(this.displayComponent == "a") return 'href';
+		return 'to';
+	}
+	private handleItemClick(data:MenuItem){debugger
+		if (!["h",'row','r'].includes(this.direction) && data.children){
+			return;
+		}
+		if ((this as any).$router) {
+			(this as any).$router.push(data.path);
+		} else {
+			history.pushState(null, '', data.path);
+		}
+	}
+}
+
+</script>
+<style>
+.su-menu a{
+	color: inherit;
+	text-decoration: none;
+}
+</style>

package/src/components/menu/menu-h/index.vue

@@ -0,0 +1,66 @@
+<template>
+	<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" />
+			</template>
+		</su-h-menu-item>
+	</div>
+</template>
+
+<script lang="ts">
+import { Register, Prop } from "@ui-root/reg";
+import { Vue } from 'vue-class-component';
+import SuHMenuChild from "./menu-h-child.vue";
+import SuHMenuItem from "./menu-h-item.vue";
+import { MenuItem } from "@ui-root/types";
+import '@ui-root/global-style.css';
+
+@Register({
+	name: 'su-h-menu',
+	watch:{
+		menu(this:SuHMenu){
+			this.splitMenu();
+		},
+	},
+	components:{
+		SuHMenuChild,
+		SuHMenuItem,
+	},
+	internalOnly:true,
+})
+export default class SuHMenu extends Vue {
+	@Prop({
+		type: Array,
+		required: true,
+	})
+	private menu!:MenuItem[];
+	private splitMenu(){
+		this.displayItem=[...this.menu];
+	}
+	private displayItem:MenuItem[]=[];
+	created():void{
+		this.splitMenu();
+	}
+}
+
+</script>
+<style>
+.star-ui-menu-h{
+	display: flex;
+	flex-direction: row;
+	overflow: visible;
+	position: relative;
+	padding: 0;
+	white-space: nowrap;
+}
+.star-ui-menu-h>.star-ui-menu-h--item-box>.star-ui-menu-h--item a{
+	line-height: 2;
+	border: solid 2px transparent;
+	transition: border 0.5s;
+	padding: 2px;
+}
+.star-ui-menu-h>.star-ui-menu-h--item-box:hover>.star-ui-menu-h--item a{
+	border-bottom-color: var(--star-ui-base-color);
+}
+</style>

package/src/components/menu/menu-h/menu-h-child.vue

@@ -0,0 +1,74 @@
+<template>
+	<div v-if="menu && menu.length>0" :class="['star-ui', 'star-ui-menu--chlild-box', 'star-ui-menu-h--chlild-box', `star-ui-menu-h--chlild-box-${direction}`]">
+		<component :is="itemComponent" v-for="item in menu" :key="item.path" :item="item">
+			<template v-slot="item">
+				<slot v-bind="item" />
+			</template>
+		</component>
+	</div>
+</template>
+
+<script lang="ts">
+import { Register, Prop } from "@ui-root/reg";
+import { Vue } from 'vue-class-component';
+import { MenuItem } from "@ui-root/types";
+import '@ui-root/global-style.css';
+
+@Register({
+	name: 'su-h-menu-child',
+	internalOnly: true,
+	components:{
+		// SuHMenuItem,
+	},
+})
+export default class SuHMenuChild extends Vue {
+	@Prop({
+		type: Array,
+		required: true,
+	})
+	private menu!:MenuItem[];
+	@Prop({})
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	private itemComponent!:any;
+	@Prop({
+		type: String,
+	})
+	private direction!:'right'|'bottom';
+}
+
+</script>
+<style>
+.star-ui-menu-h--chlild-box{
+	position: absolute;
+	background-color: var(--star-ui-backgorund-color);
+	opacity: 0;
+	transition: opacity 0.5s;
+	pointer-events: none;
+}
+*:hover>.star-ui-menu-h--chlild-box{
+	display: block;
+	opacity: 1;
+	pointer-events: auto;
+}
+.star-ui-menu-h--chlild-box-right{
+	left: 100%;
+	top:0;
+}
+.star-ui-menu-h--chlild-box-left{
+	right: 100%;
+	top:0;
+}
+.star-ui-menu-h--chlild-box-bottom{
+	left: 0;
+	top:100%;
+}
+.star-ui-menu-h--chlild-box{
+	border: solid 1px var(--star-ui-line-color);
+}
+.star-ui-menu-h--chlild-box>.star-ui-menu-h--item-box>.star-ui-menu-h--item{
+	border-bottom: solid 1px var(--star-ui-line-color);
+}
+.star-ui-menu-h--chlild-box>.star-ui-menu-h--item-box:last-child>.star-ui-menu-h--item{
+	border-bottom-width: 0;
+}
+</style>

package/src/components/menu/menu-h/menu-h-item.vue

@@ -0,0 +1,65 @@
+<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">
+			<slot v-bind="item" />
+		</div>
+		<su-h-menu-child :menu="item.children || []" :itemComponent="selfClass" :direction="childDirection">
+			<template v-slot="item">
+				<slot v-bind="item" />
+			</template>
+		</su-h-menu-child>
+	</div>
+</template>
+
+<script lang="ts">
+import { Register, Prop } 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";
+import { MenuItem } from "@ui-root/types";
+import '@ui-root/global-style.css';
+
+@Register({
+	name: 'su-h-menu-item',
+	internalOnly: true,
+	components:{
+		SuHMenuChild,
+	},
+	directives:{
+		isFocus,
+	}
+})
+export default class SuHMenuItem extends Vue {
+	isFocus=false;
+	@Prop({
+		type: Object,
+	})
+	private item!:MenuItem;
+	private selfClass = SuHMenuItem;
+	@Prop({
+		type: String,
+		default:'right',
+	})
+	private childDirection!:'right'|'bottom';
+}
+</script>
+<style>
+.star-ui-menu-h--item-box{
+	height: 100%;
+	overflow: visible;
+	position: relative;
+	padding: 0;
+	transition: background-color 0.5s;
+}
+.star-ui-menu-h--item-box:hover{
+	background-color: rgba(128,128,128,0.4);
+}
+.star-ui-menu-h--item{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center; 
+	height: 100%;
+	padding: 8px;
+}
+</style>