vft 0.0.50 → 0.0.51

package/theme-style/src/alert.scss

@@ -0,0 +1,115 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$name: alert;
+
+@include b($name) {
+  @include set-component-css-var($name, $alert);
+
+  width: 100%;
+  padding: getCssVar('alert', 'padding');
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: getCssVar('alert', 'border-radius-base');
+  position: relative;
+  background-color: getCssVar('color', 'white');
+  overflow: hidden;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  transition: opacity getCssVar('transition-duration', 'fast');
+
+  @include when(light) {
+    .#{$namespace}-alert__close-btn {
+      color: getCssVar('text-color', 'placeholder');
+    }
+  }
+
+  @include when(dark) {
+    .#{$namespace}-alert__close-btn {
+      color: getCssVar('color', 'white');
+    }
+    .#{$namespace}-alert__description {
+      color: getCssVar('color', 'white');
+    }
+  }
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @each $type in (success, info, warning, error) {
+    @include m($type) {
+      @include css-var-from-global(
+        ('alert', 'bg-color'),
+        ($type, 'color', 'light-9')
+      );
+
+      &.is-light {
+        background-color: getCssVar('alert', 'bg-color');
+        color: getCssVar($type,'color');
+
+        .#{$namespace}-alert__description {
+          color: getCssVar($type, 'color');
+        }
+      }
+
+      &.is-dark {
+        background-color: getCssVar($type, 'color');
+        color: getCssVar('color', 'white');
+      }
+    }
+  }
+
+  @include e(content) {
+    display: table-cell;
+    padding: 0 8px;
+  }
+
+  & .#{$namespace}-alert__icon {
+    font-size: getCssVar('alert', 'icon-size');
+    width: getCssVar('alert', 'icon-size');
+
+    @include when(big) {
+      font-size: getCssVar('alert', 'icon-large-size');
+      width: getCssVar('alert', 'icon-large-size');
+    }
+  }
+
+  @include e(title) {
+    font-size: getCssVar('alert', 'title-font-size');
+    line-height: 18px;
+    vertical-align: text-top;
+    @include when(bold) {
+      font-weight: bold;
+    }
+  }
+
+  & .#{$namespace}-alert__description {
+    font-size: getCssVar('alert', 'description-font-size');
+    margin: 5px 0 0 0;
+  }
+
+  & .#{$namespace}-alert__close-btn {
+    font-size: getCssVar('alert', 'close-font-size');
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 15px;
+    cursor: pointer;
+
+    @include when(customed) {
+      font-style: normal;
+      font-size: getCssVar('alert', 'close-customed-font-size');
+      top: 9px;
+    }
+  }
+}
+
+.#{$namespace}-alert-fade-enter-from,
+.#{$namespace}-alert-fade-leave-active {
+  opacity: 0;
+}

package/theme-style/src/avatar.scss

@@ -15,7 +15,7 @@ $name: avatar;
 
   display: inline-flex;
   justify-content: center;
-  align-items: center;
+  //align-items: center;
   box-sizing: border-box;
   text-align: center;
   overflow: hidden;
@@ -39,6 +39,7 @@ $name: avatar;
   }
 
   @include m(icon) {
+    background: transparent;
     font-size: getCssVar('avatar', 'icon-size');
   }
 

package/theme-style/src/common/var.scss

@@ -34,8 +34,6 @@ $colors: map.deep-merge(
   $colors
 );
 
-$nprogress-color: #409eff !default;
-
 $color-white: map.get($colors, "white") !default;
 $color-black: map.get($colors, "black") !default;
 $primary-color: getCssVar("primary-color") !default;
@@ -1121,3 +1119,38 @@ $form: map.merge(
     ),
     $form
 );
