@thestarweb/ui 1.7.1 → 2.0.0-beta.1

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

@@ -1,116 +0,0 @@
-<template>
-	<div :class="`star-ui su-form-item star-ui-form-item star-ui-col-${col} star-ui-form--label-align-${labelAlign||pLabelAlign}`">
-		<div ref="labelDiv" class="start-ui star-ui-container star-ui-form-item--label" :style="labelStyle">
-			{{label}}
-			<slot name="label"></slot>
-		</div>
-		<div class="start-ui star-ui-container star-ui-form-item--content">
-			<slot></slot>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Inject } from "vue-property-decorator";
-import { Register, Prop } from "@ui-root/reg";
-import { TypeFormLabelAlign } from "@ui-root/outher";
-import { Bus } from "./form.vue";
-
-import "@ui-root/global-style.css";
-
-export const InjectLabelWidth = Symbol('InjectLabelWidth');
-export const InjectLabelAlign = Symbol('InjectLabelAlign');
-export const InjectEventBus = Symbol('InjectEventBus');
-
-@Register({
-	name:"su-form-item",
-	hideInDoc:true,
-	watch:{
-		label(this:SuButton){
-			this.bus&&this.bus.labelUpdate(this);
-		}
-	}
-})
-export default class SuButton extends Vue {
-	declare $refs: {
-		labelDiv: HTMLDivElement
-	};
-	@Prop({
-		type:String,
-		default:()=>{
-			return 'label';
-		}
-	})
-	readonly label!:string;
-	@Prop({
-		type:[String, Number],
-	})
-	readonly labelWidth!:string|number|undefined;
-	@Inject({from:InjectLabelWidth,default:undefined})
-	readonly pLabelWidth!:string|number|undefined;
-	@Prop({
-		autoType: "FormLabelAlign",
-	})
-	readonly labelAlign!:TypeFormLabelAlign;
-	@Inject({from:InjectLabelAlign,default:"right"})
-	readonly pLabelAlign!:TypeFormLabelAlign;
-	@Prop({
-		type:Number,
-		default:()=>{
-			return 24;
-		}
-	})
-	readonly col!:number;
-	private get labelStyle():Record<string, unknown>{
-		const ret:Record<string, unknown>={};
-		const labelWidth = this.labelWidth || this.pLabelWidth;
-		if(labelWidth){
-			ret.width=typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth;
-		}
-		return ret;
-	}
-	@Inject({from:InjectEventBus})
-	readonly bus!:Bus|undefined;
-	created(){
-		if(this.bus){
-			this.bus.addItem(this);
-		}
-	}
-	beforeUnmount(){
-		if(this.bus){
-			this.bus.removeItem(this);
-		}
-	}
-}
-</script>
-
-<style>
-.star-ui-form-item{
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	overflow: hidden;
-}
-.star-ui-form-item--label{
-	overflow: hidden;
-	box-sizing: border-box;
-}
-.star-ui-form-item--content{
-	flex: 1;
-}
-.star-ui-form-item--content>.star-ui-select,.star-ui-form-item--content>.star-ui-input{
-	width: 100%;
-}
-
-.star-ui-form--label-align-left .star-ui-form-item--label, .star-ui-form--label-align-top .star-ui-form-item--label{
-	text-align: left;
-}
-.star-ui-form--label-align-right .star-ui-form-item--label{
-	text-align: right;
-}
-.star-ui-form-item.star-ui-form--label-align-top{
-	flex-direction: column;
-	align-items: stretch;
-}
-</style>

package/src/components/form/form/form.vue

