@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 6.4 kB
Source Map (JSON)
{"version":3,"file":"icon.mjs","sources":["../../../components/icon/icon.tsx"],"sourcesContent":["import { computed, defineComponent, h, renderSlot } from 'vue'\r\n\r\nimport { useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { toNumber } from '@vexip-ui/utils'\r\nimport { iconProps } from './props'\r\n\r\nimport type { CSSProperties } from 'vue'\r\nimport type { IconPresetEffect } from './symbol'\r\n\r\nconst internalEffects = Object.freeze<IconPresetEffect[]>([\r\n 'spin-in',\r\n 'spin-out',\r\n 'pulse-in',\r\n 'pulse-out',\r\n])\r\n\r\nconst angleRE = /(^\\s*[+-]?\\d*\\.?\\d+\\s*)(deg|grad|turn|rad)?\\s*/i\r\n\r\nexport default defineComponent({\r\n name: 'Icon',\r\n props: iconProps,\r\n setup(_props, { attrs, slots }) {\r\n const props = useProps('icon', _props, {\r\n icon: {\r\n isFunc: true,\r\n default: null,\r\n static: true,\r\n },\r\n scale: 1,\r\n title: null,\r\n label: null,\r\n flip: {\r\n default: null,\r\n validator: value => ['horizontal', 'vertical', 'both'].includes(value),\r\n },\r\n effect: null,\r\n size: null,\r\n color: null,\r\n rotate: null,\r\n renderer: {\r\n default: null,\r\n isFunc: true,\r\n },\r\n })\r\n\r\n const nh = useNameHelper('icon')\r\n\r\n const className = computed(() => {\r\n let effectCls = ''\r\n\r\n if (props.effect) {\r\n effectCls = internalEffects.includes(props.effect as IconPresetEffect)\r\n ? nh.bm(props.effect)\r\n : props.effect\r\n }\r\n\r\n return {\r\n [nh.b()]: true,\r\n [nh.bm(`flip-${props.flip}`)]: props.flip,\r\n [effectCls]: effectCls,\r\n }\r\n })\r\n const computedScale = computed(() => toNumber(props.scale) || 1)\r\n const rotate = computed(() => {\r\n if (typeof props.rotate === 'number') {\r\n return `${(props.rotate % 4) / 4}turn`\r\n }\r\n\r\n const matched = props.rotate?.match(angleRE)\r\n\r\n if (!matched) return null\r\n\r\n const number = toNumber(matched[1])\r\n\r\n if (!matched[2]) {\r\n return `${(number % 4) / 4}turn`\r\n }\r\n\r\n return number ? `${number}${matched[2]}` : null\r\n })\r\n const style = computed(() => {\r\n const style: CSSProperties = {\r\n color: props.color,\r\n }\r\n\r\n if (props.size) {\r\n style.fontSize = props.size\r\n } else if (computedScale.value !== 1) {\r\n style.fontSize = `${computedScale.value}em`\r\n }\r\n\r\n if (rotate.value) {\r\n style[nh.cv('rotate')] = rotate.value\r\n }\r\n\r\n return style\r\n })\r\n\r\n function renderDefault() {\r\n const iAttrs = {\r\n class: className.value,\r\n style: style.value,\r\n title: props.title,\r\n role: (attrs.role as string) || (props.label || props.title ? 'img' : undefined),\r\n 'aria-label': props.label,\r\n 'aria-hidden': !(props.label || props.title),\r\n }\r\n\r\n if (slots.default) {\r\n return (\r\n <i {...iAttrs}>\r\n <g>{renderSlot(slots, 'default')}</g>\r\n </i>\r\n )\r\n }\r\n\r\n if (props.icon) {\r\n return (\r\n <i {...iAttrs}>\r\n <g>{h(props.icon)}</g>\r\n </i>\r\n )\r\n }\r\n\r\n return <i {...iAttrs}></i>\r\n }\r\n\r\n return () => {\r\n if (typeof props.renderer === 'function') {\r\n return props.renderer(props as any, attrs, renderDefault)\r\n }\r\n\r\n return renderDefault()\r\n }\r\n },\r\n})\r\n"],"names":["internalEffects","Object","freeze","angleRE","defineComponent","name","props","iconProps","setup","_props","attrs","slots","useProps","icon","isFunc","default","static","scale","title","label","flip","validator","value","includes","effect","size","color","rotate","renderer","nh","useNameHelper","className","computed","effectCls","bm","b","computedScale","toNumber","matched","match","number","style","fontSize","cv","renderDefault","iAttrs","class","role","undefined","_createVNode","renderSlot","h"],"mappings":"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"}