@thestarweb/ui 1.7.1 → 2.0.0-beta.2

package/src/components/select.vue

@@ -1,265 +0,0 @@
-<template>
-	<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">
-		<!-- 内容显示 -->
-		<div :class="['star-ui','star-ui-select--inner-content','star-ui-size-'+size]">{{this.showValue}}</div>
-		<!-- 后缀 -->
-		<div :class="['star-ui','start-ui-select--inner-suffix','star-ui-size-'+size]">
-			<i class="star-ui-icon-font star-ui-icon-arrow-down"/>
-		</div>
-		<!-- 选项弹窗 -->
-		<base-popper :from-item="$el" :visible="isFocused" @out-click="isFocused=false">
-			<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>
-					<div v-else v-for="item in valueMap" :key="item[0]" :class="['star-ui','star-ui-select--option','star-ui-size-'+size,'star-ui-container',{
-						'star-ui-select--option-sel':item[0]==this.modelValue
-					}]" @click="handleSelect(item[0])">{{item[1]}}</div>
-				</div>
-			</div>
-		</base-popper>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-import BasePopper from "./common/base-popper.vue";
-import { Register, Emit, Prop } from "@ui-root/reg";
-import { SuViewCtrlInjectIsMobile } from "@ui-root/outher";
-import SuTree from "./tree/index.vue";
-
-
-import "../global-style.css";
-
-@Register({
-	name:"su-select",
-	components:{
-		BasePopper,
-		SuTree
-	},
-	watch:{
-		isFocused(v){
-			if(v){
-				if(this.$el){
-					if(this.$el.clientWidth){
-						this.width=this.$el.clientWidth;
-					}
-				}
-			}
-		},
-		modelValue(){
-			this.updateTree();
-		}
-	}
-})
-export default class SuSelect extends Vue {
-	mounted():void{
-		this.updateTree();
-	}
-	declare $refs:{
-		tree:SuTree
-	};
-	@Prop({
-		type:[String,Number,Array],
-		default:""
-	})
-	readonly modelValue!:string;
-	@Prop({
-		type:String,
-		default:""
-	})
-	readonly name!:string;
-	@Prop({
-		type:String,
-		default:"medium"
-	})
-	private size!:string;
-	@Prop({
-		type:Array,
-		default:function(){return [];}
-	})
-	readonly options!:Record<string, unknown>[];
-	@Prop({
-		type:String,
-		default:"value"
-	})
-	readonly valueName!:string;
-	@Prop({
-		type:String,
-		default:"label"
-	})
-	readonly labelName!:string;
-	@Prop({
-		type:[String,Function],
-		default:()=>{
-			return "children"
-		}
-	})
-	children!:string|((item:Record<string, unknown>)=>Record<string, unknown>[]);
-	@Prop({
-		type:Boolean,
-		default:false
-	})
-	readonly showAsTree!:boolean;
-	@Prop({
-		type:String,
-		default:""
-	})
-	readonly pooperClass!:string;
-	isFocused=false;
-	@SuViewCtrlInjectIsMobile readonly isMobile!: boolean;
-	get valueMap():Map<string|number,string>{
-		const map=new Map();
-		if(this.showAsTree){
-			let task:Record<string, unknown>[] = [];
-			task.push(...this.options);
-			while(task.length){
-				const item = task.pop() as Record<string, unknown>;
-				let itemValue:string|number|undefined;
-				if(typeof this.valueName == "string"){
-					itemValue = (item[this.valueName]) as string|number|undefined;
-				// }else{
-				// 	itemValue = this.value(this.current);
-				}
-				if(itemValue!=undefined){
-					map.set(itemValue,(this.labelName in item)?item[this.labelName]:itemValue);
-				}
-				let children:Record<string, unknown>[]|undefined;
-				if(typeof this.children == "string"){
-					children = (item[this.children]) as Record<string, unknown>[]|undefined;
-				}else{
-					children = this.children(item);
-				}
-				children&&task.push(...children);
-			}
-		}else{
-			this.options.map((item)=>{
-				if(this.valueName in item){
-					const value=item[this.valueName];
-					const label=(this.labelName in item)?item[this.labelName]:value
-					map.set(value,label);
-				}
-			});
-		}
-		return map;
-	}
-	get showValue():string{
-		if(this.valueMap.has(this.modelValue)){
-			return this.valueMap.get(this.modelValue) as string;
-		}
-		return this.modelValue;
-	}
-	private width=280;
-	private updateTree(){
-		if(this.modelValue&&this.showAsTree){
-			this.$refs.tree.setCurrentByValue(this.modelValue);
-		}
-	}
-	@Emit("update:modelValue")
-	handleSelect(value:string):string{
-		//this.$emit("update:modelValue",value);
-		this.isFocused=false;
-		return value;
-	}
-	@Emit("update:modelValue")
-	haandleNodeClick(item:Record<string, unknown>,value:string|number|undefined):string|number|undefined{
-		this.isFocused=false;
-		this.$refs.tree.setCurrentByValue(this.modelValue);
-		return value;
-	}
-}
-</script>
-
-<style>
-/*基本样式*/
-.star-ui-select{
-	border: solid 1px var(--star-ui-input-border-color);
-	border-radius: var(--star-ui-border-radius);
-	display: inline-flex;
-	flex-direction: row;
-	width:var(--star-ui-input-default-width);
-	cursor: pointer;
-	color: var(--star-ui-regular-text-color);
-	background: var(--star-ui-backgorund-color);
-}
-/*选中时样式*/
-.star-ui-select:hover,.star-ui-select.is-focus{
-	border: solid 1px var(--star-ui-base-color);
-}
-/*内容显示区域占用全部剩余空间*/
-.star-ui-select--inner-content{
-	flex:1;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	text-align: left;
-}
-/*清除原生输入框的样式*/
-.star-ui-select--inner,.star-ui-select--inner:hover,.star-ui-select--inner:active,.star-ui-select--inner:focus{
-	border-width: 0px;
-	outline: none;
-	margin: 0;
-	padding: 0;
-}
-/*弹出层样式*/
-.star-ui-select--pooper{
-	background: var(--star-ui-backgorund-color);
-	border: solid 1px var(--star-ui-input-border-color);
-	border-radius: var(--star-ui-border-radius);
-	color: var(--star-ui-regular-text-color);
-}
-.star-ui-select--option{
-	cursor: pointer;
-}
-/*选中选项样式*/
-.star-ui-select--option-sel{
-	background: var(--star-ui-base-color);
-	color:var(--star-ui-backgorund-color);
-}
-/*选项的最大高度限制*/
-.star-ui-select--pooper-item-list{
-	overflow-x: hidden;
-	overflow-y: auto;
-	padding: 0;
-}
-.star-ui-select--pooper-item-list.star-ui-size-medium{
-	max-height: calc(var(--star-ui-input-medium-font-size) * 15);
-}
-.star-ui-select--pooper-item-list.star-ui-size-mini{
-	max-height: calc(var(--star-ui-input-mini-font-size) * 15);
-}
-
-/*移动样式*/
-.star-ui-select--pooper-title{
-	text-align: center;
-	line-height: 2;
-	font-weight: bold;
-	padding: var(--star-ui-default-padding);
-}
-.star-ui-view-control-mobile .star-ui-select--pooper{
-	width: 100%;
-}
-.star-ui-view-control.star-ui-view-control-mobile .star-ui-select--pooper{
-	border-radius: 0;
-	border-width: 0;
-}
-.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;
-}
-.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);
-}
-.star-ui-view-control-mobile .star-ui-select--pooper-item-list.star-ui-size-medium{
-	max-height: 50vh;
-}
-</style>

