chore: 🚀 发版时更新css变量的ts类型文件

README.md

@@ -53,7 +53,7 @@
 - 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等.
 - 🚀 70+ 个高质量组件，覆盖移动端主流场景.
 - 💪 使用 Typescript 构建，提供良好的组件类型系统.
-- 🌍 支持国际化，内置 6 种语言包.
+- 🌍 支持国际化，内置 15 种语言包.
 - 📖 提供丰富的文档和组件示例.
 - 🎨 支持修改 CSS 变量实现主题定制.
 - 🍭 支持暗黑模式

build/buildThemeVars.js

@@ -1,76 +1,162 @@
 const fs = require('fs')
 const path = require('path')
 
+/**
+ * 从 SCSS 文件中提取变量
+ * @param {string} scssFilePath - SCSS 文件路径
+ * @returns {object} - 提取的变量对象
+ */
 const extractSCSSVariables = (scssFilePath) => {
   const scssContent = fs.readFileSync(scssFilePath, 'utf8')
+  const componentVarIndex = scssContent.indexOf('/* component var */')
+
+  if (componentVarIndex === -1) {
+    console.log('Error: Missing /* component var */ comment in SCSS file')
+    return {}
+  }
+
+  const scssContentToProcess = scssContent.substring(componentVarIndex + '/* component var */'.length)
+
   const variableRegex = /\/\*\s*([a-zA-Z0-9-]+)\s*\*\/([\s\S]*?)(?=\/\*\s*([a-zA-Z0-9-]+)\s*\*\/|$)/g
 
   const variables = {}
 
   let match
-  while ((match = variableRegex.exec(scssContent)) !== null) {
+  while ((match = variableRegex.exec(scssContentToProcess)) !== null) {
     const keyComment = match[1].replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
     const value = match[2].trim()
 
     variables[keyComment] = value
   }
-  console.log(variables)
   return variables
 }
 
-// const generateTSFileContent = (variables) => {
-//   let tsContent = ''
-
-//   for (const key in variables) {
-//     tsContent += `export type ${key}ThemeVars = {\n`
-//     tsContent += variables[key]
-//       .split('\n')
-//       .map((line) => {
-//         line = line.trim()
-//         if (line.split(':').length === 2) {
-//           const lines = line.split(':')
-//           lines[0] = lines[0].replace(/^\$-/, '').replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
-//           line = `${lines[0]}?:string`
-//         }
-//         return `  ${line.trim()}\n`
-//       })
-//       .join('')
-//     tsContent += '};\n\n'
-//   }
-//   return tsContent
-// }
-
+/**
+ * 生成 TypeScript 文件内容
+ * @param {object} variables - 变量对象
+ * @returns {string} - TypeScript 文件内容
+ */
 const generateTSFileContent = (variables) => {
-  let tsContent = ''
+  let tsContent = `import type { ExtractPropTypes, PropType } from 'vue'
+import { makeStringProp, baseProps } from '../common/props'
+
+export type ConfigProviderTheme = 'light' | 'dark'
+
+export const configProviderProps = {
+  ...baseProps,
+  /**
+   * 主题风格，设置为 dark 来开启深色模式，全局生效
+   */
+  theme: makeStringProp<ConfigProviderTheme>('light'),
+  /**
+   * 自定义主题变量
+   */
+  themeVars: {
+    type: Object as PropType<ConfigProviderThemeVars>,
+    default: () => ({})
+  }
+}
+
+export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>
+
+export type baseThemeVars = {
+  colorTheme?: string // 主题色
+  colorWhite?: string // 用于mix的白色
+  colorBlack?: string // 用于mix的黑色
+  colorSuccess?: string // 成功色
+  colorWarning?: string // 警告色
+  colorDanger?: string // 危险出错色
+  colorPurple?: string // 紫色
+  colorYellow?: string // 黄色
+  colorBlue?: string // 蓝色
+  colorInfo?: string // 信息色
+  colorGray1?: string // 灰色1
+  colorGray2?: string // 灰色2
+  colorGray3?: string // 灰色3
+  colorGray4?: string // 灰色4
+  colorGray5?: string // 灰色5
+  colorGray6?: string // 灰色6
+  colorGray7?: string // 灰色7
+  colorGray8?: string // 灰色8
+  fontGray1?: string // 字体灰色1
+  fontGray2?: string // 字体灰色2
+  fontGray3?: string // 字体灰色3
+  fontGray4?: string // 字体灰色4
+  fontWhite1?: string // 字体白色1
+  fontWhite2?: string // 字体白色2
+  fontWhite3?: string // 字体白色3
+  fontWhite4?: string // 字体白色4
+  colorTitle?: string // 模块标题/重要正文
+  colorContent?: string // 普通正文
+  colorSecondary?: string // 次要信息，注释/补充/正文
+  colorAid?: string // 辅助文字字号，弱化信息，引导性/不可点文字
+  colorTip?: string // 失效、默认提示文字
+  colorBorder?: string // 控件边框线
+  colorBorderLight?: string // 分割线颜色
+  colorBg?: string // 背景色、禁用填充色
+  darkBackground?: string // 深色背景1
+  darkBackground2?: string // 深色背景2
+  darkBackground3?: string // 深色背景3
+  darkBackground4?: string // 深色背景4
+  darkBackground5?: string // 深色背景5
+  darkBackground6?: string // 深色背景6
+  darkBackground7?: string // 深色背景7
+  darkColor?: string // 深色字体1
+  darkColor2?: string // 深色字体2
+  darkColor3?: string // 深色字体3
+  darkColorGray?: string // 深色灰色
+  darkBorderColor?: string // 深色边框颜色
+  colorIcon?: string // icon颜色
+  colorIconActive?: string // icon颜色hover
+  colorIconDisabled?: string // icon颜色disabled
+  fsBig?: string // 大型标题字号
+  fsImportant?: string // 重要数据字号
+  fsTitle?: string // 标题字号/重要正文字号
+  fsContent?: string // 普通正文字号
+  fsSecondary?: string // 次要信息字号
+  fsAid?: string // 辅助文字字号
+  fwMedium?: string // 字重500
+  fwSemibold?: string // 字重600
+  sizeSidePadding?: string // 屏幕两边留白padding
+}
+
+`
 
   for (const key in variables) {
     tsContent += `export type ${key}ThemeVars = {\n`
-    tsContent += variables[key]
-      .split('\n')
-      .map((line) => {
+    if (variables[key].includes('\n')) {
+      const lines = variables[key].split('\n')
+
+      lines.forEach((line) => {
         line = line.trim()
         if (line.split(':').length === 2) {
-          const lines = line.split(':')
-          lines[0] = lines[0].replace(/^\$-/, '').replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
-          line = `${lines[0]}?:string`
+          const parts = line.split(':')
+          const propertyName = parts[0].replace(/^\$-/, '').replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
+          tsContent += `  ${propertyName}?: string\n`
         }
-        return `  ${line.trim()}\n`
       })
-      .join('')
-    tsContent += '};\n\n'
+    } else {
+      const line = variables[key]
+      if (line.split(':').length === 2) {
+        const parts = line.split(':')
+        const propertyName = parts[0].replace(/^\$-/, '').replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
+        tsContent += `  ${propertyName}?: string\n`
+      }
+    }
+
+    tsContent += '}\n\n'
   }
 
-  // Add logic to export all types as ConfigProviderThemeVars
   const exportTypes = Object.keys(variables)
     .map((key) => `${key}ThemeVars`)
     .join(' & ')
-  tsContent += `export type ConfigProviderThemeVars = ${exportTypes};\n`
+  tsContent += `export type ConfigProviderThemeVars = baseThemeVars &\n  ${exportTypes.split('&').join('&\n ')}\n`
 
   return tsContent
 }
 
-const tsFilePath = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components/wd-config-provider/type.ts')
-const scssFilePath = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components/common/abstracts/test.scss')
+const tsFilePath = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts')
+const scssFilePath = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss')
 
 const variables = extractSCSSVariables(scssFilePath)
 const tsContent = generateTSFileContent(variables)

build/release.js

@@ -1,10 +1,10 @@
 /*
  * @Author: weisheng
  * @Date: 2022-11-01 17:12:57
- * @LastEditTime: 2024-01-01 22:23:31
+ * @LastEditTime: 2024-10-10 13:41:19
  * @LastEditors: weisheng
  * @Description: 组件发版问答
- * @FilePath: /wot-design-uni/build/release.js
+ * @FilePath: \wot-design-uni\build\release.js
  * 记得注释
  */
 const inquirer = require('inquirer')
@@ -95,6 +95,7 @@ inquirer
     package.version = newVersion
     writeFileSync(path.resolve(src, 'package.json'), JSON.stringify(package))
     // 生成制品
+    execSync('node build/buildThemeVars.js')
     execSync('pnpm lint')
     execSync('git add -A ')
     execSync(`git commit -am "build: compile ${newVersion}"`)

docs/guide/introduction.md

@@ -35,7 +35,7 @@
 - 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等.
 - 🚀 70+ 个高质量组件，覆盖移动端主流场景.
 - 💪 使用 Typescript 构建，提供良好的组件类型系统.
-- 🌍 支持国际化，内置 6 种语言包.
+- 🌍 支持国际化，内置 15 种语言包.
 - 📖 提供丰富的文档和组件示例.
 - 🎨 支持修改 CSS 变量实现主题定制.
 - 🍭 支持暗黑模式

docs/index.md

@@ -37,7 +37,7 @@ features:
     details: 使用 Typescript 构建，提供良好的组件类型系统。
   - icon: 🌍
     title: 支持国际化
-    details: 支持国际化，内置 6 种语言包。
+    details: 支持国际化，内置 15 种语言包。
   - icon: 📖
     title: 提供丰富的文档和组件示例
     details: 文档和组件示例为开发者提供稳定的后勤保障。

package.json

@@ -1,6 +1,7 @@
 {
   "name": "wot-design-uni",
   "version": "1.3.12",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/Moonofweisheng/wot-design-uni.git"

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -87,6 +87,8 @@ $-size-side-padding: var(--wot-size-side-padding, 15px) !default; // 屏幕两
 
 /*-------------------------------- Theme color application size.  end --------------------------------*/
 
+/* component var */
+
 /* action-sheet */
 $-action-sheet-weight: var(--wot-action-sheet-weight, 500) !default; // 面板字重
 $-action-sheet-radius: var(--wot-action-sheet-radius, 16px) !default; // 面板圆角大小
@@ -954,4 +956,3 @@ $-floating-panel-bar-height: var(--wot-floating-panel-bar-height, 3px) !default;
 $-floating-panel-bar-bg: var(--wot-floating-panel-bar-bg, $-color-gray-5) !default; // bar 背景色
 $-floating-panel-bar-radius: var(--wot-floating-panel-bar-radius, 4px) !default; // bar 圆角
 $-floating-panel-content-bg: var(--wot-floating-panel-content-bg, $-color-white) !default; // 内容背景色
-// $-floating-panel-content-font-color: var(--wot-floating-panel-content-font-color, $-font-gray-1) !default; // 内容字体颜色

src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts

@@ -125,74 +125,59 @@ export type badgeThemeVars = {
 
 export type buttonThemeVars = {
   buttonDisabledOpacity?: string
-
   buttonSmallHeight?: string
   buttonSmallPadding?: string
   buttonSmallFs?: string
   buttonSmallRadius?: string
   buttonSmallLoading?: string
-
   buttonMediumHeight?: string
   buttonMediumPadding?: string
   buttonMediumFs?: string
   buttonMediumRadius?: string
   buttonMediumLoading?: string
   buttonMediumBoxShadowSize?: string
-
   buttonLargeHeight?: string
   buttonLargePadding?: string
   buttonLargeFs?: string
   buttonLargeRadius?: string
   buttonLargeLoading?: string
   buttonLargeBoxShadowSize?: string
-
   buttonIconFs?: string
   buttonIconSize?: string
   buttonIconColor?: string
   buttonIconDisabledColor?: string
-
   buttonNormalColor?: string
   buttonNormalDisabledColor?: string
-
   buttonPlainBgColor?: string
-
   buttonPrimaryColor?: string
   buttonPrimaryBgColor?: string
   buttonPrimaryBoxShadowColor?: string
-
   buttonSuccessColor?: string
   buttonSuccessBgColor?: string
   buttonSuccessBoxShadowColor?: string
-
   buttonInfoColor?: string
   buttonInfoBgColor?: string
   buttonInfoPlainBorderColor?: string
   buttonInfoPlainNormalColor?: string
-
   buttonWarningColor?: string
   buttonWarningBgColor?: string
   buttonWarningBoxShadowColor?: string
-
   buttonErrorColor?: string
   buttonErrorBgColor?: string
   buttonErrorBoxShadowColor?: string
-
   buttonTextHoverOpacity?: string
 }
 
 export type cellThemeVars = {
   cellPadding?: string
   cellLineHeight?: string
-
   cellGroupTitleFs?: string
   cellGroupPadding?: string
   cellGroupTitleColor?: string
   cellGroupValueFs?: string
   cellGroupValueColor?: string
-
   cellWrapperPadding?: string
   cellWrapperPaddingLarge?: string
-
   cellWrapperPaddingWithLabel?: string
   cellIconRight?: string
   cellIconSize?: string
@@ -205,11 +190,9 @@ export type cellThemeVars = {
   cellArrowSize?: string
   cellArrowColor?: string
   cellTapBg?: string
-
   cellTitleFsLarge?: string
   cellLabelFsLarge?: string
   cellIconSizeLarge?: string
-
   cellRequiredColor?: string
   cellRequiredSize?: string
   cellVerticalTop?: string
@@ -246,16 +229,13 @@ export type checkboxThemeVars = {
   checkboxLabelFs?: string
   checkboxLabelColor?: string
   checkboxCheckedColor?: string
-
   checkboxDisabledColor?: string
   checkboxDisabledLabelColor?: string
   checkboxDisabledCheckColor?: string
   checkboxDisabledCheckBg?: string
   checkboxSquareRadius?: string
-
   checkboxLargeSize?: string
   checkboxLargeLabelFs?: string
-
   checkboxButtonHeight?: string
   checkboxButtonMinWidth?: string
   checkboxButtonRadius?: string
@@ -292,7 +272,6 @@ export type dropMenuThemeVars = {
   dropMenuColor?: string
   dropMenuFs?: string
   dropMenuArrowFs?: string
-
   dropMenuSidePadding?: string
   dropMenuDisabledColor?: string
   dropMenuItemHeight?: string
@@ -335,7 +314,6 @@ export type inputThemeVars = {
   inputCountColor?: string
   inputCountCurrentColor?: string
   inputBg?: string
-
   inputCellBg?: string
   inputCellBorderColor?: string
   inputCellPadding?: string
@@ -447,16 +425,13 @@ export type pickerThemeVars = {
   pickerColumnSelectBg?: string
   pickerLoadingButtonColor?: string
   pickerColumnPadding?: string
-
   pickerColumnDisabledColor?: string
   pickerMask?: string
   pickerLoadingBg?: string
   pickerRegionSeparatorColor?: string
   pickerCellArrowSizeLarge?: string
-
   pickerRegionColor?: string
   pickerRegionBgActiveColor?: string
-
   pickerRegionFs?: string
 }
 
@@ -516,10 +491,8 @@ export type radioThemeVars = {
   radioCheckedColor?: string
   radioDisabledColor?: string
   radioDisabledLabelColor?: string
-
   radioLargeSize?: string
   radioLargeLabelFs?: string
-
   radioButtonHeight?: string
   radioButtonMinWidth?: string
   radioButtonMaxWidth?: string
@@ -528,7 +501,6 @@ export type radioThemeVars = {
   radioButtonFs?: string
   radioButtonBorder?: string
   radioButtonDisabledBorder?: string
-
   radioDotSize?: string
   radioDotLargeSize?: string
   radioDotCheckedBg?: string
@@ -786,17 +758,14 @@ export type swiperThemeVars = {
 }
 
 export type swiperNavThemeVars = {
-  // dot & dots-bar
   swiperNavDotColor?: string
   swiperNavDotActiveColor?: string
   swiperNavDotSize?: string
   swiperNavDotsBarActiveWidth?: string
-  // fraction
   swiperNavFractionColor?: string
   swiperNavFractionBgColor?: string
   swiperNavFractionHeight?: string
   swiperNavFractionFontSize?: string
-  // button
   swiperNavBtnColor?: string
   swiperNavBtnBgColor?: string
   swiperNavBtnSize?: string
@@ -886,6 +855,26 @@ export type countDownThemeVars = {
   countDownLineHeight?: string
 }
 
+export type keyboardThemeVars = {
+  keyboardKeyHeight?: string
+  keyboardKeyFontSize?: string
+  keyboardKeyBackground?: string
+  keyboardKeyBorderRadius?: string
+  keyboardDeleteFontSize?: string
+  keyboardKeyActiveColor?: string
+  keyboardButtonTextColor?: string
+  keyboardButtonBackground?: string
+  keyboardButtonActiveOpacity?: string
+  keyboardBackground?: string
+  keyboardTitleHeight?: string
+  keyboardTitleColor?: string
+  keyboardTitleFontSize?: string
+  keyboardClosePadding?: string
+  keyboardCloseColor?: string
+  keyboardCloseFontSize?: string
+  keyboardIconSize?: string
+}
+
 export type numberKeyboardThemeVars = {
   numberKeyboardKeyHeight?: string
   numberKeyboardKeyFontSize?: string
@@ -959,6 +948,18 @@ export type imgCropperThemeVars = {
   imgCropperIconColor?: string
 }
 
+export type floatingPanelThemeVars = {
+  floatingPanelBg?: string
+  floatingPanelRadius?: string
+  floatingPanelZIndex?: string
+  floatingPanelHeaderHeight?: string
+  floatingPanelBarWidth?: string
+  floatingPanelBarHeight?: string
+  floatingPanelBarBg?: string
+  floatingPanelBarRadius?: string
+  floatingPanelContentBg?: string
+}
+
 export type ConfigProviderThemeVars = baseThemeVars &
   actionSheetThemeVars &
   badgeThemeVars &
@@ -1013,6 +1014,7 @@ export type ConfigProviderThemeVars = baseThemeVars &
   sidebarItemThemeVars &
   fabThemeVars &
   countDownThemeVars &
+  keyboardThemeVars &
   numberKeyboardThemeVars &
   passwodInputThemeVars &
   formItemThemeVars &
@@ -1020,4 +1022,5 @@ export type ConfigProviderThemeVars = baseThemeVars &
   indexBarThemeVars &
   textThemeVars &
   videoPreviewThemeVars &
-  imgCropperThemeVars
+  imgCropperThemeVars &
+  floatingPanelThemeVars

src/uni_modules/wot-design-uni/components/wd-floating-panel/index.scss

@@ -59,7 +59,6 @@
     flex: 1;
     min-width: 0;
     min-height: 0;
-    // color: $-floating-panel-content-font-color;
     background-color: $-floating-panel-content-bg;
   }
 }

src/uni_modules/wot-design-uni/package.json

@@ -1 +1 @@
-{"id":"wot-design-uni","name":"wot-design-uni","displayName":"wot-design-uni 基于vue3+Typescript的高颜值组件库","version":"1.3.12","description":"一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。","keywords":["wot-design-uni","国际化","组件库","vue3","暗黑模式"],"main":"index.ts","repository":{"type":"git","url":"https://github.com/Moonofweisheng/wot-design-uni.git"},"engines":{"HBuilderX":"^3.8.7"},"dcloudext":{"type":"component-vue","sale":{"regular":{"price":"0.00"},"sourcecode":{"price":"0.00"}},"contact":{"qq":""},"declaration":{"ads":"无","data":"插件不采集任何数据","permissions":"无"},"npmurl":"https://www.npmjs.com/package/wot-design-uni"},"uni_modules":{"dependencies":[],"encrypt":[],"platforms":{"cloud":{"tcb":"y","aliyun":"y"},"client":{"Vue":{"vue2":"n","vue3":"y"},"App":{"app-vue":"y","app-nvue":"u"},"H5-mobile":{"Safari":"y","Android Browser":"y","微信浏览器(Android)":"y","QQ浏览器(Android)":"y"},"H5-pc":{"Chrome":"u","IE":"u","Edge":"u","Firefox":"u","Safari":"u"},"小程序":{"微信":"y","阿里":"y","百度":"u","字节跳动":"u","QQ":"u","钉钉":"y","快手":"u","飞书":"u","京东":"u"},"快应用":{"华为":"u","联盟":"u"}}}},"peerDependencies":{"vue":">=3.2.47"}}
+{"id":"wot-design-uni","name":"wot-design-uni","displayName":"wot-design-uni 基于vue3+Typescript的高颜值组件库","version":"1.3.12","license": "MIT","description":"一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。","keywords":["wot-design-uni","国际化","组件库","vue3","暗黑模式"],"main":"index.ts","repository":{"type":"git","url":"https://github.com/Moonofweisheng/wot-design-uni.git"},"engines":{"HBuilderX":"^3.8.7"},"dcloudext":{"type":"component-vue","sale":{"regular":{"price":"0.00"},"sourcecode":{"price":"0.00"}},"contact":{"qq":""},"declaration":{"ads":"无","data":"插件不采集任何数据","permissions":"无"},"npmurl":"https://www.npmjs.com/package/wot-design-uni"},"uni_modules":{"dependencies":[],"encrypt":[],"platforms":{"cloud":{"tcb":"y","aliyun":"y"},"client":{"Vue":{"vue2":"n","vue3":"y"},"App":{"app-vue":"y","app-nvue":"u"},"H5-mobile":{"Safari":"y","Android Browser":"y","微信浏览器(Android)":"y","QQ浏览器(Android)":"y"},"H5-pc":{"Chrome":"u","IE":"u","Edge":"u","Firefox":"u","Safari":"u"},"小程序":{"微信":"y","阿里":"y","百度":"u","字节跳动":"u","QQ":"u","钉钉":"y","快手":"u","飞书":"u","京东":"u"},"快应用":{"华为":"u","联盟":"u"}}}},"peerDependencies":{"vue":">=3.2.47"}}

src/uni_modules/wot-design-uni/readme.md

@@ -55,7 +55,7 @@
 - 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等.
 - 🚀 70+ 个高质量组件，覆盖移动端主流场景.
 - 💪 使用 Typescript 构建，提供良好的组件类型系统.
-- 🌍 支持国际化，内置 6 种语言包.
+- 🌍 支持国际化，内置 15 种语言包.
 - 📖 提供丰富的文档和组件示例.
 - 🎨 支持修改 CSS 变量实现主题定制.
 - 🍭 支持暗黑模式