clxx 2.1.6 → 2.1.7

package/AGENTS.md

@@ -0,0 +1,2 @@
+- 所有回答用中文
+- 任意修改都要检查是否创造了新的bug，如果有bug则修复

package/README.md

@@ -432,6 +432,67 @@ import { CarouselNotice } from 'clxx';
 
 ---
 
+#### CitySelect / showCitySelect — 城市选择器
+
+移动端全屏城市选择器，支持字母侧边栏触摸导航、粘滞字母标题、列表与字母双向联动、搜索（含中文 IME 保护）、滑入/滑出动画、外部定位回显等。
+
+```tsx
+import { CitySelect, showCitySelect } from 'clxx';
+
+// 组件方式
+<CitySelect
+  primary="#2f7dff"
+  getLocation={async () => '北京'}
+  onSelect={(city) => console.log(city)}
+  onClose={() => console.log('closed')}
+/>
+
+// 函数式方式（内部使用 Portal 挂载到 body，选中或点击退出后自动卸载）
+showCitySelect({
+  primary: '#2f7dff',
+  // 同步返回
+  getLocation: () => '110100',
+  // 或异步返回
+  // getLocation: async () => fetchCurrentCity(),
+  onSelect: (city) => {
+    console.log(city.name, city.code, city.province);
+  },
+});
+```
+
+**Props：**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `onSelect` | `(city: SelectedCity) => void` | — | 选中城市时触发 |
+| `onClose` | `() => void` | — | 退出动画结束时触发 |
+| `onLetterChange` | `(letter: string) => void` | — | 侧边栏当前字母变化回调 |
+| `getLocation` | `() => string \| null \| undefined \| Promise<string \| null \| undefined>` | — | 外部定位能力，可同步或异步，返回城市名或城市 code |
+| `primary` | `string` | `'#2f7dff'` | 主题主色，形如 `#rrggbb`；active 态颜色自动派生 |
+
+**SelectedCity：**
+
+```typescript
+interface SelectedCity {
+  name: string;              // 城市名，如 "北京市"
+  code: string;              // 城市 code（直辖市为市辖区 code，如 "110100"）
+  province: {
+    name: string;            // 省级名称
+    code: string;            // 省级 code
+  };
+}
+```
+
+**特性：**
+- **首次挂载调用一次** `getLocation`：结果能匹配 `cityData`（按 code 精确匹配，按 name 允许省略末尾"市"，如"北京"命中"北京市"）才展示「当前定位」快捷块；失败、为空、匹配不到均不显示。
+- **字母侧边栏触摸导航**：非 passive 触摸监听，滑动时实时切换字母并滚动列表；松开显示大字母提示。
+- **双向联动**：手动滚动列表时基于缓存的 `offsetTop` 二分查找激活对应字母；并通过 `ResizeObserver` 重新测量。
+- **搜索**：按拼音全拼、拼音首字母、中文名前缀匹配；中文输入法合成期间不触发搜索，避免中间态干扰。
+- **滑入滑出动画**：首次挂载右侧滑入；选中或点击退出时滑出，动画结束后才触发 `onClose`（首帧立即退出时直接回调，避免卡住）。
+- **纯属性化主题**：无 `containerStyle`，只允许通过 `primary` 控制主题色。
+
+---
+
 ### 🔔 反馈组件
 
 #### showToast / showUniqToast — 轻提示
@@ -1065,6 +1126,7 @@ getContextValue();         // { token: 'xxx', userId: 123 }
 | `Overlay` | 组件 | 覆盖层 |
 | `ScrollView` | 组件 | 滚动视图 |
 | `CarouselNotice` | 组件 | 轮播公告 |
+| `CitySelect` | 组件 | 城市选择器 |
 | `Indicator` | 组件 | 加载指示器 |
 | `Countdowner` | 组件 | 倒计时 |
 | `Ago` | 组件 | 相对时间 |
@@ -1076,6 +1138,7 @@ getContextValue();         // { token: 'xxx', userId: 123 }
 | `showDialog` | 对话框 |
 | `showAlert` | 弹窗提示 |
 | `showLoading` / `showLoadingAtLeast` | 加载指示 |
+| `showCitySelect` | 城市选择器 |
 
 ### Hooks
 | 导出 | 说明 |