+
+// Dialog
+// css3 var in packages/theme-chalk/src/dialog.scss
+$dialog: () !default;
+$dialog: map.merge(
+    (
+      'width': 50%,
+      'margin-top': 15vh,
+      'bg-color': getCssVar('bg-color'),
+      'box-shadow': getCssVar('box-shadow'),
+      'title-font-size': getCssVar('font-size-large'),
+      'content-font-size': 14px,
+      'font-line-height': getCssVar('font-line-height-primary'),
+      'padding-primary': 20px,
+      'border-radius': getCssVar('border-radius-small'),
+    ),
+    $dialog
+);
+
+// Alert
+// css3 var in packages/theme-chalk/src/alert.scss
+$alert: () !default;
+$alert: map.merge(
+    (
+      'padding': 8px 16px,
+      'border-radius-base': getCssVar('border-radius-base'),
+      'title-font-size': 13px,
+      'description-font-size': 12px,
+      'close-font-size': 12px,
+      'close-customed-font-size': 13px,
+      'icon-size': 16px,
+      'icon-large-size': 28px,
+    ),
+    $alert
+);

package/theme-style/src/dialog.scss

@@ -0,0 +1,185 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$name: dialog;
+
+@include b($name) {
+  @include set-component-css-var('dialog', $dialog);
+
+  position: relative;
+  margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px;
+  background: getCssVar('dialog', 'bg-color');
+  border-radius: getCssVar('dialog', 'border-radius');
+  box-shadow: getCssVar('dialog', 'box-shadow');
+  box-sizing: border-box;
+  width: var(#{getCssVarName('dialog-width')}, 50%);
+
+  &:focus {
+    outline: none !important;
+  }
+
+  @include when(align-center) {
+    margin: auto;
+  }
+
+  @include when(fullscreen) {
+    @include set-css-var-value('dialog-width', 100%);
+    @include set-css-var-value('dialog-margin-top', 0);
+
+    margin-bottom: 0;
+    height: 100%;
+    overflow: auto;
+  }
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0;
+  }
+
+  @include when(draggable) {
+    @include e(header) {
+      cursor: move;
+      user-select: none;
+    }
+  }
+
+  @include e(header) {
+    padding: getCssVar('dialog', 'padding-primary');
+    padding-bottom: 10px;
+    margin-right: 16px;
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: 6px;
+    right: 0;
+    padding: 0;
+    width: 54px;
+    height: 54px;
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: var(
+      #{getCssVarName('message-close-size')},
+      map.get($message, 'close-size')
+    );
+
+    .#{$namespace}-dialog__close {
+      color: getCssVar('color', 'info');
+      font-size: inherit;
+    }
+
+    &:focus,
+    &:hover {
+      .#{$namespace}-dialog__close {
+        color: getCssVar('color', 'primary');
+      }
+    }
+  }
+
+  @include e(title) {
+    line-height: getCssVar('dialog-font-line-height');
+    font-size: getCssVar('dialog-title-font-size');
+    color: getCssVar('text-color', 'primary');
+  }
+
+  @include e(body) {
+    padding: calc(#{getCssVar('dialog-padding-primary')} + 10px)
+      getCssVar('dialog-padding-primary');
+    color: getCssVar('text-color', 'regular');
+    font-size: getCssVar('dialog-content-font-size');
+  }
+
+  @include e(footer) {
+    padding: getCssVar('dialog-padding-primary');
+    padding-top: 10px;
+    text-align: right;
+    box-sizing: border-box;
+  }
+
+  // 内容居中布局
+  @include m(center) {
+    text-align: center;
+
+    @include e(body) {
+      text-align: initial;
+      padding: 25px calc(#{getCssVar('dialog-padding-primary')} + 5px) 30px;
+    }
+
+    @include e(footer) {
+      text-align: inherit;
+    }
+  }
+}
+
+.#{$namespace}-overlay-dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+}
+
+.dialog-fade-enter-active {
+  animation: modal-fade-in getCssVar('transition-duration');
+  .#{$namespace}-overlay-dialog {
+    animation: dialog-fade-in getCssVar('transition-duration');
+  }
+}
+
+.dialog-fade-leave-active {
+  animation: modal-fade-out getCssVar('transition-duration');
+  .#{$namespace}-overlay-dialog {
+    animation: dialog-fade-out getCssVar('transition-duration');
+  }
+}
+
+@keyframes dialog-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes modal-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/theme-style/src/image-viewer.scss

