@rxdrag/website-lib-core 0.0.63 → 0.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,9 +24,9 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/slate-preview": "1.2.58",
-    "@rxdrag/tsconfig": "0.2.0"
+    "@rxdrag/tsconfig": "0.2.0",
+    "@rxdrag/eslint-config-custom": "0.2.12"
   },
   "dependencies": {
     "clsx": "^2.1.0",
@@ -35,8 +35,8 @@
     "lodash-es": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/entify-lib": "0.0.17",
-    "@rxdrag/rxcms-models": "0.3.88"
+    "@rxdrag/entify-lib": "0.0.18",
+    "@rxdrag/rxcms-models": "0.3.89"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/react/components/ContactForm/ContactForm.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useState } from "react";
 import { Submit } from "./Submit";
-import { type UploadedFile } from "./FileUpload";
+import { type UploadedFile } from "./FileUpload2";
 import clsx from "clsx";
 import { modal } from "../../../controller";
 import { encrypt } from "./funcs";

package/src/react/components/ContactForm/{FileUpload.tsx → FileUpload2.tsx}

@@ -43,7 +43,7 @@ export type FileUploadProps = {
   maxSize?: number; // 最大文件大小（字节），默认 5MB
 };
 
-export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
+export const FileUpload2 = forwardRef<HTMLInputElement, FileUploadProps>(
   (props, ref) => {
     const {
       label,
@@ -320,7 +320,7 @@ export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
           ref={labelRef}
           htmlFor={name}
           className={clsx(
-            "absolute left-3 top-1/2 -translate-y-1/2 mt-1 text-gray-600 text-sm pointer-events-none whitespace-nowrap z-10",
+            "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap z-10",
             labelClassName
           )}
         >

package/src/react/components/ContactForm/Input2.tsx

@@ -36,7 +36,7 @@ export const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         ref={labelRef}
         htmlFor={name}
         className={clsx(
-          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 text-gray-400 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
           labelClassName
         )}
       >

package/src/react/components/ContactForm/Submit.tsx

@@ -32,7 +32,10 @@ export const Submit: React.FC<SubmitProps> = (props) => {
       >
         {submitting && spinner}
         {rawHtml ? (
-          <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
+          <div
+            style={{ display: "contents" }}
+            dangerouslySetInnerHTML={{ __html: rawHtml }}
+          />
         ) : (
           title
         )}

package/src/react/components/ContactForm/TelInput.tsx

@@ -0,0 +1,215 @@
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { CountryDial } from "./countryDialCodes";
+import { useTelControl } from "./hooks/useTelControl";
+
+export interface TelInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: string;
+  name: string;
+  required?: boolean;
+  requiredClassName?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  countries?: CountryDial[];
+}
+
+export const TelInput = forwardRef<HTMLInputElement, TelInputProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      className,
+      labelClassName,
+      inputClassName,
+      countries,
+      placeholder,
+      value,
+      onChange,
+    } = props;
+
+    const { allCountries, selected, localNumber, onSelectCountry, onChangeLocal } =
+      useTelControl({ countries, name, value, onChange });
+
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const panelRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+    useEffect(() => {
+      const onDocClick = (e: MouseEvent) => {
+        const target = e.target as Node;
+        if (
+          open &&
+          panelRef.current &&
+          !panelRef.current.contains(target) &&
+          buttonRef.current &&
+          !buttonRef.current.contains(target)
+        ) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocClick);
+      return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+
+    // 使用 useTelControl 负责解析与变更回传
+
+    const filtered: CountryDial[] = useMemo(() => {
+      if (!query) return allCountries;
+      const q = query.toLowerCase();
+      return allCountries.filter(
+        (c: CountryDial) =>
+          c.name.toLowerCase().includes(q) ||
+          (c.region && c.region.toLowerCase().includes(q)) ||
+          c.dialCode.replace("+", "").includes(q.replace("+", ""))
+      );
+    }, [allCountries, query]);
+
+    return (
+      <div className={clsx("w-full", className)}>
+        {label ? (
+          <label
+            htmlFor={name}
+            className={clsx(
+              "mb-1 inline-flex items-center text-sm text-gray-600",
+              labelClassName
+            )}
+          >
+            {label}
+            {required ? <span className={requiredClassName}>*</span> : null}
+          </label>
+        ) : null}
+
+        <div
+          className={clsx(
+            "flex h-10 items-center gap-2 rounded-md focus-within:ring-2 focus-within:ring-primary-300 focus-within:ring-offset-0 bg-white",
+            inputClassName
+          )}
+        >
+          <div className="relative h-full">
+            <button
+              ref={buttonRef}
+              type="button"
+              aria-haspopup="listbox"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+              className={
+                "h-full min-w-[200px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"
+              }
+            >
+              <span className="truncate text-left leading-tight">
+                {selected ? (
+                  <>
+                    <span className="font-medium">{selected.name}</span>
+                    {selected.region ? (
+                      <span className="text-gray-500">, {selected.region}</span>
+                    ) : null}
+                    <span className="ml-1 text-gray-700">
+                      {selected.dialCode}
+                    </span>
+                  </>
+                ) : (
+                  "Select Country/Region"
+                )}
+              </span>
+              <svg
+                className="ml-2 h-4 w-4 text-gray-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+
+            {open ? (
+              <div
+                ref={panelRef}
+                className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg"
+              >
+                <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
+                  <input
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder="Enter Country/Region"
+                    className="h-8 w-full bg-transparent text-sm outline-none"
+                  />
+                  <svg
+                    className="h-4 w-4 text-gray-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+
+                <div className="mt-2 max-h-64 overflow-auto pr-1">
+                  {filtered.map((c: CountryDial) => (
+                    <button
+                      key={c.code}
+                      type="button"
+                      onClick={() => {
+                        onSelectCountry(c);
+                        setOpen(false);
+                      }}
+                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span
+                        className={clsx(
+                          "inline-block h-3 w-3 rounded-full border",
+                          selected?.code === c.code
+                            ? "border-primary-500 ring-4 ring-primary-200"
+                            : "border-gray-400"
+                        )}
+                      ></span>
+                      <span className="flex-1 truncate">
+                        {c.name}
+                        {c.region ? (
+                          <span className="text-gray-500">, {c.region}</span>
+                        ) : null}
+                      </span>
+                      <span className="text-gray-700">{c.dialCode}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          <input
+            ref={ref}
+            id={name}
+            name={name}
+            required={required}
+            placeholder={placeholder || "Phone number"}
+            inputMode="tel"
+            className={clsx("h-10 w-full px-3 py-0 text-sm leading-tight ring-0 outline-none rounded-md")}
+            value={localNumber}
+            onChange={(e) => {
+              const next = e.target.value;
+              onChangeLocal(next);
+            }}
+            autoComplete={name}
+            autoCorrect="off"
+            spellCheck={false}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TelInput;

package/src/react/components/ContactForm/TelInput2.tsx

@@ -0,0 +1,213 @@
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import type { CountryDial } from "./countryDialCodes";
+import { useInlineLabelPadding } from "./hooks/useInlineLabelPadding";
+import { useTelControl } from "./hooks/useTelControl";
+
+export interface TelInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: string;
+  name: string;
+  required?: boolean;
+  requiredClassName?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  countries?: CountryDial[];
+  selectPlaceholder?: string;
+}
+
+export const TelInput2 = forwardRef<HTMLInputElement, TelInputProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      className,
+      labelClassName,
+      inputClassName,
+      countries,
+      placeholder,
+      selectPlaceholder,
+      value,
+      onChange,
+    } = props;
+
+    const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+    const {
+      allCountries,
+      selected,
+      localNumber,
+      onSelectCountry,
+      onChangeLocal,
+    } = useTelControl({ countries, name, value, onChange });
+
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const panelRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+    const filtered = useMemo(() => {
+      if (!query) return allCountries;
+      const q = query.toLowerCase();
+      return allCountries.filter(
+        (c) =>
+          c.name.toLowerCase().includes(q) ||
+          (c.region && c.region.toLowerCase().includes(q)) ||
+          c.dialCode.replace("+", "").includes(q.replace("+", ""))
+      );
+    }, [allCountries, query]);
+
+    useEffect(() => {
+      const onDocClick = (e: MouseEvent) => {
+        const target = e.target as Node;
+        if (
+          open &&
+          panelRef.current &&
+          !panelRef.current.contains(target) &&
+          buttonRef.current &&
+          !buttonRef.current.contains(target)
+        ) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocClick);
+      return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+
+    return (
+      <div className={clsx("relative w-full", className)}>
+        <label
+          ref={labelRef}
+          htmlFor={name}
+          className={clsx(
+            "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+            labelClassName
+          )}
+        >
+          {label}
+          {required ? <span className={requiredClassName}>*</span> : null}
+        </label>
+
+        <div
+          className={clsx(
+            "flex h-10 items-center gap-2 rounded-md shadow-sm focus-within:ring-2 focus-within:ring-primary-300",
+            inputClassName
+          )}
+          style={{ paddingLeft }}
+        >
+          <div className="relative h-full">
+            <button
+              ref={buttonRef}
+              type="button"
+              aria-haspopup="listbox"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+              className={
+                "h-full min-w-[100px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"
+              }
+            >
+              <span className="truncate text-left leading-tight">
+                {selected ? (
+                  <span className="font-medium">{selected.dialCode}</span>
+                ) : (
+                  <span className="text-gray-500">+ Code</span>
+                )}
+              </span>
+              <svg
+                className="ml-2 h-4 w-4 text-gray-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+
+            {open ? (
+              <div
+                ref={panelRef}
+                className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg"
+              >
+                <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
+                  <input
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder={selectPlaceholder || "Enter Country/Region"}
+                    className="h-8 w-full bg-transparent text-sm outline-none"
+                  />
+                  <svg
+                    className="h-4 w-4 text-gray-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+
+                <div className="mt-2 max-h-64 overflow-auto pr-1">
+                  {filtered.map((c) => (
+                    <button
+                      key={c.code}
+                      type="button"
+                      onClick={() => {
+                        onSelectCountry(c);
+                        setOpen(false);
+                      }}
+                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span
+                        className={clsx(
+                          "inline-block h-3 w-3 rounded-full border",
+                          selected?.code === c.code
+                            ? "border-primary-500 ring-4 ring-primary-200"
+                            : "border-gray-400"
+                        )}
+                      ></span>
+                      <span className="flex-1 truncate">
+                        {c.name}
+                        {c.region ? (
+                          <span className="text-gray-500">, {c.region}</span>
+                        ) : null}
+                      </span>
+                      <span className="text-gray-700">{c.dialCode}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          <input
+            ref={ref}
+            id={name}
+            name={name}
+            required={required}
+            placeholder={placeholder || "Phone number"}
+            inputMode="tel"
+            className={clsx(
+              "h-10 w-full appearance-none rounded-md border-0 bg-transparent px-3 py-0 text-sm leading-tight focus:outline-none"
+            )}
+            value={localNumber}
+            onChange={(e) => onChangeLocal(e.target.value)}
+            autoComplete={name}
+            autoCorrect="off"
+            spellCheck={false}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TelInput2;

package/src/react/components/ContactForm/Textarea2.tsx

@@ -34,7 +34,7 @@ export const Textarea2 = forwardRef<HTMLTextAreaElement, TextareaProps>(
           <label
             ref={labelRef}
             htmlFor={name}
-            className={`absolute left-3 top-2 text-gray-400 opacity-70 text-sm pointer-events-none ${
+            className={`absolute left-3 top-2 opacity-70 text-sm pointer-events-none ${
               labelClassName || ""
             }`}
           >