package/src/components/slider.vue

@@ -1,171 +0,0 @@
-<template>
-	<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 { Vue } from 'vue-class-component';
-import { Register, Prop, Emit } from "@ui-root/reg";
-import "../global-style.css";
-
-@Register({
-	name:"su-slider"
-})
-export default class SuSlider extends Vue {
-	declare $refs:{
-		bar:HTMLDivElement
-	};
-	private refBar:HTMLDivElement|null=null;
-
-	mounted():void{
-		this.refBar=this.$refs.bar;
-	}
-	beforeUnmount():void{
-		this.removeEvent;
-	}
-
-	@Prop({
-		type:String,
-		default:"medium"
-	})
-	public readonly size!:string;
-
-	@Prop({
-		type:Number,
-		default:0
-	})
-	readonly modelValue!:number;
-
-	@Prop({
-		type:Number,
-		default:0
-	})
-	public readonly min!:number;
-
-	@Prop({
-		type:Number,
-		default:100
-	})
-	public readonly max!:number;
-
-	@Prop({
-		type:Number,
-		default:0
-	})
-	public readonly setp!:number;
-
-	private moveStartValue=0;
-	private get displayValue():number{
-		let res=this.modelValue;
-		if(this.refBar && this.dx){
-			res=this.moveStartValue+this.dx/this.refBar.clientWidth*(this.max-this.min);
-		}
-		if(this.setp&&this.setp>0){
-			res= Math.round((res-this.min)/this.setp)*this.setp;
-		}
-		if(res>this.max) res=this.max;
-		else if(res<this.min) res=this.min;
-		return res;
-	}
-	private get positionLeft():number{
-		return (this.displayValue-this.min)*100/(this.max-this.min);
-	}
-	@Emit("update:modelValue")
-	private updateEvent(value:number):number{
-		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;
-		this.updateEvent(this.displayValue);
-	}
-	private handleTouchMove(ev:TouchEvent):void{
-		if(!this.touchstartPoint) return;
-		ev.preventDefault();
-		for(let i=0;i<ev.changedTouches.length;i++){
-			if(ev.changedTouches[i].identifier==this.touchstartPoint.identifier){
-				this.dx=ev.changedTouches[i].pageX-this.touchstartPoint.pageX;
-				this.updateEvent(this.displayValue);
-				break;
-			}
-		}
-		// this.dx+=ev.movementX;
-	}
-	private handleMouseUp():void{
-		this.updateEvent(this.displayValue);
-		this.dx=0;
-		this.removeEvent();
-		this.isHover=false;
-
-	}
-}
-</script>
-
-<style>
-.su-slider{
-	padding: calc(var(--star-ui-input-medium-font-size) );
-	user-select: none;
-}
-.su-slider--inner-runway{
-	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);
-	height: var(--star-ui-input-medium-font-size);
-	border-radius: 50%;
-	border: 1px solid var(--star-ui-base-color);
-	display: inline-block;
-	position: relative;
-	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,95 +0,0 @@
-<template>
-	<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>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-import { Watch } from "vue-property-decorator";
-import { Register, Prop, Emit } from "@ui-root/reg";
-import "../global-style.css";
-
-@Register({
-	name:"su-switch"
-})
-export default class SuInput extends Vue {
-	declare $refs:{
-		input:HTMLInputElement
-	};
-	@Prop({
-		type:Boolean,
-		default:true
-	})
-	modelValue!:boolean;
-	@Prop({
-		type:String,
-		default:""
-	})
-	name!:string;
-	@Prop({
-		type:String,
-		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;
-	}
-}
-</script>
-
-<style>
-.star-ui-switch{
-	--size: 20px;
-	display: inline-block;
-}
-.star-ui-switch.star-ui-size-medium{
-	--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);
-}
-.star-ui-switch input{
-	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;
-}
-.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;
-}
-.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;
-}
-.star-ui-switch input:checked+div span{
-	margin-left: calc(var(--size) * 1.5);
-}
-</style>

