@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Image/Image.js

@@ -34,127 +34,127 @@ import clsx from "clsx";
 import React, { useLayoutEffect, useState } from "react";
 import "./index.css";
 const prefixCls = "bui-image";
-const Image = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const [loaded, setLoaded] = useState(false);
-  const [failed, setFailed] = useState(false);
-  const _a = props, {
-    fit,
-    src,
-    lazy,
-    style,
-    webp,
-    alt,
-    showMenu,
-    width,
-    height,
-    fallback,
-    className,
-    placeholder,
-    onClick,
-    onLoad,
-    onError,
-    imgProps
-  } = _a, others = __objRest(_a, [
-    "fit",
-    "src",
-    "lazy",
-    "style",
-    "webp",
-    "alt",
-    "showMenu",
-    "width",
-    "height",
-    "fallback",
-    "className",
-    "placeholder",
-    "onClick",
-    "onLoad",
-    "onError",
-    "imgProps"
-  ]);
-  const modeEnum = {
-    none: "center",
-    // 被替换的内容将保持其原有的尺寸居中裁切展示
-    contain: "aspectFit",
-    // 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配
-    cover: "aspectFill",
-    // 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
-    fill: "scaleToFill",
-    // 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框
-    "scale-down": "aspectFit",
-    // 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
-    widthFix: "widthFix",
-    // 【微信小程序】缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
-    heightFix: "heightFix"
-    // 【微信小程序】缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。
-  };
-  useLayoutEffect(() => {
-    setLoaded(false);
-    setFailed(false);
-  }, [src]);
-  function defaultIconWrap(icon) {
-    return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-default-icon-wrap` }, icon);
-  }
-  const defaultIcon = defaultIconWrap(
-    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-default-icon-item` })
-  );
-  const defaultPlaceholder = placeholder === false ? [] : placeholder !== true && defaultIconWrap(placeholder) || defaultIcon;
-  const defaultFallback = fallback && defaultIconWrap(fallback) || defaultPlaceholder;
-  const miniAttr = {
-    webp,
-    lazyLoad: lazy,
-    "lazy-load": lazy,
-    mode: fit && modeEnum[fit],
-    showMenuByLongpress: showMenu
-  };
-  const imgEle = /* @__PURE__ */ React.createElement(
-    "img",
-    __spreadValues(__spreadProps(__spreadValues({
-      src,
-      loading: lazy ? "lazy" : "eager",
-      onLoad: (e) => {
-        setLoaded(true);
-        onLoad == null ? void 0 : onLoad(e);
-      },
-      onError: (e) => {
-        setFailed(true);
-        onError == null ? void 0 : onError(e);
-      },
-      alt
-    }, imgProps), {
-      style: __spreadValues({ objectFit: fit }, (imgProps == null ? void 0 : imgProps.style) || {}),
-      className: clsx(
-        `${prefixCls}-img`,
-        // 无占位且不onFail时直接展示img本体
-        (loaded || placeholder === false && !failed) && `${prefixCls}-loaded`,
-        imgProps == null ? void 0 : imgProps.className
-      )
-    }), isMini ? miniAttr : {})
-  );
-  function renderImgEle() {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, failed && defaultFallback || !loaded && defaultPlaceholder || null, imgEle);
-  }
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    __spreadValues({
-      ref,
+const Image = /* @__PURE__ */ React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      fit = "fill",
+      src = "",
+      lazy = false,
+      style,
+      webp,
+      alt,
+      showMenu,
+      width,
+      height,
+      fallback = null,
+      className,
+      placeholder = false,
       onClick,
-      style: __spreadValues({ width, height }, style),
-      className: clsx(prefixCls, className)
-    }, others),
-    renderImgEle()
-  );
-});
+      onLoad,
+      onError,
+      imgProps
+    } = _b, others = __objRest(_b, [
+      "fit",
+      "src",
+      "lazy",
+      "style",
+      "webp",
+      "alt",
+      "showMenu",
+      "width",
+      "height",
+      "fallback",
+      "className",
+      "placeholder",
+      "onClick",
+      "onLoad",
+      "onError",
+      "imgProps"
+    ]);
+    const [loaded, setLoaded] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const modeEnum = {
+      none: "center",
+      // 被替换的内容将保持其原有的尺寸居中裁切展示
+      contain: "aspectFit",
+      // 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配
+      cover: "aspectFill",
+      // 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
+      fill: "scaleToFill",
+      // 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不匹配，那么该对象将被拉伸以适应内容框
+      "scale-down": "aspectFit",
+      // 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
+      widthFix: "widthFix",
+      // 【微信小程序】缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
+      heightFix: "heightFix"
+      // 【微信小程序】缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。
+    };
+    useLayoutEffect(() => {
+      setLoaded(false);
+      setFailed(false);
+    }, [src]);
+    const defaultIconWrap = (icon) => {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(`${prefixCls}-default-icon-wrap`, {
+            "default-holder": !icon
+          }),
+          "aria-hidden": "true"
+        },
+        icon
+      );
+    };
+    const defaultPlaceholder = placeholder === false ? [] : placeholder !== true && defaultIconWrap(placeholder) || defaultIconWrap();
+    const miniAttr = {
+      webp,
+      lazyLoad: lazy,
+      "lazy-load": lazy,
+      mode: fit && modeEnum[fit],
+      showMenuByLongpress: showMenu
+    };
+    const imgEle = /* @__PURE__ */ React.createElement(
+      "img",
+      __spreadValues(__spreadProps(__spreadValues({
+        src,
+        loading: lazy ? "lazy" : "eager",
+        onLoad: (e) => {
+          setLoaded(true);
+          onLoad == null ? void 0 : onLoad(e);
+        },
+        onError: (e) => {
+          setFailed(true);
+          onError == null ? void 0 : onError(e);
+        },
+        alt: alt || ""
+      }, imgProps), {
+        style: __spreadValues({ objectFit: fit }, (imgProps == null ? void 0 : imgProps.style) || {}),
+        className: clsx(
+          `${prefixCls}-img`,
+          // 无占位且不onFail时直接展示img本体
+          (loaded || placeholder === false && !failed) && `${prefixCls}-loaded`,
+          imgProps == null ? void 0 : imgProps.className
+        )
+      }), isMini ? miniAttr : {})
+    );
+    function renderImgEle() {
+      if (failed)
+        return fallback || defaultPlaceholder;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, !loaded && defaultPlaceholder, imgEle);
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        ref,
+        onClick,
+        style: __spreadValues({ width, height }, style),
+        className: clsx(prefixCls, className)
+      }, others),
+      renderImgEle()
+    );
+  }
+);
 Image.displayName = "BuiImage";