@@ -1,109 +0,0 @@
-<template>
-	<form :class="`star-ui su-form star-ui-form ${allowAotoMobile?'star-ui-form--auto-mobile':''}`">
-		<slot></slot>
-	</form>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Register, Prop } from "@ui-root/reg";
-import type { TypeFormLabelAlign } from "@ui-root/outher";
-import { Provide } from "vue-property-decorator";
-import Item, { InjectEventBus, InjectLabelAlign, InjectLabelWidth } from "./form-item.vue";
-
-import "@ui-root/global-style.css";
-
-export interface Bus{
-	addItem:(item:Item)=>void,
-	removeItem:(item:Item)=>void,
-	labelUpdate:(item:Item)=>void,
-}
-
-@Register({
-	name:"su-form",
-})
-export default class SuButton extends Vue {
-	@Prop({
-		autoType: "FormLabelAlign",
-		default:()=>{
-			return "right"
-		}
-	})
-	@Provide({to:InjectLabelAlign,reactive:true})
-	readonly labelAlign!:TypeFormLabelAlign;
-	@Prop({
-		type: Number
-	})
-	readonly labelWidth!:number|undefined;
-	@Prop({
-		type: Boolean,
-		default:()=>{
-			return true
-		}
-	})
-	readonly allowAotoMobile!:boolean;
-	@Provide({to:InjectEventBus,reactive:true})
-	private bus:Bus|undefined;
-	private items=new Set<Item>();
-	private addItem(item:Item):void{
-		this.items.add(item);
-		this.$nextTick(this.updateLabelWidth);
-	}
-	private removeItem(item:Item):void{
-		this.items.delete(item);
-		this.$nextTick(this.updateLabelWidth);
-	}
-	private updateLabelWidth(){
-		if(!this.isLoaded) return;
-		if(typeof this.labelWidth === 'undefined'){
-			this.sendLabelWidth = undefined;
-		}else if(this.labelWidth === 0){
-			this.sendLabelWidth=undefined;
-			this.$nextTick(() => {
-				let maxWidth = 0;
-				this.items.forEach((item => {
-					if((item.labelAlign||this.labelAlign) === 'top'){
-						return;
-					}
-					const width = item.$refs.labelDiv.offsetWidth;
-					if(width>maxWidth){
-						maxWidth=width;
-					}
-				}));
-				this.sendLabelWidth=maxWidth;
-			})
-		}else{
-			this.sendLabelWidth=this.labelWidth;
-		}
-	}
-	private isLoaded=false;
-	@Provide({to:InjectLabelWidth,reactive:true})
-	private sendLabelWidth:number|undefined=0;
-	created(){
-		this.bus={
-			addItem: this.addItem,
-			removeItem: this.removeItem,
-			labelUpdate: this.updateLabelWidth,
-		}
-	}
-	mounted(){
-		this.$nextTick(() => {
-			this.isLoaded=true;
-			this.updateLabelWidth();
-		});
-	}
-	beforeUnmount(){
-		this.isLoaded=false;
-	}
-}
-</script>
-<style>
-.star-ui-form{
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-.star-ui-view-control.star-ui-view-control-mobile .star-ui-form--auto-mobile>.star-ui-form-item{
-	width: 100%;
-}
-</style>

package/src/components/form/form/index.ts

@@ -1,2 +0,0 @@
-export { default as SuForm } from "./form.vue";
-export { default as SuFormItem } from "./form-item.vue";

package/src/components/form/index.ts

@@ -1 +0,0 @@
-export * from "./form/index";

package/src/components/input.vue

@@ -1,89 +0,0 @@
-<template>
-	<div :class="['star-ui', 'su-input','star-ui-input',{'is-focus':isFocused}]">
-		<input type="text" ref="input" :value="modelValue" :name="name" :class="['star-ui','star-ui-input--inner','star-ui-size-'+size]" @input.stop="handleInput" @focus="handleFocus" @blur="handleBlur">
-	</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-input"
-})
-export default class SuInput extends Vue {
-	@Prop({
-		type:[String,Number],
-		default:""
-	})
-	modelValue!:string|number;
-	declare $refs:{
-		input:HTMLInputElement,
-	};
-	@Prop({
-		type:String,
-		default:""
-	})
-	name!:string;
-	@Prop({
-		type:String,
-		default:"medium"
-	})
-	size!:string;
-	isFocused=false;
-	@Emit("update:modelValue")
-	emitInput(data:string):string{
-		return data;
-	}
-	handleInput(event:InputEvent):void{
-		if(event.target){
-			var target=event.target as HTMLInputElement;
-			this.$emit("update:modelValue",target.value);
-			this.emitInput(target.value)
-			this.$nextTick(()=>target.value=(this.modelValue as string));//数字会自动转换成字符串
-			// return target.value;
-		}
-		// return "";
-	}
-	@Emit("focus")
-	private  handleFocus():void{
-		this.isFocused=true;
-	}
-	@Emit("blur")
-	private handleBlur():void{
-		this.isFocused=false;
-	}
-	public focus():void{
-		this.$refs.input.focus();
-	}
-	public blur():void{
-		this.$refs.input.blur();
-	}
-}
-</script>
-
-<style>
-.star-ui-input{
-	display: inline-flex;
-	border: solid 1px var(--star-ui-input-border-color);
-	border-radius: var(--star-ui-border-radius);
-	flex-direction: row;
-	width:var(--star-ui-input-default-width);
-	overflow: hidden;
-	color: var(--star-ui-regular-text-color);
-	background: var(--star-ui-backgorund-color);
-}
-.star-ui-input:hover,.star-ui-input.is-focus{
-	border: solid 1px var(--star-ui-base-color);
-}
-.star-ui-input--inner,.star-ui-input--inner:hover,.star-ui-input--inner:active,.star-ui-input--inner:focus{
-	border-width: 0px;
-	outline: none;
-	margin: 0;
-	flex:1;
-	color: unset;
-	background: unset;
-	width: 100%;
-}
-</style>