package/src/components/table.vue

@@ -1,59 +0,0 @@
-<template>
-	<div class="star-ui su-table star-ui-table">
-		<table class="star-ui star-ui-table--inner" rules="none" frame="void">
-			<thead class="star-ui star-ui-table--inner-thead">
-				<tr class="star-ui star-ui-table--inner-tr">
-					<th v-for="item in columns" :key="item.name+item.key" class="star-ui star-ui-container star-ui-table--inner-th">{{item.name}}</th>
-				</tr>
-			</thead>
-			<tbody class="star-ui star-ui-table--inner-tbody">
-				<tr v-for="(row,index) in data" :key="index" class="star-ui star-ui-table--inner-tr">
-					<td v-for="item in columns" :key="item.name+item.key" class="star-ui star-ui-container star-ui-table--inner-td">{{row[item.field]}}</td>
-				</tr>
-				<slot></slot>
-			</tbody>
-		</table>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-import { Register, Prop } from "@ui-root/reg";
-import "../global-style.css";
-
-
-@Register({
-	name:"su-table",
-	props: {
-		data:{
-			type:Array,
-			default:()=>[]
-		}
-	}
-})
-export default class SuTable extends Vue {
-	// @Prop({
-	// 	type:Array,
-	// 	default:()=>[]
-	// })
-	// data!:any[];
-	@Prop({
-		type:Array,
-		default:()=>[]
-	})
-	// eslint-disable-next-line
-	columns!:any[];
-}
-</script>
-
-<style>
-.star-ui-tabl{
-	width: 100%;
-}
-.star-ui-table--inner-thead{
-	background-color: var(--star-ui-table-head-color);
-}
-.star-ui-table--inner-tr{
-	border-bottom: 1px solid #e8eaec;
-}
-</style>

