🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@antdigital/card-header

Package Overview
Dependencies
Maintainers
5
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@antdigital/card-header - npm Package Compare versions

Comparing version
9.0.1
 to
9.0.4
+149
logo/src/main.vue
<template>
<div
:name="name"
:addManualSpm="addManualSpm"
:spmBizCode="spmBizCode"
:scm="scm"
:spm="spm"
:entityId="entityId"
:extraParams4="extraParams4"
>
<card-lottie
v-if="lottie"
:mediaUrl="lottie"
:placeholder="image"
:style="style"
:repeatCount="repeat ? -1 : 0"
:extInfo="{ playControlMode: 1 }"
@click="onImgClick()"
/>
<image
ref="image"
v-else-if="image && loaded"
:style="autoStyle"
:src="image"
:resize="realResize"
:placeholder="placeholderImage"
@on-load="handleLoad"
@click="onImgClick()"
/>
</div>
</template>
<script>
const dom = requireModule("dom");
var main = {
data: {
imgHeight: 0,
loaded: false
},
props: {
lottie: {
default: ""
},
image: {
default: ""
},
placeholderImage: {
default: ""
},
opacity: {
default: 1
},
objectFit: {
default: "stretch"
},
repeat: {
default: true
},
style: {
default: {}
},
params: {
default: null
},
// 埋点
addManualSpm: {
default: true
},
spmBizCode: {
default: "HomeAssistant"
},
name: {
default: "exposure"
},
spm: {
default: null
},
scm: {
default: null
},
entityId: {
default: null
},
extraParams4: {
default: null
}
},
onCreated() {
this.loaded = true;
this.useParams();
},
onUpdated() {
this.useParams();
},
computed: {
autoStyle() {
if (this.imgHeight) {
return {
height: `${this.imgHeight}px`,
...this.style,
opacity: this.opacity
};
}
return {
...this.style,
opacity: this.opacity
};
},
realResize() {
if (this.objectFit === "fill") {
return "stretch";
}
return this.objectFit;
}
},
methods: {
useParams() {
if (this.params) {
for (let key in this.params) {
this[key] = this.params[key];
}
}
},
handleLoad(rst) {
if (rst.detail.width && rst.detail.height) {
dom.selectorQuery([{
ref: "image",
type: "rect"
}], ({
result
}) => {
const {
width: realWidth
} = result?.[0] || {};
if (realWidth) {
const aspectRatio = rst.detail.width / rst.detail.height;
this.imgHeight = realWidth / aspectRatio;
}
});
}
},
onImgClick() {
this.$emit("onClick");
}
}
};
export { main as default };
</script>
<style />
+10
logo/src/manifest.json
{
"name": "@antdigital/card-logo",
"compilerType": 1,
"jsformat": 1,
"isComponent": true,
"useComponents": {
"card-lottie": "../../lottie/src"
},
"assetId": "180020010101323080"
}
+183
lottie/src/main.vue
<template>
<div :style="style">
<image
v-if="isDowngrade"
:src="placeholder"
class="image"
></image>
<cardsdk-lottiewidget
v-if="!isDowngrade && lottieUrl"
class="lottie"
ref="lottie"
:style="lottieStyle"
:mediaUrl="lottieUrl"
:mediaLocalUrl="mediaLocalUrl"
:placeholder="placeholder"
:optimize="optimize"
:contentMode="contentMode"
:borderRadius="borderRadius"
:repeatCount="repeatCount"
:isDarkModeSupport="isDarkModeSupport"
:extInfo="extInfo"
@on-dataReady="onDataReady()"
@on-error="onDataErr()"
@on-downgrade="onDataDown()"
@on-animationRepeat="onAnimationRepeat()"
@on-animationEnd="onAnimationEnd()"
@on-animationStart="onAnimationStart()"
:name="name"
:addManualSpm="addManualSpm"
:spmBizCode="spmBizCode"
:scm="scm"
:spm="spm"
:entityId="entityId"
:extraParams4="extraParams4"
/>
</div>
</template>
<script>
var main = {
data: {
lottieUrl: "",
isRetry: false
},
props: {
style: {
default: {}
},
lottieStyle: {
default: {}
},
mediaUrl: {
default: ""
},
mediaLocalUrl: {
default: ""
},
placeholder: {
default: ""
},
optimize: {
default: false
},
extInfo: {
default: {}
},
contentMode: {
default: 1
},
borderRadius: {
default: 0
},
repeatCount: {
default: -1
},
isDarkModeSupport: {
default: false
},
params: {
default: null
},
// 业务降级开关
isDowngrade: {
default: false
},
// 埋点
addManualSpm: {
default: true
},
spmBizCode: {
default: "HomeAssistant"
},
name: {
default: "exposure"
},
spm: {
default: null
},
scm: {
default: null
},
entityId: {
default: null
},
extraParams4: {
default: null
}
},
onCreated() {
this.useParams();
this.lottieUrl = this.mediaUrl;
if (this.isDowngrade) {
this.$emit("on-downgrade", this.$refs);
}
},
onUpdated(...args) {
this.useParams();
const [propKey, propValue] = args;
if (propKey === 'isDowngrade' && propValue) {
this.$emit("on-downgrade", this.$refs);
}
if (propKey === 'mediaUrl') {
this.lottieUrl = this.mediaUrl;
}
},
methods: {
useParams() {
if (this.params) {
for (let key in this.params) {
this[key] = this.params[key];
}
}
},
onDataReady() {
this.isRetry = false;
this.$refs.lottie?.invokeComponentMethod("play", {}, () => {});
this.$emit("on-dataReady", this.$refs);
},
onDataErr() {
if (!this.retry()) {
this.$emit("on-error", this.$refs);
}
},
onDataDown() {
if (!this.retry()) {
this.$emit("on-downgrade", this.$refs);
}
},
onAnimationRepeat() {
this.$emit("on-animationRepeat", this.$refs);
},
onAnimationEnd() {
this.$emit("on-animationEnd", this.$refs);
},
onAnimationStart() {
this.$emit("on-animationStart", this.$refs);
},
retry() {
if (!this.isRetry) {
this.lottieUrl = "";
this.lottieUrl = this.mediaUrl;
this.isRetry = true;
return true;
} else {
this.isRetry = false;
return false;
}
}
}
};
export { main as default };
</script>
<style>
.lottie {
width: 100%;
height: 100%;
}
.image {
width: 100%;
height: 100%;
}
</style>
+8
lottie/src/manifest.json
{
"name": "@antdigital/card-lottie",
"compilerType": 1,
"jsformat": 1,
"isComponent": true,
"assetId": "180020010101324127",
"useComponents": {}
}
+465
main.vue
<template>
<div
:class="`root root_${type}`"
:style="headStyle"
@click="onClick()"
:name="name"
:addManualSpm="addManualSpm"
:spmBizCode="spmBizCode"
:scm="scm"
:spm="spm"
:entityId="entityId"
:extraParams4="extraParams4"
>
<card-logo
v-if="type === 'simple'"
:lottie="lottieUrl"
:image="logoImage"
:style="realLottieStyle"
:repeat="repeat ? -1 : 0"
/>
<div class="main">
<div class="titleContianer">
<card-logo
v-if="type === 'default'"
:lottie="lottieUrl"
:image="logoImage"
:style="realLottieStyle"
:repeat="repeat ? -1 : 0"
/>
<text
:class="`title title_${type}`"
:style="{
fontSize: titleSize,
color: titleColor,
fontWeight: titleWeight,
}"
:value="title"
/>
<div
v-if="showArrow && arrowBtnType === 'default'"
class="header__arrow_default"
:style="arrowContainerStyle"
>
<text
v-if="arrowText"
class="header__arrow_text"
:value="arrowText"
/>
<image
class="header__arrow_icon_default"
:src="arrowIcon"
:style="realArrowIconStyle"
/>
</div>
</div>
<div
v-if="subtitle"
class="subtitle_container"
:style="{
marginTop: subtitleMarginTop,
}"
>
<card-logo
v-if="subtitleLogo"
:lottie="subtitleLottie"
:image="subtitleLogo"
:style="{
width: '32rpx',
height: '32rpx',
marginRight: '12rpx',
}"
:repeat="subtitleRepeat ? -1 : 0"
/>
<text
:class="`subtitle subtitle_${type}`"
:value="subtitle"
:style="{
fontSize: subtitleSize,
color: subtitleColor,
fontWeight: subtitleWeight,
}"
/>
<text
v-if="subtitleBtn"
:class="`subtitle_btn ${subtitleBtnDisable ? 'disable' : ''}`"
:value="subtitleBtn"
@click="onSubtitleClick()"
:addManualSpm="addManualSpm"
:spmBizCode="spmBizCode"
:scm="scm"
:spm="spm"
:entityId="entityId"
:extraParams4="extraParams4"
/>
</div>
</div>
<div
v-if="showArrow && arrowBtnType === 'simple'"
class="header__arrow_simple"
@click="onBtnClick()"
:style="realArrowContainerStyle"
:addManualSpm="addManualSpm"
:spmBizCode="spmBizCode"
:scm="scm"
:spm="spm"
:entityId="entityId"
:extraParams4="extraParams4"
>
<text v-if="arrowText" class="header__arrow_text" :value="arrowText" />
<image
:class="`header__arrow_icon_simple`"
:src="arrowIcon"
:style="realArrowIconStyle"
/>
</div>
</div>
</template>
<script>
const ac = requireModule("ac");
var main = {
computed: {
realArrowIconStyle() {
if (this.arrowIconSizeUnit) {
const realSize = Cube.translateLenghtValue(`${this.arrowIconSizeUnit}px`, "rpx");
return {
...this.arrowIconStyle,
width: realSize + "rpx",
height: realSize + "rpx"
};
} else {
return this.arrowIconStyle;
}
},
realArrowContainerStyle() {
return {
padding: this.arrowText ? "0 9rpx" : null,
...this.arrowContainerStyle
};
},
headStyle() {
let thisBottom = 24;
if (this.type === "simple") {
thisBottom = 18;
}
if (this.isOversize) {
thisBottom += this.oversizeHeight;
}
return {
...this.style,
paddingBottom: `${thisBottom}rpx`,
backgroundImage: `url(${this.backgroundImage})`,
backgroundColor: this.backgroundColor
};
},
realLottieStyle() {
if (this.type === "default") {
return {
width: "42rpx",
height: "42rpx",
marginRight: "12rpx",
...this.lottieStyle
};
}
return {
width: "56rpx",
height: "56rpx",
marginRight: "16rpx",
...this.lottieStyle
};
}
},
props: {
type: {
default: "default"
},
// 'default' | 'simple'
// 容器style
style: {
default: {}
},
isOversize: {
default: true
},
oversizeHeight: {
default: 48
},
// 背景
backgroundImage: {
default: ""
},
backgroundColor: {
default: ""
},
// 标题
title: {
default: "主标题"
},
titleColor: {
default: null
},
titleSize: {
default: null
},
titleWeight: {
default: null
},
// 标题动图
lottieUrl: {
default: ""
},
logoImage: {
default: ""
},
repeat: {
default: true
},
lottieStyle: {
default: {}
},
// 副标题
subtitle: {
default: ""
},
subtitleLottie: {
default: ""
},
subtitleLogo: {
default: ""
},
subtitleRepeat: {
default: true
},
subtitleColor: {
default: null
},
subtitleSize: {
default: null
},
subtitleWeight: {
default: null
},
subtitleBtn: {
default: null
},
subtitleBtnDisable: {
default: false
},
subtitleMarginTop: {
default: null
},
// 跳转按钮
arrowBtnType: {
default: "default"
},
// 'default' | 'simple'
showArrow: {
default: false
},
url: {
default: ""
},
arrowIcon: {
default: "https://mdn.antdigitalobjects.com/huamei_dlpkmn/afts/img/A*EqT1TIy4DL8AAAAAAAAAAAAADty4AQ/original"
},
arrowText: {
default: ""
},
arrowIconStyle: {
default: {}
},
// icon大小px
arrowIconSizeUnit: {
default: null
},
arrowContainerStyle: {
default: {}
},
params: {
default: null
},
// 埋点
addManualSpm: {
default: true
},
spmBizCode: {
default: "HomeAssistant"
},
name: {
default: "exposure"
},
spm: {
default: null
},
scm: {
default: null
},
entityId: {
default: null
},
extraParams4: {
default: null
}
},
onCreated() {
this.useParams();
},
onUpdated(key) {
this.useParams();
},
methods: {
useParams() {
if (this.params) {
for (let key in this.params) {
this[key] = this.params[key];
}
}
},
// 如果有箭头icon，触发点击事件，如果有url地址，跳转
onClick() {
this.$emit("click");
if (this.showArrow) {
this.openURL(this.url);
}
},
onBtnClick() {
// console.info("触发按钮下的点击");
this.openURL(this.url);
this.$emit("click");
},
onSubtitleClick() {
// console.info("触发副标题下的点击");
if (!this.subtitleBtnDisable) {
this.$emit("onClickSubtitle");
}
},
openURL(url) {
if (url) {
try {
ac.call("openURL", {
url,
check: true
});
} catch (error) {
console.error("error when openURL: " + error);
}
}
}
}
};
export { main as default };
</script>
<style>
.root {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
background-size: cover;
padding: 32rpx 32rpx 24rpx 32rpx;
border-radius: 48rpx 48rpx 0 0;
}
.root_simple {
padding: 18rpx 24rpx;
}
.titleContianer {
display: flex;
flex-direction: row;
align-items: center;
}
.title {
flex: 1;
overflow: hidden;
white-space: nowrap;
lines: 1;
text-overflow: ellipsis;
font-size: 30rpx;
font-weight: 600;
color: #1f3b63;
}
.title_simple {
height: 37rpx;
font-size: 26rpx;
font-weight: 500;
color: #1f3b63;
}
.disable {
color: #d9d9d9;
}
.status_tag {
height: 32rpx;
width: 32rpx;
margin-right: 12rpx;
border-radius: 100%;
}
.subtitle_container {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 1rpx;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
}
.subtitle {
flex: 1;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
lines: 1;
text-overflow: ellipsis;
font-size: 26rpx;
color: #4f6c8c;
}
.subtitle_simple {
height: 30rpx;
font-size: 22rpx;
color: #8d9fb8;
}
.subtitle_btn {
font-weight: 400;
overflow: hidden;
white-space: nowrap;
lines: 1;
font-size: 24rpx;
text-overflow: ellipsis;
color: #4f6c8c;
}
.header__arrow_default {
display: flex;
flex-direction: row;
border-radius: 100%;
align-items: center;
}
.header__arrow_simple {
display: flex;
flex-direction: row;
background: rgba(141, 159, 184, 0.12);
border-radius: 100%;
padding: 9rpx;
align-items: center;
}
.header__arrow_text {
height: 37rpx;
font-size: 26rpx;
color: #1f3b63;
font-weight: 500;
margin: 8rpx 0 8rpx 8rpx;
}
.header__arrow_icon_default {
width: 28rpx;
height: 28rpx;
}
.header__arrow_icon_simple {
width: 20rpx;
height: 20rpx;
}
</style>
+10
manifest.json
{
"name": "@antdigital/card-header",
"compilerType": 1,
"jsformat": 1,
"isComponent": true,
"useComponents": {
"card-logo": "./logo/src"
},
"assetId": "180020010101321806"
}
+6
-2
package.json
{
"name": "@antdigital/card-header",
"version": "9.0.1",
"version": "9.0.4",
"repository": {

@@ -18,3 +18,7 @@ "type": "git"

"config.schema",
"esm"
"esm",
"main.vue",
"manifest.json",
"logo",
"lottie"
],

@@ -21,0 +25,0 @@ "keywords": [