framework7-vue/components/chip.js

Build full featured iOS & Android apps using Framework7 & Vue

import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock } from "vue";
const _hoisted_1 = {
  key: 1,
  class: "chip-label"
};
function render(_ctx, _cache) {
  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
  return _openBlock(), _createElementBlock("div", {
    ref: "elRef",
    class: _normalizeClass(_ctx.classes)
  }, [_ctx.hasMedia ? (_openBlock(), _createElementBlock("div", {
    key: 0,
    class: _normalizeClass(_ctx.mediaClasses)
  }, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
    key: 0,
    icon: _ctx.icon
  }, null, 8, ["icon"])) : _createCommentVNode("", true), _createTextVNode(" " + _toDisplayString(_ctx.media) + " ", 1), _renderSlot(_ctx.$slots, "media")], 2)) : _createCommentVNode("", true), _ctx.hasLabel ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "text"), _renderSlot(_ctx.$slots, "default")])) : _createCommentVNode("", true), _ctx.deleteable ? (_openBlock(), _createElementBlock("a", {
    key: 2,
    class: "chip-delete",
    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onDeleteClick && _ctx.onDeleteClick(...args))
  })) : _createCommentVNode("", true)], 2);
}
import { ref, computed } from 'vue';
import { classNames } from '../shared/utils.js';
import { colorClasses, colorProps, iconProps } from '../shared/mixins.js';
import { useTooltip } from '../shared/use-tooltip.js';
import { useIcon } from '../shared/use-icon.js';
import f7UseIcon from './use-icon.js';
export default {
  name: 'f7-chip',
  render,
  components: {
    f7UseIcon
  },
  props: {
    media: String,
    text: [String, Number],
    deleteable: Boolean,
    mediaBgColor: String,
    mediaTextColor: String,
    outline: Boolean,
    tooltip: String,
    tooltipTrigger: String,
    ...iconProps,
    ...colorProps
  },
  emits: ['delete'],
  setup(props, {
    slots,
    emit
  }) {
    const elRef = ref(null);
    const onDeleteClick = event => {
      emit('delete', event);
    };
    useTooltip(elRef, props);
    const icon = computed(() => useIcon(props));
    const mediaClasses = computed(() => classNames('chip-media', props.mediaTextColor && `text-color-${props.mediaTextColor}`, props.mediaBgColor && `bg-color-${props.mediaBgColor}`));
    const classes = computed(() => classNames('chip', {
      'chip-outline': props.outline
    }, colorClasses(props)));
    const hasLabel = computed(() => {
      return props.text || slots && (slots.text || slots.default);
    });
    const hasMedia = computed(() => {
      return props.media || icon.value || slots && slots.media;
    });
    return {
      classes,
      icon,
      mediaClasses,
      elRef,
      hasLabel,
      hasMedia,
      onDeleteClick
    };
  }
};