diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index e72862c56..b8c1708b4 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -33,22 +33,29 @@ export interface ViewFactoryData { } export interface DockviewOptions { + /** + * Disable the auto-resizing which is controlled through a `ResizeObserver`. + * Call `.layout(width, height)` to manually resize the container. + */ disableAutoResizing?: boolean; hideBorders?: boolean; singleTabMode?: 'fullwidth' | 'default'; disableFloatingGroups?: boolean; floatingGroupBounds?: - | 'boundedWithinViewport' - | { - minimumHeightWithinViewport?: number; - minimumWidthWithinViewport?: number; - }; + | 'boundedWithinViewport' + | { + minimumHeightWithinViewport?: number; + minimumWidthWithinViewport?: number; + }; popoutUrl?: string; defaultRenderer?: DockviewPanelRenderer; debug?: boolean; rootOverlayModel?: DroptargetOverlayModel; locked?: boolean; disableDnd?: boolean; + /** + * Pixel gap between groups + */ gap?: number; } @@ -76,7 +83,7 @@ export class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent { readonly position: Position, readonly getData: () => PanelTransfer | undefined, readonly group?: DockviewGroupPanel - ) { } + ) {} accept(): void { this._isAccepted = true; @@ -178,9 +185,7 @@ export function isPanelOptionsWithGroup( } type AddPanelFloatingGroupUnion = { - floating: - | Partial - | true; + floating: Partial | true; position: never; }; diff --git a/packages/dockview-vue/src/dockview/dockview.vue b/packages/dockview-vue/src/dockview/dockview.vue index df8bdb53e..0290389ae 100644 --- a/packages/dockview-vue/src/dockview/dockview.vue +++ b/packages/dockview-vue/src/dockview/dockview.vue @@ -5,7 +5,6 @@ import { type DockviewOptions, PROPERTY_KEYS, type DockviewFrameworkOptions, - type DockviewReadyEvent, } from 'dockview-core'; import { ref, @@ -23,20 +22,7 @@ import { VueWatermarkRenderer, findComponent, } from '../utils'; - -interface VueProps { - watermarkComponent?: string; - defaultTabComponent?: string; - rightHeaderActionsComponent?: string; - leftHeaderActionsComponent?: string; - prefixHeaderActionsComponent?: string; -} - -type VueEvents = { - ready: [event: DockviewReadyEvent]; -}; - -export type IDockviewVueProps = DockviewOptions & VueProps; +import type { IDockviewVueProps, VueEvents } from './types'; function extractCoreOptions(props: IDockviewVueProps): DockviewOptions { const coreOptions = (PROPERTY_KEYS as (keyof DockviewOptions)[]).reduce( diff --git a/packages/dockview-vue/src/dockview/types.ts b/packages/dockview-vue/src/dockview/types.ts new file mode 100644 index 000000000..ca2e09778 --- /dev/null +++ b/packages/dockview-vue/src/dockview/types.ts @@ -0,0 +1,15 @@ +import { type DockviewOptions, type DockviewReadyEvent } from 'dockview-core'; + +export interface VueProps { + watermarkComponent?: string; + defaultTabComponent?: string; + rightHeaderActionsComponent?: string; + leftHeaderActionsComponent?: string; + prefixHeaderActionsComponent?: string; +} + +export type VueEvents = { + ready: [event: DockviewReadyEvent]; +}; + +export type IDockviewVueProps = DockviewOptions & VueProps; diff --git a/packages/dockview-vue/src/index.ts b/packages/dockview-vue/src/index.ts index f2694c222..6a4e28239 100644 --- a/packages/dockview-vue/src/index.ts +++ b/packages/dockview-vue/src/index.ts @@ -3,3 +3,4 @@ export * from 'dockview-core'; import DockviewVue from './dockview/dockview.vue'; export { DockviewVue }; export * from './dockview/dockview.vue'; +export * from './dockview/types'; diff --git a/packages/dockview-vue/tsconfig.typedoc.json b/packages/dockview-vue/tsconfig.typedoc.json new file mode 100644 index 000000000..3236db38b --- /dev/null +++ b/packages/dockview-vue/tsconfig.typedoc.json @@ -0,0 +1,3 @@ +{ + "include": ["src/dockview/types.ts"] +} diff --git a/packages/dockview-vue/typedoc.json b/packages/dockview-vue/typedoc.json index b97dde02c..729fd158e 100644 --- a/packages/dockview-vue/typedoc.json +++ b/packages/dockview-vue/typedoc.json @@ -1,5 +1,6 @@ { + "$schema": "https://typedoc.org/schema.json", "extends": ["../../typedoc.base.json"], - "entryPoints": ["src/index.ts"], - "exclude": ["**/dist/**"] + "entryPoints": ["src/dockview/types.ts"], + "tsconfig":"tsconfig.typedoc.json" } diff --git a/packages/docs/docs/api/dockview/options.mdx b/packages/docs/docs/api/dockview/options.mdx index f9715b924..12aa608c6 100644 --- a/packages/docs/docs/api/dockview/options.mdx +++ b/packages/docs/docs/api/dockview/options.mdx @@ -15,4 +15,9 @@ import { DocRef } from '@site/src/components/ui/reference/docRef'; + + + + + diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js index 7a5bebd21..a1ad4ae14 100644 --- a/packages/docs/docusaurus.config.js +++ b/packages/docs/docusaurus.config.js @@ -55,6 +55,9 @@ const config = { { href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200', }, + { + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"' + } ], plugins: [ 'docusaurus-plugin-sass', diff --git a/packages/docs/package.json b/packages/docs/package.json index 414bf6f84..a016a017d 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -31,6 +31,7 @@ "@docusaurus/preset-classic": "^3.1.1", "@mdx-js/react": "^3.0.0", "@minoru/react-dnd-treeview": "^3.4.4", + "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-popover": "^1.0.7", "ag-grid-community": "^31.0.2", diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss index 864ec5a33..001e591dd 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss @@ -15,6 +15,8 @@ } } + + .data-table { table { font-size: 11px; diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx index df7a5995c..833f62a99 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx @@ -198,6 +198,8 @@ const DockviewDemo = (props: { theme?: string }) => { } as React.CSSProperties; }, [gapCheck]); + const [showLogs, setShowLogs] = React.useState(false); + return (
{
*/} +
+ +
-
- {logLines.map((line, i) => { - return ( -
- - {logLines.length - i} - - - {line.timestamp && ( - - {line.timestamp - .toISOString() - .substring(11, 23)} - - )} - {line.text} - -
- ); - })} +
+ + {showLogs && ( +
+ {logLines.map((line, i) => { + return ( +
+ + {logLines.length - i} + + + {line.timestamp && ( + + {line.timestamp + .toISOString() + .substring(11, 23)} + + )} + {line.text} + +
+ ); + })} +
+ )}
); diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx index 29c6ae8d6..1babd4ce0 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx @@ -98,11 +98,12 @@ export const GridActions = (props: {
- Gap + Group Gap setGap(Number(event.target.value))} diff --git a/packages/docs/src/components/frameworkSpecific.css b/packages/docs/src/components/frameworkSpecific.css new file mode 100644 index 000000000..a92d63d29 --- /dev/null +++ b/packages/docs/src/components/frameworkSpecific.css @@ -0,0 +1,105 @@ + +.DropdownMenuContent { + /* min-width: 220px; */ + background-color: rgba(255, 255, 255, 0.1); + border-radius: 6px; + padding: 5px; + box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2); + animation-duration: 400ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, opacity; +} +.DropdownMenuContent[data-side='top'], +.DropdownMenuSubContent[data-side='top'] { + animation-name: slideDownAndFade; +} +.DropdownMenuContent[data-side='right'], +.DropdownMenuSubContent[data-side='right'] { + animation-name: slideLeftAndFade; +} +.DropdownMenuContent[data-side='bottom'], +.DropdownMenuSubContent[data-side='bottom'] { + animation-name: slideUpAndFade; +} +.DropdownMenuContent[data-side='left'], +.DropdownMenuSubContent[data-side='left'] { + animation-name: slideRightAndFade; +} + +.DropdownMenuItem[data-highlighted], +.DropdownMenuCheckboxItem[data-highlighted], +.DropdownMenuRadioItem[data-highlighted], +.DropdownMenuSubTrigger[data-highlighted] { + background-color: rgba(255, 255, 255, 0.1); +} + + + +.framework-menu-item { + display: flex; + align-items: center; + justify-content: space-between; + width: 100px; + height: 25px; + padding: 4px 8px; + font-size: 13px; + cursor: pointer; +} + +.framework-menu-item-select { + display: flex; + align-items: center; + justify-content: space-between; + width: 120px; + height: 35px; + padding: 4px 8px; + border-radius: 6px; + font-size: 13px; + background-color: rgba(255, 255, 255, 0.1); + cursor: pointer; + border: 1px solid rgba(0,0,0, 0.1); +} + +@keyframes slideUpAndFade { + from { + opacity: 0; + transform: translateY(2px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideRightAndFade { + from { + opacity: 0; + transform: translateX(-2px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideDownAndFade { + from { + opacity: 0; + transform: translateY(-2px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideLeftAndFade { + from { + opacity: 0; + transform: translateX(2px); + } + to { + opacity: 1; + transform: translateX(0); + } +} diff --git a/packages/docs/src/components/frameworkSpecific.tsx b/packages/docs/src/components/frameworkSpecific.tsx index d29a8f65d..efe8eee7e 100644 --- a/packages/docs/src/components/frameworkSpecific.tsx +++ b/packages/docs/src/components/frameworkSpecific.tsx @@ -1,18 +1,27 @@ import BrowserOnly from '@docusaurus/BrowserOnly'; import { DockviewEmitter } from 'dockview'; import * as React from 'react'; -import { IS_PROD } from '../flags'; +import './frameworkSpecific.css'; -const frameworks = [ - // { value: 'JavaScript', label: 'JavaScript' }, - { value: 'React', label: 'React' }, - { value: 'Vue', label: 'Vue' }, +export interface FrameworkDescriptor { + value: string; + label: string; + icon: string; +} + +const frameworks: FrameworkDescriptor[] = [ + // { value: 'JavaScript', label: 'JavaScript', icon: 'img/js-icon.svg' }, + { value: 'React', label: 'React', icon: 'img/react-icon.svg' }, + { value: 'Vue', label: 'Vue', icon: 'img/vue-icon.svg' }, // { value: 'Angular', label: 'Angular' }, ]; const activeFrameworkGlobal = new DockviewEmitter({ replay: true }); -export function useActiveFramework(): [string, (value: string) => void] { +export function useActiveFramework(): [ + FrameworkDescriptor, + (value: string) => void +] { const [value, setValue] = React.useState( localStorage.getItem('dv-docs-framework') ?? frameworks[0].value ); @@ -37,9 +46,14 @@ export function useActiveFramework(): [string, (value: string) => void] { activeFrameworkGlobal.fire(value); }, []); - return [IS_PROD ? frameworks[0].value : value, setter]; + const option = frameworks.find((_) => _.value === value); + + return [option, setter]; } +import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + const FrameworkSelector1 = () => { const [activeFramework, setActiveFramework] = useActiveFramework(); @@ -47,18 +61,48 @@ const FrameworkSelector1 = () => { setActiveFramework(event.target.value), ]; - if (IS_PROD) { - return null; - } - return ( - + + +
+ + {activeFramework.label} + + +
+ + + {frameworks.map((framework) => { + return ( + setActiveFramework(framework.label)} + className="DropdownMenuItem" + > +
+ + {framework.label} + + +
+ + ); + })} + + ); }; @@ -72,7 +116,7 @@ const FrameworkSpecific1 = (props: { }) => { const [activeFramework] = useActiveFramework(); - if (activeFramework === props.framework) { + if (activeFramework.value === props.framework) { return props.children; } diff --git a/packages/docs/src/components/ui/codeRunner.tsx b/packages/docs/src/components/ui/codeRunner.tsx index 785a89ceb..93107206c 100644 --- a/packages/docs/src/components/ui/codeRunner.tsx +++ b/packages/docs/src/components/ui/codeRunner.tsx @@ -10,8 +10,10 @@ export const _CodeRunner = (props: { id: string; height: number }) => { const sandboxUrl = `${BASE_SANDBOX_URL}/templates/${ props.id - }/${framework.toLowerCase()}`; - const path = `/templates/${props.id}/${framework.toLowerCase()}/index.html`; + }/${framework.label.toLowerCase()}`; + const path = `/templates/${ + props.id + }/${framework.value.toLowerCase()}/index.html`; return (