package/src/components/tree/index.vue

@@ -1,116 +0,0 @@
-<template>
-	<div :class="[
-		'star-ui',
-		'su-tree',
-		'star-ui-tree',
-		{
-			'star-ui-tree-highlight-current':highlightCurrent
-		}
-	]">
-		<tree-item v-for="(item, index) in treeData" :key="index" :size="size" :item="item" :label="label" :value="value" :children="children" :current="current" current-value="currentValue" @node-click="haandleChildNodeClick"></tree-item>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-import { Register, Prop } from "@ui-root/reg";
-import treeItem from "./tree-item.vue"
-
-
-import "../../global-style.css";
-
-@Register({
-	name:"su-tree",
-	components:{
-		treeItem
-	}
-})
-export default class SuTree extends Vue {
-	@Prop({
-		type:String,
-		default:()=>{
-			return "medium"
-		}
-	})
-	readonly size!:string;
-	@Prop({
-		type:Array,
-		default:()=>{
-			return []
-		}
-	})
-	readonly treeData!:Record<string, unknown>[];
-	@Prop({
-		type:[String,Function],
-		default:()=>{
-			return "label"
-		}
-	})
-	readonly label!:string|((item:Record<string, unknown>)=>string);
-	@Prop({
-		type:[String,Function],
-		default:()=>{
-			return "value"
-		}
-	})
-	readonly value!:string|((item:Record<string, unknown>)=>string|number);
-	@Prop({
-		type:[String,Function],
-		default:()=>{
-			return "children"
-		}
-	})
-	readonly children!:string|((item:Record<string, unknown>)=>Record<string, unknown>[]);
-	@Prop({
-		type:Boolean,
-		default:()=>{
-			return false
-		}
-	})
-	readonly highlightCurrent!:boolean;
-
-	private current:Record<string, unknown>={};
-	private get currentValue():string|number|undefined{
-		if(typeof this.value == "string"){
-			return (this.current[this.value]) as string|number|undefined;
-		}
-		return this.value(this.current);
-	}
-	public setCurrent(current:Record<string, unknown>):void{
-		this.current=current;
-	}
-	public setCurrentByValue(value:string|number):Record<string, unknown>|null{
-		let task:Record<string, unknown>[] = [];
-		task.push(...this.treeData);
-		while(task.length){
-			const item = task.pop() as Record<string, unknown>;
-			let itemValue:string|number|undefined;
-			if(typeof this.value == "string"){
-				itemValue = (item[this.value]) as string|number|undefined;
-			}else{
-				itemValue = this.value(item);
-			}
-			if(value == itemValue){
-				this.current = item;
-				return item;
-			}
-			let children:Record<string, unknown>[]|undefined;
-			if(typeof this.children == "string"){
-				children = (item[this.children]) as Record<string, unknown>[]|undefined;
-			}else{
-				children = this.children(item);
-			}
-			children&&task.push(...children);
-		}
-		this.current={};
-		return null;
-	}
-	haandleChildNodeClick(item:Record<string, unknown>,value:string|number|undefined,node:Record<string, unknown>):void{
-		this.current=item;
-		this.$emit("node-click",item,value,node);
-	}
-}
-</script>
-
-<style>
-</style>