drip-ui/es/picker/index.js

Lightweight Mobile UI Components built on Vue

import create from '../utils/create';
import PickerSlot from './pickerSlot';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "picker",
      "class": {
        'picker-3d': _vm.rotateEffect
      }
    }, [_vm.showToolbar ? _c('div', {
      staticClass: "picker-toolbar"
    }, [_vm._t("default")], 2) : _vm._e(), _c('div', {
      staticClass: "picker-items"
    }, [_vm._l(_vm.slots, function (slot, index) {
      return _c('picker-slot', {
        key: index,
        attrs: {
          "checkKey": _vm.checkKey,
          "valueKey": _vm.valueKey,
          "values": slot.values || [],
          "text-align": slot.textAlign || 'center',
          "visible-item-count": _vm.visibleItemCount,
          "class-name": slot.className,
          "flex": slot.flex,
          "rotate-effect": _vm.rotateEffect,
          "divider": slot.divider,
          "content": slot.content,
          "highlightHeight": _vm.highlightHeight,
          "itemHeight": _vm.itemHeight,
          "default-index": slot.defaultIndex
        },
        model: {
          value: _vm.values[slot.valueIndex],
          callback: function callback($$v) {
            _vm.$set(_vm.values, slot.valueIndex, $$v);
          },
          expression: "values[slot.valueIndex]"
        }
      });
    }), _c('div', {
      staticClass: "picker-center-highlight",
      style: {
        height: _vm.highlightHeight + 'PX',
        marginTop: -_vm.highlightHeight / 2 + 'PX'
      }
    })], 2)]);
  },
  name: 'picker',
  componentName: 'picker',
  props: {
    slots: {
      type: Array
    },
    showToolbar: {
      type: Boolean,
      "default": false
    },
    visibleItemCount: {
      type: Number,
      "default": 5
    },
    valueKey: String,
    checkKey: {
      type: String,
      "default": 'value'
    },
    rotateEffect: {
      type: Boolean,
      "default": false
    },
    itemHeight: {
      type: Number,
      "default": 36
    },
    highlightHeight: {
      type: Number,
      "default": 50
    }
  },
  created: function created() {
    this.renderUpdated();
  },
  methods: {
    renderUpdated: function renderUpdated() {
      var _this = this;

      this.$on('slotValueChange', this.slotValueChange);
      var slots = this.slots || [];
      this.values = [];
      var values = this.values;
      var valueIndexCount = 0;
      slots.forEach(function (slot) {
        if (!slot.divider) {
          slot.valueIndex = valueIndexCount++;
          values[slot.valueIndex] = (slot.values || [])[slot.defaultIndex || 0];

          _this.slotValueChange();
        }
      });
    },
    slotValueChange: function slotValueChange() {
      this.$emit('change', this, this.values);
    },
    getSlot: function getSlot(slotIndex) {
      var slots = this.slots || [];
      var count = 0;
      var target;
      var children = this.$children.filter(function (child) {
        return child.$options.name === 'drip-picker-slot';
      });
      slots.forEach(function (slot, index) {
        if (!slot.divider) {
          if (slotIndex === count) {
            target = children[index];
          }

          count++;
        }
      });
      return target;
    },
    getSlotValue: function getSlotValue(index) {
      var slot = this.getSlot(index);

      if (slot) {
        return slot.value;
      }

      return null;
    },
    setSlotValue: function setSlotValue(index, value) {
      var slot = this.getSlot(index);

      if (slot) {
        slot.currentValue = value;
      }
    },
    getSlotValues: function getSlotValues(index) {
      var slot = this.getSlot(index);

      if (slot) {
        return slot.mutatingValues;
      }

      return null;
    },
    setSlotValues: function setSlotValues(index, values) {
      var slot = this.getSlot(index);

      if (slot) {
        slot.mutatingValues = values;
      }
    },
    getValues: function getValues() {
      return this.values;
    },
    setValues: function setValues(values) {
      var _this2 = this;

      var slotCount = this.slotCount;
      values = values || [];

      if (slotCount !== values.length) {
        throw new Error('values length is not equal slot count.');
      }

      values.forEach(function (value, index) {
        _this2.setSlotValue(index, value);
      });
    }
  },
  computed: {
    values: {
      get: function get() {
        var slots = this.slots || [];
        var values = [];
        slots.forEach(function (slot) {
          if (!slot.divider) values.push(slot.value);
        });
        return values;
      },
      set: function set(values) {
        var slots = this.slots || [];
        var valueIndexCount = 0;
        slots.forEach(function (slot) {
          if (!slot.divider) {
            slots.value = values[valueIndexCount];
            valueIndexCount = valueIndexCount + 1;
          }
        });
      }
    },
    slotCount: function slotCount() {
      var slots = this.slots || [];
      var result = 0;
      slots.forEach(function (slot) {
        if (!slot.divider) result++;
      });
      return result;
    }
  },
  components: {
    PickerSlot: PickerSlot
  }
});