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

tdesign-mobile-vue

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var config = require('../config.js');
var picker_picker_class = require('./picker.class.js');
var hooks_useClass = require('../hooks/useClass.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('@babel/runtime/helpers/defineProperty');
require('../shared/dom.js');
require('lodash/isFunction');
require('lodash/isString');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('lodash/isArray');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-a20a5149.js');
require('dayjs');

var prefix = config["default"].prefix;
var PickerItem = vue.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 = hooks_useClass.usePrefixClass("picker-item");
    var picker = null;
    var root = vue.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 = vue.computed(function () {
      return "".concat(pickerItemClass.value);
    });
    var itemClassName = vue.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
    });
    vue.onMounted(function () {
      if (root.value) {
        picker = new picker_picker_class["default"]({
          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);
          }
        });
      }
    });
    vue.watch(function () {
      return props.options;
    }, function () {
      var _picker3;
      (_picker3 = picker) === null || _picker3 === void 0 || _picker3.updateItems();
    }, {
      flush: "post",
      deep: true
    });
    return function () {
      return vue.createVNode("ul", {
        "ref": root,
        "class": className.value
      }, [(props.options || []).map(function (option, index) {
        return vue.createVNode("li", {
          "key": index,
          "class": itemClassName.value
        }, [context.slots.option ? context.slots.option(option, index) : vue.createVNode(vue.Fragment, null, [props.renderLabel ? props.renderLabel(option) : option === null || option === void 0 ? void 0 : option.label])]);
      })]);
    };
  }
});

exports["default"] = PickerItem;
//# sourceMappingURL=picker-item.js.map