plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/components/AutoTable/utils/AutoTable.utils.ts

@@ -0,0 +1,45 @@
+import {tScopeSlotsType, tSlotsType} from "plain-design-composition";
+import {iTableCellRenderScope} from "../../Table/table/utils/table.utils";
+import {TableOptionSpace} from "./TableOption.space";
+
+/**
+ * AutoTable插槽类型
+ * @author  韦胜健
+ * @date    2022.12.24 13:52
+ */
+export const AutoTableSlotsOption = ['default', 'noData'] as const;
+export type iAutoTableSlotsType = tSlotsType<typeof AutoTableSlotsOption>
+
+/**
+ * AutoTable作用域插槽类型
+ * @author  韦胜健
+ * @date    2022.12.24 13:52
+ */
+export const AutoTableScopeSlotsOption = {
+  test: (scope: iTableCellRenderScope) => {},
+} as const;
+export type iAutoTableScopeSlotsType = tScopeSlotsType<typeof AutoTableScopeSlotsOption>
+
+/**
+ * AutoTable引用类型
+ * @author  韦胜健
+ * @date    2022.12.24 13:52
+ */
+export type iAutoTableRefer = {
+  refs: { el: HTMLElement | null | undefined },
+  props: { option: TableOptionSpace.iTableOption },
+  slots: iAutoTableSlotsType,
+  scopeSlots: iAutoTableScopeSlotsType,
+}
+
+/**
+ * 分页信息
+ * @author  韦胜健
+ * @date    2022.12.25 13:01
+ */
+export interface iAutoTablePageData {
+  page: number,
+  size: number,
+  hasNext: boolean,
+  total?: null | number,
+}

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -0,0 +1,195 @@
+import {PlainObject} from "plain-utils/utils/event";
+import {iHttp} from "../../createHttp";
+import {iAutoTableRefer, iAutoTableScopeSlotsType, iAutoTableSlotsType} from "./AutoTable.utils";
+import {iUrl, tGetDefaultUrlConfig} from "./TableOption.url";
+import {iTableOperation, iTableOperationPermitConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
+import {iTableRefer} from "../../Table/table/Table";
+import {iTableOptionCacheData} from "../use/useTableOption.cache.utils";
+import {ThemeSize} from "../../../uses/useStyle";
+import {iMouseEvent, RenderNode} from "plain-design-composition";
+import {iFilterHandlerQueryParam} from "../../FilterService/utils/filter.service.utils";
+import {FilterFormSingle} from "../../FilterFormSingle";
+import {Pagination} from "../../Pagination";
+import {tPlc} from "../../Table/plc/utils/plc.utils";
+import {iEffects} from 'plain-utils/utils/createEffects';
+import {iTableNode, iTableSortData} from "../../Table/table/utils/table.utils";
+import {eTableOptionEditType} from "./TableOption.utils";
+
+export namespace TableOptionSpace {
+
+  /**
+   * AutoTable默认配置
+   * @author  韦胜健
+   * @date    2022.12.20 10:46
+   */
+  export interface iTableOptionDefaultConfig {
+    http: iHttp,                                                        // 请求配置对象
+    getDefaultUrlConfig: tGetDefaultUrlConfig;                          // 获取默认请求配置的定义函数
+    keyField: string,                                                   // 行数据唯一标识字段名称
+    bodyRowHeight?: number,                                             // 行高
+    headRowHeight?: number,                                             // 表头行高
+    indexing?: boolean,                                                 // 是否需要索引列
+    border?: boolean,                                                   // 是否显示单元格边框
+    defaultShowRow?: number,                                            // 当没有设置showRow，也没有设置自动填充高度时，默认的显示行数
+    pageSizeOptions: number[],                                          // 也大小选项数组
+    editType: typeof eTableOptionEditType.TYPE,                         // 编辑类型，inline或者form
+    loadOnStart?: boolean,                                              // 是否页面初始化的时候就加载数据
+    copyDefaultExcludeKeys: string[],                                   // 复制一行的时候，不复制的属性
+    showRows: number,                                                   // 显示的行数（自动计算表格的高度）
+    showRowsMode: 'fixed' | 'auto',                                     // 显示行数的模式，自动根据 加载的数据展示还是固定行数
+    sort?: iTableOptionSortParam | iTableOptionSortParam[],             // 排序方式
+    getCache: (key: string) => iTableOptionCacheData | undefined,       // 获取缓存配置信息
+    setCache: (cacheData: iTableOptionCacheData) => void,               // 保存缓存配置信息
+    size?: typeof ThemeSize.TYPE,                                       // 表格尺寸
+    filterFormColumn: number,                                           // 查询表单列数
+  }
+
+  /**
+   * AutoTable自定义配置
+   * @author  韦胜健
+   * @date    2022.12.20 10:47
+   */
+  export interface iTableOptionCustomConfig {
+    url?: iUrl,                                                         // 请求配置
+    data?: any[],                                                       // 默认数据
+    fill?: boolean,                                                     // 是否自动计算高度
+    defaultNewRow?: tDefaultNewRow,                                     // 新建行的时候的默认新行数据
+    param?: iFilterHandlerQueryParam | (() => iFilterHandlerQueryParam | Promise<iFilterHandlerQueryParam>), // 默认参数
+    copyExcludeKeys?: string[],                                         // 复制一行的时候，额外的不复制的属性
+    render?: iTableOptionConfigRenderType | iTableOptionConfigRenderType['default'], // 渲染部分插槽内容
+    buttons?: iTableOperation[],                                        // 自定义按钮
+    editSourceData?: boolean,                                           // 是否编辑原始数据
+    defaultEditable?: boolean,                                          // 默认开启编辑状态
+    hideFilterSearch?: boolean,                                         // 禁用搜索栏筛选
+    hideFilterForm?: boolean,                                           // 禁用搜索表单筛选
+    permit?: iTableOperationPermitConfig,                               // 按钮权限控制
+    searchAttrs?: Partial<typeof FilterFormSingle.use.props>,           // 给搜索栏组件传递的属性设置
+    paginationAttrs?: Partial<typeof Pagination.use.props>,             // 给分页组件传递的属性设置
+    parentOption?: Record<string, any>,                                 // 父表的option
+    parentMap?: Record<string, any>,                                    // 父表的字段映射
+    minShowRows?: number,                                              // BaseTable的minShowRows
+    // todo
+    noHead?: boolean,                                                   // 不显示表头
+  }
+
+  /**
+   * useTableOption参数类型
+   * @author  韦胜健
+   * @date    2023/2/7 9:46
+   */
+  export type iTableOptionUseConfig = iTableOptionCustomConfig & Partial<iTableOptionDefaultConfig>
+
+  /**
+   * tableOption运行时config类型
+   * @author  韦胜健
+   * @date    2023/2/7 9:46
+   */
+  export type iTableOptionConfig = Omit<iTableOptionCustomConfig & iTableOptionDefaultConfig, 'size'> & { size: typeof ThemeSize.TYPE }
+
+  /**
+   * tableOption扩展的hooks类型
+   * @author  韦胜健
+   * @date    2023/2/7 14:32
+   */
+  export interface iTableOptionHooks {}
+
+  /**
+   * 排序设置参数对象(用来查询的排序参数结构)
+   * @author  韦胜健
+   * @date    2021/6/7 17:15
+   */
+  export interface iTableOptionSortParam {
+    field: string,
+    desc: boolean
+  }
+
+  /**
+   * 默认新建行数据类型
+   * @author  韦胜健
+   * @date    2022.12.20 10:45
+   */
+  export type tDefaultNewRowObject = PlainObject
+  export type tDefaultNewRowGetter = () => tDefaultNewRowObject | Promise<tDefaultNewRowObject>
+  export type tDefaultNewRow = tDefaultNewRowObject | tDefaultNewRowGetter
+
+  /**
+   * tableOption内部state状态类型
+   * @author  韦胜健
+   * @date    2023/2/7 9:47
+   */
+  export interface iTableOptionState {
+    getTable: () => null | iTableRefer,
+    getAutoTable: () => null | iAutoTableRefer;
+    list: PlainObject[],
+    editingWhenAddRow: boolean,
+    getSourceFlatPlcList: () => tPlc[],
+    currentNode: iTableNode | null | undefined,
+    sortData: iTableSortData[],
+  }
+
+  /**
+   * tableOption的render类型
+   * @author  韦胜健
+   * @date    2023/2/7 9:48
+   */
+  type iRemoveExist<T> = { [k in keyof T]: [T[k]] extends [(...args: any[]) => any] ? (...args: Parameters<T[k]>) => ReturnType<T[k]> : never }
+  export type iTableOptionConfigRenderType = Partial<iRemoveExist<iAutoTableSlotsType & iAutoTableScopeSlotsType>>
+
+  /**
+   * tableOption渲染tip的类型
+   * @author  韦胜健
+   * @date    2023/2/7 9:48
+   */
+  export interface iTableOptionTipMeta {
+    display: () => RenderNode,
+    onClear?: (e: iMouseEvent) => void,
+    onClick: () => void,
+  }
+
+  /**
+   * 赋值一个TableOption的clone函数类型
+   * @author  韦胜健
+   * @date    2023/2/7 9:50
+   */
+  export type iTableOptionClone = (processConfig?: (copyConfig: iTableOptionUseConfig) => void | iTableOptionUseConfig) => iTableOption
+
+  /**
+   * 目标操作对象类型iTableOption
+   * @author  韦胜健
+   * @date    2023/2/7 10:08
+   */
+  export interface iTableOption {
+    config: iTableOptionConfig;
+    clone: iTableOptionClone;
+  }
+
+  /**
+   * useTableOption函数类型
+   * @author  韦胜健
+   * @date    2023/2/7 10:08
+   */
+  export interface iTableOptionUser {
+    (config: iTableOptionUseConfig): iTableOption,
+
+    use: (useFun: (option: iTableOption) => void) => void,
+    config: (configFunc: (useConfig: iTableOptionConfig) => void) => void,
+    registry: (
+      seq: iTableOptionRegistration['seq'],
+      key: iTableOptionRegistration['key'],
+      handler: iTableOptionRegistration['handler'],
+    ) => void
+  }
+
+  /**
+   * 注册一个AutoOption组合模块所需要的参数类型
+   * @author  韦胜健
+   * @date    2023/2/6 10:39
+   */
+  export interface iTableOptionRegistration {
+    seq: number;
+    key: string;
+    handler: (option: iTableOption, effects: iEffects) => any;
+  }
+
+  export const VAL = {};
+}

package/src/packages/components/AutoTable/utils/TableOption.url.ts

@@ -0,0 +1,153 @@
+import {iHttpRequestConfig} from "../../createHttp/http.utils";
+import {PlainObject} from "plain-utils/utils/event";
+import {TableOptionSpace} from "./TableOption.space";
+
+/**
+ * 返回结果标准内容
+ * @author  韦胜健
+ * @date    2022.12.25 11:04
+ */
+type iUrlResponseDataMeta<T> = T & { success: true; code: string, message?: string };
+
+/**
+ * 增删改查请求返回成功之后的数据类型
+ * @author  韦胜健
+ * @date    2022/7/22 10:13
+ */
+export interface iUrlResponseData {
+  /*分页查询*/
+  query: iUrlResponseDataMeta<{ list: PlainObject[]; hasNext: boolean }>;
+  /*查询总数*/
+  queryCount: iUrlResponseDataMeta<{ total: number }>;
+  /*单条查询*/
+  find: iUrlResponseDataMeta<{ result: PlainObject }>;
+  /*插入数据*/
+  insert: iUrlResponseDataMeta<{ result: PlainObject }>;
+  /*更新数据*/
+  update: iUrlResponseDataMeta<{ result: PlainObject }>;
+  /*删除数据*/
+  delete: iUrlResponseDataMeta<{ flag: boolean }>;
+  /*批量新建*/
+  batchInsert: iUrlResponseDataMeta<{ result: PlainObject[] }>;
+  /*批量更新*/
+  batchUpdate: iUrlResponseDataMeta<{ result: PlainObject[] }>;
+  /*批量删除*/
+  batchDelete: iUrlResponseDataMeta<{ result: { affectedRows: number } }>;
+  /*默认新行数据*/
+  defaultNewRow: iUrlResponseDataMeta<{ result: PlainObject }>;
+}
+
+/**
+ * 个性化配置某个请求的对象类型
+ * @author  韦胜健
+ * @date    2022/7/22 10:10
+ */
+export type iUrlConfigObject<RespData,
+  Config extends iHttpRequestConfig<RespData> = iHttpRequestConfig<RespData>> = {
+  base?: string;
+  url?: string;
+  method?: Config['method'];
+  formRequest?: Config['formRequest'];
+  config?: Config;
+  request?: (requestConfig: Config) => Promise<RespData>;
+};
+
+/**
+ * AutoOption中url属性类型
+ * @author  韦胜健
+ * @date    2022/7/22 10:13
+ */
+export type iUrl =
+  | string
+  | ({ base?: string } & {
+  [k in keyof iUrlResponseData]?: string | iUrlConfigObject<iUrlResponseData[k]>;
+});
+
+/**
+ * 计算默认的请求动作
+ * @author  韦胜健
+ * @date    2022/7/22 11:27
+ */
+export type tGetDefaultUrlConfig = {
+  [k in keyof iUrlResponseData]: (data: {
+    /*组合起来的自定义请求配置信息*/
+    urlConfig: iUrlConfigObject<iUrlResponseData[k]>;
+    /*要返回的请求配置信息，根据urlConfig填充这个对象的值*/
+    requestConfig: iHttpRequestConfig<iUrlResponseData[k]>;
+    /*待处理完requestConfig之后，才能得知method类型，才能注入请求参数到params或者data中*/
+    processRequestData: (requestData: any) => void;
+    /*发送请求的http实例对象*/
+    request: (requestConfig: iHttpRequestConfig<iUrlResponseData[k]>) => Promise<iUrlResponseData[k]>;
+  }) => Promise<iUrlResponseData[k]>;
+};
+
+export function createUrlUtils(config: Pick<TableOptionSpace.iTableOptionConfig, 'url' | 'getDefaultUrlConfig' | 'http'>) {
+  /**
+   * 计算某个type的urlConfig请求配置
+   * @author  韦胜健
+   * @date    2022/7/25 14:05
+   */
+  const getUrlConfig = (type: keyof iUrlResponseData): iUrlConfigObject<any> => {
+    if (!config.url) {
+      throw new Error('url不能为空！');
+    }
+    let urlConfig: iUrlConfigObject<any>;
+    if (typeof config.url === 'string') {
+      /*config.url为string，当做base使用*/
+      urlConfig = { base: config.url };
+    } else {
+      /*config.url为对象*/
+      urlConfig = { base: config.url?.base };
+      if (!!config.url[type]) {
+        const typeConfig = config.url[type];
+        if (typeof typeConfig === 'string') {
+          /*config.url[type] 为字符串*/
+          urlConfig.url = typeConfig;
+        } else {
+          /*config.url[type] 为对象*/
+          Object.assign(urlConfig, typeConfig);
+        }
+      }
+    }
+    return urlConfig;
+  };
+
+  /**
+   * 发送请求
+   * @author  韦胜健
+   * @date    2022/7/26 12:53
+   */
+  const request = async <TYPE extends keyof iUrlResponseData>(
+    {
+      type,
+      processRequestData,
+      beforeRequest
+    }: {
+      type: TYPE;
+      processRequestData: (requestData: any) => void;
+      beforeRequest: (requestConfig: iHttpRequestConfig<any>) => void | Promise<void>;
+    }): Promise<iUrlResponseData[TYPE]> => {
+    /*将urlConfig应用到requestConfig中*/
+    let urlConfig = getUrlConfig(type);
+    const requestConfig: iHttpRequestConfig<any> = { data: {}, params: {} };
+    /*最终发送请求的函数*/
+    const request = urlConfig.request || config.http.request;
+    !!urlConfig.url && (requestConfig.url = urlConfig.url);
+    !!urlConfig.method && (requestConfig.method = urlConfig.method);
+    urlConfig.formRequest != null && (requestConfig.formRequest = urlConfig.formRequest);
+    !!urlConfig.config && Object.assign(requestConfig, urlConfig.config);
+    return await config.getDefaultUrlConfig[type]({
+      urlConfig,
+      requestConfig,
+      processRequestData,
+      request: async (requestConfig) => {
+        /*最终发送请求之前，先执行钩子函数*/
+        await beforeRequest(requestConfig);
+        /*真实发送请求动作*/
+        return request(requestConfig);
+      }
+    });
+  };
+
+  return { request, getUrlConfig };
+}

package/src/packages/components/AutoTable/utils/TableOption.utils.tsx

@@ -0,0 +1,57 @@
+import {createEnum} from "plain-utils/utils/createEnum";
+import {iFilterOption} from "../../FilterService/utils/filter.service.utils";
+import {PlainObject} from "plain-utils/utils/event";
+import {FilterService} from "../../FilterService";
+import {TableOptionSpace} from "./TableOption.space";
+import {iMouseEvent} from "plain-design-composition";
+
+
+/**
+ * 表格编辑方式
+ * @author  韦胜健
+ * @date    2022.12.19 16:53
+ */
+export const eTableOptionEditType = createEnum(['form', 'inline']);
+
+export const TableOptionUtils = (() => {
+
+  /**
+   * 创建一个table option tip对象
+   * @author  韦胜健
+   * @date    2023/1/15 13:24
+   */
+  function createTableOptionTipMeta(
+    {
+      filterOption,
+      formData,
+      onClick,
+      onClear,
+    }: {
+      filterOption: iFilterOption,
+      formData: PlainObject,
+      onClick: () => void,
+      onClear: () => void,
+    }): TableOptionSpace.iTableOptionTipMeta | null | undefined {
+    const handler = FilterService.getHandler(filterOption);
+    if (!handler) {return;}
+    const description = FilterService.getDescription({ filterOption, formData });
+    if (description === null) {return null;}
+    return {
+      display: () => <>
+        {`${filterOption!.label}${handler.label}${!description ? '' : ':'}`}
+        {description}
+      </>,
+      onClick,
+      onClear: (e: iMouseEvent) => {
+        e.stopPropagation();
+        handler!.clearValue({ formData, option: filterOption! });
+        onClear();
+      },
+    };
+  }
+
+  return {
+    createTableOptionTipMeta,
+    eTableOptionEditType,
+  };
+})();

package/src/packages/components/AutoTable/utils/buildPlainDefaultUrlConfig.ts

@@ -0,0 +1,134 @@
+import {iUrlConfigObject, iUrlResponseData, tGetDefaultUrlConfig} from "./TableOption.url";
+import {combineURL} from "../../../utils/combineURL";
+import {iHttpRequestConfig} from "../../createHttp/http.utils";
+
+export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
+  return {
+    /**
+     * 默认使用post方法调用接口base/list查询列表数据
+     * @author  韦胜健
+     * @date    2022.12.25 11:33
+     */
+    query: async (param) => {
+      return processPublicRequest('query', { ...param, suffixUrl: 'list', method: 'post' });
+    },
+    /**
+     * 默认使用post方法调用接口base/list查询总数
+     * @author  韦胜健
+     * @date    2022.12.25 17:08
+     */
+    queryCount: async (param) => {
+      return processPublicRequest('queryCount', {
+        ...param, suffixUrl: 'list', method: 'post', processRequestData: requestData => {
+          param.processRequestData(requestData);
+          requestData.onlyCount = true;
+        }
+      });
+    },
+    /**
+     * 默认使用post方法调用接口base/item查询单条数据
+     * @author  韦胜健
+     * @date    2022.12.25 11:33
+     */
+    find: async (param) => {
+      return processPublicRequest('find', { ...param, suffixUrl: 'item', method: 'post' });
+    },
+    /**
+     * 默认使用post方法调用接口base插入数据
+     * @author  韦胜健
+     * @date    2022.12.25 11:33
+     */
+    insert: async (param) => {
+      return processPublicRequest('insert', { ...param, method: 'post' });
+    },
+    /**
+     * 默认使用post请求调用接口base/batch批量插入数据
+     * @author  韦胜健
+     * @date    2022.12.25 22:25
+     */
+    batchInsert: async (param) => {
+      return processPublicRequest('batchInsert', { ...param, suffixUrl: 'batch', method: 'post' });
+    },
+    /**
+     * 默认使用put方法调用接口base更新数据
+     * @author  韦胜健
+     * @date    2022.12.25 11:34
+     */
+    update: async (param) => {
+      return processPublicRequest('update', { ...param, method: 'put' });
+    },
+    /**
+     * 默认使用put请求，调用接口base/batch批量更新数据
+     * @author  韦胜健
+     * @date    2022.12.25 22:25
+     */
+    batchUpdate: async (param) => {
+      return processPublicRequest('batchUpdate', { ...param, suffixUrl: 'batch', method: 'put' });
+    },
+    /**
+     * 默认使用delete方法调用接口base删除数据
+     * @author  韦胜健
+     * @date    2022.12.25 11:34
+     */
+    delete: async (param) => {
+      return processPublicRequest('delete', { ...param, method: 'delete' });
+    },
+    /**
+     * 批量删除
+     * @author  韦胜健
+     * @date    2022.12.27 21:02
+     */
+    batchDelete: async (param) => {
+      return processPublicRequest('batchDelete', { ...param, method: 'delete' });
+    },
+    /**
+     * 默认使用post方法调用接口base/default查询默认新建数据
+     * @author  韦胜健
+     * @date    2022.12.25 11:35
+     */
+    defaultNewRow: async (param) => {
+      return processPublicRequest('defaultNewRow', { ...param, suffixUrl: 'default', method: 'post' });
+    },
+  };
+};
+
+/**
+ * 默认处理公共的请求处理逻辑
+ * @author  韦胜健
+ * @date    2022.12.25 11:32
+ */
+export async function processPublicRequest<k extends keyof iUrlResponseData>(
+  type: k,
+  {
+    urlConfig,
+    requestConfig,
+    processRequestData,
+    request,
+
+    suffixUrl,
+    method,
+  }: {
+    /*组合起来的自定义请求配置信息*/
+    urlConfig: iUrlConfigObject<iUrlResponseData[k]>;
+    /*要返回的请求配置信息，根据urlConfig填充这个对象的值*/
+    requestConfig: iHttpRequestConfig<iUrlResponseData[k]>;
+    /*待处理完requestConfig之后，才能得知method类型，才能注入请求参数到params或者data中*/
+    processRequestData: (requestData: any) => void;
+    /*发送请求的http实例对象*/
+    request: (
+      requestConfig: iHttpRequestConfig<iUrlResponseData[k]>
+    ) => Promise<iUrlResponseData[k]>;
+
+    suffixUrl?: string;
+    method: iHttpRequestConfig<iUrlResponseData[k]>['method'];
+  }
+) {
+  /*默认请求url*/
+  !requestConfig.url && (requestConfig.url = !!suffixUrl ? combineURL(urlConfig.base!, suffixUrl) : urlConfig.base);
+  /*默认请求方法*/
+  !requestConfig.method && (requestConfig.method = method);
+  /*处理请求参数*/
+  let requestData = requestConfig[requestConfig.method === 'get' ? 'params' : 'data'];
+  processRequestData(requestData);
+  return await request(requestConfig);
+}

