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

tdesign-mobile-vue

/**
 * tdesign v1.9.3
 * (c) 2025 TDesign Group
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, inject, computed, ref, onMounted, watch, createVNode, Fragment, nextTick } from 'vue';
import { get } from 'lodash-es';
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 '../shared/dom.js';
import './utils.js';
import '../config-provider/useConfig.js';
import '../config-provider/context.js';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-f785f3d3.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-0d44b254.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
    },
    swipeDuration: {
      type: [String, Number],
      default: 300
    }
  },
  emits: ["pick"],
  setup: function setup(props, context) {
    var pickerItemClass = usePrefixClass("picker-item");
    var pickerProps = inject("picker", void 0);
    var keys = computed(function () {
      var _pickerProps$keys;
      return pickerProps && ((_pickerProps$keys = pickerProps.keys) === null || _pickerProps$keys === void 0 ? void 0 : _pickerProps$keys.value);
    });
    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) {
          var _keys$value$value, _keys$value;
          return get(item, (_keys$value$value = (_keys$value = keys.value) === null || _keys$value === void 0 ? void 0 : _keys$value.value) !== null && _keys$value$value !== void 0 ? _keys$value$value : "value") === val;
        });
      }
      return defaultIndex < 0 ? 0 : defaultIndex;
    };
    var className = computed(function () {
      return "".concat(pickerItemClass.value);
    });
    var updatePickerWithNextTick = function updatePickerWithNextTick(index) {
      if (picker) {
        picker.updateItems();
        nextTick(function () {
          picker.updateIndex(index, {
            isChange: false
          });
        });
      }
    };
    var setIndex = function setIndex(index) {
      updatePickerWithNextTick(index);
    };
    var setValue = function setValue(value) {
      var index = getIndexByValue(value);
      updatePickerWithNextTick(index);
    };
    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,
          keys: keys.value,
          defaultPickerColumns: props.options,
          onChange: function onChange(index) {
            var _keys$value$value2, _keys$value2, _props$onPick;
            var curItem = props.options[index];
            var changeValue = {
              value: get(curItem, (_keys$value$value2 = (_keys$value2 = keys.value) === null || _keys$value2 === void 0 ? void 0 : _keys$value2.value) !== null && _keys$value$value2 !== void 0 ? _keys$value$value2 : "value"),
              index: index
            };
            (_props$onPick = props.onPick) === null || _props$onPick === void 0 || _props$onPick.call(props, changeValue);
          },
          swipeDuration: props.swipeDuration
        });
      }
    });
    watch(function () {
      return props.options;
    }, function () {
      var _picker3, _picker4;
      (_picker3 = picker) === null || _picker3 === void 0 || _picker3.updateOptions(props.options);
      (_picker4 = picker) === null || _picker4 === void 0 || _picker4.updateItems();
    }, {
      flush: "post",
      deep: true
    });
    return function () {
      return createVNode("ul", {
        "ref": root,
        "class": className.value
      }, [(props.options || []).map(function (option, index) {
        var _keys$value$disabled, _keys$value3, _keys$value$label, _keys$value4;
        return createVNode("li", {
          "key": index,
          "class": ["".concat(pickerItemClass.value, "__item"), _defineProperty({}, "".concat(pickerItemClass.value, "__item--disabled"), get(option, (_keys$value$disabled = (_keys$value3 = keys.value) === null || _keys$value3 === void 0 ? void 0 : _keys$value3.disabled) !== null && _keys$value$disabled !== void 0 ? _keys$value$disabled : "disabled"))]
        }, [context.slots.option ? context.slots.option(option, index) : createVNode(Fragment, null, [props.renderLabel ? props.renderLabel(option) : get(option, (_keys$value$label = (_keys$value4 = keys.value) === null || _keys$value4 === void 0 ? void 0 : _keys$value4.label) !== null && _keys$value$label !== void 0 ? _keys$value$label : "label")])]);
      })]);
    };
  }
});

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