flet-box 0.0.0-stage → 1.0.2

package/src/widgets/Radio.js

@@ -0,0 +1,132 @@
+/**
+ * @file Radio.js
+ * @description Radio input with controlled/uncontrolled selection state.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+
+export const Radio = (props) => {
+  const {
+    selected = false,
+    onSelect,
+    onPress: onPressProp,
+    disabled = false,
+    size = 20,
+    name,
+    ...rest
+  } = props;
+
+  /** @deprecated Use onPress instead */
+  // onSelect kept as alias for backward compatibility
+  const onPress = onPressProp || onSelect;
+
+  let internalSelected = selected;
+  let radioRef = null;
+  let dotRef = null;
+
+  const updateUI = (newSelected) => {
+    if (radioRef) {
+      radioRef.style.backgroundColor = newSelected
+        ? colors.primary
+        : "transparent";
+      radioRef.style.border = `2px solid ${newSelected ? colors.primary : colors.border}`;
+    }
+    if (dotRef) {
+      dotRef.style.display = newSelected ? "block" : "none";
+    }
+  };
+
+  // Createste dot
+  const dot = WidgetFactory({
+    width: size / 2,
+    height: size / 2,
+    backgroundColor: "#fff",
+    borderRadius: "50%",
+    display: internalSelected ? "block" : "none",
+  });
+  dotRef = dot;
+
+  // Createste main radio container
+  const radio = WidgetFactory({
+    widgetName: "Radio",
+    width: size,
+    height: size,
+    border: `2px solid ${disabled ? colors.border : internalSelected ? colors.primary : colors.border}`,
+    borderRadius: "50%",
+    backgroundColor: internalSelected ? colors.primary : "transparent",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.2s ease",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    child: dot,
+    ...rest,
+  });
+  radioRef = radio;
+
+  // Handle click
+  if (!disabled) {
+    radio.onclick = (e) => {
+      e.stopPropagation();
+      if (internalSelected) return;
+
+      const newSelected = true;
+      internalSelected = newSelected;
+      updateUI(newSelected);
+
+      if (name) {
+        const allRadios = document.querySelectorAll(
+          `[data-radio-group="${name}"]`,
+        );
+        allRadios.forEach((otherRadio) => {
+          if (otherRadio !== radio && otherRadio.unselect) {
+            otherRadio.unselect();
+          }
+        });
+      }
+
+      if (onPress) onPress(true);
+    };
+
+    // Hover effect
+    radio.addEventListener("mouseenter", () => {
+      if (!disabled && !internalSelected) {
+        radio.style.backgroundColor = colors.primary + "20";
+      }
+    });
+
+    radio.addEventListener("mouseleave", () => {
+      if (!disabled && !internalSelected) {
+        radio.style.backgroundColor = "transparent";
+      }
+    });
+  }
+
+  // Public methods
+  radio.select = () => {
+    if (!disabled && !internalSelected) {
+      internalSelected = true;
+      updateUI(true);
+      if (onPress) onPress(true);
+    }
+  };
+
+  radio.unselect = () => {
+    if (!disabled && internalSelected) {
+      internalSelected = false;
+      updateUI(false);
+      if (onPress) onPress(false);
+    }
+  };
+
+  radio.isSelected = () => internalSelected;
+
+  if (name) {
+    radio.setAttribute("data-radio-group", name);
+  }
+
+  return radio;
+};
+
+export default Radio;

package/src/widgets/Rating.js