package/src/packages/components/AutoWidthInput/auto-width-input.scss

@@ -0,0 +1,25 @@
+@include prefix(auto-width-input) {
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+    max-width: 100%;
+  }
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/packages/components/AutoWidthInput/index.tsx

@@ -0,0 +1,67 @@
+import {designComponent, fixInputCursor, getComponentCls, iHTMLInputElement, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import './auto-width-input.scss';
+import {unit} from "plain-utils/string/unit";
+
+const FixInput = fixInputCursor('input');
+
+/**
+ * 自适应宽度的输入框
+ * @author  韦胜健
+ * @date    2022.5.21 0:25
+ */
+export const AutoWidthInput = designComponent({
+  props: {
+    modelValue: {},
+    minWidth: { type: [String, Number] },
+    maxWidth: { type: [String, Number] },
+    placeholder: {},
+    disabled: {},
+    readonly: {},
+    nativeAttrs: { type: Object },
+  },
+  emits: {
+    onUpdateModelValue: (val?: any) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ input: iHTMLInputElement });
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const handler = {
+      onInput: (e: any) => {
+        model.value = e.target.value;
+      },
+    };
+
+    const classes = useClasses(() => [
+      getComponentCls('auto-width-input'),
+    ]);
+
+    const spanStyles = useStyles((style) => {
+      if (!!props.maxWidth) {style.maxWidth = unit(props.maxWidth);}
+      if (!!props.minWidth) {style.minWidth = unit(props.minWidth);}
+    });
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <span className={classes.value}>
+          <span style={spanStyles.value}>{model.value as string}</span>
+          <FixInput
+            type="text"
+            ref={onRef.input}
+            value={model.value as string}
+            onInput={handler.onInput}
+            placeholder={props.placeholder as any}
+            disabled={!!props.disabled}
+            readOnly={!!props.readonly}
+            {...props.nativeAttrs}
+          />
+        </span>
+      )
+    };
+  },
+});