@@ -0,0 +1,147 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@mixin op-icon() {
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+  color: #fff;
+  background-color: getCssVar('text', 'regular-color');
+  border-color: #fff;
+}
+
+@include b(image-viewer) {
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    i {
+      font-size: inherit !important;
+      cursor: pointer;
+    }
+  }
+
+  @include e(btn) {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    opacity: 0.8;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+
+    .#{$namespace}-icon {
+      font-size: inherit;
+      cursor: pointer;
+    }
+  }
+
+  @include e(close) {
+    top: 40px;
+    right: 40px;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+  }
+
+  @include e(canvas) {
+    position: static;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+  }
+
+  @include e(actions) {
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: getCssVar('text-color', 'regular');
+    border-color: #fff;
+    border-radius: 22px;
+
+    @include e(actions__inner) {
+      width: 100%;
+      height: 100%;
+      text-align: justify;
+      cursor: default;
+      font-size: 23px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+  }
+
+  @include e(prev) {
+    top: 50%;
+    transform: translateY(-50%);
+    left: 40px;
+    @include op-icon();
+  }
+
+  @include e(next) {
+    top: 50%;
+    transform: translateY(-50%);
+    right: 40px;
+    text-indent: 2px;
+    @include op-icon();
+  }
+
+  @include e(close) {
+    @include op-icon();
+  }
+
+  @include e(mask) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
+    background: #000;
+  }
+
+
+}
+
+.viewer-fade-enter-active {
+  animation: viewer-fade-in getCssVar('transition-duration');
+}
+
+.viewer-fade-leave-active {
+  animation: viewer-fade-out getCssVar('transition-duration');
+}
+
+@keyframes viewer-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes viewer-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}

package/theme-style/src/image.scss

@@ -39,7 +39,7 @@
     align-items: center;
     font-size: 14px;
     background: getCssVar('fill-color', 'light');
-    color: getCssVar('text-color', 'placeholder');
+    color: getCssVar('text', 'placeholder-color');
     vertical-align: middle;
   }
 

package/theme-style/src/index.scss

@@ -25,6 +25,7 @@
 @use './full-screen.scss';
 @use './icon-text.scss';
 @use './image.scss';
+@use './image-viewer.scss';
 @use './input.scss';
 @use './link.scss';
 @use './pagination.scss';
@@ -65,6 +66,8 @@
 @use './virtual-list.scss';
 @use './verify-code.scss';
 @use './table.scss';
+@use './dialog.scss';
+@use './alert.scss';
 // md comp
 @use './md-comment.scss';
 @use './md-tabs.scss';

package/theme-style/src/side-menu.scss

@@ -16,6 +16,7 @@ $name: side-menu;
   width: getCompCssVar('width');
   display: flex;
   flex-direction: column;
+  border-right: getCssVar('menu-border-right');
 
   @include m(fixed) {
     position: fixed;
@@ -54,6 +55,9 @@ $name: side-menu;
     overflow-x: hidden;
   }
 
