diff --git a/package-lock.json b/package-lock.json index 6a0160e4..083045a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 72e6cb42..043b1a80 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/index.ts b/src/components/index.ts index 2584deb4..39ad3e8c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -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 = (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]); }); diff --git a/src/type.d.ts b/src/type.d.ts deleted file mode 100644 index ecbfb242..00000000 --- a/src/type.d.ts +++ /dev/null @@ -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; - devDependencies: Recordable; - }; - lastBuildTime: string; - }; - - // vue - declare type PropType = VuePropType; - declare type VueNode = VNodeChild | JSX.Element; - - export type Writable = { - -readonly [P in keyof T]: T[P]; - }; - - declare type Nullable = T | null; - declare type NonNullable = T extends null | undefined ? never : T; - declare type Recordable = Record; - declare type ReadonlyRecordable = { - readonly [key: string]: T; - }; - declare type Indexable = { - [key: string]: T; - }; - declare type DeepPartial = { - [P in keyof T]?: DeepPartial; - }; - declare type TimeoutHandle = ReturnType; - declare type IntervalHandle = ReturnType; - - 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 = - | { new (): ComponentPublicInstance } - | FunctionalComponent; -} diff --git a/src/types/global.d.ts b/src/types/global.d.ts index ecbfb242..30bfd083 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -38,7 +38,7 @@ declare global { }; // vue - declare type PropType = VuePropType; + export declare type PropType = VuePropType; declare type VueNode = VNodeChild | JSX.Element; export type Writable = { diff --git a/src/types/vue-drag-resize.d.ts b/src/types/vue-grid-layout.d.ts similarity index 78% rename from src/types/vue-drag-resize.d.ts rename to src/types/vue-grid-layout.d.ts index 17ee00aa..8f9f00c2 100644 --- a/src/types/vue-drag-resize.d.ts +++ b/src/types/vue-grid-layout.d.ts @@ -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; + } } diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index a025ab6c..46b7ca7e 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -20,73 +20,27 @@ limitations under the License. -->
- -

Hello World {{ item.i }}

- +
Configurations
- diff --git a/src/views/dashboard/widget/GridItem.vue b/src/views/dashboard/widget/GridItem.vue index e69de29b..f17288f1 100644 --- a/src/views/dashboard/widget/GridItem.vue +++ b/src/views/dashboard/widget/GridItem.vue @@ -0,0 +1,60 @@ + + + diff --git a/src/views/dashboard/widget/GridLayout.vue b/src/views/dashboard/widget/GridLayout.vue index e69de29b..d202261d 100644 --- a/src/views/dashboard/widget/GridLayout.vue +++ b/src/views/dashboard/widget/GridLayout.vue @@ -0,0 +1,132 @@ + + + +