@thestarweb/ui 1.7.1 → 2.0.0-beta.1

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

@@ -1,157 +0,0 @@
-<template>
-	<div :class="['star-ui', 'star-ui-tree-item']">
-		<div :class="[
-			'star-ui-tree-item-label',
-			'star-ui-size-'+size,
-			{
-				'star-ui-tree-current':(currentValue!=undefined&&currentValue==valueData) || item == current
-			}
-		]" @click="handleClick">
-			<div v-for="n in deep" :key="n" class="star-ui-tree-deep-nbsp"></div>
-			<span :class="[
-				'star-ui-tree-expand-button',
-				'star-ui-icon-font',
-				childrenData.length>0?(isExpand?'star-ui-icon-arrow-down':'star-ui-icon-arrow-right'):''
-			]" @click="isExpand=!isExpand"></span>
-			{{labelData}}
-		</div>
-		<div v-if="isExpand">
-			<tree-item v-for="(item, index) in childrenData" :key="index" :size="size" :deep="deep+1" :item="item" :label="label" :value="value" :children="children" :current="current" current-value="currentValue" @node-click="haandleChildNodeClick"></tree-item>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-import { Register, Prop } from "@ui-root/reg";
-import treeItem from "./tree-item.vue" 
-
-
-import "../../global-style.css";
-
-@Register({
-	name:"su-tree-item",
-	components:{
-		treeItem
-	},
-	internalOnly: true,
-})
-export default class SuTreeItem extends Vue {
-	readonly isExpand=false;
-	@Prop({
-		type:Number,
-		default:()=>{
-			return 0;
-		}
-	})
-	readonly deep!:number;
-	@Prop({
-		type:String,
-		default:()=>{
-			return "medium"
-		}
-	})
-	readonly size!:string;
-	@Prop({
-		type:Object,
-		default:()=>{
-			return {}
-		}
-	})
-	readonly item!:Record<string, unknown>;
-	@Prop({
-		type:[String,Function],
-		default:()=>{
-			return "label"
-		}
-	})
-	readonly label!:string|((item:Record<string, unknown>)=>string);
-	@Prop({
-		type:[String,Function],
-		default:()=>{
-			return "value"
-		}
-	})
-	readonly value!:string|((item:Record<string, unknown>)=>string|number);
-	@Prop({
-		type:[String,Function],
-		default:()=>{
-			return "children"
-		}
-	})
-	readonly children!:string|((item:Record<string, unknown>)=>Record<string, unknown>[]);
-	@Prop({
-		type:Object,
-		default:()=>{
-			return {}
-		}
-	})
-	readonly current!:Record<string, unknown>;
-	@Prop({
-		type:[String,Number],
-		default:()=>{
-			return undefined
-		}
-	})
-	readonly currentValue!:string|number|undefined;
-
-	get labelData():string{
-		if(typeof this.label == "string"){
-			return (this.item[this.label]||"") as string;
-		}
-		return this.label(this.item);
-	}
-	get valueData():string|number|undefined{
-		if(typeof this.value == "string"){
-			return (this.item[this.value]||"") as string|number|undefined;
-		}
-		return this.value(this.item);
-	}
-	get childrenData():Record<string, unknown>[]{
-		if(typeof this.children == "string"){
-			return (this.item[this.children]||[]) as Record<string, unknown>[];
-		}
-		return this.children(this.item);
-	}
-	private handleClick(ev:MouseEvent):void{
-		var classList = (ev.target as HTMLElement).className.split(" ");
-		if(classList.indexOf("star-ui-icon-arrow-down")!=-1 || classList.indexOf("star-ui-icon-arrow-right")!=-1){
-			return;
-		}
-		this.$emit("node-click",this.item,this.valueData,this);
-	}
-	haandleChildNodeClick(item:Record<string, unknown>,value:string|number|undefined,node:Record<string, unknown>):void{
-		this.$emit("node-click",item,value,node);
-	}
-}
-</script>
-
-<style>
-.star-ui-tree-item-label{
-	cursor: pointer;
-}
-.star-ui-tree-highlight-current .star-ui-tree-current{
-	background: var(--star-ui-base-color);
-    color: var(--star-ui-backgorund-color);
-}
-.star-ui-tree-deep-nbsp{
-	display: inline-block;
-	height: 100%;
-	width: var(--star-ui-input-medium-font-size);
-}
-.star-ui-size-mini .star-ui-tree-deep-nbsp{
-	width: var(--star-ui-input-mini-font-size);
-}
-.star-ui-tree-expand-button{
-	font-size: inherit;
-}
-.star-ui-tree-expand-button{
-	width: var(--star-ui-input-medium-font-size);
-	height: 100%;
-	display: inline-block;
-	cursor: pointer;
-}
-.star-ui-size-mini .star-ui-tree-expand-button{
-	width: var(--star-ui-input-mini-font-size);
-}
-</style>

