ljs-s-timeline 1.0.2 → 1.0.3
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/index.css +1 -1
- package/index.js +12 -5
- package/index.umd.cjs +1 -1
- package/package.json +1 -1
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ljs-s-timeline[data-v-
|
|
1
|
+
@charset "UTF-8";.ljs-s-timeline[data-v-0c8a15fa]{--pointHeight: var(--pointHeight);--curveHeight: var(--curveHeight);--faultTolerance: 2px;width:100%;position:relative}.ljs-s-timeline *[data-v-0c8a15fa]{-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-0c8a15fa]{width:100%;height:100%;position:relative;display:flex;flex-wrap:wrap;align-items:stretch}.ljs-s-timeline .row .item[data-v-0c8a15fa]{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-0c8a15fa]{width:100%;display:flex;align-items:center;position:absolute;top:0;left:0}.ljs-s-timeline .row .item .lineBox .point[data-v-0c8a15fa]{width:var(--pointHeight);height:var(--pointHeight);position:relative;z-index:2}.ljs-s-timeline .row .item .lineBox .line[data-v-0c8a15fa]{width:100%;border-top:4px solid #ccc;position:relative;z-index:1}.ljs-s-timeline .row .curveBox[data-v-0c8a15fa]{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-0c8a15fa]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:0}.ljs-s-timeline .row .curveBox.right .curve[data-v-0c8a15fa]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curveBox.left .curve[data-v-0c8a15fa]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}.ljs-s-timeline .row .curvePatch[data-v-0c8a15fa]{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-0c8a15fa]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:-50%}.ljs-s-timeline .row .curvePatch.right[data-v-0c8a15fa]{right:0}.ljs-s-timeline .row .curvePatch.right .patch[data-v-0c8a15fa]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curvePatch.left[data-v-0c8a15fa]{left:0}.ljs-s-timeline .row .curvePatch.left .patch[data-v-0c8a15fa]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}
|
package/index.js
CHANGED
|
@@ -73,7 +73,14 @@ const index = {
|
|
|
73
73
|
tempRowData.push(item);
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
|
-
if (i % this.rowNum === this.rowNum - 1) {
|
|
76
|
+
if (runRow + 1 < this.row && i % this.rowNum === this.rowNum - 1 || runRow + 1 === this.row && i === this.data.length - 1) {
|
|
77
|
+
if (tempRowData.length < this.rowNum) {
|
|
78
|
+
const addData = [];
|
|
79
|
+
for (let a = 0; a < this.rowNum - tempRowData.length; a++) {
|
|
80
|
+
addData.push({});
|
|
81
|
+
}
|
|
82
|
+
tempRowData = tempRowData.concat(addData);
|
|
83
|
+
}
|
|
77
84
|
if (runRow % 2 === 0) {
|
|
78
85
|
this.useData.push({
|
|
79
86
|
direction: 1,
|
|
@@ -93,7 +100,7 @@ const index = {
|
|
|
93
100
|
}
|
|
94
101
|
}
|
|
95
102
|
};
|
|
96
|
-
const
|
|
103
|
+
const index_vue_vue_type_style_index_0_scoped_0c8a15fa_lang = "";
|
|
97
104
|
const _export_sfc = (sfc, props) => {
|
|
98
105
|
const target = sfc.__vccOpts || sfc;
|
|
99
106
|
for (const [key, val] of props) {
|
|
@@ -121,7 +128,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
121
128
|
class: "row"
|
|
122
129
|
}, [
|
|
123
130
|
createElementVNode("div", _hoisted_1, [
|
|
124
|
-
row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
131
|
+
i < _ctx.useData.length - 1 && row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
125
132
|
key: 0,
|
|
126
133
|
class: "curve",
|
|
127
134
|
style: normalizeStyle({
|
|
@@ -130,7 +137,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
130
137
|
}, null, 4)) : createCommentVNode("", true)
|
|
131
138
|
]),
|
|
132
139
|
createElementVNode("div", _hoisted_2, [
|
|
133
|
-
row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
140
|
+
i < _ctx.useData.length - 1 && row.direction === -1 ? (openBlock(), createElementBlock("div", {
|
|
134
141
|
key: 0,
|
|
135
142
|
class: "patch",
|
|
136
143
|
style: normalizeStyle({
|
|
@@ -193,7 +200,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
193
200
|
}), 128))
|
|
194
201
|
], 4);
|
|
195
202
|
}
|
|
196
|
-
const LjsTimelineS = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
203
|
+
const LjsTimelineS = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0c8a15fa"]]);
|
|
197
204
|
const components = [
|
|
198
205
|
LjsTimelineS
|
|
199
206
|
];
|
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-0c8a15fa]{--pointHeight: var(--pointHeight);--curveHeight: var(--curveHeight);--faultTolerance: 2px;width:100%;position:relative}.ljs-s-timeline *[data-v-0c8a15fa]{-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-0c8a15fa]{width:100%;height:100%;position:relative;display:flex;flex-wrap:wrap;align-items:stretch}.ljs-s-timeline .row .item[data-v-0c8a15fa]{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-0c8a15fa]{width:100%;display:flex;align-items:center;position:absolute;top:0;left:0}.ljs-s-timeline .row .item .lineBox .point[data-v-0c8a15fa]{width:var(--pointHeight);height:var(--pointHeight);position:relative;z-index:2}.ljs-s-timeline .row .item .lineBox .line[data-v-0c8a15fa]{width:100%;border-top:4px solid #ccc;position:relative;z-index:1}.ljs-s-timeline .row .curveBox[data-v-0c8a15fa]{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-0c8a15fa]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:0}.ljs-s-timeline .row .curveBox.right .curve[data-v-0c8a15fa]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curveBox.left .curve[data-v-0c8a15fa]{border:4px solid;border-color:#ccc;border-right:0;right:-50%}.ljs-s-timeline .row .curvePatch[data-v-0c8a15fa]{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-0c8a15fa]{width:100%;height:100%;border-radius:var(--curveHeight);position:absolute;top:-50%}.ljs-s-timeline .row .curvePatch.right[data-v-0c8a15fa]{right:0}.ljs-s-timeline .row .curvePatch.right .patch[data-v-0c8a15fa]{border:4px solid;border-color:#ccc;border-left:0;left:-50%}.ljs-s-timeline .row .curvePatch.left[data-v-0c8a15fa]{left:0}.ljs-s-timeline .row .curvePatch.left .patch[data-v-0c8a15fa]{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"},l={class:"lineBox"},r={class:"curveBox right"},a={class:"curvePatch right"};const n=((e,t)=>{const o=e.__vccOpts||e;for(const[i,l]of t)o[i]=l;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"},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({});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,n,c,s,d,h){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,((n,c)=>(e.openBlock(),e.createElementBlock("div",{key:c,class:"row"},[e.createElementVNode("div",o,[c<t.useData.length-1&&-1===n.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,[c<t.useData.length-1&&-1===n.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(n.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":c===t.useData.length-1?"0px":"20px"})},[e.createElementVNode("div",l,[e.createElementVNode("div",{class:"point",style:e.normalizeStyle({background:t.pointColor,"border-radius":t.pointRadius})},null,4),e.createElementVNode("div",{class:"line",style:e.normalizeStyle({"border-color":t.lineColor})},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",r,[c<t.useData.length-1&&1===n.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",a,[c<t.useData.length-1&&1===n.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-0c8a15fa"]]),c=[n];return{install:function(e){c.map((t=>{e.component(t.name,t)}))},LjsTimelineS:n}}));
|