@thestarweb/ui 1.4.2 → 1.6.0

package/src/components/line-h.vue

@@ -1,12 +1,13 @@
 <template>
-	<div class="star-ui su-h-line"></div>
+	<div class="star-ui su-h-line star-ui-h-line"></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-line",
 	props: {
 	}
@@ -16,13 +17,13 @@ export default class SuHLine extends Vue {
 </script>
 
 <style>
-.su-h-line{
+.star-ui-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

@@ -1,12 +1,13 @@
 <template>
-	<div class="star-ui su-v-line"></div>
+	<div class="star-ui su-v-line star-ui-v-line"></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-line",
 	props: {
 	}
@@ -16,13 +17,13 @@ export default class SuVLine extends Vue {
 </script>
 
 <style>
-.su-v-line{
+.star-ui-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,86 @@
+<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/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>

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

@@ -0,0 +1,56 @@
+<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/select.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['star-ui','star-ui-select',{'is-focus':isFocused}]" @click="isFocused=!isFocused">
+	<div :class="['star-ui', 'su-select','star-ui-select',{'is-focus':isFocused}]" @click="isFocused=!isFocused">
 		<!-- 原生组件 -->
 		<select :name="name" style="display: none"></select>
 		<input v-if="false" type="text" :value="1" class="star-ui star-ui-select--inner">
@@ -11,8 +11,8 @@
 		</div>
 		<!-- 选项弹窗 -->
 		<base-popper :from-item="$el" :visible="isFocused" @out-click="isFocused=false">
-			<div :class="['star-ui','star-ui-select--pooper',pooperClass]" :style="{width:suControl.isMobile?'100%':(width+'px')}">
-				<div class="star-ui star-ui-select--pooper-title" v-if="suControl.isMobile">请选择</div>
+			<div :class="['star-ui','star-ui-select--pooper',pooperClass]" :style="{width:isMobile?'100%':(width+'px')}">
+				<div class="star-ui star-ui-select--pooper-title" v-if="isMobile">请选择</div>
 				<div :class="['star-ui','star-ui-select--pooper-item-list','star-ui-size-'+size]">
 
 					<su-tree v-if="showAsTree" ref="tree" highlight-current :size="size" :treeData="options" :label="labelName" :value="valueName" :children="children" @node-click="haandleNodeClick"></su-tree>
@@ -26,18 +26,16 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 import BasePopper from "./common/base-popper.vue";
-import { Inject } from "vue-property-decorator";
-import { Emit, Prop } from "../reg";
-import { ViewCtrlInfo } from "../types";
+import { Register, Emit, Prop } from "@ui-root/reg";
+import { SuViewCtrlInjectIsMobile } from "@ui-root/outher";
 import SuTree from "./tree/index.vue";
-import ViewControl from "./view-control.vue";
 
 
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-select",
 	components:{
 		BasePopper,
@@ -113,7 +111,7 @@ export default class SuSelect extends Vue {
 	})
 	readonly pooperClass!:string;
 	isFocused=false;
-	@Inject({from:ViewControl.injectSymbol,default:{}}) readonly suControl!: ViewCtrlInfo;
+	@SuViewCtrlInjectIsMobile readonly isMobile!: boolean;
 	get valueMap():Map<string|number,string>{
 		const map=new Map();
 		if(this.showAsTree){
@@ -242,26 +240,26 @@ export default class SuSelect extends Vue {
 	font-weight: bold;
 	padding: var(--star-ui-default-padding);
 }
-.su-view-control-mobile .star-ui-select--pooper{
+.star-ui-view-control-mobile .star-ui-select--pooper{
 	width: 100%;
 }
-.su-view-control.su-view-control-mobile .star-ui-select--pooper{
+.star-ui-view-control.star-ui-view-control-mobile .star-ui-select--pooper{
 	border-radius: 0;
 	border-width: 0;
 }
-.su-view-control.su-view-control-mobile .star-ui-select--option{
+.star-ui-view-control.star-ui-view-control-mobile .star-ui-select--option{
 	border-radius: 0;
 	padding-left: 10px;
 	border-left: 5px solid transparent;
 	border-top: 1px solid var(--star-ui-input-border-color);
 	line-height: 1.5;
 }
-.su-view-control.su-view-control-mobile .star-ui-select--option-sel{
+.star-ui-view-control.star-ui-view-control-mobile .star-ui-select--option-sel{
 	background: initial;
 	color: var(--star-ui-base-color);
 	border-left: 5px solid var(--star-ui-base-color);
 }
-.su-view-control-mobile .star-ui-select--pooper-item-list.star-ui-size-medium{
+.star-ui-view-control-mobile .star-ui-select--pooper-item-list.star-ui-size-medium{
 	max-height: 50vh;
 }
 </style>

package/src/components/slider.vue

@@ -7,11 +7,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-slider"
 })
 export default class SuSlider extends Vue {

package/src/components/switch.vue

@@ -1,19 +1,19 @@
 <template>
-	<div :class="['star-ui','star-ui-switch','star-ui-size-'+size]">
+	<div :class="['star-ui', 'su-switch','star-ui-switch','star-ui-size-'+size]">
 		<label>
-            <input ref="input" type="checkbox" :name="name" :checked="modelValue" @change="handeleChange"/>
-            <div><span></span></div>
-        </label>
+			<input ref="input" type="checkbox" :name="name" :checked="modelValue" @change="handeleChange"/>
+			<div><span></span></div>
+		</label>
 	</div>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 import { Watch } from "vue-property-decorator";
-import { Prop, Emit } from "../reg";
+import { Register, Prop, Emit } from "@ui-root/reg";
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-switch"
 })
 export default class SuInput extends Vue {
@@ -35,61 +35,61 @@ export default class SuInput extends Vue {
 		default:"medium"
 	})
 	size!:string;
-    @Emit("update:modelValue")
-    private handeleChange():boolean{
-        const nowChecked = this.$refs.input.checked;
-        this.$refs.input.checked = this.modelValue;
-        return nowChecked;
-    }
-    @Watch("modelValue")
-    private modelValueChange(newValue:boolean){
-        this.$refs.input.checked = newValue;
-    }
+	@Emit("update:modelValue")
+	private handeleChange():boolean{
+		const nowChecked = this.$refs.input.checked;
+		this.$refs.input.checked = this.modelValue;
+		return nowChecked;
+	}
+	@Watch("modelValue")
+	private modelValueChange(newValue:boolean){
+		this.$refs.input.checked = newValue;
+	}
 }
 </script>
 
 <style>
 .star-ui-switch{
-    --size: 20px;
-    display: inline-block;
+	--size: 20px;
+	display: inline-block;
 }
 .star-ui-switch.star-ui-size-medium{
-    --size: calc(var(--star-ui-input-medium-font-size) * 1.2);
+	--size: calc(var(--star-ui-input-medium-font-size) * 1.2);
 }
 .star-ui-switch.star-ui-size-mini{
-    --size: calc(var(--star-ui-input-mini-font-size) * 1.2);
+	--size: calc(var(--star-ui-input-mini-font-size) * 1.2);
 }
 .star-ui-switch input{
-    display: none;
+	display: none;
 }
 .star-ui-switch div{
-    width: calc(var(--size) * 2.5);
-    height: var(--size);
-    border: solid 1px var(--star-ui-base-color);
-    border-radius: var(--size);
-    overflow: hidden;
+	width: calc(var(--size) * 2.5);
+	height: var(--size);
+	border: solid 1px var(--star-ui-base-color);
+	border-radius: var(--size);
+	overflow: hidden;
 }
 .star-ui-switch div span{
-    display: inline-block;
-    width: calc(var(--size) - 2px);
-    height: calc(var(--size) - 2px);
-    border-radius: 50%;
-    border: solid 1px var(--star-ui-base-color);
-    position: relative;
-    background: var(--star-ui-backgorund-color);
-    transition: margin-left 0.1s;
+	display: inline-block;
+	width: calc(var(--size) - 2px);
+	height: calc(var(--size) - 2px);
+	border-radius: 50%;
+	border: solid 1px var(--star-ui-base-color);
+	position: relative;
+	background: var(--star-ui-backgorund-color);
+	transition: margin-left 0.1s;
 }
 .star-ui-switch div span::before{
-    content: "";
-    width: 100px;
-    height: 100px;
-    background: var(--star-ui-base-color);
-    position: absolute;
-    right: 50%;
-    top:-20px;
-    z-index: -1;
+	content: "";
+	width: 100px;
+	height: 100px;
+	background: var(--star-ui-base-color);
+	position: absolute;
+	right: 50%;
+	top:-20px;
+	z-index: -1;
 }
 .star-ui-switch input:checked+div span{
-    margin-left: calc(var(--size) * 1.5);
+	margin-left: calc(var(--size) * 1.5);
 }
 </style>