+ );
+};
+
+export default TitleBar;
diff --git a/packages/docs/src/components/react/showcase/ubuntu-desktop/window/index.jsx b/packages/docs/src/components/react/showcase/ubuntu-desktop/window/index.jsx
new file mode 100644
index 0000000..2673a42
--- /dev/null
+++ b/packages/docs/src/components/react/showcase/ubuntu-desktop/window/index.jsx
@@ -0,0 +1,17 @@
+import React, { Fragment } from "react";
+import TitleBar from "./TitleBar.jsx";
+import styles from "./window.module.css";
+
+export default function Window(props) {
+ const { children, onClose } = props;
+ return (
+
+ {
+ onClose();
+ }}
+ />
+
{children}
+
+ );
+}
diff --git a/packages/docs/src/components/react/showcase/ubuntu-desktop/window/titlebar.module.css b/packages/docs/src/components/react/showcase/ubuntu-desktop/window/titlebar.module.css
new file mode 100644
index 0000000..5aa4524
--- /dev/null
+++ b/packages/docs/src/components/react/showcase/ubuntu-desktop/window/titlebar.module.css
@@ -0,0 +1,36 @@
+.titleBar {
+ background-color: #2d2d2d;
+ width: 100%;
+ height: 2.5rem;
+ display: grid;
+ grid-template-columns: repeat(100, 1fr);
+}
+
+.controls {
+ display: flex;
+ gap: 0.7rem;
+ align-items: center;
+ justify-content: flex-end;
+ grid-area: 1 / 90 / 1 / 101;
+ margin-right: 0.5rem;
+}
+
+.control {
+ display: block;
+ width: 1.7rem;
+ cursor: pointer;
+}
+
+.title {
+ grid-area: 1 / 40 / 1 / 60;
+ font-size: 0.8rem;
+ font-weight: bold;
+ font-family: "MyCustomFont", sans-serif;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+}
+
+@font-face {
+ font-family: "MyCustomFont";
+}
diff --git a/packages/docs/src/components/react/showcase/ubuntu-desktop/window/window.module.css b/packages/docs/src/components/react/showcase/ubuntu-desktop/window/window.module.css
new file mode 100644
index 0000000..5786d46
--- /dev/null
+++ b/packages/docs/src/components/react/showcase/ubuntu-desktop/window/window.module.css
@@ -0,0 +1,6 @@
+.body {
+ background-color: #300b24;
+ opacity: 0.8;
+ width: 100%;
+ height: 100%;
+}
diff --git a/packages/docs/src/components/react/simple/styles.css b/packages/docs/src/components/react/simple/styles.css
deleted file mode 100644
index bd833ee..0000000
--- a/packages/docs/src/components/react/simple/styles.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.widget {
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- height: 100%;
-}
-.row {
- display: flex;
- justify-content: space-between;
-}
-.flex-1 {
- width: 70%;
- background-color: white;
-}
-.flex-2 {
- width: 30%;
- background-color: white;
-}
-
-.title {
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
-}
-
-
-.full-width {
- width: 100%;
-}
diff --git a/packages/docs/src/components/react/adding-item/styles.css b/packages/docs/src/components/react/styles.css
similarity index 80%
rename from packages/docs/src/components/react/adding-item/styles.css
rename to packages/docs/src/components/react/styles.css
index bd833ee..0cf8a3c 100644
--- a/packages/docs/src/components/react/adding-item/styles.css
+++ b/packages/docs/src/components/react/styles.css
@@ -25,7 +25,18 @@
text-align: center;
}
-
.full-width {
width: 100%;
}
+
+.react-json-view {
+ padding: 1rem;
+}
+
+.m-4 {
+ margin: 1rem;
+}
+
+.bg {
+ background-color: #fbeaff;
+}
diff --git a/packages/docs/src/components/react/styles.module.css b/packages/docs/src/components/react/styles.module.css
new file mode 100644
index 0000000..f6f0987
--- /dev/null
+++ b/packages/docs/src/components/react/styles.module.css
@@ -0,0 +1,13 @@
+.btn {
+ padding: 1rem;
+ margin: 1rem 0rem;
+ background-color: #845ec2;
+ color: white;
+ font-size: 1rem;
+ border-radius: 0.5rem;
+}
+
+.btn:active {
+ background-color: #b39cd0;
+ color: black;
+}
diff --git a/packages/vue/src/examples/ColumnsExample.vue b/packages/docs/src/components/vue/ColumnsExample.vue
similarity index 96%
rename from packages/vue/src/examples/ColumnsExample.vue
rename to packages/docs/src/components/vue/ColumnsExample.vue
index 0f01978..83b327c 100644
--- a/packages/vue/src/examples/ColumnsExample.vue
+++ b/packages/docs/src/components/vue/ColumnsExample.vue
@@ -64,8 +64,7 @@
import WidgetContainer from "../components/WidgetContainer.vue";
import DummyWidget from "../components/Widget.vue";
-import GridstackItem from "../gridstack/GridstackItem.vue";
-import GridstackContainer from "../gridstack/GridstackContainer.vue";
+import {GridstackItem, GridstackContainer} from "@declarative-gridstack/vue";
export default {
name: "SimpleExample",
components: {
diff --git a/packages/vue/src/examples/Dev.vue b/packages/docs/src/components/vue/Dev.vue
similarity index 100%
rename from packages/vue/src/examples/Dev.vue
rename to packages/docs/src/components/vue/Dev.vue
diff --git a/packages/vue/src/examples/DragAndDrop.vue b/packages/docs/src/components/vue/DragAndDrop.vue
similarity index 100%
rename from packages/vue/src/examples/DragAndDrop.vue
rename to packages/docs/src/components/vue/DragAndDrop.vue
diff --git a/packages/vue/src/examples/MinAndMax.vue b/packages/docs/src/components/vue/MinAndMax.vue
similarity index 100%
rename from packages/vue/src/examples/MinAndMax.vue
rename to packages/docs/src/components/vue/MinAndMax.vue
diff --git a/packages/vue/src/examples/Nested.vue b/packages/docs/src/components/vue/Nested.vue
similarity index 100%
rename from packages/vue/src/examples/Nested.vue
rename to packages/docs/src/components/vue/Nested.vue
diff --git a/packages/vue/src/examples/Simple.vue b/packages/docs/src/components/vue/Simple.vue
similarity index 100%
rename from packages/vue/src/examples/Simple.vue
rename to packages/docs/src/components/vue/Simple.vue
diff --git a/packages/vue/src/examples/StateSyncing.vue b/packages/docs/src/components/vue/StateSyncing.vue
similarity index 100%
rename from packages/vue/src/examples/StateSyncing.vue
rename to packages/docs/src/components/vue/StateSyncing.vue
diff --git a/packages/vue/src/examples/UpdateDimension.vue b/packages/docs/src/components/vue/UpdateDimension.vue
similarity index 100%
rename from packages/vue/src/examples/UpdateDimension.vue
rename to packages/docs/src/components/vue/UpdateDimension.vue
diff --git a/packages/vue/src/components/SubgridContainer.vue b/packages/docs/src/components/vue/components/SubgridContainer.vue
similarity index 100%
rename from packages/vue/src/components/SubgridContainer.vue
rename to packages/docs/src/components/vue/components/SubgridContainer.vue
diff --git a/packages/vue/src/components/Widget.vue b/packages/docs/src/components/vue/components/Widget.vue
similarity index 100%
rename from packages/vue/src/components/Widget.vue
rename to packages/docs/src/components/vue/components/Widget.vue
diff --git a/packages/vue/src/components/WidgetContainer.vue b/packages/docs/src/components/vue/components/WidgetContainer.vue
similarity index 100%
rename from packages/vue/src/components/WidgetContainer.vue
rename to packages/docs/src/components/vue/components/WidgetContainer.vue
diff --git a/packages/docs/src/docs/concepts/gridstack-droppables.md b/packages/docs/src/docs/concepts/gridstack-droppables.md
index cd03e48..454b7f8 100644
--- a/packages/docs/src/docs/concepts/gridstack-droppables.md
+++ b/packages/docs/src/docs/concepts/gridstack-droppables.md
@@ -8,12 +8,12 @@ outline: deep
### What are DND items?
-DND (drag and drop) items are html elements (gridstack items that resides out of
-a gridstack grid) that could be dragged and dropped into a gridstack grid.
+DND (drag and drop) items are html elements (Gridstack Items that are not in a Gridstack Grid)
+that could be dragged and dropped into a Gridstack Grid.
### How are DND items different from normal html elements?
-DND items are normal html elements that have the class 'grid-stack-item' in the outer tag and 'grid-stack-item-content' in the inner tag. To ensure proper identification of the items in the DOM, each outer element should also have a unique class ('gs-dnd-item' in the example below) and a 'gs-dnd-item-id' attribute with a unique value. The example below shows two unique DND items:
+DND items are normal html elements that have the class `grid-stack-item` in the outer tag and `grid-stack-item-content` in the inner tag. To ensure proper identification of the items in the DOM, each outer element should also have a unique class ('gs-dnd-item' in the example below) and a 'gs-dnd-item-id' attribute with a unique value. The example below shows two unique DND items:
```html
diff --git a/packages/docs/src/docs/concepts/gridstack-containers.md b/packages/docs/src/docs/concepts/gridstack-grids.md
similarity index 52%
rename from packages/docs/src/docs/concepts/gridstack-containers.md
rename to packages/docs/src/docs/concepts/gridstack-grids.md
index 82a3fc4..bc1751c 100644
--- a/packages/docs/src/docs/concepts/gridstack-containers.md
+++ b/packages/docs/src/docs/concepts/gridstack-grids.md
@@ -2,12 +2,12 @@
outline: deep
---
-# What are Gridstack Containers?
+# What are `Gridstack Grids`?
-Gridstack containers can hold Gridstack items. These items can be resized and repositioned either using @declarative-gridstack's API or manually using mouse dragging.
+`Gridstack Grids` can hold `Gridstack Items`. These items can be resized and repositioned within the grid, either manually using mouse dragging or by `@declarative-gridstack's` APIs .
-```jsx
-const [layout, setLayout] = useState([
+```json
+[
{
id: "3",
x: 1,
@@ -32,7 +32,7 @@ const [layout, setLayout] = useState([
data: "Chennai, Tamil Nadu, India",
},
},
-]);
+];
```
-The array mentioned above is a model for a master grid that contains two Gridstack items.
+The array given above represents a `Gridstack Grid` with two `Gridstack Items` in it.
diff --git a/packages/docs/src/docs/concepts/gridstack-items.md b/packages/docs/src/docs/concepts/gridstack-items.md
index 4f2e9e3..faf723f 100644
--- a/packages/docs/src/docs/concepts/gridstack-items.md
+++ b/packages/docs/src/docs/concepts/gridstack-items.md
@@ -7,33 +7,33 @@ outline: deep
A Gridstack item is an object that must contain these properties.
- id: A unique identifier for the item.
-- x: The x-coordinate of the item's position within the container.
-- y: The y-coordinate of the item's position within the container.
+- x: The x-coordinate of the item's position within the grid.
+- y: The y-coordinate of the item's position within the grid.
- w: The width of the item, specified in terms of the number of grid columns it occupies.
- h: The height of the item, specified in terms of the number of grid rows it occupies.
-These properties are necessary for an item to be correctly positioned and sized within a Gridstack container.
+These properties are necessary for an item to be correctly positioned and sized within a Gridstack Grid.
Arbitary properties,
- data (can be named arbitrarily and should be a valid JavaScript identifier): configuration information or other relevant details that the widget component requires in order to determine how it should look and function. This property will be passed to the widget component as props.
-The master Gridstack container and the Gridstack subgrids both have the capability to hold Gridstack items.
-
-```jsx
-const [widget, setWidget] = useState({
- widget: {
- id: 3,
- x: 6,
- y: 0,
- w: 6,
- h: 3,
- data: {
- title: "I am a Grid item",
- ability: "I can be moved around and resized.",
- },
- },
-});
+The master [Gridstack Grid](./gridstack-grids.md) and the [Gridstack subgrids](./gridstack-subgrids.md) both have the capability to hold Gridstack items.
+
+```json
+{
+ "widget": {
+ "id": 3,
+ "x": 6,
+ "y": 0,
+ "w": 6,
+ "h": 3,
+ "data": {
+ "title": "I am a Grid item",
+ "ability": "I can be moved around and resized."
+ }
+ }
+}
```
-The object given above is a model for a Gridstack item.
+The object given above is represents a Gridstack item.
diff --git a/packages/docs/src/docs/concepts/gridstack-subgrids.md b/packages/docs/src/docs/concepts/gridstack-subgrids.md
index ab71ee7..e2c393b 100644
--- a/packages/docs/src/docs/concepts/gridstack-subgrids.md
+++ b/packages/docs/src/docs/concepts/gridstack-subgrids.md
@@ -4,10 +4,14 @@ outline: deep
# What are Gridstack Subgrids?
-Each subgrid is itself a Gridstack item that has a Gridstack container within it. This container can hold other Gridstack items, allowing for more complex and nested layouts.
+Each subgrid is itself a [Gridstack item](./gridstack-items.md) that has a [Gridstack Grid](./gridstack-grids.md) within it, the grid can further hold other Gridstack items, allowing for more complex and nested layouts.
-```jsx
-const [subgridLayout, setSubgridLayout] = useState([
+::: info
+The root level Gridstack Grid is called the `Master Grid`.
+:::
+
+```json
+[
{
id: 2,
x: 3,
@@ -37,7 +41,11 @@ const [subgridLayout, setSubgridLayout] = useState([
},
],
},
-]);
+];
```
-Based on the model provided above, the layout can be described as having a master container that includes a Gridstack item that serves as a subgrid. This subgrid, in turn, contains two additional Gridstack items.
+The array given above represents a Master grid that has one Subgrid inside it, the subgrid further has 2 items inside it.
+
+::: warning
+The property `children` in an object that represents a Gridstack Item makes it a Gridstack Subgrid. The property `children` is a reserved property and must not be used for other purposes.
+:::
diff --git a/packages/docs/src/docs/concepts/how-it-works.md b/packages/docs/src/docs/concepts/how-it-works.md
index b32488f..705d684 100644
--- a/packages/docs/src/docs/concepts/how-it-works.md
+++ b/packages/docs/src/docs/concepts/how-it-works.md
@@ -61,7 +61,7 @@ Try resizing / moving the grid item below to observe the model update automatica
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { ref, onMounted } from 'vue'
-import Simple from '../../components/react/simple/Simple.jsx'
+import Simple from '../../components/react/Simple.jsx'
const el = ref()
onMounted(() => {
diff --git a/packages/docs/src/docs/guides/react/adding-items.md b/packages/docs/src/docs/guides/react/adding-items.md
index 32b48fb..82e4232 100644
--- a/packages/docs/src/docs/guides/react/adding-items.md
+++ b/packages/docs/src/docs/guides/react/adding-items.md
@@ -1,6 +1,6 @@
-# Adding items
+# Adding an item to a container after it has been initialized
-To add an item to a grid, push the item direcly to the layout json.
+To add an item to a container after it has been initialized, push the item direcly to the layout json.
```jsx
const [layout, setLayout] = useState([
@@ -45,7 +45,7 @@ Click the `Add item` button to add a new item to the layout.
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { ref, onMounted } from 'vue'
-import AddingItem from '../../../components/react/adding-item/AddingItem.jsx'
+import AddingItem from '../../../components/react/AddingItem.jsx'
const el = ref()
onMounted(() => {
diff --git a/packages/docs/src/docs/guides/react/cra.md b/packages/docs/src/docs/guides/react/cra.md
index 301a302..00edadc 100644
--- a/packages/docs/src/docs/guides/react/cra.md
+++ b/packages/docs/src/docs/guides/react/cra.md
@@ -3,13 +3,17 @@
If you have a React application scaffolded with CRA (create-react-app), it is recommended to remove the component from the index.js file.
```jsx
-
-
-
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+
+
+
+);
```
-with
+To,
```jsx
-
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render();
```
diff --git a/packages/docs/src/docs/guides/react/nested.md b/packages/docs/src/docs/guides/react/nested.md
index 57eedc8..33e0508 100644
--- a/packages/docs/src/docs/guides/react/nested.md
+++ b/packages/docs/src/docs/guides/react/nested.md
@@ -1,6 +1,6 @@
-# Nested grid
+# Nested grids
-Typical example of a nested grid. You can move items between the master grid and the subgrid.
+Typical example of a nested grid layout. You can move items between the master grid and the subgrids.
@@ -8,7 +8,7 @@ Typical example of a nested grid. You can move items between the master grid and
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { ref, onMounted } from 'vue'
-import Nested from '../../../components/react/nested/Nested.jsx'
+import Nested from '../../../components/react/Nested.jsx'
const el = ref()
onMounted(() => {
diff --git a/packages/docs/src/docs/guides/react/removing-items.md b/packages/docs/src/docs/guides/react/removing-items.md
index 3cb1ab8..eecc449 100644
--- a/packages/docs/src/docs/guides/react/removing-items.md
+++ b/packages/docs/src/docs/guides/react/removing-items.md
@@ -1,12 +1,11 @@
# Removing items from a grid
-Don't remove the item from the layout json if you want to remove an item from the grid.
::: warning
-Don't do this!
+If you want to remove a `Gridstack item` from a `Gridstack container`, don't remove the item from the state variable.
:::
```jsx
-const [layout, setLayout] = useState([
+const [container, setContainer] = useState([
{
id: "1",
x: 0,
@@ -44,7 +43,7 @@ return ;
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { ref, onMounted } from 'vue'
-import Remove from '../../../components/react/remove/Remove.jsx'
+import Remove from '../../../components/react/Remove.jsx'
const el = ref()
onMounted(() => {
diff --git a/packages/docs/src/docs/guides/react/simple.md b/packages/docs/src/docs/guides/react/simple.md
index 3b8d598..f5662c1 100644
--- a/packages/docs/src/docs/guides/react/simple.md
+++ b/packages/docs/src/docs/guides/react/simple.md
@@ -1,6 +1,6 @@
-# Simple grid
+# A simple example
-A simple grid container
+A `Gridstack container` with one `Gridstack item` in it.
@@ -8,7 +8,7 @@ A simple grid container
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { ref, onMounted } from 'vue'
-import Simple from '../../../components/react/simple/Simple.jsx'
+import Simple from '../../../components/react/Simple.jsx'
const el = ref()
onMounted(() => {
diff --git a/packages/docs/src/docs/guides/react/using-apis.md b/packages/docs/src/docs/guides/react/using-apis.md
index 2b834e4..9a7a7a3 100644
--- a/packages/docs/src/docs/guides/react/using-apis.md
+++ b/packages/docs/src/docs/guides/react/using-apis.md
@@ -22,7 +22,7 @@ Press the `Update width` button and see the layout change.
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { ref, onMounted } from 'vue'
-import UpdatingDimensions from '../../../components/react/apis/UpdatingDimensions.jsx'
+import UpdatingDimensions from '../../../components/react/UpdatingDimensions.jsx'
const el = ref()
onMounted(() => {
diff --git a/packages/docs/src/docs/guides/vue/column-example.md b/packages/docs/src/docs/guides/vue/column-example.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/src/docs/guides/vue/dev.md b/packages/docs/src/docs/guides/vue/dev.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/src/docs/guides/vue/drag-and-drop.md b/packages/docs/src/docs/guides/vue/drag-and-drop.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/src/docs/guides/vue/index.md b/packages/docs/src/docs/guides/vue/index.md
deleted file mode 100644
index e554d00..0000000
--- a/packages/docs/src/docs/guides/vue/index.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# Markdown Extension Examples
-
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
-
-## Syntax Highlighting
-
-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
-
-**Input**
-
-````
-```js{4}
-export default {
- data () {
- return {
- msg: 'Highlighted!'
- }
- }
-}
-```
-````
-
-**Output**
-
-```js{4}
-export default {
- data () {
- return {
- msg: 'Highlighted!'
- }
- }
-}
-```
-
-## Custom Containers
-
-**Input**
-
-```md
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-```
-
-**Output**
-
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-
-## More
-
-Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
\ No newline at end of file
diff --git a/packages/docs/src/docs/guides/vue/min-and-max.md b/packages/docs/src/docs/guides/vue/min-and-max.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/src/docs/guides/vue/nested.md b/packages/docs/src/docs/guides/vue/nested.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/src/docs/guides/vue/simple.md b/packages/docs/src/docs/guides/vue/simple.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/src/docs/guides/vue/state-syncing.md b/packages/docs/src/docs/guides/vue/state-syncing.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/src/docs/guides/vue/update-dimension.md b/packages/docs/src/docs/guides/vue/update-dimension.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/src/docs/showcase/ubuntu-desktop.md b/packages/docs/src/docs/showcase/ubuntu-desktop.md
new file mode 100644
index 0000000..bb6c560
--- /dev/null
+++ b/packages/docs/src/docs/showcase/ubuntu-desktop.md
@@ -0,0 +1,19 @@
+---
+layout: page
+---
+
+
+
+
diff --git a/packages/react/src/GridstackItem.jsx b/packages/react/src/GridstackItem.jsx
index 733360a..612c59f 100644
--- a/packages/react/src/GridstackItem.jsx
+++ b/packages/react/src/GridstackItem.jsx
@@ -9,8 +9,33 @@ function GridstackItem(props) {
const [areChildrenMounted, setAreChildrenMounted] = useState(false);
// To ensure that the user's changes to certain props do not affect the initialized gs-item, it is important to make a copy of these props. The props that should not be mutated by the user after the gs-item has been initialized are x, y, w, h, and id. Once the gs-item has been initialized, the user should refrain from modifying these specific props.
- const { x, y, w, h, id, noScroll = false, className = "", children } = props;
- const [item] = useState({ x, y, w, h, id, noScroll, className });
+ const {
+ x,
+ y,
+ w,
+ h,
+ id,
+ noScroll = false,
+ className = "",
+ children,
+ minW,
+ minH,
+ maxW,
+ maxH,
+ } = props;
+ const [item] = useState({
+ x,
+ y,
+ w,
+ h,
+ id,
+ noScroll,
+ className,
+ minH,
+ minW,
+ maxW,
+ maxH,
+ });
const gsItemElement = useRef();
const masterGrid = useContext(MasterGridContext);
@@ -38,6 +63,10 @@ function GridstackItem(props) {