@thestarweb/ui 1.5.2 → 1.7.0

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

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

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

package/src/components/form/index.ts

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

package/src/components/input.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['star-ui','star-ui-input',{'is-focus':isFocused}]">
+	<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>
@@ -76,5 +76,6 @@ export default class SuInput extends Vue {
 	flex:1;
 	color: unset;
 	background: unset;
+	width: 100%;
 }
 </style>

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

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

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

package/src/components/layout-h.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-h-layout">
+	<div class="star-ui su-h-layout star-ui-h-layout">
 		<slot></slot>
 	</div>
 </template>
@@ -17,7 +17,7 @@ export default class SuHLayout extends Vue {
 </script>
 
 <style>
-.su-h-layout{
+.star-ui-h-layout{
 	display: flex;
 	flex-direction: row;
 	width: 100%;
@@ -25,10 +25,10 @@ export default class SuHLayout extends Vue {
 	padding: 0;
 	overflow: hidden;
 }
-.su-h-layout>*{
+.star-ui-h-layout>*{
 	flex:0 0 auto;
 }
-.su-h-layout>.su-main{
+.star-ui-h-layout>.star-ui-main{
 	width: 0;
 }
 </style>

package/src/components/layout-main.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-main">
+	<div class="star-ui su-main star-ui-main">
 		<slot></slot>
 	</div>
 </template>
@@ -19,7 +19,7 @@ export default class SuMain extends Vue {
 </script>
 
 <style>
-.su-main{
+.star-ui-main{
 	flex: 1;
 }
 </style>

package/src/components/layout-v.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-v-layout">
+	<div class="star-ui su-v-layout star-ui-v-layout">
 		<slot></slot>
 	</div>
 </template>
@@ -19,7 +19,7 @@ export default class SuVLayout extends Vue {
 </script>
 
 <style>
-.su-v-layout{
+.star-ui-v-layout{
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -27,10 +27,10 @@ export default class SuVLayout extends Vue {
 	padding: 0;
 	overflow: hidden;
 }
-.su-v-layout>*{
+.star-ui-v-layout>*{
 	flex:0 0 auto;
 }
-.su-v-layout>.su-main{
+.star-ui-v-layout>.star-ui-main{
 	height: 0;
 }
 </style>

package/src/components/line-h.vue

@@ -1,5 +1,5 @@
 <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">
@@ -17,7 +17,7 @@ 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);

package/src/components/line-v.vue

@@ -1,5 +1,5 @@
 <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">
@@ -17,7 +17,7 @@ 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);

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">
@@ -240,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/switch.vue

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

package/src/components/table.vue

@@ -1,14 +1,14 @@
 <template>
-	<div class="star-ui su-table">
-		<table class="star-ui su-table--inner" rules="none" frame="void">
-			<thead class="star-ui su-table--inner-thead">
-				<tr class="star-ui su-table--inner-tr">
-					<th v-for="item in columns" :key="item.name+item.key" class="star-ui star-ui-container su-table--inner-th">{{item.name}}</th>
+	<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 su-table--inner-tbody">
-				<tr v-for="(row,index) in data" :key="index" class="star-ui su-table--inner-tr">
-					<td v-for="item in columns" :key="item.name+item.key" class="star-ui star-ui-container su-table--inner-td">{{row[item.field]}}</td>
+			<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>
@@ -47,13 +47,13 @@ export default class SuTable extends Vue {
 </script>
 
 <style>
-.su-tabl{
+.star-ui-tabl{
 	width: 100%;
 }
-.su-table--inner-thead{
+.star-ui-table--inner-thead{
 	background-color: var(--star-ui-table-head-color);
 }
-.su-table--inner-tr{
+.star-ui-table--inner-tr{
 	border-bottom: 1px solid #e8eaec;
 }
 </style>

package/src/components/tree/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<div :class="[
 		'star-ui',
+		'su-tree',
 		'star-ui-tree',
 		{
 			'star-ui-tree-highlight-current':highlightCurrent

package/src/components/view-control.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['star-ui', 'su-view-control', $isMobile?'su-view-control-mobile':'su-view-control-pc']">
+	<div :class="['star-ui', className]">
 		<slot></slot>
 	</div>
 </template>
@@ -8,7 +8,7 @@
 import { Vue } from 'vue-class-component';
 
 import { Register, Prop } from "@ui-root/reg";
-import { SuViewCtrlInjectKeyIsMobile } from "@ui-root/outher";
+import { SuViewCtrlInjectKeyClassName, SuViewCtrlInjectKeyIsMobile } from "@ui-root/outher";
 import { Provide } from "vue-property-decorator";
 import "../global-style.css";
 
@@ -17,26 +17,11 @@ type DeviceType='auto'|'mobile'|'pc';
 
 @Register({
 	name:"su-view-control",
-	watch:{
-		$isMobile(newValue){
-			//this.sendData.isMobile = newValue;
-		}
-	},
-	// provide() {
-	// 	return {
-	// 		viewCtrlInfo: this.sendData
-	// 	}
-	// },
-	// created(){
-	// 	this.sendData.isMobile = this.$isMobile;
-	// }
 })
 export default class SuViewControl extends Vue {
 	mounted():void{
 		this.$el._vue = this;
 	}
-	// @Provide({to:SuViewCtrlInjectKeyIsMobile})
-	// isMobile=false;
 	@Prop({
 		type: String,
 		default: "auto",
@@ -59,7 +44,7 @@ export default class SuViewControl extends Vue {
 		this.windowWidth = window.innerWidth;
 		this.windowHeight = window.innerHeight;
 	}
-	@Provide({to:SuViewCtrlInjectKeyIsMobile})
+	@Provide({to:SuViewCtrlInjectKeyIsMobile,reactive:true})
 	public get $isMobile():boolean{
 		switch (this.deviceType) {
 			case "mobile":
@@ -71,11 +56,19 @@ export default class SuViewControl extends Vue {
 			case "ua":
 				return navigator.userAgent.toLowerCase().indexOf("mobile")!=-1;
 			case "screen-width":
-				console.log(this.windowWidth);
 				return this.windowWidth < 1000;
 		}
 		return false;
 	}
+	@Provide({to:SuViewCtrlInjectKeyClassName,reactive:true})
+	public get className():string[]{
+		return [
+			'su-view-control',
+			'star-ui-view-control',
+			`star-ui-view-control-${this.$isMobile?'mobile':'pc'}`,
+			`su-view-control-${this.$isMobile?'mobile':'pc'}`
+		];
+	}
 	beforeMount(){
 		this.checkWindowSize();
 		window.addEventListener("resize", this.checkWindowSize);

package/src/func/download.ts

@@ -0,0 +1,15 @@
+export default function(data:Blob|Uint8Array, name:string): void{
+	let out:Blob;
+	if (data instanceof Uint8Array) {
+		out = new Blob([data]);
+	} else {
+		out = data;
+	}
+	const link = document.createElement('a');
+	link.href = URL.createObjectURL(out);
+	link.download = name;
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
+	URL.revokeObjectURL(link.href);
+}

package/src/func/index.ts

@@ -0,0 +1,2 @@
+export {default as download} from "./download";
+export * from "./modal";

package/src/func/modal/index.ts

@@ -0,0 +1,72 @@
+import { createVNode, render, VNode } from 'vue';
+import { SuModal,SuModalConfirm,SuViewControl } from '@ui-root/main';
+
+type PWidthClose = Promise<boolean>&{close: () => void};
+export function confirm(title: string):PWidthClose{
+	let vnode:VNode;
+	const p:Promise<boolean>&{
+		close?: () => void;
+	} = new Promise<boolean>((resolve) => {
+		const dom = document.createElement("div");
+		vnode = createVNode(SuModalConfirm, {
+			visible: true,
+			title,
+			onClose: () => {
+				if(vnode.props) vnode.props.visible = false;
+				render(null, dom);
+				resolve(false);
+			},
+			onConfirm: () => {
+				render(null, dom);
+				resolve(true);
+			}
+		});
+		
+		render(createVNode(SuViewControl, {}, () => vnode), dom);
+	});
+	p.close = () => (vnode.component as any).proxy.close();
+	return p as PWidthClose;
+}
+export function modal(slots:{
+	title?: string|VNode|(() => VNode|string);
+	body?: string|VNode|(() => VNode|string);
+	footer?: string|VNode|(() => VNode|string);
+}|VNode|string|(() => VNode|string), controlProp = {}, defalueShow = true){
+	const sendSlots:Record<string, () => VNode|string> = {};
+	if(typeof slots === 'function'){
+		sendSlots.default = slots;
+	} else if(typeof slots === 'string' || 'type' in slots) {
+		sendSlots.default = () => slots;
+	} else {
+		const map = {
+			body: 'defalut',
+		}
+		Object.keys(slots).forEach((key) => {
+			const fn = typeof slots[key as keyof typeof slots];
+			sendSlots[key in map ? map[key as keyof typeof map] : key] = typeof fn === "function" ? fn : () => fn;
+		})
+	}
+	const dom = document.createElement("div");
+	const vnode = createVNode(
+		SuModal,
+		{
+			'onUpdate:visable': (value: boolean) => {
+				if (value) {
+					//
+				} else {
+					render(null, dom);
+				}
+			}
+		},
+		sendSlots,
+	);
+	render(createVNode(SuViewControl, controlProp, () => vnode), dom);
+
+	if (defalueShow) {
+		(vnode.component as any).proxy.show();
+	}
+
+	return {
+		close: () => (vnode.component as any).proxy.close()
+	};
+}

package/src/global-style.css

@@ -2,6 +2,8 @@
 	/*背景颜色*/
 	--star-ui-backgorund-color:#FFF;
 	/*背景颜色*/
+	--star-ui-mask-color:rgba(0, 0, 0, 0.5);
+	/*字体颜色*/
 	--star-ui-font-color:#222;
 	/*表格头*/
 	--star-ui-table-head-color:#f8f8f9;
@@ -50,4 +52,76 @@
 	line-height: var(--star-ui-input-mini-font-size);
 	padding: calc(var(--star-ui-default-padding) / 2);
 	border-radius: calc(var(--star-ui-border-radius) / 2);
-}
+}
+.star-ui-col-1{
+	width: calc(100% / 24 * 1);
+}
+.star-ui-col-2{
+	width: calc(100% / 24 * 2);
+}
+.star-ui-col-3{
+	width: calc(100% / 24 * 3);
+}
+.star-ui-col-4{
+	width: calc(100% / 24 * 4);
+}
+.star-ui-col-5{
+	width: calc(100% / 24 * 5);
+}
+.star-ui-col-6{
+	width: calc(100% / 24 * 6);
+}
+.star-ui-col-7{
+	width: calc(100% / 24 * 7);
+}
+.star-ui-col-8{
+	width: calc(100% / 24 * 8);
+}
+.star-ui-col-9{
+	width: calc(100% / 24 * 9);
+}
+.star-ui-col-10{
+	width: calc(100% / 24 * 10);
+}
+.star-ui-col-11{
+	width: calc(100% / 24 * 11);
+}
+.star-ui-col-12{
+	width: calc(100% / 24 * 12);
+}
+.star-ui-col-13{
+	width: calc(100% / 24 * 13);
+}
+.star-ui-col-14{
+	width: calc(100% / 24 * 14);
+}
+.star-ui-col-15{
+	width: calc(100% / 24 * 15);
+}
+.star-ui-col-16{
+	width: calc(100% / 24 * 16);
+}
+.star-ui-col-17{
+	width: calc(100% / 24 * 17);
+}
+.star-ui-col-18{
+	width: calc(100% / 24 * 18);
+}
+.star-ui-col-19{
+	width: calc(100% / 24 * 19);
+}
+.star-ui-col-20{
+	width: calc(100% / 24 * 20);
+}
+.star-ui-col-21{
+	width: calc(100% / 24 * 22);
+}
+.star-ui-col-22{
+	width: calc(100% / 24 * 22);
+}
+.star-ui-col-23{
+	width: calc(100% / 24 * 23);
+}
+.star-ui-col-24{
+	width: calc(100% / 24 * 24);
+}

package/src/main.ts

@@ -8,6 +8,7 @@ export { default as SuVLine } from "./components/line-v.vue";
 export { default as SuCard } from "./components/card.vue";
 export { default as SuTree } from "./components/tree/index.vue";
 //表单
+export * from "./components/form";
 export { default as SuInput } from "./components/input.vue";
 export { default as SuSelect } from "./components/select.vue";
 export { default as SuButton } from "./components/button.vue";
@@ -19,9 +20,11 @@ export { default as SuCalendar } from "./components/calendar.vue";
 
 export { default as SuViewControl } from "./components/view-control.vue";
 
-export * from "./components/menu";
+export * from "./components/layout"
 export * from "./components/content";
 
+export * as func from "./func/index";
+
 import { data } from "./reg";
 export * from "./outher";
 
@@ -49,5 +52,6 @@ export default {
 	components,
 	install(app:App):void{
 		registComponents(app)
+		app.config.globalProperties
 	}
 }

package/src/outher/index.ts

@@ -1,4 +1,8 @@
 import { Inject } from "vue-property-decorator";
 
 export const SuViewCtrlInjectKeyIsMobile=Symbol('SuViewCtrlInjectKeyIsMobile');
-export const SuViewCtrlInjectIsMobile = Inject({from:SuViewCtrlInjectKeyIsMobile,default:false})
+export const SuViewCtrlInjectIsMobile = Inject({from:SuViewCtrlInjectKeyIsMobile,default:false});
+export const SuViewCtrlInjectKeyClassName=Symbol('SuViewCtrlInjectKeyClassName');
+export const SuViewCtrlInjectClassName = Inject({from:SuViewCtrlInjectKeyClassName,default:[]});
+
+export type TypeFormLabelAlign = 'left'|'right'|'top'|undefined;