feat: cssConverter 补充函数：cssConverterString、cssConverterObject

cssConverter 补充函数：cssConverterString、cssConverterObject

for-vue2/src/packages/utils/cssConverter/README.md

@@ -13,49 +13,89 @@ outline: deep
 
 <SupportTable  H5  WEIXIN TOUTIAO BAIDU ALIPAY LARK/>
 
-## 参数 && 返回值
+## 类型
 
-**cssConverter(value [, target = 'string'])**
-### value
+```ts
+function cssConverter(
+  value?:string | CSSPropertie,
+  target?:'string' | 'object' = 'string'
+):string | CSSPropertie
+```
+## 说明
 
-- **类型:** `String || Object`
+- **value**
 
-可以是字`短横线命名的css字符串` 和 `驼峰命名的css对象`
+参数 `value` 可以是 **短横线命名的css字符串** 或 **驼峰命名的css对象**
 
-### target
+- **target**
 
-- **类型:** `['string', 'object']`
+根据参数 `target` 的值，指定以以何种模式转换：（默认：`'string'`）
 
-- **默认:** `'string'`
+`'string'`: 返回`短横线命名的css字符串{string}`
 
-指定返回的类型
+`'object'`: 返回`驼峰命名的css对象{CSSPropertie}`
 
-`'string'`: 返回`短横线命名的css字符串`
+- **返回值**
 
-`'object'`: 返回`驼峰命名的css对象`
+参数`target` 的值决定了`cssConverter` 返回值，导致在`Typescript`中无法获得准确的类型
 
+如需要获得准确的类型，应该使用 [cssconverterString](#cssconverterstring) 或 [cssConverterObject](#cssconverterobject)
 
 ## 示例
 
-### `字符串` => `对象`
-```js
+ 字符串 转 对象：
+
+```ts
 const css = 'background-color:#000;color:#fff;';
 
 const cssObj = cssConverter(css,'object');
 
-console.log(cssObj);
-// {backgroundColor:'#000',color:'#fff'}
+console.log(cssObj); // {backgroundColor:'#000',color:'#fff'}
+```
+
+ 对象 转 字符串：
+
+```ts
+const cssObj = { backgroundColor:'#000', color:'#fff' };
+
+const css =  cssConverter(cssObj); // 不需要第二个参数，第二个参数默认为`string`
+
+console.log(css); // 'background-color:#000;color:#fff;'
+```
+
+## cssConverterString
+
+将 `短横线命名的css字符串` 或 `驼峰命名的css对象` 转换成 `短横线命名的css字符串`
+
+- **类型**
+
+```ts
+function cssConverterString(value?: string | CSSProperties): string
 ```
 
-### `对象` => `字符串`
-```js
-const cssObj = {
-  backgroundColor:'#000',
-  color:'#fff',
-};
+- **示例**
+
+```ts
+const s0 = cssConverterString({ backgroundColor:'#000', color:'#fff' })
+const s1 = cssConverterString('background-color:#000;color:#fff;')
+// s0:'background-color:#000;color:#fff;'
+// s1:'background-color:#000;color:#fff;'
+```
 
-const css =  cssConverter(cssObj);
+## cssConverterObject
+
+将 `短横线命名的css字符串` 或 `驼峰命名的css对象` 转换成 `驼峰命名的css对象`
+
+- **类型**
+
+```ts
+function cssConverterObject(value?: string | CSSProperties): CSSProperties
+```
 
-console.log(css);
-// background-color:#000;color:#fff;
+- **示例**
+```ts
+const s0 = cssConverterObject({ backgroundColor:'#000', color:'#fff' })
+const s1 = cssConverterObject('background-color:#000;color:#fff;')
+// s0:{ backgroundColor:'#000', color:'#fff' }
+// s1:{ backgroundColor:'#000', color:'#fff' }
 ```

for-vue2/src/packages/utils/cssConverter/cssConverter.ts

@@ -1,64 +1,86 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 import type { CSSProperties } from '@vue/runtime-dom';
 
-export const cssToObj = (css: string) => {
+function cssToObj(css: string) {
   const obj: Record<string, string> = {};
   css.split(';').forEach((prop) => {
     const parts = prop.trim().split(':');
     if (parts.length === 2) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
-      const cssProp = parts[0].trim().replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+      const cssProp = parts[0]
+        .trim()
+        .replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
       obj[cssProp] = parts[1].trim();
     }
   });
   return obj as CSSProperties;
-};
+}
 