package/build/Ago/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,12 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import dayjs from 'dayjs';
-import { ago } from '../utils/ago';
-export function Ago(props) {
-    const { date = dayjs(), block = false, renderContent } = props, attrs = __rest(props, ["date", "block", "renderContent"]);
-    const agoValue = ago(date);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ago = Ago;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const dayjs_1 = __importDefault(require("dayjs"));
+const ago_1 = require("../utils/ago");
+function Ago(props) {
+    const { date = (0, dayjs_1.default)(), block = false, renderContent } = props, attrs = __rest(props, ["date", "block", "renderContent"]);
+    const agoValue = (0, ago_1.ago)(date);
     // 格式化内容
     let content = agoValue.format;
     if (typeof renderContent === 'function') {
@@ -22,8 +28,8 @@ export function Ago(props) {
     }
     // 是否显示为块元素
     if (block) {
-        return _jsx("div", Object.assign({}, attrs, { children: content }));
+        return (0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { children: content }));
     }
     // 默认显示行内元素
-    return _jsx("span", Object.assign({}, attrs, { children: content }));
+    return (0, jsx_runtime_1.jsx)("span", Object.assign({}, attrs, { children: content }));
 }

package/build/Alert/Wrapper.js

@@ -1,25 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Clickable } from '../Clickable';
-import { Row } from '../Flex/Row';
-import { style } from './style';
-export function AlertWrapper(props) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertWrapper = AlertWrapper;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Clickable_1 = require("../Clickable");
+const Row_1 = require("../Flex/Row");
+const style_1 = require("./style");
+function AlertWrapper(props) {
     const { title = '提示', description, confirm = '确定', confirmColor = '#007afe', cancel = '取消', cancelColor = '#666', showCancel = false, onConfirm, onCancel, 
     // 可定制的样式
     titleStyle, descStyle, btnStyle, cancelStyle, confirmStyle, } = props;
     // 标题样式
     let titleCss = [
-        style.title,
+        style_1.style.title,
         description ? { paddingBottom: 0 } : {},
         titleStyle
     ];
     // 展示按钮组
     let btnBoxCss = [
-        style.btnBox,
-        showCancel ? style.btnBoxWithCancel : {}
+        style_1.style.btnBox,
+        showCancel ? style_1.style.btnBoxWithCancel : {}
     ];
-    return (_jsxs("div", { css: style.container, children: [_jsxs("div", { css: style.content, children: [_jsx("div", { css: titleCss, children: title }), description && _jsx("div", { css: [style.desc, descStyle], children: description })] }), _jsxs(Row, { alignItems: "stretch", css: btnBoxCss, children: [showCancel && (_jsx(Clickable, { css: [style.btn, btnStyle, cancelStyle, { color: cancelColor }], onClick: onCancel, activeStyle: {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: style_1.style.container, children: [(0, jsx_runtime_1.jsxs)("div", { css: style_1.style.content, children: [(0, jsx_runtime_1.jsx)("div", { css: titleCss, children: title }), description && (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.desc, descStyle], children: description })] }), (0, jsx_runtime_1.jsxs)(Row_1.Row, { alignItems: "stretch", css: btnBoxCss, children: [showCancel && ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style_1.style.btn, btnStyle, cancelStyle, { color: cancelColor }], onClick: onCancel, activeStyle: {
                             backgroundColor: `#c0c0c022`,
-                        }, children: cancel })), _jsx(Clickable, { css: [style.btn, btnStyle, confirmStyle, { color: confirmColor }], onClick: onConfirm, activeStyle: {
+                        }, children: cancel })), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style_1.style.btn, btnStyle, confirmStyle, { color: confirmColor }], onClick: onConfirm, activeStyle: {
                             backgroundColor: `#c0c0c022`,
                         }, children: confirm })] })] }));
 }

package/build/Alert/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,19 +8,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import React from 'react';
-import { showDialog } from '../Dialog';
-import { AlertWrapper } from './Wrapper';
-import isPlainObject from 'lodash/isPlainObject';
-import omit from 'lodash/omit';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showAlert = showAlert;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const Dialog_1 = require("../Dialog");
+const Wrapper_1 = require("./Wrapper");
+const isPlainObject_1 = __importDefault(require("lodash/isPlainObject"));
+const omit_1 = __importDefault(require("lodash/omit"));
 /**
  * 显示弹框
  * @param option
  */