+  .#{$namespace}-menu {
+    border-right: none;
+  }
 }
 
 @include e(popper) {

package/theme-style/vft-alert.css

@@ -0,0 +1 @@
+.vft-alert{--vft-alert-padding:8px 16px;--vft-alert-border-radius-base:var(--vft-border-radius-base);--vft-alert-title-font-size:13px;--vft-alert-description-font-size:12px;--vft-alert-close-font-size:12px;--vft-alert-close-customed-font-size:13px;--vft-alert-icon-size:16px;--vft-alert-icon-large-size:28px;width:100%;padding:var(--vft-alert-padding);margin:0;box-sizing:border-box;border-radius:var(--vft-alert-border-radius-base);position:relative;background-color:var(--vft-color-white);overflow:hidden;opacity:1;display:flex;align-items:center;transition:opacity var(--vft-transition-duration-fast)}.vft-alert.is-light .vft-alert__close-btn{color:var(--vft-text-color-placeholder)}.vft-alert.is-dark .vft-alert__close-btn{color:var(--vft-color-white)}.vft-alert.is-dark .vft-alert__description{color:var(--vft-color-white)}.vft-alert.is-center{justify-content:center}.vft-alert--success{--vft-alert-bg-color:var(--vft-success-color-light-9)}.vft-alert--success.is-light{background-color:var(--vft-alert-bg-color);color:var(--vft-success-color)}.vft-alert--success.is-light .vft-alert__description{color:var(--vft-success-color)}.vft-alert--success.is-dark{background-color:var(--vft-success-color);color:var(--vft-color-white)}.vft-alert--info{--vft-alert-bg-color:var(--vft-info-color-light-9)}.vft-alert--info.is-light{background-color:var(--vft-alert-bg-color);color:var(--vft-info-color)}.vft-alert--info.is-light .vft-alert__description{color:var(--vft-info-color)}.vft-alert--info.is-dark{background-color:var(--vft-info-color);color:var(--vft-color-white)}.vft-alert--warning{--vft-alert-bg-color:var(--vft-warning-color-light-9)}.vft-alert--warning.is-light{background-color:var(--vft-alert-bg-color);color:var(--vft-warning-color)}.vft-alert--warning.is-light .vft-alert__description{color:var(--vft-warning-color)}.vft-alert--warning.is-dark{background-color:var(--vft-warning-color);color:var(--vft-color-white)}.vft-alert--error{--vft-alert-bg-color:var(--vft-error-color-light-9)}.vft-alert--error.is-light{background-color:var(--vft-alert-bg-color);color:var(--vft-error-color)}.vft-alert--error.is-light .vft-alert__description{color:var(--vft-error-color)}.vft-alert--error.is-dark{background-color:var(--vft-error-color);color:var(--vft-color-white)}.vft-alert__content{display:table-cell;padding:0 8px}.vft-alert .vft-alert__icon{font-size:var(--vft-alert-icon-size);width:var(--vft-alert-icon-size)}.vft-alert .vft-alert__icon.is-big{font-size:var(--vft-alert-icon-large-size);width:var(--vft-alert-icon-large-size)}.vft-alert__title{font-size:var(--vft-alert-title-font-size);line-height:18px;vertical-align:text-top}.vft-alert__title.is-bold{font-weight:700}.vft-alert .vft-alert__description{font-size:var(--vft-alert-description-font-size);margin:5px 0 0 0}.vft-alert .vft-alert__close-btn{font-size:var(--vft-alert-close-font-size);opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.vft-alert .vft-alert__close-btn.is-customed{font-style:normal;font-size:var(--vft-alert-close-customed-font-size);top:9px}.vft-alert-fade-enter-from,.vft-alert-fade-leave-active{opacity:0}

package/theme-style/vft-avatar.css

@@ -1 +1 @@
-:root{--vft-avatar-text-color:var(--vft-color-white);--vft-avatar-bg-color:var(--vft-text-disabled-color);--vft-avatar-text-size:14px;--vft-avatar-icon-size:18px;--vft-avatar-border-radius:var(--vft-border-radius-base)}.vft-avatar{--vft-avatar-size-large:56px;--vft-avatar-size:40px;--vft-avatar-size-small:24px;--vft-avatar-size:40px;display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--vft-avatar-text-color);background:var(--vft-avatar-bg-color);width:var(--vft-avatar-size);height:var(--vft-avatar-size);font-size:var(--vft-avatar-text-size)}.vft-avatar>img{display:block;height:100%}.vft-avatar--circle{border-radius:50%}.vft-avatar--square{border-radius:var(--vft-avatar-border-radius)}.vft-avatar--icon{font-size:var(--vft-avatar-icon-size)}.vft-avatar--small{--vft-avatar-size:24px}.vft-avatar--large{--vft-avatar-size:56px}
+:root{--vft-avatar-text-color:var(--vft-color-white);--vft-avatar-bg-color:var(--vft-text-disabled-color);--vft-avatar-text-size:14px;--vft-avatar-icon-size:18px;--vft-avatar-border-radius:var(--vft-border-radius-base)}.vft-avatar{--vft-avatar-size-large:56px;--vft-avatar-size:40px;--vft-avatar-size-small:24px;--vft-avatar-size:40px;display:inline-flex;justify-content:center;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--vft-avatar-text-color);background:var(--vft-avatar-bg-color);width:var(--vft-avatar-size);height:var(--vft-avatar-size);font-size:var(--vft-avatar-text-size)}.vft-avatar>img{display:block;height:100%}.vft-avatar--circle{border-radius:50%}.vft-avatar--square{border-radius:var(--vft-avatar-border-radius)}.vft-avatar--icon{background:0 0;font-size:var(--vft-avatar-icon-size)}.vft-avatar--small{--vft-avatar-size:24px}.vft-avatar--large{--vft-avatar-size:56px}

