<commit_before>/**
 * @file KLTabs       选项卡
 * @author   sensen(<EMAIL>)
 */

const Component = require('../../../ui-base/component');
const template = require('./index.html');
const _ = require('../../../ui-base/_');

/**
 * @class KLTabs
 * @extend Component
 * @param {object}        [options.data]                      = 绑定属性
 * @param {string}        [options.data.type=line]            => 显示类型,card/line
 * @param {object}        [options.data.selected=null]        <=> 当前选择卡
 * @param {string}        [options.data.titleTemplate=null]   @=> 标题模板
 * @param {string}        [options.data.defaultKey=null]      => 默认显示对应 key 的 Tab
 * @param {boolean}       [options.data.readonly=false]       => 是否只读
 * @param {boolean}       [options.data.disabled=false]       => 是否禁用
 * @param {boolean}       [options.data.visible=true]         => 是否显示
 * @param {string}        [options.data.class]                => 补充class
 */

/**
 * @class KLTab
 * @extend Component
 * @param {object}        [options.data]                      = 绑定属性
 * @param {string}        [options.data.title]             => 标题
 * @param {string}        [options.data.key=null]             => key 标识
 */

const KLTabs = Component.extend({
  name: 'kl-tabs',
  template: _.compressHtml(template),
  config() {
    _.extend(this.data, {
      tabs: [],
      selected: undefined,
      titleTemplate: null,
      offset: 0,
      navStyle: {
        transform: 'translateX(0)',
      },
      type: 'line',
      crtTabElem: null,
    });
    this.supr();

    this.$watch('selected', (newValue) => {
      /**
       * @event KLTabs#change 选项卡改变时触发
       * @property {object} sender 事件发送对象
       * @property {object} selected 改变后的选项卡
       */
      this.$emit('change', {
        sender: this,
        selected: newValue,
        key: newValue.data.key,
      });
    });
  },
  init() {
    this.supr();
    this._update = this.update.bind(this);

    window.addEventListener('resize', this._update);
  },
  events: {
    $init() {
      setTimeout(() => {
        this.update();
      }, 500);
    },
  },
  update() {
    const wrap = this.$refs.wrap;
    const nav = this.$refs.nav;
    if (!wrap || !nav) {
      return false;
    }
    const wrapWidth = wrap.offsetWidth;
    const navWidth = nav.scrollWidth;
    const currentOffset = this.data.offset;
    if (wrapWidth < navWidth) {
      this.data.scrollable = this.data.scrollable || {};
      this.data.scrollable.prev = currentOffset;
      this.data.scrollable.next = (currentOffset + wrapWidth) < navWidth;
      if (navWidth - currentOffset < wrapWidth) {
        this.setOffset(navWidth - wrapWidth);
      }<commit_msg>修改Tab初始化时的滚动条件更新检测机制<commit_after>/**
 * @file KLTabs       选项卡
 * @author   sensen(<EMAIL>)
 */

const Component = require('../../../ui-base/component');
const template = require('./index.html');
const _ = require('../../../ui-base/_');

/**
 * @class KLTabs
 * @extend Component
 * @param {object}        [options.data]                      = 绑定属性
 * @param {string}        [options.data.type=line]            => 显示类型,card/line
 * @param {object}        [options.data.selected=null]        <=> 当前选择卡
 * @param {string}        [options.data.titleTemplate=null]   @=> 标题模板
 * @param {string}        [options.data.defaultKey=null]      => 默认显示对应 key 的 Tab
 * @param {boolean}       [options.data.readonly=false]       => 是否只读
 * @param {boolean}       [options.data.disabled=false]       => 是否禁用
 * @param {boolean}       [options.data.visible=true]         => 是否显示
 * @param {string}        [options.data.class]                => 补充class
 */

/**
 * @class KLTab
 * @extend Component
 * @param {object}        [options.data]                      = 绑定属性
 * @param {string}        [options.data.title]             => 标题
 * @param {string}        [options.data.key=null]             => key 标识
 */

const KLTabs = Component.extend({
  name: 'kl-tabs',
  template: _.compressHtml(template),
  config() {
    _.extend(this.data, {
      tabs: [],
      selected: undefined,
      titleTemplate: null,
      offset: 0,
      navStyle: {
        transform: 'translateX(0)',
      },
      type: 'line',
      crtTabElem: null,
    });
    this.supr();

    this.$watch('selected', (newValue) => {
      /**
       * @event KLTabs#change 选项卡改变时触发
       * @property {object} sender 事件发送对象
       * @property {object} selected 改变后的选项卡
       */
      this.$emit('change', {
        sender: this,
        selected: newValue,
        key: newValue.data.key,
      });
    });
  },
  init() {
    this.supr();
    this._update = this.update.bind(this);

    window.addEventListener('resize', this._update);
  },
  events: {
    $init() {
      // 初始化时检查 $refs.wrap 和 $refs.nav 是否已经加载了
      // 给个最大次数防止一直执行
      let count = 0;
      let interval = setInterval(() => {
        if (count >= 20) {
          interval && clearInterval(interval);
          interval = null;
          return;
        }
        count += 1;
        if (!this.$refs.wrap || !this.$refs.nav) {
          return;
        }
        this.update();
      }, 100);
    },
  },
  update() {
    const wrap = this.$refs.wrap;
    const nav = this.$refs.nav;
    if (!wrap || !nav) {
      return false;
    }
    const wrapWidth = wrap.offsetWidth;
    const navWidth = nav.scrollWidth;
    const currentOffset = this.data.offset;
    if (wrapWidth < navWidth) {
      this.data.scrollable = this.data.scrollable || {};
      this.data.scrollable.prev = currentOffset;
      this.data.scrollable.next = (currentOffset + wrapWidth) < navWidth;
      if (navWidth - currentOffset < wrapWidth) {
        this.setOffset(navWidth - wrapWidth);
      }
{'fraction_non_alphanumeric': 0.15915915915915915, 'fraction_numerical': 0.0024730612965907085, 'mean_word_length': 1.9941829719725013, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 30, 'https://': 0, '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': '4659932', 'n_tokens_mistral': 1907, 'n_tokens_neox': 1941, 'n_words': 359}