choo-taro-ui-vue3/lib/list/item/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, toRefs, createCommentVNode, resolveComponent, createVNode, withCtx, openBlock, createBlock, normalizeClass, normalizeStyle, toDisplayString, createTextVNode, mergeProps } from 'vue';
import { useIconStyle, useIconClasses } from '../../composables';

const AtListItem = defineComponent({
  name: "AtListItem",
  emits: ["click", "switch-change"],
  props: {
    note: String,
    title: { type: String, default: "" },
    thumb: String,
    extraText: String,
    extraThumb: String,
    switchColor: { type: String, default: "#6190E8" },
    disabled: Boolean,
    isSwitch: Boolean,
    switchChecked: Boolean,
    hasBorder: Boolean,
    iconInfo: Object,
    arrow: {
      type: String,
      validator: (prop) => ["up", "down", "right"].includes(prop)
    }
  },
  setup(props, { emit }) {
    const rootClasses = computed(() => ["at-list__item", {
      "at-list__item--thumb": props.thumb,
      "at-list__item--multiple": props.note,
      "at-list__item--disabled": props.disabled,
      "at-list__item--no-border": !props.hasBorder
    }]);
    const { iconStyle } = useIconStyle(props.iconInfo, "", 24);
    const { iconClasses } = useIconClasses(props.iconInfo, true);
    const arrowClasses = computed(() => {
      if (!props.arrow)
        return {};
      let arrow = "right";
      if (["up", "down"].includes(props.arrow)) {
        arrow = props.arrow;
      }
      return {
        [`at-icon-chevron-${arrow}`]: Boolean(props.arrow)
      };
    });
    function handleClick(e) {
      if (!props.disabled) {
        emit("click", e);
      }
    }
    function handleSwitchClick(e) {
      e.stopPropagation();
    }
    function handleSwitchChange(e) {
      if (!props.disabled) {
        emit("switch-change", e);
      }
    }
    return {
      ...toRefs(props),
      rootClasses,
      iconStyle,
      iconClasses,
      arrowClasses,
      handleClick,
      handleSwitchClick,
      handleSwitchChange
    };
  }
});

// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _createVNode = createVNode, _withCtx = withCtx, _openBlock = openBlock, _createBlock = createBlock, _normalizeClass = normalizeClass, _normalizeStyle = normalizeStyle, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _mergeProps = mergeProps;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_image = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-image") : "image";
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";
  const _component_taro_switch = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-switch") : "switch";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, {
    class: _ctx.rootClasses,
    onTap: _ctx.handleClick
  }), {
    default: _withCtx(() => [
      _createVNode(_component_taro_view, { class: "at-list__item-container" }, {
        default: _withCtx(() => [
          _createCommentVNode(" thumb "),
          (_ctx.thumb)
            ? (_openBlock(), _createBlock(_component_taro_view, {
                key: 0,
                class: "item-thumb at-list__item-thumb"
              }, {
                default: _withCtx(() => [
                  _createVNode(_component_taro_image, {
                    class: "item-thumb__info",
                    mode: "scaleToFill",
                    src: _ctx.thumb
                  }, null, 8 /* PROPS */, ["src"])
                ]),
                _: 1 /* STABLE */
              }))
            : _createCommentVNode("v-if", true),
          _createCommentVNode(" icon "),
          (_ctx.iconInfo && _ctx.iconInfo.value)
            ? (_openBlock(), _createBlock(_component_taro_view, {
                key: 1,
                class: "item-icon at-list__item-icon"
              }, {
                default: _withCtx(() => [
                  _createVNode(_component_taro_view, {
                    class: _normalizeClass(_ctx.iconClasses),
                    style: _normalizeStyle(_ctx.iconStyle)
                  }, null, 8 /* PROPS */, ["class", "style"])
                ]),
                _: 1 /* STABLE */
              }))
            : _createCommentVNode("v-if", true),
          _createCommentVNode(" content "),
          _createVNode(_component_taro_view, { class: "item-content at-list__item-content" }, {
            default: _withCtx(() => [
              _createVNode(_component_taro_view, { class: "item-content__info" }, {
                default: _withCtx(() => [
                  _createVNode(_component_taro_view, { class: "item-content__info-title" }, {
                    default: _withCtx(() => [
                      _createTextVNode(_toDisplayString(_ctx.title), 1 /* TEXT */)
                    ]),
                    _: 1 /* STABLE */
                  }),
                  (_ctx.note)
                    ? (_openBlock(), _createBlock(_component_taro_view, {
                        key: 0,
                        class: "item-content__info-note"
                      }, {
                        default: _withCtx(() => [
                          _createTextVNode(_toDisplayString(_ctx.note), 1 /* TEXT */)
                        ]),
                        _: 1 /* STABLE */
                      }))
                    : _createCommentVNode("v-if", true)
                ]),
                _: 1 /* STABLE */
              })
            ]),
            _: 1 /* STABLE */
          }),
          _createCommentVNode(" extra items "),
          _createVNode(_component_taro_view, { class: "item-extra at-list__item-extra" }, {
            default: _withCtx(() => [
              _createCommentVNode(" extra text "),
              (_ctx.extraText)
                ? (_openBlock(), _createBlock(_component_taro_view, {
                    key: 0,
                    class: "item-extra__info"
                  }, {
                    default: _withCtx(() => [
                      _createTextVNode(_toDisplayString(_ctx.extraText), 1 /* TEXT */)
                    ]),
                    _: 1 /* STABLE */
                  }))
                : _createCommentVNode("v-if", true),
              _createCommentVNode(" extra image "),
              (_ctx.extraThumb && !_ctx.extraText)
                ? (_openBlock(), _createBlock(_component_taro_view, {
                    key: 1,
                    class: "item-extra__image"
                  }, {
                    default: _withCtx(() => [
                      _createVNode(_component_taro_image, {
                        class: "item-extra__image-info",
                        mode: "aspectFit",
                        src: _ctx.extraThumb
                      }, null, 8 /* PROPS */, ["src"])
                    ]),
                    _: 1 /* STABLE */
                  }))
                : _createCommentVNode("v-if", true),
              _createCommentVNode(" extra switch "),
              (_ctx.isSwitch && !_ctx.extraThumb && !_ctx.extraText)
                ? (_openBlock(), _createBlock(_component_taro_view, {
                    key: 2,
                    class: "item-extra__switch",
                    onTap: _cache[0] || (_cache[0] = e => _ctx.handleSwitchClick(e))
                  }, {
                    default: _withCtx(() => [
                      _createVNode(_component_taro_switch, {
                        color: _ctx.switchColor,
                        disabled: _ctx.disabled,
                        checked: _ctx.switchChecked,
                        onChange: _ctx.handleSwitchChange
                      }, null, 8 /* PROPS */, ["color", "disabled", "checked", "onChange"])
                    ]),
                    _: 1 /* STABLE */
                  }))
                : _createCommentVNode("v-if", true),
              _createCommentVNode(" extra icon - arrow "),
              (_ctx.arrow)
                ? (_openBlock(), _createBlock(_component_taro_view, {
                    key: 3,
                    class: "item-extra__icon"
                  }, {
                    default: _withCtx(() => [
                      _createVNode(_component_taro_view, {
                        class: _normalizeClass(['at-icon', 'item-extra__icon-arrow', _ctx.arrowClasses])
                      }, null, 8 /* PROPS */, ["class"])
                    ]),
                    _: 1 /* STABLE */
                  }))
                : _createCommentVNode("v-if", true)
            ]),
            _: 1 /* STABLE */
          })
        ]),
        _: 1 /* STABLE */
      })
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class", "onTap"]))
}


AtListItem.render = _sfc_render;

export default AtListItem;