package/theme-style/vft-dialog.css

@@ -0,0 +1 @@
+.vft-dialog{--vft-dialog-width:50%;--vft-dialog-margin-top:15vh;--vft-dialog-bg-color:var(--vft-bg-color);--vft-dialog-box-shadow:var(--vft-box-shadow);--vft-dialog-title-font-size:var(--vft-font-size-large);--vft-dialog-content-font-size:14px;--vft-dialog-font-line-height:var(--vft-font-line-height-primary);--vft-dialog-padding-primary:20px;--vft-dialog-border-radius:var(--vft-border-radius-small);position:relative;margin:var(--vft-dialog-margin-top,15vh) auto 50px;background:var(--vft-dialog-bg-color);border-radius:var(--vft-dialog-border-radius);box-shadow:var(--vft-dialog-box-shadow);box-sizing:border-box;width:var(--vft-dialog-width,50%)}.vft-dialog:focus{outline:0!important}.vft-dialog.is-align-center{margin:auto}.vft-dialog.is-fullscreen{--vft-dialog-width:100%;--vft-dialog-margin-top:0;margin-bottom:0;height:100%;overflow:auto}.vft-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.vft-dialog.is-draggable .vft-dialog__header{cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vft-dialog__header{padding:var(--vft-dialog-padding-primary);padding-bottom:10px;margin-right:16px}.vft-dialog__headerbtn{position:absolute;top:6px;right:0;padding:0;width:54px;height:54px;background:0 0;border:none;outline:0;cursor:pointer;font-size:var(--vft-message-close-size,)}.vft-dialog__headerbtn .vft-dialog__close{color:var(--vft-color-info);font-size:inherit}.vft-dialog__headerbtn:focus .vft-dialog__close,.vft-dialog__headerbtn:hover .vft-dialog__close{color:var(--vft-color-primary)}.vft-dialog__title{line-height:var(--vft-dialog-font-line-height);font-size:var(--vft-dialog-title-font-size);color:var(--vft-text-color-primary)}.vft-dialog__body{padding:calc(var(--vft-dialog-padding-primary) + 10px) var(--vft-dialog-padding-primary);color:var(--vft-text-color-regular);font-size:var(--vft-dialog-content-font-size)}.vft-dialog__footer{padding:var(--vft-dialog-padding-primary);padding-top:10px;text-align:right;box-sizing:border-box}.vft-dialog--center{text-align:center}.vft-dialog--center .vft-dialog__body{text-align:initial;padding:25px calc(var(--vft-dialog-padding-primary) + 5px) 30px}.vft-dialog--center .vft-dialog__footer{text-align:inherit}.vft-overlay-dialog{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto}.dialog-fade-enter-active{animation:modal-fade-in var(--vft-transition-duration)}.dialog-fade-enter-active .vft-overlay-dialog{animation:dialog-fade-in var(--vft-transition-duration)}.dialog-fade-leave-active{animation:modal-fade-out var(--vft-transition-duration)}.dialog-fade-leave-active .vft-overlay-dialog{animation:dialog-fade-out var(--vft-transition-duration)}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-20px,0);opacity:0}}@keyframes modal-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes modal-fade-out{0%{opacity:1}100%{opacity:0}}

package/theme-style/vft-image-viewer.css