package/src/components/view-control.vue

@@ -1,83 +0,0 @@
-<template>
-	<div :class="['star-ui', className]">
-		<slot></slot>
-	</div>
-</template>
-
-<script lang="ts">
-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 "../global-style.css";
-
-type DeviceType='auto'|'mobile'|'pc';
-
-
-@Register({
-	name:"su-view-control",
-})
-export default class SuViewControl extends Vue {
-	mounted():void{
-		this.$el._vue = this;
-	}
-	@Prop({
-		type: String,
-		default: "auto",
-		validator: function(value:string) {
-			return ['mobile', 'pc', 'auto'].indexOf(value) !== -1
-		}
-	})
-	deviceType!:DeviceType;
-	@Prop({
-		type: String,
-		default: "ua",
-		validator: function(value:string) {
-			return ['ua','screen-width'].indexOf(value) !== -1
-		}
-	})
-	checkFunction!:'ua'|'screen-width';
-	private windowWidth = 0;
-	private windowHeight = 0;
-	public checkWindowSize():void{
-		this.windowWidth = window.innerWidth;
-		this.windowHeight = window.innerHeight;
-	}
-	@Provide({to:SuViewCtrlInjectKeyIsMobile,reactive:true})
-	public get $isMobile():boolean{
-		switch (this.deviceType) {
-			case "mobile":
-				return true;
-			case "pc":
-				return false;
-		}
-		switch (this.checkFunction) {
-			case "ua":
-				return navigator.userAgent.toLowerCase().indexOf("mobile")!=-1;
-			case "screen-width":
-				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);
-	}
-	beforeUnmount(){
-		window.removeEventListener("resize", this.checkWindowSize);
-	}
-}
-</script>
-
-<style>
-</style>

package/src/directives/is-focus.ts

@@ -1,10 +0,0 @@
-export default {
-	mounted(el:HTMLElement, cb:any){
-		el.addEventListener("mousemove", () => {
-			cb.value(true);
-		});
-		el.addEventListener("mouseout", () => {
-			cb.value(false);
-		});
-	}
-}

package/src/func/download.ts

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

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

package/src/func/modal/index.ts

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

