@thestarweb/ui 1.5.0 → 1.6.1

package/src/components/menu/index.vue

@@ -1,10 +1,13 @@
 <template>
-	<component :is="menuComponent" :menu="menu" class="su-menu">
+	<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>
-					{{data.title}}
+				<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>
@@ -76,7 +79,7 @@ export default class SuHMenu extends Vue {
 
 </script>
 <style>
-.su-menu a{
+.star-ui-menu a{
 	color: inherit;
 	text-decoration: none;
 }

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>
@@ -28,11 +28,9 @@
 <script lang="ts">
 import { Vue } from 'vue-class-component';
 import BasePopper from "./common/base-popper.vue";
-import { Inject } from "vue-property-decorator";
 import { Register, Emit, Prop } from "@ui-root/reg";
-import { ViewCtrlInfo } from "../types";
+import { SuViewCtrlInjectIsMobile } from "@ui-root/outher";
 import SuTree from "./tree/index.vue";
-import ViewControl from "./view-control.vue";
 
 
 import "../global-style.css";
@@ -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/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,9 +8,8 @@
 import { Vue } from 'vue-class-component';
 
 import { Register, Prop } from "@ui-root/reg";
+import { SuViewCtrlInjectKeyClassName, SuViewCtrlInjectKeyIsMobile } from "@ui-root/outher";
 import { Provide } from "vue-property-decorator";
-
-import { ViewCtrlInfo } from "../types";
 import "../global-style.css";
 
 type DeviceType='auto'|'mobile'|'pc';
@@ -18,29 +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 {
-	public static readonly injectSymbol=Symbol();
 	mounted():void{
 		this.$el._vue = this;
 	}
-	@Provide({to:SuViewControl.injectSymbol})
-	private sendData:ViewCtrlInfo={
-		isMobile:false
-	}
 	@Prop({
 		type: String,
 		default: "auto",
@@ -63,6 +44,7 @@ export default class SuViewControl extends Vue {
 		this.windowWidth = window.innerWidth;
 		this.windowHeight = window.innerHeight;
 	}
+	@Provide({to:SuViewCtrlInjectKeyIsMobile,reactive:true})
 	public get $isMobile():boolean{
 		switch (this.deviceType) {
 			case "mobile":
@@ -78,6 +60,22 @@ export default class SuViewControl extends Vue {
 		}
 		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);
+	}
+	beforeUnmount(){
+		window.removeEventListener("resize", this.checkWindowSize);
+	}
 }
 </script>
 

package/src/global-style.css

@@ -50,4 +50,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";
@@ -20,9 +21,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";
 
 import { data } from "./reg";
+export * from "./outher";
 
 import { App, readonly } from "vue";
 

package/src/outher/index.ts

@@ -0,0 +1,8 @@
+import { Inject } from "vue-property-decorator";
+
+export const SuViewCtrlInjectKeyIsMobile=Symbol('SuViewCtrlInjectKeyIsMobile');
+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;

package/src/reg.ts

@@ -1,11 +1,18 @@
 import { VueDecorator, PropOptions, createDecorator, Vue, VueConstructor, VueBase } from "vue-class-component";
-import { ComponentOptions, reactive } from "vue";
+import { ComponentOptions, PropType, reactive } from "vue";
 interface ComponentInfo{
 	hideInDoc?:boolean;
 	internalOnly?:boolean;
 	type?:'from'|'layout';
 }
 
+const AutoTypes = {
+	FormLabelAlign: {
+		allow: ['left','right','top'],
+		type: String,
+	}
+}
+
 export const data = reactive({
 	//
 } as {[key:string]: {
@@ -80,7 +87,18 @@ export function Emit(event?:string, shouldEmit?:(res:any)=>boolean):VueDecorator
 	});
 }
 
-export function Prop(propOptions:PropOptions):VueDecorator{
+interface RegPropOptions<T = any, D = T> extends PropOptions<T>{
+	autoType?: keyof typeof AutoTypes;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function checkPropInAllow(list:any[]){
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	return function(value:any){
+		return list.includes(value);
+	}
+}
+export function Prop({ autoType , ...propOptions}:RegPropOptions):VueDecorator{
 	return createDecorator((componentOptions, key) => {
 		if(componentOptions.name){
 			if(!data[componentOptions.name]) data[componentOptions.name] = {};
@@ -88,7 +106,24 @@ export function Prop(propOptions:PropOptions):VueDecorator{
 			// eslint-disable-next-line
 			(data[componentOptions.name].props!)[key] = propOptions;
 		}
+		const eData:PropOptions = {};
+		if(autoType){
+			const autoTypeData = AutoTypes[autoType];
+			if(autoTypeData.type){
+				eData.type = autoTypeData.type;
+			}
+			const validator = [];
+			if(autoTypeData.allow){
+				validator.push(checkPropInAllow(autoTypeData.allow))
+			}
+			if(validator.length === 1){
+				eData.validator = validator[0];
+			}
+		}
 		if(!componentOptions.props) componentOptions.props={};
-		componentOptions.props[key] = propOptions;
+		componentOptions.props[key] = {
+			...eData,
+			...propOptions
+		};
 	});
 }

package/src/types.d.ts

@@ -3,7 +3,7 @@ export interface ViewCtrlInfo{
 }
 export interface MenuItem{
 	name?:string;
-	path:string;
+	path?:string;
 	title:string;
 	children?:MenuItem[];
 }

package/types/components/common/base-popper.vue.d.ts

@@ -1,19 +1,21 @@
 import { Vue } from 'vue-class-component';
-import { ViewCtrlInfo } from "../../types";
 import "../../global-style.css";
 export default class SuButton extends Vue {
+    $refs: {
+        root: HTMLDivElement;
+    };
     fromItem: Vue | HTMLElement;
     private div;
     private id;
     private updateType;
     private visible;
-    readonly suControl: ViewCtrlInfo;
-    beforeCreate(): void;
-    unmounted(): void;
+    readonly isMobile: false;
     mounted(): void;
     beforeUnmount(): void;
     _clickCheck(ev: MouseEvent): boolean;
     private syncRequestId;
     _updateVisible(): void;
+    readonly ctrlClass: string[];
+    private baseStyle;
     updatePos(): void;
 }

package/types/components/content/page.vue.d.ts

@@ -1,8 +1,7 @@
 import { Vue } from "vue-class-component";
-import { ViewCtrlInfo } from "../../types";
 import "@ui-root/global-style.css";
 export default class SuMain extends Vue {
-    readonly suControl: ViewCtrlInfo;
+    readonly isMobile: boolean;
     private title;
     private logo;
     private menu;

package/types/components/form/form/form-item.vue.d.ts

@@ -0,0 +1,22 @@
+import { Vue } from "vue-class-component";
+import { TypeFormLabelAlign } from "../../../outher";
+import { Bus } from "./form.vue";
+import "@ui-root/global-style.css";
+export declare const InjectLabelWidth: unique symbol;
+export declare const InjectLabelAlign: unique symbol;
+export declare const InjectEventBus: unique symbol;
+export default class SuButton extends Vue {
+    $refs: {
+        labelDiv: HTMLDivElement;
+    };
+    readonly label: string;
+    readonly labelWidth: string | number | undefined;
+    readonly pLabelWidth: string | number | undefined;
+    readonly labelAlign: TypeFormLabelAlign;
+    readonly pLabelAlign: TypeFormLabelAlign;
+    readonly col: number;
+    private get labelStyle();
+    readonly bus: Bus | undefined;
+    created(): void;
+    beforeUnmount(): void;
+}

package/types/components/form/form/form.vue.d.ts

@@ -0,0 +1,24 @@
+import { Vue } from "vue-class-component";
+import type { TypeFormLabelAlign } from "../../../outher";
+import Item 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;
+}
+export default class SuButton extends Vue {
+    readonly labelAlign: TypeFormLabelAlign;
+    readonly labelWidth: number | undefined;
+    readonly allowAotoMobile: boolean;
+    private bus;
+    private items;
+    private addItem;
+    private removeItem;
+    private updateLabelWidth;
+    private isLoaded;
+    private sendLabelWidth;
+    created(): void;
+    mounted(): void;
+    beforeUnmount(): void;
+}

package/types/components/form/form/index.d.ts

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

package/types/components/form/index.d.ts

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

package/types/components/layout/auto-direction/index.vue.d.ts

@@ -0,0 +1,4 @@
+import { Vue } from "vue-class-component";
+import "@ui-root/global-style.css";
+export default class SuAutoDirection extends Vue {
+}

package/types/components/layout/index.d.ts

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

package/types/components/select.vue.d.ts

@@ -1,5 +1,4 @@
 import { Vue } from 'vue-class-component';
-import { ViewCtrlInfo } from "../types";
 import SuTree from "./tree/index.vue";
 import "../global-style.css";
 export default class SuSelect extends Vue {
@@ -17,7 +16,7 @@ export default class SuSelect extends Vue {
     readonly showAsTree: boolean;
     readonly pooperClass: string;
     isFocused: boolean;
-    readonly suControl: ViewCtrlInfo;
+    readonly isMobile: boolean;
     get valueMap(): Map<string | number, string>;
     get showValue(): string;
     private width;

package/types/components/view-control.vue.d.ts

@@ -2,14 +2,15 @@ import { Vue } from 'vue-class-component';
 import "../global-style.css";
 declare type DeviceType = 'auto' | 'mobile' | 'pc';
 export default class SuViewControl extends Vue {
-    static readonly injectSymbol: unique symbol;
     mounted(): void;
-    private sendData;
     deviceType: DeviceType;
     checkFunction: 'ua' | 'screen-width';
     private windowWidth;
     private windowHeight;
     checkWindowSize(): void;
     get $isMobile(): boolean;
+    get className(): string[];
+    beforeMount(): void;
+    beforeUnmount(): void;
 }
 export {};

package/types/main.d.ts

@@ -6,6 +6,7 @@ export { default as SuHLine } from "./components/line-h.vue";
 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";
@@ -14,7 +15,9 @@ export { default as SuSlider } from "./components/slider.vue";
 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 * from "./outher";
 import { App } from "vue";
 export declare const components: Record<string, any>;
 export declare const allData: {

package/types/outher/index.d.ts

@@ -0,0 +1,5 @@
+export declare const SuViewCtrlInjectKeyIsMobile: unique symbol;
+export declare const SuViewCtrlInjectIsMobile: import("vue-class-component").VueDecorator;
+export declare const SuViewCtrlInjectKeyClassName: unique symbol;
+export declare const SuViewCtrlInjectClassName: import("vue-class-component").VueDecorator;
+export declare type TypeFormLabelAlign = 'left' | 'right' | 'top' | undefined;

package/types/reg.d.ts

@@ -5,6 +5,12 @@ interface ComponentInfo {
     internalOnly?: boolean;
     type?: 'from' | 'layout';
 }
+declare const AutoTypes: {
+    FormLabelAlign: {
+        allow: string[];
+        type: StringConstructor;
+    };
+};
 export declare const data: {
     [x: string]: {
         props?: {
@@ -32,5 +38,8 @@ export declare const data: {
 export declare type RegisterOptions<V> = ComponentOptions & ThisType<V> & ComponentInfo;
 export declare function Register<V extends Vue>({ hideInDoc, internalOnly, ...options }: RegisterOptions<V>): <VC extends VueConstructor<VueBase>>(target: VC) => VC;
 export declare function Emit(event?: string, shouldEmit?: (res: any) => boolean): VueDecorator;
-export declare function Prop(propOptions: PropOptions): VueDecorator;
+interface RegPropOptions<T = any, D = T> extends PropOptions<T> {
+    autoType?: keyof typeof AutoTypes;
+}
+export declare function Prop({ autoType, ...propOptions }: RegPropOptions): VueDecorator;
 export {};