@@ -0,0 +1,261 @@
+/**
+ * @file Rating.js
+ * @description Star rating supporting mouse, touch and swipe interactions.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { Row } from "./Row.js";
+import { Text } from "./Text.js";
+import { Icon } from "./Icon.js";
+import { colors, subscribeTheme } from "../utils/themes.js";
+
+export const Rating = (props) => {
+  const {
+    value = 0,
+    max = 5,
+    onChange,
+    onPress,
+    readOnly = false,
+    size = 20,
+    activeColor: propActiveColor,
+    inactiveColor: propInactiveColor,
+    iconActive = "star",
+    iconInactive = "star_border",
+    iconHalf = "star_half",
+    gap = 2,
+    allowHalf = false,
+    showValue = false,
+    valueColor = colors.textSecondary,
+    valueSize,
+    ...rest
+  } = props;
+
+  // Colors from theme
+  let activeColor =
+    propActiveColor !== undefined ? propActiveColor : colors.warning;
+  let inactiveColor =
+    propInactiveColor !== undefined ? propInactiveColor : colors.border;
+  let currentValue = Math.min(Math.max(value, 0), max);
+
+  let starIcons = []; // stores the SPAN elements of each star
+  let starWrappers = []; // stores the wrappers (for events)
+  let valueTextRef = null;
+  let unsubscribeTheme = null;
+  let touchActive = false; // to avoid conflicts with mouse
+
+  // Update all stars according to currentValue
+  const updateStars = () => {
+    for (let i = 0; i < max; i++) {
+      const starNumber = i + 1;
+      const span = starIcons[i];
+      if (!span) continue;
+
+      let iconName = iconInactive;
+      let color = inactiveColor;
+
+      if (starNumber <= currentValue) {
+        iconName = iconActive;
+        color = activeColor;
+      } else if (allowHalf && starNumber - 0.5 === currentValue) {
+        iconName = iconHalf;
+        color = activeColor;
+      }
+
+      span.textContent = iconName;
+      span.style.color = color;
+    }
+    if (valueTextRef && showValue) {
+      valueTextRef.update({ text: currentValue.toFixed(1) });
+    }
+  };
+
+  // Change the actual value (persistent)
+  const setValue = (newValue) => {
+    if (readOnly) return;
+    let clamped = Math.min(Math.max(newValue, 0), max);
+    if (clamped === currentValue) return;
+    currentValue = clamped;
+    updateStars();
+    const cb = onChange || onPress;
+    if (cb) cb(currentValue);
+  };
+
+  // Temporary preview (hover or touchmove)
+  const previewValue = (starIndex) => {
+    for (let i = 0; i < max; i++) {
+      const span = starIcons[i];
+      if (!span) continue;
+      if (i <= starIndex) {
+        span.textContent = iconActive;
+        span.style.color = activeColor;
+      } else {
+        span.textContent = iconInactive;
+        span.style.color = inactiveColor;
+      }
+    }
+  };
+
+  // Restore the display according to the actual value
+  const restoreFromPreview = () => {
+    updateStars();
+  };
+
+  // ========== STAR CREATION ==========
+  for (let i = 0; i < max; i++) {
+    const icon = Icon({
+      name: iconInactive,
+      size: size,
+      color: inactiveColor,
+    });
+    const wrapper = WidgetFactory({
+      display: "inline-flex",
+      cursor: readOnly ? "default" : "pointer",
+      transition: "transform 0.1s ease",
+      child: icon,
+      padding: "4px", // larger touch area
+    });
+
+    starIcons.push(icon);
+    starWrappers.push(wrapper);
+
+    if (!readOnly) {
+      // ----- MOUSE EVENTS -----
+      wrapper.addEventListener("mouseenter", () => {
+        if (touchActive) return; // avoid conflict with touch
+        wrapper.style.transform = "scale(1.15)";
+        previewValue(i);
+      });
+      wrapper.addEventListener("mouseleave", () => {
+        if (touchActive) return;
+        wrapper.style.transform = "scale(1)";
+        restoreFromPreview();
+      });
+      wrapper.addEventListener("click", () => {
+        if (touchActive) return;
+        let newValue = i + 1;
+        if (allowHalf) {
+          if (currentValue === newValue) newValue = newValue - 0.5;
+          else if (currentValue === newValue - 0.5) newValue = newValue;
+          else newValue = newValue;
+        }
+        setValue(newValue);
+      });
+
+      // ----- TOUCH EVENTS -----
+      wrapper.addEventListener("touchstart", (e) => {
+        e.preventDefault();
+        touchActive = true;
+        wrapper.style.transform = "scale(1.15)";
+        previewValue(i);
+      });
+      wrapper.addEventListener("touchmove", (e) => {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const elemUnderTouch = document.elementFromPoint(
+          touch.clientX,
+          touch.clientY,
+        );
+        let targetIndex = -1;
+        for (let idx = 0; idx < starWrappers.length; idx++) {
+          if (starWrappers[idx].contains(elemUnderTouch)) {
+            targetIndex = idx;
+            break;
+          }
+        }
+        if (targetIndex !== -1 && targetIndex !== i) {
+          previewValue(targetIndex);
+        } else if (targetIndex === -1) {
+          restoreFromPreview();
+        }
+      });
+      wrapper.addEventListener("touchend", (e) => {
+        e.preventDefault();
+        wrapper.style.transform = "scale(1)";
+        // Determine which star is currently previewed (the one with iconActive)
+        let selectedIndex = -1;
+        for (let idx = 0; idx < starIcons.length; idx++) {
+          if (starIcons[idx].textContent === iconActive) {
+            selectedIndex = idx;
+            break;
+          }
+        }
+        if (selectedIndex !== -1) {
+          let newValue = selectedIndex + 1;
+          if (allowHalf) {
+            // For touch, we always consider the integer; if you want half a star, it can be adjusted
+          }
+          setValue(newValue);
+        } else {
+          restoreFromPreview();
+        }
+        touchActive = false;
+      });
+      wrapper.addEventListener("touchcancel", (e) => {
+        wrapper.style.transform = "scale(1)";
+        restoreFromPreview();
+        touchActive = false;
+      });
+    }
+  }
+
+  // Stars container
+  const starsContainer = Row({
+    alignItems: "center",
+    gap: gap,
+    flexWrap: "wrap",
+    children: starWrappers,
+  });
+
+  // Ensure initial state
+  updateStars();
+
+  // Final construction
+  const children = [starsContainer];
+  if (showValue) {
+    const valueText = Text({
+      text: currentValue.toFixed(1),
+      size: valueSize || size * 0.7,
+      color: valueColor,
+      weight: "bold",
+      minWidth: "40px",
+      textAlign: "center",
+    });
+    valueTextRef = valueText;
+    children.push(valueText);
+  }
+
+  const ratingContainer = WidgetFactory({
+    widgetName: "Rating",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: gap * 2,
+    children: children,
+    ...rest,
+  });
+
+  // Dynamic theme
+  if (propActiveColor === undefined || propInactiveColor === undefined) {
+    unsubscribeTheme = subscribeTheme(() => {
+      if (propActiveColor === undefined) activeColor = colors.warning;
+      if (propInactiveColor === undefined) inactiveColor = colors.border;
+      updateStars();
+    });
+  }
+
+  ratingContainer.onUnmount(() => {
+    if (unsubscribeTheme) unsubscribeTheme();
+  });
+
+  ratingContainer.setValue = setValue;
+  ratingContainer.getValue = () => currentValue;
+  ratingContainer.updateStars = updateStars;
+
+  Object.defineProperty(ratingContainer, "value", {
+    get: () => currentValue,
+    set: (newValue) => setValue(newValue),
+    enumerable: true,
+  });
+
+  return ratingContainer;
+};
+
+export default Rating;

package/src/widgets/Row.js

@@ -0,0 +1,29 @@
+/**
+ * @file Row.js
+ * @description Horizontal flex layout container (default `flex-direction: row`).
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+
+export const Row = (props = {}) => {
+  const {
+    display = "flex",
+    flexDirection = "row",
+    width = "100%",
+    height = "auto",
+    boxSizing = "border-box",
+    ...rest
+  } = props;
+
+  return WidgetFactory({
+    tag: "div",
+    widgetName: "Row",
+    display: display,
+    flexDirection: flexDirection,
+    width: width,
+    height: height,
+    boxSizing: boxSizing,
+    ...rest,
+  });
+};
+
+export default Row;

package/src/widgets/Skeleton.js

@@ -0,0 +1,243 @@
+/**
+ * @file Skeleton.js
+ * @description Loading placeholder (pulse/wave) using globally injected keyframes.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+import { injectKeyframes } from "../utils/styleInjector.js";
+
+export const Skeleton = (props) => {
+  const {
+    variant = "text", // 'text', 'circular', 'avatar', 'image', 'card', 'listTile', 'button'
+    width,
+    height,
+    borderRadius,
+    animation = "pulse", // 'pulse', 'wave', 'none'
+    count = 1,
+    gap = 8,
+
+    // Color props for consistency
+    bgColor = colors.gray200,
+    highlightColor = colors.gray100,
+    shimmerColor = colors.gray300,
+
+    // Animation timing
+    pulseDuration = "1.5s",
+    waveDuration = "1.5s",
+
+    ...rest
+  } = props;
+
+  // Default dimensions based on variant
+  const getDefaultDimensions = () => {
+    switch (variant) {
+      case "text":
+        return { width: "100%", height: 16, borderRadius: 4 };
+      case "circular":
+        return { width: 48, height: 48, borderRadius: "50%" };
+      case "avatar":
+        return { width: 40, height: 40, borderRadius: "50%" };
+      case "image":
+        return { width: "100%", height: 150, borderRadius: 8 };
+      case "card":
+        return { width: "100%", height: 120, borderRadius: 12 };
+      case "listTile":
+        return { width: "100%", height: 56, borderRadius: 8 };
+      case "button":
+        return { width: 120, height: 36, borderRadius: 24 };
+      default:
+        return { width: "100%", height: 20, borderRadius: 4 };
+    }
+  };
+
+  const defaults = getDefaultDimensions();
+  const finalWidth = width !== undefined ? width : defaults.width;
+  const finalHeight = height !== undefined ? height : defaults.height;
+  const finalBorderRadius =
+    borderRadius !== undefined ? borderRadius : defaults.borderRadius;
+
+  // Animation styles
+  const getAnimationStyle = () => {
+    if (animation === "pulse") {
+      return {
+        animation: `skeleton-pulse ${pulseDuration} ease-in-out infinite`,
+      };
+    }
+    if (animation === "wave") {
+      return {
+        background: `linear-gradient(90deg, ${bgColor} 25%, ${highlightColor} 50%, ${bgColor} 75%)`,
+        backgroundSize: "200% 100%",
+        animation: `skeleton-wave ${waveDuration} ease-in-out infinite`,
+      };
+    }
+    return {};
+  };
+
+  // Build specific variant structure using WidgetFactory
+  const buildVariant = () => {
+    // Button variant
+    if (variant === "button") {
+      return WidgetFactory({
+        tag: "div",
+        width: typeof finalWidth === "number" ? `${finalWidth}px` : finalWidth,
+        height:
+          typeof finalHeight === "number" ? `${finalHeight}px` : finalHeight,
+        backgroundColor: bgColor,
+        borderRadius:
+          typeof finalBorderRadius === "number"
+            ? `${finalBorderRadius}px`
+            : finalBorderRadius,
+        ...getAnimationStyle(),
+      });
+    }
+
+    // ListTile variant
+    if (variant === "listTile") {
+      const container = WidgetFactory({
+        tag: "div",
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        width: "100%",
+      });
+
+      const avatar = WidgetFactory({
+        tag: "div",
+        width: "40px",
+        height: "40px",
+        backgroundColor: bgColor,
+        borderRadius: "50%",
+        flexShrink: 0,
+        ...getAnimationStyle(),
+      });
+      container.appendChild(avatar);
+
+      const textContainer = WidgetFactory({
+        tag: "div",
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+      });
+
+      const line1 = WidgetFactory({
+        tag: "div",
+        width: "80%",
+        height: "14px",
+        backgroundColor: bgColor,
+        borderRadius: "4px",
+        ...getAnimationStyle(),
+      });
+
+      const line2 = WidgetFactory({
+        tag: "div",
+        width: "60%",
+        height: "12px",
+        backgroundColor: bgColor,
+        borderRadius: "4px",
+        ...getAnimationStyle(),
+      });
+
+      textContainer.appendChild(line1);
+      textContainer.appendChild(line2);
+      container.appendChild(textContainer);
+
+      return container;
+    }
+
+    // Card variant
+    if (variant === "card") {
+      const container = WidgetFactory({
+        tag: "div",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+        width: "100%",
+      });
+
+      const imageArea = WidgetFactory({
+        tag: "div",
+        width: "100%",
+        height: "120px",
+        backgroundColor: bgColor,
+        borderRadius: "8px",
+        ...getAnimationStyle(),
+      });
+      container.appendChild(imageArea);
+
+      const textLines = WidgetFactory({
+        tag: "div",
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        padding: "0 8px",
+      });
+
+      const line1 = WidgetFactory({
+        tag: "div",
+        width: "90%",
+        height: "16px",
+        backgroundColor: bgColor,
+        borderRadius: "4px",
+        ...getAnimationStyle(),
+      });
+
+      const line2 = WidgetFactory({
+        tag: "div",
+        width: "70%",
+        height: "12px",
+        backgroundColor: bgColor,
+        borderRadius: "4px",
+        ...getAnimationStyle(),
+      });
+
+      textLines.appendChild(line1);
+      textLines.appendChild(line2);
+      container.appendChild(textLines);
+
+      return container;
+    }
+
+    // Simple variants (text, circular, avatar, image)
+    return WidgetFactory({
+      tag: "div",
+      width: typeof finalWidth === "number" ? `${finalWidth}px` : finalWidth,
+      height:
+        typeof finalHeight === "number" ? `${finalHeight}px` : finalHeight,
+      backgroundColor: bgColor,
+      borderRadius:
+        typeof finalBorderRadius === "number"
+          ? `${finalBorderRadius}px`
+          : finalBorderRadius,
+      ...getAnimationStyle(),
+    });
+  };
+
+  // Createste multiple items container using WidgetFactory
+  const container = WidgetFactory({
+    tag: "div",
+    widgetName: "Skeleton",
+    display: "flex",
+    flexDirection: "column",
+    gap: typeof gap === "number" ? `${gap}px` : gap,
+    width: "100%",
+  });
+
+  for (let i = 0; i < count; i++) {
+    container.appendChild(buildVariant());
+  }
+
+  injectKeyframes(
+    "skeleton-pulse",
+    "0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }",
+    "skeleton-styles",
+  );
+  injectKeyframes(
+    "skeleton-wave",
+    "0% { background-position: 200% 0; } 100% { background-position: -200% 0; }",
+  );
+
+  return container;
+};
+
+export default Skeleton;