ivue-material-plus

Version:

A high quality UI components Library with Vue.js

1 lines • 6.47 kB

Source Map (JSON)

{"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;;;;;;;"}