bj-web-components 0.2.26 → 0.2.28

package/dist/web/Icon/Icon.js

@@ -0,0 +1,9 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css           */
+const BuIcon = ({ type, style, onClick, className, ...rest }) => {
+  const cls = className ? `bu-icon ${className}` : "bu-icon";
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { style, className: cls, "aria-hidden": "true", onClick, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("use", { xlinkHref: `#${type}` }) });
+};
+BuIcon.displayName = "BuIcon";
+module.exports = BuIcon;

package/dist/web/Icon/Icon.mjs

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+/* empty css           */
+const BuIcon = ({ type, style, onClick, className, ...rest }) => {
+  const cls = className ? `bu-icon ${className}` : "bu-icon";
+  return /* @__PURE__ */ jsx("svg", { style, className: cls, "aria-hidden": "true", onClick, ...rest, children: /* @__PURE__ */ jsx("use", { xlinkHref: `#${type}` }) });
+};
+BuIcon.displayName = "BuIcon";
+export {
+  BuIcon as default
+};

package/dist/web/Input/Input.js

@@ -0,0 +1,181 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+;/* empty css            */
+function ArrowUp() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "8", height: "4.5", viewBox: "315 270 365 185", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M661.191111 440.106667c19.100444 0 28.664889-23.096889 15.160889-36.600889l-148.337778-148.337778a21.44 21.44 0 0 0-30.321778 0l-148.337777 148.337778c-13.511111 13.511111-3.946667 36.600889 15.153777 36.600889H661.191111z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function ArrowDown() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "8", height: "4.5", viewBox: "315 565 365 215", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M659.498667 582.328889c19.100444 0 28.657778 23.089778 15.160889 36.600889l-148.337778 148.337778a21.447111 21.447111 0 0 1-30.321778 0l-148.337778-148.337778c-13.511111-13.511111-3.946667-36.600889 15.146667-36.600889h296.689778z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function ErrorIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "bu-input__error-icon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8h6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+const BuInput = react.forwardRef(
+  function BuInput2({
+    type = "input",
+    mode = "single",
+    activeLang = "zh",
+    onLangChange,
+    value = "",
+    onChange,
+    label,
+    required,
+    placeholder,
+    maxLength,
+    showCount,
+    error = false,
+    errorMessage,
+    disabled,
+    leftIcon,
+    rightIcon,
+    langToggle,
+    translating = false,
+    translated = false,
+    onBlur,
+    min,
+    max,
+    step = 1,
+    labels,
+    id,
+    className,
+    style
+  }, ref) {
+    (labels == null ? void 0 : labels.zh) ?? "中文";
+    (labels == null ? void 0 : labels.en) ?? "EN";
+    function handleStep(delta) {
+      const current = parseFloat(value) || 0;
+      let next = current + delta;
+      if (min !== void 0) next = Math.max(min, next);
+      if (max !== void 0) next = Math.min(max, next);
+      onChange == null ? void 0 : onChange(String(next));
+    }
+    const showCharCount = type === "textarea" && !!showCount;
+    const showFooter = showCharCount || mode === "bilingual" || translating || translated;
+    const countText = maxLength ? `${value.length}/${maxLength}` : `${value.length}`;
+    const showErrorMsg = error && !!errorMessage && value.length > 0;
+    const boxCls = [
+      "bu-input__box",
+      (type === "input" || type === "number") && "bu-input__box--single",
+      type === "number" && "bu-input__box--number",
+      type === "textarea" && "bu-input__box--textarea",
+      error && "bu-input__box--error",
+      disabled && "bu-input__box--disabled",
+      !!leftIcon && "bu-input__box--has-left",
+      !!rightIcon && "bu-input__box--has-right"
+    ].filter(Boolean).join(" ");
+    const fieldCls = `bu-input__field bu-input__field--${type}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["bu-input", className].filter(Boolean).join(" "), style, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "bu-input__label", htmlFor: id, children: [
+        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-input__required", children: "*" }),
+        label
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-input__row", children: [
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-input__icon bu-input__icon--left", children: leftIcon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: boxCls, children: [
+          type === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref,
+              id,
+              className: fieldCls,
+              value,
+              onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+              onBlur,
+              placeholder,
+              maxLength,
+              disabled
+            }
+          ) : type === "number" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref,
+                id,
+                className: fieldCls,
+                value,
+                onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+                onBlur,
+                placeholder,
+                disabled,
+                inputMode: "numeric"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-input__stepper", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "bu-input__stepper-btn bu-input__stepper-btn--up",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => handleStep(step),
+                  disabled: disabled || max !== void 0 && parseFloat(value || "0") >= max,
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUp, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "bu-input__stepper-btn bu-input__stepper-btn--down",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => handleStep(-step),
+                  disabled: disabled || min !== void 0 && parseFloat(value || "0") <= min,
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ArrowDown, {})
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              id,
+              className: fieldCls,
+              value,
+              onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+              onBlur,
+              placeholder,
+              maxLength,
+              disabled
+            }
+          ),
+          showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bu-input__footer${type === "textarea" ? " bu-input__footer--bottom" : ""}`, children: [
+            showCharCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-input__count", children: countText }),
+            translating && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bu-input__translating", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "bu-input__translating-icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "14 42" }) }),
+              "翻译中…"
+            ] }),
+            translated && !translating && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bu-input__translated", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+              "翻译完成"
+            ] }),
+            mode === "bilingual" && !translating && !translated && (langToggle ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-input__lang-toggle" }))
+          ] })
+        ] }),
+        rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-input__icon bu-input__icon--right", children: rightIcon })
+      ] }),
+      showErrorMsg && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-input__error-msg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {}),
+        errorMessage
+      ] })
+    ] });
+  }
+);
+module.exports = BuInput;

