@thestarweb/ui 1.4.2 → 1.6.0

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>
@@ -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:{
@@ -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
@@ -11,14 +12,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

@@ -1,47 +1,27 @@
 <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>
 
 <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 { 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';
 
 
-@Options({
+@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",
@@ -64,6 +44,7 @@ export default class SuViewControl extends Vue {
 		this.windowWidth = window.innerWidth;
 		this.windowHeight = window.innerHeight;
 	}
+	@Provide({to:SuViewCtrlInjectKeyIsMobile})
 	public get $isMobile():boolean{
 		switch (this.deviceType) {
 			case "mobile":
@@ -75,10 +56,27 @@ 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})
+	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/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);
+		});
+	}
+}

package/src/global-style.css

@@ -1,6 +1,8 @@
 :root{
 	/*背景颜色*/
 	--star-ui-backgorund-color:#FFF;
+	/*背景颜色*/
+	--star-ui-font-color:#222;
 	/*表格头*/
 	--star-ui-table-head-color:#f8f8f9;
 	/*基础颜色*/
@@ -30,6 +32,7 @@
 	margin:0;
 	padding: 0;
 	position: relative;
+	box-sizing: border-box;
 }
 /*内容容器大大小*/
 .star-ui-container{
@@ -47,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/icon-font/iconfont.css

@@ -1,10 +1,8 @@
-@font-face {font-family: "star-ui-iconfont";
-  src: url('iconfont.eot?t=1618646407015'); /* IE9 */
-  src: url('iconfont.eot?t=1618646407015#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWUAAsAAAAADCgAAAVHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEIgqIQIZWATYCJAM0CxwABCAFhU0HgU0bVwqjolYvSnqyv0iwg+GPDWu9hkAksM2maagQEYmIcQTvcMQX5Fovfm7Fw3/7/W+fmbk2973/P2JSyR41EYp4Y9FcExVKIpMCWTxZe/P9pl7VqBlJ5cvEaTencEeJkQfUZkm+Zha7mWo6l1/Tv722OcCWzFR6MCyc7Z+/36s/KRKojj0AePe/qPO7qWJNFfRxmEBr7PYi2wBnE9aZiFdvYjo6e+N1AtV6KZyO1LX0AE8FnReIKzxHA89WRJmxhd7fjtxaxGtu+vQkOeRV/vPx3cKTpMnoTSfP1bKg4hNLXIwzo6nZyLi7FIy7yNgLKMTd0cx1LmV9LxfVq7o6CfhP6yXpU/l0wU3PJyb4BHBC80S4oGq1WIj8Jw/IWr1OIyTFoBpNiBYpE2XRu1b0E4gpMp+cKFo+OVP0fHIJ6Tx0RUgD5BASwEHINsF5kPFwIUIG4CKEVOBihIzAJeBOTDu9ZTVgAYi1QDxGxjMyWSjTyY8SQQQFxPj6xgYHBxGEv39QkNq6KKTHbAzttSzeawqj+mwmLWVdtKtDRlK7F4fjxci6LWTUjENDF+8Mn21bI3E2055FISxaYoBshIObHj77yZOep097nz/ve/ZsNJKogjTpAXn6AabZ5aS9BRlz9jSrae/i0F7Otni3MYQ1mznOtnHPiZJsfbwldHu4bUPYbLT5lD0NzLYegWSxJthMErIe27X+eKrrdifZwjc/YgRajLu8/RftMbVSixm0j6hPgKVe9Lzju0NdjbsWhSHrhnCrTWLNJ/aEuZ3EpdCyPsRirqRwJL54cWHEwqTTHp0VgfftoiKOGjjetOLIbKJ9xE4cmRVtv3iRiqzdfmVqit9WZeq1qyYfn2g/KTFlO0gxEMSyYCTOokRIkQkJIfgSQWSLh0ZiQLrknnb59y+flnRKEqEeM25NXu/y6JELxPUqgaCGfLuj6oIQQRxxDCSXIFJRuyCFdkVt7515BiIcBfCiB/ZvnxZGKiPtz57u2IcjEyIXnr2YdBQPDIYpOXcJPuiVoedL8pfk0pcPyPv7nGfFO5XqrvKu6DqnxApHi3KcQ4GVwKrG14q7TdXdbsU5lcqhdMwfrwA3GnpeB6mcP2dnf3MW+eG2oeeNm1i6v39cgQMPB48qx6l+hxK8/3F977f5vr3izsKkAOvi+QlY5e6i8YUg8GuG/STDf5g9zO9zPkA+6uzw1He0ebZrzkvcE+lLjhVvEpVPHnM8SMJJ91IFAKQP6a+QAOPzPGX/ts6FMyr504//glUfN51YqczuFIdv9BJs9vfNMhcVn6fotLjzF58qMLWPC7+KkCoH+JUXFnt3GN8y9nDCgtAaks42yBakqIu+BBqjo9Ba0AfVHtzdoyVWcRFlwG7bBYSN7kMy5zdkG/1XFVPEQmN5lErtmL4bqlMhPXK0PW7XwyKkZciSA2Mkzwg6FJ0je0syLaYO8amdrXZBbkhDi0PTOt9JQVHiBR2ZmZYx3KqHOige4gppmMuSZUQiUdCSdeHboEYjkHpRUEFGThuUZX1Rejoa+6I0RtACb4eJIJoMYpEGjCHxGAIdlDpl3q5200SphpTlU2erXSDOUzSMOTHnNJehwB0ofHv3SJnSZGygrld0G017KTSuHsbJIpMhJEQUTS1SnZmCNLIuIOnHT1KBGLI0gxtU9YqkK8shrpJ2eJ/2PdoEFX3SNFLkKNFEG130MUSNMSYxjTnltMBCN0YjSGk3pHXuEtTcr1O9aVEURlI1EMmeVWxI3xfZOKrzwQiR5wblwLmDUhGv0fA6juBM1/Vui8fi4PW8GwYA') format('woff2'),
-  url('iconfont.woff?t=1618646407015') format('woff'),
-  url('iconfont.ttf?t=1618646407015') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1618646407015#star-ui-iconfont') format('svg'); /* iOS 4.1- */
+@font-face {
+  font-family: "star-ui-iconfont"; /* Project id 2493685 */
+  src: url('iconfont.woff2?t=1636814190896') format('woff2'),
+       url('iconfont.woff?t=1636814190896') format('woff'),
+       url('iconfont.ttf?t=1636814190896') format('truetype');
 }
 
 .star-ui-icon-font {
@@ -15,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.star-ui-icon-menu:before {
+  content: "\e65f";
+}
+
+.star-ui-icon-add:before {
+  content: "\e6da";
+}
+
+.star-ui-icon-home:before {
+  content: "\e6b8";
+}
+
 .star-ui-icon-code:before {
   content: "\e667";
 }

package/src/icon-font/iconfont.json

@@ -2,9 +2,30 @@
   "id": "2493685",
   "name": "star-ui",
   "font_family": "star-ui-iconfont",
-  "css_prefix_text": "star-ui-icon",
+  "css_prefix_text": "star-ui-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1251228",
+      "name": "menu",
+      "font_class": "menu",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "38747",
+      "name": "add",
+      "font_class": "add",
+      "unicode": "e6da",
+      "unicode_decimal": 59098
+    },
+    {
+      "icon_id": "33516",
+      "name": "home",
+      "font_class": "home",
+      "unicode": "e6b8",
+      "unicode_decimal": 59064
+    },
     {
       "icon_id": "15838443",
       "name": "code",

package/src/main.ts

@@ -1,37 +1,50 @@
 //布局
-import SuHLayout from "./components/layout-h.vue";
-import SuVLayout from "./components/layout-v.vue";
-import SuMain from "./components/layout-main.vue";
-import SuTable from "./components/table.vue";
-import SuHLine from "./components/line-h.vue";
-import SuVLine from "./components/line-v.vue";
-import SuCard from "./components/card.vue";
-import SuTree from "./components/tree/index.vue";
+export { default as SuHLayout } from "./components/layout-h.vue";
+export { default as SuVLayout } from "./components/layout-v.vue";
+export { default as SuMain } from "./components/layout-main.vue";
+export { default as SuTable } from "./components/table.vue";
+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";
 //表单
-import SuInput from "./components/input.vue";
-import SuSelect from "./components/select.vue";
-import SuButton from "./components/button.vue";
-import SuSwitch from "./components/switch.vue";
-import SuSlider from "./components/slider.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";
+export { default as SuSwitch } from "./components/switch.vue";
+export { default as SuSlider } from "./components/slider.vue";
 
 
-import SuCalendar from "./components/calendar.vue";
+export { default as SuCalendar } from "./components/calendar.vue";
 
-import ViewControl from "./components/view-control.vue";
+export { default as SuViewControl } from "./components/view-control.vue";
 
-import { App } from 'vue';
+export * from "./components/menu";
+export * from "./components/content";
 
-declare interface IObj {
-	// eslint-disable-next-line
-	[key: string]: any,
-}
-export const components={SuHLayout,SuVLayout,SuMain,SuHLine,SuVLine,SuCard,SuTree,SuTable,SuButton,SuInput,SuSelect,ViewControl,SuSwitch,SuCalendar,SuSlider} as IObj;
-//export components;
-const registComponents=function(app:App):void{
-	for(const key in components){
-		app.component(components[key].__o.name,components[key]);
+import { data } from "./reg";
+export * from "./outher";
+
+import { App, readonly } from "vue";
+
+// eslint-disable-next-line
+export const components:Record<string,any>={};
+Object.keys(data).map((key) => {
+	if(data[key].component&&!data[key].internalOnly){
+		components[key]=data[key].component;
 	}
+});
+export const allData = readonly(data);
+
+const registComponents=function(app:App):void{
+	Object.keys(data).map((key) => {
+		if(data[key].component&&!data[key].internalOnly){
+			app.component(components[key].__o.name,components[key]);
+		}
+	});
 }
+export const infos = readonly(data);
 export default {
 	...components,
 	components,

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,14 +1,42 @@
-import { VueDecorator, PropOptions, createDecorator } from 'vue-class-component';
-import { reactive } from 'vue';
+import { VueDecorator, PropOptions, createDecorator, Vue, VueConstructor, VueBase } from "vue-class-component";
+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]: {
 	props?:{
 		[key:string]: PropOptions
+	};
+	component?:VueConstructor<VueBase>;
+}&ComponentInfo});
+
+export type RegisterOptions<V> = ComponentOptions & ThisType<V> & ComponentInfo;
+export function Register<V extends Vue>({ hideInDoc, internalOnly, ...options }:RegisterOptions<V>):<VC extends VueConstructor<VueBase>>(target: VC) => VC{
+	return (Component) => {
+		if(options.name){
+			if(!data[options.name]) data[options.name] = {};
+			// eslint-disable-next-line
+			data[options.name].component = Component;
+			data[options.name].hideInDoc = hideInDoc;
+			data[options.name].internalOnly = internalOnly;
+		}
+		// eslint-disable-next-line
+		(Component as any).__o = options
+		return Component
 	}
-}});
+}
 
 const hyphenate = (str:string) => str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
 // eslint-disable-next-line
