vue-devui 1.5.12-hotfix.1 → 1.5.13
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/auto-complete/index.es.js +139 -61
- package/auto-complete/index.umd.js +16 -16
- package/auto-complete/style.css +1 -1
- package/checkbox/index.es.js +115 -61
- package/checkbox/index.umd.js +15 -15
- package/checkbox/style.css +1 -1
- package/code-editor/index.es.js +5 -2
- package/code-editor/index.umd.js +6 -6
- package/code-review/index.es.js +12 -1
- package/code-review/index.umd.js +18 -18
- package/code-review/style.css +1 -1
- package/date-picker-pro/index.es.js +213 -109
- package/date-picker-pro/index.umd.js +19 -19
- package/date-picker-pro/style.css +1 -1
- package/editor-md/index.es.js +1 -1
- package/editor-md/index.umd.js +1 -1
- package/form/index.es.js +142 -64
- package/form/index.umd.js +14 -14
- package/form/style.css +1 -1
- package/image-preview/index.es.js +2 -6
- package/image-preview/index.umd.js +2 -2
- package/image-preview/style.css +1 -1
- package/input/index.es.js +207 -79
- package/input/index.umd.js +18 -18
- package/input/style.css +1 -1
- package/input-number/index.es.js +123 -46
- package/input-number/index.umd.js +20 -20
- package/input-number/style.css +1 -1
- package/mention/index.es.js +138 -60
- package/mention/index.umd.js +16 -16
- package/mention/style.css +1 -1
- package/nuxt/components/STYLE_TOKEN.js +3 -0
- package/nuxt/components/formControlProps.js +3 -0
- package/package.json +1 -1
- package/pagination/index.es.js +376 -161
- package/pagination/index.umd.js +19 -19
- package/pagination/style.css +1 -1
- package/progress/index.es.js +6 -6
- package/progress/index.umd.js +1 -1
- package/radio/index.es.js +115 -61
- package/radio/index.umd.js +16 -16
- package/radio/style.css +1 -1
- package/search/index.es.js +211 -83
- package/search/index.umd.js +19 -19
- package/search/style.css +1 -1
- package/select/index.es.js +358 -143
- package/select/index.umd.js +17 -17
- package/select/style.css +1 -1
- package/skeleton/index.es.js +1 -0
- package/skeleton/index.umd.js +2 -2
- package/steps/index.es.js +35 -11
- package/steps/index.umd.js +1 -1
- package/style.css +1 -1
- package/switch/index.es.js +115 -61
- package/switch/index.umd.js +14 -14
- package/switch/style.css +1 -1
- package/table/index.es.js +88 -34
- package/table/index.umd.js +15 -15
- package/table/style.css +1 -1
- package/textarea/index.es.js +141 -63
- package/textarea/index.umd.js +17 -17
- package/textarea/style.css +1 -1
- package/time-picker/index.es.js +159 -55
- package/time-picker/index.umd.js +11 -11
- package/time-picker/style.css +1 -1
- package/time-select/index.es.js +358 -143
- package/time-select/index.umd.js +22 -22
- package/time-select/style.css +1 -1
- package/tree/index.es.js +86 -32
- package/tree/index.umd.js +11 -11
- package/tree/style.css +1 -1
- package/types/auto-focus/index.d.ts +9 -0
- package/types/auto-focus/src/auto-focus-directive.d.ts +4 -0
- package/types/code-review/src/code-review-types.d.ts +6 -0
- package/types/code-review/src/code-review.d.ts +9 -0
- package/types/form/index.d.ts +1 -0
- package/types/form/src/components/form-control/use-form-control.d.ts +11 -2
- package/types/form/src/components/form-item/form-item-types.d.ts +10 -2
- package/types/form/src/components/form-item/form-item.d.ts +3 -3
- package/types/form/src/components/form-label/form-label.d.ts +1 -13
- package/types/form/src/components/form-label/use-form-label.d.ts +14 -2
- package/types/form/src/form-types.d.ts +11 -0
- package/types/form/src/form.d.ts +18 -0
- package/types/input/src/composables/use-input-event.d.ts +12 -2
- package/types/input/src/input-types.d.ts +8 -0
- package/types/input/src/input.d.ts +18 -0
- package/types/input-icon/src/input-icon.d.ts +18 -0
- package/types/list/index.d.ts +0 -1
- package/types/select/src/composables/use-select-menu-size.d.ts +5 -0
- package/types/select/src/select-types.d.ts +23 -4
- package/types/select/src/select.d.ts +19 -1
- package/types/select/src/use-select.d.ts +1 -1
- package/types/vue-devui.d.ts +2 -1
- package/vue-devui.es.js +415 -134
- package/vue-devui.umd.js +76 -76
package/form/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .24));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #
|
|
1
|
+
.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .24));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label--required-hide:before{display:none}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__label-tips-popover .dv-popover__icon-wrap+span{flex:1}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-container .devui-form__feedback-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle{fill:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle{fill:var(--devui-success, #50d4ab)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg{animation:loading-keyframes 1s infinite linear}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path{fill:var(--devui-brand, #5e7ce0)}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 12px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}
|
|
@@ -5,6 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import { defineComponent, ref, computed, onMounted, onUnmounted, createVNode, Fragment, createTextVNode, createApp } from "vue";
|
|
8
|
+
import "clipboard";
|
|
8
9
|
const imagePreviewProps = {
|
|
9
10
|
url: {
|
|
10
11
|
type: String,
|
|
@@ -467,16 +468,11 @@ function unmountedPreviewImages() {
|
|
|
467
468
|
ImagePreviewService.close();
|
|
468
469
|
}
|
|
469
470
|
function getImgByEl(el) {
|
|
470
|
-
const
|
|
471
|
-
const urlList = imgs.map((item) => {
|
|
472
|
-
var _a;
|
|
473
|
-
return (_a = item.getAttribute("preview-src") || item.getAttribute("src")) != null ? _a : "";
|
|
474
|
-
});
|
|
471
|
+
const urlList = [...el.querySelectorAll("img")].map((ele) => ele.getAttribute("src"));
|
|
475
472
|
return urlList;
|
|
476
473
|
}
|
|
477
474
|
function handleImg(e) {
|
|
478
475
|
var _a;
|
|
479
|
-
e.stopPropagation();
|
|
480
476
|
const el = e.currentTarget;
|
|
481
477
|
const target = e.target;
|
|
482
478
|
if (((_a = target == null ? void 0 : target.nodeName) == null ? void 0 : _a.toLowerCase()) === "img") {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var X=Object.defineProperty;var Y=(
|
|
1
|
+
var X=Object.defineProperty;var Y=(s,e,c)=>e in s?X(s,e,{enumerable:!0,configurable:!0,writable:!0,value:c}):s[e]=c;var i=(s,e,c)=>(Y(s,typeof e!="symbol"?e+"":e,c),c);(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";const c={url:{type:String,default:"",required:!0},previewUrlList:{type:Array,default:()=>[],required:!0},zIndex:{type:Number,required:!1},backDropZIndex:{type:Number,required:!1}};class I{constructor(t,n={}){i(this,"el");i(this,"oTransformX",0);i(this,"oTransformY",0);i(this,"transformX");i(this,"transformY");i(this,"zoom");i(this,"rotate");i(this,"STEP",.25);i(this,"MIN_SCALE",.2);i(this,"MAX_SCALE",2.5);i(this,"TRANSFORMX",0);i(this,"TRANSFORMY",0);i(this,"ZOOM",1);i(this,"ROTATE",0);this.el=t,this.transformX=n.transformX||this.TRANSFORMX,this.transformY=n.transformY||this.TRANSFORMY,this.zoom=n.zoom||this.ZOOM,this.rotate=n.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=t=>{const n=t.clientX,r=t.clientY;document.onmousemove=l=>{const d=l.clientX-n,m=l.clientY-r;this.transformX=this.oTransformX+d,this.transformY=this.oTransformY+m,this.el.style.cursor="grabbing",this.setPosition()}},document.onmouseup=()=>{document.onmousemove=null,this.oTransformX=this.transformX,this.oTransformY=this.transformY,this.el.style.cursor="grab"}}onMouseWheel(){const t=this.throttle(this.setMouseWheel,100);this.el.onmousewheel=n=>{const r=-n.wheelDelta||n.deltaY||n.detail;t(r)}}throttle(t,n){let r=null;return(...l)=>{r||setTimeout(()=>{r=null,t.apply(this,l)},n)}}setMouseWheel(t){if(t<0){if(this.zoom>=this.MAX_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-in",this.setZoomIn(this.STEP)}else{if(this.zoom<=this.MIN_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-out",this.setZoomOut(this.STEP)}this.setPosition()}setZoomIn(t=this.STEP){this.zoom=Math.min(this.MAX_SCALE,this.zoom+t),this.setPosition()}setZoomOut(t=this.STEP){this.zoom=Math.max(this.MIN_SCALE,this.zoom-t),this.setPosition()}setZoomBest(){this.reset(),this.setPosition()}setZoomOriginal(){this.reset(),this.setPosition()}setRotate(){this.rotate+=.25,this.setPosition()}reset(){this.transformX=this.TRANSFORMX,this.transformY=this.TRANSFORMY,this.oTransformX=this.transformX,this.oTransformY=this.transformY,this.zoom=this.ZOOM}setPosition(){this.el.style.transform=`translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`}}function f(o,t,n){let r=o;return t&&(r+=`__${t}`),n&&(r+=`--${n}`),r}function Z(o,t=!1){const n=t?`.devui-${o}`:`devui-${o}`;return{b:()=>f(n),e:a=>a?f(n,a):"",m:a=>a?f(n,"",a):"",em:(a,L)=>a&&L?f(n,a,L):""}}var R="",b=e.defineComponent({name:"DImagePreview",props:c,emits:[],setup(o){const t=Z("image-preview");let n=null;const r=e.ref(0),l=e.computed(()=>o.previewUrlList[r.value]),d=o.zIndex?{zIndex:o.zIndex}:{},m=o.backDropZIndex?{zIndex:o.backDropZIndex}:{};function a(){const h=document.querySelector(`.${t.e("main-image")}`);n=new I(h)}function L(){r.value=o.previewUrlList.findIndex(h=>h===o.url)}function g(){r.value=r.value<=0?o.previewUrlList.length-1:r.value-1}function p(){r.value=r.value>=o.previewUrlList.length-1?0:r.value+1}function V(){u.close()}function P(){n.setZoomIn()}function $(){n.setZoomOut()}function D(){n.setRotate()}function A(){n.setZoomBest()}function E(){n.setZoomOriginal()}function k(h){h.defaultPrevented||(h.code==="Escape"?V():h.code==="ArrowLeft"?g():h.code==="ArrowRight"&&p())}function S(){document.addEventListener("keydown",k,!1)}function O(){document.removeEventListener("keydown",k,!1)}return e.onMounted(()=>{L(),a(),S()}),e.onUnmounted(()=>{O()}),()=>e.createVNode(e.Fragment,null,[e.createVNode("div",{class:t.b(),style:d},[e.createVNode("img",{class:t.e("main-image"),src:l.value},null),e.createVNode("button",{class:t.e("close-btn"),onClick:V},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"},null)])])]),e.createVNode("button",{class:t.e("arrow-left"),onClick:g},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("button",{class:t.e("arrow-right"),onClick:p},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("div",{class:t.e("toolbar")},[e.createVNode("button",{onClick:P},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:`M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z
|
|
2
2
|
M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847
|
|
3
3
|
C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675
|
|
4
4
|
3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906
|
|
@@ -23,4 +23,4 @@ var X=Object.defineProperty;var Y=(l,e,c)=>e in l?X(l,e,{enumerable:!0,configura
|
|
|
23
23
|
L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16
|
|
24
24
|
L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994
|
|
25
25
|
L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914
|
|
26
|
-
L1.578,0.914 L5.011,4.348 L4.365,4.994 Z`,fill:"#293040","fill-rule":"nonzero"},null)])])]),e.createVNode("button",{onClick:E},[e.createVNode("span",null,[e.createTextVNode("1:1")])])])]),e.createVNode("div",{class:t.e("bg"),style:m},null)])}});function M(o){return e.createApp(b,o)}class u{static open(t){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),M(t).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var t,n;(t=this.$body)==null||t.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&((n=this.$body)==null||n.removeChild(this.$div)),this.$body=null,this.$div=null}}i(u,"$body",null),i(u,"$div",null),i(u,"$overflow","");function x(o){u.open({url:o.url,previewUrlList:o.previewUrlList,zIndex:o.zIndex,backDropZIndex:o.backDropZIndex})}function N(){u.close()}function C(o){return[...o.querySelectorAll("img")].map(
|
|
26
|
+
L1.578,0.914 L5.011,4.348 L4.365,4.994 Z`,fill:"#293040","fill-rule":"nonzero"},null)])])]),e.createVNode("button",{onClick:E},[e.createVNode("span",null,[e.createTextVNode("1:1")])])])]),e.createVNode("div",{class:t.e("bg"),style:m},null)])}});function M(o){return e.createApp(b,o)}class u{static open(t){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),M(t).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var t,n;(t=this.$body)==null||t.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&((n=this.$body)==null||n.removeChild(this.$div)),this.$body=null,this.$div=null}}i(u,"$body",null),i(u,"$div",null),i(u,"$overflow","");function x(o){u.open({url:o.url,previewUrlList:o.previewUrlList,zIndex:o.zIndex,backDropZIndex:o.backDropZIndex})}function N(){u.close()}function C(o){return[...o.querySelectorAll("img")].map(n=>n.getAttribute("src"))}function v(o){var r;const t=o.currentTarget,n=o.target;if(((r=n==null?void 0:n.nodeName)==null?void 0:r.toLowerCase())==="img"){const l=C(t),d=n.getAttribute("src");if(!d)return console.error("attribute is not exist");x({url:d,previewUrlList:l,zIndex:t==null?void 0:t.zIndex,backDropZIndex:t==null?void 0:t.backDropZIndex})}}function w(o){o.addEventListener("click",v)}function z(o){o.removeEventListener("click",v)}var y={mounted(o,t){if(!(t==null?void 0:t.value))return w(o);const{custom:n,disableDefault:r}=t.value;n instanceof Object&&(n.open=()=>{const l=C(o);x({url:l==null?void 0:l[0],previewUrlList:l,zIndex:o==null?void 0:o.zIndex,backDropZIndex:o==null?void 0:o.backDropZIndex})},n.close=()=>N()),!r&&w(o)},unmounted(){N()},updated(o,t){var n,r;if(o.zIndex=(n=t==null?void 0:t.value)==null?void 0:n.zIndex,o.backDropZIndex=(r=t==null?void 0:t.value)==null?void 0:r.backDropZIndex,t==null?void 0:t.value){const{value:{disableDefault:l},oldValue:{disableDefault:d}}=t;l!==d&&(l?z(o):w(o))}}},T={title:"ImagePreview \u56FE\u7247\u9884\u89C8",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(o){o.directive("d-image-preview",y),o.config.globalProperties.$imagePreviewService=u}};s.ImagePreviewDirective=y,s.ImagePreviewService=u,s.default=T,s.imagePreviewProps=c,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
|
package/image-preview/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.devui-image-preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:var(--devui-z-index-full-page-overlay, 1080);display:flex;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path{fill:var(--devui-icon-text, #71757f)}.devui-image-preview__main-image{width:auto;height:auto;max-width:90%;max-height:90%;margin-top:-20px;cursor:grab}.devui-image-preview__close-btn{position:fixed;z-index:var(--devui-z-index-full-page-overlay, 1080);cursor:pointer;width:36px;height:36px;border-radius:50%;border:none;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview__close-btn:hover{background:var(--devui-area, #f5f5f5)}.devui-image-preview__close-btn svg{width:38px;height:18px}.devui-image-preview__arrow-left{position:fixed;z-index:var(--devui-z-index-full-page-overlay, 1080);cursor:pointer;width:36px;height:36px;border-radius:50%;border:none;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;top:50%;left:20px;transform:translateY(-50%)}.devui-image-preview__arrow-left:hover{background:var(--devui-area, #f5f5f5)}.devui-image-preview__arrow-left svg{width:38px;height:18px}.devui-image-preview__arrow-right{position:fixed;z-index:var(--devui-z-index-full-page-overlay, 1080);cursor:pointer;width:36px;height:36px;border-radius:50%;border:none;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;top:50%;right:20px;transform:translateY(-50%)}.devui-image-preview__arrow-right:hover{background:var(--devui-area, #f5f5f5)}.devui-image-preview__arrow-right svg{width:38px;height:18px}.devui-image-preview__toolbar{position:fixed;bottom:0;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12))}.devui-image-preview__toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a);border:none;background-color:transparent;cursor:pointer;outline:0;padding:0}.devui-image-preview__toolbar .devui-image-preview__index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview__toolbar>:not(:first-child){margin-left:20px}.devui-image-preview__bg{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-full-page-overlay, 1080) - 1);background:var(--devui-shadow, rgba(37, 43, 58, .24))}
|
|
1
|
+
.devui-image-preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:var(--devui-z-index-full-page-overlay, 1080);display:flex;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path{fill:var(--devui-icon-text, #71757f)}.devui-image-preview__main-image{width:auto;height:auto;max-width:90%;max-height:90%;margin-top:-20px;cursor:grab}.devui-image-preview__close-btn{position:fixed;z-index:var(--devui-z-index-full-page-overlay, 1080);cursor:pointer;width:36px;height:36px;border-radius:50%;border:none;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview__close-btn:hover{background:var(--devui-area, #f5f5f5)}.devui-image-preview__close-btn svg{width:38px;height:18px}.devui-image-preview__arrow-left{position:fixed;z-index:var(--devui-z-index-full-page-overlay, 1080);cursor:pointer;width:36px;height:36px;border-radius:50%;border:none;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;top:50%;left:20px;transform:translateY(-50%)}.devui-image-preview__arrow-left:hover{background:var(--devui-area, #f5f5f5)}.devui-image-preview__arrow-left svg{width:38px;height:18px}.devui-image-preview__arrow-right{position:fixed;z-index:var(--devui-z-index-full-page-overlay, 1080);cursor:pointer;width:36px;height:36px;border-radius:50%;border:none;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;top:50%;right:20px;transform:translateY(-50%)}.devui-image-preview__arrow-right:hover{background:var(--devui-area, #f5f5f5)}.devui-image-preview__arrow-right svg{width:38px;height:18px}.devui-image-preview__toolbar{position:fixed;bottom:0;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12))}.devui-image-preview__toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a);border:none;background-color:transparent;cursor:pointer;outline:0;padding:0}.devui-image-preview__toolbar .devui-image-preview__index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview__toolbar>:not(:first-child){margin-left:20px}.devui-image-preview__bg{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-full-page-overlay, 1080) - 1);background:var(--devui-shadow, rgba(37, 43, 58, .24));border-radius:var(--devui-border-radius, 2px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24))}
|