tdesign-mobile-vue/lib/picker/picker-item.js

tdesign-mobile-vue

/**
 * tdesign v1.7.0
 * (c) 2024 TDesign Group
 * @license MIT
 */

import { defineComponent, ref, computed, onMounted, watch, createVNode, Fragment } from 'vue';
import config from '../config.js';
import Picker from './picker.class.js';
import { usePrefixClass } from '../hooks/useClass.js';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/defineProperty';
import '../shared/dom.js';
import 'lodash/isFunction';
import 'lodash/isString';
import '../config-provider/useConfig.js';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import 'lodash/isArray';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-eb734424.js';
import 'dayjs';

var prefix = config.prefix;
var PickerItem = defineComponent({
  name: "".concat(prefix, "-picker-item"),
  props: {
    options: {
      type: Array
    },
    value: {
      type: [String, Number],
      default: void 0
    },
    renderLabel: {
      type: Function,
      default: void 0
    },
    onPick: {
      type: Function,
      default: void 0
    }
  },
  emits: ["pick"],
  setup: function setup(props, context) {
    var pickerItemClass = usePrefixClass("picker-item");
    var picker = null;
    var root = ref();
    var getIndexByValue = function getIndexByValue(val) {
      var defaultIndex = 0;
      if (val !== void 0) {
        var _props$options;
        defaultIndex = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.findIndex(function (item) {
          return (item === null || item === void 0 ? void 0 : item.value) === val;
        });
      }
      return defaultIndex < 0 ? 0 : defaultIndex;
    };
    var className = computed(function () {
      return "".concat(pickerItemClass.value);
    });
    var itemClassName = computed(function () {
      return ["".concat(pickerItemClass.value, "__item")];
    });
    var setIndex = function setIndex(index) {
      if (picker) {
        picker.updateItems();
        picker.updateIndex(index, {
          isChange: false
        });
      }
    };
    var setValue = function setValue(value) {
      if (picker) {
        picker.updateItems();
        picker.updateIndex(getIndexByValue(value), {
          isChange: false
        });
      }
    };
    var setOptions = function setOptions() {
      var _picker;
      (_picker = picker) === null || _picker === void 0 || _picker.update();
    };
    var setUpdateItems = function setUpdateItems() {
      var _picker2;
      (_picker2 = picker) === null || _picker2 === void 0 || _picker2.updateItems();
    };
    context.expose({
      setIndex: setIndex,
      setValue: setValue,
      setOptions: setOptions,
      setUpdateItems: setUpdateItems
    });
    onMounted(function () {
      if (root.value) {
        picker = new Picker({
          el: root.value,
          defaultIndex: getIndexByValue(props.value) || 0,
          onChange: function onChange(index) {
            var _props$onPick;
            var curItem = props.options[index];
            var changeValue = {
              value: curItem.value,
              index: index
            };
            (_props$onPick = props.onPick) === null || _props$onPick === void 0 || _props$onPick.call(props, changeValue);
          }
        });
      }
    });
    watch(function () {
      return props.options;
    }, function () {
      var _picker3;
      (_picker3 = picker) === null || _picker3 === void 0 || _picker3.updateItems();
    }, {
      flush: "post",
      deep: true
    });
    return function () {
      return createVNode("ul", {
        "ref": root,
        "class": className.value
      }, [(props.options || []).map(function (option, index) {
        return createVNode("li", {
          "key": index,
          "class": itemClassName.value
        }, [context.slots.option ? context.slots.option(option, index) : createVNode(Fragment, null, [props.renderLabel ? props.renderLabel(option) : option === null || option === void 0 ? void 0 : option.label])]);
      })]);
    };
  }
});

export { PickerItem as default };
//# sourceMappingURL=picker-item.js.map