feat(config-provider): config-provider adds theme configuration function

examples/sites/demos/apis/config-provider.js

@@ -38,6 +38,20 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'tag'
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '--',
+          meta: {
+            stable: '3.23.0'
+          },
+          desc: {
+            'zh-CN': '自定义主题色,格式：{data:{"tv-base-color-brand":"#595959",....}}',
+            'en-US': 'Customized theme color, in {data:"tv-base-color-brand":"#595959",....} format.'
+          },
+          mode: ['pc'],
+          pcDemo: 'theme'
         }
       ],
       events: [],

examples/sites/demos/apis/tabs.js

@@ -138,6 +138,17 @@ export default {
           pcDemo: 'size',
           mfDemo: ''
         },
+        {
+          name: 'swipeable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否开启滑动内容切换标签页',
+            'en-US': 'Do you want to enable the sliding content switching tab function'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'swipeable'
+        },
         {
           name: 'stretch',
           type: 'boolean',

examples/sites/demos/mobile-first/app/tabs/swipeable.vue

@@ -0,0 +1,50 @@
+<template>
+  <tiny-tabs v-model="activeName" class="select-none" :optimized="false" swipeable>
+    <tiny-tab-item title="表单组件" name="first">
+      <div class="flex w-fit">
+        <div class="bg-color-bg-1 w-96 h-60 mr-4">
+          表单组件,具有与用户交互，并可完成数据采集功能的控件。--tab 1 item 1
+        </div>
+        <div class="bg-color-bg-2 w-96 h-60 mr-4">
+          表单组件,具有与用户交互，并可完成数据采集功能的控件。--tab 1 item 2
+        </div>
+        <div class="bg-color-bg-3 w-96 h-60 mr-4">
+          表单组件,具有与用户交互，并可完成数据采集功能的控件。--tab 1 item 3
+        </div>
+        <div class="bg-color-bg-4 w-96 h-60 mr-4">
+          表单组件,具有与用户交互，并可完成数据采集功能的控件。--tab 1 item 4
+        </div>
+        <div class="bg-color-bg-5 w-96 h-60 mr-4">
+          表单组件,具有与用户交互，并可完成数据采集功能的控件。--tab 1 item 5
+        </div>
+      </div>
+    </tiny-tab-item>
+    <tiny-tab-item title="数据组件" name="second">
+      <div class="bg-color-bg-6 w-full h-60 mr-4">
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。--tab 2
+      </div>
+    </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third">
+      <div class="bg-color-bg-7 w-full h-60 mr-4">导航组件,帮助网站访问者浏览站点的组件。--tab 3</div>
+    </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth">
+      <div class="bg-color-bg-8 w-full h-60 mr-4">业务组件,与业务紧密相关实现某种业务功能的组件集。--tab 4</div>
+    </tiny-tab-item>
+  </tiny-tabs>
+</template>
+
+<script>
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTabs,
+    TinyTabItem
+  },
+  data() {
+    return {
+      activeName: 'first'
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/tabs/webdoc/tabs.js

@@ -29,6 +29,19 @@ export default {
       },
       codeFiles: ['align-center.vue']
     },
+    {
+      demoId: 'swipeable',
+      name: {
+        'zh-CN': '滑动切换内容',
+        'en-US': 'Slide to switch content'
+      },
+      desc: {
+        'zh-CN':
+          '<p>在关闭优化渲染并且所有标签项都不开启延时加载时，可通过 <code>:swipeable=true</code> 开启滑动内容切换标签页。在此模式下，标签项内容区可以是一个水平滚动列表，参考示例中 `表单组件` 标签项。</p>',
+        'en-US': `<p>When optimizing rendering is turned off and all label items do not enable lazy loading, you can use<code>: swift=true</code>to enable sliding content to switch tabs. In this mode, the tag item content area can be a horizontally scrolling list, as shown in the example of the 'form component' tag item.</p>`
+      },
+      codeFiles: ['swipeable.vue']
+    },
     {
       demoId: 'tab-style-card',
       name: {

examples/sites/demos/pc/app/config-provider/theme-composition-api.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <tiny-button @click="changeTheme" style="margin-bottom: 20px">改变主题颜色</tiny-button>
+    <tiny-button type="success" @click="resetTheme" style="margin-bottom: 20px">重置主题颜色</tiny-button>
+    <tiny-config-provider :theme="theme">
+      <tiny-button type="primary">主题色按钮</tiny-button>
+    </tiny-config-provider>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyConfigProvider, TinyButton } from '@opentiny/vue'
+
+const theme = ref({
+  data: {}
+})
+
+function changeTheme() {
+  theme.value = {
+    data: {
+      'tv-base-color-brand': 'green'
+    }
+  }
+}
+
+function resetTheme() {
+  theme.value = {
+    data: {
+      'tv-base-color-brand': '#191919'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-config-provider {
+  padding: 1em;
+  border: 1px solid #ccc;
+  border-radius: 1em;
+}
+</style>

examples/sites/demos/pc/app/config-provider/theme.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <tiny-button @click="changeTheme" style="margin-bottom: 20px">改变主题颜色</tiny-button>
+    <tiny-button type="success" @click="resetTheme" style="margin-bottom: 20px">重置主题颜色</tiny-button>
+    <tiny-config-provider :theme="theme">
+      <tiny-button type="primary">主题色按钮</tiny-button>
+    </tiny-config-provider>
+  </div>
+</template>
+
+<script>
+import { TinyConfigProvider, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyConfigProvider,
+    TinyButton
+  },
+  data() {
+    return {
+      theme: {
+        data: {}
+      }
+    }
+  },
+  methods: {
+    changeTheme() {
+      this.theme = {
+        data: {
+          'tv-base-color-brand': 'green'
+        }
+      }
+    },
+    resetTheme() {
+      this.theme = {
+        data: {
+          'tv-base-color-brand': '#191919'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-config-provider {
+  padding: 1em;
+  border: 1px solid #ccc;
+  border-radius: 1em;
+}
+</style>

examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js

@@ -43,6 +43,18 @@ export default {
         'en-US': 'Container labels can be customized through<code>tag</code>.'
       },
       codeFiles: ['tag.vue']
+    },
+    {
+      demoId: 'theme',
+      name: {
+        'zh-CN': '自定义主题色',
+        'en-US': 'Custom Colors'
+      },
+      desc: {
+        'zh-CN': '可通过<code>theme</code>属性设置自定义主题色常量。',
+        'en-US': 'You can use the <code>theme</code> property to set a custom theme color constant.'
+      },
+      codeFiles: ['theme.vue']
     }
   ],
   features: [

packages/utils/src/common/index.ts

@@ -308,3 +308,27 @@ export const CASCADER: Record<string, any> = {
   PropsHover: 'hoverThreshold',
   MenuConnector: 'cascader-menu-'
 }
+
+/**
+ * 检查对象是否具有任何一个指定的键
+ * @param obj 需要检查的对象
+ * @param keys 需要检查的键的数组
+ * @return 如果对象具有任何一个指定的键，返回true，否则返回false
+ */
+export const hasAnyKey = (obj: any, keys: string[]): boolean => {
+  if (obj == null) {
+    return false
+  }
+
+  if (keys.length === 0) {
+    return false
+  }
+
+  for (const key of keys) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      return true
+    }
+  }
+
+  return false
+}

packages/vue/src/config-provider/package.json

@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
+    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/utils": "workspace:~"
   },
   "license": "MIT"
 }

packages/vue/src/config-provider/src/index.vue

@@ -4,6 +4,32 @@ import type { PropType } from '@opentiny/vue-common'
 import type { Tag, TextDirection, breakPoint } from './props'
 import { configProviderContextKey } from '../index'
 import '@opentiny/vue-theme/config-provider/index.less'
+import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
+import { isObject } from '@opentiny/utils'
+
+/**
+ * 检查对象是否具有任何一个指定的键
+ * @param obj 需要检查的对象
+ * @param keys 需要检查的键的数组
+ * @return 如果对象具有任何一个指定的键，返回true，否则返回false
+ */
+const hasAnyKey = (obj: any, keys: string[]): boolean => {
+  if (obj == null) {
+    return false
+  }
+
+  if (keys.length === 0) {
+    return false
+  }
+
+  for (const key of keys) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      return true
+    }
+  }
+
+  return false
+}
 
 export default defineComponent({
   name: $prefix + 'ConfigProvider',
@@ -42,6 +68,12 @@ export default defineComponent({
         }
       }
     },
+    theme: {
+      type: Object,
+      default: () => {
+        return null
+      }
+    },
     ..._props
       .map((item) => {
         return {
@@ -58,8 +90,28 @@ export default defineComponent({
       })
   },
   setup(props, { slots }) {
-    const { direction, design } = hooks.toRefs(props)
+    const { direction, design, theme } = hooks.toRefs(props)
     provideDesignConfig(design)
+    hooks.watch(
+      () => theme.value,
+      () => {
+        if (isObject(theme.value) && hasAnyKey(theme.value, ['data'])) {
+          const themeTool = new TinyThemeTool()
+          themeTool.changeTheme(theme.value)
+        }
+
+        if (isObject(theme.value) && !hasAnyKey(theme.value, ['data'])) {
+          console.warn(`configProvider组件的theme属性对象请配置data属性。e.g { data: {'tv-base-color-brand': '#000'}}`)
+        }
+
+        if (theme.value && !isObject(theme.value)) {
+          console.warn(`configProvider组件的theme属性请配置对象格式数据`)
+        }
+      },
+      {
+        immediate: true
+      }
+    )
     const isRTL = hooks.computed(() => direction.value === 'rtl')
     const cssVar = hooks.computed(() => {
       return {

packages/vue/src/config-provider/src/props.ts

@@ -20,4 +20,5 @@ export interface ConfigProviderProps {
     enable?: boolean
     name?: string
   }
+  theme?: Object | null
 }