tdesign-mobile-vue/es/picker/picker-item.mjs

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.mjs';
import Picker from './picker.class.mjs';
import { usePrefixClass } from '../hooks/useClass.mjs';
import '../_chunks/dep-f0f403be.mjs';
import '../_chunks/dep-8d37dbf8.mjs';
import '../_chunks/dep-f1766f7d.mjs';
import '../_chunks/dep-219bb5a7.mjs';
import '../_chunks/dep-620d73f7.mjs';
import '../shared/dom.mjs';
import '../_chunks/dep-91d696ea.mjs';
import '../_chunks/dep-8bf3054e.mjs';
import '../_chunks/dep-3d249f65.mjs';
import '../_chunks/dep-e6c129ab.mjs';
import '../_chunks/dep-6303c50c.mjs';
import '../_chunks/dep-019e292f.mjs';
import '../_chunks/dep-32364550.mjs';
import '../_chunks/dep-9b2de386.mjs';
import '../_chunks/dep-b9b8ead5.mjs';
import '../_chunks/dep-6c53a3e4.mjs';
import '../_chunks/dep-d2161895.mjs';
import '../_chunks/dep-89951f45.mjs';
import '../_chunks/dep-08bc7a4c.mjs';
import '../_chunks/dep-6bc862af.mjs';
import '../_chunks/dep-4931819d.mjs';
import '../_chunks/dep-10f4d030.mjs';
import '../_chunks/dep-8ee6f5cd.mjs';
import '../_chunks/dep-e57d46f3.mjs';
import '../_chunks/dep-4f44985d.mjs';
import '../_chunks/dep-b84be35c.mjs';
import '../_chunks/dep-933f3a85.mjs';
import '../_chunks/dep-2bce42ea.mjs';
import '../_chunks/dep-ac139980.mjs';
import '../_chunks/dep-154c1925.mjs';
import '../_chunks/dep-ba131d9c.mjs';
import '../_chunks/dep-007f294e.mjs';
import '../_common/js/global-config/mobile/default-config.mjs';
import '../_common/js/global-config/mobile/locale/zh_CN.mjs';
import '../_chunks/dep-161f0c44.mjs';
import '../_chunks/dep-5fd0eaa4.mjs';
import '../_chunks/dep-3c59bf72.mjs';
import '../config-provider/type.mjs';

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.mjs.map