@thestarweb/ui 1.6.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thestarweb/ui",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "A UI lib",
   "scripts": {
     "build": "vue-cli-service build --target lib --name star-ui --dest dist/ src/main.ts",

package/src/components/content/context-menu-box/index.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="star-ui su-context-menu-box star-ui-context-menu-box" @contextmenu="handleContextMenu">
+		<slot />
+	</div>
+	<teleport to="body" v-if="isOpenMenu">
+		<div ref="mask" :class="['su-context-menu--mask', 'star-ui-context-menu--mask', ...ctrlClass]" @click="handleMaskClick">
+			<component :is="component" class="su-context-menu star-ui-context-menu" :style="isMobile ? '' : `top: ${currentY}px; left: ${currentX}px;`" :menu="currentMenu" :itemComponent="itemComponent">
+				<template v-slot="data">
+					<div class="su-context-menu--item star-ui-context-menu--item" @click="handleItemClick(data)">
+						<span class="star-ui-context-menu--text">{{data.title}}</span>
+						<span v-if="!data.click">&gt;</span>
+					</div>
+				</template>
+			</component>
+		</div>
+	</teleport>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component";
+import { Prop, Register } from "@ui-root/reg";
+import { SuViewCtrlInjectClassName, SuViewCtrlInjectIsMobile } from "@ui-root/outher";
+import MenuBox from "../menu/menu-h/menu-h-child.vue";
+import MenuBoxMobile from "../menu/menu-v/index.vue";
+import MenuItem from "../menu/menu-h/menu-h-item.vue";
+import "@ui-root/global-style.css";
+import { ContextMenuItem } from "@ui-root/types";
+
+@Register({
+	name:"su-context-menu-box",
+	components: {
+		MenuBox,
+		MenuBoxMobile,
+	}
+})
+export default class SuMain extends Vue {
+	private itemComponent = MenuItem;
+	declare $refs:{
+		mask:HTMLDivElement,
+	};
+	@SuViewCtrlInjectIsMobile readonly isMobile!:boolean;
+	@SuViewCtrlInjectClassName readonly ctrlClass!:string[];
+	private get component(){
+		if(this.isMobile){
+			return MenuBoxMobile;
+		}
+		return MenuBox;
+	}
+	@Prop({
+		type: [Array, Function],
+		required: true,
+	})
+	private menu!:ContextMenuItem[] | ((ev: MouseEvent) => ContextMenuItem[]);
+	private isOpenMenu = false;
+	private currentMenu: ContextMenuItem[] = [];
+	private currentX = 0;
+	private currentY = 0;
+	private handleContextMenu(ev: MouseEvent){
+		// ev.stopPropagation();
+		ev.preventDefault();
+		if(typeof this.menu === 'function'){
+			this.currentMenu = this.menu(ev) || [];
+		}else{
+			this.currentMenu = this.menu || [];
+		}
+		// this.currentMenu=[{title: 'aa', children: [ {title: 'aa.1', click: () => console.log('aa.1 click')} ]}, {title: 'bb', click: () => console.log('bb click')}];
+		this.currentX=ev.clientX;
+		this.currentY=ev.clientY;
+		this.isOpenMenu = true;
+	}
+	handleMaskClick(ev: MouseEvent){
+		if (ev.target === this.$refs.mask) {
+			this.isOpenMenu = false;
+		}
+	}
+	handleItemClick(item: ContextMenuItem){
+		if (item.click) {
+			this.isOpenMenu = false;
+			item.click();
+		}
+	}
+}
+</script>
+
+<style>
+	.star-ui-context-menu--mask{
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+	.star-ui-context-menu{
+		position: absolute;
+		opacity: 1;
+	}
+	.star-ui-context-menu--item{
+		min-width: 100px;
+		padding: var(--star-ui-default-padding);
+		cursor: pointer;
+		display: flex;
+		flex-direction: row;
+	}
+	.star-ui-context-menu--text{
+		flex: 1;
+	}
+	.star-ui-view-control-mobile.star-ui-context-menu--mask{
+		background: var(--star-ui-mask-color);
+	}
+	.star-ui-view-control-mobile .star-ui-context-menu{
+		width: 100%;
+		background-color: var(--star-ui-backgorund-color);
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+</style>

package/src/components/content/index.ts

@@ -1 +1,5 @@
-export { default as SuPage } from "./page.vue";
+export { default as SuPage } from "./page.vue";
+export { default as SuMenu } from "./menu/index.vue";
+export { default as SuContextMenuBox } from "./context-menu-box/index.vue";
+export { default as SuModal } from "./modals/modal.vue";
+export { default as SuModalConfirm } from "./modals/confirm.vue";

package/src/components/{menu → content/menu}/menu-h/index.vue

@@ -2,7 +2,9 @@
 	<div :class="['star-ui', 'star-ui-menu', 'star-ui-menu-h']">
 		<su-h-menu-item v-for="item in menu" :key="item.path" :item="item" childDirection="bottom">
 			<template v-slot="data">
-				<slot v-bind="data" />
+				<div class="star-ui star-ui-menu--item star-ui-menu-h--item">
+					<slot v-bind="data" />
+				</div>
 			</template>
 		</su-h-menu-item>
 	</div>

package/src/components/{menu → content/menu}/menu-h/menu-h-item.vue

@@ -1,8 +1,9 @@
 <template>
 	<div class="star-ui star-ui-menu--item-box star-ui-menu-h--item-box">
-		<div class="star-ui star-ui-menu--item star-ui-menu-h--item">
+		<!-- <div class="star-ui star-ui-menu--item star-ui-menu-h--item" @click="handleItemClick(item)">
 			<slot v-bind="item" />
-		</div>
+		</div> -->
+		<slot v-bind="item" />
 		<su-h-menu-child :menu="item.children || []" :itemComponent="selfClass" :direction="childDirection">
 			<template v-slot="item">
 				<slot v-bind="item" />
@@ -12,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { Register, Prop } from "@ui-root/reg";
+import { Register, Prop, Emit } from "@ui-root/reg";
 import { Vue } from "vue-class-component";
 import SuHMenuChild from "./menu-h-child.vue";
 import isFocus from "@ui-root/directives/is-focus";

package/src/components/content/modals/confirm.vue

@@ -0,0 +1,45 @@
+<template>
+	<su-modal :visible="visible" @close="close">
+		<template v-slot:title>
+			{{title}}
+		</template>
+		<template v-slot:footer>
+			<su-button @click="confirm">确认</su-button>
+			<su-button @click="close">取消</su-button>
+		</template>
+	</su-modal>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-class-component';
+import { Register, Prop, Emit } from "@ui-root/reg";
+import SuModal from "./modal.vue";
+import {SuButton} from "@ui-root/main";
+
+@Register({
+	name:"su-modal-confirm",
+	components:{
+		SuModal,
+		SuButton
+	},
+	hideInDoc: true,
+})
+export default class SuModalConfirm extends Vue {
+	@Prop({
+		type: String,
+	})
+	private readonly title!:string|undefined;
+	@Prop({
+		type: Boolean,
+	})
+	private readonly visible!:boolean|undefined;
+	@Emit()
+	private close(){
+		return 1;
+	}
+	@Emit()
+	private confirm(){
+		return 1;
+	}
+}
+</script>

package/src/components/content/modals/modal.vue

@@ -0,0 +1,110 @@
+<template>
+	<teleport to="body" v-if="locVisable">
+		<div class="star-ui-modal--mask">
+			<div class="star-ui star-ui-modal su-modal">
+				<div class="star-ui-modal--header">
+					<div class="star-ui-modal--title">
+						<slot name="title" />
+						{{title}}
+					</div>
+					<i class="star-ui-icon-font star-ui-icon-close" @click="close"/>
+				</div>
+				<div class="star-ui-modal--body">
+					<slot />
+				</div>
+				<div class="star-ui-modal--footer">
+					<slot name="footer" />
+				</div>
+			</div>
+		</div>
+	</teleport>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-class-component';
+import { Register, Prop, Emit } from "@ui-root/reg";
+import "@ui-root/global-style.css";
+import { SuViewCtrlInjectIsMobile } from '@ui-root/outher';
+
+@Register({
+	name:"su-modal",
+	watch: {
+		visible(v){
+			console.log(v)
+			if (typeof v !== 'undefined') {
+				this.locVisable = v;
+			}
+		},
+	},
+})
+export default class SuModalConfirm extends Vue {
+	@Prop({
+		type: Boolean,
+		default: undefined
+	})
+	private readonly visible!:boolean|undefined;
+	private locVisable = false;
+	@Emit('update:visable')
+	private updateVisable(visable:boolean):boolean{
+		return visable;
+	}
+	@Emit()
+	public close():void{
+		if(typeof this.visible === 'undefined'){
+			this.locVisable = false;
+		}
+		this.updateVisable(false);
+	}
+	public show():void{
+		if(typeof this.visible === 'undefined'){
+			this.locVisable = true;
+		}
+		this.updateVisable(true);
+	}
+	@Prop({
+		type: String,
+	})
+	private readonly title!:string|undefined;
+	created():void{
+		if (typeof this.visible !== 'undefined') {
+			this.locVisable = this.visible;
+		}
+	}
+	@SuViewCtrlInjectIsMobile readonly isMobile!: boolean;
+}
+</script>
+
+<style>
+.star-ui-modal{
+	background-color: var(--star-ui-backgorund-color);
+	border-radius: var(--star-ui-border-radius);
+}
+.star-ui-modal--mask{
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--star-ui-mask-color);
+}
+.star-ui-modal--header,
+.star-ui-modal--body,
+.star-ui-modal--footer{
+	padding: var(--star-ui-default-padding);
+}
+.star-ui-modal--header{
+	display: flex;
+	flex-direction: row;
+}
+.star-ui-modal--title{
+	flex: 1 1 0;
+	overflow: hidden;
+}
+.star-ui-modal--header>i{
+	flex: 0 0 auto;
+	cursor: pointer;
+}
+</style>

package/src/components/content/page.vue

@@ -36,7 +36,7 @@
 import { Vue } from "vue-class-component";
 import { Prop, Register } from "@ui-root/reg";
 import { SuViewCtrlInjectIsMobile } from "@ui-root/outher";
-import { SuMenu } from "@ui-root/components/menu";
+import { SuMenu } from "@ui-root/main";
 import { MenuItem } from "@ui-root/types";
 import "@ui-root/global-style.css";
 

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

@@ -76,7 +76,6 @@ export default class SuButton extends Vue {
 		if(this.bus){
 			this.bus.addItem(this);
 		}
-		debugger
 	}
 	beforeUnmount(){
 		if(this.bus){

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;

package/src/main.ts

@@ -20,10 +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";
 
@@ -51,5 +52,6 @@ export default {
 	components,
 	install(app:App):void{
 		registComponents(app)
+		app.config.globalProperties
 	}
 }

package/src/types.d.ts

@@ -7,3 +7,9 @@ export interface MenuItem{
 	title:string;
 	children?:MenuItem[];
 }
+export interface ContextMenuItem{
+	name?:string;
+	click?:() => unknown;
+	title:string;
+	children?:ContextMenuItem[];
+}

package/types/components/content/context-menu-box/index.vue.d.ts

@@ -0,0 +1,20 @@
+import { Vue } from "vue-class-component";
+import "@ui-root/global-style.css";
+import { ContextMenuItem } from "../../../types";
+export default class SuMain extends Vue {
+    private itemComponent;
+    $refs: {
+        mask: HTMLDivElement;
+    };
+    readonly isMobile: boolean;
+    readonly ctrlClass: string[];
+    private get component();
+    private menu;
+    private isOpenMenu;
+    private currentMenu;
+    private currentX;
+    private currentY;
+    private handleContextMenu;
+    handleMaskClick(ev: MouseEvent): void;
+    handleItemClick(item: ContextMenuItem): void;
+}

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

@@ -1 +1,5 @@
 export { default as SuPage } from "./page.vue";
+export { default as SuMenu } from "./menu/index.vue";
+export { default as SuContextMenuBox } from "./context-menu-box/index.vue";
+export { default as SuModal } from "./modals/modal.vue";
+export { default as SuModalConfirm } from "./modals/confirm.vue";

package/types/components/content/modals/confirm.vue.d.ts

@@ -0,0 +1,7 @@
+import { Vue } from 'vue-class-component';
+export default class SuModalConfirm extends Vue {
+    private readonly title;
+    private readonly visible;
+    private close;
+    private confirm;
+}

package/types/components/content/modals/modal.vue.d.ts

@@ -0,0 +1,12 @@
+import { Vue } from 'vue-class-component';
+import "@ui-root/global-style.css";
+export default class SuModalConfirm extends Vue {
+    private readonly visible;
+    private locVisable;
+    private updateVisable;
+    close(): void;
+    show(): void;
+    private readonly title;
+    created(): void;
+    readonly isMobile: boolean;
+}

package/types/func/download.d.ts

@@ -0,0 +1 @@
+export default function (data: Blob | Uint8Array, name: string): void;

package/types/func/index.d.ts

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

package/types/func/modal/index.d.ts

@@ -0,0 +1,13 @@
+import { VNode } from 'vue';
+declare type PWidthClose = Promise<boolean> & {
+    close: () => void;
+};
+export declare function confirm(title: string): PWidthClose;
+export declare function modal(slots: {
+    title?: string | VNode | (() => VNode | string);
+    body?: string | VNode | (() => VNode | string);
+    footer?: string | VNode | (() => VNode | string);
+} | VNode | string | (() => VNode | string), controlProp?: {}, defalueShow?: boolean): {
+    close: () => any;
+};
+export {};

package/types/main.d.ts

@@ -14,9 +14,9 @@ export { default as SuSwitch } from "./components/switch.vue";
 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 * as func from "./func/index";
 export * from "./outher";
 import { App } from "vue";
 export declare const components: Record<string, any>;

package/src/components/menu/index.ts

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

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

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