feat(relase) sync relase to dev (#1306)

* fix(pager): [pager] change pager content to unicode (#1251)

* fix(build): fix build error and update versions

* fix(build): update theme version

* fix(vue): [grid] fix show icon condition (#1259)

* docs(grid): [grid] fix grid docs (#1260)

* docs(grid): [grid] fix grid docs

* docs(grid): [grid] fix grid docs

* fix(vue-common): fix process env error (#1277)

* fix(vue-common): fix process env error

* fix(vue-common): fix process env error

* fix(vue-common): fix process env error

* fix(modal): fix modal process env error

* fix(select): [dialog-box, select] fix select async emit form validate (#1292)

* fix(theme): x-design style css var fix (#1286)

---------

Co-authored-by: gimmyhehe <975402925@qq.com>

examples/sites/demos/pc/app/dialog-box/form-in-dialog-composition-api.vue

@@ -29,6 +29,12 @@
             >
           </tiny-checkbox-group>
         </tiny-form-item>
+        <tiny-form-item label="技能" prop="skill" required>
+          <tiny-select v-model="value">
+            <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </tiny-option>
+          </tiny-select>
+        </tiny-form-item>
       </tiny-form>
       <template #footer>
         <tiny-button type="primary" :loading="btnSubmit.loading" @click="handleSubmit">{{
@@ -51,9 +57,18 @@ import {
   RadioGroup as TinyRadioGroup,
   Checkbox as TinyCheckbox,
   CheckboxGroup as TinyCheckboxGroup,
-  Notify
+  Notify,
+  Option as TinyOption,
+  Select as TinySelect
 } from '@opentiny/vue'
 
+const options = ref([
+  { value: 'js', label: 'js' },
+  { value: 'java', label: 'java' }
+])
+
+const value = ref('')
+
 const btnSubmit = ref({
   loading: false,
   text: {

examples/sites/demos/pc/app/dialog-box/form-in-dialog.spec.ts

@@ -6,11 +6,17 @@ test('弹窗表单', async ({ page }) => {
   const dialogBox = page.locator('.tiny-dialog-box')
   await page.getByRole('button', { name: '弹出表单' }).click()
   await expect(dialogBox.locator('.tiny-form')).toBeVisible()
-  await page.locator('#form-in-dialog').getByRole('textbox').click()
-  await page.locator('#form-in-dialog').getByRole('textbox').fill('123456')
+  await page.locator('#form-in-dialog').getByRole('textbox').first().click()
+  await page.locator('#form-in-dialog').getByRole('textbox').first().fill('123456')
   await page.locator('label').filter({ hasText: '全部' }).locator('span').nth(1).click()
   await page.locator('label').filter({ hasText: '架构' }).locator('span').nth(1).click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.getByRole('button', { name: '弹出表单' }).click()
   await expect(dialogBox.locator('.tiny-form')).toBeVisible()
+
+  // 验证下拉选择校验提示不会异常
+  await page.locator('#form-in-dialog').locator('.tiny-select__tags-group').click()
+  await page.locator('#form-in-dialog').locator('.tiny-svg.tiny-dialog-box__close').first().click()
+  await page.waitForTimeout(200)
+  await expect(page.locator('.tiny-form__valid.tiny-tooltip')).not.toBeVisible()
 })

examples/sites/demos/pc/app/dialog-box/form-in-dialog.vue

@@ -29,6 +29,12 @@
             >
           </tiny-checkbox-group>
         </tiny-form-item>
+        <tiny-form-item label="技能" prop="skill" required>
+          <tiny-select v-model="value">
+            <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </tiny-option>
+          </tiny-select>
+        </tiny-form-item>
       </tiny-form>
       <template #footer>
         <tiny-button type="primary" :loading="btnSubmit.loading" @click="handleSubmit">{{
@@ -50,7 +56,9 @@ import {
   RadioGroup,
   Checkbox,
   CheckboxGroup,
-  Notify
+  Notify,
+  Select,
+  Option
 } from '@opentiny/vue'
 
 export default {
@@ -63,10 +71,17 @@ export default {
     TinyRadio: Radio,
     TinyRadioGroup: RadioGroup,
     TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxGroup: CheckboxGroup,
+    TinySelect: Select,
+    TinyOption: Option
   },
   data() {
     return {
+      options: [
+        { value: 'js', label: 'js' },
+        { value: 'java', label: 'java' }
+      ],
+      value: '',
       btnSubmit: {
         loading: false,
         text: {

packages/renderless/src/select/index.ts

@@ -572,9 +572,9 @@ export const handleBlur =
       } else {
         emit('blur', event)
       }
-
-      dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event?.target?.value)
     }, 200)
+    // 表单校验不能异步，否则弹窗中嵌套表单会出现弹窗关闭后再出现校验提示的bug
+    dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event?.target?.value)
 
     state.softFocus = false
   }

packages/theme/src/pager/smb-theme.js

@@ -5,7 +5,7 @@ export const tinyPagerSmbTheme = {
   'ti-pager-height': '32px',
   'ti-pager-input-height': '32px',
   'ti-pager-poplist-item-padding-horizontal': '8px',
-  'ti-pager-active-font-color': 'var(--ti-common-color-text-link)',
+  'ti-pager-active-font-color': 'var(--ti-common-color-text-primary)',
   'ti-pager-li-item-hover-text-color': 'var(--ti-pager-text-color)',
   'ti-pager-goto-btn-text-hover-color': 'var(--ti-common-color-selected-text-color)',
   'ti-pager-total-font-size': '14px',

packages/theme/src/radio-button/vars.less

@@ -17,13 +17,13 @@
   --ti-radio-button-border-radius: var(--ti-common-border-radius-normal, 2px);
   --ti-radio-button-font-size: var(--ti-common-font-size-base, 12px);
   --ti-radio-button-bg-color: var(--ti-common-color-light, #fff);
-  --ti-radio-button-checked-normal-bg-color: var(--ti-base-color-brand-6, #5e7ce0);
-  --ti-radio-button-checked-normal-border-color: var(--ti-base-color-brand-6, #5e7ce0);
-  --ti-radio-button-checked-normal-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-6, #5e7ce0);
-  --ti-radio-button-checked-hover-bg-color: var(--ti-base-color-brand-5, #7693f5);
-  --ti-radio-button-checked-hover-border-color: var(--ti-base-color-brand-5, #7693f5);
-  --ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-5, #7693f5);
+  --ti-radio-button-checked-normal-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
+  --ti-radio-button-checked-normal-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
+  --ti-radio-button-checked-normal-box-shadow: -1px 0 0 0 var(--ti-common-color-primary-normal, #5e7ce0);
+  --ti-radio-button-checked-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
+  --ti-radio-button-checked-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
+  --ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 var(--ti-common-color-primary-hover, #7693f5);
   --ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
-  --ti-radio-button-disabled-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
+  --ti-radio-button-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
   --ti-radio-button-medium-font-size: var(--ti-common-font-size-1, 14px);
 }

packages/vue-common/src/index.ts

@@ -140,6 +140,7 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
   const globalDesignConfig: DesignConfig = hooks.inject(design.configKey, {})
   const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
 
+  const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
   const utils = {
     $prefix,
     t,
@@ -147,7 +148,7 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
     designConfig,
     globalDesignConfig
   }
-  if (process.env.TINY_MODE !== 'pc') {
+  if (specifyPc !== 'pc') {
     utils.mergeClass = mergeClass
   }
 
@@ -169,7 +170,7 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
     dp: utils.defineParentInstanceProperties,
     gcls: (key) => getElementCssClass(classes, key)
   }
-  if (process.env.TINY_MODE !== 'pc') {
+  if (specifyPc !== 'pc') {
     attrs.m = mergeClass
   }
   /**
@@ -220,7 +221,8 @@ export const svg = ({ name = 'Icon', component }) => {
           const attrs = isVue3 ? tinyTag : { attrs: tinyTag }
           let className = 'tiny-svg'
 
-          if (process.env.TINY_MODE !== 'pc' && isMobileFirst) {
+          const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
+          if (specifyPc !== 'pc' && isMobileFirst) {
             className = mergeClass('h-4 w-4 inline-block', customClass || '', mergeProps.class || '')
           }
 

packages/vue/src/modal/index.ts

@@ -132,7 +132,8 @@ setupComponent.TINYModal = {
     const isVue2 = !!Vue.component
     const tinyMode = isVue2 ? Vue.prototype.tiny_mode : Vue.config.globalProperties.tiny_mode
     const tinyTheme = isVue2 ? Vue.prototype.tiny_theme : Vue.config.globalProperties.tiny_theme
-    TINYModal.tiny_mode = process.env.TINY_MODE || (tinyMode && tinyMode.value)
+    const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
+    TINYModal.tiny_mode = specifyPc || (tinyMode && tinyMode.value)
     TINYModal.tiny_theme = tinyTheme && tinyTheme.value
 
     TINYModal.installed = true