@thestarweb/ui 1.4.0 → 1.5.0

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>

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

@@ -26,10 +26,10 @@
 </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 { Register, Emit, Prop } from "@ui-root/reg";
 import { ViewCtrlInfo } from "../types";
 import SuTree from "./tree/index.vue";
 import ViewControl from "./view-control.vue";
@@ -37,7 +37,7 @@ import ViewControl from "./view-control.vue";
 
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-select",
 	components:{
 		BasePopper,

package/src/components/slider.vue

@@ -1,17 +1,17 @@
 <template>
-	<div :class="['star-ui','su-slider','star-ui-size-'+size]">
-		<div ref="bar" class="su-slider--inner-runway">
+	<div :class="['star-ui','su-slider','star-ui-size-'+size,{'su-slider-moving':isHover}]">
+		<div ref="bar" class="su-slider--inner-runway" @click="handleBarClick">
 			<div class="su-slider--inner-button-wrapper" :style="{left:positionLeft+'%'}" @mousedown="handleMouseDown" @touchstart="handleTouchStart"></div>
 		</div>
 	</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-slider"
 })
 export default class SuSlider extends Vue {
@@ -78,25 +78,41 @@ export default class SuSlider extends Vue {
 		return value;
 	}
 
+	private handleBarClick(ev:MouseEvent){
+		if(ev.target&&ev.target==this.refBar){
+			let res=this.min+ev.offsetX/this.refBar.clientWidth*(this.max-this.min);
+			if(this.setp&&this.setp>0){
+				res=Math.round((res-this.min)/this.setp)*this.setp;
+			}
+			this.updateEvent(res);
+		}
+	}
+
 	private dx=0;
+	private isHover=false;
 
 	private handleMouseDown():void{
 		window.addEventListener("mousemove",this.handleMouseMove);
 		window.addEventListener("mouseup",this.handleMouseUp);
+		window.addEventListener("blur",this.handleMouseUp);
 		this.moveStartValue=this.modelValue;
+		this.isHover=true;
 	}
 	private touchstartPoint:Touch|null=null;
 	private handleTouchStart(ev:TouchEvent):void{
 		window.addEventListener("touchmove",this.handleTouchMove,{ passive: false });
 		window.addEventListener("touchend",this.handleMouseUp,{ passive: false });
+		window.addEventListener("blur",this.handleMouseUp);
 		this.touchstartPoint=ev.changedTouches[0];
 		this.moveStartValue=this.modelValue;
+		this.isHover=true;
 	}
 	private removeEvent():void{
 		window.removeEventListener("mousemove",this.handleMouseMove);
 		window.removeEventListener("mouseup",this.handleMouseUp);
 		window.removeEventListener("touchmove",this.handleTouchMove);
 		window.removeEventListener("touchend",this.handleMouseUp);
+		window.removeEventListener("blur",this.handleMouseUp);
 	}
 	private handleMouseMove(ev:MouseEvent):void{
 		this.dx+=ev.movementX;
@@ -118,6 +134,8 @@ export default class SuSlider extends Vue {
 		this.updateEvent(this.displayValue);
 		this.dx=0;
 		this.removeEvent();
+		this.isHover=false;
+
 	}
 }
 </script>
@@ -128,8 +146,9 @@ export default class SuSlider extends Vue {
 	user-select: none;
 }
 .su-slider--inner-runway{
-	height: 2px;
+	height: 4px;
 	background-color: var(--star-ui-input-border-color);
+	cursor: pointer;
 }
 .su-slider--inner-button-wrapper{
 	width: var(--star-ui-input-medium-font-size);
@@ -138,9 +157,15 @@ export default class SuSlider extends Vue {
 	border: 1px solid var(--star-ui-base-color);
 	display: inline-block;
 	position: relative;
-	margin-left: calc(0px - var(--star-ui-input-medium-font-size) / 2);
-	top: calc(0px - var(--star-ui-input-medium-font-size) / 2);
+	margin-left: calc(2px - var(--star-ui-input-medium-font-size) / 2);
+	top: calc(2px - var(--star-ui-input-medium-font-size) / 2);
 	cursor: pointer;
 	background-color: var(--star-ui-backgorund-color);
+	background-image: radial-gradient(var(--star-ui-backgorund-color) 20%, var(--star-ui-base-color));
+}
+.su-slider .su-slider--inner-button-wrapper:hover,.su-slider.su-slider-moving .su-slider--inner-button-wrapper{
+	/*background-color: var(--star-ui-base-color);*/
+	background-image: radial-gradient(var(--star-ui-backgorund-color) 10%, var(--star-ui-base-color) 90%);
+	transform: scale(1.2,1.2);
 }
 </style>

package/src/components/switch.vue

@@ -1,19 +1,19 @@
 <template>
 	<div :class="['star-ui','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>

package/src/components/table.vue

@@ -17,12 +17,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-table",
 	props: {
 		data:{

package/src/components/tree/index.vue

@@ -11,14 +11,14 @@
 </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 treeItem from "./tree-item.vue"
 
 
 import "../../global-style.css";
 
-@Options({
+@Register({
 	name:"su-tree",
 	components:{
 		treeItem

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

@@ -22,18 +22,19 @@
 </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 treeItem from "./tree-item.vue" 
 
 
 import "../../global-style.css";
 
-@Options({
+@Register({
 	name:"su-tree-item",
 	components:{
 		treeItem
-	}
+	},
+	internalOnly: true,
 })
 export default class SuTreeItem extends Vue {
 	readonly isExpand=false;

package/src/components/view-control.vue

@@ -5,10 +5,9 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import { InjectionKey } from 'vue';
+import { Vue } from 'vue-class-component';
 
-import { Prop } from "../reg";
+import { Register, Prop } from "@ui-root/reg";
 import { Provide } from "vue-property-decorator";
 
 import { ViewCtrlInfo } from "../types";
@@ -17,7 +16,7 @@ import "../global-style.css";
 type DeviceType='auto'|'mobile'|'pc';
 
 
-@Options({
+@Register({
 	name:"su-view-control",
 	watch:{
 		$isMobile(newValue){

package/src/directives/is-focus.ts

@@ -0,0 +1,10 @@
+export default {
+	mounted(el:HTMLElement, cb:any){
+		el.addEventListener("mousemove", () => {
+			cb.value(true);
+		});
+		el.addEventListener("mouseout", () => {
+			cb.value(false);
+		});
+	}
+}