-Image.defaultProps = {
-  src: "",
-  lazy: false,
-  fallback: null,
-  placeholder: false,
-  width: void 0,
-  height: void 0,
-  fit: "fill"
-};
 var Image_default = Image;
 export {
   Image_default as default

package/es/Image/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import Image from "../../Image";
+const basicImageDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      src: "https://via.placeholder.com/150x100",
+      alt: "\u793A\u4F8B\u56FE\u7247",
+      width: 150,
+      height: 100
+    }
+  ));
+};
+const ClickableImageDemo = () => {
+  const [clicked, setClicked] = useState(false);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      src: "https://via.placeholder.com/150x100",
+      alt: "\u53EF\u70B9\u51FB\u7684\u793A\u4F8B\u56FE\u7247",
+      width: 150,
+      height: 100,
+      onClick: () => {
+        setClicked(!clicked);
+        console.log("\u56FE\u7247\u88AB\u70B9\u51FB\u4E86");
+      }
+    }
+  ), clicked && /* @__PURE__ */ React.createElement("p", null, "\u56FE\u7247\u5DF2\u88AB\u70B9\u51FB"));
+};
+const placeholderImageDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      src: "",
+      alt: "\u5E26\u5360\u4F4D\u7B26\u7684\u56FE\u7247",
+      width: 150,
+      height: 100,
+      placeholder: /* @__PURE__ */ React.createElement("div", null, "\u52A0\u8F7D\u4E2D...")
+    }
+  ));
+};
+const errorImageDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      src: "https://invalid-url.com/nonexistent.jpg",
+      alt: "\u52A0\u8F7D\u5931\u8D25\u7684\u56FE\u7247",
+      width: 150,
+      height: 100,
+      fallback: /* @__PURE__ */ React.createElement("div", null, "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25")
+    }
+  ));
+};
+const lazyImageDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      src: "https://via.placeholder.com/150x100",
+      alt: "\u61D2\u52A0\u8F7D\u56FE\u7247",
+      width: 150,
+      height: 100,
+      lazy: true
+    }
+  ));
+};
+const noAltImageDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      src: "https://via.placeholder.com/150x100",
+      width: 150,
+      height: 100
+    }
+  ));
+};
+var A11yDemos_default = {
+  basicImageDemo,
+  ClickableImageDemo,
+  placeholderImageDemo,
+  errorImageDemo,
+  lazyImageDemo,
+  noAltImageDemo
+};
+export {
+  ClickableImageDemo,
+  basicImageDemo,
+  A11yDemos_default as default,
+  errorImageDemo,
+  lazyImageDemo,
+  noAltImageDemo,
+  placeholderImageDemo
+};

package/es/Image/index.css

