Merge pull request #66 from soraLib/dock-panel

Dock panel

README.md

@@ -13,3 +13,7 @@ A Vue3 based component library.
   - [ ] and more...
 - [ ] tests
 - [ ] docs
+
+## Inspired by
+
+- [Element Plus](https://github.com/element-plus/element-plus) - A Vue.js 3 UI library

docs/.vitepress/config.ts

@@ -14,8 +14,8 @@ const Guide = [
 
 const Components = [
   {
-    text: 'Input',
-    link: '/component/input',
+    text: 'Dock',
+    link: '/component/dock',
   },
   {
     text: 'Fab',
@@ -25,6 +25,14 @@ const Components = [
     text: 'Grid',
     link: '/component/grid',
   },
+  {
+    text: 'Input',
+    link: '/component/input',
+  },
+  {
+    text: 'Resize',
+    link: '/component/resize',
+  },
   {
     text: 'Text',
     link: '/component/text',

docs/component/dock.md

@@ -0,0 +1,33 @@
+---
+title: Dock
+---
+
+# Dock
+
+The panel for each module can be undocked to become a floating panel. Floating panels can be resized and moved anywhere within the browser panel. When docking a panel, you return the view to the original view with tabs side by side, or you can dock the panel to create a different view. You can also customize your interface by applying layouts.
+
+There are 4 states that a panel can be in:
+
+- Nest-docked
+
+  Panels form tabbed groupings (also known as tab-docked).
+
+- Docked
+
+  Panels have tabs and share the available space.
+
+- Side-docked
+
+  Panels have title bars and are located at the right or left edges of the screen.
+
+- Floating
+
+  Panels are not docked.
+
+## Basic usage
+
+:::demo
+
+dock/basic
+
+:::

docs/component/resize.md

@@ -0,0 +1,17 @@
+---
+title: Resize
+---
+
+# Resize
+
+Used to make any HTML element resizable.
+
+With the `direction` prop, we can define customed resize directions.
+
+## Basic usage
+
+:::demo
+
+resize/basic
+
+:::

docs/examples/dock/basic.vue

@@ -0,0 +1,16 @@
+<template>
+  <s-dock class="bg-gray-400 dock-wrapper">
+    <s-dock-panel name="pane-A">Pane A Content</s-dock-panel>
+    <s-dock-panel name="pane-B">Pane B Content</s-dock-panel>
+    <s-dock-panel :workspace="true" name="workspace"
+      >Workspace Content</s-dock-panel
+    >
+    <s-dock-panel name="pane-C">Pane c Content</s-dock-panel>
+  </s-dock>
+</template>
+
+<style lang="scss" scoped>
+.dock-wrapper {
+  height: 400px;
+}
+</style>

docs/examples/resize/basic.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="mb-4">
+    <s-resize :initial-size="{ width: 300, height: 300 }" direction="right">
+      <div
+        class="bg-light-50 h-full dark:bg-dark-50 flex items-center justify-center"
+      >
+        resize direction right
+      </div>
+    </s-resize>
+  </div>
+
+  <div style="height: 300px">
+    <s-resize
+      class="absolute right-0"
+      :initial-size="{ width: 300, height: 300 }"
+      direction="left"
+    >
+      <div
+        class="bg-light-50 h-full dark:bg-dark-50 flex items-center justify-center"
+      >
+        resize direction left
+      </div>
+    </s-resize>
+  </div>
+</template>

docs/package.json

@@ -37,6 +37,7 @@
     "typescript": "^4.8.4",
     "unplugin-icons": "^0.14.12",
     "unplugin-vue-components": "^0.19.9",
+    "unplugin-vue-macros": "^1.2.2",
     "vite-plugin-pwa": "^0.13.1",
     "vite-plugin-windicss": "^1.8.8",
     "vitepress": "1.0.0-alpha.21",

docs/vite.config.ts

@@ -4,7 +4,8 @@ import WindiCSS from 'vite-plugin-windicss'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import { VitePWA } from 'vite-plugin-pwa'
-import DefineOptions from 'unplugin-vue-define-options/vite'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import VueMacros from 'unplugin-vue-macros/vite'
 import { MarkdownTransform } from './.vitepress/plugins/markdown-transform'
 
 export default defineConfig({
@@ -21,7 +22,13 @@ export default defineConfig({
     },
   },
   plugins: [
-    DefineOptions(),
+    VueMacros({
+      setupComponent: false,
+      setupSFC: false,
+      plugins: {
+        vueJsx: vueJsx(),
+      },
+    }),
     Components({
       dirs: ['.vitepress/theme/components'],
       // allow auto load markdown components under `./src/components/`

package.json

@@ -24,8 +24,14 @@
   "dependencies": {
     "@sa-ui/components": "workspace:*",
     "@sa-ui/constants": "workspace:*",
+    "@sa-ui/hooks": "workspace:*",
     "@sa-ui/utils": "workspace:*",
-    "@vueuse/core": "9.3.1"
+    "@types/lodash": "^4.14.191",
+    "@types/lodash-es": "^4.17.6",
+    "@vueuse/core": "9.3.1",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lodash-unified": "^1.0.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
@@ -35,8 +41,8 @@
     "@types/jsdom": "^20.0.0",
     "@types/node": "^18.8.0",
     "@types/sass": "^1.43.1",
-    "@vitejs/plugin-vue": "^3.1.2",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vitest/ui": "^0.23.4",
     "@vue/test-utils": "^2.1.0",
     "@vue/tsconfig": "^0.1.3",
@@ -56,7 +62,7 @@
     "sass": "^1.55.0",
     "tsx": "^3.10.1",
     "typescript": "^4.8.4",
-    "unplugin-vue-define-options": "^0.12.1",
+    "unplugin-vue-define-options": "^1.1.1",
     "vitest": "^0.23.4",
     "vue": "^3.2.41",
     "vue-tsc": "^1.0.9"

packages/components/dock/index.ts

@@ -0,0 +1,11 @@
+import { withInstall, withNoopInstall } from '@sa-ui/utils'
+import Dock from './src/dock.vue'
+import DockPanel from './src/dock-panel.vue'
+
+export const SDock = withInstall(Dock, { DockPanel })
+export default SDock
+
+export const SDockPanel = withNoopInstall(DockPanel)
+
+export * from './src/dock'
+export * from './src/dock-panel'

packages/components/dock/src/dock-panel.ts

@@ -0,0 +1,28 @@
+import { buildProps, definePropType } from '@sa-ui/utils'
+import type { ExtractPropTypes } from 'vue'
+import type DockPanel from './dock-panel.vue'
+
+export type DockPanelDirection = 'row' | 'column'
+// http://ps.bndh.gob.do/ProSourceFrontOffice/Documents/WebHelp/user_tasks/Docking_and_undocking_windows.htm
+export type DockState = 'nested-docked' | 'docked' | 'side-docked' | 'floating'
+
+export const dockPanelProps = buildProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  direction: {
+    type: definePropType<DockPanelDirection>(String),
+    default: 'row',
+  },
+  nestable: {
+    type: Boolean,
+    default: true,
+  },
+  workspace: {
+    type: Boolean,
+    default: false,
+  },
+} as const)
+export type DockPanelProps = ExtractPropTypes<typeof dockPanelProps>
+export type DockPanelInstance = InstanceType<typeof DockPanel>