ljs-s-timeline 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/index.css +1 -1
- package/index.js +22 -8
- package/index.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -35,6 +35,7 @@ pointHeight | Number | × | 10 | | 点高度（宽高一致）。单位：px。
|
|
|
35
35
|
pointRadius | String | × | 50% | | 点圆角。
|
|
36
36
|
pointColor | String | × | #999 | | 点颜色。
|
|
37
37
|
lineColor | String | × | #CCC | | 线颜色。
|
|
38
|
+
lineEnd | String | × | 0 | | 线条末尾的样式。 0 顶到头 1 末尾截断。
|
|
38
39
|
curveHeight | String | × | 100 | | 弯角宽度。
|
|
39
40
|
itemMarginLeft | String | × | 0 | | 项偏移。
|
|
40
41
|
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ljs-s-timeline[data-v-
|
|
1
|
+
@charset "UTF-8";.ljs-s-timeline[data-v-5567d08e]{--pointHeight: var(--pointHeight);--curveHeight: var(--curveHeight);--faultTolerance: 2px;width:100%;position:relative}.ljs-s-timeline *[data-v-5567d08e]{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ljs-s-timeline .row[data-v-5567d08e]{width:100%;height:100%;position:relative;display:flex;flex-wrap:wrap;align-items:stretch}.ljs-s-timeline .row .item[data-v-5567d08e]{height:100%;padding:20px 20px 0 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;position:relative}.ljs-s-timeline .row .item .lineBox[data-v-5567d08e]{width:100%;display:flex;align-items:center;position:absolute;top:0;left:0}.ljs-s-timeline .row .item .lineBox .point[data-v-5567d08e]{width:var(--pointHeight);height:var(--pointHeight);position:relative;z-index:2}.ljs-s-timeline .row .item .lineBox .line[data-v-5567d08e]{width:100%;border-top:4px solid #ccc;position:relative;z-index:1;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important;box-sizing:content-box!important}.ljs-s-timeline .row .curveBox[data-v-5567d08e]{flex:1;display:flex;flex-direction:column;justify-content:stretch;overflow:hidden;margin-top:calc(var(--pointHeight) / 2 - var(--faultTolerance));position:relative}.ljs-s-timeline .row .curveBox .curve[data-v-5567d08e]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:0;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important;box-sizing:content-box!important}.ljs-s-timeline .row .curveBox.right .curve[data-v-5567d08e]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curveBox.left .curve[data-v-5567d08e]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}.ljs-s-timeline .row .curvePatch[data-v-5567d08e]{width:calc(var(--curveHeight) / 2);height:calc(var(--curveHeight) / 2 + var(--faultTolerance));position:absolute;bottom:calc(-1 * var(--curveHeight) / 4);overflow:hidden}.ljs-s-timeline .row .curvePatch .patch[data-v-5567d08e]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:-50%;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important;box-sizing:content-box!important}.ljs-s-timeline .row .curvePatch.right[data-v-5567d08e]{right:0}.ljs-s-timeline .row .curvePatch.right .patch[data-v-5567d08e]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curvePatch.left[data-v-5567d08e]{left:0}.ljs-s-timeline .row .curvePatch.left .patch[data-v-5567d08e]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}
|
package/index.js
CHANGED
|
@@ -29,6 +29,11 @@ const index = {
|
|
|
29
29
|
type: String,
|
|
30
30
|
default: "#CCC"
|
|
31
31
|
},
|
|
32
|
+
// 线条末尾的样式。 0 顶到头 1 末尾截断
|
|
33
|
+
lineEnd: {
|
|
34
|
+
type: String,
|
|
35
|
+
default: "0"
|
|
36
|
+
},
|
|
32
37
|
// 弯角宽度
|
|
33
38
|
curveHeight: {
|
|
34
39
|
type: Number,
|
|
@@ -73,7 +78,17 @@ const index = {
|
|
|
73
78
|
tempRowData.push(item);
|
|
74
79
|
}
|
|
75
80
|
}
|
|
76
|
-
if (i % this.rowNum === this.rowNum - 1) {
|
|
81
|
+
if (runRow + 1 < this.row && i % this.rowNum === this.rowNum - 1 || runRow + 1 === this.row && i === this.data.length - 1) {
|
|
82
|
+
if (tempRowData.length < this.rowNum) {
|
|
83
|
+
const addData = [];
|
|
84
|
+
for (let a = 0; a < this.rowNum - tempRowData.length; a++) {
|
|
85
|
+
addData.push({
|
|
86
|
+
ljsTempTag: true
|
|
87
|
+
// 占位key
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
tempRowData = tempRowData.concat(addData);
|
|
91
|
+
}
|
|
77
92
|
if (runRow % 2 === 0) {
|
|
78
93
|
this.useData.push({
|
|
79
94
|
direction: 1,
|
|
@@ -89,11 +104,10 @@ const index = {
|
|
|
89
104
|
runRow++;
|
|
90
105
|
}
|
|
91
106
|
});
|
|
92
|
-
console.log(this.useData);
|
|
93
107
|
}
|
|
94
108
|
}
|
|
95
109
|
};
|
|
96
|
-
const
|
|
110
|
+
const index_vue_vue_type_style_index_0_scoped_5567d08e_lang = "";
|
|
97
111
|
const _export_sfc = (sfc, props) => {
|
|
98
112
|
const target = sfc.__vccOpts || sfc;
|
|
99
113
|
for (const [key, val] of props) {
|
|
@@ -121,7 +135,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
121
135
|
class: "row"
|
|
122
136
|
}, [
|
|
123
137
|
createElementVNode("div", _hoisted_1, [
|
|
124
|
-
row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
138
|
+
i < _ctx.useData.length - 1 && row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
125
139
|
key: 0,
|
|
126
140
|
class: "curve",
|
|
127
141
|
style: normalizeStyle({
|
|
@@ -130,7 +144,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
130
144
|
}, null, 4)) : createCommentVNode("", true)
|
|
131
145
|
]),
|
|
132
146
|
createElementVNode("div", _hoisted_2, [
|
|
133
|
-
row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
147
|
+
i < _ctx.useData.length - 1 && row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
134
148
|
key: 0,
|
|
135
149
|
class: "patch",
|
|
136
150
|
style: normalizeStyle({
|
|
@@ -151,14 +165,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
151
165
|
createElementVNode("div", {
|
|
152
166
|
class: "point",
|
|
153
167
|
style: normalizeStyle({
|
|
154
|
-
"background": _ctx.pointColor,
|
|
168
|
+
"background": item.ljsTempTag !== true ? _ctx.pointColor : "transparent",
|
|
155
169
|
"border-radius": _ctx.pointRadius
|
|
156
170
|
})
|
|
157
171
|
}, null, 4),
|
|
158
172
|
createElementVNode("div", {
|
|
159
173
|
class: "line",
|
|
160
174
|
style: normalizeStyle({
|
|
161
|
-
"border-color": _ctx.lineColor
|
|
175
|
+
"border-color": item.ljsTempTag !== true ? _ctx.lineColor : _ctx.lineEnd === "0" ? _ctx.lineColor : "transparent"
|
|
162
176
|
})
|
|
163
177
|
}, null, 4)
|
|
164
178
|
]),
|
|
@@ -193,7 +207,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
193
207
|
}), 128))
|
|
194
208
|
], 4);
|
|
195
209
|
}
|
|
196
|
-
const LjsTimelineS = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
210
|
+
const LjsTimelineS = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5567d08e"]]);
|
|
197
211
|
const components = [
|
|
198
212
|
LjsTimelineS
|
|
199
213
|
];
|
package/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).index=t(e.Vue)}(this,(function(e){"use strict";var t=document.createElement("style");t.textContent='@charset "UTF-8";.ljs-s-timeline[data-v-
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).index=t(e.Vue)}(this,(function(e){"use strict";var t=document.createElement("style");t.textContent='@charset "UTF-8";.ljs-s-timeline[data-v-5567d08e]{--pointHeight: var(--pointHeight);--curveHeight: var(--curveHeight);--faultTolerance: 2px;width:100%;position:relative}.ljs-s-timeline *[data-v-5567d08e]{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ljs-s-timeline .row[data-v-5567d08e]{width:100%;height:100%;position:relative;display:flex;flex-wrap:wrap;align-items:stretch}.ljs-s-timeline .row .item[data-v-5567d08e]{height:100%;padding:20px 20px 0 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;position:relative}.ljs-s-timeline .row .item .lineBox[data-v-5567d08e]{width:100%;display:flex;align-items:center;position:absolute;top:0;left:0}.ljs-s-timeline .row .item .lineBox .point[data-v-5567d08e]{width:var(--pointHeight);height:var(--pointHeight);position:relative;z-index:2}.ljs-s-timeline .row .item .lineBox .line[data-v-5567d08e]{width:100%;border-top:4px solid #ccc;position:relative;z-index:1;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important;box-sizing:content-box!important}.ljs-s-timeline .row .curveBox[data-v-5567d08e]{flex:1;display:flex;flex-direction:column;justify-content:stretch;overflow:hidden;margin-top:calc(var(--pointHeight) / 2 - var(--faultTolerance));position:relative}.ljs-s-timeline .row .curveBox .curve[data-v-5567d08e]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:0;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important;box-sizing:content-box!important}.ljs-s-timeline .row .curveBox.right .curve[data-v-5567d08e]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curveBox.left .curve[data-v-5567d08e]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}.ljs-s-timeline .row .curvePatch[data-v-5567d08e]{width:calc(var(--curveHeight) / 2);height:calc(var(--curveHeight) / 2 + var(--faultTolerance));position:absolute;bottom:calc(-1 * var(--curveHeight) / 4);overflow:hidden}.ljs-s-timeline .row .curvePatch .patch[data-v-5567d08e]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:-50%;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important;box-sizing:content-box!important}.ljs-s-timeline .row .curvePatch.right[data-v-5567d08e]{right:0}.ljs-s-timeline .row .curvePatch.right .patch[data-v-5567d08e]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curvePatch.left[data-v-5567d08e]{left:0}.ljs-s-timeline .row .curvePatch.left .patch[data-v-5567d08e]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}\n',document.head.appendChild(t);const o={class:"curveBox left"},i={class:"curvePatch left"},r={class:"lineBox"},l={class:"curveBox right"},n={class:"curvePatch right"};const a=((e,t)=>{const o=e.__vccOpts||e;for(const[i,r]of t)o[i]=r;return o})({name:"LjsTimelineS",props:{data:Array,rowNum:{type:Number,default:4},pointHeight:{type:Number,default:10},pointRadius:{type:String,default:"50%"},pointColor:{type:String,default:"#999"},lineColor:{type:String,default:"#CCC"},lineEnd:{type:String,default:"0"},curveHeight:{type:Number,default:100},itemMarginLeft:{type:String,default:"0"}},data:()=>({useData:[],row:0}),watch:{data:{handler(e){this.data.length>0&&this.initData()},deep:!0,immediate:!0}},mounted(){},methods:{initData(){this.useData=[],this.row=Math.ceil(this.data.length/this.rowNum);let e=0,t=[];this.data.forEach(((o,i)=>{if(Math.floor(i/this.rowNum)===e&&t.push(o),e+1<this.row&&i%this.rowNum==this.rowNum-1||e+1===this.row&&i===this.data.length-1){if(t.length<this.rowNum){const e=[];for(let o=0;o<this.rowNum-t.length;o++)e.push({ljsTempTag:!0});t=t.concat(e)}e%2==0?this.useData.push({direction:1,children:t}):this.useData.push({direction:-1,children:t.reverse()}),t=[],e++}}))}}},[["render",function(t,a,s,c,d,m){return e.openBlock(),e.createElementBlock("div",{class:"ljs-s-timeline",style:e.normalizeStyle({"--pointHeight":`${t.pointHeight}px`,"--curveHeight":`${t.curveHeight}px`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.useData,((a,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:"row"},[e.createElementVNode("div",o,[s<t.useData.length-1&&-1===a.direction?(e.openBlock(),e.createElementBlock("div",{key:0,class:"curve",style:e.normalizeStyle({"border-color":`${t.lineColor} !important`})},null,4)):e.createCommentVNode("",!0)]),e.createElementVNode("div",i,[s<t.useData.length-1&&-1===a.direction?(e.openBlock(),e.createElementBlock("div",{key:0,class:"patch",style:e.normalizeStyle({"border-color":`${t.lineColor} !important`})},null,4)):e.createCommentVNode("",!0)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.children,((o,i)=>(e.openBlock(),e.createElementBlock("div",{class:"item",key:i,style:e.normalizeStyle({width:`calc((100% - ${t.curveHeight}px) / ${t.rowNum})`,"padding-bottom":s===t.useData.length-1?"0px":"20px"})},[e.createElementVNode("div",r,[e.createElementVNode("div",{class:"point",style:e.normalizeStyle({background:!0!==o.ljsTempTag?t.pointColor:"transparent","border-radius":t.pointRadius})},null,4),e.createElementVNode("div",{class:"line",style:e.normalizeStyle({"border-color":!0!==o.ljsTempTag||"0"===t.lineEnd?t.lineColor:"transparent"})},null,4)]),e.createElementVNode("div",{style:e.normalizeStyle({"margin-left":t.itemMarginLeft})},[e.renderSlot(t.$slots,"default",{row:o},void 0,!0)],4)],4)))),128)),e.createElementVNode("div",l,[s<t.useData.length-1&&1===a.direction?(e.openBlock(),e.createElementBlock("div",{key:0,class:"curve",style:e.normalizeStyle({"border-color":`${t.lineColor} !important`})},null,4)):e.createCommentVNode("",!0)]),e.createElementVNode("div",n,[s<t.useData.length-1&&1===a.direction?(e.openBlock(),e.createElementBlock("div",{key:0,class:"patch",style:e.normalizeStyle({"border-color":`${t.lineColor} !important`})},null,4)):e.createCommentVNode("",!0)])])))),128))],4)}],["__scopeId","data-v-5567d08e"]]),s=[a];return{install:function(e){s.map((t=>{e.component(t.name,t)}))},LjsTimelineS:a}}));
|