@thestarweb/ui 1.4.2 → 1.5.0

package/src/components/menu/menu-v/index.vue

@@ -0,0 +1,56 @@
+<template>
+	<div :class="['star-ui', 'star-ui-menu', 'star-ui-menu-v']">
+		<div>
+			<span @click="handlePathClick(0)"><span class="star-ui-icon-font star-ui-icon-home" />&gt;</span>
+			<span v-for="(item,index) in path" :key="`${index}-${item.path||'nopath'}`" @click="handlePathClick(index+1)">
+				{{item.title}}&gt;
+			</span>
+		</div>
+		<div v-for="item in current" :key="item.path" @click="handleItemClick(item)">
+			<slot v-bind="item" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Register, Prop } from "@ui-root/reg";
+import { Vue } from 'vue-class-component';
+import { MenuItem } from "@ui-root/types";
+import '@ui-root/global-style.css';
+
+@Register({
+	name: 'su-h-menu',
+	internalOnly:true,
+})
+export default class SuHMenu extends Vue {
+	@Prop({
+		type: Array,
+		required: true,
+	})
+	private menu!:MenuItem[];
+	private path:MenuItem[]=[];
+	private get current():MenuItem[]{
+		if(this.path.length == 0){
+			return this.menu;
+		}
+		const item = this.path[this.path.length-1];
+		const res = [...(item.children || [])];
+		if(item.path){
+			res.unshift(item);
+		}
+		return res;
+	}
+	private handlePathClick(index:number){
+		this.path = this.path.slice(0,index);
+	}
+	private handleItemClick(item:MenuItem, ev:MouseEvent){
+		if(item.children && item.children.length > 0 && (this.path.length==0 || item!=this.path[this.path.length-1])){
+			this.path.push(item);
+		}
+	}
+}
+
+</script>
+<style>
+
+</style>

package/src/components/select.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 import BasePopper from "./common/base-popper.vue";
 import { Inject } from "vue-property-decorator";
-import { Emit, Prop } from "../reg";
+import { Register, Emit, Prop } from "@ui-root/reg";
 import { ViewCtrlInfo } from "../types";
 import SuTree from "./tree/index.vue";
 import ViewControl from "./view-control.vue";
@@ -37,7 +37,7 @@ import ViewControl from "./view-control.vue";
 
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-select",
 	components:{
 		BasePopper,

package/src/components/slider.vue

@@ -7,11 +7,11 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import { Prop, Emit } from "../reg";
+import { Vue } from 'vue-class-component';
+import { Register, Prop, Emit } from "@ui-root/reg";
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-slider"
 })
 export default class SuSlider extends Vue {

package/src/components/switch.vue

@@ -1,19 +1,19 @@
 <template>
 	<div :class="['star-ui','star-ui-switch','star-ui-size-'+size]">
 		<label>
-            <input ref="input" type="checkbox" :name="name" :checked="modelValue" @change="handeleChange"/>
-            <div><span></span></div>
-        </label>
+			<input ref="input" type="checkbox" :name="name" :checked="modelValue" @change="handeleChange"/>
+			<div><span></span></div>
+		</label>
 	</div>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 import { Watch } from "vue-property-decorator";
-import { Prop, Emit } from "../reg";
+import { Register, Prop, Emit } from "@ui-root/reg";
 import "../global-style.css";
 
-@Options({
+@Register({
 	name:"su-switch"
 })
 export default class SuInput extends Vue {
@@ -35,61 +35,61 @@ export default class SuInput extends Vue {
 		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;
-    }
+	@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;
+	--size: 20px;
+	display: inline-block;
 }
 .star-ui-switch.star-ui-size-medium{
-    --size: calc(var(--star-ui-input-medium-font-size) * 1.2);
+	--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);
+	--size: calc(var(--star-ui-input-mini-font-size) * 1.2);
 }
 .star-ui-switch input{
-    display: none;
+	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;
+	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;
+	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;
+	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);
+	margin-left: calc(var(--size) * 1.5);
 }
 </style>

package/src/components/table.vue

@@ -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:{

package/src/components/tree/index.vue

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

@@ -5,10 +5,9 @@
 </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 { Provide } from "vue-property-decorator";
 
 import { ViewCtrlInfo } from "../types";
@@ -17,7 +16,7 @@ import "../global-style.css";
 type DeviceType='auto'|'mobile'|'pc';
 
 
-@Options({
+@Register({
 	name:"su-view-control",
 	watch:{
 		$isMobile(newValue){

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{

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,48 @@
 //布局
-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 { 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";
+
+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/reg.ts

@@ -1,14 +1,35 @@
-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, reactive } from "vue";
+interface ComponentInfo{
+	hideInDoc?:boolean;
+	internalOnly?:boolean;
+	type?:'from'|'layout';
+}
 
 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
@@ -62,7 +83,6 @@ export function Emit(event?:string, shouldEmit?:(res:any)=>boolean):VueDecorator
 export function Prop(propOptions:PropOptions):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
@@ -71,4 +91,4 @@ export function Prop(propOptions:PropOptions):VueDecorator{
 		if(!componentOptions.props) componentOptions.props={};
 		componentOptions.props[key] = 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 { ViewCtrlInfo } from "../../types";
+import "../../global-style.css";
+export default class SuButton extends Vue {
+    fromItem: Vue | HTMLElement;
+    private div;
+    private id;
+    private updateType;
+    private visible;
+    readonly suControl: ViewCtrlInfo;
+    beforeCreate(): void;
+    unmounted(): void;
+    mounted(): void;
+    beforeUnmount(): void;
+    _clickCheck(ev: MouseEvent): boolean;
+    private syncRequestId;
+    _updateVisible(): void;
+    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,10 @@
+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;
+    private title;
+    private logo;
+    private menu;
+    private isOpenMenu;
+}

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

@@ -0,0 +1,15 @@
+import { Vue } from 'vue-class-component';
+import "../global-style.css";
+export default class SuInput extends Vue {
+    modelValue: string | number;
+    $refs: {
+        input: HTMLInputElement;
+    };
+    name: string;
+    size: string;
+    isFocused: boolean;
+    emitInput(data: string): string;
+    handleInput(event: InputEvent): void;
+    handleFocus(): void;
+    handleBlur(): void;
+}