@@ -1,5 +1,9 @@
+:root,
+page,
+xhs-page {
+  --bui-image-default-bg-color: rgba(127, 127, 127, 0.2);
+}
 .bui-image {
-  --default-background-color: var(--bui-image-default-background-color, rgba(127, 127, 127, 0.2));
   width: auto;
   height: auto;
   display: inline-block;
@@ -26,11 +30,6 @@
   width: 100%;
   height: 100%;
 }
-.bui-image-default-icon-wrap.bui-image-loaded {
-  opacity: 0;
-}
-.bui-image-default-icon-item {
-  width: 100%;
-  height: 100%;
-  background-color: var(--default-background-color);
+.bui-image-default-icon-wrap.default-holder {
+  background-color: var(--bui-image-default-bg-color);
 }

package/es/Input/Input.js

@@ -33,7 +33,7 @@ import { ErrorCircleFilledIcon } from "@bifrostui/icons";
 import { isMini, useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef, useState } from "react";
-import "./Input.css";
+import "./index.css";
 const prefixCls = "bui-input";
 const Input = forwardRef((props, ref) => {
   const _a = props, {
@@ -43,12 +43,12 @@ const Input = forwardRef((props, ref) => {
     inputProps,
     inputRef,
     name,
-    type,
-    clearable,
+    type = "text",
+    clearable = false,
     startIcon,
     endIcon,
     placeholder,
-    disabled,
+    disabled = false,
     onClear,
     onChange,
     onFocus,
@@ -71,6 +71,8 @@ const Input = forwardRef((props, ref) => {
     "onFocus",
     "onBlur"
   ]);
+  const { required, readOnly } = inputProps || {};
+  const ariaProps = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, required && { "aria-required": required }), readOnly && { "aria-readonly": readOnly }), disabled && { "aria-disabled": disabled }), placeholder && { "aria-placeholder": placeholder });
   const [inputValue, triggerChange] = useValue({
     value,
     defaultValue,
@@ -126,14 +128,14 @@ const Input = forwardRef((props, ref) => {
     startIcon && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-icon ${prefixCls}-icon-start` }, startIcon),
     /* @__PURE__ */ React.createElement(
       "input",
-      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, nativeProps), {
+      __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, nativeProps), {
         name,
         type,
         ref: inputRef,
         value: inputValue,
         disabled,
         placeholder
-      }), inputProps), {
+      }), ariaProps), inputProps), {
         onChange: handleChange,
         onFocus: handleFocus,
         onBlur: handleBlur,
@@ -141,17 +143,11 @@ const Input = forwardRef((props, ref) => {
         className: clsx(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })
     ),
-    clearable && !!inputValue && hasFocus && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-clear`, onClick: handleClear }, /* @__PURE__ */ React.createElement(ErrorCircleFilledIcon, { htmlColor: "#959aa5" })),
+    clearable && !!inputValue && hasFocus && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-clear`, onClick: handleClear }, /* @__PURE__ */ React.createElement(ErrorCircleFilledIcon, { htmlColor: "var(--bui-color-fg-subtle)" })),
     endIcon && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-icon ${prefixCls}-icon-end` }, endIcon)
   );
 });
 Input.displayName = "BuiInput";
-Input.defaultProps = {
-  defaultValue: "",
-  type: "text",
-  clearable: false,
-  disabled: false
-};
 var Input_default = Input;
 export {
   Input_default as default

package/es/Input/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,43 @@
+import React from "react";
+import Input from "../../Input";
+const basicInputDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, "First name: ", /* @__PURE__ */ React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" })));
+};
+const disabledInputDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, "First name:", /* @__PURE__ */ React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", disabled: true })));
+};
+const requiredInputDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, "First name:", /* @__PURE__ */ React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", inputProps: { required: true } })));
+};
+const readOnlyInputDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, "First name:", /* @__PURE__ */ React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", inputProps: { readOnly: true } })));
+};
+const placeholderInputDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, "First name:", /* @__PURE__ */ React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" })));
+};
+const ariaLabelInputDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, "First name:", /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
+      inputProps: { "aria-label": "\u8F93\u5165\u6846" }
+    }
+  )));
+};
+var A11yDemos_default = {
+  basicInputDemo,
+  disabledInputDemo,
+  requiredInputDemo,
+  readOnlyInputDemo,
+  placeholderInputDemo,
+  ariaLabelInputDemo
+};
+export {
+  ariaLabelInputDemo,
+  basicInputDemo,
+  A11yDemos_default as default,
+  disabledInputDemo,
+  placeholderInputDemo,
+  readOnlyInputDemo,
+  requiredInputDemo
+};

package/es/Input/index.css