@@ -0,0 +1 @@
+.vft-image-viewer__wrapper{position:fixed;top:0;right:0;bottom:0;left:0}.vft-image-viewer__wrapper i{font-size:inherit!important;cursor:pointer}.vft-image-viewer__btn{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:.8;cursor:pointer;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vft-image-viewer__btn .vft-icon{font-size:inherit;cursor:pointer}.vft-image-viewer__close{top:40px;right:40px;width:40px;height:40px;font-size:40px}.vft-image-viewer__canvas{position:static;width:100%;height:100%;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vft-image-viewer__actions{left:50%;bottom:30px;transform:translateX(-50%);width:282px;height:44px;padding:0 23px;background-color:var(--vft-text-color-regular);border-color:#fff;border-radius:22px}.vft-image-viewer__actions__inner{width:100%;height:100%;text-align:justify;cursor:default;font-size:23px;color:#fff;display:flex;align-items:center;justify-content:space-around}.vft-image-viewer__prev{top:50%;transform:translateY(-50%);left:40px;width:44px;height:44px;font-size:24px;color:#fff;background-color:var(--vft-text-regular-color);border-color:#fff}.vft-image-viewer__next{top:50%;transform:translateY(-50%);right:40px;text-indent:2px;width:44px;height:44px;font-size:24px;color:#fff;background-color:var(--vft-text-regular-color);border-color:#fff}.vft-image-viewer__close{width:44px;height:44px;font-size:24px;color:#fff;background-color:var(--vft-text-regular-color);border-color:#fff}.vft-image-viewer__mask{position:absolute;width:100%;height:100%;top:0;left:0;opacity:.5;background:#000}.viewer-fade-enter-active{animation:viewer-fade-in var(--vft-transition-duration)}.viewer-fade-leave-active{animation:viewer-fade-out var(--vft-transition-duration)}@keyframes viewer-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes viewer-fade-out{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-20px,0);opacity:0}}

package/theme-style/vft-image.css

@@ -1 +1 @@
-.vft-image__error,.vft-image__inner,.vft-image__placeholder,.vft-image__wrapper{width:100%;height:100%}.vft-image{position:relative;display:inline-block;overflow:hidden}.vft-image__inner{vertical-align:top;opacity:1}.vft-image__inner.is-loading{opacity:0}.vft-image__wrapper{position:absolute;top:0;left:0}.vft-image__placeholder{background:var(--vft-fill-color-light)}.vft-image__error{display:flex;justify-content:center;align-items:center;font-size:14px;background:var(--vft-fill-color-light);color:var(--vft-text-color-placeholder);vertical-align:middle}.vft-image__preview{cursor:pointer}
+.vft-image__error,.vft-image__inner,.vft-image__placeholder,.vft-image__wrapper{width:100%;height:100%}.vft-image{position:relative;display:inline-block;overflow:hidden}.vft-image__inner{vertical-align:top;opacity:1}.vft-image__inner.is-loading{opacity:0}.vft-image__wrapper{position:absolute;top:0;left:0}.vft-image__placeholder{background:var(--vft-fill-color-light)}.vft-image__error{display:flex;justify-content:center;align-items:center;font-size:14px;background:var(--vft-fill-color-light);color:var(--vft-text-placeholder-color);vertical-align:middle}.vft-image__preview{cursor:pointer}

package/theme-style/vft-side-menu.css

@@ -1 +1 @@
-:root{--vft-side-menu-border:var(--vft-menu-border-right);--vft-side-menu-width:200px;--vft-side-menu-collapse-width:200px;--vft-side-menu-scroll-mr:0}.vft-side-menu{overflow-x:hidden;transition:width .2s;width:var(--vft-side-menu-width);display:flex;flex-direction:column}.vft-side-menu--fixed{position:fixed;left:0;z-index:1}.vft-side-menu__top{border-bottom:var(--vft-side-menu-border);z-index:1;background-color:#fff}.vft-side-menu__bottom{border-top:var(--vft-side-menu-border);position:absolute;bottom:0;width:100%}.vft-side-menu__collapse{cursor:pointer;height:40px;padding:0 16px;display:flex;align-items:center;border-right:var(--vft-menu-border-right)}.vft-side-menu__collapse .vft-icon{position:absolute;right:20px}.vft-side-menu__con{overflow-y:auto;overflow-y:overlay;overflow-x:hidden}.vft-side-menu__popper{margin-right:var(--vft-side-menu-scroll-mr)}.vft-side-menu__popper .vft-menu--popup{overflow-y:auto;overflow-y:overlay;box-shadow:none;max-height:calc(100vh - 200px)}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar{z-index:11;width:6px}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar:horizontal{height:6px}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#c0c4cc;border:0 solid transparent}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-thumb:hover{background:#c0c4cc}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-corner{background:0 0}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-track{background:0 0}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-track-piece{background:0 0;width:6px}
+:root{--vft-side-menu-border:var(--vft-menu-border-right);--vft-side-menu-width:200px;--vft-side-menu-collapse-width:200px;--vft-side-menu-scroll-mr:0}.vft-side-menu{overflow-x:hidden;transition:width .2s;width:var(--vft-side-menu-width);display:flex;flex-direction:column;border-right:var(--vft-menu-border-right)}.vft-side-menu--fixed{position:fixed;left:0;z-index:1}.vft-side-menu__top{border-bottom:var(--vft-side-menu-border);z-index:1;background-color:#fff}.vft-side-menu__bottom{border-top:var(--vft-side-menu-border);position:absolute;bottom:0;width:100%}.vft-side-menu__collapse{cursor:pointer;height:40px;padding:0 16px;display:flex;align-items:center;border-right:var(--vft-menu-border-right)}.vft-side-menu__collapse .vft-icon{position:absolute;right:20px}.vft-side-menu__con{overflow-y:auto;overflow-y:overlay;overflow-x:hidden}.vft-side-menu .vft-menu{border-right:none}.vft-side-menu__popper{margin-right:var(--vft-side-menu-scroll-mr)}.vft-side-menu__popper .vft-menu--popup{overflow-y:auto;overflow-y:overlay;box-shadow:none;max-height:calc(100vh - 200px)}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar{z-index:11;width:6px}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar:horizontal{height:6px}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#c0c4cc;border:0 solid transparent}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-thumb:hover{background:#c0c4cc}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-corner{background:0 0}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-track{background:0 0}.vft-side-menu__popper .vft-menu--popup::-webkit-scrollbar-track-piece{background:0 0;width:6px}

package/es/common/directives/dist/es/index.js

@@ -1,37 +0,0 @@
-import { isClient as x, isElement as C } from "@vft/utils";
-import "@vft/use";
-var s = /* @__PURE__ */ new Map(), i;
-x && (document.addEventListener("mousedown", (e) => i = e), document.addEventListener("mouseup", (e) => {
-  for (const t of s.values())
-    for (const { documentHandler: n } of t)
-      n(e, i);
-}));
-function l(e, t) {
-  let n = [];
-  return Array.isArray(t.arg) ? n = t.arg : C(t.arg) && n.push(t.arg), function(o, a) {
-    const r = t.instance.popperRef, c = o.target, u = a == null ? void 0 : a.target, f = !t || !t.instance, p = !c || !u, v = e.contains(c) || e.contains(u), h = e === c, g = n.length && n.some((d) => d == null ? void 0 : d.contains(c)) || n.length && n.includes(u), m = r && (r.contains(c) || r.contains(u));
-    f || p || v || h || g || m || t.value(o, a);
-  };
-}
-var E = {
-  beforeMount(e, t) {
-    s.has(e) || s.set(e, []), s.get(e).push({
-      documentHandler: l(e, t),
-      bindingFn: t.value
-    });
-  },
-  updated(e, t) {
-    s.has(e) || s.set(e, []);
-    const n = s.get(e), o = n.findIndex((r) => r.bindingFn === t.oldValue), a = {
-      documentHandler: l(e, t),
-      bindingFn: t.value
-    };
-    o >= 0 ? n.splice(o, 1, a) : n.push(a);
-  },
-  unmounted(e) {
-    s.delete(e);
-  }
-}, y = E;
-export {
-  y as ClickOutside
-};