@thestarweb/ui 1.7.0 → 2.0.0-beta.1

package/src/components/content/menu/index.vue

@@ -1,86 +0,0 @@
-<template>
-	<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" />
-				<component v-else :is="displayComponent" :[useedKey]="data.path||'#'" @click.prevent>
-					<slot v-if="$slots['menu-text']" name="menu-text" v-bind="data" />
-					<template v-else>
-						{{data.title}}
-					</template>
-				</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>
-.star-ui-menu a{
-	color: inherit;
-	text-decoration: none;
-}
-</style>

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

@@ -1,68 +0,0 @@
-<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">
-				<div class="star-ui star-ui-menu--item star-ui-menu-h--item">
-					<slot v-bind="data" />
-				</div>
-			</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/content/menu/menu-h/menu-h-child.vue

@@ -1,74 +0,0 @@
-<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/content/menu/menu-h/menu-h-item.vue

@@ -1,66 +0,0 @@
-<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" @click="handleItemClick(item)">
-			<slot v-bind="item" />
-		</div> -->
-		<slot v-bind="item" />
-		<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, 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";
-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>

package/src/components/content/menu/menu-v/index.vue

@@ -1,56 +0,0 @@
-<template>
-	<div :class="['star-ui', 'star-ui-menu', 'star-ui-menu-v']">
-		<div>
-			<span @click="handlePathClick(0)"><span class="star-ui-icon-font star-ui-icon-home" />&gt;</span>
-			<span v-for="(item,index) in path" :key="`${index}-${item.path||'nopath'}`" @click="handlePathClick(index+1)">
-				{{item.title}}&gt;
-			</span>
-		</div>
-		<div v-for="item in current" :key="item.path" @click="handleItemClick(item)">
-			<slot v-bind="item" />
-		</div>
-	</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',
-	internalOnly:true,
-})
-export default class SuHMenu extends Vue {
-	@Prop({
-		type: Array,
-		required: true,
-	})
-	private menu!:MenuItem[];
-	private path:MenuItem[]=[];
-	private get current():MenuItem[]{
-		if(this.path.length == 0){
-			return this.menu;
-		}
-		const item = this.path[this.path.length-1];
-		const res = [...(item.children || [])];
-		if(item.path){
-			res.unshift(item);
-		}
-		return res;
-	}
-	private handlePathClick(index:number){
-		this.path = this.path.slice(0,index);
-	}
-	private handleItemClick(item:MenuItem, ev:MouseEvent){
-		if(item.children && item.children.length > 0 && (this.path.length==0 || item!=this.path[this.path.length-1])){
-			this.path.push(item);
-		}
-	}
-}
-
-</script>
-<style>
-
-</style>

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

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

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

@@ -1,134 +0,0 @@
-<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/main";
-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;
-	flex: 1;
-}
-</style>