@seemusic/ui-components
Version:
A Vue 3 UI Library. Uses Composable.
1 lines • 6.24 kB
Source Map (JSON)
{"version":3,"file":"SopCover.mjs","sources":["../../../src/components/SopCover/SopCover.tsx"],"sourcesContent":["import {\n defineComponent,\n computed,\n ref,\n onMounted,\n onBeforeUnmount,\n type PropType\n} from 'vue';\n\nexport type CoverTypeEnum = 'album' | 'track' | 'cp' | 'customer' | 'contract' | 'dsp' | 'playlist-project' | 'playlist'\n\nexport default defineComponent({\n name: 'SopCover',\n props: {\n type: {\n type: String as PropType<CoverTypeEnum>,\n default: 'album',\n },\n src: {\n type: String,\n default: ''\n },\n width: {\n type: Number,\n default: 72\n },\n height: {\n type: Number,\n default: 72\n },\n placeholder: {\n type: String,\n default: ''\n },\n isCoverEdit: {\n type: Boolean,\n default: false\n }\n },\n emits: ['cover-edit'],\n setup(props, ctx) {\n const { emit } = ctx;\n const coverRef = ref<HTMLDivElement | null>(null);\n const coverSize = ref({\n width: `${props.width}px`,\n height: `${props.height}px`,\n });\n\n const CoverTypeList = [\n 'album',\n 'track',\n 'cp',\n 'customer',\n 'contract',\n 'dsp',\n 'playlist-project',\n 'playlist'\n ];\n\n const backgroundStyle = computed(() => {\n return {\n backgroundPosition: `0 -${props.width * CoverTypeList.indexOf(props.type)}px`,\n backgroundSize: `${props.width}px auto`\n };\n });\n\n onMounted(() => {\n if (coverRef.value && props.isCoverEdit) {\n coverRef.value.addEventListener('mouseenter', mouseenterHandler);\n coverRef.value.addEventListener('mouseleave', mouseleaveHandler);\n }\n });\n\n onBeforeUnmount(() => {\n if (coverRef.value && props.isCoverEdit) {\n coverRef.value.removeEventListener('mouseenter', mouseenterHandler);\n coverRef.value.removeEventListener('mouseleave', mouseleaveHandler);\n }\n });\n\n function mouseenterHandler(event: MouseEvent) {\n const target = (event.target as HTMLElement).children.item(0) as HTMLElement;\n target.style.opacity = '1';\n }\n\n function mouseleaveHandler(event: MouseEvent) {\n const target = (event.target as HTMLElement).children.item(0) as HTMLElement;\n target.style.opacity = '0';\n }\n\n function isCoverShow() {\n if (props.src !== '') {\n return <div\n style={{\n ...coverSize.value,\n background: `url(${props.src}) no-repeat center center`,\n backgroundSize: 'cover',\n }}\n />;\n } else if (props.placeholder !== '') {\n return <span>\n { props.placeholder }\n </span>;\n } else {\n return <span\n class=\"default-cover\"\n style={backgroundStyle.value}\n ></span>;\n }\n }\n\n return () => (\n <div\n ref={coverRef}\n class=\"sop-cover\"\n style={coverSize.value}\n >\n <div\n class=\"edit\"\n style={{\n ...coverSize.value,\n lineHeight: `${props.height}px`\n }}\n >\n {\n props.isCoverEdit &&\n <i\n class=\"sop-icon sop-icon--input\"\n onClick={() => emit('cover-edit') as unknown as (payload: MouseEvent) => void}\n />\n }\n </div>\n\n {isCoverShow()}\n </div>\n );\n },\n});\n"],"names":["defineComponent","name","props","type","String","default","src","width","Number","height","placeholder","isCoverEdit","Boolean","emits","setup","ctx","emit","coverRef","ref","coverSize","CoverTypeList","backgroundStyle","computed","backgroundPosition","indexOf","backgroundSize","onMounted","value","addEventListener","mouseenterHandler","mouseleaveHandler","onBeforeUnmount","removeEventListener","event","target","children","item","style","opacity","isCoverShow","_createVNode","background","lineHeight","onClick"],"mappings":"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"}