rw-elements-tools 1.3.6 → 1.3.7

package/controls/Borders/BordersTable.js

@@ -0,0 +1,59 @@
+export const BordersTable = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Borders",
+  },
+  {
+    visible: "globalControlTypeBorders == 'hover'",
+    title: "State",
+    id: "globalBordersState",
+    responsive: false,
+    segmented: {
+      default: "start",
+      items: [
+        {
+          title: "Start",
+          value: "start",
+        },
+        {
+          title: "End",
+          value: "end",
+        },
+      ]
+    }
+  },
+  {
+    divider: {},
+    visible: "globalControlTypeBorders != 'none'",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderStyle",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderColor",
+  },
+  {
+    visible: "globalControlTypeBorders == 'static' || (globalControlTypeBorders == 'hover' && globalBordersState == 'start')",
+    globalControl: "BorderWidth",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderStyle",
+    id: "{{value}}End",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderColor",
+    id: "{{value}}End",
+  },
+  {
+    visible: "(globalControlTypeBorders == 'hover' && globalBordersState == 'end')",
+    globalControl: "BorderWidth",
+    id: "{{value}}End",
+    format: "hover:{{value}}",
+  },
+];
+
+export default BordersTable;

package/controls/index.js

@@ -48,6 +48,7 @@ export { BorderHover } from "./Borders/Border.js";
 export { default as Borders } from "./Borders/Borders.js";
 export { default as BordersContainer } from "./Borders/BordersContainer.js";
 export { default as BordersInput } from "./Borders/BordersInput.js";
+export { default as BordersTable } from "./Borders/BordersTable.js";
 export { default as BorderColor } from "./Borders/BorderColor.js";
 export { default as BorderRadius } from "./Borders/BorderRadius.js";
 export { default as BorderStyle } from "./Borders/BorderStyle.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rw-elements-tools",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "Build tools for RapidWeaver Elements packs - generates properties.json and hooks.js files",
   "author": "Elements Platform",
   "license": "MIT",

package/shared-hooks/borders/globalBordersTable.js

@@ -0,0 +1,77 @@
+const globalBordersTable = (app, args = {}) => {
+  const {
+    globalControlTypeBorders: type,
+    globalBordersColor: color,
+    globalBordersColorOpacity: colorOpacity,
+    globalBordersWidth: width,
+    globalBordersStyle: style,
+    globalBordersColorEnd: colorEnd,
+    globalBordersColorOpacityEnd: colorOpacityEnd,
+    globalBordersWidthEnd: widthEnd,
+    globalBordersStyleEnd: styleEnd,
+  } = app.props;
+
+  const classes = [];
+
+  const { node } = app;
+  node.isContainer = args.isContainer || false;
+  const wantsActive = args.active || false;
+  const wantsFocus = args.focus || false;
+
+  if (type == 'none') {
+    return '';
+  }
+
+  classes.push(
+    width,
+    style,
+    color.split(' ')
+        .filter(Boolean)  // Remove empty strings
+        .map(c => `${c.trim()}/${colorOpacity}`)
+        .join(' '),
+  );
+
+  const prefix = getHoverPrefix(node, 'background', 'self');
+  if (type == 'hover') {
+    classes.push(
+      widthEnd,
+      `${prefix}:${styleEnd}`,
+      colorEnd.split(' ')
+          .filter(Boolean)
+          .map(c => `${prefix}:${c.trim()}/${colorOpacityEnd}`)
+          .join(' '),
+    );
+  }
+
+  if (wantsActive) {
+    const endColor = type == 'hover' ? colorEnd : color;
+    const endWidth = type == 'hover' ? widthEnd : width;
+    const endStyle = type == 'hover' ? styleEnd : style;
+
+    classes.push(
+      endWidth.replace(/hover/g, 'data-[active=true]'),
+      `data-[active=true]:${endStyle}`,
+      endColor.split(' ')
+          .filter(Boolean)
+          .map(c => `data-[active=true]:${c.trim()}/${colorOpacityEnd}`)
+          .join(' '),
+    );
+  }
+
+  if (wantsFocus) {
+    const endColor = type == 'hover' ? colorEnd : color;
+    const endWidth = type == 'hover' ? widthEnd : width;
+    const endStyle = type == 'hover' ? styleEnd : style;
+
+    classes.push(
+      endWidth.replace(/hover/g, 'focus'),
+      `${prefix.replace(/hover/g, "focus")}:${endStyle}`,
+      endColor.split(' ')
+          .filter(Boolean)
+          .map(c => `${prefix.replace(/hover/g, "focus")}:${c.trim()}/${colorOpacityEnd}`)
+          .join(' '),
+    );
+  }
+
+  return classnames(classes).toString();
+}