-export const objToCss = (obj: CSSProperties) => {
+function objToCss(obj: CSSProperties) {
   let css = '';
   for (const key in obj) {
     if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      const cssProp = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+      const cssProp = key.replace(
+        /[A-Z]/g,
+        (match) => `-${match.toLowerCase()}`,
+      );
       css += `${cssProp}:${obj[key as keyof CSSProperties]};`;
     }
   }
   return css;
-};
+}
 
 /**
- * @name 样式转换器
- * @description  短横线命名的css字符串<=>驼峰命名的css对象之间进行相关转换
- * @param {String||Object} value 短横线命名的css字符串|| 驼峰命名的css对象
- * @param {String} target =['string'|'object'] 指定输出类型 默认: string
- * @return {Object||String}  依据target
-*/
-export default function cssConverter(value: CSSProperties | string, target: 'string' | 'object' = 'string') {
-  if (target === 'string') {
-    if (typeof value === 'string') return value;
-    if (typeof value === 'object') return objToCss(value);
-  }
-
-  if (target === 'object') {
-    if (typeof value === 'string') return cssToObj(value);
-    if (typeof value === 'object') return value;
-  }
+ * 转换样式指定为短横线命名的css字符串
+ */
+function cssConverterString(value?: string | CSSProperties): string {
+  if (typeof value === 'object') return objToCss(value);
+  if (typeof value === 'string') return value;
+  return '';
+}
 
+/**
+ *  转换样式指定为驼峰命名的css对象
+ */
+function cssConverterObject(value?: string | CSSProperties): CSSProperties {
+  if (typeof value === 'string') return cssToObj(value);
+  if (typeof value === 'object') return value;
   return {};
 }
 
-// TODO:ts专用函数 cssConverterString cssConverterObject 解决在ts中使用时类型准确性
 /**
- * @name 样式转换器(指定为短横线命名的css字符串)
- * @param {String||Object} value 短横线命名的css字符串|| 驼峰命名的css对象
- * @return {Object} 驼峰命名的css对象
-*/
-// export const cssConverterString = (value:CSSProperties|string): CSSProperties => ({});
+ *  转换样式指定为短横线命名的css字符串/指定为驼峰命名的css对象
+ */
+function cssConverter(
+  value?: CSSProperties | string,
+  target: 'string' | 'object' = 'string',
+):CSSProperties | string {
+  if (value) {
+    if (target === 'string') {
+      if (typeof value === 'string') return value;
+      if (typeof value === 'object') return objToCss(value);
+    }
 
-/**
- * @name 样式转换器(指定为驼峰命名的css对象)
- * @param {String||Object} value 短横线命名的css字符串|| 驼峰命名的css对象
- * @return {Object} 短横线命名的css字符串
-*/
-// export const cssConverterObject = (value:CSSProperties|string): string => '';
+    if (target === 'object') {
+      if (typeof value === 'string') return cssToObj(value);
+      if (typeof value === 'object') return value;
+    }
+
+    Error('target must be "string" or "object"');
+    return '';
+  }
+
+  if (target === 'string') return '';
+  if (target === 'object') return {};
+  Error('target must be "string" or "object"');
+  return '';
+}
+
+export { cssConverterString, cssConverterObject, cssConverter };
+
+export default cssConverter;

for-vue2/src/packages/utils/index.ts

@@ -1,2 +1,3 @@
 export { default as Hhttp } from './Hhttp/Hhttp';
 export { default as cssConverter } from './cssConverter/cssConverter';
+export * from './cssConverter/cssConverter';