@weaverse/react 0.6.5 → 0.6.6

package/dist/index.js

@@ -82,7 +82,15 @@ var base_default = BaseElement;
 // src/elements/button.tsx
 var React2 = __toESM(require("react"));
 var Button = React2.forwardRef((props, ref) => {
-  const _a = props, { buttonType, css } = _a, rest = __objRest(_a, ["buttonType", "css"]);
+  const _a = props, { buttonType, css, openInNewTab = false, target = "" } = _a, rest = __objRest(_a, ["buttonType", "css", "openInNewTab", "target"]);
+  if (target) {
+    return /* @__PURE__ */ React2.createElement("a", {
+      href: target,
+      target: openInNewTab ? "_blank" : "_self"
+    }, /* @__PURE__ */ React2.createElement("button", __spreadValues({
+      ref
+    }, rest), props.value));
+  }
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
     ref
   }, rest), props.value);
@@ -117,6 +125,12 @@ var schema2 = {
     },
     {
       type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
     }
   ],
   data: {
@@ -126,7 +140,9 @@ var schema2 = {
         fontSize: "13px",
         padding: "10px 15px"
       }
-    }
+    },
+    target: "",
+    openInNewTab: false
   }
 };
 var button_default = Button;
@@ -164,11 +180,20 @@ var container_default = Container;
 // src/elements/layout.tsx
 var import_react3 = __toESM(require("react"));
 var Layout = (0, import_react3.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ import_react3.default.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, props), {
-    children: props.children
-  }));
+  const _a = props, { css, children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["css", "children", "rows", "gap", "rowSize", "columns", "gridSize"]);
+  return /* @__PURE__ */ import_react3.default.createElement("section", __spreadValues({
+    ref,
+    style: {
+      "--grid-size": gridSize + "px",
+      "--rows": rows,
+      "--columns": columns,
+      "--gap": gap + "px",
+      "--row-size": rowSize + "px",
+      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
+    }
+  }, rest), /* @__PURE__ */ import_react3.default.createElement("div", {
+    "data-layout-content": true
+  }, children));
 });
 var schema4 = {
   title: "Layout",
@@ -176,20 +201,30 @@ var schema4 = {
   data: {
     css: {
       "@desktop": {
-        display: "grid !important",
-        gridTemplateRows: "repeat($row-count, $row-size)",
-        gridTemplateColumns: "repeat($column-count, 1fr)",
-        gridGap: "$gap",
-        minHeight: "104px",
-        width: "$width",
-        maxWidth: "$max-width",
-        margin: "0 auto"
+        overflow: "hidden",
+        paddingTop: "16px",
+        paddingBottom: "16px",
+        paddingLeft: "var(--gap)",
+        paddingRight: "var(--gap)",
+        "> [data-layout-content]": {
+          margin: "0 auto",
+          display: "grid !important",
+          gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+          gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+          gridGap: "var(--gap)",
+          maxWidth: "var(--grid-size)"
+        }
       },
       "@mobile": {
         display: "flex !important",
         flexDirection: "column"
       }
-    }
+    },
+    gridSize: 1224,
+    rows: 12,
+    columns: 12,
+    gap: 16,
+    rowSize: 48
   },
   settings: []
 };
@@ -337,7 +372,6 @@ var Item = ({ itemInstance, elementInstances }) => {
   var _b;
   let [data, setData] = (0, import_react5.useState)(itemInstance.data);
   let _a = data, { id, type, childIds, css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  console.log("data", data);
   (0, import_react5.useEffect)(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));

package/dist/index.mjs

@@ -52,7 +52,15 @@ var base_default = BaseElement;
 // src/elements/button.tsx
 import * as React2 from "react";
 var Button = React2.forwardRef((props, ref) => {
-  const _a = props, { buttonType, css } = _a, rest = __objRest(_a, ["buttonType", "css"]);
+  const _a = props, { buttonType, css, openInNewTab = false, target = "" } = _a, rest = __objRest(_a, ["buttonType", "css", "openInNewTab", "target"]);
+  if (target) {
+    return /* @__PURE__ */ React2.createElement("a", {
+      href: target,
+      target: openInNewTab ? "_blank" : "_self"
+    }, /* @__PURE__ */ React2.createElement("button", __spreadValues({
+      ref
+    }, rest), props.value));
+  }
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
     ref
   }, rest), props.value);
@@ -87,6 +95,12 @@ var schema2 = {
     },
     {
       type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
     }
   ],
   data: {
@@ -96,7 +110,9 @@ var schema2 = {
         fontSize: "13px",
         padding: "10px 15px"
       }
-    }
+    },
+    target: "",
+    openInNewTab: false
   }
 };
 var button_default = Button;
@@ -134,11 +150,20 @@ var container_default = Container;
 // src/elements/layout.tsx
 import React4, { forwardRef as forwardRef3 } from "react";
 var Layout = forwardRef3((props, ref) => {
-  return /* @__PURE__ */ React4.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, props), {
-    children: props.children
-  }));
+  const _a = props, { css, children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["css", "children", "rows", "gap", "rowSize", "columns", "gridSize"]);
+  return /* @__PURE__ */ React4.createElement("section", __spreadValues({
+    ref,
+    style: {
+      "--grid-size": gridSize + "px",
+      "--rows": rows,
+      "--columns": columns,
+      "--gap": gap + "px",
+      "--row-size": rowSize + "px",
+      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
+    }
+  }, rest), /* @__PURE__ */ React4.createElement("div", {
+    "data-layout-content": true
+  }, children));
 });
 var schema4 = {
   title: "Layout",
@@ -146,20 +171,30 @@ var schema4 = {
   data: {
     css: {
       "@desktop": {
-        display: "grid !important",
-        gridTemplateRows: "repeat($row-count, $row-size)",
-        gridTemplateColumns: "repeat($column-count, 1fr)",
-        gridGap: "$gap",
-        minHeight: "104px",
-        width: "$width",
-        maxWidth: "$max-width",
-        margin: "0 auto"
+        overflow: "hidden",
+        paddingTop: "16px",
+        paddingBottom: "16px",
+        paddingLeft: "var(--gap)",
+        paddingRight: "var(--gap)",
+        "> [data-layout-content]": {
+          margin: "0 auto",
+          display: "grid !important",
+          gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+          gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+          gridGap: "var(--gap)",
+          maxWidth: "var(--grid-size)"
+        }
       },
       "@mobile": {
         display: "flex !important",
         flexDirection: "column"
       }
-    }
+    },
+    gridSize: 1224,
+    rows: 12,
+    columns: 12,
+    gap: 16,
+    rowSize: 48
   },
   settings: []
 };
@@ -307,7 +342,6 @@ var Item = ({ itemInstance, elementInstances }) => {
   var _b;
   let [data, setData] = useState(itemInstance.data);
   let _a = data, { id, type, childIds, css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  console.log("data", data);
   useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.5",
+  "version": "0.6.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,6 +31,6 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.6.5"
+    "@weaverse/core": "0.6.6"
   }
 }