@@ -0,0 +1,70 @@
+:root,
+page,
+xhs-page {
+  --bui-input-height: 32px;
+  --bui-input-padding: 4px 10px;
+  --bui-input-border-radius: var(--bui-shape-radius-default);
+  --bui-input-icon-start-margin: 0 3px 0 0;
+  --bui-input-icon-end-margin: 0 0 0 3px;
+  --bui-input-bg-color: transparent;
+  --bui-input-disabled-bg-color: rgba(0, 0, 0, 0.04);
+  --bui-input-clear-color: #ced1d6;
+  --bui-input-clear-font-size: var(--bui-title-size-3);
+}
+.bui-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--bui-input-height);
+  padding: var(--bui-input-padding);
+  box-sizing: border-box;
+  border-radius: var(--bui-input-border-radius);
+  border: 1px solid var(--bui-color-border-default);
+  font-family: var(--bui-font-family);
+}
+.bui-input-icon {
+  display: flex;
+  align-items: center;
+  color: var(--bui-color-fg-subtle);
+  font-size: var(--bui-title-size-3);
+}
+.bui-input-icon-start {
+  margin: var(--bui-input-icon-start-margin);
+}
+.bui-input-icon-end {
+  margin: var(--bui-input-icon-end-margin);
+}
+.bui-input-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  height: 100%;
+  color: var(--bui-color-fg-default);
+  border: none;
+  outline: none;
+  background-color: var(--bui-input-bg-color);
+  font-size: var(--bui-text-size-2);
+}
+.bui-input-input::placeholder {
+  color: var(--bui-color-fg-subtle);
+}
+.bui-input-disabled {
+  background-color: var(--bui-input-disabled-bg-color);
+}
+.bui-input-disabled .bui-input-input {
+  color: var(--bui-color-fg-disabled);
+}
+.bui-input-disabled .bui-input-input::placeholder {
+  color: var(--bui-color-fg-disabled);
+}
+.bui-input-clear {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--bui-input-clear-color);
+  height: 100%;
+  font-size: var(--bui-input-clear-font-size);
+}
+.bui-input .bui-mini-placeholder {
+  width: auto;
+}

package/es/ItemSelector/ItemSelector.miniapp.js

@@ -20,7 +20,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React, { useEffect, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
 import ItemSelectorCore from "./ItemSelectorCore";
-import "./miniapp.css";
 const ItemSelector = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
     const { items } = props;

package/es/ItemSelector/ItemSelectorCore.js

@@ -31,7 +31,7 @@ import clsx from "clsx";
 import { throttle, useForkRef, useTouchEmulator } from "@bifrostui/utils";
 import ScrollView from "../ScrollView";
 import Selector from "./Selector";
-import "./ItemSelector.css";
+import "./index.css";
 const DEVIATION_HEIGHT = "6vmin";
 const prefixCls = "bui-item-selector";
 const ItemSelector = /* @__PURE__ */ React.forwardRef(

package/es/List/List.css

@@ -1,7 +1,11 @@
+:root,
+page,
+xhs-page {
+  --bui-list-small-item-padding: 5px 12px;
+  --bui-list-medium-item-padding: 18px 12px;
+  --bui-list-large-item-padding: 20px 12px;
+}
 .bui-list {
-  --small-item-padding: var(--bui-list-small-item-padding, 5px 12px);
-  --medium-item-padding: var(--bui-list-medium-item-padding, 18px 12px);
-  --large-item-padding: var(--bui-list-large-item-padding, 20px 12px);
   background: var(--bui-color-bg-view);
   font-size: var(--bui-title-size-3);
   font-family: var(--bui-font-family);

package/es/List/List.js

@@ -33,11 +33,11 @@ import "./List.css";
 const prefixCls = "bui-list";
 const List = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
-    hideDivider,
+    hideDivider = false,
     children,
     className,
-    size,
-    component: Component,
+    size = "medium",
+    component: Component = "div",
     header,
     subheader
   } = _a, others = __objRest(_a, [
@@ -66,11 +66,6 @@ const List = /* @__PURE__ */ React.forwardRef((props, ref) => {
   ));
 });
 List.displayName = "BuiList";
-List.defaultProps = {
-  hideDivider: false,
-  size: "medium",
-  component: "div"
-};
 var List_default = List;
 export {
   List_default as default

package/es/List/ListItem.css

@@ -10,13 +10,13 @@
   color: var(--bui-color-fg-subtle);
 }
 .bui-list-small .bui-list-item {
-  padding: var(--small-item-padding);
+  padding: var(--bui-list-small-item-padding);
 }
 .bui-list-medium .bui-list-item {
-  padding: var(--medium-item-padding);
+  padding: var(--bui-list-medium-item-padding);
 }
 .bui-list-large .bui-list-item {
-  padding: var(--large-item-padding);
+  padding: var(--bui-list-large-item-padding);
 }
 .bui-list-item-divider:not(:last-child) {
   border-bottom: 1px solid var(--bui-color-border-default);