@@ -1,127 +0,0 @@
-:root{
-	/*背景颜色*/
-	--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;
-	/*基础颜色*/
-	--star-ui-base-color:#8AF;
-	/*线条颜色*/
-	--star-ui-line-color:#8AF;
-	--star-ui-regular-text-color: #606266;
-	/*线路宽度*/
-	--star-ui-line-width:1px;
-	/*圆角*/
-	--star-ui-border-radius:5px;
-	/*输入框边框默认颜色*/
-	--star-ui-input-border-color:#666;
-	/*中等大小输入框字体大小*/
-	--star-ui-input-medium-font-size:16px;
-	/*小输入框字体大小*/
-	--star-ui-input-mini-font-size:12px;
-	/*输入框默认宽度*/
-	--star-ui-input-default-width:280px;
-	--star-ui-default-padding:5px;
-}
-.dark-mode{
-	--star-ui-backgorund-color:#555;
-}
-@import url("./icon-font/iconfont.css");
-.star-ui{
-	margin:0;
-	padding: 0;
-	position: relative;
-	box-sizing: border-box;
-}
-/*内容容器大大小*/
-.star-ui-container{
-	padding: var(--star-ui-default-padding);
-}
-.star-ui-size-medium{
-	font-size: var(--star-ui-input-medium-font-size);
-	line-height: var(--star-ui-input-medium-font-size);
-	padding: var(--star-ui-default-padding);
-	border-radius: var(--star-ui-border-radius);
-}
-/*小尺寸空间参数*/
-.star-ui-size-mini{
-	font-size: var(--star-ui-input-mini-font-size);
-	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,75 +0,0 @@
-@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 {
-  font-family: "star-ui-iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -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";
-}
-
-.star-ui-icon-close:before {
-  content: "\e668";
-}
-
-.star-ui-icon-clean:before {
-  content: "\e600";
-}
-
-.star-ui-icon-select:before {
-  content: "\e67e";
-}
-
-.star-ui-icon-arrow-left:before {
-  content: "\e604";
-}
-
-.star-ui-icon-arrow-up:before {
-  content: "\e601";
-}
-
-.star-ui-icon-arrow-down:before {
-  content: "\e603";
-}
-
-.star-ui-icon-arrow-right:before {
-  content: "\e602";
-}
-
-.star-ui-icon-arrow-up-filling:before {
-  content: "\e689";
-}
-
-.star-ui-icon-arrow-down-filling:before {
-  content: "\e68a";
-}
-
-.star-ui-icon-arrow-left-filling:before {
-  content: "\e68b";
-}
-
-.star-ui-icon-arrow-right-filling:before {
-  content: "\e68c";
-}
-

package/src/icon-font/iconfont.json

@@ -1,114 +0,0 @@
-{
-  "id": "2493685",
-  "name": "star-ui",
-  "font_family": "star-ui-iconfont",
-  "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",
-      "font_class": "code",
-      "unicode": "e667",
-      "unicode_decimal": 58983
-    },
-    {
-      "icon_id": "15838444",
-      "name": "close",
-      "font_class": "close",
-      "unicode": "e668",
-      "unicode_decimal": 58984
-    },
-    {
-      "icon_id": "15838473",
-      "name": "error",
-      "font_class": "clean",
-      "unicode": "e600",
-      "unicode_decimal": 58880
-    },
-    {
-      "icon_id": "15838530",
-      "name": "select",
-      "font_class": "select",
-      "unicode": "e67e",
-      "unicode_decimal": 59006
-    },
-    {
-      "icon_id": "15838561",
-      "name": "arrow-left-bold",
-      "font_class": "arrow-left",
-      "unicode": "e604",
-      "unicode_decimal": 58884
-    },
-    {
-      "icon_id": "15838562",
-      "name": "arrow-up-bold",
-      "font_class": "arrow-up",
-      "unicode": "e601",
-      "unicode_decimal": 58881
-    },
-    {
-      "icon_id": "15838564",
-      "name": "arrow-down-bold",
-      "font_class": "arrow-down",
-      "unicode": "e603",
-      "unicode_decimal": 58883
-    },
-    {
-      "icon_id": "15838566",
-      "name": "arrow-right-bold",
-      "font_class": "arrow-right",
-      "unicode": "e602",
-      "unicode_decimal": 58882
-    },
-    {
-      "icon_id": "15838581",
-      "name": "arrow-up-filling",
-      "font_class": "arrow-up-filling",
-      "unicode": "e689",
-      "unicode_decimal": 59017
-    },
-    {
-      "icon_id": "15838582",
-      "name": "arrow-down-filling",
-      "font_class": "arrow-down-filling",
-      "unicode": "e68a",
-      "unicode_decimal": 59018
-    },
-    {
-      "icon_id": "15838583",
-      "name": "arrow-left-filling",
-      "font_class": "arrow-left-filling",
-      "unicode": "e68b",
-      "unicode_decimal": 59019
-    },
-    {
-      "icon_id": "15838584",
-      "name": "arrow-right-filling",
-      "font_class": "arrow-right-filling",
-      "unicode": "e68c",
-      "unicode_decimal": 59020
-    }
-  ]
-}