-export function showAlert(option) {
+function showAlert(option) {
     let config;
-    if (React.isValidElement(option) || !isPlainObject(option)) {
+    if (react_1.default.isValidElement(option) || !(0, isPlainObject_1.default)(option)) {
         config = {
             title: option,
         };
@@ -28,7 +34,7 @@ export function showAlert(option) {
         config = option;
     }
     // 组件选项
-    const props = omit(config, ['showMask']);
+    const props = (0, omit_1.default)(config, ['showMask']);
     props.onCancel = () => __awaiter(this, void 0, void 0, function* () {
         var _a;
         yield closeDialog();
@@ -40,9 +46,9 @@ export function showAlert(option) {
         (_a = config.onConfirm) === null || _a === void 0 ? void 0 : _a.call(config);
     });
     // 创建对话框
-    const closeDialog = showDialog({
+    const closeDialog = (0, Dialog_1.showDialog)({
         showMask: typeof config.showMask === 'undefined' ? true : !!config.showMask,
-        content: _jsx(AlertWrapper, Object.assign({}, props)),
+        content: (0, jsx_runtime_1.jsx)(Wrapper_1.AlertWrapper, Object.assign({}, props)),
     });
     // 返回关闭逻辑
     return closeDialog;

package/build/Alert/style.js

@@ -1,4 +1,7 @@
-export const style = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = void 0;
+exports.style = {
     container: {
         position: "relative",
         overflow: "hidden",

package/build/AutoGrid/index.js

@@ -1,3 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,23 +43,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import React, { useMemo } from 'react';
-import { style } from './style';
-import { normalizeUnit } from '../utils/cssUtil';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoGrid = AutoGrid;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const style_1 = require("./style");
+const cssUtil_1 = require("../utils/cssUtil");
 /**
  * 自动化生成表格
  * @param props
  */
-export function AutoGrid(props) {
+function AutoGrid(props) {
     const { children, cols: rawCols = 1, gap: rawGap = 0, isSquare = false, itemStyle, containerStyle } = props, extra = __rest(props, ["children", "cols", "gap", "isSquare", "itemStyle", "containerStyle"]);
     // 规范化，确保 cols >= 1
     const cols = Math.max(1, Math.floor(+rawCols) || 1);
-    const gap = normalizeUnit(rawGap);
+    const gap = (0, cssUtil_1.normalizeUnit)(rawGap);
     // 将 children 分组为二维数组
-    const gridData = useMemo(() => {
+    const gridData = (0, react_1.useMemo)(() => {
         const list = [];
-        React.Children.forEach(children, (child) => {
+        react_1.default.Children.forEach(children, (child) => {
             if (child !== null && child !== undefined) {
                 if (list.length === 0 || list[list.length - 1].length >= cols) {
                     list.push([]);
@@ -43,20 +79,20 @@ export function AutoGrid(props) {
         return list;
     }, [children, cols]);
     // 缓存 item 宽度计算
-    const itemWidth = useMemo(() => `calc((100% - ${cols - 1} * ${gap}) / ${cols})`, [cols, gap]);
-    return (_jsx("div", Object.assign({}, extra, { css: containerStyle, children: gridData.map((row, rowIndex) => (_jsx("div", { css: [
-                style.row,
+    const itemWidth = (0, react_1.useMemo)(() => `calc((100% - ${cols - 1} * ${gap}) / ${cols})`, [cols, gap]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, extra, { css: containerStyle, children: gridData.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { css: [
+                style_1.style.row,
                 { gap },
                 rowIndex !== gridData.length - 1 ? { marginBottom: gap } : undefined,
             ], children: row.map((item, colIndex) => {
                 const isPlaceholder = item === null;
                 const boxCss = [
-                    style.itemBox,
+                    style_1.style.itemBox,
                     { width: itemWidth },
                     isPlaceholder ? { visibility: 'hidden' } : undefined,
-                    isSquare ? style.itemBoxSquare : undefined,
+                    isSquare ? style_1.style.itemBoxSquare : undefined,
                     itemStyle,
                 ];
-                return isSquare ? (_jsx("div", { css: boxCss, children: _jsx("div", { css: style.itemInner, children: item }) }, colIndex)) : (_jsx("div", { css: boxCss, children: item }, colIndex));
+                return isSquare ? ((0, jsx_runtime_1.jsx)("div", { css: boxCss, children: (0, jsx_runtime_1.jsx)("div", { css: style_1.style.itemInner, children: item }) }, colIndex)) : ((0, jsx_runtime_1.jsx)("div", { css: boxCss, children: item }, colIndex));
             }) }, rowIndex))) })));
 }

package/build/AutoGrid/style.js

@@ -1,14 +1,17 @@
-import { css } from "@emotion/react";
-export const style = {
-    row: css({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = void 0;
+const react_1 = require("@emotion/react");
+exports.style = {
+    row: (0, react_1.css)({
         display: "flex",
         width: "100%",
     }),
-    itemBox: css({
+    itemBox: (0, react_1.css)({
         position: "relative",
         minWidth: 0,
     }),
-    itemBoxSquare: css({
+    itemBoxSquare: (0, react_1.css)({
         "&:after,&::after": {
             content: "''",
             display: "block",
@@ -17,7 +20,7 @@ export const style = {
             paddingBottom: "100%",
         },
     }),
-    itemInner: css({
+    itemInner: (0, react_1.css)({
         position: "absolute",
         left: 0,
         right: 0,

package/build/CarouselNotice/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,30 +10,32 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { css } from '@emotion/react';
-import { useState, useEffect } from 'react';
-import { useInterval } from '../Effect/useInterval';
-import { style, Bubble } from './style';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselNotice = CarouselNotice;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const useInterval_1 = require("../Effect/useInterval");
+const style_1 = require("./style");
 /**
  * 滚动循环轮播公告
  * @param props
  */
-export function CarouselNotice(props) {
+function CarouselNotice(props) {
     const { width, height, justify = 'center', interval = 3000, duration = 200, list = [], containerStyle, wrapperStyle, itemStyle } = props, attrs = __rest(props, ["width", "height", "justify", "interval", "duration", "list", "containerStyle", "wrapperStyle", "itemStyle"]);
-    const [current, setCurrent] = useState(0);
-    const [animation, setAnimation] = useState(false);
+    const [current, setCurrent] = (0, react_2.useState)(0);
+    const [animation, setAnimation] = (0, react_2.useState)(false);
     /**
      * 一旦列表发生更新时，触发的逻辑
      */
-    useEffect(() => {
+    (0, react_2.useEffect)(() => {
         setCurrent(0);
         setAnimation(false);
     }, [list]);
     /**
      * 每隔多少秒更新一次动画
      */
-    useInterval(() => {
+    (0, useInterval_1.useInterval)(() => {
         setAnimation(true);
     }, list.length > 1 ? interval : null);
     /**
@@ -52,18 +55,18 @@ export function CarouselNotice(props) {
         else {
             justifyStyle.justifyContent = 'center';
         }
-        const itemCss = [style.item, justifyStyle];
+        const itemCss = [style_1.style.item, justifyStyle];
         if (list.length === 1) {
-            return (_jsx("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
+            return ((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
         }
         const showList = [];
         if (current === list.length - 1) {
-            showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[list.length - 1] }, current));
-            showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
+            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[list.length - 1] }, current));
+            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
         }
         else {
-            showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[current] }, current));
-            showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[current + 1] }, current + 1));
+            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[current] }, current));
+            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[current + 1] }, current + 1));
         }
         return showList;
     };
@@ -74,8 +77,8 @@ export function CarouselNotice(props) {
         if (!animation || list.length <= 1) {
             return null;
         }
-        return css({
-            animationName: Bubble,
+        return (0, react_1.css)({
+            animationName: style_1.Bubble,
             animationTimingFunction: 'linear',
             animationDuration: `${duration}ms`,
         });
@@ -92,5 +95,5 @@ export function CarouselNotice(props) {
         setAnimation(false);
     };
     return (Array.isArray(list) &&
-        list.length > 0 && (_jsx("div", Object.assign({}, attrs, { css: [style.box, { width, height }, containerStyle], children: _jsx("div", { onAnimationEnd: animationEnd, css: [style.wrapper, getAnimation(), wrapperStyle], children: showContent() }) }))));
+        list.length > 0 && ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { css: [style_1.style.box, { width, height }, containerStyle], children: (0, jsx_runtime_1.jsx)("div", { onAnimationEnd: animationEnd, css: [style_1.style.wrapper, getAnimation(), wrapperStyle], children: showContent() }) }))));
 }

package/build/CarouselNotice/style.js

@@ -1,5 +1,8 @@
-import { keyframes } from "@emotion/react";
-export const Bubble = keyframes `
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.Bubble = void 0;
+const react_1 = require("@emotion/react");
+exports.Bubble = (0, react_1.keyframes) `
   from {
     transform: translateY(0);
   }
@@ -7,7 +10,7 @@ export const Bubble = keyframes `
     transform: translateY(-50%);
   }
 `;
-export const style = {
+exports.style = {
     box: {
         position: "relative",
         overflow: "hidden",

package/build/CitySelect/data.d.ts

@@ -0,0 +1,3 @@
+import type { ProvinceData, CityData } from './type';
+export declare const provinceData: ProvinceData;
+export declare const cityData: CityData;