mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 18:33:37 +00:00
feat: update layout
This commit is contained in:
Qiuxia Fan
parent
d98280c427
commit
aa196251f6
165
package-lock.json
generated
165
package-lock.json
generated
@ -1321,6 +1321,132 @@
|
||||
"@hapi/hoek": "^8.3.0"
|
||||
}
|
||||
},
|
||||
"@interactjs/actions": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.11.tgz",
|
||||
"integrity": "sha512-P39zeefr4hkmKx+5nZ+mrH1s0l2YJ3gIHrthXmE81n6MlMa42m0WtHcTms4C5JTTNBP2EEDY+KGgGxSnmJKvUw==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/auto-scroll": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.11.tgz",
|
||||
"integrity": "sha512-feHNjhi0EMNLV2nQcEgjYPz2mI54aeSW2RiaoNtFLyBvtXKp0b4DmluwDv6DvuXmUpDwD5g/Hk1gGM2rgl7iqQ==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/auto-start": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.11.tgz",
|
||||
"integrity": "sha512-cIg5CcalCPtC6AiGq6j/0hKUtL2MweEpvw12FuB19sz2Q9Dye0J4GliHKhOYvtumNinnvfVAZ4FZMqZEuX7YZA==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/core": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.11.tgz",
|
||||
"integrity": "sha512-aJ50ccVeszpJt7wPH7Yfqm7f1aG1SA94qd90P0NaESh5/QUXn4CESO6igobo4DFHQ5z+1Rfdl8aphP4JxlH4gw=="
|
||||
},
|
||||
"@interactjs/dev-tools": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.11.tgz",
|
||||
"integrity": "sha512-BP2FNfMbF7zLuOAUGMkDhCo1e1B0fnqyb9ih/Y8yAIJuoLrZxP/9htbsS1vZOIVZ4UgtrId4cYOwfcAZBMQtmw==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/inertia": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.11.tgz",
|
||||
"integrity": "sha512-h+sknCzRqBSyHy4ctPNsq56mxkAMMdwHWD6en7rDEw899gdGKYaXVDVdv1jMfiwNRw0eRFBNoCiol8r3a/a3Jw==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11",
|
||||
"@interactjs/offset": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/interact": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.11.tgz",
|
||||
"integrity": "sha512-0iZJ9l547JuBA/lKxK4ARGYVmMqRSsAdA8gXL1zWe51qEIQq8PyWmMipoi8JbDaL7exC2THKwkXu5uq5ndT+iA==",
|
||||
"requires": {
|
||||
"@interactjs/core": "1.10.11",
|
||||
"@interactjs/types": "1.10.11",
|
||||
"@interactjs/utils": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/interactjs": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.11.tgz",
|
||||
"integrity": "sha512-cGOxf6rp3Y8/sk88LhIT0XDn4gCiCzAnUG5Kkj9SAqiUO6BK/9+Wbp1IBkNaPgl/8uG8gNHh/dXBrlBBNcqJAg==",
|
||||
"requires": {
|
||||
"@interactjs/actions": "1.10.11",
|
||||
"@interactjs/auto-scroll": "1.10.11",
|
||||
"@interactjs/auto-start": "1.10.11",
|
||||
"@interactjs/core": "1.10.11",
|
||||
"@interactjs/dev-tools": "1.10.11",
|
||||
"@interactjs/inertia": "1.10.11",
|
||||
"@interactjs/interact": "1.10.11",
|
||||
"@interactjs/modifiers": "1.10.11",
|
||||
"@interactjs/offset": "1.10.11",
|
||||
"@interactjs/pointer-events": "1.10.11",
|
||||
"@interactjs/reflow": "1.10.11",
|
||||
"@interactjs/utils": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/modifiers": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.11.tgz",
|
||||
"integrity": "sha512-ltqX1RSqeAIikixlQBlyEUdclT5+rbfIGi3sIdLLYaIZQnltYkWqL9MHKx/w5b+hV+Mc0p5MLUFWJbTdkSCZ9g==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11",
|
||||
"@interactjs/snappers": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/offset": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.11.tgz",
|
||||
"integrity": "sha512-mBT7eIfy5ivofECiv+VwtEwwIMLV54fT9ujSMWJPduxdSYIHepUWgEf/3zjJknFh6jQc7pqz9dtjvVvyzRCLlQ==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/pointer-events": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.11.tgz",
|
||||
"integrity": "sha512-yBT8JJVMZ+MgBay5l1WAHnL8ch/mZsRfaFahti+QFYeQyRloDtsWmEMDSYI/Onyy9+hS3gN/ge77ArGciZZ0Ow==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/reflow": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.11.tgz",
|
||||
"integrity": "sha512-NSCtcCkjImOYSbxzzv2kFqR9t49J8KlhEr9UoePc7GyLbNXsiv3WQ3n0ehZd7CgZXQDiVXnP2UnmIOv5Zd4HQg==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/snappers": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.11.tgz",
|
||||
"integrity": "sha512-yYtOMUZ7aFUZ1IYheq9Tj5hZ4J1r5dnaXhLF44WsI/awQ5L0DjZf07GPWof0B+7rZHEVudxyQNbPfFmb+1K94Q==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/types": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.11.tgz",
|
||||
"integrity": "sha512-YRsVFWjL8Gkkvlx3qnjeaxW4fnibSJ9791g8BA7Pv5ANByI64WmtR1vU7A2rXcrOn8XvyCEfY0ss1s8NhZP+MA=="
|
||||
},
|
||||
"@interactjs/utils": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.11.tgz",
|
||||
"integrity": "sha512-410ZoxKF+r1roeSelL+WHXfdryUMg5iykC1XwQ3l6XqNw43IMACzyvTH6k6Pwxj7w7x42nce0Qdn1GQ3Y8xyCw=="
|
||||
},
|
||||
"@intervolga/optimize-cssnano-plugin": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
|
||||
@ -4915,6 +5041,11 @@
|
||||
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
|
||||
"dev": true
|
||||
},
|
||||
"batch-processor": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
|
||||
"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
|
||||
},
|
||||
"bcrypt-pbkdf": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
|
||||
@ -7632,6 +7763,14 @@
|
||||
"normalize-wheel-es": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"element-resize-detector": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
|
||||
"integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
|
||||
"requires": {
|
||||
"batch-processor": "1.0.0"
|
||||
}
|
||||
},
|
||||
"elliptic": {
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
|
||||
@ -19577,11 +19716,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
|
||||
"integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw=="
|
||||
},
|
||||
"vue-drag-resize": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-drag-resize/-/vue-drag-resize-2.0.3.tgz",
|
||||
"integrity": "sha512-5q03tZ/LyvQsg1iHRcqs+wI2OKNbNIWl9+7V8rVL6MxJhZLCIYSSgbAUaDE38LhD6dFd5aJhdgNmES61AxjXuw=="
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "7.11.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
|
||||
@ -19611,6 +19745,27 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-grid-layout": {
|
||||
"version": "3.0.0-beta1",
|
||||
"resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz",
|
||||
"integrity": "sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==",
|
||||
"requires": {
|
||||
"@interactjs/actions": "^1.10.2",
|
||||
"@interactjs/auto-start": "^1.10.2",
|
||||
"@interactjs/dev-tools": "^1.10.2",
|
||||
"@interactjs/interactjs": "^1.10.2",
|
||||
"@interactjs/modifiers": "^1.10.2",
|
||||
"element-resize-detector": "^1.2.1",
|
||||
"mitt": "^2.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"mitt": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
|
||||
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
"three": "^0.131.3",
|
||||
"three-orbit-controls": "^82.1.0",
|
||||
"vue": "^3.0.0",
|
||||
"vue-drag-resize": "^2.0.3",
|
||||
"vue-grid-layout": "^3.0.0-beta1",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vue-types": "^4.1.1",
|
||||
|
||||
@ -16,13 +16,28 @@
|
||||
*/
|
||||
import Icon from "./Icon.vue";
|
||||
import TimePicker from "./TimePicker.vue";
|
||||
import type { App } from "vue";
|
||||
import type { App, Plugin } from "vue";
|
||||
import VueGridLayout from "vue-grid-layout";
|
||||
|
||||
const components: { [key: string]: any } = { Icon, TimePicker };
|
||||
const components: { [key: string]: any } = {
|
||||
Icon,
|
||||
TimePicker,
|
||||
VueGridLayout,
|
||||
};
|
||||
const componentsName: string[] = Object.keys(components);
|
||||
|
||||
const withInstall = <T>(component: T, alias?: string) => {
|
||||
const comp = component as any;
|
||||
comp.install = (app: App) => {
|
||||
app.component(comp.name || comp.displayName, component);
|
||||
if (alias) {
|
||||
app.config.globalProperties[alias] = component;
|
||||
}
|
||||
};
|
||||
return component as T & Plugin;
|
||||
};
|
||||
export default {
|
||||
install: (vue: App): void => {
|
||||
vue.use(components["VueGridLayout"]);
|
||||
componentsName.forEach((i) => {
|
||||
vue.component(i, components[i]);
|
||||
});
|
||||
|
||||
114
src/type.d.ts
vendored
114
src/type.d.ts
vendored
@ -1,114 +0,0 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import type {
|
||||
ComponentRenderProxy,
|
||||
VNode,
|
||||
VNodeChild,
|
||||
ComponentPublicInstance,
|
||||
FunctionalComponent,
|
||||
PropType as VuePropType,
|
||||
} from "vue";
|
||||
|
||||
declare module "three";
|
||||
declare module "three-orbit-controls";
|
||||
declare module "element-plus";
|
||||
declare global {
|
||||
const __APP_INFO__: {
|
||||
pkg: {
|
||||
name: string;
|
||||
version: string;
|
||||
dependencies: Recordable<string>;
|
||||
devDependencies: Recordable<string>;
|
||||
};
|
||||
lastBuildTime: string;
|
||||
};
|
||||
|
||||
// vue
|
||||
declare type PropType<T> = VuePropType<T>;
|
||||
declare type VueNode = VNodeChild | JSX.Element;
|
||||
|
||||
export type Writable<T> = {
|
||||
-readonly [P in keyof T]: T[P];
|
||||
};
|
||||
|
||||
declare type Nullable<T> = T | null;
|
||||
declare type NonNullable<T> = T extends null | undefined ? never : T;
|
||||
declare type Recordable<T = any> = Record<string, T>;
|
||||
declare type ReadonlyRecordable<T = any> = {
|
||||
readonly [key: string]: T;
|
||||
};
|
||||
declare type Indexable<T = any> = {
|
||||
[key: string]: T;
|
||||
};
|
||||
declare type DeepPartial<T> = {
|
||||
[P in keyof T]?: DeepPartial<T[P]>;
|
||||
};
|
||||
declare type TimeoutHandle = ReturnType<typeof setTimeout>;
|
||||
declare type IntervalHandle = ReturnType<typeof setInterval>;
|
||||
|
||||
declare interface ChangeEvent extends Event {
|
||||
target: HTMLInputElement;
|
||||
}
|
||||
|
||||
declare interface WheelEvent {
|
||||
path?: EventTarget[];
|
||||
}
|
||||
interface ImportMetaEnv extends ViteEnv {
|
||||
__: unknown;
|
||||
}
|
||||
|
||||
declare interface ViteEnv {
|
||||
VITE_PORT: number;
|
||||
VITE_USE_MOCK: boolean;
|
||||
VITE_USE_PWA: boolean;
|
||||
VITE_PUBLIC_PATH: string;
|
||||
VITE_PROXY: [string, string][];
|
||||
VITE_GLOB_APP_TITLE: string;
|
||||
VITE_GLOB_APP_SHORT_NAME: string;
|
||||
VITE_USE_CDN: boolean;
|
||||
VITE_DROP_CONSOLE: boolean;
|
||||
VITE_BUILD_COMPRESS: "gzip" | "brotli" | "none";
|
||||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
|
||||
VITE_LEGACY: boolean;
|
||||
VITE_USE_IMAGEMIN: boolean;
|
||||
VITE_GENERATE_UI: string;
|
||||
}
|
||||
|
||||
declare function parseInt(s: string | number, radix?: number): number;
|
||||
|
||||
declare function parseFloat(string: string | number): number;
|
||||
|
||||
namespace JSX {
|
||||
type Element = VNode;
|
||||
type ElementClass = ComponentRenderProxy;
|
||||
interface ElementAttributesProperty {
|
||||
$props: any;
|
||||
}
|
||||
interface IntrinsicElements {
|
||||
[elem: string]: any;
|
||||
}
|
||||
interface IntrinsicAttributes {
|
||||
[elem: string]: any;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare module "vue" {
|
||||
export type JSXComponent<Props = any> =
|
||||
| { new (): ComponentPublicInstance<Props> }
|
||||
| FunctionalComponent<Props>;
|
||||
}
|
||||
2
src/types/global.d.ts
vendored
2
src/types/global.d.ts
vendored
@ -38,7 +38,7 @@ declare global {
|
||||
};
|
||||
|
||||
// vue
|
||||
declare type PropType<T> = VuePropType<T>;
|
||||
export declare type PropType<T> = VuePropType<T>;
|
||||
declare type VueNode = VNodeChild | JSX.Element;
|
||||
|
||||
export type Writable<T> = {
|
||||
|
||||
@ -14,8 +14,18 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
declare module "vue-drag-resize" {
|
||||
declare module "vue-grid-layout" {
|
||||
import Vue from "vue";
|
||||
|
||||
export class VueDragResize extends Vue {}
|
||||
export class GridLayout extends Vue {}
|
||||
|
||||
export class GridItem extends Vue {}
|
||||
|
||||
export interface GridItemData {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
i: string;
|
||||
}
|
||||
}
|
||||
@ -20,73 +20,27 @@ limitations under the License. -->
|
||||
</div>
|
||||
<div class="flex-h ds-main">
|
||||
<div class="ds-layout">
|
||||
<VueDragResize
|
||||
:isActive="item.static"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
@resizing="resize"
|
||||
@dragging="resize"
|
||||
v-for="item in layout"
|
||||
:key="item.i"
|
||||
>
|
||||
<h3>Hello World {{ item.i }}</h3>
|
||||
</VueDragResize>
|
||||
<GridLayout />
|
||||
</div>
|
||||
<div class="ds-config">Configurations</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { toRefs, defineComponent, reactive, ref } from "vue";
|
||||
import { ElButton } from "element-plus";
|
||||
import VueDragResize from "vue-drag-resize";
|
||||
|
||||
export interface GridItemData {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
i: number;
|
||||
static: boolean;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "dashboardEdit",
|
||||
components: {
|
||||
ElButton,
|
||||
VueDragResize,
|
||||
},
|
||||
setup() {
|
||||
const layout = ref<GridItemData[]>([
|
||||
{ x: 300, y: 100, w: 200, h: 200, i: 0, static: true },
|
||||
{ x: 500, y: 100, w: 200, h: 200, i: 1, static: true },
|
||||
{ x: 700, y: 100, w: 200, h: 200, i: 2, static: true },
|
||||
{ x: 900, y: 100, w: 200, h: 200, i: 3, static: true },
|
||||
]);
|
||||
|
||||
function resize(newRect: {
|
||||
width: number;
|
||||
height: number;
|
||||
top: number;
|
||||
left: number;
|
||||
}) {
|
||||
console.log(newRect);
|
||||
}
|
||||
return { resize, layout };
|
||||
},
|
||||
});
|
||||
import GridLayout from "./widget/GridLayout.vue";
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-tool {
|
||||
text-align: right;
|
||||
padding: 5px 10px;
|
||||
background: rgb(240, 242, 245);
|
||||
// border-bottom: 1px solid rgb(240, 242, 245);
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.ds-main {
|
||||
background: rgb(240, 242, 245);
|
||||
background: #f7f9fa;
|
||||
// background: #eee;
|
||||
}
|
||||
|
||||
.ds-layout {
|
||||
@ -113,63 +67,4 @@ export default defineComponent({
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vue-grid-layout {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.vue-grid-item:not(.vue-grid-placeholder) {
|
||||
background: #ccc;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.vue-grid-item .resizing {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.vue-grid-item .static {
|
||||
background: #cce;
|
||||
}
|
||||
|
||||
.vue-grid-item .text {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vue-grid-item .no-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vue-grid-item .minMax {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.vue-grid-item .add {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vue-draggable-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
|
||||
no-repeat;
|
||||
background-position: bottom right;
|
||||
padding: 0 8px 8px 0;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<VueDragResize
|
||||
:isActive="item.static"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
@resizing="resize"
|
||||
@dragging="resize"
|
||||
>
|
||||
<h3>Hello World {{ item.i }}</h3>
|
||||
</VueDragResize>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import VueDragResize from "vue-drag-resize";
|
||||
interface GridItemData {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
i: number;
|
||||
static: boolean;
|
||||
}
|
||||
const props = defineProps({
|
||||
item: { type: Object as PropType<GridItemData> },
|
||||
});
|
||||
const emit = defineEmits(["move"]);
|
||||
|
||||
function resize(newRect: {
|
||||
width: number;
|
||||
height: number;
|
||||
top: number;
|
||||
left: number;
|
||||
}) {
|
||||
const m = {
|
||||
...props.item,
|
||||
x: newRect.left,
|
||||
y: newRect.top,
|
||||
w: newRect.width,
|
||||
h: newRect.height,
|
||||
};
|
||||
emit("move", m);
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,132 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<grid-layout
|
||||
v-model:layout="layout"
|
||||
:col-num="12"
|
||||
:row-height="30"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:is-mirrored="false"
|
||||
:vertical-compact="true"
|
||||
:margin="[10, 10]"
|
||||
:use-css-transforms="true"
|
||||
>
|
||||
<grid-item
|
||||
v-for="item in layout"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:i="item.i"
|
||||
:key="item.i"
|
||||
>
|
||||
{{ item.i }}
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
export interface GridItemData {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
i: number;
|
||||
static: boolean;
|
||||
}
|
||||
const layout = [
|
||||
{ x: 0, y: 0, w: 2, h: 2, i: "0" },
|
||||
{ x: 2, y: 0, w: 2, h: 4, i: "1" },
|
||||
{ x: 4, y: 0, w: 2, h: 5, i: "2" },
|
||||
{ x: 6, y: 0, w: 2, h: 3, i: "3" },
|
||||
{ x: 8, y: 0, w: 2, h: 3, i: "4" },
|
||||
{ x: 10, y: 0, w: 2, h: 3, i: "5" },
|
||||
{ x: 0, y: 5, w: 2, h: 5, i: "6" },
|
||||
{ x: 2, y: 5, w: 2, h: 5, i: "7" },
|
||||
{ x: 4, y: 5, w: 2, h: 5, i: "8" },
|
||||
{ x: 6, y: 3, w: 2, h: 4, i: "9" },
|
||||
{ x: 8, y: 4, w: 2, h: 4, i: "10" },
|
||||
{ x: 10, y: 4, w: 2, h: 4, i: "11" },
|
||||
{ x: 0, y: 10, w: 2, h: 5, i: "12" },
|
||||
{ x: 2, y: 10, w: 2, h: 5, i: "13" },
|
||||
{ x: 4, y: 8, w: 2, h: 4, i: "14" },
|
||||
{ x: 6, y: 8, w: 2, h: 4, i: "15" },
|
||||
{ x: 8, y: 10, w: 2, h: 5, i: "16" },
|
||||
{ x: 10, y: 4, w: 2, h: 2, i: "17" },
|
||||
{ x: 0, y: 9, w: 2, h: 3, i: "18" },
|
||||
{ x: 2, y: 6, w: 2, h: 2, i: "19" },
|
||||
];
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.vue-grid-layout {
|
||||
background: #f7f9fa;
|
||||
}
|
||||
|
||||
.vue-grid-item:not(.vue-grid-placeholder) {
|
||||
background: #ccc;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.vue-grid-item .resizing {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.vue-grid-item .static {
|
||||
background: #cce;
|
||||
}
|
||||
|
||||
.vue-grid-item .text {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vue-grid-item .no-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vue-grid-item .minMax {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.vue-grid-item .add {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vue-draggable-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
|
||||
no-repeat;
|
||||
background-position: bottom right;
|
||||
padding: 0 8px 8px 0;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user