package/src/components/layout/auto-direction/index.vue

@@ -1,28 +0,0 @@
-<template>
-	<div class="star-ui star-ui-auto-direction su-auto-direction">
-		<slot />
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Register } from "@ui-root/reg";
-import "@ui-root/global-style.css";
-
-@Register({
-	name:"su-auto-direction",
-})
-export default class SuAutoDirection extends Vue {
-}
-</script>
-
-<style>
-.star-ui-auto-direction{
-	display: flex;
-	padding: 0;
-	flex-direction: row;
-}
-.star-ui-view-control.star-ui-view-control-mobile .star-ui-auto-direction{
-	flex-direction: column;
-}
-</style>

package/src/components/layout/index.ts

@@ -1 +0,0 @@
-export { default as SuAutoDirection } from "./auto-direction/index.vue";

package/src/components/layout-h.vue

@@ -1,34 +0,0 @@
-<template>
-	<div class="star-ui su-h-layout star-ui-h-layout">
-		<slot></slot>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Register } from "@ui-root/reg";
-import "../global-style.css";
-
-@Register({
-	name:"su-h-layout",
-})
-export default class SuHLayout extends Vue {
-}
-</script>
-
-<style>
-.star-ui-h-layout{
-	display: flex;
-	flex-direction: row;
-	width: 100%;
-	height: 100%;
-	padding: 0;
-	overflow: hidden;
-}
-.star-ui-h-layout>*{
-	flex:0 0 auto;
-}
-.star-ui-h-layout>.star-ui-main{
-	width: 0;
-}
-</style>

package/src/components/layout-main.vue

@@ -1,25 +0,0 @@
-<template>
-	<div class="star-ui su-main star-ui-main">
-		<slot></slot>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Register } from "@ui-root/reg";
-import "../global-style.css";
-
-@Register({
-	name:"su-main",
-	props: {
-	}
-})
-export default class SuMain extends Vue {
-}
-</script>
-
-<style>
-.star-ui-main{
-	flex: 1;
-}
-</style>

package/src/components/layout-v.vue

@@ -1,36 +0,0 @@
-<template>
-	<div class="star-ui su-v-layout star-ui-v-layout">
-		<slot></slot>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Register } from "@ui-root/reg";
-import "../global-style.css";
-
-@Register({
-	name:"su-v-layout",
-	props: {
-	}
-})
-export default class SuVLayout extends Vue {
-}
-</script>
-
-<style>
-.star-ui-v-layout{
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	height: 100%;
-	padding: 0;
-	overflow: hidden;
-}
-.star-ui-v-layout>*{
-	flex:0 0 auto;
-}
-.star-ui-v-layout>.star-ui-main{
-	height: 0;
-}
-</style>

package/src/components/line-h.vue

@@ -1,29 +0,0 @@
-<template>
-	<div class="star-ui su-h-line star-ui-h-line"></div>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Register } from "@ui-root/reg";
-import "../global-style.css";
-
-@Register({
-	name:"su-h-line",
-	props: {
-	}
-})
-export default class SuHLine extends Vue {
-}
-</script>
-
-<style>
-.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;
-}
-</style>

package/src/components/line-v.vue

@@ -1,29 +0,0 @@
-<template>
-	<div class="star-ui su-v-line star-ui-v-line"></div>
-</template>
-
-<script lang="ts">
-import { Vue } from "vue-class-component";
-import { Register } from "@ui-root/reg";
-import "../global-style.css";
-
-@Register({
-	name:"su-v-line",
-	props: {
-	}
-})
-export default class SuVLine extends Vue {
-}
-</script>
-
-<style>
-.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;
-}
-</style>