@@ -59,16 +87,43 @@ 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){
-			// console.log(componentOptions.name);
 			if(!data[componentOptions.name]) data[componentOptions.name] = {};
 			if(!data[componentOptions.name].props) data[componentOptions.name].props={};
 			// 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

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

package/src/utils.ts

@@ -1,4 +1,4 @@
-import { Vue } from 'vue-class-component';
+import { Vue } from "vue-class-component";
 
 export function getParentNodeByClass(node:HTMLElement,className:string):HTMLElement|null{
 	let p:HTMLElement|null = node;

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

@@ -0,0 +1,5 @@
+import { Vue } from "vue-class-component";
+import "../global-style.css";
+export default class SuButton extends Vue {
+    size: string;
+}

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

@@ -0,0 +1,26 @@
+import { Vue } from "vue-class-component";
+import moment from "moment";
+import "../global-style.css";
+interface DateBaseInfo {
+    display: number;
+    isPrevious: boolean;
+    isNext: boolean;
+    week: string;
+    date: moment.Moment;
+}
+export default class SuCalendar extends Vue {
+    readonly displayMonth: Date | string;
+    private dYear;
+    private dMonth;
+    private get displayMonthDate();
+    readonly weekName: string[];
+    weekOffect: number;
+    private get displayHead();
+    private get displayData();
+    readonly renderCell: (arg: DateBaseInfo) => unknown;
+    private showSelYear;
+    private dShowSelYear;
+    private showSelMonth;
+    private dateClick;
+}
+export {};

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

@@ -0,0 +1,13 @@
+import { Vue } from 'vue-class-component';
+import "../global-style.css";
+export default class SuCard extends Vue {
+    $refs: {
+        body: HTMLDivElement;
+        bodyInner: HTMLDivElement;
+    };
+    readonly title: string;
+    readonly collapsible: boolean;
+    isCollaps: boolean;
+    collapsChange(): void;
+    handleTransitionEnd(): void;
+}

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

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

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

@@ -0,0 +1 @@
+export { default as SuPage } from "./page.vue";

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

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