{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-chip/index.vue"],"sourcesContent":["<template>\r\n  <div :class=\"classes\" :style=\"styles\" v-show=\"modelValue\">\r\n    <span :class=\"`${prefixCls}-content`\">\r\n      <!-- 内容 -->\r\n      <slot></slot>\r\n      <!-- 关闭按钮 -->\r\n      <slot name=\"icon\">\r\n        <div :class=\"`${prefixCls}-close`\" v-show=\"close\">\r\n          <ivue-icon @click.stop=\"handleClose\">{{ closeIcon }}</ivue-icon>\r\n        </div>\r\n      </slot>\r\n    </span>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { computed, defineComponent } from 'vue';\r\nimport IvueIcon from '../ivue-icon/index.vue';\r\nimport { isString } from '@vue/shared';\r\n\r\n// utils\r\nimport { isCssColor } from '../../utils/helpers';\r\n\r\n// type\r\nimport { Props, ColorStyle, BgStyle, Styles } from './types/chip';\r\n\r\nconst prefixCls = 'ivue-chip';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: ['update:modelValue'],\r\n  props: {\r\n    /**\r\n     * v-model\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    modelValue: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    /**\r\n     * 字体颜色\r\n     *\r\n     * @type {String}\r\n     */\r\n    textColor: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 颜色\r\n     *\r\n     * @type {String | Array}\r\n     */\r\n    color: {\r\n      type: [String, Array],\r\n    },\r\n    /**\r\n     * 是否禁用\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    disabled: {\r\n      type: Boolean,\r\n    },\r\n    /**\r\n     * 显示轮廓\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    outline: {\r\n      type: Boolean,\r\n    },\r\n    /**\r\n     * 正方形边框\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    square: {\r\n      type: Boolean,\r\n    },\r\n    /**\r\n     * 是否可关闭\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    close: {\r\n      type: Boolean,\r\n    },\r\n    /**\r\n     * 关闭图标\r\n     *\r\n     * @type {String}\r\n     */\r\n    closeIcon: {\r\n      type: String,\r\n      default: 'cancel',\r\n    },\r\n    /**\r\n     * 保持其背景颜色，但没有框阴影\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    depressed: {\r\n      type: Boolean,\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // computed\r\n\r\n    // 外层样式\r\n    const classes = computed(() => {\r\n      const textColor = props.textColor || (props.outline && props.color);\r\n\r\n      const obj = {\r\n        [prefixCls]: true,\r\n        // 禁用\r\n        [`${prefixCls}--disabled`]: props.disabled,\r\n        // 显示轮廓\r\n        [`${prefixCls}--outline`]: props.outline,\r\n        // 正方形边框\r\n        [`${prefixCls}--square`]: props.square,\r\n        // 关闭按钮\r\n        [`${prefixCls}--close`]: props.close,\r\n        // 是否使用hover效果\r\n        [`${prefixCls}--depressed`]: !props.depressed,\r\n      };\r\n\r\n      // 文字样式\r\n      const isTextColor = setTextColor(textColor);\r\n\r\n      if (isTextColor.color && !isCssColor(isTextColor.color)) {\r\n        obj[isTextColor.color] = true;\r\n      }\r\n\r\n      // 背景样式\r\n      if (isString(props.color)) {\r\n        obj[props.color] = true;\r\n      }\r\n\r\n      return obj;\r\n    });\r\n\r\n    // 外层样式\r\n    const styles = computed(() => {\r\n      const textColor = props.textColor || (props.outline && props.color);\r\n\r\n      let obj: Styles = {};\r\n\r\n      // 文字样式\r\n      const isTextColor = setTextColor(textColor);\r\n\r\n      if (isTextColor.color && isCssColor(isTextColor.color)) {\r\n        obj.color = isTextColor.color;\r\n      }\r\n\r\n      // 背景样式\r\n      if (props.color) {\r\n        obj = {\r\n          ...obj,\r\n          ...setBackgroundColor(props.color),\r\n        };\r\n      }\r\n\r\n      return obj;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 设置背景颜色\r\n    const setBackgroundColor = (color: string | string[]): BgStyle => {\r\n      let style: BgStyle = {};\r\n\r\n      // 是否是数组\r\n      if (Array.isArray(color)) {\r\n        style = {\r\n          background: `linear-gradient(135deg,${color[0]} 0%, ${color[1]} 100%)`,\r\n        };\r\n      } else if (isCssColor(color)) {\r\n        style = {\r\n          backgroundColor: `${color}`,\r\n        };\r\n      }\r\n\r\n      return style;\r\n    };\r\n\r\n    // 设置文字颜色\r\n    const setTextColor = (color: string | string[]): ColorStyle => {\r\n      let style: ColorStyle = {};\r\n\r\n      // 是否是数组\r\n      if (Array.isArray(color)) {\r\n        style = {\r\n          color: `${color[0]}`,\r\n        };\r\n      } else if (isCssColor(color)) {\r\n        style = {\r\n          color: `${color}`,\r\n        };\r\n      } else if (color) {\r\n        const [colorName] = color.toString().trim().split(' ', 2);\r\n\r\n        style = {\r\n          color: `${colorName}--text`,\r\n        };\r\n      }\r\n\r\n      return style;\r\n    };\r\n\r\n    // methods\r\n\r\n    // 关闭\r\n    const handleClose = () => {\r\n      emit('update:modelValue', false);\r\n    };\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // computed\r\n      classes,\r\n      styles,\r\n\r\n      // methods\r\n      handleClose,\r\n    };\r\n  },\r\n  components: {\r\n    IvueIcon,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_withDirectives","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createCommentVNode","_renderSlot","_createElementVNode","_withModifiers"],"mappings":";;;;;gDACE,WAWM,CAAA,CAAA;AAXsB,EAAA,OAAAA,cAAA,EAAAC,SAAA,EAAQ,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,IAClC,KAAA,EASOC,cAAA,CAAA,IAAA,CAAA,MAAA,CAAA;AAAA,GAAA,EAAA;AAAA;MARL,KAAW,EAAAD,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,QAAA,CAAA,CAAA;AAAA,KACX,EAAA;AAAA,MACAE,mBAAA,gBAAA,CAAA;AAAA,MACAC,UAAA,CAIO,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,MAHLD,mBAAA,4BAAA,CAAA;AAAA,MAAAC,WAAW,IAAK,CAAA,MAAA,EAAA,MAAA,EAAA,IAAA,MAAA;AAAA,QAAAN,cAAA,CAAAO,mBAAA,KAAA,EAAA;AAAA,UACd,KAAgE,EAAAJ,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,MAAA,CAAA,CAAA;AAAA,SAAA,EAAA;AAAA;YAAZ,SAAAK,aAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,MAAA,CAAA,CAAA;AAAA,WAAA,EAAA;AAAA;;;;gBADX,CAAK,SAAA,CAAA,CAAA;AAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAA;;;OANR,CAAA,CAAA;AAAA,GAAA,EAAA,CAAA,CAAA,GAAA;AAAA;;;;;;;"}