rw-elements-tools 1.3.5 → 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.5",
+  "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();
+}

package/shared-hooks/layout/globalActAsGridOrFlexItem.js

@@ -1,9 +1,25 @@
-const getOrderClasses = (orderByBreakpoint = {}, orderCustomByBreakpoint = {}) => {
-  return Object.entries(orderByBreakpoint)
-    .map(([breakpoint, value]) => {
+const getOrderClasses = (orderByBreakpoint = {}, orderCustomByBreakpoint = {}, breakpointNames = []) => {
+  const allBreakpoints = ["base", ...breakpointNames];
+
+  // Find custom value by cascading back through previous breakpoints
+  const getCustomValue = (currentBreakpoint) => {
+    const currentIndex = allBreakpoints.indexOf(currentBreakpoint);
+    for (let i = currentIndex; i >= 0; i--) {
+      const bp = allBreakpoints[i];
+      if (orderCustomByBreakpoint[bp] !== undefined) {
+        return orderCustomByBreakpoint[bp];
+      }
+    }
+    return undefined;
+  };
+
+  return allBreakpoints
+    .filter(bp => orderByBreakpoint[bp] !== undefined)
+    .map((breakpoint) => {
+      const value = orderByBreakpoint[breakpoint];
       const prefix = breakpoint === "base" ? "" : `${breakpoint}:`;
-      const orderValue = value === "custom" 
-        ? `order-[${orderCustomByBreakpoint[breakpoint]}]`
+      const orderValue = value === "custom"
+        ? `order-[${getCustomValue(breakpoint)}]`
         : `order-${value}`;
       return `${prefix}${orderValue}`;
     })
@@ -40,6 +56,8 @@ const globalActAsGridOrFlexItem = (app) => {
     globalGridOrFlexItemOrderCustom: orderCustomByBreakpoint,
   } = app.responsiveProps;
 
+  const { names: breakpointNames } = app.theme.breakpoints;
+
   if (displayAs == "default") {
     return false;
   }
@@ -55,7 +73,7 @@ const globalActAsGridOrFlexItem = (app) => {
         shrink,
         grow,
         basis == "custom" ? basisCustom : basis,
-        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint)
+        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint, breakpointNames)
       ] : [])
     );
   }
@@ -71,7 +89,7 @@ const globalActAsGridOrFlexItem = (app) => {
         rowEnd !== "row-end-auto" ? rowEnd : undefined,
         alignSelf,
         justifySelf,
-        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint)
+        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint, breakpointNames)
       ] : [])
     );
   }