package/dist/web/Input/Input.mjs

@@ -0,0 +1,182 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+/* empty css            */
+function ArrowUp() {
+  return /* @__PURE__ */ jsx("svg", { width: "8", height: "4.5", viewBox: "315 270 365 185", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M661.191111 440.106667c19.100444 0 28.664889-23.096889 15.160889-36.600889l-148.337778-148.337778a21.44 21.44 0 0 0-30.321778 0l-148.337777 148.337778c-13.511111 13.511111-3.946667 36.600889 15.153777 36.600889H661.191111z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function ArrowDown() {
+  return /* @__PURE__ */ jsx("svg", { width: "8", height: "4.5", viewBox: "315 565 365 215", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M659.498667 582.328889c19.100444 0 28.657778 23.089778 15.160889 36.600889l-148.337778 148.337778a21.447111 21.447111 0 0 1-30.321778 0l-148.337778-148.337778c-13.511111-13.511111-3.946667-36.600889 15.146667-36.600889h296.689778z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function ErrorIcon() {
+  return /* @__PURE__ */ jsxs("svg", { className: "bu-input__error-icon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 8h6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+const BuInput = forwardRef(
+  function BuInput2({
+    type = "input",
+    mode = "single",
+    activeLang = "zh",
+    onLangChange,
+    value = "",
+    onChange,
+    label,
+    required,
+    placeholder,
+    maxLength,
+    showCount,
+    error = false,
+    errorMessage,
+    disabled,
+    leftIcon,
+    rightIcon,
+    langToggle,
+    translating = false,
+    translated = false,
+    onBlur,
+    min,
+    max,
+    step = 1,
+    labels,
+    id,
+    className,
+    style
+  }, ref) {
+    (labels == null ? void 0 : labels.zh) ?? "中文";
+    (labels == null ? void 0 : labels.en) ?? "EN";
+    function handleStep(delta) {
+      const current = parseFloat(value) || 0;
+      let next = current + delta;
+      if (min !== void 0) next = Math.max(min, next);
+      if (max !== void 0) next = Math.min(max, next);
+      onChange == null ? void 0 : onChange(String(next));
+    }
+    const showCharCount = type === "textarea" && !!showCount;
+    const showFooter = showCharCount || mode === "bilingual" || translating || translated;
+    const countText = maxLength ? `${value.length}/${maxLength}` : `${value.length}`;
+    const showErrorMsg = error && !!errorMessage && value.length > 0;
+    const boxCls = [
+      "bu-input__box",
+      (type === "input" || type === "number") && "bu-input__box--single",
+      type === "number" && "bu-input__box--number",
+      type === "textarea" && "bu-input__box--textarea",
+      error && "bu-input__box--error",
+      disabled && "bu-input__box--disabled",
+      !!leftIcon && "bu-input__box--has-left",
+      !!rightIcon && "bu-input__box--has-right"
+    ].filter(Boolean).join(" ");
+    const fieldCls = `bu-input__field bu-input__field--${type}`;
+    return /* @__PURE__ */ jsxs("div", { className: ["bu-input", className].filter(Boolean).join(" "), style, children: [
+      label && /* @__PURE__ */ jsxs("label", { className: "bu-input__label", htmlFor: id, children: [
+        required && /* @__PURE__ */ jsx("span", { className: "bu-input__required", children: "*" }),
+        label
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bu-input__row", children: [
+        leftIcon && /* @__PURE__ */ jsx("span", { className: "bu-input__icon bu-input__icon--left", children: leftIcon }),
+        /* @__PURE__ */ jsxs("div", { className: boxCls, children: [
+          type === "textarea" ? /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref,
+              id,
+              className: fieldCls,
+              value,
+              onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+              onBlur,
+              placeholder,
+              maxLength,
+              disabled
+            }
+          ) : type === "number" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                id,
+                className: fieldCls,
+                value,
+                onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+                onBlur,
+                placeholder,
+                disabled,
+                inputMode: "numeric"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "bu-input__stepper", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "bu-input__stepper-btn bu-input__stepper-btn--up",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => handleStep(step),
+                  disabled: disabled || max !== void 0 && parseFloat(value || "0") >= max,
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx(ArrowUp, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "bu-input__stepper-btn bu-input__stepper-btn--down",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => handleStep(-step),
+                  disabled: disabled || min !== void 0 && parseFloat(value || "0") <= min,
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx(ArrowDown, {})
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id,
+              className: fieldCls,
+              value,
+              onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+              onBlur,
+              placeholder,
+              maxLength,
+              disabled
+            }
+          ),
+          showFooter && /* @__PURE__ */ jsxs("div", { className: `bu-input__footer${type === "textarea" ? " bu-input__footer--bottom" : ""}`, children: [
+            showCharCount && /* @__PURE__ */ jsx("span", { className: "bu-input__count", children: countText }),
+            translating && /* @__PURE__ */ jsxs("span", { className: "bu-input__translating", children: [
+              /* @__PURE__ */ jsx("svg", { className: "bu-input__translating-icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "14 42" }) }),
+              "翻译中…"
+            ] }),
+            translated && !translating && /* @__PURE__ */ jsxs("span", { className: "bu-input__translated", children: [
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+              "翻译完成"
+            ] }),
+            mode === "bilingual" && !translating && !translated && (langToggle ?? /* @__PURE__ */ jsx("div", { className: "bu-input__lang-toggle" }))
+          ] })
+        ] }),
+        rightIcon && /* @__PURE__ */ jsx("span", { className: "bu-input__icon bu-input__icon--right", children: rightIcon })
+      ] }),
+      showErrorMsg && /* @__PURE__ */ jsxs("div", { className: "bu-input__error-msg", children: [
+        /* @__PURE__ */ jsx(ErrorIcon, {}),
+        errorMessage
+      ] })
+    ] });
+  }
+);
+export {
+  BuInput as default
+};