<commit_before><template>
    <article class="ion-tabs tabs" :class="[modeClass,colorClass]"
             :tabsLayout="tabsLayout"
             :tabsHighlight="tabsHighlight"
             :tabsPlacement="tabsPlacement">
        <section class="tabs-content" ref="tabsContent">
            <!--tabbar-->
            <div class="tabbar" role="tablist" ref="tabbar" :tabsLayout="tabsLayout">
                <slot name="tab"></slot>
                <div ref="tabHighlight" class="tab-highlight"></div>
            </div>
            <!--tabs-content-wrap-->
            <div ref="tabsContentWrap" class="tabs-content-wrap">
                <section class="wrap-inner">
                    <slot></slot>
                </section>
            </div>
        </section>
    </article>
</template>
<style lang="less">
    @import "tabs";
    @import "tabs.ios.less";
    @import "tabs.md.less";
</style>
<script type="text/javascript">
  /**
   * @component Tabs
   * @description
   *
   * ## 大标签 / Tabs
   *
   * ### 概述
   *
   * Tabs是一个使用`$router.replace`进行页面导航的组件，其中Tab组件中传入`props`定义每个tab的结构/样式/路由位子等信息。 Tabs使用场景类似于"栏目切换"， 如果你使用的是IOS手机，请参考"App Store"应用。下图也许能更直观的表达Tabs的职责范围。
   *
   * ![tabs的设计](https://github.com/vm-component/Vimo/blob/master/dev/static/img/tabs.png?raw=true)
   *
   * ### 使用规则
   *
   * 1. Tabs和Tab必须组合使用
   * 2. Tab组件需要增加`slot="tab"`插槽标记
   * 3. Tabs组件必须在Page组件中，而且子路由也是一个Page包裹的页面
   * 4. 页面路由插槽`<router-view></router-view>`写在Tabs中，是否开启`keep-alive`由业务自己决定
   * 5. 页面进入究竟激活那个子页面由路由规则决定
   * 6. `tabsHighlight`特性只能在`md`模式下使用
   *
   *
   * @props {String=} color                        - 颜色
   * @props {String} [mode='ios']                  - 模式
   * @props {Boolean} [tabsHighlight='false']      - tab下面是否显示选中bar
   * @props {String} [tabsLayout='icon-top']       - tabbar的样式，可选配置: icon-top, icon-left, icon-right, icon-bottom, icon-hide, title-hide.
   * @props {String} [tabsPlacement='bottom']      - tabbar的位置，可选配置: top, bottom
   *
   * @slot tab - Tab组件的插槽
   *
   * @fires component:Tabs#onTabChange
   *
   * @demo #/tabs
   * @usage
   *
   * <Page>
   *    <Tabs tabsLayout="icon-top" tabsPlacement="bottom" @onTabChange="onTabChange" ref=tabs>
   *        <router-view></router-view>
   *        <Tab slot="tab" :to="{name:'tabsBottom.demoTab1'}" tabBadge="13" tabTitle="User" tabBadgeStyle="danger" tabIcon="person"></Tab>
   *        <Tab slot="tab" :to="{name:'tabsBottom.demoTab2'}" tabBadge="2" tabTitle="Cars" tabBadgeStyle="dark" tabIcon="car"></Tab>
   *        <Tab slot="tab" :to="{name:'tabsBottom.demoTab3'}" tabBadge="7" tabTitle="Star" tabIcon="star" :enabled="true"></Tab>
   *    </Tabs>
   * </Page>
   *
   * ...
   * computed: {
   *   tabsComponent () {
   *    // 获取tabs的实例
   *    return this.$refs.tabs
   *   }
   * },
   * methods: {
   *    onTabChange(index){
   *      console.debug('事件 -> onTabChange-selectedIndex:' + index);
   *      console.debug('当前选择index的tab实例:')
   *      console.debug(this.tabsComponent.getByIndex(index))
   *      console.debug('获取当前在激活状态的tab实例:')
   *      console.debug(this.tabsComponent.getSelected())
   *      console.debug('由Tabs组件获取当前激活的index:' + this.tabsComponent.getActivatedIndex());
   *      console.debug('3s后选择第一个')
   *      clearTimeout(this.timer)
   *      this.timer = setTimeout(()=>{
   *        this.tabsComponent.select(0)
   *      },3000)
   *    },
   *  },
   *
   * */
  import { parsePxUnit, firstUpperCase, setElementClass } from '../util/util'
  import css from '../util/getCss'

  export default {
    name: 'Tabs',
    props: {
      color: [String],
      mode: {
        type: String,<commit_msg>chore: Tabs引用资源修改<commit_after><template>
    <article class="ion-tabs tabs" :class="[modeClass,colorClass]"
             :tabsLayout="tabsLayout"
             :tabsHighlight="tabsHighlight"
             :tabsPlacement="tabsPlacement">
        <section class="tabs-content" ref="tabsContent">
            <!--tabbar-->
            <div class="tabbar" role="tablist" ref="tabbar" :tabsLayout="tabsLayout">
                <slot name="tab"></slot>
                <div ref="tabHighlight" class="tab-highlight"></div>
            </div>
            <!--tabs-content-wrap-->
            <div ref="tabsContentWrap" class="tabs-content-wrap">
                <section class="wrap-inner">
                    <slot></slot>
                </section>
            </div>
        </section>
    </article>
</template>
<style lang="less">
    @import "tabs";
    @import "tabs.ios.less";
    @import "tabs.md.less";
</style>
<script type="text/javascript">
  /**
   * @component Tabs
   * @description
   *
   * ## 大标签 / Tabs
   *
   * ### 概述
   *
   * Tabs是一个使用`$router.replace`进行页面导航的组件，其中Tab组件中传入`props`定义每个tab的结构/样式/路由位子等信息。 Tabs使用场景类似于"栏目切换"， 如果你使用的是IOS手机，请参考"App Store"应用。下图也许能更直观的表达Tabs的职责范围。
   *
   * ![tabs的设计](https://github.com/vm-component/Vimo/blob/master/dev/static/img/tabs.png?raw=true)
   *
   * ### 使用规则
   *
   * 1. Tabs和Tab必须组合使用
   * 2. Tab组件需要增加`slot="tab"`插槽标记
   * 3. Tabs组件必须在Page组件中，而且子路由也是一个Page包裹的页面
   * 4. 页面路由插槽`<router-view></router-view>`写在Tabs中，是否开启`keep-alive`由业务自己决定
   * 5. 页面进入究竟激活那个子页面由路由规则决定
   * 6. `tabsHighlight`特性只能在`md`模式下使用
   *
   *
   * @props {String=} color                        - 颜色
   * @props {String} [mode='ios']                  - 模式
   * @props {Boolean} [tabsHighlight='false']      - tab下面是否显示选中bar
   * @props {String} [tabsLayout='icon-top']       - tabbar的样式，可选配置: icon-top, icon-left, icon-right, icon-bottom, icon-hide, title-hide.
   * @props {String} [tabsPlacement='bottom']      - tabbar的位置，可选配置: top, bottom
   *
   * @slot tab - Tab组件的插槽
   *
   * @fires component:Tabs#onTabChange
   *
   * @demo #/tabs
   * @usage
   *
   * <Page>
   *    <Tabs tabsLayout="icon-top" tabsPlacement="bottom" @onTabChange="onTabChange" ref=tabs>
   *        <router-view></router-view>
   *        <Tab slot="tab" :to="{name:'tabsBottom.demoTab1'}" tabBadge="13" tabTitle="User" tabBadgeStyle="danger" tabIcon="person"></Tab>
   *        <Tab slot="tab" :to="{name:'tabsBottom.demoTab2'}" tabBadge="2" tabTitle="Cars" tabBadgeStyle="dark" tabIcon="car"></Tab>
   *        <Tab slot="tab" :to="{name:'tabsBottom.demoTab3'}" tabBadge="7" tabTitle="Star" tabIcon="star" :enabled="true"></Tab>
   *    </Tabs>
   * </Page>
   *
   * ...
   * computed: {
   *   tabsComponent () {
   *    // 获取tabs的实例
   *    return this.$refs.tabs
   *   }
   * },
   * methods: {
   *    onTabChange(index){
   *      console.debug('事件 -> onTabChange-selectedIndex:' + index);
   *      console.debug('当前选择index的tab实例:')
   *      console.debug(this.tabsComponent.getByIndex(index))
   *      console.debug('获取当前在激活状态的tab实例:')
   *      console.debug(this.tabsComponent.getSelected())
   *      console.debug('由Tabs组件获取当前激活的index:' + this.tabsComponent.getActivatedIndex());
   *      console.debug('3s后选择第一个')
   *      clearTimeout(this.timer)
   *      this.timer = setTimeout(()=>{
   *        this.tabsComponent.select(0)
   *      },3000)
   *    },
   *  },
   *
   * */
  import { parsePxUnit, firstUpperCase, setElementClass } from '../util/util'
  import css from '../util/get-css'

  export default {
    name: 'Tabs',
    props: {
      color: [String],
      mode: {
        type: String,
{'fraction_non_alphanumeric': 0.17294166321886636, 'fraction_numerical': 0.0052406564611777685, 'mean_word_length': 2.5186802523047063, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 81, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5797135', 'n_tokens_mistral': 2868, 'n_tokens_neox': 2919, 'n_words': 356}